IntroParagraph

Adds a drop cap and styling to its content. Primarily for use in longform articles.

<IntroParagraph>
  Every great piece of writing begins with a single word, and that word carries the weight of
  everything that follows. It sets the tone, establishes the voice, and quietly invites the
  reader in. The drop cap is an old trick — medieval scribes used it to mark where something
  important began — and it still earns its place on screen, whether you're writing about
  [software architecture](/writing/) or something more personal. A strong opening can turn a
  casual browser into someone who reads to the end.
</IntroParagraph>

Every great piece of writing begins with a single word, and that word carries the weight of everything that follows. It sets the tone, establishes the voice, and quietly invites the reader in. The drop cap is an old trick — medieval scribes used it to mark where something important began — and it still earns its place on screen, whether you're writing about software architecture or something more personal. A strong opening can turn a casual browser into someone who reads to the end.

Callout

Callouts are fairly self-explanatory. They're used to highlight a piece of content.

Prop	Type	Default	Description
`type`	`'default' \| 'red' \| 'blue' \| 'green' \| 'orange' \| 'yellow' \| 'purple'`	`'default'`	Colour variant.
`title`	`string`	—	Optional bold heading shown above the content.
`icon`	`string`	—	An astro-icon name (e.g. `heroicons:fire-20-solid`). Mutually exclusive with `emoji`.
`emoji`	`string`	—	A text emoji shown in place of an icon. Mutually exclusive with `icon`.
`largeHeading`	`boolean`	`false`	Gives `title` more presence so it doesn't get lost above a long body. No effect without a `title`.

Colour variants & options

<Callout>Default callout — neutral styling for general asides.</Callout>

<Callout type="blue" title="Info">Blue suits informational notes and tips. The title adds a bold heading.</Callout>

<Callout type="green" emoji="✅">Green for success messages and things to do — this one uses an emoji.</Callout>

<Callout type="yellow" icon="heroicons:exclamation-triangle-20-solid">Yellow draws attention to cautions — this one uses an icon.</Callout>

<Callout type="orange" title="Important" icon="heroicons:fire-20-solid">Orange signals something noteworthy. Title and icon combined.</Callout>

<Callout type="red" title="Warning" emoji="🚨">Red is for serious warnings and critical information.</Callout>

<Callout type="purple" emoji="💡">Purple highlights creative ideas or experiments.</Callout>

Rich content

<Callout type="blue" title="Rich content with a large heading" icon="heroicons:document-text-20-solid" largeHeading>
  Callouts can hold anything you'd write elsewhere: **bold**, *italics*,
  `inline code` and [links](/). Lists work too:

  - Bullet points
  - Numbered lists
  - Any nesting you need
</Callout>

Large heading

For callouts with a lot of content, add largeHeading so the title reads as a proper heading — a step larger, with a hairline rule beneath — rather than getting lost above the body. It needs a title to do anything, and works with either an emoji or an icon.

<Callout type="blue" emoji="🎒" title="Some guiding principles" largeHeading>
  A longer callout whose heading needs to stand out from the body beneath it.
</Callout>

<Callout type="green" emoji="✅" title="Some more guiding principles" largeHeading>
  A longer callout whose heading needs to stand out from the body beneath it.
</Callout>

<Callout type="blue" icon="heroicons:globe-alt-20-solid" title="International travel" largeHeading>
  The same treatment, this time with an astro-icon instead of an emoji.
</Callout>

BlockQuoteCitation

As you'd expect, BlockQuoteCitation renders a blockquote with a citation.

Prop	Type	Default	Description
`author`	`string`	—	Attribution name shown in the citation.
`title`	`string`	—	Source title, rendered in a `<cite>`.
`url`	`string`	—	Optional link wrapping the `title`.
`small`	`boolean`	`false`	Render the quote in a smaller, less prominent style.

Author only

<BlockQuoteCitation author="Charles Eames">
  Design is a plan for arranging elements in such a way as best to accomplish a particular purpose.
</BlockQuoteCitation>

Design is a plan for arranging elements in such a way as best to accomplish a particular purpose.

— Charles Eames

Author, title & link

<BlockQuoteCitation
  author="Steve Jobs"
  title="Stanford Commencement Address"
  url="https://news.stanford.edu/2005/06/12/youve-got-find-love-jobs-says/"
>
  Your work is going to fill a large part of your life, and the only way to be truly satisfied is to
  do what you believe is great work.
</BlockQuoteCitation>

Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work.

— Steve Jobs - Stanford Commencement Address

Small

<BlockQuoteCitation author="Anonymous" small>
  The best time to plant a tree was twenty years ago. The second best time is now.
</BlockQuoteCitation>

