JAAMD

This page is rendered with JAAMD, and exercises every component it ships. What you see below is the integration’s own output.

Installation

npx astro add @jaamd/jaamd

Then wrap your content, and everything below this line is what you get.

---
import MarkdownContent from '@jaamd/jaamd/components'
---

<MarkdownContent>
    <slot />
</MarkdownContent>

Themes

The picker in the header switches between JAAMD’s own palette, which follows your system, and the presets the package ships. The whole page follows, syntax colours included: Shiki bakes one variable per theme at build time and the switch is pure CSS.

@import '@jaamd/jaamd/default.css';
@import '@jaamd/jaamd/themes/nord.css';

A theme declares nine seed colours and everything else derives from them. Adding one is a directory and a manifest entry.

Table of contents

The block above is markdown you write yourself: nothing is generated, so the entries, their order and their depth are yours. The label becomes the title, and the entry whose section is on screen is marked as current.

:::toc[Components]
- [Alerts](#alerts)
- [Code tabs](#code-tabs)
    - [Nested entries work too](#nested-entries-work-too)
:::

Anchors come from Astro’s heading ids, slugged with github-slugger: one dash per space, punctuation dropped, underscores kept.

Alerts

Code tabs

Several code blocks in one tabbed panel. The text after the language is the tab label; arrows move between tabs, and each panel is focusable so wide samples can be scrolled by keyboard.

console.log('Hello from JavaScript!')

const msg: string = 'Hello from TypeScript!'
console.log(msg)

print("Hello from Python!")

Copy buttons

Every fenced block gets one, top right on hover.

export function hello(name: string): string {
    return `Hello, ${name}!`
}

Heading links

Hover any heading on this page to reveal the anchor icon. It links to that section. All six levels have one, and an anchored heading comes to rest clear of the sticky header above.

Headings that mention frontmatter

Get their anchor at build time too.

Image lightbox

Click the image to open it full screen. Press Esc, click the backdrop or the ✕ button to close.

Details

console.log('Inside an accordion!')

Spoilers

Click the blurred text, or focus it with Tab and press Enter, to reveal it:

The butler did it.

Tables

Wrapped in a scroll container, so a wide table never pushes the page sideways.

Typography scale

Every construct that carries a --jaamd-font-size-* token, so the whole scale can be checked at once. Set --jaamd-font-size on an unlayered :root and all of this moves together; set one per-element token and only its own rows move.

Third level

Fourth level

Fifth level

Sixth level

A paragraph, for the baseline size, with some inline code in it and a link for good measure.

• A tight list item
• Another one, with code inside it
  • And a nested one

1. A tight ordered item
2. Followed by a loose list, whose items are wrapped in paragraphs:

• Loose items are <li><p>…</p></li>, so they read the paragraph token rather than the list one.

• Tight items carry no <p>, so they read the list token instead.

A blockquote’s first paragraph.

And a second one. Both follow the blockquote’s own size, not the paragraph token: the block that owns a token governs what is inside it.

Footnotes sit in their own block with their own size,¹ paragraphs and list items included.²