|
1 | 1 | --- |
2 | | -title: Themes Overview |
3 | | -description: Understand how EmDash themes work and how they bootstrap new sites. |
| 2 | +title: Themes |
| 3 | +description: Install or create an EmDash theme as an Astro template with a seed file. |
4 | 4 | --- |
5 | 5 |
|
6 | | -import { Aside, Card, CardGrid } from "@astrojs/starlight/components"; |
| 6 | +import { Aside } from "@astrojs/starlight/components"; |
7 | 7 |
|
8 | | -An EmDash theme is a complete Astro site -- pages, layouts, components, styles -- distributed via `create-astro`. It also includes a **seed file** that bootstraps the database with collections, fields, menus, redirects, and sample content on first run. |
| 8 | +An EmDash theme is a complete Astro project distributed as a `create-astro` template. It contains the public routes and components, EmDash runtime configuration, and an optional seed file for the site's initial content model. |
9 | 9 |
|
10 | | -## What a Theme Provides |
| 10 | +There is no runtime theme package or template hierarchy. After scaffolding, the theme files belong to the site and can be edited directly. |
11 | 11 |
|
12 | | -A theme is a working Astro project with: |
| 12 | +## Theme contents |
13 | 13 |
|
14 | | -- **Pages** — Astro routes for rendering content (homepage, blog posts, archives, etc.) |
15 | | -- **Layouts** — Shared HTML structure |
16 | | -- **Components** — Reusable UI elements (navigation, cards, footers) |
17 | | -- **Styles** — CSS or Tailwind configuration |
18 | | -- **A seed file** — JSON that tells the CMS what content types and fields to create |
| 14 | +Current EmDash templates use these paths: |
19 | 15 |
|
20 | | -<Aside> |
21 | | - A theme declares exactly which collections and fields it needs via the seed file. Most themes |
22 | | - build on the standard **posts** and **pages** collections, adding fields and taxonomies as needed |
23 | | - rather than inventing entirely new content types. |
24 | | -</Aside> |
25 | | - |
26 | | -## Theme Structure |
27 | | - |
28 | | -A theme has the following layout: |
29 | | - |
30 | | -``` |
31 | | -my-theme/ |
32 | | -├── package.json # Theme metadata + EmDash config |
33 | | -├── astro.config.mjs # Astro integration setup |
34 | | -├── src/ |
35 | | -│ ├── live.config.ts # Live Collections configuration |
36 | | -│ ├── pages/ # Astro routes |
37 | | -│ ├── layouts/ # Layout components |
38 | | -│ └── components/ # UI components |
39 | | -└── .emdash/ |
40 | | - ├── seed.json # Schema + sample content |
41 | | - └── uploads/ # Optional local media files |
| 16 | +```text title="Template structure" |
| 17 | +astro.config.mjs |
| 18 | +package.json |
| 19 | +seed/ |
| 20 | +└── seed.json |
| 21 | +src/ |
| 22 | +├── components/ |
| 23 | +├── layouts/ |
| 24 | +├── live.config.ts |
| 25 | +├── pages/ |
| 26 | +└── styles/ |
42 | 27 | ``` |
43 | 28 |
|
44 | | -## How Themes Bootstrap Sites |
45 | | - |
46 | | -Creating a site from a theme follows these steps: |
| 29 | +- `astro.config.mjs` configures server output, the deployment adapter, EmDash, the database, and storage. |
| 30 | +- `src/live.config.ts` registers the `_emdash` live collection. |
| 31 | +- `src/pages/` defines public routes. |
| 32 | +- `seed/seed.json` can declare initial collections, fields, settings, taxonomies, bylines, menus, redirects, widget areas, sections, and sample content. |
| 33 | +- `package.json#emdash.seed` points to the seed file. |
47 | 34 |
|
48 | | -1. `create-astro` scaffolds the project from the template |
49 | | -2. Run `npm install` and `npm run dev` |
50 | | -3. On first admin visit, the **Setup Wizard** runs automatically |
51 | | -4. The wizard applies the seed file, creating collections, menus, redirects, and content |
52 | | -5. The site is ready to use |
| 35 | +The blank template deliberately has no user seed and falls back to EmDash's built-in default seed. The other current templates point to `seed/seed.json`. |
53 | 36 |
|
54 | | -<CardGrid> |
55 | | - <Card title="For Users" icon="laptop"> |
56 | | - Pick a theme, run the wizard, start editing. No database knowledge required. |
57 | | - </Card> |
58 | | - <Card title="For Developers" icon="seti:config"> |
59 | | - Themes are standard Astro projects. Customize freely after scaffolding. |
60 | | - </Card> |
61 | | -</CardGrid> |
| 37 | +## Install a template |
62 | 38 |
|
63 | | -## Installing a Theme |
64 | | - |
65 | | -The following command scaffolds a site from an official theme template: |
| 39 | +The following command scaffolds the Node blog template: |
66 | 40 |
|
67 | 41 | ```bash |
68 | 42 | npm create astro@latest -- --template @emdash-cms/template-blog |
69 | 43 | ``` |
70 | 44 |
|
71 | | -Community themes hosted on GitHub use the `github:` template prefix: |
| 45 | +Use the corresponding `-cloudflare` package for a Cloudflare Workers project: |
72 | 46 |
|
73 | 47 | ```bash |
74 | | -npm create astro@latest -- --template github:user/emdash-portfolio |
| 48 | +npm create astro@latest -- --template @emdash-cms/template-blog-cloudflare |
75 | 49 | ``` |
76 | 50 |
|
77 | | -After scaffolding, install dependencies and start the dev server: |
| 51 | +Current template packages include: |
| 52 | + |
| 53 | +| Purpose | Node | Cloudflare | |
| 54 | +| --- | --- | --- | |
| 55 | +| Empty project shell | `@emdash-cms/template-blank` | No current counterpart | |
| 56 | +| Basic pages site | `@emdash-cms/template-starter` | `@emdash-cms/template-starter-cloudflare` | |
| 57 | +| Posts, pages, categories, tags, and widgets | `@emdash-cms/template-blog` | `@emdash-cms/template-blog-cloudflare` | |
| 58 | +| Project portfolio | `@emdash-cms/template-portfolio` | `@emdash-cms/template-portfolio-cloudflare` | |
| 59 | +| Marketing pages with custom Portable Text renderers | `@emdash-cms/template-marketing` | `@emdash-cms/template-marketing-cloudflare` | |
| 60 | + |
| 61 | +After scaffolding, install dependencies and start the generated site: |
78 | 62 |
|
79 | 63 | ```bash |
80 | 64 | cd my-site |
81 | 65 | npm install |
82 | 66 | npm run dev |
83 | 67 | ``` |
84 | 68 |
|
85 | | -Visit `http://localhost:4321/_emdash/admin` to complete the Setup Wizard. |
86 | | - |
87 | | -## The Setup Wizard |
| 69 | +Open `http://localhost:4321/_emdash/admin`. The first visit redirects to setup, where you enter the site identity and administrator details. When the selected template has sample entries, the wizard also lets you include or omit them. Including them is useful while evaluating the design because the routes have realistic content to render. |
88 | 70 |
|
89 | | -The Setup Wizard runs automatically on first admin visit. It performs these steps: |
| 71 | +## First setup |
90 | 72 |
|
91 | | -1. Prompts for site title, tagline, and admin credentials |
92 | | -2. Offers an option to include sample content |
93 | | -3. Applies the seed file to the database |
94 | | -4. Redirects to the admin dashboard |
| 73 | +EmDash reads the seed at build time. It looks in this order: |
95 | 74 |
|
96 | | -<Aside type="tip"> |
97 | | - Check "Include sample content" when exploring a theme for the first time. The sample content |
98 | | - demonstrates how the theme expects content to be structured. |
99 | | -</Aside> |
| 75 | +1. `.emdash/seed.json`. |
| 76 | +2. The path in `package.json#emdash.seed`. |
| 77 | +3. `seed/seed.json`. |
| 78 | +4. The built-in default seed when no user seed is found. |
100 | 79 |
|
101 | | -## Official Themes |
| 80 | +On the first admin visit, the setup wizard shows seed metadata and lets the administrator choose whether to include sample content. It applies the seed to an empty database and records setup completion. Later starts do not reapply the seed to an existing site. |
102 | 81 |
|
103 | | -EmDash provides official starter themes, each available in local (SQLite + filesystem) and Cloudflare (D1 + R2) variants: |
104 | | - |
105 | | -| Theme | Description | Use Case | |
106 | | -| ----- | ----------- | -------- | |
107 | | -| `@emdash-cms/template-blog` | Minimal blog with posts, pages, categories, and dark mode | Personal blogs, simple sites | |
108 | | -| `@emdash-cms/template-portfolio` | Editorial-style portfolio with projects, serif typography (Playfair Display), and image-focused layouts | Freelancers, agencies, creatives | |
109 | | -| `@emdash-cms/template-marketing` | Bold marketing site with custom Portable Text blocks (hero, features, testimonials, pricing, FAQ) | Landing pages, SaaS sites, product marketing | |
110 | | - |
111 | | -### Cloudflare Variants |
112 | | - |
113 | | -For deployment on Cloudflare Workers with D1 and R2, append `-cloudflare` to the template name, as in the following commands: |
114 | | - |
115 | | -```bash |
116 | | -npm create astro@latest -- --template @emdash-cms/template-blog-cloudflare |
117 | | -npm create astro@latest -- --template @emdash-cms/template-portfolio-cloudflare |
118 | | -npm create astro@latest -- --template @emdash-cms/template-marketing-cloudflare |
119 | | -``` |
120 | | - |
121 | | -These variants include `wrangler.jsonc` for deployment configuration. |
122 | | - |
123 | | -## Customizing After Install |
124 | | - |
125 | | -After the Setup Wizard completes, the site is a standard Astro project. Customize it like any Astro site: |
| 82 | +<Aside type="caution"> |
| 83 | + A seed is initial setup data, not a deployment migration system. After setup, change a live site's model through EmDash and export the resulting schema when the repository needs an updated baseline. |
| 84 | +</Aside> |
126 | 85 |
|
127 | | -- Edit pages in `src/pages/` |
128 | | -- Modify layouts in `src/layouts/` |
129 | | -- Add collections via the admin UI |
130 | | -- Install Astro integrations |
131 | | -- Deploy anywhere Astro runs |
| 86 | +## Customize the installed site |
132 | 87 |
|
133 | | -The seed file is only used during initial setup. After that, manage the content model in the admin panel or with the CLI. |
| 88 | +Edit the generated project directly: |
134 | 89 |
|
135 | | -## Next Steps |
| 90 | +- Change route files in `src/pages/`. |
| 91 | +- Change shared markup in `src/layouts/` and `src/components/`. |
| 92 | +- Change the initial model in `seed/seed.json` before first setup. |
| 93 | +- Manage an existing site's model under **Content Types** in the admin. |
136 | 94 |
|
137 | | -- **[Creating Themes](/themes/creating-themes/)** — Build your own EmDash theme |
138 | | -- **[Seed File Format](/themes/seed-files/)** — Reference for seed file structure |
139 | | -- **[Getting Started](/getting-started/)** — Create your first EmDash site |
| 95 | +Use [Creating themes](/themes/creating-themes/) to prepare a reusable template and [Seed files](/themes/seed-files/) for the complete seed contract. |
0 commit comments