Launch the mdbase Connect beta waitlist

DESIGN.md

@@ -59,7 +59,9 @@ mobile text region begins.
 
 Only the homepage particle field moves. Its transformations explain the current
 chapter. Reduced-motion preferences place the particles directly into each
-formation. Interior pages do not use decorative animation.
+formation. Coarse-pointer screens up to 820px use the same static formations to
+reduce battery use during the mobile reading journey. Interior pages do not use
+decorative animation.
 
 ## Language
 

public/mdbase-introduction.css

@@ -113,13 +113,6 @@
       text-underline-offset: 5px;
     }
 
-    .scene-count {
-      min-width: 52px;
-      color: var(--muted);
-      font: 520 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-      text-align: right;
-    }
-
     .scroll-progress {
       position: fixed;
       z-index: 6;
@@ -440,10 +433,6 @@
         font-size: 11px;
       }
 
-      .scene-count {
-        min-width: auto;
-      }
-
       .chapter {
         padding-right: 22px;
         padding-left: 22px;

public/mdbase-murmuration.js

@@ -3,8 +3,9 @@
       const canvas = document.querySelector("#diagram");
       const context = canvas.getContext("2d", { alpha: true });
       const chapters = [...document.querySelectorAll(".chapter")];
-      const sceneCount = document.querySelector("#scene-count");
-      const reduceMotion = matchMedia("(prefers-reduced-motion: reduce)").matches;
+      const reduceMotion =
+        matchMedia("(prefers-reduced-motion: reduce)").matches
+        || matchMedia("(max-width: 820px) and (pointer: coarse)").matches;
       const particleCount = 361;
       const cellSize = 104;
       const particles = [];
@@ -1058,8 +1059,6 @@
         chapters.forEach((chapter, chapterIndex) => {
           chapter.classList.toggle("is-active", chapterIndex === index);
         });
-        sceneCount.textContent =
-          `${String(index + 1).padStart(2, "0")} / ${String(chapters.length).padStart(2, "0")}`;
         buildScene(scene);
       }
 

public/mdbase-shell.css

@@ -133,27 +133,21 @@
   gap: 0.35rem;
 }
 
-.scene-count {
-  color: var(--color-text-muted);
-  font: 500 0.625rem/1 var(--mono);
-  white-space: nowrap;
-}
-
 .theme-menu {
   position: relative;
   flex: 0 0 auto;
 }
 
 .theme-menu > summary {
   display: grid;
-  width: 2rem;
-  height: 2rem;
+  width: 2.75rem;
+  height: 2.75rem;
   padding: 0;
   place-items: center;
   color: var(--color-text-faint);
   background: transparent;
   border: 0;
-  border-radius: 3px;
+  border-radius: var(--radius);
   list-style: none;
   cursor: pointer;
 }
@@ -199,20 +193,20 @@
   padding: 0.3rem;
   background: var(--color-surface);
   border: 1px solid var(--color-border-strong);
-  border-radius: 3px;
+  border-radius: var(--radius);
 }
 
 .theme-menu__options button {
   display: grid;
   width: 100%;
-  min-height: 1.9rem;
+  min-height: 2.75rem;
   padding: 0 0.5rem;
   align-items: center;
   grid-template-columns: 1fr auto;
   color: var(--color-text-soft);
   background: transparent;
   border: 0;
-  border-radius: 2px;
+  border-radius: var(--radius);
   font: 400 0.66rem/1 var(--mono);
   text-align: left;
   cursor: pointer;
@@ -251,7 +245,10 @@
 }
 
 .mobile-nav summary {
-  padding: 0.35rem 0;
+  display: flex;
+  min-height: 2.75rem;
+  padding: 0.35rem 0.25rem;
+  align-items: center;
   color: var(--color-text-soft);
   font-size: 0.78rem;
   list-style: none;
@@ -300,11 +297,11 @@
 .site-footer__inner {
   display: grid;
   width: min(100% - 2rem, var(--site-width));
-  min-height: 5.5rem;
+  min-height: 8rem;
   margin-inline: auto;
-  padding-block: 1.5rem;
-  align-items: center;
-  grid-template-columns: 1fr auto;
+  padding-block: 2rem;
+  align-items: start;
+  grid-template-columns: minmax(14rem, 0.72fr) minmax(0, 1.28fr);
   gap: 2rem;
 }
 
@@ -319,11 +316,22 @@
   font-size: 0.78rem;
 }
 