The best time to plant a tree was twenty years ago. The second best time is now.

— Anonymous

ButtonLink

ButtonLinks are intended mainly for use in MDX when I want some call-to-action. In other contexts, native HTML buttons should be used instead.

Prop	Type	Default	Description
`href`	`string`	required	Destination URL.
`variant`	`'primary' \| 'secondary'`	`'primary'`	Filled accent style, or a subtle bordered style.
`inline`	`boolean`	`false`	Flow inline with text instead of a centred block.

Variants

<ButtonLink href="/writing/">Read more articles</ButtonLink>
<ButtonLink href="/about/" variant="secondary">Learn about me</ButtonLink>

Inline buttons flow with text:
<ButtonLink href="/writing/" inline>Read articles</ButtonLink>
<ButtonLink href="/notes/" inline>Browse notes</ButtonLink>

Standard HTML buttons

<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button" disabled>Disabled</button>
<input type="button" value="Input button" />

Accordion

Accordions are built on top of the native <details> element with some slightly nicer styling.

Prop	Type	Default	Description
`header`	`string`	required	The summary text shown on the toggle.
`open`	`boolean`	`false`	Whether the accordion starts expanded.

Examples

<Accordion header="Standard accordion">
  Default style — starts closed. Click the header to expand.
</Accordion>

<Accordion header="Starts open" open>
  Pass the open prop to render it expanded by default.
</Accordion>

Standard accordion

Default style — starts closed. Click the header to expand.

Starts open

Pass the open prop to render it expanded by default.

Native <details>

Accordion wraps the native <details> element. The raw element under our CSS, for comparison:

<details>
  <summary>Native details element</summary>
  <p>Accordion adds the smaller type and the content-trim spacing on top of this.</p>
</details>

Native details element

Accordion adds the smaller type and the content-trim spacing on top of this.

Notion

The inline Notion component takes a public Notion URL and renders an enriched link to it in much the same way it would in a Notion document. It grabs the Notion page's title at build-time and replaces the contents of the component with that, and if the page has an image or emoji set as its icon it'll grab that and render it too.

Prop	Type	Default	Description
`href`	`string`	required	The Notion page URL.
`title`	`string`	—	Manual title override; skips the build-time title fetch.

A reference to <Notion href="https://dannysmith.notion.site/Meetings-2c4bd8d7ba31427cb1294a008a9df21f" />
fetches its title and icon automatically.

Provide a title to skip the fetch or override it:
<Notion href="https://www.notion.so/Example-Page-abc123" title="My Custom Title" />

A reference to 📅 Meetings fetches its title and icon automatically. You can drop several into a sentence — see Loom too.

Provide a title to skip the fetch or override it: My Custom Title

BookmarkCard

BookmarkCards provide simple block-level link previews. They fetch the page's title and metadata at build-time and adapt to their container width.

Prop	Type	Default	Description
`url`	`string`	required	The URL to preview.
`className`	`string`	`''`	Extra classes on the card wrapper.

<BookmarkCard url="https://astro.build" />

Astro

Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between.

astro.build

CSS: Cascading Style Sheets | MDN

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

developer.mozilla.org

GitHub - withastro/astro: The web framework for content-driven websites. ⭐️ Star to support our work!

The web framework for content-driven websites. ⭐️ Star to support our work! - withastro/astro

github.com

ColorSwatch

ColorSwatches can be used to display a colour based on a CSS variable or other CSS colour value. Hovering the swatch reveals the variable name and clicking copies the computed hex value to the clipboard. These are predominantly used in the styleguide but are available globally just in case.

Prop	Type	Default	Description
`color`	`string`	required	A CSS colour value or custom property.
`name`	`string`	—	Optional label shown inside the swatch.
`class`	`string`	—	Extra classes on the swatch.

<ColorSwatch color="var(--color-coral)" name="Coral" />

Coral

Blue

Green

Purple

Orange

Tabs / TabItem

The Tabs and TabItem components work together to render a tabbed interface.

Component	Prop	Type	Default	Description
`Tabs`	`class`	`string`	—	Extra classes on the tabset.
`TabItem`	`label`	`string`	required	Text shown on the tab button.

<Tabs>
  <TabItem label="First">Content for the first tab.</TabItem>
  <TabItem label="Second">Content for the second tab.</TabItem>
  <TabItem label="Third">Content for the third tab.</TabItem>
</Tabs>

Content for the first tab.

Layout helpers

The layout helpers are intended only for use in MDX files. They wrap other components or markdown.

Center

Horizontally centres its children.

<Center>
  <ButtonLink href="/" inline>Centered button</ButtonLink>
</Center>

Centered button

Grid

