From 35b049b83362981f61f2a4bdb281a284ea2e6703 Mon Sep 17 00:00:00 2001 From: Max Litruv Boonzaayer Date: Sun, 10 May 2026 19:46:31 +1000 Subject: [PATCH] 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. --- build.js | 9 + tools/StaticBlogGenerator.js | 381 ++++++++++++++++++++++++++ website/blog.html | 53 ++++ website/blog/markdown-test/index.html | 110 ++++++++ website/blog/node-graphs/index.html | 54 ++++ website/blog/testddd/index.html | 38 +++ website/blog/welcome/index.html | 54 ++++ website/data/blogs.json | 16 +- website/data/graph.json | 45 ++- website/index.html | 1 + website/styles/main.css | 242 ++++++++++++++++ 11 files changed, 996 insertions(+), 7 deletions(-) create mode 100644 tools/StaticBlogGenerator.js create mode 100644 website/blog.html create mode 100644 website/blog/markdown-test/index.html create mode 100644 website/blog/node-graphs/index.html create mode 100644 website/blog/testddd/index.html create mode 100644 website/blog/welcome/index.html diff --git a/build.js b/build.js index ad7671f..7968408 100644 --- a/build.js +++ b/build.js @@ -2,6 +2,7 @@ const fs = require('fs').promises; const path = require('path'); const esbuild = require('esbuild'); const { execSync } = require('child_process'); +const { StaticBlogGenerator } = require('./tools/StaticBlogGenerator'); /** * Parse YAML front matter from markdown content @@ -42,6 +43,9 @@ async function processBlogPosts() { const blogDir = path.join(__dirname, 'website', 'data', 'blog'); const outputPath = path.join(__dirname, 'website', 'data', 'blogs.json'); const graphPath = path.join(__dirname, 'website', 'data', 'graph.json'); + const staticBlogGenerator = new StaticBlogGenerator({ + siteRootDir: path.join(__dirname, 'website') + }); try { const files = await fs.readdir(blogDir); @@ -87,9 +91,14 @@ async function processBlogPosts() { if (posts.length > 0) { await updateGraphWithBlogNodes(posts, graphPath); } + + await staticBlogGenerator.generate(posts); + console.log('✓ Generated static blog pages'); } catch (err) { if (err.code === 'ENOENT') { console.log('⚠ No blog directory found, skipping blog processing'); + await staticBlogGenerator.generate([]); + console.log('✓ Generated empty static blog index'); } else { throw err; } diff --git a/tools/StaticBlogGenerator.js b/tools/StaticBlogGenerator.js new file mode 100644 index 0000000..29e9fac --- /dev/null +++ b/tools/StaticBlogGenerator.js @@ -0,0 +1,381 @@ +'use strict'; + +const fs = require('fs').promises; +const path = require('path'); + +/** + * Generates static blog pages and an index page from markdown post data. + */ +class StaticBlogGenerator { + /** + * @param {{ siteRootDir: string }} options + */ + constructor(options) { + /** @type {string} */ + this.siteRootDir = options.siteRootDir; + /** @type {string} */ + this.blogRootDir = path.join(this.siteRootDir, 'blog'); + /** @type {string} */ + this.blogIndexPath = path.join(this.siteRootDir, 'blog.html'); + } + + /** + * Generates blog index and post pages. + * + * @param {Array<{slug: string, title: string, date: string | null, author: string | null, tags?: string[], content: string}>} posts + * @returns {Promise} + */ + async generate(posts) { + await fs.rm(this.blogRootDir, { recursive: true, force: true }); + await fs.mkdir(this.blogRootDir, { recursive: true }); + + const indexHtml = this.renderIndexPage(posts); + await fs.writeFile(this.blogIndexPath, indexHtml, 'utf-8'); + + for (const post of posts) { + const postDir = path.join(this.blogRootDir, post.slug); + await fs.mkdir(postDir, { recursive: true }); + const postHtml = this.renderPostPage(post); + await fs.writeFile(path.join(postDir, 'index.html'), postHtml, 'utf-8'); + } + } + + /** + * @param {Array<{slug: string, title: string, date: string | null, author: string | null, tags?: string[]}>} posts + * @returns {string} + */ + renderIndexPage(posts) { + const cardsHtml = posts.map((post) => { + const dateLabel = post.date ? this.formatDate(post.date) : 'Undated'; + const authorLabel = post.author ? this.escapeHtml(post.author) : 'Unknown author'; + const safeTitle = this.escapeHtml(post.title || post.slug); + const safeSlug = encodeURIComponent(post.slug); + const tags = Array.isArray(post.tags) ? post.tags : []; + const tagsHtml = tags.length > 0 + ? `
${tags.map((tag) => `${this.escapeHtml(tag)}`).join('')}
` + : ''; + + return [ + '
', + `

${safeTitle}

`, + `

${dateLabel} ${authorLabel}

`, + tagsHtml, + '
' + ].join('\n'); + }).join('\n'); + + const content = [ + '
', + this.renderBrandBar(), + '
', + '
', + '

Blog

', + '

Direct links to every post.

', + '
', + `
${cardsHtml || '

No posts yet.

'}
`, + '
', + '
' + ].join('\n'); + + return this.renderPageTemplate('Blog', content, '/blog.html'); + } + + /** + * @param {{slug: string, title: string, date: string | null, author: string | null, tags?: string[], content: string}} post + * @returns {string} + */ + renderPostPage(post) { + const safeTitle = this.escapeHtml(post.title || post.slug); + const dateLabel = post.date ? this.formatDate(post.date) : null; + const authorLabel = post.author ? this.escapeHtml(post.author) : null; + const tags = Array.isArray(post.tags) ? post.tags : []; + + const metaBits = []; + if (dateLabel) metaBits.push(`${dateLabel}`); + if (authorLabel) metaBits.push(`${authorLabel}`); + + const tagsHtml = tags.length > 0 + ? `
${tags.map((tag) => `${this.escapeHtml(tag)}`).join('')}
` + : ''; + + const contentHtml = StaticMarkdownRenderer.render(post.content || ''); + + const content = [ + '
', + this.renderBrandBar(), + '
', + '
', + `

${safeTitle}

`, + metaBits.length > 0 ? `

${metaBits.join('')}

` : '', + tagsHtml, + '
', + `
${contentHtml}
`, + '
', + '
' + ].join('\n'); + + return this.renderPageTemplate(`${safeTitle} - Blog`, content, `/blog/${encodeURIComponent(post.slug)}/`); + } + + /** + * @param {string} title + * @param {string} bodyHtml + * @param {string} canonicalPath + * @returns {string} + */ + renderPageTemplate(title, bodyHtml, canonicalPath) { + const escapedTitle = this.escapeHtml(title); + + return [ + '', + '', + '', + ' ', + ' ', + ` ${escapedTitle}`, + ' ', + ` `, + ' ', + ' ', + ' ', + '', + '', + this.renderHeaderLinks(), + bodyHtml, + '', + '' + ].join('\n'); + } + + /** + * @returns {string} + */ + renderHeaderLinks() { + return [ + '' + ].join('\n'); + } + + /** + * @returns {string} + */ + renderBrandBar() { + return [ + '', + ' ', + '' + ].join('\n'); + } + + /** + * @param {string} dateInput + * @returns {string} + */ + formatDate(dateInput) { + const parsed = new Date(dateInput); + if (Number.isNaN(parsed.valueOf())) { + return this.escapeHtml(dateInput); + } + + return new Intl.DateTimeFormat('en-US', { + year: 'numeric', + month: 'long', + day: 'numeric' + }).format(parsed); + } + + /** + * @param {string} value + * @returns {string} + */ + escapeHtml(value) { + return String(value) + .replace(/&/g, '&') + .replace(//g, '>') + .replace(/"/g, '"') + .replace(/'/g, '''); + } +} + +/** + * 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 `
${this.escapeHtml(item.code)}
`; + } + + if (/^[-*_]{3,}$/.test(trimmed)) { + return '
'; + } + + const heading = trimmed.match(/^(#{1,6})\s+(.+)$/); + if (heading && trimmed.split('\n').length === 1) { + const level = heading[1].length; + return `${this.renderInline(heading[2])}`; + } + + if (/^>\s?/.test(trimmed)) { + const quoteText = trimmed.split('\n').map((line) => line.replace(/^>\s?/, '')).join('\n'); + return `
${this.renderInline(quoteText).replace(/\n/g, '
')}
`; + } + + if (/^[-*+]\s+/.test(trimmed)) { + const items = trimmed + .split('\n') + .filter((line) => /^\s*[-*+]\s+/.test(line)) + .map((line) => line.replace(/^\s*[-*+]\s+/, '')); + return ``; + } + + 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 `
    ${items.map((item) => `
  1. ${this.renderInline(item)}
    2. `).join('')}
`; + } + + const imageOnly = trimmed.match(/^!\[([^\]]*)\]\(([^)\s]+)(?:\s+"([^"]*)")?\)$/); + if (imageOnly) { + const imageMeta = this.parseImageMeta(imageOnly[1], imageOnly[2], imageOnly[3] || ''); + const captionHtml = imageMeta.caption ? `
${this.escapeHtml(imageMeta.caption)}
` : ''; + return `
${this.escapeHtml(imageMeta.alt)}${captionHtml}
`; + } + + const lines = trimmed.split('\n').map((line) => this.renderInline(line)); + return `

${lines.join('
')}

`; + }); + + 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+"([^&]*)")?\)/g, (_, alt, url, title) => { + const imageMeta = this.parseImageMeta(alt, url, title || ''); + return `${this.escapeHtml(imageMeta.alt)}`; + }); + + html = html.replace(/\[([^\]]+)\]\(([^)\s]+)(?:\s+"([^&]*)")?\)/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 `${label}`; + }); + + html = html.replace(/\*\*\*([^*]+)\*\*\*/g, '$1'); + html = html.replace(/\*\*([^*]+)\*\*/g, '$1'); + html = html.replace(/\*([^*]+)\*/g, '$1'); + + html = html.replace(/__INLINE_CODE_(\d+)__/g, (_, idx) => { + const code = codeSpans[Number(idx)] || ''; + return `${this.escapeHtml(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, '&') + .replace(//g, '>') + .replace(/"/g, '"') + .replace(/'/g, '''); + } +} + +module.exports = { + StaticBlogGenerator +}; diff --git a/website/blog.html b/website/blog.html new file mode 100644 index 0000000..ba57a47 --- /dev/null +++ b/website/blog.html @@ -0,0 +1,53 @@ + + + + + + Blog + + + + + + + + +
+ + + +
+
+

Blog

+

Direct links to every post.

+
+
+ + +
+
+
+ + \ No newline at end of file diff --git a/website/blog/markdown-test/index.html b/website/blog/markdown-test/index.html new file mode 100644 index 0000000..1ad16b7 --- /dev/null +++ b/website/blog/markdown-test/index.html @@ -0,0 +1,110 @@ + + + + + + Markdown Formatting Test - Blog + + + + + + + + +
+ + + +
+
+

Markdown Formatting Test

+

September 11, 2026Test Author

+
testformattingmarkdown
+
+

Heading 1 test 123

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+

Text Formatting

+

This is bold text and this is italic text and this is bold italic text.

+

Here's some inline code in a sentence.

+

Links

+

Here's a regular link and here's a YouTube link.

+

Lists

+

Unordered list:

+
  • First item
+
  • Second item
+
  • Third item
+

Ordered list:

+
  1. First step
  2. Second step
  3. Third step
+

Code Blocks

+

Standard JavaScript:

+
const hello = "world";
+console.log(hello);
+
+function test() {
+    return true;
+}
+

Python with syntax highlighting:

+
def hello_world():
+    print("Hello, World!")
+    return True
+

Code with max height (200px):

+
// 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
+    }
+};
+

Blockquotes

+
This is a blockquote.
It can span multiple lines.
And continues here.
+

Horizontal Rule

+
+

Images

+
Caption Test
+
Gobby
+

Mixed Content

+

<br />

+

You can mix bold, italic, and code in the same paragraph. Here's a link with bold text too.

+

Nested Lists

+
  • Top level itemsss
+
  • Another top level
+
  • Nested item (if supported)
+
  • Another nested
+
  1. Numbered item
  2. Another numbered
+
  • Mixed with bullets
+
  • More bullets
+

Special Characters

+

Testing special chars: < > & " '

+

Long Paragraph

+

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.

+

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.

+
+
+ + \ No newline at end of file diff --git a/website/blog/node-graphs/index.html b/website/blog/node-graphs/index.html new file mode 100644 index 0000000..895dbb6 --- /dev/null +++ b/website/blog/node-graphs/index.html @@ -0,0 +1,54 @@ + + + + + + Building Interactive Node Graphs - Blog + + + + + + + + +
+ + + +
+
+

Building Interactive Node Graphs

+

April 15, 2026Max Litruv Boonzaayer

+
javascriptgraph-systemstutorial
+
+

Building Interactive Node Graphs

+

In this post, I'll share some insights on building interactive node-based graph systems for the web.

+

Why Node Graphs?

+

Node graphs are powerful visual programming tools that make complex logic easier to understand and manipulate:

+
  • Visual Clarity: See the flow of data and execution at a glance
  • Modularity: Each node is a self-contained unit
  • Flexibility: Easy to add new node types and behaviors
+

The Architecture

+

The system is built on several key classes:

+

### NodeBase
The abstract base class that all nodes inherit from. It defines the blueprint interface:

+
class NodeBase {
+    static NodeType = "";
+    static BlueprintPure_GetDefaultPins() { }
+    BlueprintNativeEvent_OnRender(article, graphNode, renderCtx) { }
+    async BlueprintCallable_Execute(ctx) { }
+}
+

### Node Registry
Automatically registers node types and creates instances based on type strings.

+

### Execution Context
Handles the graph traversal and execution flow when nodes are triggered.

+

Creating Custom Nodes

+

To create a new node type:

+
  1. Extend NodeBase
  2. Set a unique NodeType
  3. Define pins with BlueprintPure_GetDefaultPins()
  4. Implement rendering in BlueprintNativeEvent_OnRender()
  5. Implement logic in BlueprintCallable_Execute()
+

That's the blueprint system in a nutshell!

+
+
+ + \ No newline at end of file diff --git a/website/blog/testddd/index.html b/website/blog/testddd/index.html new file mode 100644 index 0000000..734c1ab --- /dev/null +++ b/website/blog/testddd/index.html @@ -0,0 +1,38 @@ + + + + + + test d d d d - Blog + + + + + + + + +
+ + + +
+
+

test d d d d

+

May 10, 2026it me

+ +
+

asdffdsaasdffdsa

+

| <br /> | <br /> | <br /> | <br /> |
| :----- | :----- | :----- | -----: |
| <br /> | <br /> | <br /> | <br /> |
| <br /> | <br /> | <br /> | <br /> |

+

<br />

+

this is a test post, should't publish i guess, but who's reading lmao

+
+
+ + \ No newline at end of file diff --git a/website/blog/welcome/index.html b/website/blog/welcome/index.html new file mode 100644 index 0000000..c2711f3 --- /dev/null +++ b/website/blog/welcome/index.html @@ -0,0 +1,54 @@ + + + + + + Welcome to My Blog - Blog + + + + + + + + +
+ + + +
+
+

Welcome to My Blog

+

May 10, 2026Max Litruv Boonzaayer

+
welcomemetaintroduction
+
+

Welcome to My Blog

+

This is my first blog post! I'm excited to share my thoughts and experiences with you.

+

What This Blog Is About

+

This 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?

+

Features

+
  • 📝 Markdown support with YAML front matter
+
  • 📅 Date-based organization
+
  • 🏷️ Tag system for categorization
+
  • 🎨 Interactive node-based visualization
+
  • 📁 Media support in data/blog/media/
+

Technical Details

+

The build system automatically:

+
  1. Scans the data/blog/ directory for .md files
  2. Parses YAML front matter for metadata
  3. Generates a blogs.json file
  4. Makes posts available to the BlogPostNode
+

You can reference images like this:
Example

+

Code Examples

+

Here's some example code:

+
const greeting = "Hello, World!";
+console.log(greeting);
+

Conclusion

+

Stay tuned for more posts! This is just the beginning of an exciting journey.

+
+
+ + \ No newline at end of file diff --git a/website/data/blogs.json b/website/data/blogs.json index 3279841..65b4a8c 100644 --- a/website/data/blogs.json +++ b/website/data/blogs.json @@ -2,26 +2,34 @@ { "slug": "markdown-test", "title": "Markdown Formatting Test", - "date": "2026-04-20", + "date": "2026-09-11", "author": "Test Author", "tags": [ "test", "formatting", "markdown" ], - "content": "\r\n# Heading 1\r\n\r\n## Heading 2\r\n\r\n### Heading 3\r\n\r\n#### Heading 4\r\n\r\n##### Heading 5\r\n\r\n###### Heading 6\r\n\r\n## Text Formatting\r\n\r\nThis is **bold text** and this is *italic text* and this is ***bold italic text***.\r\n\r\nHere's some `inline code` in a sentence.\r\n\r\n## Links\r\n\r\nHere's a [regular link](https://example.com) and here's a [YouTube link](https://youtube.com/watch?v=test).\r\n\r\n## Lists\r\n\r\nUnordered list:\r\n- First item\r\n- Second item\r\n- Third item\r\n\r\nOrdered list:\r\n1. First step\r\n2. Second step\r\n3. Third step\r\n\r\n## Code Blocks\r\n\r\nStandard JavaScript:\r\n```javascript\r\nconst hello = \"world\";\r\nconsole.log(hello);\r\n\r\nfunction test() {\r\n return true;\r\n}\r\n```\r\n\r\nPython with syntax highlighting:\r\n```python\r\ndef hello_world():\r\n print(\"Hello, World!\")\r\n return True\r\n```\r\n\r\nCode with max height (200px):\r\n```javascript {maxHeight: 200}\r\n// This is a long code block that will scroll\r\nconst data = [1, 2, 3, 4, 5];\r\n\r\nfunction processData(arr) {\r\n return arr.map(x => x * 2);\r\n}\r\n\r\nconsole.log(processData(data));\r\n\r\n// Adding more lines to demonstrate scrolling\r\nfor (let i = 0; i < 10; i++) {\r\n console.log(`Iteration ${i}`);\r\n}\r\n\r\n// Even more content\r\nconst obj = {\r\n name: \"Test\",\r\n value: 42,\r\n nested: {\r\n deep: true\r\n }\r\n};\r\n```\r\n\r\n## Blockquotes\r\n\r\n> This is a blockquote.\r\n> It can span multiple lines.\r\n> And continues here.\r\n\r\n## Horizontal Rule\r\n\r\n---\r\n\r\n## Images\r\n\r\n![Test Image](data/blog/media/test.gif)\r\n\r\n## Mixed Content\r\n\r\nYou can mix **bold**, *italic*, and `code` in the same paragraph. Here's a [link with **bold** text](https://example.com) too.\r\n\r\n### Nested Lists\r\n\r\n- Top level item\r\n- Another top level\r\n - Nested item (if supported)\r\n - Another nested\r\n\r\n1. Numbered item\r\n2. Another numbered\r\n - Mixed with bullets\r\n - More bullets\r\n\r\n## Special Characters\r\n\r\nTesting special chars: < > & \" ' \r\n\r\n## Long Paragraph\r\n\r\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.\r\n\r\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.\r\n" + "content": "# 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
\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" + }, + { + "slug": "testddd", + "title": "test d d d d", + "date": "2026-05-10", + "author": "it me", + "tags": [], + "content": "asdffdsaasdffdsa\n\n|
|
|
|
|\n| :----- | :----- | :----- | -----: |\n|
|
|
|
|\n|
|
|
|
|\n\n
\n\nthis is a test post, should't publish i guess, but who's reading lmao\n" }, { "slug": "welcome", "title": "Welcome to My Blog", - "date": "2026-04-19", + "date": "2026-05-10", "author": "Max Litruv Boonzaayer", "tags": [ "welcome", "meta", "introduction" ], - "content": "\r\n# Welcome to My Blog\r\n\r\nThis is my first blog post! I'm excited to share my thoughts and experiences with you.\r\n\r\n## What This Blog Is About\r\n\r\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?\r\n\r\n### Features\r\n\r\n- 📝 Markdown support with YAML front matter\r\n- 📅 Date-based organization\r\n- 🏷️ Tag system for categorization\r\n- 🎨 Interactive node-based visualization\r\n- 📁 Media support in `data/blog/media/`\r\n\r\n## Technical Details\r\n\r\nThe build system automatically:\r\n1. Scans the `data/blog/` directory for `.md` files\r\n2. Parses YAML front matter for metadata\r\n3. Generates a `blogs.json` file\r\n4. Makes posts available to the BlogPostNode\r\n\r\nYou can reference images like this:\r\n![Example](data/blog/media/example.png)\r\n\r\n## Code Examples\r\n\r\nHere's some example code:\r\n\r\n```javascript\r\nconst greeting = \"Hello, World!\";\r\nconsole.log(greeting);\r\n```\r\n\r\n## Conclusion\r\n\r\nStay tuned for more posts! This is just the beginning of an exciting journey.\r\n" + "content": "# 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" }, { "slug": "node-graphs", diff --git a/website/data/graph.json b/website/data/graph.json index 999d476..e66887c 100644 --- a/website/data/graph.json +++ b/website/data/graph.json @@ -644,13 +644,40 @@ } ] }, + { + "id": "blog_testddd", + "type": "blog_post", + "title": "test d d d d", + "blogSlug": "testddd", + "position": { + "x": 2200, + "y": 900 + }, + "width": 600, + "inputs": [ + { + "id": "exec_in", + "name": "Previous", + "direction": "input", + "kind": "exec" + } + ], + "outputs": [ + { + "id": "exec_out", + "name": "Next", + "direction": "output", + "kind": "exec" + } + ] + }, { "id": "blog_welcome", "type": "blog_post", "title": "Welcome to My Blog", "blogSlug": "welcome", "position": { - "x": 2200, + "x": 2900, "y": 900 }, "width": 600, @@ -677,7 +704,7 @@ "title": "Building Interactive Node Graphs", "blogSlug": "node-graphs", "position": { - "x": 2900, + "x": 3600, "y": 900 }, "width": 600, @@ -928,13 +955,25 @@ "pinId": "exec_out" }, "to": { - "nodeId": "blog_welcome", + "nodeId": "blog_testddd", "pinId": "exec_in" }, "kind": "exec" }, { "id": "blog_connection_1", + "from": { + "nodeId": "blog_testddd", + "pinId": "exec_out" + }, + "to": { + "nodeId": "blog_welcome", + "pinId": "exec_in" + }, + "kind": "exec" + }, + { + "id": "blog_connection_2", "from": { "nodeId": "blog_welcome", "pinId": "exec_out" diff --git a/website/index.html b/website/index.html index e828000..0ca7d0e 100644 --- a/website/index.html +++ b/website/index.html @@ -50,6 +50,7 @@