litruv/lit.ruv.wtf
1
0
Fork 0
mirror of https://github.com/litruv/lit.ruv.wtf.git synced 2026-07-24 02:36:02 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: enhance blog functionality with markdown rendering and bundling

Browse Source 
- Updated build process to bundle main and blog scripts separately using esbuild.
- Modified HTML files to reference new bundled JavaScript files for improved performance.
- Implemented a new blogPage.js script to handle markdown rendering and copy functionality.
- Replaced inline markdown rendering with JSON payloads for better separation of content and presentation.
- Added Prism.js for syntax highlighting in blog posts.
- Improved CSS styles for better layout and scrolling behavior on blog pages.
This commit is contained in:
Litruv
2026-05-10 19:53:19 +10:00
parent 35b049b833
commit a16445dd78
9 changed files with 192 additions and 309 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
build.js
View File

@@ -189,15 +189,17 @@ async function updateGraphWithBlogNodes(posts, graphPath) {
* Bundle all JavaScript files into a single bundle.js using esbuild
*/
async function bundleJavaScript() {
const entryPoint = path.join(__dirname, 'website', 'scripts', 'main.js');
const outfile = path.join(__dirname, 'build', 'scripts', 'bundle.js');
const entryPointMain = path.join(__dirname, 'website', 'scripts', 'main.js');
const entryPointBlog = path.join(__dirname, 'website', 'scripts', 'blogPage.js');
const outdir = path.join(__dirname, 'build', 'scripts');
const scriptsDir = path.join(__dirname, 'build', 'scripts');
try {
await esbuild.build({
entryPoints: [entryPoint],
entryPoints: [entryPointMain, entryPointBlog],
bundle: true,
outfile: outfile,
outdir: outdir,
entryNames: '[name].bundle',
format: 'esm',
platform: 'browser',
target: 'es2022',
@@ -219,7 +221,7 @@ async function bundleJavaScript() {
await removeJsFiles(fullPath);
// Remove empty directory
await fs.rmdir(fullPath);
} else if (item.endsWith('.js') && item !== 'bundle.js') {
} else if (item.endsWith('.js') && !item.endsWith('.bundle.js')) {
await fs.unlink(fullPath);
}
}
@@ -305,19 +307,48 @@ async function minifyCSS() {
* Update HTML files to use bundled JavaScript
*/
async function updateHtmlForBundle() {
const htmlPath = path.join(__dirname, 'build', 'index.html');
const buildDir = path.join(__dirname, 'build');
/**
* @param {string} filePath
* @returns {Promise<void>}
*/
async function updateHtmlFile(filePath) {
let html = await fs.readFile(filePath, 'utf-8');
try {
let html = await fs.readFile(htmlPath, 'utf-8');
// Replace module script tag with bundle script tag (keep type="module" for esm format)
html = html.replace(
/<script type="module" src="scripts\/main\.js"><\/script>/,
'<script type="module" src="scripts/bundle.js"></script>'
'<script type="module" src="scripts/main.bundle.js"></script>'
);
html = html.replace(/src="\/scripts\/blogPage\.js"/g, 'src="/scripts/blogPage.bundle.js"');
await fs.writeFile(htmlPath, html);
console.log('✓ Updated HTML to use bundle.js');
await fs.writeFile(filePath, html);
}
/**
* @param {string} dir
* @returns {Promise<void>}
*/
async function walkAndUpdateHtml(dir) {
const items = await fs.readdir(dir);
for (const item of items) {
const fullPath = path.join(dir, item);
const stats = await fs.stat(fullPath);
if (stats.isDirectory()) {
await walkAndUpdateHtml(fullPath);
continue;
}
if (item.endsWith('.html')) {
await updateHtmlFile(fullPath);
}
}
}
try {
await walkAndUpdateHtml(buildDir);
console.log('✓ Updated HTML to use JavaScript bundles');
} catch (error) {
console.error('✗ Failed to update HTML:', error);
throw error;
@@ -334,9 +365,11 @@ async function build() {
// Report final sizes
console.log('\n=== Build Summary ===');
const bundleStats = await fs.stat(path.join(__dirname, 'build', 'scripts', 'bundle.js'));
const mainBundleStats = await fs.stat(path.join(__dirname, 'build', 'scripts', 'main.bundle.js'));
const blogBundleStats = await fs.stat(path.join(__dirname, 'build', 'scripts', 'blogPage.bundle.js'));
const cssStats = await fs.stat(path.join(__dirname, 'build', 'styles', 'main.css'));
console.log(`bundle.js: ${(bundleStats.size / 1024).toFixed(2)} KB`);
console.log(`main.bundle.js: ${(mainBundleStats.size / 1024).toFixed(2)} KB`);
console.log(`blogPage.bundle.js: ${(blogBundleStats.size / 1024).toFixed(2)} KB`);
console.log(`main.css: ${(cssStats.size / 1024).toFixed(2)} KB`);
console.log('=====================\n');
}

187
tools/StaticBlogGenerator.js
View File

@@ -98,7 +98,7 @@ class StaticBlogGenerator {
? `<div class="blog-post-tags">${tags.map((tag) => `<span class="blog-tag">${this.escapeHtml(tag)}</span>`).join('')}</div>`
: '';
const contentHtml = StaticMarkdownRenderer.render(post.content || '');
const markdownJson = JSON.stringify(post.content || '').replace(/<\//g, '<\\/');
const content = [
'<main class="blog-shell">',
@@ -109,7 +109,8 @@ class StaticBlogGenerator {
metaBits.length > 0 ? ` <p class="blog-post-meta">${metaBits.join('<span aria-hidden="true">-</span>')}</p>` : '',
tagsHtml,
' </header>',
` <section class="blog-post-content">${contentHtml}</section>`,
' <section class="blog-post-content" data-blog-post-content></section>',
` <script id="blogPostMarkdown" type="application/json">${markdownJson}</script>`,
'</article>',
'</main>'
].join('\n');
@@ -137,11 +138,21 @@ class StaticBlogGenerator {
` <link rel="canonical" href="https://lit.ruv.wtf${canonicalPath}">`,
' <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="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">',
' <link rel="stylesheet" href="/styles/main.css">',
' <script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>',
' <script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>',
' <script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>',
' <script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-typescript.min.js"></script>',
' <script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-jsx.min.js"></script>',
' <script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js"></script>',
' <script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js"></script>',
' <script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>',
'</head>',
'<body class="blog-page">',
this.renderHeaderLinks(),
bodyHtml,
' <script type="module" src="/scripts/blogPage.js"></script>',
'</body>',
'</html>'
].join('\n');
@@ -204,178 +215,6 @@ class StaticBlogGenerator {
}
}
/**
* Lightweight markdown renderer for static blog generation.
*/
class StaticMarkdownRenderer {
/**
* @param {string} markdown
* @returns {string}
*/
static render(markdown) {
const normalized = String(markdown || '').replace(/\r\n/g, '\n').replace(/\r/g, '\n').trim();
if (!normalized) return '';
const codeBlocks = [];
const withCodePlaceholders = normalized.replace(/```([\w-]*)(?:\s*\{[^}]*\})?\s*\n([\s\S]*?)\n?```/g, (_, lang, code) => {
const index = codeBlocks.length;
codeBlocks.push({ lang: lang || '', code: code || '' });
return `\n__CODEBLOCK_${index}__\n`;
});
const blocks = withCodePlaceholders.split(/\n{2,}/);
const parts = blocks.map((block) => {
const trimmed = block.trim();
if (!trimmed) return '';
const codeMatch = trimmed.match(/^__CODEBLOCK_(\d+)__$/);
if (codeMatch) {
const item = codeBlocks[Number(codeMatch[1])];
const languageClass = item.lang ? ` language-${this.escapeHtml(item.lang)}` : '';
return `<pre class="md-pre"><code class="${languageClass}">${this.escapeHtml(item.code)}</code></pre>`;
}
if (/^[-*_]{3,}$/.test(trimmed)) {
return '<hr class="md-hr" />';
}
const heading = trimmed.match(/^(#{1,6})\s+(.+)$/);
if (heading && trimmed.split('\n').length === 1) {
const level = heading[1].length;
return `<h${level} class="md-h${level}">${this.renderInline(heading[2])}</h${level}>`;
}
if (/^>\s?/.test(trimmed)) {
const quoteText = trimmed.split('\n').map((line) => line.replace(/^>\s?/, '')).join('\n');
return `<blockquote class="md-blockquote">${this.renderInline(quoteText).replace(/\n/g, '<br />')}</blockquote>`;
}
if (/^[-*+]\s+/.test(trimmed)) {
const items = trimmed
.split('\n')
.filter((line) => /^\s*[-*+]\s+/.test(line))
.map((line) => line.replace(/^\s*[-*+]\s+/, ''));
return `<ul class="md-ul">${items.map((item) => `<li class="md-li">${this.renderInline(item)}</li>`).join('')}</ul>`;
}
if (/^\d+\.\s+/.test(trimmed)) {
const items = trimmed
.split('\n')
.filter((line) => /^\s*\d+\.\s+/.test(line))
.map((line) => line.replace(/^\s*\d+\.\s+/, ''));
return `<ol class="md-ol">${items.map((item) => `<li class="md-li">${this.renderInline(item)}</li>`).join('')}</ol>`;
}
const imageOnly = trimmed.match(/^!\[([^\]]*)\]\(([^)\s]+)(?:\s+"([^"]*)")?\)$/);
if (imageOnly) {
const imageMeta = this.parseImageMeta(imageOnly[1], imageOnly[2], imageOnly[3] || '');
const captionHtml = imageMeta.caption ? `<figcaption class="md-figcaption">${this.escapeHtml(imageMeta.caption)}</figcaption>` : '';
return `<figure class="md-figure"><img class="md-img" src="${imageMeta.src}" alt="${this.escapeHtml(imageMeta.alt)}"${imageMeta.attributes} />${captionHtml}</figure>`;
}
const lines = trimmed.split('\n').map((line) => this.renderInline(line));
return `<p class="md-p">${lines.join('<br />')}</p>`;
});
return parts.filter(Boolean).join('\n');
}
/**
* @param {string} text
* @returns {string}
*/
static renderInline(text) {
const codeSpans = [];
const withCodePlaceholders = text.replace(/`([^`]+)`/g, (_, code) => {
const index = codeSpans.length;
codeSpans.push(code);
return `__INLINE_CODE_${index}__`;
});
let html = this.escapeHtml(withCodePlaceholders);
html = html.replace(/!\[([^\]]*)\]\(([^)\s]+)(?:\s+&quot;([^&]*)&quot;)?\)/g, (_, alt, url, title) => {
const imageMeta = this.parseImageMeta(alt, url, title || '');
return `<img class="md-img md-img--inline" src="${imageMeta.src}" alt="${this.escapeHtml(imageMeta.alt)}"${imageMeta.attributes} />`;
});
html = html.replace(/\[([^\]]+)\]\(([^)\s]+)(?:\s+&quot;([^&]*)&quot;)?\)/g, (_, label, url, title) => {
const href = this.normalizeUrl(url);
const rel = /^https?:\/\//i.test(href) ? ' rel="noopener noreferrer" target="_blank"' : '';
const titleAttr = title ? ` title="${this.escapeHtml(title)}"` : '';
return `<a class="md-link" href="${href}"${titleAttr}${rel}>${label}</a>`;
});
html = html.replace(/\*\*\*([^*]+)\*\*\*/g, '<strong><em>$1</em></strong>');
html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
html = html.replace(/\*([^*]+)\*/g, '<em>$1</em>');
html = html.replace(/__INLINE_CODE_(\d+)__/g, (_, idx) => {
const code = codeSpans[Number(idx)] || '';
return `<code class="md-code">${this.escapeHtml(code)}</code>`;
});
return html;
}
/**
* @param {string} alt
* @param {string} rawUrl
* @param {string} title
* @returns {{src: string, alt: string, caption: string, attributes: string}}
*/
static parseImageMeta(alt, rawUrl, title) {
const scale = this.parseScale(alt);
const src = this.normalizeUrl(rawUrl);
const safeAlt = scale !== null ? '' : String(alt || '');
const caption = title ? String(title) : (scale !== null ? '' : String(alt || ''));
const widthAttr = scale !== null ? ` style="width:${Math.round(scale * 10000) / 100}%;"` : '';
return {
src,
alt: safeAlt,
caption,
attributes: widthAttr
};
}
/**
* @param {string} value
* @returns {number | null}
*/
static parseScale(value) {
const normalized = String(value || '').trim();
if (!/^\d*\.?\d+$/.test(normalized)) return null;
const parsed = Number(normalized);
if (!Number.isFinite(parsed) || parsed <= 0 || parsed > 1) return null;
return parsed;
}
/**
* @param {string} url
* @returns {string}
*/
static normalizeUrl(url) {
const value = String(url || '').trim();
if (!value) return '#';
if (/^(https?:|mailto:|tel:|#|\/)/i.test(value)) return value;
return `/${value.replace(/^\.\//, '').replace(/\\/g, '/')}`;
}
/**
* @param {string} value
* @returns {string}
*/
static escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}
}
module.exports = {
StaticBlogGenerator
};

10
website/blog.html
View File

@@ -8,7 +8,16 @@
<link rel="canonical" href="https://lit.ruv.wtf/blog.html">
<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="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
<link rel="stylesheet" href="/styles/main.css">
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-typescript.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-jsx.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
</head>
<body class="blog-page">
<nav class="quick-links" aria-label="Primary">
@@ -49,5 +58,6 @@
</article></div>
</section>
</main>
<script type="module" src="/scripts/blogPage.js"></script>
</body>
</html>

88
website/blog/markdown-test/index.html
View File

@@ -8,7 +8,16 @@
<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="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
<link rel="stylesheet" href="/styles/main.css">
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-typescript.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-jsx.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
</head>
<body class="blog-page">
<nav class="quick-links" aria-label="Primary">
@@ -28,83 +37,10 @@
<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&#39;s some <code class="md-code">inline code</code> in a sentence.</p>
<h2 class="md-h2">Links</h2>
<p class="md-p">Here&#39;s a <a class="md-link" href="https://example.com" rel="noopener noreferrer" target="_blank">regular link</a> and here&#39;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 = &quot;world&quot;;
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(&quot;Hello, World!&quot;)
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 =&gt; x * 2);
}
console.log(processData(data));
// Adding more lines to demonstrate scrolling
for (let i = 0; i &lt; 10; i++) {
console.log(`Iteration ${i}`);
}
// Even more content
const obj = {
name: &quot;Test&quot;,
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">&lt;br /&gt;</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&#39;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: &lt; &gt; &amp; &quot; &#39;</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>
<section class="blog-post-content" data-blog-post-content></section>
<script id="blogPostMarkdown" type="application/json">"# Heading 1 test 123\n\n## Heading 2\n\n### Heading 3\n\n#### Heading 4\n\n##### Heading 5\n\n###### Heading 6\n\n## Text Formatting\n\nThis is **bold text** and this is *italic text* and this is ***bold italic text***.\n\nHere's some `inline code` in a sentence.\n\n## Links\n\nHere's a [regular link](https://example.com) and here's a [YouTube link](https://youtube.com/watch?v=test).\n\n## Lists\n\nUnordered list:\n\n* First item\n\n* Second item\n\n* Third item\n\nOrdered list:\n\n1. First step\n2. Second step\n3. Third step\n\n## Code Blocks\n\nStandard JavaScript:\n\n```javascript\nconst hello = \"world\";\nconsole.log(hello);\n\nfunction test() {\n return true;\n}\n```\n\nPython with syntax highlighting:\n\n```python\ndef hello_world():\n print(\"Hello, World!\")\n return True\n```\n\nCode with max height (200px):\n\n```javascript\n// This is a long code block that will scroll\nconst data = [1, 2, 3, 4, 5];\n\nfunction processData(arr) {\n return arr.map(x => x * 2);\n}\n\nconsole.log(processData(data));\n\n// Adding more lines to demonstrate scrolling\nfor (let i = 0; i < 10; i++) {\n console.log(`Iteration ${i}`);\n}\n\n// Even more content\nconst obj = {\n name: \"Test\",\n value: 42,\n nested: {\n deep: true\n }\n};\n```\n\n## Blockquotes\n\n> This is a blockquote.\n> It can span multiple lines.\n> And continues here.\n\n## Horizontal Rule\n\n***\n\n## Images\n\n![1.00](data/blog/media/test.gif \"Caption Test\")\n\n![0.43](data/blog/media/paste-1778405550240-ddf8h.png \"Gobby\")\n\n## Mixed Content\n\n<br />\n\nYou can mix **bold**, *italic*, and `code` in the same paragraph. Here's a [link with](https://example.com) **[bold](https://example.com)** [text](https://example.com) too.\n\n### Nested Lists\n\n* Top level itemsss\n\n* Another top level\n\n * Nested item (if supported)\n\n * Another nested\n\n1. Numbered item\n2. Another numbered\n\n * Mixed with bullets\n\n * More bullets\n\n## Special Characters\n\nTesting special chars: < > & \" '\n\n## Long Paragraph\n\nLorem 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.\n\nDuis 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.\n"</script>
</article>
</main>
<script type="module" src="/scripts/blogPage.js"></script>
</body>
</html>

32
website/blog/node-graphs/index.html
View File

@@ -8,7 +8,16 @@
<link rel="canonical" href="https://lit.ruv.wtf/blog/node-graphs/">
<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="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
<link rel="stylesheet" href="/styles/main.css">
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-typescript.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-jsx.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
</head>
<body class="blog-page">
<nav class="quick-links" aria-label="Primary">
@@ -28,27 +37,10 @@
<p class="blog-post-meta"><span>April 15, 2026</span><span aria-hidden="true">-</span><span>Max Litruv Boonzaayer</span></p>
<div class="blog-post-tags"><span class="blog-tag">javascript</span><span class="blog-tag">graph-systems</span><span class="blog-tag">tutorial</span></div>
</header>
<section class="blog-post-content"><h1 class="md-h1">Building Interactive Node Graphs</h1>
<p class="md-p">In this post, I&#39;ll share some insights on building interactive node-based graph systems for the web.</p>
<h2 class="md-h2">Why Node Graphs?</h2>
<p class="md-p">Node graphs are powerful visual programming tools that make complex logic easier to understand and manipulate:</p>
<ul class="md-ul"><li class="md-li"><strong>Visual Clarity</strong>: See the flow of data and execution at a glance</li><li class="md-li"><strong>Modularity</strong>: Each node is a self-contained unit</li><li class="md-li"><strong>Flexibility</strong>: Easy to add new node types and behaviors</li></ul>
<h2 class="md-h2">The Architecture</h2>
<p class="md-p">The system is built on several key classes:</p>
<p class="md-p">### NodeBase<br />The abstract base class that all nodes inherit from. It defines the blueprint interface:</p>
<pre class="md-pre"><code class=" language-javascript">class NodeBase {
static NodeType = &quot;&quot;;
static BlueprintPure_GetDefaultPins() { }
BlueprintNativeEvent_OnRender(article, graphNode, renderCtx) { }
async BlueprintCallable_Execute(ctx) { }
}</code></pre>
<p class="md-p">### Node Registry<br />Automatically registers node types and creates instances based on type strings.</p>
<p class="md-p">### Execution Context<br />Handles the graph traversal and execution flow when nodes are triggered.</p>
<h2 class="md-h2">Creating Custom Nodes</h2>
<p class="md-p">To create a new node type:</p>
<ol class="md-ol"><li class="md-li">Extend <code class="md-code">NodeBase</code></li><li class="md-li">Set a unique <code class="md-code">NodeType</code></li><li class="md-li">Define pins with <code class="md-code">BlueprintPure_GetDefaultPins()</code></li><li class="md-li">Implement rendering in <code class="md-code">BlueprintNativeEvent_OnRender()</code></li><li class="md-li">Implement logic in <code class="md-code">BlueprintCallable_Execute()</code></li></ol>
<p class="md-p">That&#39;s the blueprint system in a nutshell!</p></section>
<section class="blog-post-content" data-blog-post-content></section>
<script id="blogPostMarkdown" type="application/json">"\r\n# Building Interactive Node Graphs\r\n\r\nIn this post, I'll share some insights on building interactive node-based graph systems for the web.\r\n\r\n## Why Node Graphs?\r\n\r\nNode graphs are powerful visual programming tools that make complex logic easier to understand and manipulate:\r\n\r\n- **Visual Clarity**: See the flow of data and execution at a glance\r\n- **Modularity**: Each node is a self-contained unit\r\n- **Flexibility**: Easy to add new node types and behaviors\r\n\r\n## The Architecture\r\n\r\nThe system is built on several key classes:\r\n\r\n### NodeBase\r\nThe abstract base class that all nodes inherit from. It defines the blueprint interface:\r\n\r\n```javascript\r\nclass NodeBase {\r\n static NodeType = \"\";\r\n static BlueprintPure_GetDefaultPins() { }\r\n BlueprintNativeEvent_OnRender(article, graphNode, renderCtx) { }\r\n async BlueprintCallable_Execute(ctx) { }\r\n}\r\n```\r\n\r\n### Node Registry\r\nAutomatically registers node types and creates instances based on type strings.\r\n\r\n### Execution Context\r\nHandles the graph traversal and execution flow when nodes are triggered.\r\n\r\n## Creating Custom Nodes\r\n\r\nTo create a new node type:\r\n\r\n1. Extend `NodeBase`\r\n2. Set a unique `NodeType`\r\n3. Define pins with `BlueprintPure_GetDefaultPins()`\r\n4. Implement rendering in `BlueprintNativeEvent_OnRender()`\r\n5. Implement logic in `BlueprintCallable_Execute()`\r\n\r\nThat's the blueprint system in a nutshell!\r\n"</script>
</article>
</main>
<script type="module" src="/scripts/blogPage.js"></script>
</body>
</html>

16
website/blog/testddd/index.html
View File

@@ -8,7 +8,16 @@
<link rel="canonical" href="https://lit.ruv.wtf/blog/testddd/">
<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="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
<link rel="stylesheet" href="/styles/main.css">
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-typescript.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-jsx.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
</head>
<body class="blog-page">
<nav class="quick-links" aria-label="Primary">
@@ -28,11 +37,10 @@
<p class="blog-post-meta"><span>May 10, 2026</span><span aria-hidden="true">-</span><span>it me</span></p>
</header>
<section class="blog-post-content"><p class="md-p">asdffdsaasdffdsa</p>
<p class="md-p">| &lt;br /&gt; | &lt;br /&gt; | &lt;br /&gt; | &lt;br /&gt; |<br />| :----- | :----- | :----- | -----: |<br />| &lt;br /&gt; | &lt;br /&gt; | &lt;br /&gt; | &lt;br /&gt; |<br />| &lt;br /&gt; | &lt;br /&gt; | &lt;br /&gt; | &lt;br /&gt; |</p>
<p class="md-p">&lt;br /&gt;</p>
<p class="md-p">this is a test post, should&#39;t publish i guess, but who&#39;s reading lmao</p></section>
<section class="blog-post-content" data-blog-post-content></section>
<script id="blogPostMarkdown" type="application/json">"asdffdsaasdffdsa\n\n| <br /> | <br /> | <br /> | <br /> |\n| :----- | :----- | :----- | -----: |\n| <br /> | <br /> | <br /> | <br /> |\n| <br /> | <br /> | <br /> | <br /> |\n\n<br />\n\nthis is a test post, should't publish i guess, but who's reading lmao\n"</script>
</article>
</main>
<script type="module" src="/scripts/blogPage.js"></script>
</body>
</html>

32
website/blog/welcome/index.html
View File

@@ -8,7 +8,16 @@
<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="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
<link rel="stylesheet" href="/styles/main.css">
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-typescript.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-jsx.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
</head>
<body class="blog-page">
<nav class="quick-links" aria-label="Primary">
@@ -28,27 +37,10 @@
<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&#39;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&#39;s some example code:</p>
<pre class="md-pre"><code class=" language-javascript">const greeting = &quot;Hello, World!&quot;;
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>
<section class="blog-post-content" data-blog-post-content></section>
<script id="blogPostMarkdown" type="application/json">"# Welcome to My Blog\n\nThis is my first blog post! I'm excited to share my thoughts and experiences with you.\n\n## What This Blog Is About\n\nThis blog is built using a **custom node-based graph system** where each blog post is represented as a node in an interactive visual graph. Pretty cool, right?\n\n### Features\n\n* 📝 Markdown support with YAML front matter\n\n* 📅 Date-based organization\n\n* 🏷️ Tag system for categorization\n\n* 🎨 Interactive node-based visualization\n\n* 📁 Media support in `data/blog/media/`\n\n## Technical Details\n\nThe build system automatically:\n\n1. Scans the `data/blog/` directory for `.md` files\n2. Parses YAML front matter for metadata\n3. Generates a `blogs.json` file\n4. Makes posts available to the BlogPostNode\n\nYou can reference images like this:\n![Example](data/blog/media/example.png)\n\n## Code Examples\n\nHere's some example code:\n\n```javascript\nconst greeting = \"Hello, World!\";\r\nconsole.log(greeting);\n```\n\n## Conclusion\n\nStay tuned for more posts! This is just the beginning of an exciting journey.\n"</script>
</article>
</main>
<script type="module" src="/scripts/blogPage.js"></script>
</body>
</html>

72
website/scripts/blogPage.js Normal file
View File

@@ -0,0 +1,72 @@
import { MarkdownRenderer } from "./MarkdownRenderer.js";
/**
* Decodes markdown payload from a JSON script element.
*
* @param {HTMLScriptElement | null} payloadEl
* @returns {string}
*/
function readMarkdownPayload(payloadEl) {
if (!payloadEl) return "";
try {
const parsed = JSON.parse(payloadEl.textContent || "\"\"");
return typeof parsed === "string" ? parsed : "";
} catch (error) {
console.error("Failed to parse blog markdown payload", error);
return "";
}
}
/**
* Wires copy buttons rendered by MarkdownRenderer.
*
* @param {ParentNode} container
* @returns {void}
*/
function wireCopyButtons(container) {
container.querySelectorAll(".md-copy-btn").forEach((button) => {
button.addEventListener("click", (event) => {
event.stopPropagation();
const code = button.getAttribute("data-code");
if (!code) return;
navigator.clipboard.writeText(code).then(() => {
const originalText = button.textContent;
button.textContent = "✓";
button.classList.add("copied");
setTimeout(() => {
button.textContent = originalText;
button.classList.remove("copied");
}, 2000);
}).catch((error) => {
console.error("Failed to copy code", error);
});
});
});
}
/**
* Renders blog markdown on static post pages using the shared renderer.
*
* @returns {void}
*/
function renderStaticBlogPost() {
/** @type {HTMLElement | null} */
const target = document.querySelector("[data-blog-post-content]");
if (!target) return;
/** @type {HTMLScriptElement | null} */
const payload = document.querySelector("#blogPostMarkdown");
const markdown = readMarkdownPayload(payload);
target.innerHTML = MarkdownRenderer.render(markdown);
MarkdownRenderer.applyImageScale(target);
wireCopyButtons(target);
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", renderStaticBlogPost, { once: true });
} else {
renderStaticBlogPost();
}

1
website/styles/main.css
View File

@@ -604,6 +604,7 @@ body.blog-page {
var(--grid-size) var(--grid-size),
var(--grid-size) var(--grid-size);
background-repeat: repeat;
background-attachment: scroll;
background-position: 0 0, 0 0, 0 0, 0 0;
background-color: var(--bg);
}