@ctrliq/create-quantic-website

Scaffold a website pre-wired with the Quantic design system.

It generates a static Astro site where Quantic components server-render into declarative shadow DOM, so page copy is in the HTML rather than appearing after hydration. Marketing and documentation sites are the target; for product UIs behind a login use @ctrliq/create-quantic-app.

Quick start

pnpm create @ctrliq/quantic-website my-site

Then:

cd my-site
pnpm install
pnpm dev

Requires Node >=24 and pnpm >=11.

Usage

Interactive wizard (default)

pnpm create @ctrliq/quantic-website my-site

Presets

pnpm create @ctrliq/quantic-website my-site --preset full

| Preset | blog | llms | analytics | deploy | | --------- | ---- | ---- | --------- | ------ | | minimal | – | – | – | – | | full | ✓ | ✓ | ✓ | ✓ |

Flags

pnpm create @ctrliq/quantic-website my-site --blog --deploy

| Flag | Description | | ------------- | --------------------------------------------------------------- | | --blog | MDX content collections, post routes and an RSS feed | | --llms | llms.txt describing the site, advertised from the head | | --analytics | Google Tag Manager with view-transition page views | | --deploy | Netlify config with build command and caching headers |

What you get

Every generated site includes:

• Astro with output: 'static' and the Lit integration
• Quantic packages: -components, -css, -tokens, -fonts
• A SEO head component with canonical URLs, Open Graph tags and a JSON-LD graph
• sitemap.xml and robots.txt
• Fonts narrowed by a FontFilter, preloaded and inlined as @font-face
• ESLint, Stylelint and TypeScript via Quantic's shared Astro presets

Zero JavaScript ships beyond the declarative shadow DOM polyfill Astro injects.

Before you deploy

Set SITE_URL in src/consts.ts to the production origin. Canonical links, Open Graph URLs, the sitemap and llms.txt all derive from it.

With --analytics, set PUBLIC_GTM_ID in .env. The component renders nothing when it is unset, so analytics stays off until configured.

Using Quantic components

The generated layouts import @ctrliq/quantic-components/register, which registers all elements as a one-time side effect. Pages just write the custom element tags directly:

<quantic-card>
  <quantic-button as="a" href="/pricing">See pricing</quantic-button>
</quantic-card>

How it works

The scaffolder composes the site from template layers under templates/:

base               always
blog               --blog
llms               --llms
analytics/gtm      --analytics
deploy/netlify     --deploy

Layers are copied in order, later ones overwriting earlier ones. Each can carry a _deps.json that is merged into the generated package.json. The layering engine is shared with the other generators via @ctrliq/quantic-scaffold-core.

Development

pnpm build       # bundle src/ to dist/ with Rollup
pnpm test        # layer composition tests
pnpm typecheck   # tsc --noEmit
pnpm dev         # scaffold a scratch site into .dev-out/
pnpm dev:start   # scaffold, install and serve it

Develop from the monorepo: the layering engine comes from the unpublished @ctrliq/quantic-scaffold-core, so installing devDependencies outside the workspace 404s.