tl;dr: we do things not because they are easy, but because we thought they would be

Requirements

In no particular order, I had some things I wanted out of a blogging platform.

• deployment:
  • my own domain
  • static
  • renders mermaid charts as svgs and with styling
    • I spent a long time trying to get these to render properly server side as svgs, but with custom fonts getting words truncated, it was easier to just do it client side rendering
  • treesitter highlighting for code blocks
• development:
  • markdown (later mdx)
  • supports live previews (vite)

Site Arch

It's basically just copied from the HonoX mdx example, with some vite config tweaking to make Tailwind play nice and to incorporate some utilities for parsing code blocks for syntax highlightingwith treesitter, as well as for extracting some stats from git repos.

The rest of this is just nonsense for me to test styling.

Mermaid Diagram

---
config:
  layout: elk
  elk:
    mergeEdges: true
    nodePlacementStrategy: NETWORK_SIMPLEX
---
flowchart TD
  A[Start] --> B{Choose Path}
  B -->|Option 1| C{Path 1}
  B -->|Option 2| D[Path 2]
  C --> E[End]
  C --> F[End]
  E --> G[End]
  F --> G[End]

---
config:
  layout: "dagre"
---
stateDiagram-v2
state fork_state <<fork>>
  [*] --> fork_state
  fork_state --> State2
  fork_state --> State3

  state join_state <<join>>
  State2 --> a_very_very_long_state_name
  State2342234 --> join_state
  State3 --> join_state
  join_state --> State4
  State4 --> [*]

---
config:
  logLevel: 'debug'
  theme: 'base'
  gitGraph:
    showBranches: true
    showCommitLabel: true
---
      gitGraph
        commit
        branch hotfix
        checkout hotfix
        commit
        branch develop
        checkout develop
        commit id:"ash"
        branch featureB
        checkout featureB
        commit type:HIGHLIGHT
        checkout main
        checkout hotfix
        commit type:NORMAL
        checkout develop
        commit type:REVERSE
        checkout featureB
        commit
        checkout main
        merge hotfix
        checkout featureB
        commit
        checkout develop
        branch featureA
        commit
        checkout develop
        merge hotfix
        checkout featureA
        commit
        checkout featureB
        commit
        checkout develop
        merge featureA
        branch release
        checkout release
        commit
        checkout main
        commit
        checkout release
        merge main
        checkout develop
        merge release

Some text

This is a deployment test.
When this changes, it should be updated in realtime.

Sometimes, but not always, this doesn't render line breaks.

Code blocks / syntax highlighting

def explore_tree_dfs(node):
    if node is None:
        return
    yield node
    if hasattr(node, "children"):
        for child in node.children:
            yield from explore_tree_dfs(child)

function exploreTreeDFS<T>(
  node: TreeNode<T> | null | undefined,
  visit: (node: TreeNode<T>) => void
): void {
  if (!node) {
    return;
  }
  visit(node);
  if (node.children) {
    for (const child of node.children) {
      exploreTreeDFS(child, visit);
    }
  }
}

fn explore_tree_dfs<'a, T, F>(node: &'a Node<T>, visit: &mut F)
where
    F: FnMut(&'a Node<T>), 
    Node<T>: 'a, 
{
    visit(node); 
    for child in &node.children {
        explore_tree_dfs(child, visit);
    }
}

Table

More Markdown Elements

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Blockquote

This is a blockquote. It should be indented and visually distinct from the surrounding text.

Blockquotes can span multiple paragraphs.

Lists

Ordered List

1. First item
2. Second item
3. Third item
   1. Nested item A
   2. Nested item B
4. Fourth item

Unordered List

• Item A
• Item B
• Item C
  • Nested item 1
  • Nested item 2
    • Deeply nested item
• Item D

Horizontal Rule

Links

This is a link to Google.

Images (Placeholder)

Inline Formatting

This text includes bold text, italic text, and inline code. You can also combine bold and italic.

Strikethrough is done with ~~strikethrough~~.

GitHub Flavored Markdown (GFM)

Task Lists

• Finish writing this section
• Add more examples
• Test rendering

Table with Alignment

Footnote

A note¹

Emoji Shortcodes

👍 ✨ 🐫 🎉