astro-awesomeness 0.1.0

package/dist/lib-DRaCmJ7r.js

@@ -0,0 +1,50 @@
+import { t as __exportAll } from "./chunk-pbuEa-1d.js";
+import { t as cn } from "./cn-B3UhF_Ec.js";
+//#region src/lib/format-date.ts
+const defaultOptions = {
+	day: "numeric",
+	month: "long",
+	timeZone: "UTC",
+	year: "numeric"
+};
+const formatDate = (date, locale = "en-US", options = defaultOptions) => new Intl.DateTimeFormat(locale, {
+	...defaultOptions,
+	...options
+}).format(date);
+//#endregion
+//#region src/lib/get-related-posts.ts
+const countShared = (a, b) => {
+	const setB = new Set(b);
+	return a.filter((tag) => setB.has(tag)).length;
+};
+const getRelatedPosts = (current, all, n) => all.filter((post) => post.slug !== current.slug).map((post) => ({
+	post,
+	score: countShared(current.data.tags, post.data.tags)
+})).toSorted((x, y) => y.score - x.score).slice(0, n).map(({ post }) => post);
+//#endregion
+//#region src/lib/reading-time.ts
+const WORDS_PER_MINUTE = 200;
+const readingTime = (input) => {
+	const stripped = input.replaceAll(/* @__PURE__ */ new RegExp("<[^>]*>", "gv"), "").replaceAll(/* @__PURE__ */ new RegExp("[#*_`>\\-]", "gv"), " ").replaceAll(/* @__PURE__ */ new RegExp("\\s+", "gv"), " ").trim();
+	const words = stripped.length === 0 ? 0 : stripped.split(" ").length;
+	return {
+		minutes: Math.max(1, Math.ceil(words / WORDS_PER_MINUTE)),
+		words
+	};
+};
+//#endregion
+//#region src/lib/slugify.ts
+const slugify = (input) => input.normalize("NFD").replaceAll(/* @__PURE__ */ new RegExp("[̀-ͯ]", "gv"), "").toLowerCase().replaceAll(/* @__PURE__ */ new RegExp("[^a-z0-9\\s\\-]", "gv"), "").trim().replaceAll(/* @__PURE__ */ new RegExp("[\\s\\-]+", "gv"), "-").replaceAll(/* @__PURE__ */ new RegExp("^-+|-+$", "gv"), "");
+//#endregion
+//#region src/lib/index.ts
+var lib_exports = /* @__PURE__ */ __exportAll({
+	cn: () => cn,
+	formatDate: () => formatDate,
+	getRelatedPosts: () => getRelatedPosts,
+	readingTime: () => readingTime,
+	slugify: () => slugify
+});
+//#endregion
+export { formatDate as a, getRelatedPosts as i, slugify as n, readingTime as r, lib_exports as t };
+
+//# sourceMappingURL=lib-DRaCmJ7r.js.map

