seo 0.13.2 → 0.14.0

package/site-kit/starter/scripts/validate-data.mjs

@@ -0,0 +1,47 @@
+// Fails when the data would make a wrong or broken page: a missing field,
+// a duplicate slug, a fact with no source, or a number outside its range.
+// Add a rule here for every mistake you find in your own data.
+import { readFile } from 'node:fs/promises'
+
+const parks = JSON.parse(await readFile('src/data/parks.json', 'utf8'))
+const sources = JSON.parse(await readFile('src/data/sources.json', 'utf8'))
+const sourceIds = new Set(sources.map((source) => source.id))
+const errors = []
+const slugs = new Set()
+
+for (const source of sources) {
+  if (!/^https?:\/\//.test(source.url)) errors.push(`${source.id}: bad url`)
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(source.checked)) {
+    errors.push(`${source.id}: checked must be a YYYY-MM-DD date`)
+  }
+}
+
+for (const park of parks) {
+  const at = park.slug ?? JSON.stringify(park).slice(0, 40)
+  if (!/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(park.slug ?? '')) {
+    errors.push(`${at}: slug must be lowercase words joined by hyphens`)
+  }
+  if (slugs.has(park.slug)) errors.push(`${at}: duplicate slug`)
+  slugs.add(park.slug)
+  if (!park.name?.trim()) errors.push(`${at}: missing name`)
+  if (!park.region?.trim()) errors.push(`${at}: missing region`)
+  if (!sourceIds.has(park.source)) errors.push(`${at}: unknown source`)
+  if (!(park.areaHectares > 0 && park.areaHectares < 10_000)) {
+    errors.push(`${at}: areaHectares out of range`)
+  }
+  if (!(park.opened >= 1500 && park.opened <= new Date().getFullYear())) {
+    errors.push(`${at}: opened out of range`)
+  }
+  if (!['yes', 'on leads', 'no'].includes(park.dogs)) {
+    errors.push(`${at}: dogs must be yes, on leads or no`)
+  }
+  if (park.parkingSpaces !== null && !(park.parkingSpaces >= 0)) {
+    errors.push(`${at}: parkingSpaces must be a number or null`)
+  }
+}
+
+if (errors.length) {
+  console.error(errors.join('\n'))
+  process.exit(1)
+}
+console.log(`${parks.length} parks and ${sources.length} sources are valid.`)

package/site-kit/starter/site.config.json

@@ -0,0 +1,9 @@
+{
+  "name": "Example Parks",
+  "domain": "example.com",
+  "description": "Size, opening year and facilities for every park in the example parks register, with the source and the date each fact was checked.",
+  "language": "en-GB",
+  "aiTraining": false,
+  "indexNowKey": "",
+  "allowWords": []
+}

package/site-kit/starter/src/components/Breadcrumbs.astro

@@ -0,0 +1,27 @@
+---
+// The visible path. The layout builds the BreadcrumbList from the same list.
+type Props = {
+  items: Array<{ name: string; path: string }>
+}
+
+const { items } = Astro.props
+---
+
+<nav aria-label="Breadcrumb" class="mb-6 text-sm text-foreground-muted">
+  <ol class="flex flex-wrap items-center gap-1.5">
+    {
+      items.map((item, index) => (
+        <li class="flex items-center gap-1.5">
+          {index < items.length - 1 ? (
+            <a class="underline decoration-border underline-offset-4 hover:decoration-foreground" href={item.path}>
+              {item.name}
+            </a>
+          ) : (
+            <span class="text-foreground" aria-current="page">{item.name}</span>
+          )}
+          {index < items.length - 1 ? <span aria-hidden="true" class="text-border">/</span> : null}
+        </li>
+      ))
+    }
+  </ol>
+</nav>

package/site-kit/starter/src/components/Button.astro

