first-commit

apps/landing-page/app/_components/header.tsx

@@ -0,0 +1,80 @@
+/*
+ * Sticky Header — static markup rendered at build time. Headroom-style
+ * hide/show and the live GitHub star count are attached by the tiny inline
+ * script in `app/pages/index.astro`, so this marketing page ships no React
+ * runtime to the browser.
+ */
+
+const REPO = 'https://github.com/nexu-io/open-design';
+const REPO_RELEASES = `${REPO}/releases`;
+const REPO_SKILLS = `${REPO}/tree/main/skills`;
+const REPO_DESIGN_SYSTEMS = `${REPO}/tree/main/design-systems`;
+
+const ext = {
+  target: '_blank',
+  rel: 'noreferrer noopener',
+} as const;
+
+export function Header() {
+  return (
+    <header className='nav' data-od-id='nav' data-nav-headroom>
+      <div className='container nav-inner'>
+        <a href='#top' className='brand'>
+          <span className='brand-mark'>Ø</span>
+          <span>Open Design</span>
+          <span className='brand-meta'>
+            <b>Studio Nº 01</b>Berlin / Open / Earth
+          </span>
+        </a>
+        <nav>
+          <ul className='nav-links'>
+            <li>
+              <a href={REPO_SKILLS} {...ext}>
+                Skills<span className='num'>31</span>
+              </a>
+            </li>
+            <li>
+              <a href={REPO_DESIGN_SYSTEMS} {...ext}>
+                Systems<span className='num'>72</span>
+              </a>
+            </li>
+            <li>
+              <a href='#agents'>
+                Agents<span className='num'>12</span>
+              </a>
+            </li>
+            <li>
+              <a href='#labs'>
+                Labs<span className='num'>05</span>
+              </a>
+            </li>
+            <li>
+              <a href='#contact'>Contact</a>
+            </li>
+          </ul>
+        </nav>
+        <div className='nav-side'>
+          <a
+            className='nav-cta ghost'
+            href={REPO_RELEASES}
+            aria-label='Download Open Design desktop'
+            title='Download the desktop app'
+            {...ext}
+          >
+            Download
+          </a>
+          <a
+            className='nav-cta'
+            href={REPO}
+            aria-label='Star Open Design on GitHub'
+            title='Click to star us on GitHub'
+            {...ext}
+          >
+            Star · <span data-github-stars>0</span>
+          </a>
+          <span className='status-dot' aria-hidden='true' />
+        </div>
+      </div>
+    </header>
+  );
+}

apps/landing-page/app/_components/wire.tsx

@@ -0,0 +1,132 @@
+/*
+ * Global wire — the slim editorial ticker between the hero and About.
+ *
+ * The cities row (top) is decorative and stays static. The contributors
+ * row (bottom, reverse direction) renders a static fallback at build time;
+ * `app/pages/index.astro` enhances it with a tiny inline GitHub fetch so
+ * the browser never downloads React.
+ *
+ *   GET https://api.github.com/repos/nexu-io/open-design/contributors
+ *
+ * Each entry becomes a `<a class='wire-item is-link'>` linking straight
+ * to the contributor's GitHub profile. We:
+ *
+ *   - filter out bot accounts (`type === 'Bot'` or `*[bot]` logins),
+ *   - keep the top N by contribution count,
+ *   - apply named editorial roles to known handles (kami, guizang…)
+ *     and fall back to "<count> commits" for everyone else,
+ *   - always append a trailing "@you · be next" link to the
+ *     contributors graph so the editorial CTA stays intact.
+ *
+ * If the fetch is blocked (offline, rate limited, network failure), the
+ * fallback list stays visible — the section never goes empty.
+ */
+
+const REPO = 'https://github.com/nexu-io/open-design';
+const REPO_CONTRIBUTORS_PAGE = `${REPO}/graphs/contributors`;
+
+const ext = {
+  target: '_blank',
+  rel: 'noreferrer noopener',
+} as const;
+
+const TRAILING_CTA: Contributor = {
+  handle: 'you',
+  role: 'be next',
+  href: REPO_CONTRIBUTORS_PAGE,
+};
+
+type Contributor = {
+  handle: string;
+  role: string;
+  href: string;
+};
+
+// SSR-safe initial list. Used until the GitHub fetch resolves AND as
+// the permanent fallback when the network is unavailable. Mirrors the
+// canonical wire row in `skills/open-design-landing/example.html` so
+// hydration is byte-stable against the static reference rendering.
+const FALLBACK: ReadonlyArray<Contributor> = [
+  { handle: 'tw93', role: 'kami', href: 'https://github.com/tw93' },
+  { handle: 'op7418', role: 'guizang', href: 'https://github.com/op7418' },
+  {
+    handle: 'alchaincyf',
+    role: 'huashu',
+    href: 'https://github.com/alchaincyf',
+  },
+  {
+    handle: 'multica-ai',
+    role: 'daemon',
+    href: 'https://github.com/multica-ai',
+  },
+  {
+    handle: 'OpenCoworkAI',
+    role: 'codesign',
+    href: 'https://github.com/OpenCoworkAI',
+  },
+  { handle: 'nexu-io', role: 'studio', href: 'https://github.com/nexu-io' },
+  TRAILING_CTA,
+];
+
+type City = { name: string; coord: string };
+
+export function Wire({ cities }: { cities: ReadonlyArray<City> }) {
+  // Doubled tracks are required for the seamless `translateX(-50%)`
+  // marquee loop defined in globals.css.
+  const cityTrack = [...cities, ...cities];
+  const contribTrack = [...FALLBACK, ...FALLBACK];
+
+  return (
+    <section
+      className='wire'
+      data-od-id='wire'
+      aria-label='Global wire — cities and contributors'
+    >
+      <div className='container wire-inner'>
+        <div className='wire-left'>
+          <span className='wire-mark' aria-hidden='true'>
+            <span className='wire-pulse' />
+          </span>
+          <span className='wire-title'>
+            <b>From the field</b>
+            <span>
+              Open · {cities.length} cities ·{' '}
+              <span data-wire-contributors-count>{FALLBACK.length - 1}</span>{' '}
+              contributors
+            </span>
+          </span>
+        </div>
+        <div className='wire-rows'>
+          <div className='wire-row'>
+            <div className='marquee-track' aria-hidden='true'>
+              {cityTrack.map((c, i) => (
+                <span className='wire-item' key={`city-${i}`}>
+                  <span className='wire-dot'>·</span>
+                  <span className='wire-coord'>{c.coord}</span>
+                  <span className='wire-name'>{c.name}</span>
+                </span>
+              ))}
+            </div>
+          </div>
+          <div className='wire-row reverse'>
+            <div className='marquee-track' data-wire-contributors-track>
+              {contribTrack.map((c, i) => (
+                <a
+                  className='wire-item is-link'
+                  key={`contrib-${i}-${c.handle}`}
+                  href={c.href}
+                  aria-label={`Open ${c.handle} on GitHub`}
+                  {...ext}
+                >
+                  <span className='wire-dot'>·</span>
+                  <span className='wire-handle'>@{c.handle}</span>
+                  <span className='wire-role'>{c.role}</span>
+                </a>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}