package/dist/lib-DRaCmJ7r.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lib-DRaCmJ7r.js","names":[],"sources":["../src/lib/format-date.ts","../src/lib/get-related-posts.ts","../src/lib/reading-time.ts","../src/lib/slugify.ts","../src/lib/index.ts"],"sourcesContent":["const defaultOptions: Intl.DateTimeFormatOptions = {\n  day: \"numeric\",\n  month: \"long\",\n  timeZone: \"UTC\",\n  year: \"numeric\",\n};\n\nconst formatDate = (\n  date: Date,\n  locale: string = \"en-US\",\n  options: Intl.DateTimeFormatOptions = defaultOptions,\n) => new Intl.DateTimeFormat(locale, { ...defaultOptions, ...options }).format(date);\n\nexport { formatDate };\n","type HasTags = { data: { tags: Array<string> }; slug: string };\n\nconst countShared = (a: Array<string>, b: Array<string>) => {\n  const setB = new Set(b);\n  return a.filter((tag) => setB.has(tag)).length;\n};\n\nconst getRelatedPosts = <T extends HasTags>(current: T, all: Array<T>, n: number) =>\n  all\n    .filter((post) => post.slug !== current.slug)\n    .map((post) => ({\n      post,\n      score: countShared(current.data.tags, post.data.tags),\n    }))\n    .toSorted((x, y) => y.score - x.score)\n    .slice(0, n)\n    .map(({ post }) => post);\n\nexport { getRelatedPosts };\n","const WORDS_PER_MINUTE = 200;\n\nconst readingTime = (input: string) => {\n  const stripped = input\n    .replaceAll(/<[^>]*>/gv, \"\")\n    .replaceAll(/[#*_`>\\-]/gv, \" \")\n    .replaceAll(/\\s+/gv, \" \")\n    .trim();\n  const words = stripped.length === 0 ? 0 : stripped.split(\" \").length;\n  const minutes = Math.max(1, Math.ceil(words / WORDS_PER_MINUTE));\n  return { minutes, words };\n};\n\nexport { readingTime };\n","const slugify = (input: string) =>\n  input\n    .normalize(\"NFD\")\n    .replaceAll(/[̀-ͯ]/gv, \"\")\n    .toLowerCase()\n    .replaceAll(/[^a-z0-9\\s\\-]/gv, \"\")\n    .trim()\n    .replaceAll(/[\\s\\-]+/gv, \"-\")\n    .replaceAll(/^-+|-+$/gv, \"\");\n\nexport { slugify };\n","export { cn } from \"./cn\";\nexport { formatDate } from \"./format-date\";\nexport { getRelatedPosts } from \"./get-related-posts\";\nexport { readingTime } from \"./reading-time\";\nexport { slugify } from \"./slugify\";\n"],"mappings":";;;AAAA,MAAM,iBAA6C;CACjD,KAAK;CACL,OAAO;CACP,UAAU;CACV,MAAM;AACR;AAEA,MAAM,cACJ,MACA,SAAiB,SACjB,UAAsC,mBACnC,IAAI,KAAK,eAAe,QAAQ;CAAE,GAAG;CAAgB,GAAG;AAAQ,CAAC,EAAE,OAAO,IAAI;;;ACTnF,MAAM,eAAe,GAAkB,MAAqB;CAC1D,MAAM,OAAO,IAAI,IAAI,CAAC;CACtB,OAAO,EAAE,QAAQ,QAAQ,KAAK,IAAI,GAAG,CAAC,EAAE;AAC1C;AAEA,MAAM,mBAAsC,SAAY,KAAe,MACrE,IACG,QAAQ,SAAS,KAAK,SAAS,QAAQ,IAAI,EAC3C,KAAK,UAAU;CACd;CACA,OAAO,YAAY,QAAQ,KAAK,MAAM,KAAK,KAAK,IAAI;AACtD,EAAE,EACD,UAAU,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK,EACpC,MAAM,GAAG,CAAC,EACV,KAAK,EAAE,WAAW,IAAI;;;AChB3B,MAAM,mBAAmB;AAEzB,MAAM,eAAe,UAAkB;CACrC,MAAM,WAAW,MACd,2BAAW,IAAA,OAAA,WAAA,IAAU,GAAG,EAAE,EAC1B,2BAAW,IAAA,OAAA,cAAA,IAAY,GAAG,GAAG,EAC7B,2BAAW,IAAA,OAAA,QAAA,IAAM,GAAG,GAAG,EACvB,KAAK;CACR,MAAM,QAAQ,SAAS,WAAW,IAAI,IAAI,SAAS,MAAM,GAAG,EAAE;CAE9D,OAAO;EAAE,SADO,KAAK,IAAI,GAAG,KAAK,KAAK,QAAQ,gBAAgB,CAC/C;EAAG;CAAM;AAC1B;;;ACXA,MAAM,WAAW,UACf,MACG,UAAU,KAAK,EACf,2BAAW,IAAA,OAAA,SAAA,IAAQ,GAAG,EAAE,EACxB,YAAY,EACZ,2BAAW,IAAA,OAAA,mBAAA,IAAgB,GAAG,EAAE,EAChC,KAAK,EACL,2BAAW,IAAA,OAAA,aAAA,IAAU,GAAG,GAAG,EAC3B,2BAAW,IAAA,OAAA,WAAA,IAAU,GAAG,EAAE"}