@@ -0,0 +1,46 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import {
+  type ButtonSize,
+  type ButtonVariant,
+  getButtonClasses,
+} from './ui/button'
+
+type Shared = { variant?: ButtonVariant; size?: ButtonSize }
+type Props =
+  | (HTMLAttributes<'button'> & Shared & { href?: undefined })
+  | (HTMLAttributes<'a'> & Shared & { href: string })
+
+const {
+  class: className,
+  variant: requestedVariant,
+  size = 'default',
+  ...props
+} = Astro.props as Props
+// The main action is primary and side actions are quieter.
+// Links and submit buttons are primary unless a page asks otherwise. Side
+// actions use the outline button so they show on white and muted panels.
+const variant: ButtonVariant =
+  requestedVariant ??
+  (typeof props.href === 'string' || props.type === 'submit'
+    ? 'default'
+    : 'outline')
+const anchorProps =
+  typeof props.href === 'string' ? (props as HTMLAttributes<'a'>) : undefined
+const buttonProps = anchorProps
+  ? undefined
+  : (props as HTMLAttributes<'button'>)
+const classes = [getButtonClasses(variant, size), className]
+---
+
+{
+  anchorProps ? (
+    <a {...anchorProps} class:list={classes}>
+      <slot />
+    </a>
+  ) : (
+    <button {...buttonProps} class:list={classes}>
+      <slot />
+    </button>
+  )
+}

package/site-kit/starter/src/components/Card.astro

@@ -0,0 +1,54 @@
+---
+// A muted panel with an optional icon, a title and text. A linked card
+// ends with a label that says where it goes, such as "Parks in Northfield",
+// and changes colour on hover. Each card spans its rows of the parent grid
+// as a subgrid, so titles and text line up across a row: put cards in
+// `grid grid-cols-1 gap-2 sm:grid-cols-2`.
+import { ArrowUpRight01Icon } from '@hugeicons/core-free-icons'
+import HugeIcon from './HugeIcon.astro'
+
+type Props = {
+  title: string
+  text: string
+  icon?: Parameters<typeof HugeIcon>[0]['icon']
+  href?: string
+  // Where the card goes. Replaces the corner arrow.
+  link?: string
+}
+
+const { title, text, icon, href, link } = Astro.props
+const Tag = href ? 'a' : 'div'
+---
+
+<Tag
+  href={href}
+  class:list={[
+    link ? 'row-span-4' : 'row-span-3',
+    'grid grid-rows-subgrid gap-y-0 rounded-lg bg-muted p-6',
+    href &&
+      'group no-underline transition-colors hover:bg-secondary-hover focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20',
+  ]}
+>
+  <div class="flex min-h-6 items-start justify-between gap-4 text-foreground-muted">
+    {icon ? (
+      <HugeIcon
+        icon={icon}
+        class:list={[
+          'size-6',
+          href && 'transition-transform duration-200 group-hover:-translate-y-0.5 group-hover:text-primary',
+        ]}
+      />
+    ) : <span></span>}
+    {href && !link ? (
+      <HugeIcon icon={ArrowUpRight01Icon} class="size-5 text-foreground-soft transition-colors group-hover:text-foreground" />
+    ) : null}
+  </div>
+  <h3 class="mt-8 text-base font-medium text-foreground">{title}</h3>
+  <p class="mt-2 text-sm leading-6 text-foreground-muted">{text}</p>
+  {link ? (
+    <span class="mt-4 inline-flex items-center gap-1 self-end text-sm font-medium text-foreground">
+      {link}
+      <HugeIcon icon={ArrowUpRight01Icon} class="size-4 text-foreground-soft transition-colors group-hover:text-foreground" />
+    </span>
+  ) : null}
+</Tag>

package/site-kit/starter/src/components/CodeBlock.astro

