@astronox/core 0.1.0

package/src/components/navigation/SubNavigation/SubNavigation.css

@@ -0,0 +1,211 @@
+.sub-navigation {
+  --surface-border-width: var(--nox-border-width);
+  --surface-border-color: var(--nox-border);
+  --surface-radius: var(--nox-radius-md);
+  --surface-background: color-mix(in srgb, var(--nox-surface) 58%, transparent);
+  --sub-navigation-border-color: var(--surface-border-color);
+  --sub-navigation-size: var(--nox-section-block-size);
+  --sub-navigation-track-size: calc(
+    var(--sub-navigation-size) + var(--surface-border-width)
+  );
+
+  container-type: inline-size;
+  min-width: 0;
+  overflow-x: clip;
+  overflow-y: hidden;
+  border: var(--surface-border-width) solid var(--sub-navigation-border-color);
+  border-block-end-width: 0;
+  border-radius: var(--surface-radius);
+  background: var(--surface-background);
+  box-shadow: inset 0 calc(var(--surface-border-width) * -1) 0
+    var(--sub-navigation-border-color);
+}
+
+.sub-navigation__list {
+  display: grid;
+  grid-auto-columns: minmax(0, 1fr);
+  grid-auto-flow: column;
+  inline-size: 100%;
+  min-width: 0;
+  min-block-size: var(--sub-navigation-track-size);
+  margin: 0;
+  padding: 0;
+  gap: 0;
+  list-style: none;
+}
+
+.sub-navigation__item {
+  position: relative;
+  display: flex;
+  min-width: 0;
+}
+
+.sub-navigation__item + .sub-navigation__item::before {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  inline-size: var(--surface-border-width);
+  background: var(--sub-navigation-border-color);
+  content: '';
+  pointer-events: none;
+  z-index: 1;
+}
+
+.sub-navigation__link {
+  position: relative;
+  display: inline-grid;
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-width: 0;
+  min-block-size: var(--sub-navigation-track-size);
+  place-items: center;
+  padding: var(--nox-space-2) var(--nox-space-3);
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--nox-text-muted);
+  font-weight: var(--nox-font-weight-strong);
+  line-height: 1;
+  text-align: center;
+  text-decoration: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.sub-navigation__link::after {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  height: 3px;
+  border-radius: 0;
+  background: var(--nox-tone-text);
+  content: '';
+  opacity: 0;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.sub-navigation__link[data-active] {
+  background: var(--nox-tone-background);
+  color: var(--nox-tone-text);
+}
+
+.sub-navigation__link[data-active]::after {
+  opacity: 1;
+}
+
+.sub-navigation__link[aria-disabled='true'] {
+  color: var(--nox-text-disabled);
+  cursor: not-allowed;
+}
+
+.sub-navigation__link[data-has-visual] {
+  grid-template-rows: auto auto;
+  align-content: start;
+  row-gap: calc(var(--nox-space-1) / 2);
+  block-size: var(--sub-navigation-track-size);
+  padding: 0;
+}
+
+.sub-navigation__visual {
+  display: inline-grid;
+  grid-row: 1;
+  inline-size: 2.5rem;
+  block-size: 2.5rem;
+  place-items: center;
+  color: currentColor;
+}
+
+.sub-navigation__visual--media {
+  inline-size: 2.5rem;
+  block-size: 2.5rem;
+}
+
+.sub-navigation__visual svg {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.sub-navigation__image {
+  --media-object-inline-size: auto;
+  --media-object-block-size: auto;
+  --media-object-max-inline-size: 100%;
+  --media-object-max-block-size: 100%;
+
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.sub-navigation__label {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.sub-navigation__label--with-visual {
+  max-inline-size: 100%;
+  overflow: hidden;
+  padding-inline: var(--nox-space-1);
+  font-size: var(--nox-font-size-xs);
+  line-height: 1;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.sub-navigation__link:focus-visible {
+  outline: var(--nox-focus-ring-width) solid var(--nox-tone-focus-ring);
+  outline-offset: calc(var(--nox-focus-ring-width) * -1);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .sub-navigation__link[href]:hover {
+    background: var(--nox-surface-muted);
+    color: var(--nox-tone-text);
+  }
+
+  .sub-navigation__link[href]:hover::after {
+    opacity: 0.55;
+  }
+
+  .sub-navigation__link[href][data-active]:hover::after {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .sub-navigation__link,
+  .sub-navigation__link::after {
+    transition:
+      background-color var(--nox-motion-duration-sm)
+        var(--nox-motion-easing-standard),
+      color var(--nox-motion-duration-sm) var(--nox-motion-easing-standard),
+      opacity var(--nox-motion-duration-sm) var(--nox-motion-easing-standard);
+  }
+}
+
+@container (width < 32rem) {
+  .sub-navigation__list {
+    --sub-navigation-size: var(--nox-section-compact-block-size);
+  }
+
+  .sub-navigation__link[data-has-visual] {
+    grid-template-rows: minmax(0, 1fr) 3px;
+    align-content: stretch;
+    row-gap: 0;
+  }
+
+  .sub-navigation__visual--media {
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  .sub-navigation__label--with-visual {
+    position: absolute;
+    overflow: hidden;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+  }
+}

package/src/components/navigation/mobileNavigationController.ts

@@ -0,0 +1,122 @@
+const desktopMediaQuery = '(min-width: 72rem)';
+const openAttribute = 'data-mobile-navigation-open';
+const initializedAttribute = 'data-mobile-navigation-initialized';
+const noop = (): void => undefined;
+
+export function initMobileNavigation(root: HTMLElement): () => void {
+  if (root.getAttribute(initializedAttribute) === 'true') {
+    return noop;
+  }
+
+  const trigger = root.querySelector<HTMLElement>(
+    '[data-mobile-navigation-trigger]',
+  );
+  const panel = root.querySelector<HTMLElement>(
+    '[data-mobile-navigation-panel]',
+  );
+
+  if (!trigger || !panel) {
+    return noop;
+  }
+
+  root.setAttribute(initializedAttribute, 'true');
+
+  const desktopMedia = window.matchMedia(desktopMediaQuery);
+  const openLabel = trigger.dataset.mobileNavigationOpenLabel ?? '';
+  const closeLabel = trigger.dataset.mobileNavigationCloseLabel || openLabel;
+  let isOpen = !panel.hidden;
+
+  const setOpen = (nextOpen: boolean, restoreFocus = false): void => {
+    isOpen = nextOpen && !desktopMedia.matches;
+    trigger.setAttribute('aria-expanded', String(isOpen));
+    trigger.setAttribute('aria-label', isOpen ? closeLabel : openLabel);
+    panel.hidden = !isOpen;
+    root.toggleAttribute(openAttribute, isOpen);
+    document.documentElement.toggleAttribute(openAttribute, isOpen);
+
+    if (restoreFocus) {
+      trigger.focus();
+    }
+  };
+
+  const open = (): void => {
+    if (isOpen || desktopMedia.matches) {
+      return;
+    }
+
+    setOpen(true);
+  };
+
+  const close = (restoreFocus = true): void => {
+    if (!isOpen) {
+      return;
+    }
+
+    setOpen(false, restoreFocus);
+  };
+
+  const toggle = (): void => {
+    if (isOpen) {
+      close(true);
+      return;
+    }
+
+    open();
+  };
+
+  const handleTriggerClick = (): void => {
+    toggle();
+  };
+
+  const handleDocumentKeydown = (event: KeyboardEvent): void => {
+    if (event.key === 'Escape') {
+      close(true);
+    }
+  };
+
+  const handleDocumentClick = (event: MouseEvent): void => {
+    const target = event.target;
+
+    if (isOpen && target instanceof Node && !root.contains(target)) {
+      close(false);
+    }
+  };
+
+  const handlePanelClick = (event: MouseEvent): void => {
+    const target = event.target;
+
+    if (!(target instanceof Element)) {
+      return;
+    }
+
+    const link = target.closest('a[href]');
+
+    if (link && panel.contains(link)) {
+      close(true);
+    }
+  };
+
+  const handleDesktopMediaChange = (): void => {
+    if (desktopMedia.matches) {
+      close(false);
+    }
+  };
+
+  setOpen(isOpen);
+
+  trigger.addEventListener('click', handleTriggerClick);
+  panel.addEventListener('click', handlePanelClick);
+  document.addEventListener('click', handleDocumentClick);
+  document.addEventListener('keydown', handleDocumentKeydown);
+  desktopMedia.addEventListener('change', handleDesktopMediaChange);
+
+  return () => {
+    setOpen(false);
+    trigger.removeEventListener('click', handleTriggerClick);
+    panel.removeEventListener('click', handlePanelClick);
+    document.removeEventListener('click', handleDocumentClick);
+    document.removeEventListener('keydown', handleDocumentKeydown);
+    desktopMedia.removeEventListener('change', handleDesktopMediaChange);
+    root.removeAttribute(initializedAttribute);
+  };
+}

package/src/components/navigation/navigationState.ts

@@ -0,0 +1,35 @@
+import type {
+  NavigationGroupItem,
+  NavigationItem,
+} from '../../display/contracts';
+import { normalizePathname } from '../../seo/url';
+
+export const normalizePath = normalizePathname;
+
+export const isNavigationGroupItem = (
+  item: NavigationItem,
+): item is NavigationGroupItem => item.items !== undefined;
+
+export const isNavigationItemActive = (
+  item: NavigationItem,
+  currentPath: string,
+): boolean => {
+  if (item.active !== undefined) {
+    return item.active;
+  }
+
+  if (!item.href || item.disabled || item.href.includes('#')) {
+    return false;
+  }
+
+  const activePath = normalizePath(currentPath);
+  const itemPaths = (item.activePaths ?? [item.href]).map(normalizePath);
+
+  return itemPaths.some((itemPath) => {
+    if (item.activeMatch === 'prefix' && itemPath !== '/') {
+      return activePath === itemPath || activePath.startsWith(`${itemPath}/`);
+    }
+
+    return itemPath === activePath;
+  });
+};

package/src/components/navigation/navigationTypes.ts

@@ -0,0 +1,18 @@
+import type { AstroComponent } from '../widgetTypes';
+import type { DisplayMedia } from '../../display/contracts';
+
+export type MobileNavigationLabels = {
+  closeLabel?: string;
+  openLabel: string;
+};
+
+type SubNavigationVisual =
+  | { icon?: AstroComponent; media?: never }
+  | { icon?: never; media: DisplayMedia };
+
+export type SubNavigationItem = SubNavigationVisual & {
+  active?: boolean;
+  disabled?: boolean;
+  href: string;
+  label: string;
+};

package/src/components/seo/SeoHead.astro

@@ -0,0 +1,194 @@
+---
+import type { PageMeta } from '../../config/pageMeta';
+import type { SiteConfig } from '../../config/siteConfig';
+import type { BreadcrumbItem } from '../../display/contracts';
+import { resolvePageSeo } from '../../seo/pageSeo';
+import {
+  createBreadcrumbListJsonLd,
+  createArticleJsonLd,
+  createWebPageJsonLd,
+  createWebSiteJsonLd,
+  serializeJsonLd,
+  type JsonLdNode,
+} from '../../seo/structuredData';
+
+type Props = {
+  meta: PageMeta;
+  site: SiteConfig;
+  pathname: string;
+  breadcrumbs?: readonly BreadcrumbItem[];
+  structuredData?: readonly JsonLdNode[];
+};
+
+const {
+  breadcrumbs = [],
+  meta,
+  pathname,
+  site,
+  structuredData = [],
+} = Astro.props;
+
+const seo = resolvePageSeo({
+  meta,
+  pathname,
+  site,
+});
+const isDefaultRoot =
+  seo.lang === site.defaultMeta.lang &&
+  new URL(seo.canonicalUrl).pathname === '/';
+const primaryStructuredData =
+  seo.seoType === 'article' && seo.datePublished
+    ? createArticleJsonLd({
+        site,
+        datePublished: seo.datePublished,
+        description: seo.description,
+        headline: seo.documentTitle,
+        lang: seo.lang,
+        url: seo.canonicalUrl,
+      })
+    : createWebPageJsonLd({
+        description: seo.description,
+        lang: seo.lang,
+        name: seo.documentTitle,
+        site,
+        type: seo.seoType === 'collection-page' ? 'CollectionPage' : 'WebPage',
+        url: seo.canonicalUrl,
+      });
+const jsonLdNodes = [
+  ...(isDefaultRoot ? [createWebSiteJsonLd(site)] : []),
+  primaryStructuredData,
+  ...(breadcrumbs.length > 0
+    ? [
+        createBreadcrumbListJsonLd({
+          breadcrumbs,
+          siteUrl: site.seo.siteUrl,
+        }),
+      ]
+    : []),
+  ...structuredData,
+];
+---
+
+<title>{seo.documentTitle}</title>
+{
+  site.seo.icons?.map((icon) => (
+    <link
+      rel="icon"
+      href={icon.href}
+      type={icon.type}
+      sizes={icon.sizes}
+    />
+  ))
+}
+{
+  site.seo.appleTouchIcon ? (
+    <link
+      rel="apple-touch-icon"
+      href={site.seo.appleTouchIcon.href}
+      sizes={site.seo.appleTouchIcon.sizes}
+    />
+  ) : null
+}
+{
+  site.seo.webManifest ? (
+    <link rel="manifest" href={site.seo.webManifest} />
+  ) : null
+}
+{
+  site.seo.themeColors?.map((themeColor) => (
+    <meta
+      name="theme-color"
+      content={themeColor.color}
+      media={themeColor.media}
+    />
+  ))
+}
+<meta name="application-name" content={site.identity.name} />
+<meta name="apple-mobile-web-app-title" content={site.identity.name} />
+{seo.description ? <meta name="description" content={seo.description} /> : null}
+{seo.robots ? <meta name="robots" content={seo.robots} /> : null}
+<link rel="canonical" href={seo.canonicalUrl} />
+{
+  seo.alternates.map((alternate) => (
+    <link rel="alternate" hreflang={alternate.lang} href={alternate.href} />
+  ))
+}
+
+<meta property="og:site_name" content={site.identity.name} />
+<meta property="og:type" content={seo.openGraphType} />
+<meta property="og:title" content={seo.documentTitle} />
+{
+  seo.description ? (
+    <meta property="og:description" content={seo.description} />
+  ) : null
+}
+<meta property="og:url" content={seo.canonicalUrl} />
+<meta property="og:locale" content={seo.openGraphLocale} />
+{
+  seo.openGraphLocaleAlternates.map((locale) => (
+    <meta property="og:locale:alternate" content={locale} />
+  ))
+}
+{
+  seo.datePublished && seo.openGraphType === 'article' ? (
+    <meta property="article:published_time" content={seo.datePublished} />
+  ) : null
+}
+{
+  seo.socialImageUrl ? (
+    <meta property="og:image" content={seo.socialImageUrl} />
+  ) : null
+}
+{
+  seo.socialImageUrl?.startsWith('https://') ? (
+    <meta property="og:image:secure_url" content={seo.socialImageUrl} />
+  ) : null
+}
+{
+  seo.socialImageAlt ? (
+    <meta property="og:image:alt" content={seo.socialImageAlt} />
+  ) : null
+}
+{
+  seo.socialImageType ? (
+    <meta property="og:image:type" content={seo.socialImageType} />
+  ) : null
+}
+{
+  seo.socialImageWidth ? (
+    <meta property="og:image:width" content={String(seo.socialImageWidth)} />
+  ) : null
+}
+{
+  seo.socialImageHeight ? (
+    <meta property="og:image:height" content={String(seo.socialImageHeight)} />
+  ) : null
+}
+
+<meta name="twitter:card" content={seo.twitterCard} />
+<meta name="twitter:title" content={seo.documentTitle} />
+{
+  seo.description ? (
+    <meta name="twitter:description" content={seo.description} />
+  ) : null
+}
+{
+  seo.socialImageUrl ? (
+    <meta name="twitter:image" content={seo.socialImageUrl} />
+  ) : null
+}
+{
+  seo.socialImageAlt ? (
+    <meta name="twitter:image:alt" content={seo.socialImageAlt} />
+  ) : null
+}
+
+{
+  jsonLdNodes.map((node) => (
+    <script
+      is:inline
+      type="application/ld+json"
+      set:html={serializeJsonLd(node)}
+    />
+  ))
+}

package/src/components/widgetTypes.ts

@@ -0,0 +1,3 @@
+export type AstroComponent = (props: Record<string, unknown>) => unknown;
+
+export type HeadingLevel = 1 | 2 | 3 | 4;

package/src/composition/Grid/Grid.astro

@@ -0,0 +1,82 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type GridGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type GridColumns = 1 | 2 | 3 | 4 | 'content-sidebar';
+type GridRows = 1 | 2 | 3 | 4;
+type GridItemAlignment = 'start' | 'center' | 'end' | 'stretch';
+type GridCollapseAt = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+type GridLastRow = 'preserve' | 'fill';
+
+type Props = Omit<HTMLAttributes<'div'>, 'class' | 'style'> & {
+  as?: 'div' | 'section' | 'ul' | 'ol';
+  alignItems?: GridItemAlignment;
+  collapseAt?: GridCollapseAt;
+  class?: string;
+  compactColumns?: 1 | 2 | 3 | 4;
+  gap?: GridGap;
+  columns?: GridColumns;
+  justifyItems?: GridItemAlignment;
+  lastRow?: GridLastRow;
+  minTrackWidth?: string;
+  rows?: GridRows;
+};
+
+const {
+  as: Element = 'div',
+  alignItems = 'stretch',
+  collapseAt = 'md',
+  class: className,
+  compactColumns,
+  gap = 'md',
+  columns,
+  justifyItems = 'stretch',
+  lastRow = 'preserve',
+  minTrackWidth = '16rem',
+  rows,
+  ...attrs
+}: Props = Astro.props;
+const layout =
+  columns === 'content-sidebar'
+    ? 'content-sidebar'
+    : columns
+      ? 'fixed'
+      : 'auto';
+const collapseMode = columns ? collapseAt : 'none';
+const gridVariables = {
+  ...(typeof columns === 'number'
+    ? { '--grid-columns': String(columns) }
+    : columns
+      ? {}
+      : { '--grid-min-track-width': minTrackWidth }),
+  ...(compactColumns
+    ? { '--grid-compact-columns': String(compactColumns) }
+    : {}),
+  ...(rows ? { '--grid-rows': String(rows) } : {}),
+  '--grid-align-items': alignItems,
+  '--grid-justify-items': justifyItems,
+};
+const gridStyle = Object.entries(gridVariables)
+  .map(([property, value]) => `${property}: ${value};`)
+  .join(' ');
+---
+
+<div class="grid-container">
+  <Element
+    {...attrs}
+    class:list={['grid', className]}
+    data-composition="grid"
+    data-align-items={alignItems}
+    data-collapse-at={collapseMode}
+    data-compact-columns={compactColumns}
+    data-columns={typeof columns === 'number' ? columns : undefined}
+    data-gap={gap}
+    data-justify-items={justifyItems}
+    data-layout={layout}
+    data-last-row={lastRow}
+    data-rows={rows}
+    style={gridStyle}
+  >
+    <slot />
+  </Element>
+</div>