package/dist/styles/globals.css

@@ -0,0 +1,209 @@
+/* This stylesheet is consumed AFTER `@import "tailwindcss"` in the host app.
+   It contributes tokens, base styles, prose, and the dark variant. */
+
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --color-background: oklch(1 0 0);
+  --color-foreground: oklch(0.145 0 0);
+  --color-card: oklch(1 0 0);
+  --color-card-foreground: oklch(0.145 0 0);
+  --color-popover: oklch(1 0 0);
+  --color-popover-foreground: oklch(0.145 0 0);
+  --color-primary: oklch(0.205 0 0);
+  --color-primary-foreground: oklch(0.985 0 0);
+  --color-secondary: oklch(0.97 0 0);
+  --color-secondary-foreground: oklch(0.205 0 0);
+  --color-muted: oklch(0.97 0 0);
+  --color-muted-foreground: oklch(0.556 0 0);
+  --color-accent: oklch(0.97 0 0);
+  --color-accent-foreground: oklch(0.205 0 0);
+  --color-destructive: oklch(0.577 0.245 27.325);
+  --color-destructive-foreground: oklch(0.985 0 0);
+  --color-border: oklch(0.922 0 0);
+  --color-input: oklch(0.922 0 0);
+  --color-ring: oklch(0.708 0 0);
+
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+
+  --font-sans:
+    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono:
+    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+}
+
+.dark {
+  --color-background: oklch(0.145 0 0);
+  --color-foreground: oklch(0.985 0 0);
+  --color-card: oklch(0.145 0 0);
+  --color-card-foreground: oklch(0.985 0 0);
+  --color-popover: oklch(0.145 0 0);
+  --color-popover-foreground: oklch(0.985 0 0);
+  --color-primary: oklch(0.985 0 0);
+  --color-primary-foreground: oklch(0.205 0 0);
+  --color-secondary: oklch(0.269 0 0);
+  --color-secondary-foreground: oklch(0.985 0 0);
+  --color-muted: oklch(0.269 0 0);
+  --color-muted-foreground: oklch(0.708 0 0);
+  --color-accent: oklch(0.269 0 0);
+  --color-accent-foreground: oklch(0.985 0 0);
+  --color-destructive: oklch(0.704 0.191 22.216);
+  --color-destructive-foreground: oklch(0.985 0 0);
+  --color-border: oklch(0.269 0 0);
+  --color-input: oklch(0.269 0 0);
+  --color-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+  html {
+    -webkit-text-size-adjust: 100%;
+  }
+  body {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+    font-family: var(--font-sans);
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1;
+    line-height: 1.6;
+  }
+
+  :focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 2px;
+  }
+
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: var(--color-border);
+    border-radius: 6px;
+  }
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-border) transparent;
+  }
+}
+
+@layer components {
+  .prose {
+    max-width: 65ch;
+    color: var(--color-foreground);
+    font-size: 1rem;
+    line-height: 1.75;
+  }
+  .prose :where(h1, h2, h3, h4, h5, h6) {
+    color: var(--color-foreground);
+    font-weight: 700;
+    line-height: 1.25;
+    margin-top: 2em;
+    margin-bottom: 0.75em;
+    scroll-margin-top: 4rem;
+  }
+  .prose h1 {
+    font-size: 2.25rem;
+  }
+  .prose h2 {
+    font-size: 1.75rem;
+  }
+  .prose h3 {
+    font-size: 1.375rem;
+  }
+  .prose p {
+    margin-top: 1em;
+    margin-bottom: 1em;
+  }
+  .prose a {
+    color: var(--color-accent-foreground);
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+    text-decoration-color: var(--color-border);
+    transition: text-decoration-color 0.15s;
+  }
+  .prose a:hover {
+    text-decoration-color: var(--color-accent-foreground);
+  }
+  .prose blockquote {
+    margin: 1.5em 0;
+    padding-left: 1em;
+    border-left: 3px solid var(--color-border);
+    color: var(--color-muted-foreground);
+    font-style: italic;
+  }
+  .prose code {
+    font-family: var(--font-mono);
+    font-size: 0.875em;
+    background-color: var(--color-muted);
+    padding: 0.125em 0.375em;
+    border-radius: var(--radius-sm);
+  }
+  .prose pre {
+    margin: 1.5em 0;
+    padding: 1em 1.25em;
+    background-color: var(--color-muted);
+    border-radius: var(--radius-md);
+    overflow-x: auto;
+    font-size: 0.875rem;
+    line-height: 1.6;
+  }
+  .prose pre code {
+    background: none;
+    padding: 0;
+    font-size: inherit;
+  }
+  .prose ul,
+  .prose ol {
+    margin: 1em 0;
+    padding-left: 1.5em;
+  }
+  .prose li {
+    margin: 0.25em 0;
+  }
+  .prose ul {
+    list-style-type: disc;
+  }
+  .prose ol {
+    list-style-type: decimal;
+  }
+  .prose img {
+    border-radius: var(--radius-md);
+    margin: 1.5em 0;
+  }
+  .prose hr {
+    margin: 2em 0;
+    border: 0;
+    border-top: 1px solid var(--color-border);
+  }
+  .prose table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1.5em 0;
+  }
+  .prose th,
+  .prose td {
+    padding: 0.5em 0.75em;
+    border-bottom: 1px solid var(--color-border);
+    text-align: left;
+  }
+}

