likwid/frontend/src/layouts/PublicLayout.astro

---
interface Props {
  title: string;
  description?: string;
}

import { DEFAULT_THEME, themes as themeRegistry } from '../lib/themes';
import DesignSystemStyles from '../components/ui/DesignSystemStyles.astro';

function isEnabled(v: string | undefined): boolean {
  if (!v) return false;
  const n = v.trim().toLowerCase();
  return n === '1' || n === 'true' || n === 'yes' || n === 'on';
}

const { title, description = "Likwid is a modular governance engine for distributed organizations, open source communities, and civic movements." } = Astro.props;

const publicDemoSite = isEnabled((globalThis as any).process?.env?.PUBLIC_DEMO_SITE);

const themes = Object.fromEntries(
  Object.entries(themeRegistry).map(([id, t]) => [id, { isDark: t.isDark, colors: t.colors }]),
);

const defaultTheme = DEFAULT_THEME;
---

<!doctype html>
<html lang="en" data-theme="neutral" data-theme-mode="dark">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content={description} />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
    <title>{title} | Likwid</title>
    <script is:inline define:vars={{ themes, defaultTheme }}>
      (function() {
        const saved = localStorage.getItem('likwid-theme') || defaultTheme;
        const theme = themes[saved] || themes[defaultTheme];
        const root = document.documentElement;
        const c = theme.colors;
        root.style.setProperty('--color-bg', c.bg);
        root.style.setProperty('--color-bg-alt', c.bgAlt);
        root.style.setProperty('--color-surface', c.surface);
        root.style.setProperty('--color-surface-hover', c.surfaceHover);
        root.style.setProperty('--color-border', c.border);
        root.style.setProperty('--color-border-hover', c.borderHover);
        root.style.setProperty('--color-text', c.text);
        root.style.setProperty('--color-text-muted', c.textMuted);
        root.style.setProperty('--color-text-inverse', c.textInverse);
        root.style.setProperty('--color-primary', c.primary);
        root.style.setProperty('--color-primary-hover', c.primaryHover);
        root.style.setProperty('--color-primary-muted', c.primaryMuted);
        root.style.setProperty('--color-secondary', c.secondary);
        root.style.setProperty('--color-secondary-hover', c.secondaryHover);
        root.style.setProperty('--color-info', c.info);
        root.style.setProperty('--color-info-hover', c.infoHover);
        root.style.setProperty('--color-info-muted', c.infoMuted);
        root.style.setProperty('--color-neutral', c.neutral);
        root.style.setProperty('--color-neutral-hover', c.neutralHover);
        root.style.setProperty('--color-neutral-muted', c.neutralMuted);
        root.style.setProperty('--color-success', c.success);
        root.style.setProperty('--color-success-muted', c.successMuted);
        root.style.setProperty('--color-success-hover', c.successHover);
        root.style.setProperty('--color-warning', c.warning);
        root.style.setProperty('--color-warning-muted', c.warningMuted);
        root.style.setProperty('--color-error', c.error);
        root.style.setProperty('--color-error-muted', c.errorMuted);
        root.style.setProperty('--color-error-hover', c.errorHover);
        root.style.setProperty('--color-link', c.link);
        root.style.setProperty('--color-link-visited', c.linkVisited);
        root.style.setProperty('--color-overlay', c.overlay);
        root.style.setProperty('--color-field-bg', c.fieldBg);
        root.style.setProperty('--color-on-primary', c.onPrimary);
        root.setAttribute('data-theme', saved);
        root.setAttribute('data-theme-mode', theme.isDark ? 'dark' : 'light');
      })();
    </script>
  </head>
  <body>
    <div class="public-app">
      <header class="public-header">
        <nav class="public-nav" id="public-nav">
          <a href="/" class="logo">Likwid</a>
          <button
            class="nav-toggle"
            id="public-nav-toggle"
            type="button"
            aria-label="Toggle navigation"
            aria-expanded="false"
            aria-controls="public-nav-menu"
          >
            <span class="nav-toggle-icon" aria-hidden="true"></span>
          </button>
          <div class="nav-menu" id="public-nav-menu">
            <div class="nav-links">
              <a href="/about">About</a>
              <a href="/features">Features</a>
              <a href="/manifesto">Manifesto</a>
              <a href="/docs">Documentation</a>
            </div>
            <div class="nav-actions">
              <a href="/demo" class="ui-btn ui-btn-primary">Explore Demo</a>
              {!publicDemoSite ? <a href="/login" class="ui-btn ui-btn-secondary">Sign In</a> : null}
            </div>
          </div>
        </nav>
      </header>
      <main class="public-main">
        <slot />
      </main>
      <footer class="public-footer">
        <div class="footer-content">
          <div class="footer-section">
            <h4>Likwid</h4>
            <p>Modular governance for distributed organizations.</p>
          </div>
          <div class="footer-section">
            <h4>Learn</h4>
            <ul>
              <li><a href="/about">About</a></li>
              <li><a href="/features">Features</a></li>
              <li><a href="/manifesto">Manifesto</a></li>
              <li><a href="/docs">Documentation</a></li>
            </ul>
          </div>
          <div class="footer-section">
            <h4>Community</h4>
            <ul>
              <li><a href="https://codeberg.org/likwid/likwid" target="_blank" rel="noopener">Codeberg</a></li>
              <li><a href="/contributing">Contributing</a></li>
              <li><a href="/code-of-conduct">Code of Conduct</a></li>
            </ul>
          </div>
          <div class="footer-section">
            <h4>Platform</h4>
            <ul>
              <li><a href="/demo">Demo Instance</a></li>
              {!publicDemoSite ? <li><a href="/login">Sign In</a></li> : null}
              {!publicDemoSite ? <li><a href="/register">Create Account</a></li> : null}
            </ul>
          </div>
        </div>
        <div class="footer-bottom">
          <p>&copy; 2026 Likwid. Free and open source software under EUPL-1.2.</p>
        </div>
      </footer>
    </div>
    <script>
      const nav = document.getElementById('public-nav');
      const toggle = document.getElementById('public-nav-toggle');

      function setOpen(open) {
        if (!nav || !toggle) return;
        nav.classList.toggle('is-open', open);
        toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
      }

      if (nav && toggle) {
        toggle.addEventListener('click', () => {
          setOpen(!nav.classList.contains('is-open'));
        });

        nav.querySelectorAll('a').forEach((link) => {
          link.addEventListener('click', () => {
            if (window.matchMedia('(max-width: 768px)').matches) {
              setOpen(false);
            }
          });
        });

        window.addEventListener('resize', () => {
          if (window.innerWidth > 768) {
            setOpen(false);
          }
        });
      }
    </script>
  </body>