@@ -0,0 +1,62 @@
+---
+// A code block with a copy button.
+import { Copy01Icon, Tick02Icon } from '@hugeicons/core-free-icons'
+import HugeIcon from './HugeIcon.astro'
+
+type Props = {
+  label?: string
+  value: string
+  wrap?: boolean
+  class?: string
+}
+
+const { label, value, wrap = false, class: className } = Astro.props
+---
+
+<div class:list={['mt-5 min-w-0', className]}>
+  {label ? <p class="mb-2 text-sm/6 text-foreground-muted">{label}</p> : null}
+  <div class="code-frame !mt-0">
+    <pre
+      class:list={[
+        '!mt-0 overflow-x-auto rounded-lg bg-muted p-4 pr-13 font-mono text-sm leading-6 text-foreground',
+        wrap && 'whitespace-pre-wrap break-words',
+      ]}><code>{value}</code></pre>
+    <div class="code-copy-strip">
+      <button
+        type="button"
+        class="code-copy-button"
+        aria-label={label ? `Copy ${label.toLowerCase()}` : 'Copy code'}
+        data-code-copy
+      >
+        <HugeIcon icon={Copy01Icon} class="code-copy-icon" data-copy-icon />
+        <HugeIcon icon={Tick02Icon} class="code-copy-icon hidden" data-copy-check-icon />
+      </button>
+    </div>
+  </div>
+</div>
+
+<script>
+  // Astro bundles this once, however many code blocks a page has.
+  for (const button of document.querySelectorAll('[data-code-copy]')) {
+    if (!(button instanceof HTMLElement)) continue
+    const code = button.closest('.code-frame')?.querySelector('pre code')
+    button.addEventListener('click', async () => {
+      try {
+        await navigator.clipboard.writeText(code?.textContent ?? '')
+      } catch {
+        return
+      }
+      const copyIcon = button.querySelector('[data-copy-icon]')
+      const checkIcon = button.querySelector('[data-copy-check-icon]')
+      const label = button.getAttribute('aria-label') ?? 'Copy code'
+      copyIcon?.classList.add('hidden')
+      checkIcon?.classList.remove('hidden')
+      button.setAttribute('aria-label', 'Copied')
+      window.setTimeout(() => {
+        copyIcon?.classList.remove('hidden')
+        checkIcon?.classList.add('hidden')
+        button.setAttribute('aria-label', label)
+      }, 1500)
+    })
+  }
+</script>

package/site-kit/starter/src/components/FactTable.astro

@@ -0,0 +1,45 @@
+---
+// A fact block: one muted panel with a ruled row per fact, and the source
+// and checked date under it. `seo site check` fails the build when a block
+// has no source link (data-source) or no checked date (<time data-checked>).
+import { formatDate, type Source } from '../lib/parks'
+
+type Props = {
+  heading: string
+  rows: Array<{ label: string; value: string }>
+  source: Source
+}
+
+const { heading, rows, source } = Astro.props
+---
+
+<section class="mt-12" data-facts={heading}>
+  <h2 class="text-xl/7 font-medium text-foreground">{heading}</h2>
+  <div class="mt-4 overflow-hidden rounded-lg bg-muted">
+    <table class="w-full border-collapse text-left text-base">
+      <tbody>
+        {
+          rows.map((row) => (
+            <tr class="border-t border-border first:border-t-0">
+              <th scope="row" class="w-2/5 px-6 py-3.5 align-top font-normal text-foreground-muted">
+                {row.label}
+              </th>
+              <td class="px-6 py-3.5 align-top font-medium text-foreground">{row.value}</td>
+            </tr>
+          ))
+        }
+      </tbody>
+    </table>
+  </div>
+  <p class="mt-3 text-sm/6 text-foreground-soft">
+    Source:{' '}
+    <a
+      data-source
+      href={source.url}
+      rel="noreferrer"
+      target="_blank"
+      class="text-foreground-muted underline decoration-border underline-offset-4 hover:text-foreground hover:decoration-foreground"
+      >{source.name}</a
+    >, checked <time data-checked datetime={source.checked}>{formatDate(source.checked)}</time>.
+  </p>
+</section>

package/site-kit/starter/src/components/FaqAccordion.astro

