mirror of
https://github.com/litruv/lit.ruv.wtf.git
synced 2026-07-24 02:36:02 +10:00
Add static blog generator and initial blog posts
- Implement StaticBlogGenerator class for generating static HTML blog pages from markdown data. - Create initial blog index page (blog.html) with links to posts. - Add individual blog post pages for "Markdown Formatting Test", "Building Interactive Node Graphs", "Welcome to My Blog", "test d d d d", and "testddd". - Include markdown rendering capabilities for formatting content in blog posts.
This commit is contained in:
110
website/blog/markdown-test/index.html
Normal file
110
website/blog/markdown-test/index.html
Normal file
@@ -0,0 +1,110 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Markdown Formatting Test - Blog</title>
|
||||
<meta name="description" content="Lit.ruv.wtf blog posts.">
|
||||
<link rel="canonical" href="https://lit.ruv.wtf/blog/markdown-test/">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/logos/32px.png">
|
||||
<link rel="icon" type="image/png" sizes="64x64" href="/logos/64px.png">
|
||||
<link rel="stylesheet" href="/styles/main.css">
|
||||
</head>
|
||||
<body class="blog-page">
|
||||
<nav class="quick-links" aria-label="Primary">
|
||||
<a href="/blog.html" class="quick-link">blog</a>
|
||||
<a href="/docs/" class="quick-link">docs</a>
|
||||
<a href="https://github.com/litruv" target="_blank" rel="noopener" class="quick-link">github</a>
|
||||
<a href="https://bsky.app/profile/lit.mates.dev" target="_blank" rel="noopener" class="quick-link">bluesky</a>
|
||||
<a href="/materials" class="quick-link">materials</a>
|
||||
</nav>
|
||||
<main class="blog-shell">
|
||||
<a class="blog-logo-link" href="/" aria-label="Back to main site">
|
||||
<img src="/logos/LogoFull.svg" alt="lit.ruv.wtf" class="blog-logo" />
|
||||
</a>
|
||||
<article class="blog-card" aria-labelledby="blog-post-title">
|
||||
<header class="blog-post-header">
|
||||
<h1 id="blog-post-title" class="blog-post-title">Markdown Formatting Test</h1>
|
||||
<p class="blog-post-meta"><span>September 11, 2026</span><span aria-hidden="true">-</span><span>Test Author</span></p>
|
||||
<div class="blog-post-tags"><span class="blog-tag">test</span><span class="blog-tag">formatting</span><span class="blog-tag">markdown</span></div>
|
||||
</header>
|
||||
<section class="blog-post-content"><h1 class="md-h1">Heading 1 test 123</h1>
|
||||
<h2 class="md-h2">Heading 2</h2>
|
||||
<h3 class="md-h3">Heading 3</h3>
|
||||
<h4 class="md-h4">Heading 4</h4>
|
||||
<h5 class="md-h5">Heading 5</h5>
|
||||
<h6 class="md-h6">Heading 6</h6>
|
||||
<h2 class="md-h2">Text Formatting</h2>
|
||||
<p class="md-p">This is <strong>bold text</strong> and this is <em>italic text</em> and this is <strong><em>bold italic text</em></strong>.</p>
|
||||
<p class="md-p">Here's some <code class="md-code">inline code</code> in a sentence.</p>
|
||||
<h2 class="md-h2">Links</h2>
|
||||
<p class="md-p">Here's a <a class="md-link" href="https://example.com" rel="noopener noreferrer" target="_blank">regular link</a> and here's a <a class="md-link" href="https://youtube.com/watch?v=test" rel="noopener noreferrer" target="_blank">YouTube link</a>.</p>
|
||||
<h2 class="md-h2">Lists</h2>
|
||||
<p class="md-p">Unordered list:</p>
|
||||
<ul class="md-ul"><li class="md-li">First item</li></ul>
|
||||
<ul class="md-ul"><li class="md-li">Second item</li></ul>
|
||||
<ul class="md-ul"><li class="md-li">Third item</li></ul>
|
||||
<p class="md-p">Ordered list:</p>
|
||||
<ol class="md-ol"><li class="md-li">First step</li><li class="md-li">Second step</li><li class="md-li">Third step</li></ol>
|
||||
<h2 class="md-h2">Code Blocks</h2>
|
||||
<p class="md-p">Standard JavaScript:</p>
|
||||
<pre class="md-pre"><code class=" language-javascript">const hello = "world";
|
||||
console.log(hello);
|
||||
|
||||
function test() {
|
||||
return true;
|
||||
}</code></pre>
|
||||
<p class="md-p">Python with syntax highlighting:</p>
|
||||
<pre class="md-pre"><code class=" language-python">def hello_world():
|
||||
print("Hello, World!")
|
||||
return True</code></pre>
|
||||
<p class="md-p">Code with max height (200px):</p>
|
||||
<pre class="md-pre"><code class=" language-javascript">// This is a long code block that will scroll
|
||||
const data = [1, 2, 3, 4, 5];
|
||||
|
||||
function processData(arr) {
|
||||
return arr.map(x => x * 2);
|
||||
}
|
||||
|
||||
console.log(processData(data));
|
||||
|
||||
// Adding more lines to demonstrate scrolling
|
||||
for (let i = 0; i < 10; i++) {
|
||||
console.log(`Iteration ${i}`);
|
||||
}
|
||||
|
||||
// Even more content
|
||||
const obj = {
|
||||
name: "Test",
|
||||
value: 42,
|
||||
nested: {
|
||||
deep: true
|
||||
}
|
||||
};</code></pre>
|
||||
<h2 class="md-h2">Blockquotes</h2>
|
||||
<blockquote class="md-blockquote">This is a blockquote.<br />It can span multiple lines.<br />And continues here.</blockquote>
|
||||
<h2 class="md-h2">Horizontal Rule</h2>
|
||||
<hr class="md-hr" />
|
||||
<h2 class="md-h2">Images</h2>
|
||||
<figure class="md-figure"><img class="md-img" src="/data/blog/media/test.gif" alt="" style="width:100%;" /><figcaption class="md-figcaption">Caption Test</figcaption></figure>
|
||||
<figure class="md-figure"><img class="md-img" src="/data/blog/media/paste-1778405550240-ddf8h.png" alt="" style="width:43%;" /><figcaption class="md-figcaption">Gobby</figcaption></figure>
|
||||
<h2 class="md-h2">Mixed Content</h2>
|
||||
<p class="md-p"><br /></p>
|
||||
<p class="md-p">You can mix <strong>bold</strong>, <em>italic</em>, and <code class="md-code">code</code> in the same paragraph. Here's a <a class="md-link" href="https://example.com" rel="noopener noreferrer" target="_blank">link with</a> <strong><a class="md-link" href="https://example.com" rel="noopener noreferrer" target="_blank">bold</a></strong> <a class="md-link" href="https://example.com" rel="noopener noreferrer" target="_blank">text</a> too.</p>
|
||||
<h3 class="md-h3">Nested Lists</h3>
|
||||
<ul class="md-ul"><li class="md-li">Top level itemsss</li></ul>
|
||||
<ul class="md-ul"><li class="md-li">Another top level</li></ul>
|
||||
<ul class="md-ul"><li class="md-li">Nested item (if supported)</li></ul>
|
||||
<ul class="md-ul"><li class="md-li">Another nested</li></ul>
|
||||
<ol class="md-ol"><li class="md-li">Numbered item</li><li class="md-li">Another numbered</li></ol>
|
||||
<ul class="md-ul"><li class="md-li">Mixed with bullets</li></ul>
|
||||
<ul class="md-ul"><li class="md-li">More bullets</li></ul>
|
||||
<h2 class="md-h2">Special Characters</h2>
|
||||
<p class="md-p">Testing special chars: < > & " '</p>
|
||||
<h2 class="md-h2">Long Paragraph</h2>
|
||||
<p class="md-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
||||
<p class="md-p">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></section>
|
||||
</article>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user