@getvitops/astro 8.2.0-alpha.0 → 8.3.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getvitops/astro",
-  "version": "8.2.0-alpha.0",
+  "version": "8.3.0-alpha.0",
   "description": "Astro integration for the Vitops design system — favicons/PWA, web-component scripts, and CSS, via a getvitops() integration + <Head /> component.",
   "homepage": "https://docs.vitops.ca",
   "bugs": "https://github.com/getvitops/design-system/issues",
@@ -13,6 +13,7 @@
   "files": [
     "dist",
     "src/components/Head.astro",
+    "src/inline-scripts.ts",
     "src/components/Seo.astro",
     "src/seo.ts",
     "src/components/Analytics.astro",
@@ -27,6 +28,7 @@
     "src/components/Gallery.astro",
     "src/components/ResponsiveImage.astro",
     "src/components/Counter.astro",
+    "src/components/Entries.astro",
     "src/components/NodeRenderer.astro",
     "src/components/WebComponentLoader.astro",
     "src/components/Icon.astro",
@@ -35,7 +37,12 @@
     "src/components/Drawer.astro",
     "src/components/NavShell.astro",
     "src/components/NavShellToggle.astro",
+    "src/components/SiteNav.astro",
+    "src/components/SiteNavList.astro",
+    "src/components/SiteFooter.astro",
+    "src/components/sitenav.ts",
     "src/schemas",
+    "src/json-ld.ts",
     "virtual.d.ts",
     "CHANGELOG.md",
     "src/components/Tracking.astro",
@@ -79,6 +86,7 @@
     "./components/Carousel.astro": "./src/components/Carousel.astro",
     "./components/Gallery.astro": "./src/components/Gallery.astro",
     "./components/Counter.astro": "./src/components/Counter.astro",
+    "./components/Entries.astro": "./src/components/Entries.astro",
     "./components/NodeRenderer.astro": "./src/components/NodeRenderer.astro",
     "./components/WebComponentLoader.astro": "./src/components/WebComponentLoader.astro",
     "./components/Icon.astro": "./src/components/Icon.astro",
@@ -87,6 +95,9 @@
     "./components/Drawer.astro": "./src/components/Drawer.astro",
     "./components/NavShell.astro": "./src/components/NavShell.astro",
     "./components/NavShellToggle.astro": "./src/components/NavShellToggle.astro",
+    "./components/SiteNav.astro": "./src/components/SiteNav.astro",
+    "./components/SiteFooter.astro": "./src/components/SiteFooter.astro",
+    "./components/sitenav.ts": "./src/components/sitenav.ts",
     "./components/Tree.astro": "./src/components/Tree.astro",
     "./components/tree.ts": "./src/components/tree.ts",
     "./components/ReviewCard.astro": "./src/components/ReviewCard.astro",
@@ -98,15 +109,16 @@
     "access": "public"
   },
   "dependencies": {
-    "@getvitops/core": "8.2.0-alpha.0",
-    "@getvitops/generator": "8.2.0-alpha.0",
-    "@getvitops/utils": "8.2.0-alpha.0",
-    "@getvitops/vite": "8.2.0-alpha.0"
+    "@getvitops/config": "8.3.0-alpha.0",
+    "@getvitops/core": "8.3.0-alpha.0",
+    "@getvitops/generator": "8.3.0-alpha.0",
+    "@getvitops/utils": "8.3.0-alpha.0",
+    "@getvitops/vite": "8.3.0-alpha.0"
   },
   "devDependencies": {
     "@astrojs/sitemap": "^3.7.3",
     "@tailwindcss/vite": "^4.3.3",
-    "astro": "^7.1.2",
+    "astro": "^7.4.4",
     "tailwindcss": "^4.3.3"
   },
   "peerDependencies": {

package/src/ads.ts

@@ -32,32 +32,25 @@ import {
   type AdProvider,
   type ConversionLabelMap,
 } from '@getvitops/utils/ads';
+import type { AdPropertyConfig } from '@getvitops/config';
 import type { AnalyticsStrategy, ConsentCategory, GatedTag } from './analytics.ts';
 
 /**
- * One ad property, mirroring a `site.ads` entry field for field.
- *
- * Structural rather than `SiteAdProperty` imported from the generator, matching
- * how `GetvitopsSeoOptions` and `GetvitopsTrackingOptions` already work: the
- * component surface must stay usable by a consumer who passes a plain object.
+ * One ad property, as `<Ads />` reads it: the fields of a `site.ads` entry that decide what is
+ * emitted. A subset of `AdPropertyConfig` from `@getvitops/config` — the schema's own inferred
+ * type, not a copy — so a plain object is still enough for a consumer to pass, and a field the
+ * schema renames fails here instead of silently reading `undefined`.
  */
-export interface GetvitopsAdProperty {
-  accountId?: string;
-  pixelId?: string;
-  /**
-   * Google Ads only: the conversion action label(s) paired with `pixelId` (the
-   * `AW-…` conversion id) — a bare string (back-compat, treated as `call`) or a
-   * map of action → label. `<Tracking />`'s tel:/mailto: click handler and
-   * `vitopsFormConversion()` each fire `gtag('event', 'conversion', …)` for
-   * their own action at the moment of the interaction — see `gtagBootstrap` in
-   * `@getvitops/utils/ads`.
-   */
-  conversionLabel?: string | ConversionLabelMap;
-  /** Default `marketing`. `analytics` for a property used purely for measurement. */
-  category?: 'marketing' | 'analytics';
-  /** False keeps the property on record without emitting its tag. */
-  enabled?: boolean;
-}
+export type GetvitopsAdProperty = Pick<
+  AdPropertyConfig,
+  | 'accountId'
+  | 'pixelId'
+  | 'conversionLabel'
+  | 'conversionActionId'
+  | 'reporting'
+  | 'category'
+  | 'enabled'
+>;
 
 export type GetvitopsAdsOptions = Partial<Record<AdProvider, GetvitopsAdProperty>>;
 

package/src/components/CookieConsent.astro

@@ -28,6 +28,7 @@
  * `<Analytics />`.
  */
 // @ts-ignore — virtual module provided by the vitops() integration at build time
+import { safeHref } from '@getvitops/utils/url';
 import head from 'virtual:getvitops/head';
 import type { OptionalConsentCategory } from '../analytics.ts';
 
@@ -87,7 +88,7 @@ const wording = { ...DEFAULT_LABELS, ...labels };
           losing any functionality.
         </p>
       </slot>
-      {policyUrl && <a class="link" href={policyUrl}>{policyLabel}</a>}
+      {safeHref(policyUrl) && <a class="link" href={safeHref(policyUrl)}>{policyLabel}</a>}
     </div>
 
     {/*

package/src/components/Entries.astro

@@ -0,0 +1,58 @@
+---
+/**
+ * Entries — rows of term/value pairs that read as a stacked list and, with JS on a wide
+ * container, become a table (specs, opening hours, plan comparisons).
+ *
+ * Tier-3 like `Counter.astro` and `Gallery.astro`: the markup is semantic with no JS — a
+ * heading followed by a `<dl>` of `<dt>`/`<dd>` pairs per entry — and `<wc-entries>` only
+ * parses that fallback into a table above its `breakpoint`.
+ *
+ * **This component emits its own `<wc-entries>`** — do NOT wrap it in one. Same rule as
+ * `Cards.astro` and `Carousel.astro`.
+ *
+ *   <Entries entries={[{ heading: 'Alice', pairs: [{ term: 'Email', value: 'a@x.ca' }] }]} />
+ *
+ * Every entry should carry the SAME terms in the same order: the table's columns are the
+ * terms of the first entry, so a differing set misaligns rather than errors.
+ */
+import type { HTMLAttributes } from 'astro/types';
+
+export interface EntriesRow {
+  /** The row's name — its heading, and the table's row header. */
+  heading: string;
+  pairs: { term: string; value: string }[];
+}
+
+export interface Props extends Omit<HTMLAttributes<'div'>, 'slot'> {
+  entries: EntriesRow[];
+  /** Container width at which the stacked list becomes a table, e.g. `"40rem"`. */
+  breakpoint?: string;
+  /** Keep the table at every width, scrolling sideways when narrow. */
+  projection?: boolean;
+  /** With `projection` and a narrow container, show one data column at a time. */
+  singular?: boolean;
+  /** Heading element for each entry (`<wc-entries>` accepts h1–h6). Default `h3`. */
+  level?: 2 | 3 | 4 | 5 | 6;
+}
+
+const { entries, breakpoint, projection, singular, level = 3, ...rest } = Astro.props;
+const Heading = `h${level}` as 'h3';
+---
+
+<wc-entries breakpoint={breakpoint} projection={projection} singular={singular} {...rest}>
+  {
+    entries.map((entry) => (
+      <>
+        <Heading>{entry.heading}</Heading>
+        <dl>
+          {entry.pairs.map((pair) => (
+            <>
+              <dt>{pair.term}</dt>
+              <dd>{pair.value}</dd>
+            </>
+          ))}
+        </dl>
+      </>
+    ))
+  }
+</wc-entries>

package/src/components/Head.astro

@@ -13,6 +13,7 @@
 import head from 'virtual:getvitops/head';
 // @ts-ignore — `Font` is provided by Astro's Fonts API (astro >= 7)
 import { Font } from 'astro:assets';
+import { CONSENT_STUB, THEME_SCRIPT } from '../inline-scripts.ts';
 
 interface Props {
   favicons?: boolean;
@@ -29,44 +30,12 @@ const {
 } = Astro.props;
 const wc = head.wcBase;
 
-/**
- * Applies the remembered colour scheme before first paint.
- *
- * The key MUST match `WCColorSchemeToggle.STORAGE_KEY` in @getvitops/core;
- * `head.test.ts` asserts they stay in step. try/catch because localStorage
- * throws in private/partitioned contexts.
- */
-const THEME_SCRIPT =
-  `try{var s=localStorage.getItem('vitops-color-scheme');` +
-  `if(s==='light'||s==='dark'){document.documentElement.dataset.theme=s;` +
-  `document.documentElement.style.colorScheme=s+' only'}}catch(e){}`;
-
-/**
- * The consent gate's build-time signal: "something on this page may need
- * permission, and the real gate hasn't loaded yet."
- *
- * `consent.js` and `elements.js` are both deferred modules with no ordering
- * guarantee between them, so `<wc-color-scheme-toggle>` can upgrade and be clicked
- * before the gate exists. Without this, a caller probing for
- * `window.vitopsConsent` in that window would see nothing, correctly conclude
- * that sites without the gate should just store — and store. The stub closes the
- * window by making the gate's *existence* known synchronously in `<head>`, which
- * is the only place that beats every deferred bundle.
- *
- * It answers `false` to everything, because nothing is granted until the store
- * has been read, and queues what it was asked so `consent/runtime.ts` can replay
- * it on evaluation. `q` entries are `[category]` for `require()` and
- * `[category, resolve]` for `request()`. Same shape as the `dataLayer`/`gtag`
- * stub in `analytics.ts` and for the same reason.
- *
- * Emitted only when the gate is on: its absence is what tells a caller the site
- * has no gate at all.
+/*
+ * The two inline scripts below (THEME_SCRIPT, CONSENT_STUB) are defined in
+ * `../inline-scripts.ts`, with the reasoning for each. They are imported rather
+ * than written here so `csp.ts` hashes the very same constants this emits — a
+ * strict Content-Security-Policy names inline scripts by hash of their bytes.
  */
-const CONSENT_STUB =
-  `window.vitopsConsent=window.vitopsConsent||{q:[],` +
-  `require:function(c){this.q.push([c]);return false},` +
-  `request:function(c){var s=this;return new Promise(function(r){s.q.push([c,r])})},` +
-  `granted:function(){return false},needed:function(){return false}};`;
 
 /*
  * No `<html>` class flips here on purpose. `animation.css` used to need `no-js`

package/src/components/ReviewCardBody.astro

@@ -7,6 +7,7 @@
  */
 import type { HTMLAttributes } from 'astro/types';
 import type { Review } from '@getvitops/utils/reviews';
+import { safeHref } from '@getvitops/utils/url';
 import Icon from './Icon.astro';
 
 export interface Props extends Omit<HTMLAttributes<'article'>, 'slot'> {
@@ -23,6 +24,9 @@ const initials = review.author
   .map((w) => w[0]?.toUpperCase())
   .join('');
 
+// Google-hosted and fetched from outside the repo, so never trusted as a URL.
+const authorPhoto = safeHref(review.authorPhoto);
+const sourceUrl = safeHref(review.url);
 const full = Math.floor(review.rating);
 const hasHalf = review.rating - full >= 0.5;
 ---
@@ -30,8 +34,8 @@ const hasHalf = review.rating - full >= 0.5;
 <article class:list={['review', className]} {...rest}>
   <header class="review__header">
     {
-      avatar && review.authorPhoto ? (
-        <img class="review__avatar" src={review.authorPhoto} alt="" loading="lazy" />
+      avatar && authorPhoto ? (
+        <img class="review__avatar" src={authorPhoto} alt="" loading="lazy" />
       ) : (
         <span class="review__initials" aria-hidden="true">{initials}</span>
       )
@@ -56,6 +60,16 @@ const hasHalf = review.rating - full >= 0.5;
     </span>
   </header>
   {review.text && <blockquote class="review__body">{review.text}</blockquote>}
+  {
+    sourceUrl && (
+      // `nofollow`: the link is to a third party's page about the business itself, and
+      // Google's guidance for duplicated review content is to not pass it endorsement.
+      <a class="review__source link" href={sourceUrl} rel="nofollow noopener noreferrer">
+        View on Google
+        <span class="sr-only"> (review by {review.author})</span>
+      </a>
+    )
+  }
   {
     review.reply && (
       <footer class="review__reply">

package/src/components/SiteFooter.astro

@@ -0,0 +1,79 @@
+---
+/**
+ * SiteFooter — a `contentinfo` landmark with a site map, legal links and a copyright
+ * line. Markup + classes only; styles are `patterns/sitenav.css`'s `.sitefooter*`.
+ *
+ *   const sitemap = await getMenu('footer-sitemap');
+ *   const legal = await getMenu('footer-legal');
+ *   <SiteFooter {sitemap} {legal} name={siteTitle} />
+ *
+ * Both menus are optional and each renders only if it has items, so a one-page site
+ * gets just the copyright line. Menus are FLAT here (depth 1): a footer that nests is
+ * a site map, and wants a page, not a column. `name` is `organization.name`.
+ *
+ * The two `<nav>`s are named ("Site map", "Legal") so the landmark list is not a pile
+ * of unlabeled regions, and the copyright is plain text — never a link.
+ */
+import { isCurrent, linkRel, menuItems, type NavMenuInput } from './sitenav.ts';
+
+interface Props {
+  /** `footer-sitemap` menu. */
+  sitemap?: NavMenuInput;
+  /** `footer-legal` menu. */
+  legal?: NavMenuInput;
+  /** Company/site name for the copyright line (`organization.name`). */
+  name: string;
+  /** Override the year (tests, or a "since" range string). Default: build year. */
+  year?: number | string;
+  /** Accessible names. */
+  sitemapLabel?: string;
+  legalLabel?: string;
+  current?: string;
+  class?: string;
+}
+
+const {
+  sitemap,
+  legal,
+  name,
+  year = new Date().getFullYear(),
+  sitemapLabel = 'Site map',
+  legalLabel = 'Legal',
+  current = Astro.url.pathname,
+  class: className,
+} = Astro.props;
+
+const groups = [
+  { label: sitemapLabel, items: menuItems(sitemap), kind: 'sitemap' },
+  { label: legalLabel, items: menuItems(legal), kind: 'legal' },
+].filter((g) => g.items.length > 0);
+---
+
+<footer class:list={['sitefooter', className]}>
+  {
+    groups.length > 0 && (
+      <div class="sitefooter__nav">
+        {groups.map((g) => (
+          <nav class={`sitefooter__group sitefooter__group--${g.kind}`} aria-label={g.label}>
+            <ul class="sitefooter__list" role="list">
+              {g.items.map((item) => (
+                <li>
+                  <a
+                    class="sitefooter__link"
+                    href={item.url || '#'}
+                    target={item.target || undefined}
+                    rel={linkRel(item)}
+                    aria-current={isCurrent(item.url, current) ? 'page' : undefined}
+                  >
+                    {item.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        ))}
+      </div>
+    )
+  }
+  <p class="sitefooter__copy">&copy; {year} {name}</p>
+</footer>

package/src/components/SiteNav.astro

@@ -0,0 +1,163 @@
+---
+/**
+ * SiteNav — the site header's navigation, from EmDash menus (or any menu data of the
+ * same shape). Markup + classes only, no runtime JS: the hamburger is a Popover API
+ * invoker for a `[popover]` drawer, branches are native `<details>` accordions in the
+ * drawer and hover/focus/click dropdowns at width. Every declaration lives in the
+ * framework's `sitenav` pattern (patterns/sitenav.css), emitted in all three formats.
+ * No `wc-*` element is involved, so there is no `display` to declare.
+ *
+ *   import { loadNavMenus } from '@getvitops/astro/components/sitenav.ts';
+ *   const nav = await loadNavMenus(getMenu);
+ *   <SiteNav {...nav} />
+ *
+ * ── TIERS ──
+ * ONE menu is the default and is enough: `primary`, depth 3, a dropdown from the `md`
+ * container width (48rem) and a drawer below it. Two optional variants are each their
+ * own EmDash menu; `<SiteNav>` renders whichever exist, with no code change:
+ *
+ *   `primary-mobile`  Add it to give small screens a simpler nav (depth 1, the few links
+ *                     a thumb wants). It shows BELOW `mobileBreakpoint` (default `md`);
+ *                     `primary` takes over from there.
+ *   `primary-mega`    Add it for a mega menu on wide screens (full-width panels, depth 3).
+ *                     It shows from `megaBreakpoint` (default `xl`, 80rem); `primary`
+ *                     covers the widths below.
+ *
+ * Breakpoints are container widths (sm/md/lg/xl = 30/48/64/80rem), matched to the
+ * `.sitenav--bp-*` classes, so they follow the same `body` container every other
+ * responsive utility does. Only one tier is ever in the accessibility tree: the others
+ * are `display: none`, so a screen-reader user never meets two "Primary" landmarks.
+ *
+ * ── DESCRIPTIONS ──
+ * EmDash menu items have no description field. Convention until they do (an upstream
+ * request): an item's **`titleAttr` is its description**, rendered as muted second-line
+ * text under the link. It is NOT emitted as a `title` tooltip. `cssClasses` pass through
+ * on the link.
+ *
+ * Accessibility: `<nav aria-label>` landmark, `aria-current="page"` on the current
+ * item, the link is never inside `<summary>` (no nested interactive controls), caret
+ * buttons are named, `:focus-visible` rings and forced-colors / reduced-motion handling
+ * are in the pattern.
+ */
+import {
+  drawerId,
+  navClass,
+  selectTiers,
+  tierClass,
+  type NavBreakpoint,
+  type NavMenuInput,
+} from './sitenav.ts';
+import SiteNavList from './SiteNavList.astro';
+
+interface Props {
+  /** `primary` menu (the default, medium tier). */
+  primary?: NavMenuInput;
+  /** `primary-mobile` menu. Optional variant. */
+  mobile?: NavMenuInput;
+  /** `primary-mega` menu. Optional variant. */
+  mega?: NavMenuInput;
+  /** Accessible name of the `<nav>`. Default "Primary". */
+  label?: string;
+  /** Hamburger button name. Default "Menu". */
+  toggleLabel?: string;
+  /** Where the default nav promotes from drawer to dropdowns. Default `md`. */
+  breakpoint?: NavBreakpoint;
+  /** Where `primary-mobile` hands over to `primary`. Default = `breakpoint`. */
+  mobileBreakpoint?: NavBreakpoint;
+  /** Where `primary-mega` takes over. Default `xl`. */
+  megaBreakpoint?: NavBreakpoint;
+  /** Levels in the default nav. Default 3. */
+  depth?: number;
+  /** Override the current path (for `aria-current`). Default: the request path. */
+  current?: string;
+  /** Id prefix for the drawer popovers. Required only if two SiteNavs share a page. */
+  id?: string;
+  class?: string;
+}
+
+const {
+  primary,
+  mobile,
+  mega,
+  label = 'Primary',
+  toggleLabel = 'Menu',
+  breakpoint,
+  mobileBreakpoint,
+  megaBreakpoint,
+  depth,
+  current = Astro.url.pathname,
+  id = 'sitenav',
+  class: className,
+} = Astro.props;
+
+const tiers = selectTiers({
+  primary,
+  mobile,
+  mega,
+  breakpoint,
+  mobileBreakpoint,
+  megaBreakpoint,
+  depth,
+});
+---
+
+{
+  tiers.map((tier) => {
+    const panel = drawerId(id, tier);
+    return (
+      <div class:list={[...tierClass(tier), className]}>
+        <nav class:list={navClass(tier)} aria-label={label}>
+          <button
+            type="button"
+            class="sitenav__toggle"
+            popovertarget={panel}
+            aria-label={toggleLabel}
+          >
+            <svg
+              class="sitenav__toggle-icon"
+              viewBox="0 0 24 24"
+              width="24"
+              height="24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              aria-hidden="true"
+              focusable="false"
+            >
+              <line x1="3" y1="6" x2="21" y2="6" />
+              <line x1="3" y1="12" x2="21" y2="12" />
+              <line x1="3" y1="18" x2="21" y2="18" />
+            </svg>
+          </button>
+          <div id={panel} popover class="sitenav__panel">
+            <button
+              type="button"
+              class="sitenav__close"
+              popovertarget={panel}
+              popovertargetaction="hide"
+              aria-label="Close menu"
+            >
+              <svg
+                class="sitenav__close-icon"
+                viewBox="0 0 24 24"
+                width="24"
+                height="24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                aria-hidden="true"
+                focusable="false"
+              >
+                <line x1="6" y1="6" x2="18" y2="18" />
+                <line x1="18" y1="6" x2="6" y2="18" />
+              </svg>
+            </button>
+            <SiteNavList items={tier.items} current={current} />
+          </div>
+        </nav>
+      </div>
+    );
+  })
+}

package/src/components/SiteNavList.astro

@@ -0,0 +1,73 @@
+---
+/**
+ * One `<ul>` level of a `<SiteNav>`, recursing for sub-menus. Internal — import
+ * `SiteNav.astro`. Markup is `bricks/elements/sitenav.php`'s, deliberately identical,
+ * so `patterns/sitenav.css` styles both and a fix to one reaches the other:
+ *
+ *   <li class="sitenav__item sitenav__item--branch">
+ *     <a class="sitenav__link split-link__link">…</a>      ← the link is NOT in the summary
+ *     <details class="sitenav__disclosure"><summary>caret</summary></details>
+ *     <ul class="sitenav__submenu">…</ul>                  ← sibling, driven by :has([open])
+ *   </li>
+ *
+ * The `<details>` is never pre-opened for the current branch: at width the same native
+ * `[open]` PINS the dropdown visible, so an open-by-default branch would hang a menu
+ * over the page on every load. The current item is marked with `aria-current` instead.
+ */
+import { isCurrent, itemDescription, linkRel, type NavItem } from './sitenav.ts';
+
+interface Props {
+  items: NavItem[];
+  current: string;
+  top?: boolean;
+}
+
+const { items, current, top = true } = Astro.props;
+---
+
+<ul class={top ? 'sitenav__list' : 'sitenav__submenu'} role="list">
+  {
+    items.map((item) => {
+      const kids = item.children ?? [];
+      const desc = itemDescription(item);
+      const classes = [
+        'sitenav__link',
+        'split-link__link',
+        desc && 'sitenav__link--described',
+        item.cssClasses,
+      ]
+        .filter(Boolean)
+        .join(' ');
+      const link = (
+        <a
+          class={classes}
+          href={item.url || '#'}
+          target={item.target || undefined}
+          rel={linkRel(item)}
+          aria-current={isCurrent(item.url, current) ? 'page' : undefined}
+        >
+          <span class="sitenav__label">{item.label}</span>
+          {desc && <span class="sitenav__desc">{desc}</span>}
+        </a>
+      );
+      return kids.length > 0 ? (
+        <li class="sitenav__item sitenav__item--branch">
+          {link}
+          <details class="sitenav__disclosure">
+            <summary
+              class="sitenav__subtoggle split-link__toggle"
+              aria-label={`Show ${item.label} submenu`}
+            >
+              <span class="split-link__caret" aria-hidden="true">
+                &#9662;
+              </span>
+            </summary>
+          </details>
+          <Astro.self items={kids} current={current} top={false} />
+        </li>
+      ) : (
+        <li class="sitenav__item">{link}</li>
+      );
+    })
+  }
+</ul>