Component Test Page

CodeBlock

With title + line numbers

import { createHighlighter } from "shiki";

const highlighter = await createHighlighter({
  themes: ["github-light", "github-dark"],
  langs: ["typescript"],
});

const html = highlighter.codeToHtml(code, {
  lang: "typescript",
  themes: { light: "github-light", dark: "github-dark" },
  defaultColor: false,
});

Minimal (no title, no line numbers)

{ "name": "blog", "version": "1.0.0" }

Not collapsible

echo "hello world"

CLISnippet

Custom prompt

DirTree

Icons variant (default)

Simple variant

Tweet

PersonPopup

As Andrej KarpathyAAndrej KarpathyAI ResearcherIndependent (prev. Tesla, OpenAI)𝕏Twitter🔗WebsiteinLinkedIn noted in his tweet, and Simon WillisonSSimon WillisonCreator of DatasetteIndependent𝕏Twitter🔗WebsiteinLinkedIn later connected, context engineering is becoming a distinct discipline. Philipp SchmidPPhilipp SchmidAI Developer AdvocateGoogle DeepMind𝕏Twitter🔗WebsiteinLinkedIn published a 7-component framework.

Unknown person test: Unknown Person (should render as plain text).

TimelineCards

Non-collapsible

TimelineProcess

OGCard

(Fetches OG data at build time — requires network during build)

Getting started

Guides, resources, and API references to help you build with Astro — the web framework for content-driven websites.

Docs

HierarchySimple

Collapsible