Cool Writings - a Statamic Starter Kit

Quick start

Create a site with the Statamic CLI:

statamic new your-site statamic/starter-kit-cool-writings

Or install the kit into a fresh Statamic site:

php please starter-kit:install statamic/starter-kit-cool-writings --clear-site

The --clear-site option replaces existing site content. Use a fresh installation or back up your site first.

Follow the installer’s prompts to create a user, then visit /cp to start editing. You can also create a super user with:

php please make:user

Production assets are included, so you can use the kit without a frontend build. To work on the templates and styles, use Node.js 20.19+ or 22.12+:

npm install
npm run dev

Build the production assets when you’re ready:

npm run build

Writing and customization

Write articles in Markdown and add a short excerpt and topics in the article editor. Topic descriptions are optional and appear on both the topic list and the individual topic page. The home page, About page, archive introduction, and topic introduction are editable content entries. Site name and social links live in the Settings globals.

Component styling lives in the templates as Tailwind utilities. Shared partials handle article rows, navigation, search, the theme switch, and the canvas frame. resources/css/prose.css styles the HTML produced by Markdown; resources/css/site.css contains the Tailwind theme and shared defaults.

Search

The search icon in the navigation expands into an input. Results include published articles matching their title, excerpt, or full text. The local index is created on the first search and updates when articles are saved through the control panel.

After editing article files directly, rebuild it with:

php please search:update writings

The index is configured in config/statamic/search.php, the route in routes/web.php, and the results template in resources/views/search.antlers.html. Search requires a running Statamic site and is not available in a static HTML export.

Light and dark themes

The theme starts with your operating system’s preference. Flip the light switch in the navigation to choose a theme; the browser remembers that choice. Tailwind’s dark: utilities follow the selected theme, with a system-preference fallback when JavaScript is unavailable.

The Surge and Reebok sample images include -dark.jpg variants beside the originals in public/assets/content. Their article Markdown uses <picture> with a data-theme-dark source. The theme switch updates that source alongside the page colors; its prefers-color-scheme: dark media attribute provides the fallback without JavaScript. Regular photographs can use the same image in both themes.

Upgrading from 2.x

This is a starter kit, so installing a new release does not automatically merge the design into a customized site. For an existing site, compare the 3.0.0 templates, styles, JavaScript, blueprints, and search configuration with your own changes. Rebuild the frontend assets after merging.

The original sample entry IDs and URLs are preserved. The content model adds an optional topic description and exposes the existing topics relationship in the article editor.

Contributing

Contributions are welcome. Please read the code of conduct before contributing.