Sample: Advanced Features

Sample
#sample #tabs #transclusion #navbox
March 21, 2026

This is a live demo page for the features described in Sample: Shortcode Reference.

Tabs (Tabs / Tab Components)

You can create tabbed content by combining <Tabs> and <Tab label="...">.
Markdown is fully supported inside tabs (including tables, code blocks, and shortcodes).

snsn-codex is a personal Wiki built on top of the Astro static site generator.

Main Features:

  • Generate pages just by writing Markdown / MDX
  • Link between pages with WikiLinks
  • Visualize knowledge connections with Graph View
  • Full-text search powered by Pagefind
npm install
npm run dev    # Dev server (http://localhost:4321)
npm run build  # Production build + Pagefind index generation

It works just by placing Markdown files in src/content/wiki/.

You can change the color scheme by modifying CSS variables in src/styles/theme.css.

:root {
  --color-accent: #e11d48;  /* Change to rose color */
}

For the monochrome theme, refer to src/styles/theme-mono.css.

Changing the theme is as simple as rewriting one line in theme.css.

Footnotes

Footnotes are created by placing <Ref id="..." /> in the text and defining the corresponding annotation with <Fn id="..."> at the end of the page [1] .
Hover over the number for a popup, and click to scroll to the end section [2] .

Page Embedding (Transclusion)

You can embed the content of another Wiki page directly with <Include slug="slug" />.
The following embeds the content of the Getting Started page.

getting-started

Setup

# After cloning, install dependencies
npm install

# Start development server (http://localhost:4321)
npm run dev

# Build for production (also generates Pagefind search index)
npm run build

# Preview build results
npm run preview

Creating Pages

Just place Markdown files in src/content/wiki/ to create pages.

---
title: "Page Title"
description: "Short description (optional)"
tags: ["tag1", "tag2"]
category: "Category Name"
date: 2024-01-01
updated: 2024-06-01
---

Write your content here. You can use [[WikiLink]] to link to other pages.

Common Frontmatter Fields

FieldTypeDescription
titlestringPage title (required)
descriptionstringShort description (optional)
tagsstring[]Array of tags
categorystringCategory name
datedateCreation date
updateddatelast updated date
draftbooltrue for draft (private)
[[Page Name]]                 → Link to page
[[Page Name|Display Text]]    → Link with custom text
[[Subfolder/Page Name]]       → Link to page in subfolder

Backlinks (list of pages linking to the current page) are automatically displayed at the bottom of the page.

Directory Structure

Content is managed as resources under src/content/wiki/[lang]/. You can further organize them with subdirectories.

src/content/wiki/
├── ja/                → Japanese (Root)
│   ├── index.mdx      → /wiki/ja
│   ├──入门.mdx         → /wiki/ja/getting-started
│   └── recipes/
│       └── pasta.mdx  → /wiki/ja/recipes/pasta
└── en/                → English
    └── index.mdx      → /wiki/en

Files in src/content/wiki/templates/ are treated as templates and will not be published as normal pages.

Internationalization (i18n)

See Sample: Internationalization (i18n) for details. Automatic fallback feature ensures that the Japanese version is displayed if a translation is missing.

Customizing Sidebar

Edit src/data/sidebar-nav.ts to change the sidebar configuration.

// Manual links
{
  title: 'Guide',
  icon: 'fa-solid fa-book',
  items: [
    { slug: 'getting-started', label: 'Getting Started' },
    { slug: 'shortcode-reference', label: 'Shortcodes' },
  ],
},

// Auto-collect category
{
  title: 'Recipes',
  icon: 'fa-solid fa-utensils',
  category: 'Recipes',
  autoSort: 'title',
},

Publishing to GitHub Pages

  1. Create a GitHub repository and push your code.
  2. Select GitHub Actions in Settings → Pages → Source.
  3. If using a subpath (/repo-name), set the following in Settings → Variables:
    • SITE_URL: https://username.github.io
    • BASE_PATH: /repo-name
  4. Push to the main branch to trigger auto-deployment.

BASE_PATH is not needed if you use a custom domain or username.github.io at the root.

Next: Sample: Shortcode Reference →

Define a navigation box in src/data/navboxes.ts and call it by its id.

<Navbox id="example-navbox" />
サンプルナビゲーション
基本
トップ · 概要
外部リンク
公式サイト

Footnotes (Content)

[1] Write footnote text here. It will appear as a popup when hovering over the number in the main text. ↩
[2] Use ”↩” to return to the reference point. ↩
Pages linking to this page (1)