Feature Showcase

This note exercises every rendering feature supported by the Sunken Archive. Use it to verify that the site is displaying everything correctly.

---

Text Formatting

Regular text, bold text, italic text, bold italic, strikethrough, and highlighted text.

Inline code looks like this. A <Variable> placeholder should render in red.

Arrows convert automatically: → ⇒ ← ⇐>

Links

Wikilinks

• Plain: Docker
• With alias: Container Notes
• With heading anchor: OSI Model
• External: Quartz Documentation

Footnotes

Quartz uses rehype for HTML processing¹. The site is built with Obsidian-flavored markdown².

Block Reference

This paragraph has a block ID for referencing.

Lists

Unordered

• First item
• Second item
  • Nested item
  • Another nested item
• Third item

Ordered

1. Step one
2. Step two
3. Step three

Task List

• Completed task
• Another completed task
• Pending task
• Another pending task

Tables

Feature	Status	Notes
Wikilinks	Working	Supports aliases and anchors
Callouts	Working	All types rendered
Mermaid	Working	Flowchart, sequence, etc.
LaTeX	Working	KaTeX renderer

Code Blocks

JavaScript

function connect(config) {
  const url = `https://<APIHost>:<Port>/v1`
  const token = config.get("<APIKey>")
  return fetch(url, { headers: { Authorization: token } })
}

Python

def deploy(server: str, port: int) -> None:
    """Deploy to <ServerName> on <Port>."""
    endpoint = f"https://<DeployTarget>:{port}/deploy"
    response = requests.post(endpoint, auth=("<Username>", "<Password>"))
    response.raise_for_status()

Bash

#!/bin/bash
ssh <Username>@<ServerIP> -p <SSHPort> << 'EOF'
  sudo systemctl restart <ServiceName>
  echo "Deployed to <Environment>"
EOF

YAML

services:
  app:
    image: node:20-alpine
    ports:
      - "3000:3000"
    environment:
      NODE_ENV: production
      DB_HOST: <DatabaseHost>

Diff

- const oldValue = "remove this";
+ const newValue = "add this instead";

Callouts

Standard Note

This is a basic note callout.

Information

Provides additional context or details.

Helpful Tip

A useful suggestion for the reader.

Warning

Something to be cautious about.

Danger

Critical information — proceed with care.

Known Bug

Documenting a known issue.

Example

Demonstrates a concept with a concrete example.

FAQ

A frequently asked question with an answer.

Verified

This feature has been tested and confirmed working.

Known Issue

This feature is not yet working as expected.

To Do

A task that still needs to be completed.

Quote

“The best way to predict the future is to invent it.” — Alan Kay

Summary

A brief summary of the key points.

Collapsible Callouts

Expanded by Default

This callout starts open. Click to collapse.

• Item one
• Item two

Collapsed by Default

This callout starts closed. Click to expand. Contains hidden details that aren’t immediately visible.

LaTeX Math

Inline Math

The quadratic formula is $x=\frac{-b\pm \sqrt{b^2-4ac}}{2a}$ and Euler’s identity is $e^{i\pi }+1=0$.

Block Math

$${\int }_{-\infty }^{\infty }{e}^{-x^2}dx=\sqrt{\pi }$$ $$\nabla \times \vec{E}=-\frac{\partial \vec{B}}{\partial t}$$

Mermaid Diagrams

Flowchart

flowchart TD
    A[Markdown Files] --> B[Remark Parser]
    B --> C[Rehype Transformer]
    C --> D[HTML Output]
    D --> E[Static Site]

Sequence Diagram

sequenceDiagram
    participant U as User
    participant Q as Quartz
    participant G as GitHub Pages
    U->>Q: npx quartz build
    Q->>Q: Parse markdown
    Q->>Q: Apply plugins
    Q-->>G: Deploy static files
    G-->>U: Serve site

Variable Highlighting

Variables in angle brackets should render in Catppuccin Mocha red:

• Connect to <ServerIP> on port <Port>
• Set <Username> and <Password> in the config
• Replace <API_Key> with your actual key
• The <DatabaseHost> variable in the YAML above should also be highlighted

Transclusion

Embedding another note (if it exists):

How I Take Notes

How I Take Notes

This page describes the system behind the Sunken Archive — how notes are captured, organized, and connected.

Philosophy

The value of a note is in its connections, not its isolation.

I follow a loosely Zettelkasten-inspired approach:

1. Capture quickly — daily notes, fleeting ideas, bookmarks
2. Process regularly — turn raw notes into linked, permanent ones
3. Connect generously — every note should link to at least two others
4. Publish selectively — not everything needs to be public

Structure

The archive is organized into a few top-level folders:

Folder	Purpose	Example
Projects/	Active projects and endeavors	Web Development, Home Lab
Concepts/	Evergreen reference notes	Docker, Networking
Daily/	Date-stamped journal entries	2026-02-28
Resources/	Curated links and external refs	Bookmarks
Meta/	Notes about the system itself	This note

Tools

• Obsidian — Primary editor. Wiki-links, graph view, and local-first storage.
• Quartz v4 — Publishes the vault as a static site with search, backlinks, and graph.
• GitHub Pages — Free hosting with automated deploys via Actions.

Conventions

Frontmatter

Every note includes YAML frontmatter:

---
title: Note Title
tags:
  - category
  - topic
date: 2026-02-28
description: A one-line summary.
---

Linking

• Use [[wiki-links]] for internal connections
• Use [[Note Title|display text]] for custom link text
• Every note should link to at least 2 other notes

Tags

Tags serve as cross-cutting categories. Current tag taxonomy:

• #project — Active projects
• #concept — Reference/evergreen notes
• #daily — Daily journal entries
• #resources — Link collections
• #meta — Notes about the system

Finding orphan notes

Use the graph view to spot notes with no connections. Every note should be reachable from at least one other note.

Related

• Bookmarks — Tools and resources used in this system
• 2026-02-28 — Today’s daily note

Link to original

Tags in Body Text

Inline tags: test meta showcase

Horizontal Rule

Content above the rule.

---

Content below the rule.

Footnotes

1. rehype is a tool for transforming HTML with plugins. ↩

2. OFM extends standard markdown with features like wikilinks, callouts, and embeds. ↩

---

Combined Code

function connect(config) {
  const url = `https://<APIHost>:<Port>/v1`
  const token = config.get("<APIKey>")
  return fetch(url, { headers: { Authorization: token } })
}

def deploy(server: str, port: int) -> None:
    """Deploy to <ServerName> on <Port>."""
    endpoint = f"https://<DeployTarget>:{port}/deploy"
    response = requests.post(endpoint, auth=("<Username>", "<Password>"))
    response.raise_for_status()

#!/bin/bash
ssh <Username>@<ServerIP> -p <SSHPort> << 'EOF'
  sudo systemctl restart <ServiceName>
  echo "Deployed to <Environment>"
EOF

services:
  app:
    image: node:20-alpine
    ports:
      - "3000:3000"
    environment:
      NODE_ENV: production
      DB_HOST: <DatabaseHost>

- const oldValue = "remove this";
+ const newValue = "add this instead";