-.site-footer nav {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 0.5rem 1.1rem;
+.site-footer .site-footer__nav {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1.5rem;
+}
+
+.site-footer__nav > div {
+  display: grid;
+  align-content: start;
+  gap: 0.5rem;
+}
+
+.site-footer__nav > div > strong {
+  margin-bottom: 0.15rem;
+  color: var(--color-text-muted);
+  font-size: 0.625rem;
 }
 
 .site-footer nav a {
@@ -358,16 +366,18 @@
     width: min(100% - 1.25rem, var(--site-width));
   }
 
-  .scene-count {
-    display: none;
-  }
-
   .site-footer__inner {
     grid-template-columns: 1fr;
-    gap: 1rem;
+    gap: 1.5rem;
+  }
+
+  .site-footer .site-footer__nav {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+}
 
-  .site-footer nav {
-    justify-content: flex-start;
+@media (max-width: 30rem) {
+  .site-footer .site-footer__nav {
+    grid-template-columns: 1fr;
   }
 }

scripts/import-spec.mjs

@@ -53,7 +53,8 @@ function rewrite(html, archive) {
     .replaceAll('href="style.css', 'href="/spec/style.css')
     .replaceAll('href="mdbase-favicon.svg"', 'href="/spec/mdbase-favicon.svg"')
     .replaceAll('href="runtime.html"', 'href="/runtime/"')
-    .replaceAll('href="ecosystem.html"', 'href="/implementations/"')
+    .replaceAll('<a href="ecosystem.html">Implementations</a>', '')
+    .replaceAll('href="/testbed/"', 'href="#section-16"')
     .replaceAll('href="spec-v0.2.html"', 'href="/spec/v0.2/"')
     .replaceAll('href="spec.html"', 'href="/spec/"')
     .replaceAll(

scripts/sync-sources.mjs

@@ -55,11 +55,15 @@ cpSync(runtimeSchemaSource, runtimeSchemaDestination, { recursive: true, force:
 const introductionSource = join(connectDir, "docs", "mdbase-configurations-v2.html");
 required(introductionSource, "Connect introduction prototype");
 const introduction = readFileSync(introductionSource, "utf8");
-const introductionStyles = extract(introduction, /<style>([\s\S]*?)<\/style>/, "prototype styles");
-const introductionScript = extract(
-  introduction,
-  /<script>([\s\S]*?)<\/script>\s*<\/body>/,
-  "prototype murmuration"
+const introductionStyles = removeSceneCounterStyles(
+  extract(introduction, /<style>([\s\S]*?)<\/style>/, "prototype styles")
+);
+const introductionScript = removeSceneCounterScript(
+  extract(
+    introduction,
+    /<script>([\s\S]*?)<\/script>\s*<\/body>/,
+    "prototype murmuration"
+  )
 );
 const themedIntroductionScript = addThemeAwareCanvasPalette(introductionScript);
 writeFileSync(
@@ -196,6 +200,16 @@ function extract(source, pattern, label) {
   return match[1];
 }
 
+function removeSceneCounterStyles(source) {
+  return source.replace(/\n\s*\.scene-count\s*\{[^}]*\}/g, "");
+}
+
+function removeSceneCounterScript(source) {
+  return source
+    .replace(/^\s*const sceneCount = document\.querySelector\("#scene-count"\);\n/m, "")
+    .replace(/\n\s*sceneCount\.textContent =\s*\n\s*`[^`]+`;/, "");
+}
+
 function addThemeAwareCanvasPalette(source) {
   const palettePattern = /      const palette = \{[\s\S]*?      \};/;
   if (!palettePattern.test(source)) {
@@ -388,11 +402,22 @@ function addThemeAwareCanvasPalette(source) {
 
       function draw(now)`
   );
+  const motionPreference =
+    '      const reduceMotion = matchMedia("(prefers-reduced-motion: reduce)").matches;';
+  if (!withParticles.includes(motionPreference)) {
+    throw new Error("Could not find the prototype motion preference");
+  }
+  const withMobileMotion = withParticles.replace(
+    motionPreference,
+    `      const reduceMotion =
+        matchMedia("(prefers-reduced-motion: reduce)").matches
+        || matchMedia("(max-width: 820px) and (pointer: coarse)").matches;`
+  );
   const initialization = "      resize();\n      updateScrollState();";
-  if (!withParticles.includes(initialization)) {
+  if (!withMobileMotion.includes(initialization)) {
     throw new Error("Could not find the prototype initialization");
   }
-  const withInitialization = withParticles.replace(
+  const withInitialization = withMobileMotion.replace(
     initialization,
     "      syncPalette();\n      resize();\n      updateScrollState();"
   );

src/components/DocsLayout.astro

@@ -13,7 +13,7 @@ const docGroups = [
   {
     label: "Start",
     docs: [
-      { href: "/sdk/quickstart/", label: "Try the SDK locally", key: "quickstart" },
+      { href: "/sdk/quickstart/", label: "Run the source-built sandbox", key: "quickstart" },
       { href: "/sdk/connect-quickstart/", label: "Connect a browser app", key: "connect-quickstart" },
       { href: "/sdk/", label: "SDK overview", key: "overview" }
     ]
@@ -45,7 +45,7 @@ const docGroups = [
 <BaseLayout title={title} description={description} current="sdk">
   <div class="docs-shell">
     <aside class="docs-nav">
-      <details open>
+      <details open data-docs-nav>
         <summary>Connect SDK</summary>
         <nav aria-label="SDK documentation">
           {
@@ -93,4 +93,13 @@ const docGroups = [
       )
     }
   </div>
+  <script is:inline>
+    const docsNavigation = document.querySelector("[data-docs-nav]");
+    if (
+      docsNavigation instanceof HTMLDetailsElement
+      && window.matchMedia("(max-width: 60rem)").matches
+    ) {
+      docsNavigation.open = false;
+    }
+  </script>
 </BaseLayout>

src/components/SiteFooter.astro

@@ -4,20 +4,27 @@
       <strong>mdbase</strong>
       <p>Markdown collections with types, queries, and explicit app permissions.</p>
     </div>
-    <nav aria-label="Footer navigation">
-      <a href="/#orientation">Start here</a>
-      <a href="/connect/">Connect</a>
-      <a href="/sdk/">SDK docs</a>
-      <a href="/interop/">Interoperability</a>
-      <a href="/testbed/">Testbed</a>
-      <a href="/runtime/">Runtime</a>
-      <a href="/contracts/">Contracts</a>
-      <a href="/implementations/">Implementations</a>
-      <a href="/spec/">Specification</a>
-      <a href="/security/">Security</a>
-      <a href="/privacy/">Privacy</a>
-      <a href="/terms/">Terms</a>
-      <a href="https://github.com/mdbase-dev">GitHub</a>
+    <nav aria-label="Footer navigation" class="site-footer__nav">
+      <div>
+        <strong>Product</strong>
+        <a href="/">Overview</a>
+        <a href="/connect/">Connect</a>
+        <a href="/beta/">Connect beta waitlist</a>
+        <a href="/security/">Security</a>
+      </div>
+      <div>
+        <strong>Developers</strong>
+        <a href="/sdk/">SDK documentation</a>
+        <a href="/runtime/">Runtime</a>
+        <a href="/contracts/">Contracts</a>
+        <a href="/spec/">Specification</a>
+      </div>
+      <div>
+        <strong>Project</strong>
+        <a href="https://github.com/mdbase-dev">GitHub</a>
+        <a href="/privacy/">Privacy</a>
+        <a href="/terms/">Terms</a>
+      </div>
     </nav>
   </div>
 </footer>

src/components/SiteHeader.astro

@@ -2,19 +2,15 @@
 import BrandMark from "./BrandMark.astro";
 
 interface Props {
-  current?: "home" | "connect" | "sdk" | "interop" | "testbed" | "runtime" | "implementations" | "spec";
-  showSceneCount?: boolean;
+  current?: "home" | "connect" | "sdk" | "runtime" | "spec";
 }
 
-const { current, showSceneCount = false } = Astro.props;
+const { current } = Astro.props;
 const links = [
-  { href: "/", label: "Learn", key: "home" },
+  { href: "/", label: "Overview", key: "home" },
   { href: "/connect/", label: "Connect", key: "connect" },
-  { href: "/sdk/quickstart/", label: "Build", key: "sdk" },
-  { href: "/interop/", label: "Interop", key: "interop" },
-  { href: "/testbed/", label: "Test", key: "testbed" },
-  { href: "/implementations/", label: "Implement", key: "implementations" },
-  { href: "/spec/", label: "Spec", key: "spec" }
+  { href: "/sdk/", label: "Developers", key: "sdk" },
+  { href: "/spec/", label: "Specification", key: "spec" }
 ] as const;
 ---
 
@@ -25,11 +21,6 @@ const links = [
         <BrandMark compact />
         <span>mdbase</span>
       </a>
-      {
-        showSceneCount && (
-          <span id="scene-count" class="scene-count" aria-live="polite">01 / 06</span>
-        )
-      }
     </div>
     <div class="header-actions">
       <nav class="desktop-nav" aria-label="Primary navigation">