package/dist/tailwind-preset.d.ts

@@ -0,0 +1,5 @@
+//#region src/tailwind-preset.d.ts
+declare const awesomenessPreset: import("tailwindcss/plugin").PluginWithConfig;
+//#endregion
+export { awesomenessPreset as default };
+//# sourceMappingURL=tailwind-preset.d.ts.map

package/dist/tailwind-preset.js

@@ -0,0 +1,13 @@
+import plugin from "tailwindcss/plugin";
+//#region src/tailwind-preset.ts
+const awesomenessPreset = plugin(({ addUtilities, addVariant }) => {
+	addVariant("dark", "&:is(.dark *)");
+	addUtilities({
+		".icon-inline-end": { marginInlineStart: "0.375rem" },
+		".icon-inline-start": { marginInlineEnd: "0.375rem" }
+	});
+});
+//#endregion
+export { awesomenessPreset as default };
+
+//# sourceMappingURL=tailwind-preset.js.map

package/dist/tailwind-preset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind-preset.js","names":[],"sources":["../src/tailwind-preset.ts"],"sourcesContent":["import plugin from \"tailwindcss/plugin\";\n\nconst awesomenessPreset = plugin(({ addUtilities, addVariant }) => {\n  addVariant(\"dark\", \"&:is(.dark *)\");\n\n  addUtilities({\n    \".icon-inline-end\": { marginInlineStart: \"0.375rem\" },\n    \".icon-inline-start\": { marginInlineEnd: \"0.375rem\" },\n  });\n});\n\nexport default awesomenessPreset;\n"],"mappings":";;AAEA,MAAM,oBAAoB,QAAQ,EAAE,cAAc,iBAAiB;CACjE,WAAW,QAAQ,eAAe;CAElC,aAAa;EACX,oBAAoB,EAAE,mBAAmB,WAAW;EACpD,sBAAsB,EAAE,iBAAiB,WAAW;CACtD,CAAC;AACH,CAAC"}

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "astro-awesomeness",
+  "version": "0.1.0",
+  "description": "Astro 5 blog theme with shadcn primitives and a Tailwind v4 preset.",
+  "keywords": [
+    "astro",
+    "astro-theme",
+    "blog",
+    "shadcn",
+    "tailwindcss"
+  ],
+  "license": "MIT",
+  "files": [
+    "dist",
+    "src/astro",
+    "src/layouts"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.js"
+    },
+    "./astro/*": "./src/astro/*.astro",
+    "./layouts/*": "./src/layouts/*.astro",
+    "./content": {
+      "types": "./dist/content/index.d.ts",
+      "import": "./dist/content/index.js"
+    },
+    "./lib": {
+      "types": "./dist/lib/index.d.ts",
+      "import": "./dist/lib/index.js"
+    },
+    "./tailwind": {
+      "types": "./dist/tailwind-preset.d.ts",
+      "import": "./dist/tailwind-preset.js"
+    },
+    "./styles.css": "./dist/styles/globals.css"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "lucide-react": "^1.14.0",
+    "radix-ui": "^1.4.3",
+    "tailwind-merge": "^3.6.0",
+    "tw-animate-css": "^1.4.0",
+    "zod": "^3.24.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.3.0",
+    "@types/node": "^24.0.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.0",
+    "@vitest/coverage-v8": "^4.1.5",
+    "happy-dom": "^15.11.0",
+    "tailwindcss": "^4.3.0",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.5",
+    "@repo/typescript-config": "0.0.0"
+  },
+  "peerDependencies": {
+    "astro": "^5.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "scripts": {
+    "dev": "tsdown --watch",
+    "build": "tsdown",
+    "typecheck": "tsc --noEmit",
+    "lint": "oxlint src",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "clean": "rm -rf .turbo dist node_modules"
+  }
+}