</html>

<DesignSystemStyles />

<style>
  .public-app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  .public-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(24, 24, 27, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
  }

  .public-nav {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
  }

  .nav-menu {
    display: flex;
    align-items: center;
    gap: 2rem;
  }

  .nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text);
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--easing-standard), border-color var(--motion-fast) var(--easing-standard);
  }

  .nav-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-border-hover);
  }

  .nav-toggle-icon,
  .nav-toggle-icon::before,
  .nav-toggle-icon::after {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
    transition: transform var(--motion-fast) var(--easing-standard), top var(--motion-fast) var(--easing-standard), background-color var(--motion-fast) var(--easing-standard);
  }

  .nav-toggle-icon {
    position: relative;
  }

  .nav-toggle-icon::before,
  .nav-toggle-icon::after {
    content: '';
    position: absolute;
    left: 0;
  }

  .nav-toggle-icon::before {
    top: -6px;
  }

  .nav-toggle-icon::after {
    top: 6px;
  }

  .public-nav.is-open .nav-toggle-icon {
    background: transparent;
  }

  .public-nav.is-open .nav-toggle-icon::before {
    top: 0;
    transform: rotate(45deg);
  }

  .public-nav.is-open .nav-toggle-icon::after {
    top: 0;
    transform: rotate(-45deg);
  }

  .logo {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.02em;
  }

  .logo:hover {
    color: var(--color-primary);
  }

  .nav-links {
    display: flex;
    gap: 2rem;
  }

  .nav-links a {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    padding: 0.5rem 0;
    position: relative;
  }

  .nav-links a:hover {
    color: var(--color-text);
  }

  .nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width var(--motion-normal) var(--easing-standard);
  }

  .nav-links a:hover::after {
    width: 100%;
  }

  .nav-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
  }

  .public-main {
    flex: 1;
  }

  .public-footer {
    background: var(--color-bg-alt);
    border-top: 1px solid var(--color-border);
    padding: 4rem 2rem 2rem;
    margin-top: 4rem;
  }

  .footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
  }

  @media (max-width: 768px) {
    .footer-content {
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
    }
  }

  @media (max-width: 480px) {
    .footer-content {
      grid-template-columns: 1fr;
    }
  }

  .footer-section h4 {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text);
    margin-bottom: 1rem;
  }

  .footer-section p {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
  }

  .footer-section ul {
    list-style: none;
  }

  .footer-section li {
    margin-bottom: 0.5rem;
  }

  .footer-section a {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
  }

  .footer-section a:hover {
    color: var(--color-primary);
  }

  .footer-bottom {
    max-width: 1200px;
    margin: 3rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
    text-align: center;
  }

  .footer-bottom p {
    color: var(--color-text-muted);
    font-size: 0.875rem;
  }

  @media (max-width: 768px) {
    .public-nav {
      flex-wrap: wrap;
      padding: 1rem;
    }

    .nav-toggle {
      display: inline-flex;
    }

    .nav-menu {
      display: none;
      order: 3;
      width: 100%;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
      padding-top: 1rem;
      border-top: 1px solid var(--color-border);
      margin-top: 1rem;
    }

    .public-nav.is-open .nav-menu {
      display: flex;
    }

    .nav-links {
      width: 100%;
      justify-content: center;
      gap: 1rem;
    }

    .nav-actions {
      width: 100%;
      justify-content: center;
      flex-wrap: wrap;
    }
  }
</style>