Frontmatter

Each page should include title and description. Optionally, you can define an icon if you want it to show an icon in the sidebar menu:

---
title: Page title
description: Short summary for search and previews.
icon: file-text # Optional
---

Markdown

Use normal Markdown (headings, lists, tables, links). Headings power the “On this page” TOC.

## Section
### Subsection

Code

Use fenced code blocks with a language:

npm run build

Code blocks get:

• Syntax highlighting (highlight.js)
• A Copy button

Media

Put media (images, downloads) in media/ and reference them with an absolute path:

![Diagram](../../media/diagram.png)

assets/ is reserved for public site assets (CSS, JS, favicon, etc).

Syntax Highlight Test

Java

import java.util.List;

public class HelloWorld {
    public static void main(String[] args) {
        List<String> names = List.of("Alice", "Bob", "Charlie");

        for (String name : names) {
            System.out.println("Hello, " + name + "!");
        }
    }
}

Scala

case class User(name: String, age: Int)

object Main extends App {
  val users = List(
    User("Alice", 30),
    User("Bob", 25),
    User("Charlie", 35)
  )

  users
    .filter(_.age > 28)
    .map(u => s"${u.name} is ${u.age} years old")
    .foreach(println)
}

Python

from dataclasses import dataclass
from typing import List

@dataclass
class User:
    name: str
    age: int

users: List[User] = [
    User("Alice", 30),
    User("Bob", 25),
    User("Charlie", 35),
]

filtered = [u for u in users if u.age > 28]

for user in filtered:
    print(f"{user.name} is {user.age} years old")

TypeScript

type User = {
  name: string;
  age: number;
};

const users: User[] = [
  { name: "Alice", age: 30 },
  { name: "Bob", age: 25 },
  { name: "Charlie", age: 35 }
];

const filtered = users
  .filter(u => u.age > 28)
  .map(u => `${u.name} is ${u.age} years old`);

filtered.forEach(console.log);

HTML, Nunjucks and Components

Markdown supports inline HTML as well as Nunjucks code.

For example you can use {% lucide "triangle-alert" %} to insert an icon.

You can also use any of the Basecoat components. For example the Alert compomnent:

<div class="alert">
  {% lucide "triangle-alert" %}
  <h3>Alert title</h3>
  <section>
    <p>Alert content here.</p>
  </section>
</div>