package/src/astro/code-block.astro

@@ -0,0 +1,14 @@
+---
+import { Code } from "astro:components";
+
+type Props = {
+  code: string;
+  lang?: string;
+  class?: string;
+};
+
+const { code, lang = "ts", class: className = "" } = Astro.props;
+---
+<div class:list={["bg-muted border-border overflow-hidden rounded-md border", className]}>
+  <Code code={code} lang={lang} theme="github-dark" />
+</div>

package/src/astro/footer.astro

@@ -0,0 +1,15 @@
+---
+type Props = {
+  siteTitle: string;
+  class?: string;
+};
+
+const { siteTitle, class: className = "" } = Astro.props;
+const year = new Date().getFullYear();
+---
+<footer class:list={["border-border text-muted-foreground mt-16 border-t py-6 text-sm", className]}>
+  <div class="mx-auto flex max-w-3xl flex-col items-center justify-between gap-2 px-4 sm:flex-row">
+    <p>© {year} {siteTitle}</p>
+    <slot name="links" />
+  </div>
+</footer>

package/src/astro/formatted-date.astro

@@ -0,0 +1,14 @@
+---
+import { formatDate } from "../lib/format-date";
+
+type Props = {
+  date: Date;
+  locale?: string;
+  class?: string;
+};
+
+const { date, locale = "en-US", class: className = "" } = Astro.props;
+const iso = date.toISOString();
+const formatted = formatDate(date, locale);
+---
+<time datetime={iso} class={className}>{formatted}</time>

package/src/astro/header.astro

@@ -0,0 +1,22 @@
+---
+import { ThemeToggle } from "../components/theme-toggle";
+
+type Props = {
+  siteTitle: string;
+  homeHref?: string;
+  class?: string;
+};
+
+const { siteTitle, homeHref = "/", class: className = "" } = Astro.props;
+---
+<header class:list={["border-border bg-background/80 sticky top-0 z-40 border-b backdrop-blur", className]}>
+  <div class="mx-auto flex max-w-3xl items-center justify-between px-4 py-3">
+    <a href={homeHref} class="text-foreground text-base font-semibold tracking-tight">
+      {siteTitle}
+    </a>
+    <nav class="flex items-center gap-2">
+      <slot name="nav" />
+      <ThemeToggle client:load />
+    </nav>
+  </div>
+</header>