A simple responsive grid layout. By default it creates two columns that collapse into one on narrow viewports, but you can adjust the number of columns and rows as needed. Useful for showing image grids and the like in content.

Prop	Type	Default	Description
`columns`	`number`	`2`	Target number of columns; collapses on narrow containers.
`rows`	`number`	`1`	Number of equal-height rows.
`gap`	`string`	`var(--space-s)`	Gap between items.

<Grid columns={3}>
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</Grid>

Column 1

Column 2

Column 3

Column 4

Column 5

Column 6

Images placed in a Grid form a side-by-side gallery: markdown images (or BasicImage) flow into the columns, and their captions and lightbox behaviour are preserved. In content, just wrap the markdown images — see the article styleguide for the rendered version.

<Grid columns={2}>
![Alt text](./one.jpg 'A caption')
![Alt text](./two.jpg 'Another caption')
</Grid>

Wooden deck with striped columns and glass panels — Left

Spacer

Simply adds vertical space. Useful on occasion for separating unusual content arrangements but should not be used routinely.

Prop	Type	Default	Description
`size`	`'3xs' \| '2xs' \| 'xs' \| 's' \| 'm' \| 'l' \| 'xl' \| '2xl' \| '3xl'`	`'m'`	Height from the spacing scale.
`height`	`string`	—	Explicit height override as a CSS length.

<div>Above the spacer</div>
<Spacer size="l" />
<div>Below the spacer</div>

ResizableContainer

Wraps content in a drag-to-resize container for testing width-response. Used throughout this styleguide and occasionally when demonstrating responsiveness in content.

Prop	Type	Default	Description
`initialWidth`	`string`	`'100%'`	Starting width.
`minWidth`	`string`	`'200px'`	Minimum resize width.
`maxWidth`	`string`	`'100%'`	Maximum resize width.

<ResizableContainer>
  <p>Drag the right edge to resize.</p>
</ResizableContainer>

Drag the right edge to resize.

Code blocks

Code blocks are rendered using Expressive Code, which comes with a bunch of nice features out of the box. The colour scheme is based on this site's colour system, but with a lot more variation.

Basic

```js
const colors = ['coral', 'blue', 'green'];
colors.forEach(c => console.log(c));
```

const colors = ['coral', 'blue', 'green'];
colors.forEach(c => console.log(c));

Title

```js title="greet.js"
function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('World'));
```

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('World'));

Terminal frame

```bash frame="terminal"
bun create astro@latest my-project
cd my-project
bun install
bun run dev
```

bun create astro@latest my-project
cd my-project
bun install
bun run dev

Line highlighting

```ts title="config.ts" {2,4-5}
export const config = {
  siteName: 'My Site',        // highlighted
  baseUrl: 'https://example.com',
  theme: 'dark',              // highlighted
  language: 'en',             // highlighted
  version: '1.0.0',
};
```

export const config = {
  siteName: 'My Site',        // highlighted
  baseUrl: 'https://example.com',
  theme: 'dark',              // highlighted
  language: 'en',             // highlighted
  version: '1.0.0',
};

Inserted & deleted lines

```js title="api.js" del={2} ins={3-4}
async function fetchData(url) {
  const response = await fetch(url);
  const response = await fetch(url, {
    headers: { 'Accept': 'application/json' }
  });
  return response.json();
}
```

async function fetchData(url) {
  const response = await fetch(url);
  const response = await fetch(url, {
    headers: { 'Accept': 'application/json' }
  });
  return response.json();
}

Diff

```diff
- const API_VERSION = 'v1';
+ const API_VERSION = 'v2';

  function getEndpoint(path) {
-   return `/api/${API_VERSION}/${path}`;
+   return `/api/${API_VERSION}/${path}?format=json`;
  }
```

const API_VERSION = 'v1';
const API_VERSION = 'v2';

function getEndpoint(path) {
  return `/api/${API_VERSION}/${path}`;
  return `/api/${API_VERSION}/${path}?format=json`;
}

Word wrap

```js wrap
// This is a very long comment that demonstrates how word wrapping works in code blocks when the content exceeds the available width of the container
const message = 'Long strings will also wrap nicely to the next line while preserving the indentation level of the original line';
```

// This is a very long comment that demonstrates how word wrapping works in code blocks when the content exceeds the available width of the container
const message = 'Long strings will also wrap nicely to the next line while preserving the indentation level of the original line';

MarkdownBlock

MarkdownBlocks render raw markdown in a toggleable two-pane view: the rendered markdown on one side, and the source markdown on the other. They're intended for use in MDX content. Adding preview after the language identifier in a markdown or MDX fenced code block will render this component rather than the default expressive code block. Title is supported in a similar way to expressive code fenced blocks. This is handled via a custom Sätteri plugin.

