fortunsolabs-web-shell

🛠️ Internal plumbing — nothing to see here. Shared header, footer, and design tokens for the Fortunso Labs websites. This repo is public only so our app builds (and Cloudflare Pages) can npm install it without auth. It is not a product, not deployed, and not meant for general use. If you wandered in: there's nothing to run here — carry on 🙂

A tiny Astro package so every app site (each its own repo, its own subdomain) wears the same skin:

• Layout.astro — base HTML page: design tokens + Header + content slot + Footer.
• Header.astro — the Fortunso Labs header with a ← back-to-studio button.
• Footer.astro — shared footer (with an optional slot for app links).
• tokens.css — the "lab notebook" design system (Fraunces + Hanken Grotesk + JetBrains Mono, paper + graph-grid background, teal accent). Tokens are namespaced --fl-*.

Use it in an app (Fortunso devs)

npm install github:fortunso/fortunsolabs-web-shell

---
// src/pages/index.astro
import Layout from "fortunsolabs-web-shell/Layout.astro";
---
<Layout title="HeyGuide" description="Your AI audio tour guide.">
  <header class="hero">
    <div class="hero-inner">
      <p class="brandmark reveal">HeyGuide</p>
      <h1 class="hero-title reveal">Hear the city <em>talk</em>.</h1>
      <p class="hero-lead reveal">Walk any city and hear its stories.</p>
      <a class="cta reveal" href="#how">How it works ↓</a>
    </div>
  </header>

  <main class="container">
    <section class="section">…</section>
  </main>

  <!-- app-specific footer links land above the Fortunso attribution -->
  <Fragment slot="footer">
    <a href="/privacy">Privacy</a> · <a href="/terms">Terms</a>
  </Fragment>
</Layout>

The studio site (fortunsolabs.com) uses the same layout with showBack={false}.

If Astro doesn't pick up the components

A git dependency that ships .astro source sometimes needs to be opted out of SSR externalization. If you hit an import error, add to astro.config.mjs:

export default defineConfig({
  vite: { ssr: { noExternal: ["fortunsolabs-web-shell"] } },
});

Versioning

Bump version in package.json and tag a release. Apps pin a tag (github:fortunso/fortunsolabs-web-shell#v0.1.0) so a header change ships only when each app updates its pin.