`, the meta description, author, canonical URL, Open Graph (including `article:author` and the dates) and Twitter tags, and a JSON-LD `<script>` from the item's `seo` and `json_ld`. Author pages are `index.html?author={slug}`, so set Headra's SEO → Author URL to `/index.html?author={slug}`; - reports a view with `navigator.sendBeacon` to `/api/track` (single items only); - links to `sitemap.xml` and `robots.txt`, which Headra generates and serves itself; - has a light / dark / auto switcher (remembered in `localStorage`). The look is plain CSS in `styles.css` (no framework): change the colours in the variables at the top, or replace the file with your own design. `config.js` also sets the site `name` shown in the header and footer. ## Try it 1. In the admin, open a website and create a **public** key under *API keys*. 2. Publish a few posts. Optionally create a menu with the slug `header` (*Navigation*) and a custom type (e.g. `recipes`). 3. Edit `config.js`: set `api` to the Headra address and `key` to the public key. 4. Serve this folder with any static server and open it: ```bash cd examples/static-site && python3 -m http.server 8000 # http://localhost:8000 ``` Opening the files straight from disk (`assets/img/-) works in most browsers too, because the API allows any origin. ## Notes for real sites - **Escaping.** Every value from the API is inserted as text, except the rich text fields listed in `config.richText`, which Headra sanitises on save. Keep that rule when you adapt the code. - **URLs.** Items and menu links carry `url`, built from the website's *site URL* and the type's URL pattern (e.g. `/blog/{slug}`). This demo has no URL rewriting, so it builds query-string links from `type` and `slug` instead. A real site (or a static-site generator) should use the patterns, so that the sitemap and canonical URLs match the pages. - **SEO.** Tags set from JavaScript are read by Google and most modern crawlers. Social previews (Facebook, Slack, …) don't run JavaScript, so if they matter, render the pages at build time from the same API. - **Sitemap.** Add a domain to the website (*Account → Websites → domains*), e.g. `api.example.com`, and reference `https://api.example.com/sitemap.xml` in your own `robots.txt` or in Search Console. - **Caching.** Public-key responses are cached by Headra and carry an `ETag`, so browsers revalidate cheaply.

# Static site example A plain HTML + JavaScript front-end that runs entirely on the Headra API with a **public key**. There is no build step, no framework and no server code, so it can be hosted anywhere that serves files (S3, Netlify, GitHub Pages, a Bootstrap Studio export folder, …). | Page | Shows | API calls | |---|---|---| | `index.html` | Latest posts as cards (the newest as a large tile), with search, category chips, tag filter and pages | `/api/posts?fields=…`, `/api/categories` | | `post.html?slug=…` | One post: category, author, reading time, featured image (responsive `srcset`), excerpt, body, tags, author box and three related posts | `/api/posts/{slug}`, `/api/posts?category=…` | | `collection.html?type=…` | Any content type, built-in or custom (default: `collection` in `config.js`) | `/api/{type}` | | `item.html?type=…&slug=…` | One item of any type, rendering every custom field generically | `/api/{type}/{slug}` | Every page also: - renders the header menu from `/api/menus/{slug}` (nested items show on hover); - sets ``, the meta description, author, canonical URL, Open Graph (including `article:author` and the dates) and Twitter tags, and a JSON-LD `<script>` from the item's `seo` and `json_ld`. Author pages are `index.html?author={slug}`, so set Headra's SEO → Author URL to `/index.html?author={slug}`; - reports a view with `navigator.sendBeacon` to `/api/track` (single items only); - links to `sitemap.xml` and `robots.txt`, which Headra generates and serves itself; - has a light / dark / auto switcher (remembered in `localStorage`). The look is plain CSS in `styles.css` (no framework): change the colours in the variables at the top, or replace the file with your own design. `config.js` also sets the site `name` shown in the header and footer. ## Try it 1. In the admin, open a website and create a **public** key under *API keys*. 2. Publish a few posts. Optionally create a menu with the slug `header` (*Navigation*) and a custom type (e.g. `recipes`). 3. Edit `config.js`: set `api` to the Headra address and `key` to the public key. 4. Serve this folder with any static server and open it: ```bash cd examples/static-site && python3 -m http.server 8000 # http://localhost:8000 ``` Opening the files straight from disk (`assets/img/-) works in most browsers too, because the API allows any origin. ## Notes for real sites - **Escaping.** Every value from the API is inserted as text, except the rich text fields listed in `config.richText`, which Headra sanitises on save. Keep that rule when you adapt the code. - **URLs.** Items and menu links carry `url`, built from the website's *site URL* and the type's URL pattern (e.g. `/blog/{slug}`). This demo has no URL rewriting, so it builds query-string links from `type` and `slug` instead. A real site (or a static-site generator) should use the patterns, so that the sitemap and canonical URLs match the pages. - **SEO.** Tags set from JavaScript are read by Google and most modern crawlers. Social previews (Facebook, Slack, …) don't run JavaScript, so if they matter, render the pages at build time from the same API. - **Sitemap.** Add a domain to the website (*Account → Websites → domains*), e.g. `api.example.com`, and reference `https://api.example.com/sitemap.xml` in your own `robots.txt` or in Search Console. - **Caching.** Public-key responses are cached by Headra and carry an `ETag`, so browsers revalidate cheaply.