NotionKit Web v1.0.0
NotionKit Web v1.0.0
The website template of the NotionKit family: documentation from Markdown, a blog with RSS, marketing sections and an app panel built from the same components as the product. Bilingual, with no-JS fallbacks and a smoke suite as the deploy gate.
✓ No tracking✓ No external requests✓ GitHub template✓ SKILL.md for AI agents
Page tree, sections, “on this page”, previous/next and a title filter – from files in src/content/docs/.
Product with a built app panel, Docs with search and tree, Editorial purely typographic – swap the import.
FeatureGrid, Bento, Steps, CodeWindow, StatsRow, LogoCloud, Pricing, Testimonials, FAQ, CTA, Contact, Decor – all built from nk-*.
Theme before first paint, no-JS fallback from a generated mirror of the foundation, rebranding only in brand.css.
Default language at the root, others under /<code>/ – same slugs, hreflang, sitemap, language links instead of a JS toggle.
Playwright smoke suite: both themes × desktop/mobile, no-JS, subpage navigation, RSS/sitemap/llms.txt. Red = no deploy.
Then: adjust src/data/site.ts, colour brand.css, replace content in src/content/. The ten steps to your own site are in the documentation.
bashnpm create astro -- --template JUNGHERZ/NotionKit-Web my-site
cd my-site && npm install
npm run dev
SKILL.md is a machine-readable reference: section catalog, rules, and step-by-step recipes for a new site, a conversion and template updates. Hand it to Claude Code, Cursor, Copilot or a plain chat – copy the prompt, fill in the placeholders, done.
Build a new website based on the NotionKit Web template:
https://github.com/JUNGHERZ/NotionKit-Web
First read the SKILL.md in that repo, then follow its recipe §5
("New Website From This Template").
Project: <company / product / topic>
Hero: <Product (app panel) / Docs / Editorial – or "you pick">
Languages: <German + English / one language>
Docs areas: <e.g. getting started, concepts, reference>
Blog: <yes / no>
Brand colour: <hex – or "suggest something">
Sections: <e.g. features, steps, pricing, FAQ, contact – or "you pick">
For converting an existing site, point the recipe reference to §6 and add the old site’s URL. In an already derived project, “update this site from the template – follow SKILL.md recipe §7” is all it takes.
CSS foundation: tokens, ~100 components, light/dark, no build step. Comes into the template via npm.
Custom elements on the same tokens – for apps. Not a prerequisite for the web template.