@master/internal-site 0.0.0-stage → 0.1.1

package/src/sections/guide.astro

@@ -0,0 +1,26 @@
+---
+import DocumentShell from './document.astro'
+import DocHeader from '@master/internal-site/components/DocHeader.svelte'
+import DocSidebar from '@master/internal-site/components/DocSidebar.svelte'
+import DocWrapper from '@master/internal-site/components/DocWrapper.astro'
+import navigation from 'virtual:master-site/navigation'
+const pageCategories = navigation.guide ?? []
+import type { MetadataTitle } from '@master/internal-site/types/Metadata'
+
+export const bodyClass = 'bg-surface-base'
+
+// The sidebar is a client island; serialize only the fields it renders on every page.
+const sidebarCategories = pageCategories.map(({ name, pages }) => ({
+  name,
+  pages: pages.map(({ title, pathname, other }: { title: MetadataTitle, pathname: string, other?: { subject: string } }) => other ? { title, pathname, other } : { title, pathname })
+}))
+const menuCategories = sidebarCategories.map(category => ({ ...category, pages: category.pages.filter(page => page.pathname.split('/').length === 3) }))
+---
+
+<DocumentShell>
+  <DocHeader client:load contained documentNavigation={menuCategories} documentNavigationTitle="Guide" />
+  <DocWrapper>
+    <DocSidebar client:load pageCategories={sidebarCategories} />
+    <slot />
+  </DocWrapper>
+</DocumentShell>

package/src/sections/home.astro

@@ -0,0 +1,7 @@
+---
+import DocumentShell from './document.astro'
+
+export const bodyClass = '(background-repeat:no-repeat) (background-image:linear-gradient(var(--color-surface-raised),var(--color-surface-base)|100vh,var(--color-surface-base))) (background-size:cover)'
+---
+
+<DocumentShell><slot /></DocumentShell>

package/src/sections/page.astro

@@ -0,0 +1,12 @@
+---
+import DocumentShell from './document.astro'
+import DocHeader from '@master/internal-site/components/DocHeader.svelte'
+
+/** Standalone pages such as Brand. */
+export const bodyClass = 'bg-surface-base'
+---
+
+<DocumentShell>
+  <DocHeader client:load contained />
+  <slot />
+</DocumentShell>

package/src/styles/base.css

@@ -0,0 +1,57 @@
+@theme {
+  --color-yellow: var(--color-yellow-40);
+  --color-yellow-hover: var(--color-yellow-50);
+  --color-on-yellow: var(--color-yellow-95);
+  --color-yellow-line: color-mix(in oklab, var(--color-black) 10%, transparent);
+}
+
+@layer base {
+  /* The canvas belongs to the document itself, so a page that loads no documents boundary (the Blog index, the 404)
+     never shows the browser's white below its own sections. */
+  html { background: var(--ui-surface-canvas); }
+
+  html[lang="en"] {
+    body {
+      font-weight: 350;
+    }
+  }
+
+  /*
+   * Keyboard focus reads the same everywhere: a 2px ink ring. Components that draw their own focus
+   * override this; everything else (scrollable code, search, navigation links) no longer falls back
+   * to the browser's thin blue ring.
+   */
+  :focus-visible {
+    outline: 2px solid var(--color-focus);
+    outline-offset: 2px;
+  }
+
+  /*
+   * The theme class comes from an inline script. Without it (scripts disabled), paired light and dark artwork
+   * would both show: follow the system scheme instead.
+   */
+  @media (prefers-color-scheme: light) {
+    :root:not(.light, .dark) [class~="hidden@apply(--site-light)"] { display: none !important; }
+  }
+  @media (prefers-color-scheme: dark) {
+    :root:not(.light, .dark) [class~="hidden@apply(--site-dark)"] { display: none !important; }
+  }
+}
+
+@layer defaults {
+  .light {
+    --color-yellow: var(--color-yellow-40);
+    --color-yellow-hover: var(--color-yellow-50);
+    --color-on-yellow: var(--color-yellow-95);
+    --color-yellow-line: color-mix(in oklab, var(--color-black) 10%, transparent);
+  }
+}
+
+@layer defaults {
+  .dark {
+    --color-yellow: var(--color-yellow-50);
+    --color-yellow-hover: var(--color-yellow-40);
+    --color-on-yellow: var(--color-yellow-95);
+    --color-yellow-line: color-mix(in oklab, var(--color-white) 30%, transparent);
+  }
+}

package/src/styles/benchmarks.css

@@ -0,0 +1,20 @@
+/* Benchmark charts and result tables: numeric columns, the data-table scroll height,
+   forced colors and print. */
+@layer components {
+  .ui-disclosure-body > .ui-table[role="region"] { max-height: 36rem; }
+  .ui-table .benchmark-value { white-space: nowrap; }
+  /* Measured columns run from a known column to the end: their figures share widths and align on the right. */
+  .ui-table[data-numeric-from] :is(td, th) { font-variant-numeric: tabular-nums; }
+  .ui-table[data-numeric-from="2"] :is(td, th):nth-child(n + 2),
+  .ui-table[data-numeric-from="3"] :is(td, th):nth-child(n + 3),
+  .ui-table[data-numeric-from="4"] :is(td, th):nth-child(n + 4) { text-align: end; }
+  @media (forced-colors: active) {
+    .ui-bar { outline: 1px solid CanvasText; outline-offset: -1px; }
+    .ui-bar > i { forced-color-adjust: none; background: CanvasText !important; }
+    .ui-bar[data-variant="stacked"] > i { box-shadow: inset -1px 0 Canvas; }
+    .ui-legend > li > i { display: none; }
+  }
+  @media print {
+    .ui-table[role="region"] { overflow: visible; max-height: none; }
+  }
+}