Prop	Type	Default	Description
`code`	`string`	required	The raw markdown to embed.
`title`	`string`	—	Filename / label shown in the header.
`defaultView`	`'rendered' \| 'source'`	`'rendered'`	Which pane shows first.

In MDX, write a fenced block with md preview in the meta string:

```md preview title="sample.md"
## Included markdown

A paragraph with **bold**, _italic_, `inline code`, and a
[link to example.com](https://example.com).

- one
- two
- three

> A short quotation from elsewhere.
```

Or place the component directly, passing the markdown as the code prop:

<MarkdownBlock code={markdownSource} title="sample.md" />

Both render the same toggleable block:

sample.md

Included markdown

A paragraph with bold, italic, inline code, and a link to example.com.

one
two
three

A short quotation from elsewhere.

Opening on the source pane

```md preview title="sample.md" defaultView="source"
## Included markdown

A paragraph with **bold**, _italic_, `inline code`, and a
[link to example.com](https://example.com).

- one
- two
- three

> A short quotation from elsewhere.
```

sample.md

## Included markdown

A paragraph with **bold**, _italic_, `inline code`, and a
[link to example.com](https://example.com).

- one
- two
- three

> A short quotation from elsewhere.

FileTree

Filetrees work in a similar way to MarkdownBlocks, but render a tree view of a file system. Highlighting and title are supported as for expressive code and icons are chosen and coloured based on the file extension. Line comments support simple inline markdown so links and bold/italic work as expected. If a "file" is ... it will render as a placeholder and directories are rendered as HTML details elements making them collapsible (without JavaScript). The parser is glyph-agnostic: ├──, |--, +--, tabs or spaces all parse the same way so long as they're properly structured.

Prop	Type	Default	Description
`code`	`string`	required	The raw tree text (`tree(1)` output or ASCII variants).
`title`	`string`	—	Label shown in the frame header.
`frame`	`string`	—	`"none"` drops the window frame.
`highlight`	`string`	—	Comma-separated 1-based line numbers to highlight.

In MDX, write a fenced block with tree as the language; rows are highlighted with {6}-style ranges:

```tree title="Recording storage" {6}
data/a1b2c3d4-e5f6-7890-abcd-ef1234567890/
├── init.mp4                # HLS initialisation segment (codec headers)
├── seg_000.m4s             # ~4-second media segments streamed during recording; a long video produces dozens of these, so the rest are collapsed into the ellipsis below
├── seg_001.m4s
├── ...
├── stream.m3u8             # HLS playlist tying the init segment and media segments together
├── recording.json          # timeline and events — see the [event schema](https://example.com)
├── My First Take.mov       # the original screen capture, kept for reference
└── derivatives/
    ├── source.mp4          # stitched single-file MP4 with enhanced audio
    ├── thumbnail.jpg        # auto-selected best frame
    ├── captions.srt         # subtitles
    ├── words.json           # per-word transcript timings used by the editor
    └── notes.md             # human notes about the recording
```

Or place the component directly, passing the tree as the code prop (note highlight takes the line numbers as a string):

<FileTree code={treeText} title="Recording storage" highlight="6" />

Both render the same tree:

Recording storage

data/a1b2c3d4-e5f6-7890-abcd-ef1234567890
- init.mp4 HLS initialisation segment (codec headers)
- seg_000.m4s ~4-second media segments streamed during recording; a long video produces dozens of these, so the rest are collapsed into the ellipsis below
- seg_001.m4s
- stream.m3u8 HLS playlist tying the init segment and media segments together
- recording.json timeline and events — see the event schema
- My First Take.mov the original screen capture, kept for reference
- derivatives
  - source.mp4 stitched single-file MP4 with enhanced audio
  - thumbnail.jpg auto-selected best frame
  - captions.srt subtitles
  - words.json per-word transcript timings used by the editor
  - notes.md human notes about the recording

Mermaid diagrams

Fenced code blocks with the mermaid language render to inline SVGs at build time. Diagrams are theme-aware as the baked-in colours are rewritten to --mermaid-* CSS variables (defined in _mermaid.css), so they follow the palette in both light and dark mode, and labels are set in the site's UI font. Theming lives in src/config/mermaid.js.

```mermaid
graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B
```

Flowchart

Sequence Diagram

Gantt Chart

Class Diagram

State Diagram

Pie Chart

BasicImage

The BasicImage component is used for all images in markdown content. It renders gifs as plain image elements and everything else using the Astro Picture component. It's optimised for performance and uses a placeholder while loading, as well as supporting a few additional props to control layout and styling.

Prop	Type	Default	Description
`src`	`string`	required	Image path (`/src/assets/…`) or remote URL.
`alt`	`string`	`''`	Alt text.
`framed`	`boolean`	`false`	Adds a border and subtle shadow. Intended only for use when an image's background is too similar to the page background.
`caption`	`string`	—	Visible caption, independent of the alt text. Takes precedence over `showAlt`.
`showAlt`	`boolean`	`false`	Show the alt text as a visible caption (fallback when no `caption` is set).
`sourceUrl` / `sourceTitle`	`string`	—	Attribution link and label shown in the caption.
`bleed`	`'left' \| 'right' \| 'full'`	—	When in an article layout, this allows the image to extend beyond the content column.
`width` / `height`	`number`	—	Explicit dimensions.

Default

A markdown image automatically becomes a BasicImage:

![Wooden deck with striped columns and glass panels](/src/assets/articles/styleguide-image.jpg)

Or place the component directly for more control:

<BasicImage
  src="/src/assets/articles/styleguide-image.jpg"
  alt="Wooden deck with striped columns and glass panels"
/>

Framed

<BasicImage src="/src/assets/articles/styleguide-image.jpg" alt="…" framed />

Architectural photograph with a frame treatment

With caption

Use the caption prop for a caption that differs from the alt text. In .mdx content you can also add it to a plain markdown image via its title (the third quoted argument); the img → BasicImage remapping isn't available in .md, so there the title stays a native title attribute.

![Accessible alt text](/src/assets/articles/styleguide-image.jpg 'Caption shown to readers')

<BasicImage
  src="/src/assets/articles/styleguide-image.jpg"
  alt="Accessible alt text"
  caption="Caption shown to readers"
/>

Accessible alt text — Caption shown to readers

The alt text can be reused as the caption with showAlt, plus an optional source credit:

<BasicImage
  src="/src/assets/articles/styleguide-image.jpg"
  alt="Modern architectural details with natural light"
  showAlt
  sourceUrl="https://unsplash.com"
  sourceTitle="Unsplash"
/>

Modern architectural details with natural light (source: Unsplash)

Framed with caption

Architectural photograph combining frame and caption treatments (source: Unsplash)

Bleed

The bleed prop (left, right or full) extends the image beyond the content column. It works best inside real article layouts with defined grid columns:

<BasicImage src="/src/assets/articles/styleguide-image.jpg" alt="…" bleed="full" />

Native <img>

The raw element under the site's CSS. Markdown images become BasicImage automatically; reach for a plain <img> only to bypass that (e.g. an SVG or an already-sized asset in public/).

<img src="/avatar.jpg" alt="Danny's avatar" width="200" />

Astro Image & Picture

Image

Generates a single optimised format:

import styleguideImage from '@assets/articles/styleguide-image.jpg';

<Image src={styleguideImage} alt="Using Astro's Image component" width={600} />

Picture

Generates multiple formats (AVIF, WebP, JPEG) for broader browser support:

<Picture
  src={styleguideImage}
  formats={['avif', 'webp', 'jpg']}
  alt="Using Astro's Picture component"
  width={600}
/>

ArticleCard

ArticleCard links to an article from the articles collection — the article itself lives at /writing/…, the card shows the pertinent info and points there. Intended for grids and other collection-index contexts. The full card shows an optional cover with an "Article" badge (plus a platform badge for externally-published pieces; coverless cards get a meta row instead), the title, a summary and a footer with dates, a series indicator and reading time. The compact variant is a small linked tile. Both respond to their container width — drag the handles below to see them adapt.

Prop	Type	Default	Description
`item`	`CollectionEntry<'articles'>`	required	The article entry to render.
`compact`	`boolean`	`false`	Render a small linked tile (title + "Article · date · reading time" byline) instead of the full card.

Full card

<ArticleCard item={article} />

Article

Article Styleguide

A comprehensive styleguide demonstrating how all key Markdown/MDX features, Astro components, and prose styles render in an article context.

Banner image with text: Astro Editor 1.0.0

Article

Introducing Astro Editor

I've launched Astro Editor, a desktop app for authoring and editing Markdown and MDX content in local Astro Content Collections!

Article medium

On Sass and Other CSS Preprocessors

On Sass and Other CSS Preprocessors...

Compact

The byline drops on very narrow containers.

<ArticleCard item={article} compact />

Article Styleguide Article · May 1, 2024 · 10 min read Introducing Astro Editor Article · Jan 8, 2026 · 6 min read On Sass and Other CSS Preprocessors Article · May 4, 2014

NoteCard

Renders a full note (rendering its content itself), as used on the notes index and note pages. A sourceURL shows an embed; tags render as pills.

Prop	Type	Default	Description
`item`	`CollectionEntry<'notes'>`	required	The note entry to render — content, title, date, tags and sourceURL all come from it.
`compact`	`boolean`	`false`	Render the compact card — date, title and a short summary from the body, with a torn-paper edge — instead of the full card.
`standalone`	`boolean`	`false`	The card is the note's own page: marks it as the Pagefind search body, enables sharing and adds a back-to-top link. Listing pages leave it off so each note stays a single search result.

Full card

<NoteCard item={note} />

Aug 20, 2025

Tauri Template

tauri react

GitHub - dannysmith/tauri-template: A production-ready template for building modern desktop applications with Tauri v2, React 19, and TypeScript. This template provides a solid foundation with best practices, comprehensive documentation, and quality tooling built-in.

A production-ready template for building modern desktop applications with Tauri v2, React 19, and TypeScript. This template provides a solid foundation with best practices, comprehensive documentat...

github.com

While building Astro Editor I learned a fair bit about Tauri and how to develop simple macOS/React apps with it using Claude Code.

So I spent a few hours building the boilerplate I wish I’d had when I started, tauri-template. It comes with:

A basic boilerplate for Tauri 2, React & Typescript
A sensible state management system using Zustand and Tanstack Query
UI components based on shadcn and tailwind 4
A command system with a command palette, macOS menus and keyboard shortcuts
An auto-update and release system using GitHub Actions.
A notifications system with in-app toasts and native notifications.
A minimal logging system
A preferences pane and preferences persistence system
A basic UI with a unified title bar, sidebars and a main panel
Sensible developer documentation, AI instructions and linting/formatting/tests to help AI Agents make fewer errors.
Some other sensible boilerplate.

This is mainly meant for me to use as a starting point when building other macOS apps with Tauri & React.

Minimal (no tags or source URL)

Dec 8, 2025

I'm glad people still make things like this

AI CEO – Replace Your Boss Before They Replace You

Stop working for humans. AI CEO delivers algorithmic thought leadership, with instant decisions, and zero ego. Replace your boss before they replace you.

replaceyourboss.ai

Oilwell - Meditate through the meltdown

A wellness app to help you embrace climate chaos, created by Edelman, Oil and Gas PR. From Smog Breathing Exercises, to Lifeless Rock Visualizations, to Wildfire ASMR.

oilwell.app

(While funny, I hate that folks felt the need to make these, obvs)

Compact

The compact prop renders a smaller card — date, title and a short summary drawn from the body — with a torn-paper right edge (a per-note seed varies the tear). Used for note listings such as the homepage.

<NoteCard item={note} compact />

Dec 14, 2005

Backing up your Firefox extensions (on windows)

It's always been a source of irritation to me that whenever my FF installation breaks, or if I decide to reinstall it, I have to hunt down...

Dec 16, 2005

Brain Upgrade

I heard a few hours ago that the average human brain has 116GB of data storage, and 16Mb of memory.

Jan 10, 2006

Konfabulator Widget: YubNub i (1.0)

Over the last few weeks I've been using a nifty little web service called YubNub, it's basically a command line for the web and while it's...

ProjectCard

ProjectCard renders a project from the projects collection, and has three variants. The default is a card modelled on ToolCard: cover image, status badge, icon, title and the first paragraph of the body, with Code/Website links. The full prop renders the whole markdown body inline, as used on the /making page. The compact prop is a small linked tile. All respond to their container width — the demos below sit in resizable containers, so drag the handle to see them reflow.

Prop	Type	Default	Description
`item`	`CollectionEntry<'projects'>`	required	The project entry to render.
`full`	`boolean`	`false`	Render the full card — the project's markdown body inline, with status pills, an optional image and website/GitHub buttons (the `/making` view).
`compact`	`boolean`	`false`	Render a small linked tile (icon + title + byline) instead.

Card (default)

The default variant, modelled on ToolCard: the project image as a cover with a status badge, an overlapping icon, the title and the first paragraph of the body. The whole card links out (website → GitHub → its /making anchor); the footer links are separate.

<ProjectCard item={project} />

Project In development

Astro Editor

Astro Editor is a native desktop app for writing and editing the Markdown and MDX inside Astro content collections. Astro Editor reads the collection schema and turns the YAML frontmatter into proper form fields in a...

Project Finished

LoomClone

LoomClone is my own version of Loom – a native macOS app for recording, a web app for managing them and public pages which serve them to users.

Project In development

Taskdn

Taskdn is a system for managing my tasks and projects as plain markdown files. Every task, project and life area is a markdown file with a bit of YAML frontmatter, in a folder I control.

Full card

The full prop renders the project's whole markdown body inline, as used on /making. Past a wide container the image moves out to the right of everything else.

<ProjectCard item={project} full />

In active development

Astro Editor is a native desktop app for writing and editing the Markdown and MDX inside Astro content collections. Astro Editor reads the collection schema and turns the YAML frontmatter into proper form fields in a sidebar, so the writing interface can be minimal. It also handles fiddly stuff like dragging in images and inserting MDX components.

The guiding philosophy is that publishing with Astro should happen in two modes: writer mode (actually writing the words) and coder mode (checking it builds, committing, tweaking actual code etc). Astro Editor is optimised for the first. See Introducing Astro Editor for more.

I started on this in mid-2025 as a project to learn how to build software properly with AI, on the condition that it couldn’t be a toy and had to be something I’d actually use every day. It turned out to be exactly that — I write almost everything on this site in it now. It’s free and open source and used by a fair few folks daily.

GitHub Repo Astro Editor Website

Compact

The compact prop renders a linked tile that opens the project's website (then GitHub, then its /making anchor). The byline drops on very narrow containers.

<ProjectCard item={project} compact />

Astro Editor A desktop app for writing astro content

LoomClone A personal video recording and hosting platform

Taskdn Local task management with markdown

ToolCard

ToolCard renders a page from the toolboxPages collection — the Remote Working Toolbox shown on /toolbox — and links out to the tool on betterat.work. The full card shows the cover image with "Tool" and category badges, a Notion-style overlapping icon (an emoji or an image), the title, a truncated summary and a footer with dates and a Notion link. The compact variant is a small linked tile. Both respond to their container width — drag the handles below to see them adapt.

Prop	Type	Default	Description
`tool`	`CollectionEntry<'toolboxPages'>`	—	The toolbox entry to render.
`compact`	`boolean`	`false`	Render a small linked tile (icon + title + category byline) instead of the full card.

Full card

Below 350px of container width the icon, badges and summary shrink and the Notion link is dropped.

<ToolCard item={tool} />

Tool Async Collaboration

🤝

A Working With Me Page

This is a guide on how to create a "working with me" page to help your team get to know you better. It includes a list of things to include and the benefits of having such a page. You can use the Notion template provided to customize your own page and make it useful for your colleagues.

Tool Slack

Ask Channels in Slack

This document outlines the benefits of creating "ask channels" on Slack for larger teams. By creating specific channels for external inquiries, teams can keep their internal channels clear for important communication. The document also provides tips on how to name and manage these channels effectively.

Compact

The byline drops on very narrow containers.

<ToolCard item={tool} compact />

🤝 A Working With Me Page Tool filed under Async Collaboration

Ask Channels in Slack Tool filed under Slack

ContentCard

ContentCard renders any content-collection item as its card, from just a "collection/id" string — sugar for use in MDX content, where you don't have the entry to hand. It looks the entry up and dispatches to the right card component (ArticleCard, NoteCard, ToolCard or ProjectCard), passing compact through. An unknown collection or id fails the build with a clear error.

Prop	Type	Default	Description
`item`	`string`	required	`"collection/id"`, where collection is one of `articles`, `notes`, `toolboxPages` or `projects`.
`compact`	`boolean`	`false`	Render the card's compact variant instead of the full card.

Full cards

<ContentCard item="articles/my-article-slug" />

Article

Article Styleguide

A comprehensive styleguide demonstrating how all key Markdown/MDX features, Astro components, and prose styles render in an article context.

Tool Async Collaboration

🤝

A Working With Me Page

This is a guide on how to create a "working with me" page to help your team get to know you better. It includes a list of things to include and the benefits of having such a page. You can use the Notion template provided to customize your own page and make it useful for your colleagues.

Compact

<ContentCard item="notes/some-note" compact />

Article Styleguide Article · May 1, 2024 · 10 min read

Dec 14, 2005

Backing up your Firefox extensions (on windows)

It's always been a source of irritation to me that whenever my FF installation breaks, or if I decide to reinstall it, I have to hunt down...

🤝 A Working With Me Page Tool filed under Async Collaboration

Astro Editor A desktop app for writing astro content

Embeds

A number of components are provided for embedding external content. Some of these are part of this site, while others are imported from astro-embed.

LCVid

The LCVid component renders self-hosted videos from my video platform. Metadata (title, description, duration, transcript) is fetched at build time from the video's JSON and clicking the video plays it using a Vidstack player.

Prop	Type	Default	Description
`src`	`string`	required	Full URL, absolute path, or bare slug on v.danny.is.
`title` / `description`	`string`	—	Override the copy fetched from the video's JSON.
`showTitle` / `showDescription` / `showMeta` / `showOpenLink`	`boolean`	`true`	Toggle each piece of chrome around the player.
`showTranscript`	`boolean`	`false`	Reveal a collapsible transcript (when one exists in the JSON).

Default — full chrome

<LCVid src="lcdemo-part-2" />

With transcript

<LCVid src="lcdemo-part-2" showTranscript />

Loom

Renders a placeholder until the video is clicked to load the heavy iframe from the Loom player.

Prop	Type	Default	Description
`id`	`string`	required	The Loom share id.
`poster`	`string`	—	Custom poster image (falls back to the oEmbed thumbnail).

<Loom id="0132dbe661b24dd28f42e2ce040f78cc" />

Avoiding Cabin Fever when Working Remotely

astro-embed components

These come from the astro-embed package. Each takes the resource URL (or bare id) as its id prop and loads at build time.

YouTube

<YouTube id="https://youtu.be/xtTy5nKay_Y" />

Vimeo

<Vimeo id="32001208" />

Tweet

<Tweet id="https://twitter.com/astrodotbuild/status/1512144306898976768" />

It's Astro Community Day! 🥳
You might be wondering...

Who are some 💯 Astro contributors?
Where does Astro's sponsorship 💰 go?
How does Astro give back to OSS?

Let's get into it! A thread 🧵 pic.twitter.com/PrCThabHYM
— Astro (@astrodotbuild) April 7, 2022

Gist

<Gist id="https://gist.github.com/delucis/0b44f4ff0397767b2416cc981692c346" />

BaselineStatus

<BaselineStatus id="scroll-snap" />

BlueskyPost

<BlueskyPost id="https://bsky.app/profile/mk.gg/post/3la4wqeyztm2u" />

Matt Kane @mk.gg

Oh look. Welcome @astro.build to Bluesky!

November 4, 2024 at 2:33 PM UTC

MastodonPost

<MastodonPost id="https://m.webtoo.ls/@astro/112966069629573422" />

Native <video>

The raw HTML5 video element under the site's CSS. Self-hosted clips normally use LCVid above; this is the unstyled baseline.

<video controls width="640" style="max-width: 100%">
  <source src="/styleguide/placeholder.mp4" type="video/mp4" />
</video>

Native <audio>

The raw HTML5 audio element under the site's CSS.

<audio controls src="/styleguide/placeholder.mp3"></audio>

Embed (auto-dispatch)

The <Embed> component regex-matches a URL and renders the most appropriate component, so in prose you can paste almost any link and get a sensible embed. It dispatches YouTube, Vimeo, Tweet, Loom, v.danny.is (LCVid), GitHub Gist, Bluesky and Mastodon URLs to the components above — and falls back to a <BookmarkCard> for anything it doesn't recognise.

BaselineStatus has no URL to match against, so it isn't auto-dispatched — use the named component above.

<Embed url="https://youtu.be/xtTy5nKay_Y" />
<Embed url="https://v.danny.is/lcdemo-part-2" />
<Embed url="https://example.com" /> {/* no match → BookmarkCard */}

An unrecognised URL falls back to a BookmarkCard:

Example Domain example.com

	---
	import { Gist } from '@astro-community/astro-embed-gist';
	---

	<p>Here’s an example of using the Astro Embed <code>Gist</code> component:</p>

	<Gist id="https://gist.github.com/delucis/0b44f4ff0397767b2416cc981692c346" />

Content Components

Site styleguide

IntroParagraph

Callout

Colour variants & options

Rich content

Large heading

BlockQuoteCitation

Author only

Author, title & link

Small

ButtonLink

Variants

Standard HTML buttons

Accordion

Examples

Native <details>

Notion

BookmarkCard

ColorSwatch

Tabs / TabItem

Layout helpers

Center

Grid

Spacer

ResizableContainer

Code blocks

Basic

Title

Terminal frame

Line highlighting

Inserted & deleted lines

Diff

Word wrap

MarkdownBlock

Included markdown

Opening on the source pane

Included markdown

FileTree

Mermaid diagrams

Flowchart

Sequence Diagram

Gantt Chart

Class Diagram

State Diagram

Pie Chart

BasicImage

Default

Framed

With caption

Framed with caption

Bleed

Native <img>

Astro Image & Picture

Image

Picture

ArticleCard

Full card

Article Styleguide

Introducing Astro Editor

On Sass and Other CSS Preprocessors

Compact

NoteCard

Full card

Minimal (no tags or source URL)

Compact

ProjectCard

Card (default)

Astro Editor

LoomClone

Taskdn

Full card

Astro Editor

Compact

ToolCard

Full card

A Working With Me Page

Ask Channels in Slack

A Working With Me Page

Ask Channels in Slack