HomeAboutShopBlogContact

Your Cart

Your cart is empty.

Your Cart

Your cart is empty.
// Instructions

Setting the theme up

Getting started

Node 22.12 or newer, then `npm install` and `npm run dev`. The site runs at localhost:4321 with the demo content already in it, so you can see every page before changing anything.

Astro documentation : https://docs.astro.build
Deploying a static site : https://docs.astro.build/en/guides/deploy/
What to edit first

One file carries the name, the URL, the contact details, the navigation and the footer columns: src/config/site.ts. Set the URL before the first deploy — the canonical tags, the sitemap and the feed are all built from it, and nothing fails when it is wrong.

src/config/site.ts : /style-guide/
Astro configuration : https://docs.astro.build/en/reference/configuration-reference/
Where the content lives

Everything the pages list comes out of src/content. Long-form content is Markdown, structured lists are JSON, and both are validated against the schemas in src/content/schemas.ts — a missing field fails the build rather than rendering an empty card.

1. Products are Markdown files in src/content/products. The frontmatter carries the price as a number, the SKU, the category and the images; the body is the description.

2. Journal articles are Markdown files in src/content/posts, with the article itself as the body.

3. The categories, the makers, the reviews, the questions and the photographs are JSON in src/content/data.

4. Adding a file adds a page. Deleting one removes it, and the listings and the sitemap follow.

5. To load any of it from a CMS instead, set CONTENT_SOURCE and the credentials for Contentful, Sanity, Strapi, WordPress or Shopify. A collection with no remote equivalent quietly keeps using the local files.

Astro content collections : https://docs.astro.build/en/guides/content-collections/
Zod schema reference : https://zod.dev
Motion

Every reveal is declared in the markup as data-anim and defined once in src/scripts/motion.ts. Change a duration there and it changes everywhere; delete an effect and the elements simply appear. Readers who ask for reduced motion get the page with nothing moving.

Selling things

Every Add to Cart is a real form carrying the id, name, price, currency and quantity. Nothing on a static site answers it — attach Snipcart, a Shopify Buy Button or any provider that reads a form, and the shop is live without a markup change. See docs/commerce.md.

Styling

src/styles/theme.css holds the design tokens and components.css the class for every block in the design. Both are generated; hand-written corrections go in additions.css, which loads last. Tailwind utilities are available everywhere and win over a component class.

Images and fonts

Images in src/assets are resized and re-encoded at build time; drop a file in and reference it from the content. Both faces are bundled rather than fetched, so a build works offline and a visitor loads nothing from a third party.

Before you deploy

Run npm run build and npx astro check — the theme ships with no errors, no warnings and no hints, and keeping it that way is the cheapest test you have. Then set the site URL, and check that the host you deploy to is the host it names.