mirror of
https://github.com/litruv/lit.ruv.wtf.git
synced 2026-07-24 10:46:03 +10:00
feat: Add blog post functionality with Markdown support
- Introduced BlogPostNode to render blog posts with metadata and content. - Updated graph.json to include new blog post nodes. - Enhanced MarkdownRenderer to support code block options for max height. - Added CSS styles for improved code block scrolling and syntax highlighting. - Created example blog posts: "Markdown Formatting Test", "Welcome to My Blog", and "Building Interactive Node Graphs". - Implemented dynamic loading of blog data from blogs.json. - Updated WorkspaceNavigator to allow smooth panning over blog nodes.
This commit is contained in:
52
website/data/blog/node-graphs.md
Normal file
52
website/data/blog/node-graphs.md
Normal file
@@ -0,0 +1,52 @@
|
||||
---
|
||||
title: Building Interactive Node Graphs
|
||||
date: 2026-04-15
|
||||
author: Max Litruv Boonzaayer
|
||||
tags: javascript, graph-systems, tutorial
|
||||
---
|
||||
|
||||
# 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:
|
||||
|
||||
```javascript
|
||||
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!
|
||||
Reference in New Issue
Block a user