@casoon/pages-theme 0.0.0-stage → 0.12.8

package/components/FileSet.astro

@@ -0,0 +1,258 @@
+---
+/**
+ * The files a run produced, in three views:
+ *   tabs — CSS-only tabs, one pane per file (hero layout "stack")
+ *   grid — one card per file, the first lines of each
+ *   rail — file names with a one-line note, no content
+ * One named slot per file id holds the content; `rail` needs none.
+ */
+import config from 'virtual:casoon-pages/config';
+import { t } from '../lib/i18n';
+
+interface Props {
+  files: { id: string; name: string; path?: string; size?: string; note?: string }[];
+  view?: 'tabs' | 'grid' | 'rail';
+  label?: string;
+}
+
+const { files, view = 'tabs', label = t(config.lang).filesLabel } = Astro.props;
+const uid = `files-${files.map((f) => f.id).join('-')}`;
+// Narrow screens show the name without its suffix, so five tabs still fit on one line.
+// Only when the stems stay distinct — `data.txt` next to `data.xml` would read as two tabs alike.
+const stems = files.map((f) => f.name.replace(/\.[^.]+$/, ''));
+const abbreviate = new Set(stems).size === files.length;
+const panels =
+  view === 'rail'
+    ? []
+    : await Promise.all(files.map((f) => (Astro.slots.has(f.id) ? Astro.slots.render(f.id) : '')));
+---
+
+{
+  view === 'tabs' && (
+    <div class="files">
+      <div class:list={['list', abbreviate && 'abbrev']} role="radiogroup" aria-label={label}>
+        {files.map((f, i) => (
+          <>
+            <input
+              class="visually-hidden"
+              type="radio"
+              name={uid}
+              id={`${uid}-${i}`}
+              value={i}
+              checked={i === 0}
+            />
+            <label for={`${uid}-${i}`}>
+              <span class="full">{f.name}</span>
+              {abbreviate && <span class="stem">{stems[i]}</span>}
+            </label>
+          </>
+        ))}
+      </div>
+      {files.map((f, i) => (
+        <div class="panel" data-i={i}>
+          {/* Long lines scroll horizontally; tabindex keeps the region keyboard-reachable. */}
+          <pre tabindex="0" set:html={panels[i]} />
+          {(f.path || f.size) && (
+            <p class="meta">
+              {f.path && <span class="path">{f.path}</span>}
+              {f.size && <span>{f.size}</span>}
+            </p>
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+{
+  view === 'grid' && (
+    <ul class="grid" aria-label={label}>
+      {files.map((f, i) => (
+        <li>
+          <p class="name">{f.name}</p>
+          <pre set:html={panels[i]} />
+          {f.note && <p class="note">{f.note}</p>}
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+{
+  view === 'rail' && (
+    <ul class="rail" aria-label={label}>
+      {files.map((f) => (
+        <li>
+          <span class="dot" aria-hidden="true" />
+          <p class="name">{f.name}</p>
+          {f.note && <p class="note">{f.note}</p>}
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+<style>
+  .files {
+    overflow: hidden;
+    border: 1px solid var(--border);
+    border-radius: 14px;
+    background: var(--surface);
+    box-shadow: var(--shadow);
+  }
+  /* One row at every width: the names shorten first, and only then does the strip scroll. */
+  .list {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 2px;
+    overflow-x: auto;
+    border-bottom: 1px solid var(--border);
+    background: var(--bg-deep);
+    scrollbar-width: none;
+  }
+  .list::-webkit-scrollbar {
+    display: none;
+  }
+  label {
+    flex: 1 0 auto;
+    padding: 13px 10px;
+    border-top: 2px solid transparent;
+    color: var(--muted);
+    font-family: var(--font-mono);
+    font-size: 12.5px;
+    text-align: center;
+    cursor: pointer;
+  }
+  input:checked + label {
+    border-top-color: var(--accent);
+    background: var(--surface);
+    color: var(--heading);
+  }
+  input:focus-visible + label {
+    outline: 2px solid var(--accent);
+    outline-offset: -2px;
+  }
+  .stem {
+    display: none;
+  }
+  @media (max-width: 640px) {
+    .abbrev .full {
+      display: none;
+    }
+    .abbrev .stem {
+      display: inline;
+    }
+    label {
+      padding: 13px 6px;
+      font-size: 12px;
+    }
+  }
+  .panel {
+    display: none;
+  }
+  /* First panel is the no-:has() fallback. */
+  .panel[data-i='0'],
+  .files:has(input[value='1']:checked) .panel[data-i='1'],
+  .files:has(input[value='2']:checked) .panel[data-i='2'],
+  .files:has(input[value='3']:checked) .panel[data-i='3'],
+  .files:has(input[value='4']:checked) .panel[data-i='4'],
+  .files:has(input[value='5']:checked) .panel[data-i='5'] {
+    display: block;
+  }
+  .files:has(input:not([value='0']):checked) .panel[data-i='0'] {
+    display: none;
+  }
+  .panel pre {
+    min-height: 210px;
+    max-height: 300px;
+    margin: 0;
+    padding: 16px 20px;
+    overflow: auto;
+    color: var(--text);
+    font-size: 12.5px;
+    line-height: 1.75;
+  }
+  .meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px 10px;
+    margin: 0;
+    padding: 10px 20px;
+    border-top: 1px solid var(--border);
+    color: var(--muted);
+    font-family: var(--font-mono);
+    font-size: 11.5px;
+  }
+  .path {
+    color: var(--accent);
+  }
+
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
+    gap: 12px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .grid li {
+    padding: 16px 18px;
+    border: 1px solid var(--border);
+    border-top: 3px solid var(--accent);
+    border-radius: 12px;
+    background: var(--surface);
+  }
+  .grid .name {
+    margin: 0 0 8px;
+    color: var(--heading);
+    font-family: var(--font-mono);
+    font-size: 13.5px;
+    font-weight: 500;
+  }
+  .grid pre {
+    max-height: 72px;
+    margin: 0;
+    overflow: hidden;
+    color: var(--muted);
+    font-size: 11.5px;
+    line-height: 1.7;
+    /* The excerpt ends in a fade, so the cut reads as deliberate rather than broken. */
+    mask-image: linear-gradient(to bottom, #000 58%, transparent);
+  }
+  .grid .note {
+    margin: 8px 0 0;
+    font-size: 12.5px;
+    line-height: 1.5;
+  }
+
+  .rail {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
+    gap: 24px;
+    margin: 0;
+    padding: 22px 0 0;
+    border-top: 1px solid var(--border-strong);
+    list-style: none;
+  }
+  .rail .dot {
+    display: block;
+    width: 7px;
+    height: 7px;
+    margin-bottom: 12px;
+    border-radius: 50%;
+    background: var(--accent);
+  }
+  .rail .name {
+    margin: 0 0 5px;
+    color: var(--heading);
+    font-family: var(--font-mono);
+    font-size: 14px;
+    font-weight: 500;
+  }
+  .rail .note {
+    margin: 0;
+    color: var(--muted);
+    font-size: 12.5px;
+    line-height: 1.5;
+  }
+</style>

package/components/Footer.astro

@@ -0,0 +1,160 @@
+---
+import config from 'virtual:casoon-pages/config';
+import logo from '../assets/casoon-logo.svg';
+import logoDark from '../assets/casoon-logo-dark.svg';
+import { t } from '../lib/i18n';
+import { CASOON_URL, catalogUrl, url } from '../lib/url';
+
+const s = t(config.lang);
+const IMPRESSUM = `${CASOON_URL}impressum/`;
+const DATENSCHUTZ = `${CASOON_URL}datenschutz/`;
+
+const columns = [
+  {
+    title: s.footerProject,
+    links: [
+      ...(config.website ? [{ label: s.website(config.name), href: config.website }] : []),
+      { label: s.documentation, href: url('docs/') },
+      ...(config.hasShowcase ? [{ label: s.showcase, href: url('showcase/') }] : []),
+      ...(config.changelog ? [{ label: s.changelog, href: url('changelog/') }] : []),
+    ],
+  },
+  {
+    title: s.footerPackages,
+    links: [
+      ...(config.repo ? [{ label: 'GitHub', href: `https://github.com/${config.repo}` }] : []),
+      ...config.packages,
+    ],
+  },
+  {
+    title: 'CASOON',
+    links: [
+      { label: 'casoon.de', href: CASOON_URL },
+      ...(config.catalog
+        ? [{ label: s.catalogEntry(config.name), href: catalogUrl(config.lang, config.catalog) }]
+        : []),
+      // Only a public GitHub project is actually part of the open-source catalog.
+      ...(config.repo ? [{ label: s.allProjects, href: catalogUrl(config.lang) }] : []),
+    ],
+  },
+];
+---
+
+<footer class="footer">
+  <div class="cols">
+    <div>
+      <a class="logo" href={CASOON_URL}>
+        <img class="logo-light" src={logo.src} width="150" height="41" alt="CASOON" />
+        <img class="logo-dark" src={logoDark.src} width="150" height="41" alt="CASOON" />
+      </a>
+      <p>{config.description}</p>
+      <p class="by">{s.footerBy} · Jörn Seidel</p>
+    </div>
+    {
+      columns.filter((col) => col.links.length > 0).map((col) => (
+        <nav aria-label={col.title}>
+          <p class="title">{col.title}</p>
+          <ul>
+            {col.links.map((link) => (
+              <li>
+                <a href={link.href}>{link.label}</a>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      ))
+    }
+  </div>
+  <div class="bottom">
+    <span>{config.license && `${s.license(config.license)} · `}© {new Date().getFullYear()} Jörn Seidel</span>
+    <span class="legal">
+      <a href={IMPRESSUM}>{s.imprint}</a>
+      <a href={DATENSCHUTZ}>{s.privacyPolicy}</a>
+    </span>
+  </div>
+</footer>
+
+<style>
+  /* Black footer in both themes. */
+  .footer {
+    --text: #b4b1ac;
+    --muted: #b4b1ac;
+    --heading: #fff;
+    --border: rgb(255 255 255 / 0.12);
+
+    background: #11100e;
+    color: var(--text);
+    font-size: 14px;
+  }
+  .cols {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 40px;
+    max-width: var(--max);
+    margin: 0 auto;
+    padding: 80px 24px 48px;
+  }
+  .logo {
+    display: inline-block;
+    margin-bottom: 14px;
+  }
+  .logo img {
+    display: block;
+    width: 120px;
+    height: auto;
+  }
+  .logo-light {
+    display: none !important;
+  }
+  p {
+    margin: 0 0 6px;
+    max-width: 32ch;
+  }
+  .by {
+    color: var(--muted);
+    font-size: 12.5px;
+  }
+  .title {
+    margin-bottom: 16px;
+    color: var(--heading);
+    font-size: 18px;
+    font-weight: 500;
+  }
+  ul {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  ul a {
+    color: var(--text);
+  }
+  ul a:hover {
+    color: var(--heading);
+  }
+  .bottom {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 16px;
+    max-width: var(--max);
+    margin: 0 auto;
+    padding: 16px 24px 40px;
+    border-top: 1px solid var(--border);
+    color: var(--muted);
+    font-size: 13px;
+  }
+  .legal {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 18px;
+  }
+  .legal a {
+    color: var(--muted);
+  }
+  .legal a:hover {
+    color: var(--heading);
+  }
+</style>

package/components/Header.astro

@@ -0,0 +1,278 @@
+---
+import config from 'virtual:casoon-pages/config';
+import { t } from '../lib/i18n';
+import { url } from '../lib/url';
+
+const s = t(config.lang);
+const path = Astro.url.pathname;
+const websiteHost = config.website && new URL(config.website).host.replace(/^www\./, '');
+const nav = [
+  { label: s.docs, href: url('docs/') },
+  ...(config.demo ? [{ label: config.demo, href: url('demo/') }] : []),
+  ...(config.hasShowcase ? [{ label: s.showcase, href: url('showcase/') }] : []),
+  ...(config.changelog ? [{ label: s.changelog, href: url('changelog/') }] : []),
+];
+---
+
+<header class="header" data-wide={websiteHost || config.demo ? '' : undefined}>
+  <div class="inner">
+    <a class="home" href={url()}>
+      <span class="name">{config.name}</span>
+      {config.version && <span class="version">v{config.version}</span>}
+    </a>
+    <div class="links">
+      {
+        websiteHost && (
+          <a class="website" href={config.website}>
+            {websiteHost}
+          </a>
+        )
+      }
+      <nav aria-label={s.mainNav}>
+        <ul>
+          {
+            nav.map((item) => (
+              <li>
+                <a href={item.href} aria-current={path.startsWith(item.href) ? 'page' : undefined}>
+                  {item.label}
+                </a>
+              </li>
+            ))
+          }
+        </ul>
+        <span class="sep" aria-hidden="true"></span>
+        {config.repo && <a class="cta" href={`https://github.com/${config.repo}`}>GitHub</a>}
+      </nav>
+    </div>
+    <button class="theme" type="button" data-theme-toggle aria-label={s.darkTheme} aria-pressed="false" hidden>
+      <!-- Shows the theme a click switches to: moon while light, sun while dark. -->
+      <svg class="icon-moon" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
+        <path d="M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z" />
+      </svg>
+      <svg class="icon-sun" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
+        <circle cx="12" cy="12" r="4" />
+        <path d="M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M5.3 18.7l1.4-1.4M17.3 6.7l1.4-1.4" />
+      </svg>
+    </button>
+  </div>
+</header>
+
+<style>
+  /* Floating white pill over the page. */
+  .header {
+    position: sticky;
+    top: 0;
+    z-index: 50;
+    padding: 14px 24px 0;
+    pointer-events: none;
+  }
+  .inner {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    max-width: 1000px;
+    height: var(--header-h);
+    margin: 0 auto;
+    padding: 0 10px 0 24px;
+    border-radius: 40px;
+    background: var(--surface);
+    box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
+    pointer-events: auto;
+  }
+  .home {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: var(--heading);
+  }
+  .home:hover {
+    color: var(--heading);
+  }
+  .name {
+    font-size: 19px;
+    font-weight: 500;
+    letter-spacing: -0.01em;
+  }
+  .version {
+    padding: 1px 7px;
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    color: var(--muted);
+    font-family: var(--font-mono);
+    font-size: 12px;
+  }
+  .website {
+    padding: 3px 10px;
+    border: 1px solid var(--border-strong);
+    border-radius: 999px;
+    color: var(--text);
+    font-size: 13.5px;
+    white-space: nowrap;
+  }
+  .website:hover {
+    border-color: var(--accent);
+    color: var(--heading);
+  }
+  .links {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    gap: 20px;
+    min-width: 0;
+  }
+  nav {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    margin-left: auto;
+  }
+  ul {
+    display: flex;
+    gap: 2px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  nav a {
+    display: block;
+    padding: 7px 14px;
+    border-radius: 999px;
+    color: var(--heading);
+    font-size: 15px;
+    font-weight: 500;
+    white-space: nowrap;
+  }
+  nav a:hover {
+    color: var(--accent);
+  }
+  nav a[aria-current='page'] {
+    color: var(--heading);
+    font-weight: 600;
+  }
+  nav a.cta {
+    padding: 8px 18px;
+    background: linear-gradient(180deg, var(--accent-top) 0%, var(--accent-fill) 25%, var(--accent-fill) 100%);
+    color: #fff;
+  }
+  .sep {
+    width: 1px;
+    height: 20px;
+    margin: 0 8px;
+    background: var(--border);
+  }
+  .theme {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    /* Close to the GitHub link, as if it were the last nav entry: 20px gap - 14px. */
+    margin-left: -14px;
+    border: 0;
+    border-radius: 999px;
+    background: var(--bg);
+    color: var(--heading);
+    cursor: pointer;
+  }
+  .theme:hover {
+    border-color: var(--border-strong);
+    color: var(--heading);
+  }
+  .theme[hidden] {
+    display: none;
+  }
+  .theme svg {
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.75;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  :global([data-theme='light']) .icon-sun,
+  :global([data-theme='dark']) .icon-moon {
+    display: none;
+  }
+  /* Narrow screens: name and theme toggle on the first row, the links on a second row that
+     stays one line and scrolls sideways when it does not fit — no wrapped labels, nothing cut
+     off. A header with a website pill or a demo entry needs the second row earlier. The website
+     pill is dropped from that row: it repeats in the footer's "Project" column, and it was the
+     single widest entry, pushing GitHub out of view. */
+  @media (max-width: 640px) {
+    :global(:root) {
+      --header-h: 92px;
+    }
+    .header {
+      padding: 8px 8px 0;
+    }
+    .inner {
+      flex-wrap: wrap;
+      align-content: center;
+      gap: 2px 8px;
+      height: var(--header-h);
+      padding: 0 16px;
+      border-radius: 24px;
+    }
+    .links {
+      flex: 0 0 calc(100% + 32px);
+      order: 3;
+      gap: 8px;
+      margin: 0 -16px;
+      /* Room for the focus outline, which the scroll container would clip. */
+      padding: 3px 8px;
+      overflow-x: auto;
+      scrollbar-width: none;
+    }
+    .website {
+      display: none;
+    }
+    .theme {
+      margin-left: auto;
+    }
+    nav {
+      margin-left: 0;
+    }
+    .sep {
+      display: none;
+    }
+    nav a {
+      padding: 7px 8px;
+    }
+  }
+  @media (max-width: 900px) {
+    :global(:root:has(.header[data-wide])) {
+      --header-h: 92px;
+    }
+    [data-wide] .inner {
+      flex-wrap: wrap;
+      align-content: center;
+      gap: 2px 8px;
+      height: var(--header-h);
+      padding: 0 16px;
+    }
+    [data-wide] .links {
+      flex: 0 0 calc(100% + 32px);
+      order: 3;
+      gap: 8px;
+      margin: 0 -16px;
+      /* Room for the focus outline, which the scroll container would clip. */
+      padding: 3px 8px;
+      overflow-x: auto;
+      scrollbar-width: none;
+    }
+    [data-wide] .website {
+      display: none;
+    }
+    [data-wide] .theme {
+      margin-left: auto;
+    }
+    [data-wide] nav {
+      margin-left: 0;
+    }
+    [data-wide] .sep {
+      display: none;
+    }
+    [data-wide] nav a {
+      padding: 7px 8px;
+    }
+  }
+</style>