mirror of
https://github.com/litruv/lit.ruv.wtf.git
synced 2026-07-24 02:36:02 +10:00
Max Litruv Boonzaayer
35b049b833
- 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.
54 lines
3.4 KiB
HTML
54 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Welcome to My Blog - Blog</title>
|
|
<meta name="description" content="Lit.ruv.wtf blog posts.">
|
|
<link rel="canonical" href="https://lit.ruv.wtf/blog/welcome/">
|
|
<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">Welcome to My Blog</h1>
|
|
<p class="blog-post-meta"><span>May 10, 2026</span><span aria-hidden="true">-</span><span>Max Litruv Boonzaayer</span></p>
|
|
<div class="blog-post-tags"><span class="blog-tag">welcome</span><span class="blog-tag">meta</span><span class="blog-tag">introduction</span></div>
|
|
</header>
|
|
<section class="blog-post-content"><h1 class="md-h1">Welcome to My Blog</h1>
|
|
<p class="md-p">This is my first blog post! I'm excited to share my thoughts and experiences with you.</p>
|
|
<h2 class="md-h2">What This Blog Is About</h2>
|
|
<p class="md-p">This blog is built using a <strong>custom node-based graph system</strong> where each blog post is represented as a node in an interactive visual graph. Pretty cool, right?</p>
|
|
<h3 class="md-h3">Features</h3>
|
|
<ul class="md-ul"><li class="md-li">📝 Markdown support with YAML front matter</li></ul>
|
|
<ul class="md-ul"><li class="md-li">📅 Date-based organization</li></ul>
|
|
<ul class="md-ul"><li class="md-li">🏷️ Tag system for categorization</li></ul>
|
|
<ul class="md-ul"><li class="md-li">🎨 Interactive node-based visualization</li></ul>
|
|
<ul class="md-ul"><li class="md-li">📁 Media support in <code class="md-code">data/blog/media/</code></li></ul>
|
|
<h2 class="md-h2">Technical Details</h2>
|
|
<p class="md-p">The build system automatically:</p>
|
|
<ol class="md-ol"><li class="md-li">Scans the <code class="md-code">data/blog/</code> directory for <code class="md-code">.md</code> files</li><li class="md-li">Parses YAML front matter for metadata</li><li class="md-li">Generates a <code class="md-code">blogs.json</code> file</li><li class="md-li">Makes posts available to the BlogPostNode</li></ol>
|
|
<p class="md-p">You can reference images like this:<br /><img class="md-img md-img--inline" src="/data/blog/media/example.png" alt="Example" /></p>
|
|
<h2 class="md-h2">Code Examples</h2>
|
|
<p class="md-p">Here's some example code:</p>
|
|
<pre class="md-pre"><code class=" language-javascript">const greeting = "Hello, World!";
|
|
console.log(greeting);</code></pre>
|
|
<h2 class="md-h2">Conclusion</h2>
|
|
<p class="md-p">Stay tuned for more posts! This is just the beginning of an exciting journey.</p></section>
|
|
</article>
|
|
</main>
|
|
</body>
|
|
</html> |