@axerity/cli 0.1.4 → 0.2.1

package/src/content/demo/theming/colors.md

@@ -1,103 +0,0 @@
----
-title: Colors
-description: Change the accent and surface palette.
-icon: palette
----
-
-<script>
-	import { Callout } from '$lib';
-</script>
-
-# Colors
-
-All colors are defined as [oklch](https://oklch.com) values on `:root` and
-`.dark` in `src/routes/layout.css`. oklch is `lightness chroma hue`, it keeps
-colors perceptually even, which makes building a balanced scale much easier.
-
-## From the config
-
-You do not have to touch CSS to set a brand color. Add a `brand` block to
-`axerity.json` and it overrides the active theme's accent and corner radius in
-both light and dark:
-
-```json title="axerity.json"
-{
-	"brand": {
-		"accent": "#6d5efc",
-		"radius": "0.75rem"
-	}
-}
-```
-
-`accent` takes any CSS color (hex, `rgb()`, `oklch()`). `radius` sets the base
-corner rounding. For anything beyond the accent, edit the tokens below.
-
-## Change the accent
-
-The accent drives links, active sidebar items, focus states, and highlights.
-Set `--accent` (and its hover / contrast pair) in both themes:
-
-```css title="src/routes/layout.css"
-:root {
-	--accent: oklch(0.55 0.22 264); /* blue */
-	--accent-hover: oklch(0.62 0.2 264);
-	--accent-contrast: oklch(0.99 0 0); /* text on a solid accent */
-}
-
-.dark {
-	--accent: oklch(0.7 0.16 264); /* lighter on dark */
-	--accent-hover: oklch(0.76 0.14 264);
-	--accent-contrast: oklch(0.18 0.02 264);
-}
-```
-
-<Callout type="tip">
-
-Use a **lighter, less saturated** accent in dark mode than in light, high
-chroma on a dark background is harsh. Bumping lightness by ~0.15 is a good start.
-
-</Callout>
-
-## Change the surfaces
-
-Surfaces and text are neutral by default (`chroma 0`). To tint the whole UI,
-say, a cool slate, give every neutral token a small chroma at a shared hue:
-
-```css title="src/routes/layout.css"
-.dark {
-	--bg: oklch(0.16 0.015 264);
-	--bg-subtle: oklch(0.2 0.018 264);
-	--surface: oklch(0.21 0.018 264);
-	--surface-raised: oklch(0.24 0.02 264);
-	--fg: oklch(0.96 0.01 264);
-	--fg-muted: oklch(0.72 0.015 264);
-	--border: oklch(0.28 0.015 264);
-}
-```
-
-Keep the **lightness** values close to the defaults, they're tuned for
-contrast. Adjust **chroma** and **hue** to set the mood.
-
-## The brand gradient
-
-The signature gradient (used for accents and marks) is one variable:
-
-```css title="src/routes/layout.css"
-:root {
-	--brand-gradient: linear-gradient(135deg, oklch(0.55 0.22 264), oklch(0.6 0.2 300));
-}
-```
-
-## Semantic colors
-
-Component accent colors (Callout variants, API method badges) are intentionally
-**not** tied to `--accent`, they stay semantic (green = success, red = danger)
-so meaning survives any accent change. Adjust them in their components if needed:
-`src/lib/components/kit/Callout.svelte` and `…/api/Endpoint.svelte`.
-
-<Callout type="warning">
-
-Always check both light **and** dark after a color change, a value that reads
-well on one can fail on the other.
-
-</Callout>

package/src/content/demo/theming/index.md

@@ -1,88 +0,0 @@
----
-title: Theming overview
-description: How Axerity's design-token system works.
-icon: palette
----
-
-<script>
-	import { Callout } from '$lib';
-</script>
-
-# Theming
-
-Axerity is themed entirely through **CSS custom properties** (design tokens). Every
-color, font, radius, and layout rail is a token, components never reference raw
-values, so changing a handful of variables re-themes the whole site, light and
-dark, in one place.
-
-Everything lives in **`src/routes/layout.css`**.
-
-## The two layers
-
-Theming is split into two layers:
-
-1. **Semantic tokens**, `--bg`, `--fg`, `--accent`, `--border`… defined on
-   `:root` (light) and overridden on `.dark` (dark). This is what you edit.
-2. **Tailwind bridge**, an `@theme inline` block maps those tokens onto Tailwind
-   utilities (`bg-bg`, `text-fg`, `border-border`, `rounded-lg`, …) so components
-   can use them as normal classes.
-
-```css title="src/routes/layout.css"
-:root {
-	--bg: oklch(1 0 0);
-	--fg: oklch(0.205 0 0);
-	--accent: oklch(0.205 0 0);
-	/* …all light values… */
-}
-
-.dark {
-	--bg: oklch(0.145 0 0);
-	--fg: oklch(0.985 0 0);
-	--accent: oklch(0.922 0 0);
-	/* …dark overrides… */
-}
-
-@theme inline {
-	--color-bg: var(--bg);
-	--color-fg: var(--fg);
-	--color-accent: var(--accent);
-	/* …exposes bg-bg / text-fg / text-accent / … to Tailwind… */
-}
-```
-
-## The semantic tokens
-
-| Token               | Used for                                 |
-| ------------------- | ---------------------------------------- |
-| `--bg`              | Page background                          |
-| `--bg-subtle`       | Muted background (headers, hover)        |
-| `--surface`         | Card / panel background                  |
-| `--surface-raised`  | Elevated surfaces (code blocks)          |
-| `--fg`              | Primary text                             |
-| `--fg-muted`        | Body / secondary text                    |
-| `--fg-subtle`       | Tertiary text, labels                    |
-| `--border`          | Default borders                          |
-| `--border-strong`   | Emphasized borders                       |
-| `--accent`          | Accent, links, active states, highlights |
-| `--accent-hover`    | Accent hover state                       |
-| `--accent-contrast` | Text on a solid accent background        |
-| `--brand-gradient`  | The signature gradient                   |
-
-<Callout type="tip">
-
-Because components only use these tokens, you almost never edit a component to
-re-theme, you edit the tokens.
-
-</Callout>
-
-## The default theme
-
-Out of the box Axerity ships a **neutral (shadcn-style)** theme: pure grayscale
-surfaces, a monochrome accent, and **dark by default**. The next pages show how
-to make it yours.
-
-- [Colors](/theming/colors), accent and surfaces
-- [Typography](/theming/typography), fonts
-- [Layout](/theming/layout), widths and rails
-- [Code blocks](/theming/code), syntax themes
-- [Advanced](/theming/advanced), radius, custom tokens, full themes

package/src/content/demo/theming/layout.md

@@ -1,71 +0,0 @@
----
-title: Layout
-description: Control widths, rails, and the page shell.
-icon: layout-grid
----
-
-<script>
-	import { Callout } from '$lib';
-</script>
-
-# Layout
-
-## Flat vs boxed
-
-The overall shell has two modes, set in `src/lib/config/site.ts`:
-
-```ts title="src/lib/config/site.ts"
-export const site: SiteConfig = {
-	name: 'Axerity',
-	layout: 'flat' // 'flat' (full-bleed, sidebar at the edge) or 'boxed' (centered)
-};
-```
-
-- **`flat`** _(default)_, the sidebar sits flush at the left edge and the shell
-  spans the viewport.
-- **`boxed`**, the whole shell (navbar + columns) centers in a max-width
-  container on wide screens.
-
-## Layout rails
-
-The widths of the shell's columns are tokens in the `@theme` block. Tune them to
-taste:
-
-```css title="src/routes/layout.css"
-@theme inline {
-	--spacing-sidebar: 17rem; /* left navigation */
-	--spacing-toc: 15rem; /* right table of contents */
-	--spacing-header: 4rem; /* sticky navbar height */
-	--spacing-content: 48rem; /* reading width of doc pages */
-}
-```
-
-`--spacing-content` is the most impactful, it sets the line length of prose.
-17rem ≈ 272px sidebar, 48rem ≈ 768px content.
-
-## The API layout
-
-Pages with `layout: api` in their frontmatter switch to a **wide, TOC-less**
-two-column layout (content on the left, sticky request/response samples on the
-right):
-
-```md title="content/docs/api/get-user.md"
----
-title: Get a user
-layout: api
----
-```
-
-<Callout type="tip">
-
-Set `defaultOpen: true` in a folder's `meta.json` to keep that sidebar group
-expanded by default, handy for an API section.
-
-</Callout>
-
-## The three columns
-
-The shell is sidebar / content / table-of-contents. The TOC auto-hides below the
-`xl` breakpoint and in API mode; the sidebar collapses into a drawer below `lg`.
-The structure lives in `src/lib/components/docs/DocsLayout.svelte` if you need to
-restructure it.

package/src/content/demo/theming/meta.json

@@ -1,5 +0,0 @@
-{
-	"title": "Theming",
-	"icon": "palette",
-	"pages": ["index", "themes", "colors", "typography", "layout", "code", "advanced"]
-}

package/src/content/demo/theming/themes.md

@@ -1,99 +0,0 @@
----
-title: Themes
-description: Eight built-in presets inspired by well-known docs.
-icon: palette
----
-
-# Themes
-
-A theme is a complete palette: backgrounds, text, borders, and an accent, with a
-matching dark mode. Pick one in `axerity.json`:
-
-```json
-{
-	"theme": "stripe"
-}
-```
-
-Leave it out (or use `"neutral"`) for the default grayscale look. The theme is
-applied on the server, so there is no flash on load, and dark mode works with
-every preset.
-
-## Your own brand
-
-Not tied to the presets. Set `brand` to drop in your own accent and corners on
-top of any `theme` (the accent drives links, active items, buttons, and the
-sidebar tint):
-
-```json
-{
-	"theme": "neutral",
-	"brand": {
-		"accent": "#ff5722",
-		"radius": "0.75rem"
-	}
-}
-```
-
-| Field            | Description                                |
-| ---------------- | ------------------------------------------ |
-| `accent`         | Accent color, any CSS color                |
-| `accentDark`     | Accent in dark mode (defaults to `accent`) |
-| `accentContrast` | Text color on the accent (default white)   |
-| `radius`         | Base corner radius, e.g. `0.5rem`          |
-
-Brand values win over the preset, so `neutral` plus your accent gives a clean,
-on-brand site. Pick a colored preset for a fuller reskin.
-
-## Presets
-
-Each preset is tuned after a product's documentation. Set the `theme` value to
-the name on the left.
-
-| Theme       | Accent                                                                                                                                               | Feel                                  |
-| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- |
-| `neutral`   | <span style="display:inline-block;width:14px;height:14px;border-radius:9999px;background:oklch(0.4 0 0);vertical-align:middle"></span> Grayscale     | Quiet monochrome, the default         |
-| `stripe`    | <span style="display:inline-block;width:14px;height:14px;border-radius:9999px;background:oklch(0.55 0.23 274);vertical-align:middle"></span> Indigo  | Airy and light with soft corners      |
-| `vercel`    | <span style="display:inline-block;width:14px;height:14px;border-radius:9999px;background:oklch(0.18 0 0);vertical-align:middle"></span> Black/white  | Maximum contrast, sharp corners       |
-| `linear`    | <span style="display:inline-block;width:14px;height:14px;border-radius:9999px;background:oklch(0.55 0.16 277);vertical-align:middle"></span> Violet  | Cool grays, dense, great in dark      |
-| `supabase`  | <span style="display:inline-block;width:14px;height:14px;border-radius:9999px;background:oklch(0.76 0.16 162);vertical-align:middle"></span> Green   | Dark-first with a bright green accent |
-| `github`    | <span style="display:inline-block;width:14px;height:14px;border-radius:9999px;background:oklch(0.52 0.18 256);vertical-align:middle"></span> Blue    | Primer blue and the system font       |
-| `tailwind`  | <span style="display:inline-block;width:14px;height:14px;border-radius:9999px;background:oklch(0.68 0.15 233);vertical-align:middle"></span> Sky     | Slate grays and rounded corners       |
-| `mintlify`  | <span style="display:inline-block;width:14px;height:14px;border-radius:9999px;background:oklch(0.62 0.16 150);vertical-align:middle"></span> Emerald | Friendly, light, and rounded          |
-| `anthropic` | <span style="display:inline-block;width:14px;height:14px;border-radius:9999px;background:oklch(0.62 0.13 42);vertical-align:middle"></span> Clay     | Warm accent on an ivory page          |
-
-## Layout
-
-The `theme` controls color, type, and corners. The `layout` controls the shape
-of the page and is set separately:
-
-```json
-{
-	"theme": "stripe",
-	"layout": "boxed"
-}
-```
-
-- `flat` puts the sidebar flush against the left edge and fills the screen.
-- `boxed` centers the whole site in a max-width container on wide screens.
-
-Mix and match. Stripe and Tailwind feel at home boxed; Vercel and Linear suit
-the flat, full-width look.
-
-## Sidebar
-
-Choose how the sidebar is presented with `sidebar.variant`:
-
-```json
-{
-	"sidebar": { "variant": "floating" }
-}
-```
-
-- `flush` is the default: a tinted panel against the edge with a divider.
-- `card` insets the sidebar as a bordered, rounded panel.
-- `floating` detaches it into a rounded, shadowed card that floats in the
-  margin.
-
-All three pick up the theme's accent tint, so a floating Supabase sidebar reads
-green while a floating Stripe one reads indigo.

package/src/content/demo/theming/typography.md

@@ -1,83 +0,0 @@
----
-title: Typography
-description: Swap the UI and code fonts.
-icon: type
----
-
-<script>
-	import { Steps, Step } from '$lib';
-</script>
-
-# Typography
-
-Fonts are self-hosted with [Fontsource](https://fontsource.org) and wired through
-two tokens: `--font-sans` (UI and content) and `--font-mono` (code). Axerity ships
-with **Geist** and **Geist Mono**.
-
-## Where fonts live
-
-The font files are imported in `src/routes/+layout.svelte`:
-
-```svelte title="src/routes/+layout.svelte"
-<script lang="ts">
-	import '@fontsource-variable/geist/index.css';
-	import '@fontsource-variable/geist-mono/index.css';
-	import './layout.css';
-</script>
-```
-
-The tokens that point at them live in `src/routes/layout.css`:
-
-```css title="src/routes/layout.css"
-@theme inline {
-	--font-sans: 'Geist Variable', ui-sans-serif, system-ui, sans-serif;
-	--font-mono: 'Geist Mono Variable', ui-monospace, monospace;
-}
-```
-
-## Swap a font
-
-<Steps>
-	<Step title="Install it">
-
-```bash
-pnpm add @fontsource-variable/geist
-```
-
-    </Step>
-    <Step title="Import the CSS">
-
-In `src/routes/+layout.svelte`, add the import (and drop the old one):
-
-```svelte
-<script lang="ts">
-	import '@fontsource-variable/geist/index.css';
-</script>
-```
-
-    </Step>
-    <Step title="Point the token at it">
-
-In `src/routes/layout.css`, update the family name (find the exact name in the
-package's `index.css`):
-
-```css
-@theme inline {
-	--font-sans: 'Geist Variable', ui-sans-serif, system-ui, sans-serif;
-}
-```
-
-    </Step>
-
-</Steps>
-
-## Type declarations
-
-Fontsource CSS imports have no types, so they're declared in `src/app.d.ts`:
-
-```ts title="src/app.d.ts"
-declare module '@fontsource-variable/geist/*';
-declare module '@fontsource-variable/geist-mono/*';
-```
-
-Add a matching line for any new font package.

package/src/content/demo/writing/code-blocks.md

@@ -1,154 +0,0 @@
----
-title: Code Blocks
-description: Fenced code with syntax highlighting, titles, and line highlighting.
-icon: code
----
-
-# Code Blocks
-
-Fenced code blocks are written with triple backticks and a language hint, then
-highlighted with [Shiki](https://shiki.style), light and dark themes follow
-your color scheme automatically.
-
-## Basic
-
-````md
-```ts
-const greeting: string = 'Hello, Axerity';
-console.log(greeting);
-```
-````
-
-Renders as:
-
-```ts
-const greeting: string = 'Hello, Axerity';
-console.log(greeting);
-```
-
-Hover any block to reveal the **copy** button in the corner.
-
-## Titles
-
-Add `title="…"` after the language to render a filename header bar:
-
-````md
-```ts title="hello.ts"
-export function hello(name: string) {
-	return `Hello, ${name}`;
-}
-```
-````
-
-```ts title="hello.ts"
-export function hello(name: string) {
-	return `Hello, ${name}`;
-}
-```
-
-## Line highlighting
-
-Add a `{…}` range to emphasize specific lines, single lines, comma lists, and
-ranges all work:
-
-````md
-```ts title="server.ts" {2,4-6}
-import { createServer } from 'node:http';
-
-const server = createServer((req, res) => {
-	res.writeHead(200);
-	res.end('Hello from Axerity');
-});
-
-server.listen(3000);
-```
-````
-
-```ts title="server.ts" {2,4-6}
-import { createServer } from 'node:http';
-
-const server = createServer((req, res) => {
-	res.writeHead(200);
-	res.end('Hello from Axerity');
-});
-
-server.listen(3000);
-```
-
-## Line numbers
-
-Add `showLineNumbers` to number every line, it combines with titles and
-highlighting:
-
-````md
-```ts showLineNumbers {3}
-function fib(n) {
-	if (n < 2) return n;
-	return fib(n - 1) + fib(n - 2);
-}
-```
-````
-
-```ts showLineNumbers {3}
-function fib(n) {
-	if (n < 2) return n;
-	return fib(n - 1) + fib(n - 2);
-}
-```
-
-## Type hovers with Twoslash
-
-Add `twoslash` to a TypeScript block to run it through the compiler at build
-time. Tokens gain real type information you can hover, and a `^?` comment pops
-the type of whatever sits above the caret:
-
-````md
-```ts twoslash
-const user = {
-	name: 'Ada',
-	id: 1
-};
-
-user.name;
-//   ^?
-```
-````
-
-```ts twoslash
-const user = {
-	name: 'Ada',
-	id: 1
-};
-
-user.name;
-//   ^?
-```
-
-The code has to type check, so a Twoslash block doubles as a test that your
-examples still compile.
-
-## Svelte
-
-Svelte is highlighted too, including the `<script>` block, markup, and bindings:
-
-````md
-```svelte
-<script lang="ts">
-	let count = $state(0);
-</script>
-
-<button onclick={() => count++}>
-	clicked {count} times
-</button>
-```
-````
-
-```svelte
-<script lang="ts">
-	let count = $state(0);
-</script>
-
-<button onclick={() => count++}>
-	clicked {count} times
-</button>
-```

package/src/content/demo/writing/diagrams.md

@@ -1,44 +0,0 @@
----
-title: Diagrams
-description: Draw flowcharts and diagrams with Mermaid.
-icon: workflow
----
-
-# Diagrams
-
-Write a fenced code block with the `mermaid` language and it renders as a
-diagram. Diagrams are drawn in the browser and follow your light or dark theme.
-
-## Flowchart
-
-````md
-```mermaid
-flowchart LR
-	A[Write Markdown] --> B{Has a fence?}
-	B -- mermaid --> C[Render a diagram]
-	B -- code --> D[Highlight with Shiki]
-```
-````
-
-Renders as:
-
-```mermaid
-flowchart LR
-	A[Write Markdown] --> B{Has a fence?}
-	B -- mermaid --> C[Render a diagram]
-	B -- code --> D[Highlight with Shiki]
-```
-
-## Sequence
-
-```mermaid
-sequenceDiagram
-	participant R as Reader
-	participant S as Server
-	R->>S: Request a page
-	S-->>R: Pre-rendered HTML
-	R->>R: Hydrate and draw diagrams
-```
-
-Anything Mermaid supports works, including class diagrams, state diagrams, and
-Gantt charts. See the [Mermaid docs](https://mermaid.js.org) for the full syntax.

package/src/content/demo/writing/frontmatter.md

@@ -1,33 +0,0 @@
----
-title: Frontmatter
-description: Metadata that drives titles, icons, and ordering.
-icon: tag
----
-
-# Frontmatter
-
-Every page starts with a YAML frontmatter block. It supplies the page's
-metadata to the engine.
-
-## Fields
-
-```yaml
----
-title: Frontmatter
-description: Metadata that drives titles, icons, and ordering.
-icon: tag
-badge: New
----
-```
-
-| Field         | Purpose                                   |
-| ------------- | ----------------------------------------- |
-| `title`       | Sidebar label and page `<title>`          |
-| `description` | Meta description, used for SEO            |
-| `icon`        | Lucide icon shown beside the sidebar link |
-| `badge`       | Small pill next to the title (e.g. `New`) |
-
-## How it's used
-
-The content-tree generator reads each page's frontmatter to build the sidebar,
-so changing a `title` here updates the navigation automatically.