@master/internal-site 0.0.0-stage → 0.1.0

package/src/styles/system/tokens.css

@@ -0,0 +1,136 @@
+/*
+ * Moonstone / Obsidian — site tokens.
+ * One light source above and slightly left. Every surface is a step on one ladder:
+ *   canvas (page) → tray (recessed holder) → stage (lit well inside a tray) → sheet (raised face) → float (overlay)
+ *   well (sunken field) sits below its surroundings.
+ * Neutrals are the preset's zinc (hue 265, chroma under .003): light mode is a clean pearl, dark mode a zinc-95
+ * obsidian whose surfaces step apart and keep a legible contour. Lines and shadows carry no hue of their own.
+ * Tokens are namespaced --ui-* and are not utility tokens: content keeps teaching the preset vocabulary.
+ * The interface is monochrome. Hues are reserved for teaching specimens and status; brand gold for the homepage and brand moments.
+ */
+@layer theme {
+:root, :host {
+
+  /* Type: light regular text, headings at regular weight; size and ink carry the steps. */
+  --ui-font-feature-sans: "ss02", "ss03", "ss04", "ss06", "ss07", "ss08";
+  --ui-text-display: 2.5rem;    --ui-leading-display: 1.1;    --ui-tracking-display: -.03em;
+  --ui-text-title: clamp(1.875rem, 1.4rem + 2vw, 2.375rem); --ui-leading-title: 1.16;  --ui-tracking-title: -.028em;
+  --ui-text-h2: 1.625rem;       --ui-leading-h2: 2.1875rem;   --ui-tracking-h2: -.022em;
+  --ui-text-h3: 1.25rem;        --ui-leading-h3: 1.75rem;     --ui-tracking-h3: -.014em;
+  --ui-text-base: 1rem;         --ui-leading-body: 2;
+  --ui-text-lead: 1.125rem;     --ui-leading-lead: 1.75;
+  --ui-text-small: .875rem;     --ui-leading-small: 1.8;
+  --ui-text-caption: .8125rem;  --ui-leading-caption: 1.65;
+  --ui-text-label: .75rem;      --ui-tracking-label: 0;
+  /* Eyebrow: a small capital caption over a group (sidebar, footer, kicker, contents) — sans, medium, boldly tracked. */
+  --ui-text-eyebrow: .6875rem;  --ui-tracking-eyebrow: .14em;
+  --ui-text-code: .8125rem;     --ui-leading-code: 1.7;
+  /* English runs a step lighter than the regular cut, as the original site did; Han text keeps 400. */
+  --ui-weight-regular: 400; --ui-weight-medium: 460; --ui-weight-strong: 500; --ui-weight-heading: 400;
+
+  /* Shape: small radii that nest by a 4px inset (outer = inner + inset) */
+  --ui-inset: 4px;
+  --ui-radius-xs: 3px;    /* inline code, kbd */
+  --ui-radius-sm: 4px;    /* badges, chips, tooltips, tabs inside a bar */
+  --ui-radius-md: 6px;    /* controls, inputs, nav entries */
+  --ui-radius-lg: 8px;    /* small cards, menus, callouts, pager */
+  --ui-radius-xl: 10px;   /* stage, sheet, code window, table */
+  --ui-radius-2xl: 14px;  /* tray, dialog */
+  --ui-radius-pill: 999px;
+
+  /* Rhythm */
+  --ui-space-3xs: .25rem; --ui-space-2xs: .375rem; --ui-space-xs: .5rem; --ui-space-sm: .75rem; --ui-space-md: 1rem;
+  --ui-space-lg: 1.5rem; --ui-space-xl: 2rem; --ui-space-2xl: 3rem; --ui-space-3xl: 4rem;
+
+  /* Motion: one easing family; interaction is quick, explanation calm */
+  --ui-ease: cubic-bezier(.22, 1, .36, 1);
+  --ui-ease-inout: cubic-bezier(.65, 0, .35, 1);
+  --ui-duration-press: 60ms; --ui-duration-quick: 160ms; --ui-duration-base: 280ms; --ui-duration-slow: 640ms;
+}
+:root:lang(en) { --ui-weight-regular: 350; }
+/* Han text has no capitals: an eyebrow keeps a readable size and opens its characters a little less. */
+:lang(zh) { --ui-text-eyebrow: .75rem; --ui-tracking-eyebrow: .1em; }
+
+:root, :host, .light, .dark {
+  /* Surfaces */
+  --ui-surface-canvas:   light-dark(oklch(98.6% .0008 265), oklch(19.4% .0019 265));
+  --ui-surface-tray:     light-dark(oklch(96% .0012 265),   oklch(17.4% .0018 265));
+  --ui-surface-stage:    light-dark(oklch(98.9% .0006 265), oklch(20.4% .002 265));
+  --ui-surface-sheet:    light-dark(oklch(100% 0 none),     oklch(24.2% .0022 265));
+  --ui-surface-sheet-lo: light-dark(oklch(99.3% .0005 265), oklch(22.8% .0021 265));
+  --ui-surface-well:     light-dark(oklch(96.6% .0011 265), oklch(16.4% .0017 265));
+  --ui-surface-well-hover: light-dark(oklch(95.8% .0012 265), oklch(15.4% .0016 265));
+  --ui-surface-float:    light-dark(oklch(100% 0 none),     oklch(26.4% .0024 265));
+  --ui-surface-chip:     light-dark(oklch(96.5% .0011 265), oklch(100% 0 none / .07));
+  --ui-surface-code:     light-dark(oklch(99.6% .0004 265), oklch(21.2% .002 265));
+  --ui-surface-ink:      light-dark(oklch(22% .0022 265),   oklch(95% .0012 265));
+  --ui-surface-scrim:    light-dark(oklch(18% 0 none / .16), oklch(0% 0 none / .55));
+
+  /* Lines: neutral ink in light mode, white in dark mode, where each step is a little firmer so edges stay legible */
+  --ui-line-hair:    light-dark(oklch(22% .002 265 / .065), oklch(100% 0 none / .075));
+  --ui-line-contour: light-dark(oklch(22% .002 265 / .095), oklch(100% 0 none / .11));
+  --ui-line-divider: light-dark(oklch(22% .002 265 / .12),  oklch(100% 0 none / .13));
+  --ui-line-strong:  light-dark(oklch(22% .002 265 / .2),   oklch(100% 0 none / .22));
+  --ui-line-mark:    light-dark(oklch(22% .002 265 / .3),   oklch(100% 0 none / .32));
+
+  /* Text: a soft ink, never pure black or white */
+  --ui-text-strong:   light-dark(oklch(21% .0022 265),  oklch(95% .0012 265));
+  --ui-text-body:     light-dark(oklch(39.8% .0028 265), oklch(80% .0025 265));
+  --ui-text-muted:    light-dark(oklch(48.6% .003 265),  oklch(68.6% .0028 265));
+  --ui-text-disabled: light-dark(oklch(68.6% .0028 265), oklch(48.6% .003 265));
+  --ui-text-inverse:  light-dark(oklch(98.6% .0008 265), oklch(19.4% .0019 265));
+  --ui-focus: light-dark(oklch(24.6% .0022 265), oklch(93.2% .0015 265));
+
+  /* Light */
+  --ui-highlight: light-dark(oklch(100% 0 none / .95), oklch(100% 0 none / .07));
+  --ui-lip:       light-dark(oklch(100% 0 none / .9),  oklch(100% 0 none / .04));
+  --ui-shade-1: light-dark(oklch(18% 0 none / .07),  oklch(0% 0 none / .55));
+  --ui-shade-2: light-dark(oklch(18% 0 none / .05),  oklch(0% 0 none / .4));
+  --ui-shade-3: light-dark(oklch(18% 0 none / .04),  oklch(0% 0 none / .34));
+  --ui-shade-4: light-dark(oklch(18% 0 none / .035), oklch(0% 0 none / .3));
+  --ui-shade-5: light-dark(oklch(18% 0 none / .03),  oklch(0% 0 none / .28));
+
+  /* Elevation: sink < flat < rise-1 < rise-1h < rise-2 < rise-3 < overlay. Offset and blur double; spread pulls in by half. */
+  --ui-elevation-sink: inset 0 1px 2px light-dark(oklch(18% 0 none / .05), oklch(0% 0 none / .45)), inset 0 0 0 1px var(--ui-line-contour), 0 1px 0 var(--ui-lip);
+  --ui-elevation-flat: 0 0 0 1px var(--ui-line-contour);
+  --ui-elevation-rise-1: inset 0 1px 0 var(--ui-highlight), 0 0 0 1px var(--ui-line-contour),
+    0 1px 1px -.5px var(--ui-shade-1), 0 2px 2px -1px var(--ui-shade-2), 0 4px 4px -2px var(--ui-shade-3);
+  --ui-elevation-rise-1h: inset 0 1px 0 var(--ui-highlight), 0 0 0 1px var(--ui-line-strong),
+    0 1px 1px -.5px var(--ui-shade-1), 0 3px 3px -1.5px var(--ui-shade-2), 0 6px 6px -3px var(--ui-shade-3), 0 10px 10px -5px var(--ui-shade-4);
+  --ui-elevation-rise-2: inset 0 1px 0 var(--ui-highlight), 0 0 0 1px var(--ui-line-contour),
+    0 1px 1px -.5px var(--ui-shade-1), 0 3px 3px -1.5px var(--ui-shade-2), 0 6px 6px -3px var(--ui-shade-3),
+    0 12px 12px -6px var(--ui-shade-4), 0 24px 24px -12px var(--ui-shade-5);
+  --ui-elevation-rise-3: inset 0 1px 0 var(--ui-highlight), 0 0 0 1px var(--ui-line-contour),
+    0 1px 1px -.5px var(--ui-shade-1), 0 3px 3px -1.5px var(--ui-shade-2), 0 6px 6px -3px var(--ui-shade-3),
+    0 12px 12px -6px var(--ui-shade-4), 0 24px 24px -12px var(--ui-shade-4), 0 48px 48px -24px var(--ui-shade-5);
+  --ui-elevation-overlay: var(--ui-elevation-rise-3), 0 64px 96px -32px light-dark(oklch(18% 0 none / .08), oklch(0% 0 none / .5));
+
+  /* Stage lighting */
+  --ui-stage-light: radial-gradient(110% 80% at 18% -14%, light-dark(oklch(100% 0 none / .9), oklch(100% 0 none / .04)), transparent 60%),
+                 linear-gradient(180deg, transparent 55%, light-dark(oklch(18% 0 none / .02), oklch(0% 0 none / .08)));
+  --ui-hatch: repeating-linear-gradient(135deg, light-dark(oklch(22% .002 265 / .13), oklch(100% 0 none / .1)) 0 1px, transparent 1px 7px);
+
+  /* Teaching tones — specimens only, never chrome */
+  --ui-tone-neutral: light-dark(var(--color-zinc-50), var(--color-zinc-40));
+  --ui-tone-blue:    light-dark(oklch(53% .2 262), oklch(76% .12 258));
+  --ui-tone-violet:  light-dark(oklch(53% .2 295), oklch(76% .12 295));
+  --ui-tone-amber:   light-dark(oklch(62% .15 62), oklch(82% .13 80));
+  --ui-tone-green:   light-dark(oklch(52% .12 150), oklch(78% .12 150));
+  --ui-tone-red:     light-dark(oklch(54% .17 25),  oklch(74% .14 22));
+
+  /* Status — callouts, diffs, results */
+  --ui-status-info: var(--ui-tone-blue); --ui-status-success: var(--ui-tone-green); --ui-status-warning: var(--ui-tone-amber); --ui-status-danger: var(--ui-tone-red);
+
+  /* Brand gold — homepage and brand moments only */
+  --ui-gold-face: linear-gradient(180deg, oklch(92.4% .085 88) 0%, oklch(86.5% .128 82) 46%, oklch(79% .142 75) 100%);
+  --ui-gold-ink: oklch(29.27% .0971 37.4);
+  --ui-gold-text: light-dark(oklch(52.17% .1199 62.2), oklch(86% .13 86));
+
+  /* Code (site syntax theme) */
+  --ui-code-text: light-dark(#344054, #dedbd7); --ui-code-comment: light-dark(#636779, #9b9cad); --ui-code-punctuation: light-dark(#626675, #b6b3bd);
+  --ui-code-keyword: light-dark(#91466f, #e6a0c4); --ui-code-function: light-dark(#3764a5, #9dbce6); --ui-code-property: light-dark(#256a78, #9acbd4);
+  --ui-code-string: light-dark(#71622f, #d9ce96); --ui-code-number: light-dark(#71549e, #c5b0e6);
+  --ui-code-added: light-dark(oklch(52% .12 150 / .1), oklch(78% .12 150 / .1)); --ui-code-removed: light-dark(oklch(54% .17 25 / .08), oklch(74% .14 22 / .1));
+  --ui-code-active: light-dark(oklch(22% .002 265 / .045), oklch(100% 0 none / .05));
+}
+}

package/src/utils/cloudflare-image-loader.js

@@ -0,0 +1,85 @@
+const defaultQuality = 75
+const bitmapImageExtensionPattern = /\.(?:avif|jpe?g|png|webp)$/i
+const forcedBooleanValues = new Map([
+  ['true', true],
+  ['false', false],
+])
+
+/**
+ * @param {{ src?: string, width?: number | string, quality?: number | string, siteUrl?: string }} options
+ */
+export function createCloudflareImageUrl({ src, width, quality, siteUrl }) {
+  if (!src || !siteUrl || src.startsWith('data:') || src.startsWith('blob:')) {
+    return src
+  }
+
+  let baseUrl
+  let sourceUrl
+  try {
+    baseUrl = new URL(siteUrl)
+    sourceUrl = new URL(src, baseUrl)
+  } catch {
+    return src
+  }
+
+  if (!isMasterCoHost(baseUrl.hostname)) return src
+  if (sourceUrl.origin !== baseUrl.origin) return src
+  if (sourceUrl.pathname.startsWith('/cdn-cgi/image/')) return src
+  if (!bitmapImageExtensionPattern.test(sourceUrl.pathname)) return src
+
+  const normalizedWidth = normalizePositiveInteger(width)
+  if (!normalizedWidth) return src
+
+  const normalizedQuality = normalizePositiveInteger(quality) || defaultQuality
+  const options = [
+    `width=${normalizedWidth}`,
+    `quality=${normalizedQuality}`,
+    'format=auto'
+  ].join(',')
+
+  return `${baseUrl.origin}/cdn-cgi/image/${options}${sourceUrl.pathname}${sourceUrl.search}`
+}
+
+/**
+ * @param {{ env?: Record<string, string | undefined>, siteUrl?: string }} [options]
+ */
+export function shouldUseCloudflareImageLoader({ env = process.env, siteUrl = env.PUBLIC_URL } = {}) {
+  const forcedValue = forcedBooleanValues.get(env.MASTER_CSS_IMAGE_TRANSFORMATIONS)
+  if (typeof forcedValue === 'boolean') return forcedValue
+
+  return isMasterCoUrl(siteUrl) && isCloudflarePages(env)
+}
+
+/**
+ * @param {string | undefined} siteUrl
+ */
+export function isMasterCoUrl(siteUrl) {
+  try {
+    return isMasterCoHost(new URL(siteUrl).hostname)
+  } catch {
+    return false
+  }
+}
+
+/**
+ * @param {string} hostname
+ */
+export function isMasterCoHost(hostname) {
+  return hostname === 'master.co' || hostname.endsWith('.master.co')
+}
+
+/**
+ * @param {Record<string, string | undefined>} env
+ */
+function isCloudflarePages(env) {
+  return env.CF_PAGES === '1' || Boolean(env.CF_PAGES_BRANCH || env.CF_PAGES_URL)
+}
+
+/**
+ * @param {number | string | undefined} value
+ */
+function normalizePositiveInteger(value) {
+  const numberValue = Number(value)
+  if (!Number.isFinite(numberValue) || numberValue <= 0) return undefined
+  return Math.round(numberValue)
+}

package/src/virtual.d.ts

@@ -0,0 +1,36 @@
+declare module 'virtual:master-site/config' {
+  const config: import('@master/internal-site/config').SiteConfig
+  export default config
+}
+declare module 'virtual:master-site/app' {
+  const app: import('@master/internal-site/config').SiteApp
+  export default app
+}
+declare module 'virtual:master-site/translations' {
+  const translations: Record<string, () => Promise<import('@master/internal-site/factories/create-page').ContentModule>>
+  export default translations
+}
+declare module 'virtual:master-site/highlight' {
+  const highlight: typeof import('@master/internal-site/utils/highlight-code-core').default
+  export default highlight
+}
+declare module 'virtual:master-site/navigation' {
+  const navigation: Record<string, { name: string; pages: { title: import('@master/internal-site/types/Metadata').MetadataTitle; pathname: string; other?: { subject: string } } }[]>
+  export default navigation
+}
+declare module 'virtual:master-site/routes' {
+  type RouteProps = import('@master/internal-site/astro/route-paths').RouteProps
+  type Factory = import('astro/runtime/server/index.js').AstroComponentFactory
+  interface LoadedRoute {
+    metadata: Partial<import('@master/internal-site/types/Metadata').Metadata>
+    layers: Factory[]
+    props: import('@master/internal-site/types/Props').Props
+    assets: import('@master/internal-site/astro/propagated-assets').PageAssets
+    bodyClass?: string
+    bare?: boolean
+    locales: readonly string[]
+  }
+  export function getStaticPaths(): Promise<{ params: { path: string | undefined }; props: RouteProps }[]>
+  export function loadRoute(props: RouteProps): Promise<LoadedRoute>
+  export function withSection(section: string, metadata: LoadedRoute['metadata'], layers: Factory[], props: LoadedRoute['props'], propagated?: import('@master/internal-site/astro/propagated-assets').PropagatedModule<unknown>[], documents?: boolean): Promise<LoadedRoute>
+}