create-bearminion 0.0.0-stage → 1.1.0

package/package.json

@@ -1,6 +1,56 @@
 {
   "name": "create-bearminion",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.1.0",
+  "description": "Create a BearMinion site: an Astro website you edit by clicking on it.",
+  "license": "MIT",
+  "author": "Jakub Lange",
+  "homepage": "https://github.com/langehelp-software/bearminion#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/langehelp-software/bearminion.git",
+    "directory": "packages/create-bearminion"
+  },
+  "bugs": {
+    "url": "https://github.com/langehelp-software/bearminion/issues"
+  },
+  "keywords": [
+    "astro",
+    "withastro",
+    "cms",
+    "git-cms",
+    "create",
+    "starter",
+    "template",
+    "bearminion"
+  ],
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "type": "module",
+  "bin": {
+    "create-bearminion": "./dist/cli.mjs"
+  },
+  "files": [
+    "dist",
+    "template",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "devDependencies": {
+    "@clack/prompts": "^1.8.1",
+    "@types/node": "^22.19.0",
+    "tsdown": "0.23.1",
+    "typescript": "~5.9.3",
+    "vitest": "^5.0.4"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "test": "vitest run",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
 }

package/template/.storybook/main.ts

@@ -0,0 +1,14 @@
+import type { StorybookConfig } from '@storybook-astro/framework'
+
+const config = {
+  stories: ['../src/**/*.stories.@(ts|tsx)'],
+  framework: {
+    name: '@storybook-astro/framework',
+    options: {},
+  },
+  core: {
+    disableTelemetry: true,
+  },
+} satisfies StorybookConfig
+
+export default config

package/template/.storybook/preview.css

@@ -0,0 +1,8 @@
+@import "../src/styles/global.css";
+
+body,
+.sb-show-main {
+  background: var(--t-base-bg);
+  color: var(--t-base-fg);
+  font-family: var(--font-sans);
+}

package/template/.storybook/preview.ts

@@ -0,0 +1,17 @@
+import type { Preview } from '@storybook-astro/framework'
+import './preview.css'
+
+const preview = {
+  parameters: {
+    layout: 'padded',
+    controls: {
+      expanded: true,
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+} satisfies Preview
+
+export default preview

package/template/README.md

@@ -0,0 +1,251 @@
+# BearMinion site
+
+The default BearMinion template, created with `npm create bearminion`. Astro and Tailwind render the JSON in `content/`, and while `npm run dev` runs, an inline editor writes that JSON back. `npm run build` writes a static site with no editor in it.
+
+```bash
+npm install    # if it was created with --no-install
+npm run dev
+```
+
+Open the site, press Ctrl+E (Cmd+E on a Mac) for the sidebar, click any text to edit it, and Ctrl/Cmd+S to save. Commit `content/` and `src/assets/` like any other code; a host such as Vercel or Netlify builds the site from the repository.
+
+| Script | What it does |
+| --- | --- |
+| `npm run dev` | Astro dev server with the editor |
+| `npm run build` | Static site in `dist/`, no editor |
+| `npm run preview` | Serves `dist/` |
+| `npm run typecheck` | `astro check` |
+
+This template is yours to change: it is the theme. `bearminion` is the only runtime package from this project, and it reads your section definitions, site definition and theme from `src/lib/content-model.ts`.
+
+## Organisms and sections
+
+| Layer | What it is | Where it lives |
+| --- | --- | --- |
+| Atoms | Typed primitives: typography, button, image | `src/components/atoms` |
+| Molecules | Small compositions of atoms: section shell, section header, media frame, pill | `src/components/molecules` |
+| Organisms | Static, site-wide and standalone UI | `src/components/organisms` |
+| Sections | Page-content blocks stored in page JSON | `src/components/sections` |
+
+Organisms are Header, Navigation, MobileMenu, and Footer. A modal, a dialog, and a cookie banner belong in this folder too. They are the chrome around every page (or a standalone widget), and they are fed by `content/site.json`.
+
+Sections are `hero`, `logoStrip`, `features`, `textImage`, `stats`, `testimonials`, `pricing`, `faq`, `cta`, and `contact`. Each page entry is `{ id, anchor?, type, variant, tone, motion?, props }`. `anchor` is an optional lowercase slug, unique on the page, and it becomes the section element's `id`. `data-section-id` stays the section id. `[data-section-id]` sets `scroll-margin-top: 7rem` so a sticky or floating header does not cover the target. `html` uses `scroll-behavior: smooth`, and `prefers-reduced-motion: reduce` forces `scroll-behavior: auto`. Section components are built from molecules and atoms. A section may use an organism when it needs one, such as a modal. The section root carries `data-section-id`, `data-section-type`, `data-variant`, `data-tone`, and `data-motion`. Atoms accept a `class` and forward `data-*` attributes, including `data-field`, so the editor can find the text.
+
+Paragraph fields (`sub`, `intro`, `body`, `description`, `quote`, `note`, `thanks`, and FAQ answers) are markdown. The template renders bold, italic, links, and paragraphs through `bearminion/rich-text`, escapes every other character, and adds `rel="noopener noreferrer"` on `http` and `https` links.
+
+```text
+src/components/
+  atoms/        Typography, Button, Image, LogoMark, Emphasis
+  molecules/    SectionShell, SectionHeader, MediaFrame, Pill
+  organisms/    Header, Navigation, MobileMenu, Footer, plus site-definition.ts (header and footer layouts, limits)
+  sections/     one directory per type, plus definitions.ts, registry.ts, shared.ts, SectionList.astro
+    hero/         definition.ts (zod schema, defaults, options), wireframe.ts (picker thumbnail), Hero.astro, Hero.stories.ts
+    logo-strip/ features/ text-image/ stats/ testimonials/ pricing/ faq/ cta/ contact/
+  seo/          Seo
+```
+
+`src/lib/content-model.ts` joins the section definitions and `organisms/site-definition.ts`. `astro.config.ts` passes it to `bearminion()` and `loadContent()`. A section directory holds everything about one type. See [Add a section type](#add-a-section-type) below.
+
+## Add a section type
+
+A section type is one directory under `src/components/sections/` plus three one-line registrations. This walks through a `quote` section: a pull quote with an attribution.
+
+**1. The definition** (`quote/definition.ts`). The Zod schema validates the JSON and drives the editor's Content fields; `defaults` is what a new section starts with and must pass the schema.
+
+```ts
+import { z } from 'zod'
+import { defineSection, richTextSchema, textSchema } from 'bearminion'
+import { quoteWireframe } from './wireframe'
+
+export const quoteSchema = z.object({
+  quote: richTextSchema,
+  name: textSchema,
+  role: textSchema.optional(),
+})
+
+export type QuoteProps = z.infer<typeof quoteSchema>
+
+export const quote = defineSection({
+  type: 'quote',
+  label: 'Quote',
+  description: 'A pull quote with the name of the person who said it.',
+  schema: quoteSchema,
+  defaults: { quote: 'A short quote, in the words of the person who said it.', name: 'Alex Morgan', role: 'Role, Company' },
+  variants: ['plain', 'card'] as const,
+  defaultVariant: 'plain',
+  // Props an author may clear. A test checks this list against the schema.
+  optional: { props: ['role'] },
+  wireframe: quoteWireframe,
+})
+```
+
+**2. The picker thumbnail** (`quote/wireframe.ts`): rectangles in a 100 × 100 frame, `[left, top, width, height, kind]`.
+
+```ts
+import { defineWireframe } from 'bearminion'
+
+export const quoteWireframe = defineWireframe([
+  [14, 28, 72, 10, 'title'],
+  [14, 44, 60, 6, 'text'],
+  [14, 64, 24, 6, 'text'],
+])
+```
+
+**3. The component** (`quote/Quote.astro`). Put `data-field` on every editable element, with the path into the page JSON, so the editor can find it.
+
+```astro
+---
+import type { Section } from '../definitions'
+import { renderRichText } from 'bearminion/rich-text'
+import SectionShell from '../../molecules/SectionShell.astro'
+
+interface Props {
+  section: Extract<Section, { type: 'quote' }>
+  index: number
+  motion?: boolean
+}
+
+const { section, index, motion = true } = Astro.props
+const field = (path: string) => `sections.${index}.props.${path}`
+---
+
+<SectionShell id={section.id} anchor={section.anchor} type={section.type} variant={section.variant} tone={section.tone} motion={section.motion ?? motion}>
+  <figure class="section-container">
+    <blockquote class="text-3xl" data-field={field('quote')} set:html={renderRichText(section.props.quote)} />
+    <figcaption>
+      <span data-field={field('name')}>{section.props.name}</span>
+      {section.props.role && <span class="text-muted" data-field={field('role')}>{section.props.role}</span>}
+    </figcaption>
+  </figure>
+</SectionShell>
+```
+
+**4. Register it** in three places:
+
+- `sections/definitions.ts`: add `quote` to `sectionDefinitions`. This is the schema side, loaded by `astro.config.ts` and the editor, so it must not import `.astro` files.
+- `sections/registry.ts`: add `quote: Quote`. The `satisfies Record<SectionType, unknown>` check fails until you do.
+- `sections/SectionList.astro`: add a `case 'quote'` that renders `<Quote section={section} index={index} motion={motion} />`. The switch is what gives each component its exact section type.
+
+Restart `npm run dev`. The section appears in the Add section picker, its fields in the sidebar, and `npm run typecheck` checks the component against the schema. Add a `Quote.stories.ts` next to it if you use Storybook.
+
+Removing a section type later is safe: pages that still hold it open in the editor with an "Unknown" section you can delete, and `astro build` fails until they are cleaned up.
+
+## Atoms
+
+Design tokens (colors, fonts, and the semantic type scale) are declared in `src/styles/global.css`. Fonts and radii live in `@theme`. The tone colors (`bg`, `fg`, `muted`, `line`, `surface`, `accent`, `on`, `link`) live in `@theme inline`, so a section’s `[data-tone]` variables apply to `text-muted`, `bg-surface`, borders, and the other utilities. Inverse and brand text pairs meet WCAG AA. Atoms use those tokens through Tailwind utilities. Variant styles are built with `class-variance-authority`.
+
+### Typography
+
+`Typography.astro` renders the element named by `as` (`h1`–`h6`, `p`, `span`, `blockquote`, `div`, `li`, `figcaption`).
+
+| Prop | Values |
+| --- | --- |
+| `size` | `display`, `display-center`, `display-editorial`, `h2`, `h2-lg`, `h3`, `lead`, `body`, `small`, `meta`, `eyebrow`, `mono`, `stat`, plus `xs`–`6xl` |
+| `color` | `default`, `muted`, `accent`, `link`, `on` (the active tone) |
+| `weight` | `regular`, `medium`, `semibold`, `bold` |
+| `font` | `sans` (Bricolage Grotesque), `serif` (Instrument Serif), `mono` (JetBrains Mono) |
+| `align` | `left`, `center`, `right` |
+| `class` | Extra Tailwind classes, merged with `tailwind-merge` |
+| `data-field` | Forwarded onto the element |
+
+### Button
+
+`Button.astro` renders an `<a>` when `href` is set, and a `<button>` otherwise. An `http` or `https` href opens in a new tab with `rel="noopener noreferrer"` unless `newTab` is `false`. `newTab` forces a new tab for any href. `id` and `data-analytics` are forwarded.
+
+| Prop | Values |
+| --- | --- |
+| `variant` | `primary` (accent fill, optional arrow), `secondary` (inset line), `strong` (foreground on background), `ghost`, `text` |
+| `size` | `sm` (2.5rem, used in the header), `md` (3rem), `lg` (3.25rem) |
+| `arrow` | Appends a trailing arrow. Primary and text links opt in. |
+| `href` | Present for links |
+| `newTab` | Opens in a new window and sets `rel="noopener noreferrer"` |
+| `class`, `data-field` | Forwarded onto the `<a>` or `<button>` |
+
+Section JSON links are `{ label, href, newTab?, id?, trackingId? }`. The section component chooses the button variant. `trackingId` is rendered as `data-analytics`.
+
+### Image
+
+`Image.astro` uses Astro `<Image>` for files under `src/assets/` and a plain `<img>` for remote `http(s)` URLs. A `src/assets/...` path with no matching file throws at build time, with a message that says to restore the file or choose another image.
+
+`MediaFrame.astro` is the image slot of a section: a frame with an aspect ratio, the image inside, or diagonal stripes and the alt text when there is no image yet. The slot's `data-field` sits on the frame, so the editor outlines and opens the whole frame, empty or not. The logo strip does the same on each logo's list item.
+
+The site's own images (`logo.png`, `favicon.png`, `og.png`, `hero.png`) live in `src/assets/uploads/`, the editor's image library, so they can be picked again after you replace them. The library refuses to delete an image that a saved page or `site.json` still uses.
+
+| Prop | Values |
+| --- | --- |
+| `src`, `alt` | `alt` is required (it may be an empty string) |
+| `aspect` | `auto`, `square`, `video`, `4/3`, `4/5`, `3/2` |
+| `fit` | `cover`, `contain` (CSS `object-fit`) |
+| `rounded` | `none`, `md`, `lg`, `xl`, `2xl`, `3xl`, `full` |
+| `loading` | `lazy` (default) or `eager` |
+| `priority` | Loads the image eagerly |
+| `sizes`, `widths` | Passed through to Astro Image for local files |
+| `class`, `data-field` | Forwarded onto the `<img>` |
+
+## SEO and sitemap
+
+`Seo.astro` reads the page `seo` object and the site defaults in `site.json`. The document title is `seo.titleTemplate` with `%s` replaced by the page SEO title. Description falls back to the site description. The canonical URL is `seo.canonical` when set, otherwise the page path joined to `site.url`. Robots is `noindex` or `index`, plus `nofollow` or `follow`. Open Graph, Twitter, and WebPage JSON-LD use the same title, description, and image.
+
+`astro.config.ts` sets `site` from `site.json` and adds `@astrojs/sitemap`. The filter keeps content pages whose `seo.noindex` is false. `content/pages/preview.json` is the sample noindex page: it is built, it emits `noindex`, and it is absent from the sitemap. `src/pages/robots.txt.ts` points crawlers at `sitemap-index.xml`.
+
+The style guide at `/style-guide` renders every typography size and button variant. `/variants` renders every section, header, and footer variant. They live in `src/dev/` and only `npm run dev` serves them (the `devPages` integration in `astro.config.ts`), so they never reach the built site. Delete that integration and the folder if you do not want them.
+
+## Dev editor
+
+`astro.config.ts` registers `bearminion()`. It is active only while `pnpm dev` is running. The production build does not add editor routes, scripts, or the overlay.
+
+The page gets a shadow-root overlay. Click text with `data-field` to edit it, and hover a section (`data-section-id`) for add, duplicate, move, and delete. The corner **Editor** button or Ctrl+E / Cmd+E opens the sidebar. Ctrl+S / Cmd+S saves. Escape leaves a field, then closes the add picker or the sidebar. Unsaved edits turn the corner dot amber and trigger a beforeunload warning.
+
+A variant change or a new, duplicated, moved, or deleted section is re-rendered by `POST /__bearminion/api/preview`. The handler validates the draft, renders `SectionList` with Astro's container API inside the Vite SSR runner, and returns HTML. The overlay replaces `main#content`. Nothing is written until save. In dev, an image path under `src/assets/` that is missing from the eager glob is served from `/__bearminion/assets` so a new upload can use a plain `<img>` immediately. When the file is gone, that route returns a Missing image placeholder instead, so the page shows the gap. Production still resolves that path with `import.meta.glob` and Astro `<Image>`, and still throws if the file is missing; the editor's save validation keeps content from pointing at a missing file.
+
+Header links nest up to three levels (`MAX_NAV_DEPTH`). Desktop navigation uses hover and focus flyouts. The mobile menu uses an accordion. The link picker lists pages, `#anchor` on the current page, `/page#anchor` on other pages, and a custom URL.
+
+The API is `/__bearminion/api` on localhost. Saving `content/*.json` asks the editor to reload. If the draft is still dirty, the editor asks to save, discard, or cancel first. Unsaved drafts are kept in `localStorage` until save or discard. An upload does not reload by itself, so the draft can preview the new file before save. Request and response shapes, with curl examples, are in the [Dev API docs](https://github.com/langehelp-software/bearminion/blob/main/docs/dev-api.md), and every sidebar tab is described in [the editor docs](https://github.com/langehelp-software/bearminion/blob/main/docs/editor.md).
+
+```bash
+pnpm dev
+curl -s http://127.0.0.1:4321/__bearminion/api/pages
+```
+
+## Outside the BearMinion repository
+
+Nothing in this folder points outside it. `package.json` asks for `bearminion` by version range, not `workspace:*`, so a copy installs with a plain `npm install`, `pnpm install` or `yarn`. In the BearMinion monorepo pnpm links that range to `packages/editor`.
+
+To try unreleased changes from the monorepo, build a tarball with `pnpm --filter bearminion pack` and point the copy at it: `"bearminion": "file:/path/to/bearminion-1.0.0.tgz"`. CI does the same with the packed `create-bearminion` on every pull request.
+
+The editor's end-to-end tests and this template's unit tests live in the monorepo's `tests/` package, not here.
+
+<!-- storybook:start -->
+## Storybook
+
+Storybook uses `@storybook-astro/framework` (Storybook 10). It renders the `.astro` files on the server with Astro’s container API, so the components stay Astro. Tailwind and the design tokens come from `src/styles/global.css`, imported in `.storybook/preview.css`. The Tailwind Vite plugin is the one already set in `astro.config.ts`.
+
+```bash
+npm run storybook
+npm run build-storybook
+```
+
+`storybook` opens the dev server at `http://localhost:6006`. Controls re-render Astro stories there. `build-storybook` writes a static site to `storybook-static/`. That build pre-renders each story with its saved args, and the Controls panel in the static site does not apply new values.
+
+Stories live next to the component as `Component.stories.ts`. The `title` sets the sidebar group: `Atoms/Button`, `Molecules/SectionShell`, `Organisms/Header`, `Sections/Hero`. Props are `args`. Children go in `args.slots.default` (a string, another `.astro` component, or `{ component, props, slots }`). Named slots use the same shape. Section stories pass the matching block from `content/pages/index.json`.
+
+```ts
+import Button from './Button.astro'
+
+export default {
+  title: 'Atoms/Button',
+  component: Button,
+}
+
+export const Playground = {
+  args: {
+    variant: 'primary',
+    size: 'md',
+    href: '/about',
+    slots: { default: 'Read the approach' },
+  },
+}
+```
+
+A few limits of this renderer: Astro `<script>` tags are not run, so the mobile menu toggle works on the built site and the canvas shows the menu markup. Local images use Vite `/@fs` URLs, which resolve while `storybook dev` is running. Astro’s image optimizer still runs in `astro build`. The static Storybook output keeps those `/@fs` URLs, so image stories in `storybook-static` do not load the files on their own.
+<!-- storybook:end -->

package/template/_gitignore

@@ -0,0 +1,21 @@
+# dependencies
+node_modules/
+
+# build output
+dist/
+storybook-static/
+
+# generated types
+.astro/
+
+# editor version history (local only)
+.editor/
+
+# environment
+.env
+.env.*
+!.env.example
+
+# logs and OS files
+*.log
+.DS_Store

package/template/astro.config.ts

@@ -0,0 +1,46 @@
+import path from 'node:path'
+import sitemap from '@astrojs/sitemap'
+import tailwindcss from '@tailwindcss/vite'
+import bearminion, { loadContent } from 'bearminion/astro'
+import type { AstroIntegration } from 'astro'
+import { defineConfig } from 'astro/config'
+import { contentDirectory } from './src/lib/content-dir'
+import { contentModel } from './src/lib/content-model'
+import { createSitemapFilter } from './src/lib/sitemap'
+
+const contentDir = contentDirectory()
+// Tolerant, so `astro dev` still starts when a page holds a section type the site dropped: the editor can then remove it.
+const content = loadContent(contentDir, contentModel, { tolerateOrphans: true })
+
+/** The style guide and the variants gallery are theme workshops: `astro dev` serves them, `astro build` leaves them out. */
+const devPages: AstroIntegration = {
+  name: 'bearminion-site:dev-pages',
+  hooks: {
+    'astro:config:setup': ({ command, injectRoute }) => {
+      if (command !== 'dev') return
+      injectRoute({ pattern: '/style-guide', entrypoint: new URL('./src/dev/style-guide.astro', import.meta.url) })
+      injectRoute({ pattern: '/variants', entrypoint: new URL('./src/dev/variants.astro', import.meta.url) })
+    },
+  },
+}
+
+export default defineConfig({
+  site: content.site.url,
+  integrations: [
+    bearminion({
+      contentDir,
+      ...contentModel,
+      git: process.env.BEARMINION_GIT === 'true',
+      uploadsDir: process.env.BEARMINION_UPLOADS_DIR
+        ? path.resolve(process.env.BEARMINION_UPLOADS_DIR)
+        : path.resolve(contentDir, '../src/assets/uploads'),
+    }),
+    sitemap({
+      filter: createSitemapFilter(content.pages),
+    }),
+    devPages,
+  ],
+  vite: {
+    plugins: [tailwindcss()],
+  },
+})

package/template/content/pages/404.json

@@ -0,0 +1,36 @@
+{
+  "sections": [
+    {
+      "anchor": "not-found",
+      "id": "not-found",
+      "props": {
+        "eyebrow": "404",
+        "heading": "Page not found.",
+        "marks": [
+          {
+            "end": 15,
+            "font": "serif",
+            "italic": true,
+            "start": 5
+          }
+        ],
+        "primary": {
+          "href": "/",
+          "label": "Back to the homepage"
+        },
+        "sub": "The link may be broken, or the page may have moved."
+      },
+      "tone": "base",
+      "type": "hero",
+      "variant": "centered"
+    }
+  ],
+  "seo": {
+    "description": "The page you were looking for does not exist.",
+    "nofollow": true,
+    "noindex": true,
+    "title": "Page not found"
+  },
+  "slug": "404",
+  "title": "Page not found"
+}

package/template/content/pages/about.json

@@ -0,0 +1,101 @@
+{
+  "sections": [
+    {
+      "anchor": "intro",
+      "id": "intro",
+      "props": {
+        "eyebrow": "About",
+        "heading": "The story behind the work.",
+        "marks": [
+          {
+            "end": 26,
+            "font": "serif",
+            "italic": true,
+            "start": 17
+          }
+        ],
+        "primary": {
+          "href": "/#contact",
+          "label": "Get in touch"
+        },
+        "secondary": {
+          "href": "/",
+          "label": "Back to the homepage"
+        },
+        "sub": "Open with one or two sentences about who you are and what you care about."
+      },
+      "tone": "base",
+      "type": "hero",
+      "variant": "centered"
+    },
+    {
+      "anchor": "story",
+      "id": "story",
+      "props": {
+        "body": "Tell the short version of how you got here: the problem you saw, what you did about it, and what drives you now.",
+        "eyebrow": "Our story",
+        "heading": "How it started.",
+        "image": {
+          "alt": "",
+          "src": "placeholder"
+        },
+        "link": {
+          "href": "/#features",
+          "label": "See what we offer"
+        },
+        "marks": [
+          {
+            "end": 15,
+            "font": "serif",
+            "italic": true,
+            "start": 7
+          }
+        ],
+        "points": [
+          "When and where you started",
+          "What makes your approach different",
+          "Who you work with today"
+        ]
+      },
+      "tone": "base",
+      "type": "textImage",
+      "variant": "left"
+    },
+    {
+      "anchor": "contact",
+      "id": "contact",
+      "props": {
+        "body": "Invite the reader to take the next step, and say what happens when they do.",
+        "heading": "Want to work together?",
+        "marks": [
+          {
+            "end": 22,
+            "font": "serif",
+            "italic": true,
+            "start": 13
+          }
+        ],
+        "primary": {
+          "href": "/#contact",
+          "label": "Contact us"
+        },
+        "secondary": {
+          "href": "/",
+          "label": "Back home"
+        }
+      },
+      "tone": "subtle",
+      "type": "cta",
+      "variant": "centered"
+    }
+  ],
+  "seo": {
+    "description": "Who you are, why you started, and the people behind the work.",
+    "nofollow": false,
+    "noindex": false,
+    "ogImage": "src/assets/uploads/og.png",
+    "title": "About"
+  },
+  "slug": "about",
+  "title": "About"
+}