blume 0.0.0 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bin/blume.mjs +18 -0
- package/dist/cli/index.js +11989 -0
- package/dist/cli/index.js.map +141 -0
- package/docs/01-quickstart.mdx +99 -0
- package/docs/02-deployment.mdx +129 -0
- package/docs/advanced/api-reference.mdx +114 -0
- package/docs/advanced/blog.mdx +121 -0
- package/docs/advanced/changelog.mdx +113 -0
- package/docs/advanced/custom-pages.mdx +187 -0
- package/docs/advanced/meta.ts +7 -0
- package/docs/changelog/v0-1-0.mdx +12 -0
- package/docs/changelog/v0-2-0.mdx +16 -0
- package/docs/configuration/ai.mdx +228 -0
- package/docs/configuration/analytics.mdx +98 -0
- package/docs/configuration/customization.mdx +91 -0
- package/docs/configuration/export.mdx +70 -0
- package/docs/configuration/index.mdx +271 -0
- package/docs/configuration/meta.ts +15 -0
- package/docs/configuration/search.mdx +172 -0
- package/docs/configuration/seo.mdx +196 -0
- package/docs/configuration/theming.mdx +178 -0
- package/docs/content/components.mdx +565 -0
- package/docs/content/i18n.mdx +205 -0
- package/docs/content/index.mdx +161 -0
- package/docs/content/islands.mdx +94 -0
- package/docs/content/meta.mdx +119 -0
- package/docs/content/meta.ts +15 -0
- package/docs/content/navigation.mdx +168 -0
- package/docs/content/sources.mdx +216 -0
- package/docs/content/syntax.mdx +445 -0
- package/docs/index.mdx +112 -0
- package/docs/reference/cli.mdx +43 -0
- package/docs/reference/frontmatter.mdx +74 -0
- package/docs/reference/meta.ts +7 -0
- package/package.json +140 -6
- package/src/ai/ask.ts +93 -0
- package/src/ai/llms.ts +65 -0
- package/src/ai/markdown.ts +31 -0
- package/src/ai/mcp/data.ts +74 -0
- package/src/ai/mcp/discovery.ts +49 -0
- package/src/ai/mcp/server.ts +225 -0
- package/src/ai/mcp/tools.ts +47 -0
- package/src/assets/icon.png +0 -0
- package/src/astro/generate.ts +878 -0
- package/src/astro/index.ts +4 -0
- package/src/astro/integration.ts +74 -0
- package/src/astro/islands.ts +131 -0
- package/src/astro/markdown-negotiation.ts +68 -0
- package/src/astro/pages.ts +28 -0
- package/src/astro/templates.ts +1199 -0
- package/src/cli/commands/add.ts +81 -0
- package/src/cli/commands/build.ts +103 -0
- package/src/cli/commands/dev.ts +108 -0
- package/src/cli/commands/doctor.ts +74 -0
- package/src/cli/commands/eject.ts +57 -0
- package/src/cli/commands/init.ts +98 -0
- package/src/cli/commands/migrate.ts +39 -0
- package/src/cli/commands/preview.ts +39 -0
- package/src/cli/commands/sync.ts +52 -0
- package/src/cli/commands/validate.ts +60 -0
- package/src/cli/index.ts +35 -0
- package/src/cli/log.ts +37 -0
- package/src/cli/prepare.ts +80 -0
- package/src/components/Icon.astro +99 -0
- package/src/components/content/Accordion.astro +8 -0
- package/src/components/content/AccordionItem.astro +121 -0
- package/src/components/content/AutoTypeTable.astro +51 -0
- package/src/components/content/Badge.astro +124 -0
- package/src/components/content/Callout.astro +73 -0
- package/src/components/content/Card.astro +104 -0
- package/src/components/content/CardGroup.astro +14 -0
- package/src/components/content/CodeGroup.astro +13 -0
- package/src/components/content/Color.astro +15 -0
- package/src/components/content/ColorItem.astro +87 -0
- package/src/components/content/ColorRow.astro +10 -0
- package/src/components/content/Column.astro +6 -0
- package/src/components/content/Columns.astro +9 -0
- package/src/components/content/Expandable.astro +11 -0
- package/src/components/content/FileTree.astro +8 -0
- package/src/components/content/Frame.astro +70 -0
- package/src/components/content/GithubInfo.astro +110 -0
- package/src/components/content/Math.astro +24 -0
- package/src/components/content/Panel.astro +20 -0
- package/src/components/content/Prompt.astro +129 -0
- package/src/components/content/Step.astro +34 -0
- package/src/components/content/Steps.astro +20 -0
- package/src/components/content/Tab.astro +40 -0
- package/src/components/content/Tabs.astro +273 -0
- package/src/components/content/Tile.astro +42 -0
- package/src/components/content/Tooltip.astro +68 -0
- package/src/components/content/Tree.astro +300 -0
- package/src/components/content/TreeFile.astro +15 -0
- package/src/components/content/TreeFolder.astro +62 -0
- package/src/components/content/TypeTable.astro +106 -0
- package/src/components/content/Update.astro +66 -0
- package/src/components/content/Visibility.astro +12 -0
- package/src/components/content/Warning.astro +9 -0
- package/src/components/content/auto-type-table.ts +141 -0
- package/src/components/content/github-info.ts +79 -0
- package/src/components/content/mermaid-element.ts +68 -0
- package/src/components/github-mark.ts +9 -0
- package/src/components/index.ts +14 -0
- package/src/components/islands/AskAI.astro +12 -0
- package/src/components/islands/ask-ai.tsx +156 -0
- package/src/components/layout/Analytics.astro +63 -0
- package/src/components/layout/Banner.astro +50 -0
- package/src/components/layout/Breadcrumbs.astro +31 -0
- package/src/components/layout/Favicon.astro +15 -0
- package/src/components/layout/Fonts.astro +14 -0
- package/src/components/layout/Header.astro +188 -0
- package/src/components/layout/LanguageSwitcher.astro +56 -0
- package/src/components/layout/NavTree.astro +462 -0
- package/src/components/layout/PageActions.astro +438 -0
- package/src/components/layout/PageFeedback.astro +58 -0
- package/src/components/layout/Pagination.astro +56 -0
- package/src/components/layout/ReferenceLayout.astro +102 -0
- package/src/components/layout/RootLayout.astro +533 -0
- package/src/components/layout/Search.astro +608 -0
- package/src/components/layout/TableOfContents.astro +68 -0
- package/src/components/layout/analytics-client.ts +38 -0
- package/src/components/layout/nav-utils.ts +87 -0
- package/src/components/layout/overrides.ts +32 -0
- package/src/components/layout/search/algolia.ts +43 -0
- package/src/components/layout/search/endpoint.ts +22 -0
- package/src/components/layout/search/flexsearch.ts +52 -0
- package/src/components/layout/search/orama-cloud.ts +41 -0
- package/src/components/layout/search/orama.ts +26 -0
- package/src/components/layout/search/pagefind.ts +43 -0
- package/src/components/layout/search/types.ts +163 -0
- package/src/components/layout/search/typesense.ts +60 -0
- package/src/components/layout/toc-element.ts +108 -0
- package/src/core/bridge.ts +92 -0
- package/src/core/config.ts +112 -0
- package/src/core/content.ts +50 -0
- package/src/core/define-components.ts +34 -0
- package/src/core/define-meta.ts +20 -0
- package/src/core/deployment-env.ts +73 -0
- package/src/core/diagnostics.ts +104 -0
- package/src/core/graph.ts +128 -0
- package/src/core/i18n-ui.ts +171 -0
- package/src/core/i18n.ts +169 -0
- package/src/core/last-modified.ts +88 -0
- package/src/core/links.ts +336 -0
- package/src/core/load-module.ts +15 -0
- package/src/core/manifest.ts +126 -0
- package/src/core/meta.ts +97 -0
- package/src/core/navigation.ts +392 -0
- package/src/core/package-root.ts +37 -0
- package/src/core/project-graph.ts +153 -0
- package/src/core/project.ts +56 -0
- package/src/core/schema.ts +1057 -0
- package/src/core/server-features.ts +23 -0
- package/src/core/sources/assets.ts +77 -0
- package/src/core/sources/cache.ts +122 -0
- package/src/core/sources/filesystem.ts +99 -0
- package/src/core/sources/mdx-remote.ts +216 -0
- package/src/core/sources/mintlify.ts +161 -0
- package/src/core/sources/normalize.ts +227 -0
- package/src/core/sources/notion.ts +440 -0
- package/src/core/sources/portable-text.ts +143 -0
- package/src/core/sources/read.ts +36 -0
- package/src/core/sources/resolve.ts +158 -0
- package/src/core/sources/sanity.ts +218 -0
- package/src/core/sources/types.ts +105 -0
- package/src/core/types.ts +261 -0
- package/src/core/ui-packs/ar.ts +47 -0
- package/src/core/ui-packs/bg.ts +47 -0
- package/src/core/ui-packs/bn.ts +47 -0
- package/src/core/ui-packs/ca.ts +47 -0
- package/src/core/ui-packs/cs.ts +47 -0
- package/src/core/ui-packs/da.ts +47 -0
- package/src/core/ui-packs/de.ts +47 -0
- package/src/core/ui-packs/el.ts +47 -0
- package/src/core/ui-packs/es.ts +47 -0
- package/src/core/ui-packs/fa.ts +47 -0
- package/src/core/ui-packs/fi.ts +47 -0
- package/src/core/ui-packs/fr.ts +47 -0
- package/src/core/ui-packs/he.ts +47 -0
- package/src/core/ui-packs/hi.ts +47 -0
- package/src/core/ui-packs/hr.ts +47 -0
- package/src/core/ui-packs/hu.ts +47 -0
- package/src/core/ui-packs/id.ts +47 -0
- package/src/core/ui-packs/index.ts +87 -0
- package/src/core/ui-packs/it.ts +47 -0
- package/src/core/ui-packs/ja.ts +47 -0
- package/src/core/ui-packs/ko.ts +47 -0
- package/src/core/ui-packs/nl.ts +47 -0
- package/src/core/ui-packs/no.ts +47 -0
- package/src/core/ui-packs/pl.ts +47 -0
- package/src/core/ui-packs/pt-br.ts +47 -0
- package/src/core/ui-packs/pt.ts +47 -0
- package/src/core/ui-packs/ro.ts +47 -0
- package/src/core/ui-packs/ru.ts +47 -0
- package/src/core/ui-packs/sk.ts +47 -0
- package/src/core/ui-packs/sr.ts +47 -0
- package/src/core/ui-packs/sv.ts +47 -0
- package/src/core/ui-packs/th.ts +47 -0
- package/src/core/ui-packs/tr.ts +47 -0
- package/src/core/ui-packs/uk.ts +47 -0
- package/src/core/ui-packs/vi.ts +47 -0
- package/src/core/ui-packs/zh-tw.ts +47 -0
- package/src/core/ui-packs/zh.ts +47 -0
- package/src/core/version.ts +23 -0
- package/src/deploy/robots.ts +20 -0
- package/src/deploy/rss.ts +128 -0
- package/src/deploy/sitemap.ts +28 -0
- package/src/index.ts +27 -0
- package/src/markdown/code-title.ts +71 -0
- package/src/markdown/directives.ts +83 -0
- package/src/markdown/heading-anchors.ts +137 -0
- package/src/markdown/index.ts +159 -0
- package/src/markdown/inline-code.ts +108 -0
- package/src/markdown/language-icon.ts +172 -0
- package/src/markdown/math.ts +32 -0
- package/src/markdown/mdast.ts +48 -0
- package/src/markdown/mermaid.ts +37 -0
- package/src/markdown/package-commands.ts +159 -0
- package/src/markdown/package-install.ts +40 -0
- package/src/migrate/fumadocs/config.ts +106 -0
- package/src/migrate/fumadocs/content.ts +365 -0
- package/src/migrate/fumadocs/frontmatter.ts +18 -0
- package/src/migrate/fumadocs/index.ts +252 -0
- package/src/migrate/fumadocs/meta.ts +114 -0
- package/src/migrate/migrate.ts +53 -0
- package/src/migrate/mintlify/config.ts +1040 -0
- package/src/migrate/mintlify/content.ts +98 -0
- package/src/migrate/mintlify/frontmatter.ts +126 -0
- package/src/migrate/mintlify/i18n.ts +51 -0
- package/src/migrate/mintlify/icons.ts +128 -0
- package/src/migrate/mintlify/index.ts +266 -0
- package/src/migrate/mintlify/snippets.ts +305 -0
- package/src/migrate/mintlify/transform.ts +81 -0
- package/src/migrate/nextra/content.ts +46 -0
- package/src/migrate/nextra/frontmatter.ts +40 -0
- package/src/migrate/nextra/index.ts +374 -0
- package/src/migrate/nextra/meta.ts +266 -0
- package/src/migrate/shared.ts +623 -0
- package/src/migrate/starlight/config.ts +459 -0
- package/src/migrate/starlight/content.ts +78 -0
- package/src/migrate/starlight/frontmatter.ts +111 -0
- package/src/migrate/starlight/i18n.ts +54 -0
- package/src/migrate/starlight/index.ts +131 -0
- package/src/og/card.ts +92 -0
- package/src/og/index.ts +2 -0
- package/src/openapi/scalar.ts +246 -0
- package/src/registry/eject.ts +263 -0
- package/src/registry/registry.ts +100 -0
- package/src/registry/rewrite-imports.ts +39 -0
- package/src/runtime/index.ts +14 -0
- package/src/search/build.ts +23 -0
- package/src/search/documents.ts +165 -0
- package/src/search/orama-index.ts +66 -0
- package/src/search/providers.ts +91 -0
- package/src/search/sync/algolia.ts +30 -0
- package/src/search/sync/index.ts +50 -0
- package/src/search/sync/orama-cloud.ts +40 -0
- package/src/search/sync/typesense.ts +65 -0
- package/src/seo/jsonld.ts +113 -0
- package/src/theme/entry.ts +608 -0
- package/src/theme/fonts.ts +198 -0
- package/src/theme/icons.ts +184 -0
- package/src/theme/palette.ts +143 -0
- package/src/theme/twoslash.ts +81 -0
|
@@ -0,0 +1,196 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: SEO
|
|
3
|
+
description: Metadata, Open Graph images, RSS feeds, and JSON-LD — Blume's discoverability layer, grouped under one seo config.
|
|
4
|
+
sidebar:
|
|
5
|
+
label: SEO
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
Blume handles the discoverability layer for you: page metadata, social share
|
|
9
|
+
images, feeds, and structured data. The three configurable features live under
|
|
10
|
+
the `seo` key in `blume.config.ts`; metadata is driven by your content.
|
|
11
|
+
|
|
12
|
+
```ts blume.config.ts lineNumbers
|
|
13
|
+
seo: {
|
|
14
|
+
og: { enabled: true },
|
|
15
|
+
rss: { enabled: true, types: ["blog", "changelog"] },
|
|
16
|
+
sitemap: true,
|
|
17
|
+
robots: true,
|
|
18
|
+
structuredData: true,
|
|
19
|
+
}
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
Most of this is sharper with an absolute site URL — set
|
|
23
|
+
[`deployment.site`](/docs/deployment) so feeds, OG images, canonicals, the sitemap,
|
|
24
|
+
and JSON-LD can emit full URLs.
|
|
25
|
+
|
|
26
|
+
## Metadata
|
|
27
|
+
|
|
28
|
+
Every page renders the standard `<head>` tags from your config and frontmatter:
|
|
29
|
+
|
|
30
|
+
- `<title>` — the page title plus your site `title`.
|
|
31
|
+
- `<meta name="description">` and `og:description` — the page `description`,
|
|
32
|
+
falling back to the site `description`.
|
|
33
|
+
- `og:title` — the page title.
|
|
34
|
+
- `<link rel="canonical">` — the page's absolute URL (when `deployment.site` is
|
|
35
|
+
set).
|
|
36
|
+
|
|
37
|
+
Override any of these per page with `seo` frontmatter:
|
|
38
|
+
|
|
39
|
+
```yaml lineNumbers
|
|
40
|
+
---
|
|
41
|
+
title: Pricing
|
|
42
|
+
description: Plans and pricing for every team size.
|
|
43
|
+
seo:
|
|
44
|
+
title: Pricing — Acme
|
|
45
|
+
canonical: https://acme.com/pricing
|
|
46
|
+
noindex: false
|
|
47
|
+
---
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
<TypeTable
|
|
51
|
+
type={{
|
|
52
|
+
"seo.title": {
|
|
53
|
+
type: "string",
|
|
54
|
+
description: "Override the <title> and og:title for this page.",
|
|
55
|
+
},
|
|
56
|
+
"seo.description": {
|
|
57
|
+
type: "string",
|
|
58
|
+
description: "Override the meta + og:description.",
|
|
59
|
+
},
|
|
60
|
+
"seo.image": {
|
|
61
|
+
type: "string",
|
|
62
|
+
description: "Custom social image (see Open Graph).",
|
|
63
|
+
},
|
|
64
|
+
"seo.canonical": {
|
|
65
|
+
type: "string",
|
|
66
|
+
description: "Override the canonical URL.",
|
|
67
|
+
},
|
|
68
|
+
"seo.noindex": {
|
|
69
|
+
type: "boolean",
|
|
70
|
+
description: "Emit robots noindex and skip structured data.",
|
|
71
|
+
},
|
|
72
|
+
}}
|
|
73
|
+
/>
|
|
74
|
+
|
|
75
|
+
## Open Graph images
|
|
76
|
+
|
|
77
|
+
Blume can render a 1200×630 social card for every page at build time — no
|
|
78
|
+
headless browser, thanks to [Takumi](https://takumi.kane.tw), so builds stay
|
|
79
|
+
fast. On by default once [`deployment.site`](/docs/deployment) is set or
|
|
80
|
+
auto-detected (the `og:image` URL has to be absolute to be useful to crawlers),
|
|
81
|
+
and off otherwise. Set `enabled` to override that either way:
|
|
82
|
+
|
|
83
|
+
```ts blume.config.ts lineNumbers
|
|
84
|
+
seo: {
|
|
85
|
+
og: { enabled: true }, // or false to opt out even with a site set
|
|
86
|
+
}
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
Each card is derived from your content and theme — the **page title** as the
|
|
90
|
+
headline, your **site title** as the eyebrow, and your theme **accent** for the
|
|
91
|
+
mark. Images are served at `/og/<slug>.png`, mirroring each route, and are
|
|
92
|
+
prerendered as static files even in server mode:
|
|
93
|
+
|
|
94
|
+
| Page route | Image URL |
|
|
95
|
+
| ------------------- | -------------------------- |
|
|
96
|
+
| `/` | `/og/index.png` |
|
|
97
|
+
| `/quickstart` | `/og/quickstart.png` |
|
|
98
|
+
| `/configuration/ai` | `/og/configuration/ai.png` |
|
|
99
|
+
|
|
100
|
+
Override the generated card for any page with `seo.image` — a file in `public/`
|
|
101
|
+
or an external URL. It takes precedence over the generated card and works even
|
|
102
|
+
when `og` is off, so you can mix custom images with generated ones:
|
|
103
|
+
|
|
104
|
+
```yaml lineNumbers
|
|
105
|
+
---
|
|
106
|
+
title: Pricing
|
|
107
|
+
seo:
|
|
108
|
+
image: /og/pricing-custom.png
|
|
109
|
+
---
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
:::note
|
|
113
|
+
OG rendering uses hex internally, so an `oklch` custom accent falls back to the
|
|
114
|
+
default. Use a named accent (`blue`, `teal`, …) or a hex value for custom cards.
|
|
115
|
+
:::
|
|
116
|
+
|
|
117
|
+
## RSS feeds
|
|
118
|
+
|
|
119
|
+
Blume builds an RSS feed for each content type in `rss.types` — `blog` and
|
|
120
|
+
`changelog` by default — that has pages, served at `/<type>/rss.xml`. See
|
|
121
|
+
[Feeds](/docs/content#feeds) for authoring blog and changelog entries with dates.
|
|
122
|
+
|
|
123
|
+
```ts blume.config.ts lineNumbers
|
|
124
|
+
seo: {
|
|
125
|
+
rss: {
|
|
126
|
+
enabled: true,
|
|
127
|
+
types: ["blog", "changelog"],
|
|
128
|
+
limit: 50,
|
|
129
|
+
},
|
|
130
|
+
}
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
| Option | Default | Description |
|
|
134
|
+
| --------- | ----------------------- | ------------------------------------- |
|
|
135
|
+
| `enabled` | `true` | Generate feeds. |
|
|
136
|
+
| `types` | `["blog", "changelog"]` | Content types that each get a feed. |
|
|
137
|
+
| `limit` | `50` | Maximum items per feed, newest first. |
|
|
138
|
+
|
|
139
|
+
Blume injects `<link rel="alternate">` tags so browsers and feed readers discover
|
|
140
|
+
the feeds automatically.
|
|
141
|
+
|
|
142
|
+
## Structured data
|
|
143
|
+
|
|
144
|
+
Blume emits [schema.org](https://schema.org) JSON-LD in every page's `<head>` so
|
|
145
|
+
search engines understand your content. On by default:
|
|
146
|
+
|
|
147
|
+
```ts blume.config.ts lineNumbers
|
|
148
|
+
seo: {
|
|
149
|
+
structuredData: true,
|
|
150
|
+
}
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
Each page includes:
|
|
154
|
+
|
|
155
|
+
- a **WebSite** node for site identity,
|
|
156
|
+
- the page as an **article** — `BlogPosting` for blog posts, `TechArticle` for
|
|
157
|
+
changelog and docs — with its description and publish date,
|
|
158
|
+
- a **BreadcrumbList** built from the navigation trail.
|
|
159
|
+
|
|
160
|
+
URLs are absolute when `deployment.site` is set. Pages marked `seo.noindex` are
|
|
161
|
+
skipped.
|
|
162
|
+
|
|
163
|
+
## Sitemap
|
|
164
|
+
|
|
165
|
+
Blume writes a `sitemap.xml` of every indexable page at build time. It needs an
|
|
166
|
+
absolute [`deployment.site`](/docs/deployment) and lists every page except drafts,
|
|
167
|
+
hidden, and `noindex` pages. On by default:
|
|
168
|
+
|
|
169
|
+
```ts blume.config.ts lineNumbers
|
|
170
|
+
seo: {
|
|
171
|
+
sitemap: true,
|
|
172
|
+
}
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
Ship your own `public/sitemap.xml` to take over — Blume never overwrites a file
|
|
176
|
+
you place in `public/`.
|
|
177
|
+
|
|
178
|
+
## Robots
|
|
179
|
+
|
|
180
|
+
Blume writes a `robots.txt` that allows all crawlers and adds a `Sitemap:` line
|
|
181
|
+
pointing to the sitemap when one is available. On by default:
|
|
182
|
+
|
|
183
|
+
```ts blume.config.ts lineNumbers
|
|
184
|
+
seo: {
|
|
185
|
+
robots: true,
|
|
186
|
+
}
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
```txt robots.txt
|
|
190
|
+
User-agent: *
|
|
191
|
+
Allow: /
|
|
192
|
+
|
|
193
|
+
Sitemap: https://docs.example.com/sitemap.xml
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
Ship your own `public/robots.txt` to take over.
|
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Theming
|
|
3
|
+
description: Tune the look with config tokens, override any CSS variable in theme.css, or use Tailwind utilities.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
Blume's theme is token-driven and works in light and dark mode out of the box.
|
|
7
|
+
Reach for as little or as much as you need: a few config tokens for the common
|
|
8
|
+
cases, a `theme.css` to override any design token, or Tailwind utilities for
|
|
9
|
+
custom components.
|
|
10
|
+
|
|
11
|
+
## Config tokens
|
|
12
|
+
|
|
13
|
+
The everyday knobs live under `theme` in your config:
|
|
14
|
+
|
|
15
|
+
```ts blume.config.ts lineNumbers
|
|
16
|
+
theme: {
|
|
17
|
+
accent: "teal", // a named preset or any CSS color
|
|
18
|
+
radius: "md", // none | sm | md | lg
|
|
19
|
+
mode: "system", // system | light | dark
|
|
20
|
+
fonts: { // self-hosted Google Fonts
|
|
21
|
+
display: "inter-tight",
|
|
22
|
+
body: "inter",
|
|
23
|
+
mono: "ibm-plex-mono",
|
|
24
|
+
},
|
|
25
|
+
}
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### Accent
|
|
29
|
+
|
|
30
|
+
The accent color tints interactive and highlighted elements — step markers,
|
|
31
|
+
active tabs, badges, card hovers, and more. Use a named preset or any CSS color:
|
|
32
|
+
|
|
33
|
+
```ts blume.config.ts lineNumbers
|
|
34
|
+
theme: {
|
|
35
|
+
accent: "#ff0066", // hex, oklch(), rgb()… anything CSS understands
|
|
36
|
+
}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
Named presets: `blue` (default), `green`, `orange`, `pink`, `purple`, `red`, and
|
|
40
|
+
`teal`.
|
|
41
|
+
|
|
42
|
+
### Radius
|
|
43
|
+
|
|
44
|
+
`radius` sets the corner rounding shared by cards, code blocks, callouts, and
|
|
45
|
+
inputs — `none`, `sm`, `md` (default), or `lg`.
|
|
46
|
+
|
|
47
|
+
### Color mode
|
|
48
|
+
|
|
49
|
+
`mode` sets the initial color scheme:
|
|
50
|
+
|
|
51
|
+
- **`system`** (default) — follow the reader's OS preference
|
|
52
|
+
- **`light`** / **`dark`** — default to one scheme
|
|
53
|
+
|
|
54
|
+
A toggle in the header always lets readers switch, and their choice is remembered
|
|
55
|
+
across visits. Dark mode is applied with a `data-theme="dark"` attribute on the
|
|
56
|
+
`<html>` element.
|
|
57
|
+
|
|
58
|
+
### Fonts
|
|
59
|
+
|
|
60
|
+
`fonts` sets the typefaces for three roles:
|
|
61
|
+
|
|
62
|
+
- **`display`** — headings (`h1`–`h6`)
|
|
63
|
+
- **`body`** — body text, UI, and prose
|
|
64
|
+
- **`mono`** — code blocks and inline code
|
|
65
|
+
|
|
66
|
+
Each defaults to a curated Google Font, so Blume looks intentional out of the box:
|
|
67
|
+
|
|
68
|
+
```ts blume.config.ts lineNumbers
|
|
69
|
+
theme: {
|
|
70
|
+
fonts: {
|
|
71
|
+
display: "inter-tight", // default
|
|
72
|
+
body: "inter", // default
|
|
73
|
+
mono: "ibm-plex-mono", // default
|
|
74
|
+
},
|
|
75
|
+
}
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
Set only the roles you want to change — the rest keep their defaults:
|
|
79
|
+
|
|
80
|
+
```ts blume.config.ts lineNumbers
|
|
81
|
+
theme: {
|
|
82
|
+
fonts: { display: "geist" }, // body + mono stay Inter / IBM Plex Mono
|
|
83
|
+
}
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
Fonts are **self-hosted**: Blume downloads them at build time and serves them from
|
|
87
|
+
your own site, so there's no runtime request to Google and no layout shift (Astro
|
|
88
|
+
generates fallback-metric faces automatically).
|
|
89
|
+
|
|
90
|
+
Each value is a Google Fonts slug from the curated set below:
|
|
91
|
+
|
|
92
|
+
| Category | Slugs |
|
|
93
|
+
| -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
94
|
+
| Sans | `dm-sans` `figtree` `geist` `ibm-plex-sans` `inter` `inter-tight` `manrope` `open-sans` `plus-jakarta-sans` `roboto` `source-sans-3` `space-grotesk` `work-sans` |
|
|
95
|
+
| Serif | `ibm-plex-serif` `lora` `merriweather` `playfair-display` `source-serif-4` |
|
|
96
|
+
| Mono | `fira-code` `geist-mono` `ibm-plex-mono` `jetbrains-mono` `roboto-mono` `source-code-pro` `space-mono` |
|
|
97
|
+
|
|
98
|
+
Need a font that isn't listed, or want to drop back to the system stack? Override
|
|
99
|
+
the `--blume-font-*` tokens directly in [`theme.css`](#theme-css).
|
|
100
|
+
|
|
101
|
+
## theme.css
|
|
102
|
+
|
|
103
|
+
Drop a `theme.css` in your project root to override any design token. It's the
|
|
104
|
+
last layer in the cascade, so it wins over the defaults and config tokens:
|
|
105
|
+
|
|
106
|
+
```css theme.css lineNumbers
|
|
107
|
+
:root {
|
|
108
|
+
--blume-accent: oklch(0.68 0.14 180);
|
|
109
|
+
--blume-radius: 0.5rem;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
:root[data-theme="dark"] {
|
|
113
|
+
--blume-background: oklch(0.16 0 0);
|
|
114
|
+
}
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
Set a token under `:root` for light mode and under `:root[data-theme="dark"]` for
|
|
118
|
+
dark mode.
|
|
119
|
+
|
|
120
|
+
### Design tokens
|
|
121
|
+
|
|
122
|
+
| Token | Controls |
|
|
123
|
+
| --------------------------- | ----------------------------------------- |
|
|
124
|
+
| `--blume-background` | Page background |
|
|
125
|
+
| `--blume-foreground` | Body text |
|
|
126
|
+
| `--blume-muted` | Subtle surfaces — callouts, table headers |
|
|
127
|
+
| `--blume-muted-foreground` | Secondary text |
|
|
128
|
+
| `--blume-border` | Borders and dividers |
|
|
129
|
+
| `--blume-accent` | Accent color |
|
|
130
|
+
| `--blume-accent-foreground` | Text and icons on an accent background |
|
|
131
|
+
| `--blume-code-background` | Code block surface |
|
|
132
|
+
| `--blume-radius` | Corner radius |
|
|
133
|
+
| `--blume-font-display` | Heading font |
|
|
134
|
+
| `--blume-font-body` | Body / UI font |
|
|
135
|
+
| `--blume-font-mono` | Code font |
|
|
136
|
+
|
|
137
|
+
Set a `--blume-font-*` token to any font stack to use a font outside the curated
|
|
138
|
+
list, or to fall back to the system stack:
|
|
139
|
+
|
|
140
|
+
```css theme.css lineNumbers
|
|
141
|
+
:root {
|
|
142
|
+
--blume-font-body: ui-sans-serif, system-ui, sans-serif;
|
|
143
|
+
}
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
## Tailwind utilities
|
|
147
|
+
|
|
148
|
+
Blume's theme is built with Tailwind v4 internally, and your project's `.astro`,
|
|
149
|
+
`.tsx`, and `.jsx` files are scanned too — so you can style custom components and
|
|
150
|
+
pages with utility classes, no Tailwind setup required. Every token is exposed as
|
|
151
|
+
a utility, so your components track the theme automatically:
|
|
152
|
+
|
|
153
|
+
| Token | Utilities |
|
|
154
|
+
| --------------------------- | -------------------------- |
|
|
155
|
+
| `--blume-background` | `bg-background` |
|
|
156
|
+
| `--blume-foreground` | `text-foreground` |
|
|
157
|
+
| `--blume-muted` | `bg-muted` |
|
|
158
|
+
| `--blume-muted-foreground` | `text-muted-foreground` |
|
|
159
|
+
| `--blume-border` | `border-border` |
|
|
160
|
+
| `--blume-accent` | `bg-accent`, `text-accent` |
|
|
161
|
+
| `--blume-accent-foreground` | `text-accent-foreground` |
|
|
162
|
+
| `--blume-radius` | `rounded-blume` |
|
|
163
|
+
| `--blume-font-display` | `font-display` |
|
|
164
|
+
| `--blume-font-body` | `font-sans` |
|
|
165
|
+
| `--blume-font-mono` | `font-mono` |
|
|
166
|
+
|
|
167
|
+
## Cascade order
|
|
168
|
+
|
|
169
|
+
Styles resolve in three layers, each overriding the last:
|
|
170
|
+
|
|
171
|
+
<Steps>
|
|
172
|
+
<Step title="Base">Blume's reset, default tokens, and component styles.</Step>
|
|
173
|
+
<Step title="Config tokens">
|
|
174
|
+
`--blume-accent`, `--blume-radius`, and the `--blume-font-*` tokens from
|
|
175
|
+
`theme`.
|
|
176
|
+
</Step>
|
|
177
|
+
<Step title="theme.css">Your token overrides — the final word.</Step>
|
|
178
|
+
</Steps>
|