package/src/astro/pagination.astro

@@ -0,0 +1,35 @@
+---
+type Props = {
+  currentPage: number;
+  lastPage: number;
+  urlForPage: (page: number) => string;
+  class?: string;
+};
+
+const { currentPage, lastPage, urlForPage, class: className = "" } = Astro.props;
+const hasPrev = currentPage > 1;
+const hasNext = currentPage < lastPage;
+---
+<nav class:list={["mt-8 flex items-center justify-between", className]} aria-label="Pagination">
+  {hasPrev ? (
+    <a
+      href={urlForPage(currentPage - 1)}
+      class="border-border hover:bg-muted inline-flex items-center rounded-md border px-3 py-1.5 text-sm transition-colors"
+      rel="prev"
+    >
+      ← Previous
+    </a>
+  ) : <span aria-hidden="true" />}
+  <span class="text-muted-foreground text-sm">
+    Page {currentPage} of {lastPage}
+  </span>
+  {hasNext ? (
+    <a
+      href={urlForPage(currentPage + 1)}
+      class="border-border hover:bg-muted inline-flex items-center rounded-md border px-3 py-1.5 text-sm transition-colors"
+      rel="next"
+    >
+      Next →
+    </a>
+  ) : <span aria-hidden="true" />}
+</nav>

package/src/astro/post-card.astro

@@ -0,0 +1,28 @@
+---
+import type { Post } from "../content/index";
+
+import FormattedDate from "./formatted-date.astro";
+import TagList from "./tag-list.astro";
+
+type PostEntry = { id: string; data: Post };
+type Props = {
+  post: PostEntry;
+  locale?: string;
+};
+
+const { post, locale } = Astro.props;
+const { title, description, pubDate, tags } = post.data;
+const href = `/blog/${post.id}`;
+---
+<article class="border-border group border-b py-6 last:border-0">
+  <a href={href} class="block">
+    <h2 class="text-foreground group-hover:text-accent-foreground text-xl font-semibold tracking-tight transition-colors">
+      {title}
+    </h2>
+    <div class="text-muted-foreground mt-1 flex items-center gap-2 text-sm">
+      <FormattedDate date={pubDate} locale={locale} />
+    </div>
+    <p class="text-muted-foreground mt-2 line-clamp-2 text-sm">{description}</p>
+  </a>
+  {tags.length > 0 && <TagList tags={tags} class="mt-3" />}
+</article>

package/src/astro/prose.astro

@@ -0,0 +1,10 @@
+---
+type Props = {
+  class?: string;
+};
+
+const { class: className = "" } = Astro.props;
+---
+<div class:list={["prose", className]}>
+  <slot />
+</div>

package/src/astro/reading-time.astro

@@ -0,0 +1,12 @@
+---
+import { readingTime } from "../lib/reading-time";
+
+type Props = {
+  text: string;
+  class?: string;
+};
+
+const { text, class: className = "" } = Astro.props;
+const { minutes } = readingTime(text);
+---
+<span class={className}>{minutes} min read</span>

package/src/astro/seo.astro

@@ -0,0 +1,26 @@
+---
+type Props = {
+  title: string;
+  description: string;
+  canonical?: string;
+  image?: string;
+  type?: "website" | "article";
+};
+
+const { title, description, canonical, image, type = "website" } = Astro.props;
+const url = canonical ?? new URL(Astro.url.pathname, Astro.site ?? Astro.url.origin).toString();
+---
+<title>{title}</title>
+<meta name="description" content={description} />
+<link rel="canonical" href={url} />
+
+<meta property="og:type" content={type} />
+<meta property="og:title" content={title} />
+<meta property="og:description" content={description} />
+<meta property="og:url" content={url} />
+{image && <meta property="og:image" content={image} />}
+
+<meta name="twitter:card" content={image ? "summary_large_image" : "summary"} />
+<meta name="twitter:title" content={title} />
+<meta name="twitter:description" content={description} />
+{image && <meta name="twitter:image" content={image} />}