@@ -0,0 +1,143 @@
+---
+// One muted panel with ruled rows. Opening a row closes the others. Arrow
+// keys, Home and End move between questions. The answers are in the HTML
+// even when closed, so search engines and AI answers can read them. Pass
+// the same list to the layout's faqs prop so the FAQ markup matches.
+type FaqItem = {
+  question: string
+  answer?: string
+  values?: string[]
+}
+
+type Props = {
+  items: FaqItem[]
+  id?: string
+}
+
+const { items, id = 'faq' } = Astro.props
+---
+
+<div class="w-full overflow-hidden rounded-lg bg-muted" data-faq-accordion>
+  {
+    items.map((item, index) => (
+      <div
+        class="border-t border-border px-6 first:border-t-0"
+        data-faq-item
+        data-state="closed"
+      >
+        <h3 class="flex">
+          <button
+            id={`${id}-trigger-${index + 1}`}
+            type="button"
+            aria-controls={`${id}-content-${index + 1}`}
+            aria-expanded="false"
+            class="group flex flex-1 items-center justify-between gap-4 rounded-md border border-transparent py-5 text-left text-base font-medium text-foreground outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/20"
+            data-faq-trigger
+          >
+            <span>{item.question}</span>
+            <svg
+              class="size-3.5 shrink-0 text-foreground transition-transform duration-200 group-aria-expanded:rotate-180"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+            >
+              <path d="m6 9 6 6 6-6"></path>
+            </svg>
+          </button>
+        </h3>
+        <div
+          id={`${id}-content-${index + 1}`}
+          role="region"
+          aria-labelledby={`${id}-trigger-${index + 1}`}
+          aria-hidden="true"
+          class="faq-content grid text-sm"
+          data-faq-content
+          data-state="closed"
+        >
+          <div class="overflow-hidden">
+            <div class="pb-5 text-base leading-7 text-foreground-muted">
+              {item.answer ? <p>{item.answer}</p> : null}
+              {
+                item.values ? (
+                  <ul class="grid gap-x-4 gap-y-2 sm:grid-cols-2">
+                    {item.values.map((value) => (
+                      <li>
+                        <code class="block break-words rounded-md bg-background px-2 py-1 font-mono text-xs leading-5 text-foreground">
+                          {value}
+                        </code>
+                      </li>
+                    ))}
+                  </ul>
+                ) : null
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+    ))
+  }
+</div>
+
+<script>
+  for (const root of document.querySelectorAll('[data-faq-accordion]')) {
+    if (!(root instanceof HTMLElement) || root.dataset.faqReady === 'true') continue
+    root.dataset.faqReady = 'true'
+
+    const items = Array.from(root.querySelectorAll('[data-faq-item]')).filter(
+      (item): item is HTMLElement => item instanceof HTMLElement,
+    )
+    const triggers = items
+      .map((item) => item.querySelector('[data-faq-trigger]'))
+      .filter((trigger): trigger is HTMLButtonElement => trigger instanceof HTMLButtonElement)
+
+    const setOpen = (item: HTMLElement, open: boolean) => {
+      const trigger = item.querySelector('[data-faq-trigger]')
+      const content = item.querySelector('[data-faq-content]')
+      if (!(trigger instanceof HTMLButtonElement) || !(content instanceof HTMLElement)) return
+
+      const state = open ? 'open' : 'closed'
+      item.dataset.state = state
+      content.dataset.state = state
+      trigger.setAttribute('aria-expanded', String(open))
+      content.setAttribute('aria-hidden', String(!open))
+    }
+
+    for (const item of items) {
+      const trigger = item.querySelector('[data-faq-trigger]')
+      if (!(trigger instanceof HTMLButtonElement)) continue
+
+      trigger.addEventListener('click', (event) => {
+        event.preventDefault()
+        const shouldOpen = item.dataset.state !== 'open'
+
+        if (shouldOpen) {
+          for (const other of items) {
+            if (other === item) continue
+            setOpen(other, false)
+          }
+        }
+
+        setOpen(item, shouldOpen)
+      })
+
+      trigger.addEventListener('keydown', (event) => {
+        const currentIndex = triggers.indexOf(trigger)
+        let nextIndex = currentIndex
+
+        if (event.key === 'ArrowDown') nextIndex = (currentIndex + 1) % triggers.length
+        else if (event.key === 'ArrowUp') {
+          nextIndex = (currentIndex - 1 + triggers.length) % triggers.length
+        } else if (event.key === 'Home') nextIndex = 0
+        else if (event.key === 'End') nextIndex = triggers.length - 1
+        else return
+
+        event.preventDefault()
+        triggers[nextIndex]?.focus()
+      })
+    }
+  }
+</script>

package/site-kit/starter/src/components/Footer.astro

@@ -0,0 +1,34 @@
+---
+import { footerLinks, site } from '../site'
+import Logo from './Logo.astro'
+
+const linkClass =
+  'text-sm/6 text-foreground-muted underline-offset-4 transition-colors hover:text-foreground hover:underline'
+const year = new Date().getFullYear()
+---
+
+<footer class="mt-20 py-14">
+  <div class="site-frame flex flex-col items-center gap-8 text-center">
+    <a href="/" class="text-foreground no-underline" aria-label={`${site.name} home`}>
+      <Logo class="size-9" />
+    </a>
+
+    <nav aria-label="Footer">
+      <ul class="flex flex-wrap items-center justify-center gap-x-7 gap-y-3">
+        {
+          footerLinks.map((link) => (
+            <li>
+              <a class={linkClass} href={link.href}>
+                {link.label}
+              </a>
+            </li>
+          ))
+        }
+      </ul>
+    </nav>
+
+    <p class="max-w-md text-sm/6 text-foreground-soft">
+      &copy; {year} {site.name}. {site.footerNote}
+    </p>
+  </div>
+</footer>

package/site-kit/starter/src/components/FormInput.astro

@@ -0,0 +1,18 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+type Props = HTMLAttributes<'input'>
+
+const { class: className, ...attrs } = Astro.props
+---
+
+<input
+  class:list={[
+    'flex h-10 w-full min-w-0 rounded-lg border border-input bg-card px-3 py-1 text-base text-foreground outline-none transition-[color,box-shadow,background-color] placeholder:text-foreground-soft md:text-sm',
+    'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/20',
+    'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+    'aria-invalid:border-destructive aria-invalid:ring-destructive/20',
+    className,
+  ]}
+  {...attrs}
+/>

package/site-kit/starter/src/components/FormSelect.astro

@@ -0,0 +1,34 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+type Props = HTMLAttributes<'select'>
+
+const { class: className, ...attrs } = Astro.props
+---
+
+<div class="group/select relative w-full has-[select:disabled]:opacity-50">
+  <select
+    class:list={[
+      'h-10 w-full min-w-0 appearance-none rounded-lg border border-input bg-card py-2 pl-3 pr-9 text-sm text-foreground outline-none transition-[color,box-shadow]',
+      'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/20',
+      'disabled:pointer-events-none disabled:cursor-not-allowed',
+      className,
+    ]}
+    {...attrs}
+  >
+    <slot />
+  </select>
+  <svg
+    class="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-foreground-muted opacity-60"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <path d="m6 9 6 6 6-6"></path>
+  </svg>
+</div>

package/site-kit/starter/src/components/Header.astro

@@ -0,0 +1,17 @@
+---
+import { nav, site } from '../site'
+import Logo from './Logo.astro'
+
+const navClass =
+  'text-sm text-foreground-muted underline-offset-4 hover:text-foreground hover:underline'
+---
+
+<header class="site-frame flex items-center justify-between gap-4 py-4 sm:gap-6">
+  <a href="/" class="flex items-center gap-2 text-foreground no-underline">
+    <Logo class="size-7" />
+    <span class="text-base font-medium">{site.name}</span>
+  </a>
+  <nav class="flex items-center gap-3.5 sm:gap-5" aria-label="Main navigation">
+    {nav.map((link) => <a class={navClass} href={link.href}>{link.label}</a>)}
+  </nav>
+</header>

package/site-kit/starter/src/components/HugeIcon.astro

@@ -0,0 +1,36 @@
+---
+// Hugeicons drawn as static SVG at a stroke width of 1.7. Pass an icon
+// from @hugeicons/core-free-icons. The SVG is in the HTML, so no icon
+// script or font loads.
+type IconElement = readonly [string, { readonly [key: string]: string | number }]
+
+type Props = {
+  icon: readonly IconElement[]
+  class?: string
+  [attribute: `data-${string}`]: string | boolean | undefined
+}
+
+const { icon, class: className, ...attributes } = Astro.props
+
+// The data uses React prop names (strokeWidth); SVG wants stroke-width.
+const toAttributes = (attrs: { readonly [key: string]: string | number }) =>
+  Object.fromEntries(
+    Object.entries(attrs)
+      .filter(([name]) => name !== 'key')
+      .map(([name, value]) => [
+        name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`),
+        name === 'strokeWidth' ? 1.7 : value,
+      ]),
+  )
+---
+
+<svg
+  {...attributes}
+  class={className}
+  viewBox="0 0 24 24"
+  fill="none"
+  aria-hidden="true"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  {icon.map(([Tag, attrs]) => <Tag {...toAttributes(attrs)} />)}
+</svg>

package/site-kit/starter/src/components/Logo.astro

@@ -0,0 +1,21 @@
+---
+// The site mark, drawn in one colour from currentColor, so it is dark in
+// light mode and light in dark mode. Replace the path with the site's own
+// mark, and the same path in public/favicon.svg and src/lib/og/card.ts.
+type Props = { class?: string; title?: string }
+
+const { class: className = 'size-8', title } = Astro.props
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 32 32"
+  fill="currentColor"
+  class={className}
+  role={title ? 'img' : undefined}
+  aria-label={title}
+  aria-hidden={title ? undefined : 'true'}
+>
+  {title ? <title>{title}</title> : null}
+  <path d="M16 3c-4 5-7 9-7 13a7 7 0 0 0 6 6.9V29h2v-6.1A7 7 0 0 0 23 16c0-4-3-8-7-13z"></path>
+</svg>

package/site-kit/starter/src/components/PageHeader.astro

@@ -0,0 +1,33 @@
+---
+type Props = {
+  title: string
+  description?: string
+  bordered?: boolean
+  class?: string
+}
+
+const { title, description, bordered = false, class: className } = Astro.props
+const hasActions = Astro.slots.has('actions')
+---
+
+<header
+  class:list={[
+    'mb-10 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between',
+    bordered && 'border-b border-border pb-6',
+    className,
+  ]}
+>
+  <div class="flex max-w-2xl flex-col gap-3">
+    <h1 class="text-pretty text-2xl font-medium tracking-normal text-foreground xl:text-3xl">
+      {title}
+    </h1>
+    {
+      description ? (
+        <p class="text-pretty text-lg/7 font-medium tracking-normal text-foreground-muted xl:text-xl/8">
+          {description}
+        </p>
+      ) : null
+    }
+  </div>
+  {hasActions ? <div class="flex shrink-0 items-center gap-3"><slot name="actions" /></div> : null}
+</header>

package/site-kit/starter/src/components/SectionHeading.astro

@@ -0,0 +1,18 @@
+---
+type Props = {
+  title: string
+  text: string
+  id?: string
+}
+
+const { title, text, id } = Astro.props
+---
+
+<div class="mb-10 flex max-w-2xl flex-col gap-3">
+  <h2 id={id} class="text-pretty text-2xl font-medium -tracking-[0.4px] text-foreground xl:text-3xl xl:-tracking-[0.6px]">
+    {title}
+  </h2>
+  <p class="text-pretty text-xl/7 font-medium -tracking-[0.15px] text-foreground-muted xl:text-2xl/8 xl:-tracking-[0.3px]">
+    {text}
+  </p>
+</div>