package/src/astro/table-of-contents.astro

@@ -0,0 +1,35 @@
+---
+import { slugify } from "../lib/slugify";
+
+type Heading = { depth: number; text: string; slug: string };
+
+type Props = {
+  headings: Array<{ depth: number; text: string; slug?: string }>;
+  minDepth?: number;
+  maxDepth?: number;
+  class?: string;
+};
+
+const { headings, minDepth = 2, maxDepth = 3, class: className = "" } = Astro.props;
+
+const visible: Array<Heading> = headings
+  .filter((h) => h.depth >= minDepth && h.depth <= maxDepth)
+  .map((h) => ({ depth: h.depth, text: h.text, slug: h.slug ?? slugify(h.text) }));
+---
+{visible.length > 0 && (
+  <nav class:list={["text-sm", className]} aria-label="Table of contents">
+    <p class="text-muted-foreground mb-2 font-medium tracking-wide uppercase">On this page</p>
+    <ul class="space-y-1">
+      {visible.map((heading) => (
+        <li class:list={["leading-snug", heading.depth === 3 && "pl-4"]}>
+          <a
+            href={`#${heading.slug}`}
+            class="text-muted-foreground hover:text-foreground block transition-colors"
+          >
+            {heading.text}
+          </a>
+        </li>
+      ))}
+    </ul>
+  </nav>
+)}

package/src/astro/tag-list.astro

@@ -0,0 +1,23 @@
+---
+import { slugify } from "../lib/slugify";
+
+type Props = {
+  tags: Array<string>;
+  base?: string;
+  class?: string;
+};
+
+const { tags, base = "/tags", class: className = "" } = Astro.props;
+---
+<ul class:list={["flex flex-wrap gap-2", className]}>
+  {tags.map((tag) => (
+    <li>
+      <a
+        href={`${base}/${slugify(tag)}`}
+        class="border-border bg-muted text-muted-foreground hover:bg-accent hover:text-accent-foreground inline-flex items-center rounded-md border px-2 py-0.5 text-xs transition-colors"
+      >
+        {tag}
+      </a>
+    </li>
+  ))}
+</ul>

package/src/layouts/base-layout.astro

@@ -0,0 +1,50 @@
+---
+import Footer from "../astro/footer.astro";
+import Header from "../astro/header.astro";
+import Seo from "../astro/seo.astro";
+
+type Props = {
+  title: string;
+  description: string;
+  canonical?: string;
+  image?: string;
+  type?: "website" | "article";
+  lang?: string;
+  siteTitle?: string;
+};
+
+const {
+  title,
+  description,
+  canonical,
+  image,
+  type = "website",
+  lang = "en",
+  siteTitle,
+} = Astro.props;
+---
+<!doctype html>
+<html lang={lang}>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="generator" content={Astro.generator} />
+    <Seo title={title} description={description} canonical={canonical} image={image} type={type} />
+    <script is:inline>
+      (() => {
+        const stored = localStorage.getItem("theme");
+        const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+        const theme = stored === "dark" || stored === "light" ? stored : prefersDark ? "dark" : "light";
+        document.documentElement.classList.toggle("dark", theme === "dark");
+      })();
+    </script>
+    <slot name="head" />
+  </head>
+  <body class="bg-background text-foreground min-h-dvh flex flex-col">
+    {siteTitle && <Header siteTitle={siteTitle} />}
+    <div class="flex-1">
+      <slot />
+    </div>
+    {siteTitle && <Footer siteTitle={siteTitle} />}
+  </body>
+</html>