@casoon/pages-theme 0.0.0-stage → 0.12.6

package/components/Hero.astro

@@ -0,0 +1,318 @@
+---
+/**
+ * Start-page hero in three layouts:
+ *   split     — text beside the `output` slot (default)
+ *   stack     — centred text, then a band: `source` slot → `command` → `output` slot
+ *   editorial — full-width title, lead beside the default slot, `output` slot below
+ * `tone="invert"` puts any of them on a dark brand ground.
+ */
+import config from 'virtual:casoon-pages/config';
+import { t } from '../lib/i18n';
+
+interface Props {
+  title: string;
+  lead: string;
+  eyebrow?: string;
+  layout?: 'split' | 'stack' | 'editorial';
+  /** Shown between the `source` and `output` slots of the stack layout, e.g. `astro build`. */
+  command?: string;
+  tone?: 'plain' | 'invert';
+}
+
+const {
+  title,
+  lead,
+  eyebrow = t(config.lang).heroEyebrow,
+  layout = 'split',
+  command,
+  tone = 'plain',
+} = Astro.props;
+const hasSource = Astro.slots.has('source');
+---
+
+<section class:list={['hero', `is-${layout}`, tone === 'invert' && 'invert']}>
+  {
+    layout === 'split' && (
+      <div class="inner">
+        <div>
+          <p class="eyebrow">{eyebrow}</p>
+          <h1>{title}</h1>
+          <p class="lead">{lead}</p>
+          <slot />
+        </div>
+        <div class="output glow">
+          <div class="glow-inner">
+            <slot name="output" />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  {
+    layout === 'stack' && (
+      <div class="inner">
+        <div class="head">
+          <p class="eyebrow">{eyebrow}</p>
+          <h1>{title}</h1>
+          <p class="lead">{lead}</p>
+        </div>
+        <div class="band">
+          {hasSource && (
+            <div class="source">
+              <slot name="source" />
+            </div>
+          )}
+          {hasSource && command && (
+            <p class="step">
+              <span class="pill">{command}</span>
+              <span class="arrow" aria-hidden="true">
+                →
+              </span>
+            </p>
+          )}
+          <div class="output">
+            <slot name="output" />
+          </div>
+        </div>
+        <div class="actions">
+          <slot />
+        </div>
+      </div>
+    )
+  }
+
+  {
+    layout === 'editorial' && (
+      <div class="inner">
+        <p class="eyebrow">{eyebrow}</p>
+        <h1>{title}</h1>
+        <div class="row">
+          <p class="lead">{lead}</p>
+          <div class="actions">
+            <slot />
+          </div>
+        </div>
+        <div class="output">
+          <slot name="output" />
+        </div>
+      </div>
+    )
+  }
+</section>
+
+<style>
+  /* Sand ground. */
+  .hero {
+    position: relative;
+    margin-top: calc(-1 * (var(--header-h) + 14px));
+    padding-top: calc(var(--header-h) + 14px);
+    background: var(--bg-deep);
+    overflow: hidden;
+  }
+  .inner {
+    position: relative;
+    max-width: 1240px;
+    margin: 0 auto;
+    padding: 88px 40px 140px;
+  }
+  .eyebrow {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin: 0 0 18px;
+    color: var(--heading);
+    font-size: 15px;
+    line-height: 1.6;
+    text-transform: uppercase;
+  }
+  .eyebrow::before {
+    content: '';
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--accent-fill);
+  }
+  h1 {
+    margin: 0 0 28px;
+    color: var(--heading);
+    font-size: clamp(44px, 6vw, 84px);
+    font-weight: 600;
+    letter-spacing: -0.035em;
+    line-height: 0.98;
+  }
+  .lead {
+    max-width: 31rem;
+    margin: 0 0 34px;
+    color: var(--heading);
+    font-size: 20px;
+    line-height: 1.6;
+  }
+  /* Output in a card whose edge carries a slowly turning orange arc. */
+  .glow {
+    position: relative;
+    isolation: isolate;
+    overflow: hidden;
+    border-radius: 30px;
+    background: #f0ebe2;
+    box-shadow: var(--shadow-lift);
+  }
+  .glow::before {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    top: 50%;
+    left: 50%;
+    width: 220%;
+    aspect-ratio: 1;
+    translate: -50% -50%;
+    background: conic-gradient(rgb(236 74 32 / 0) 0deg 185deg, #ec4a20 360deg);
+    animation: glow-spin 8.15s linear infinite;
+  }
+  .glow-inner {
+    margin: 4px;
+    overflow: hidden;
+    border-radius: 27px;
+    background: var(--surface);
+  }
+  .glow-inner :global(.terminal),
+  .glow-inner :global(figure) {
+    border: 0;
+    border-radius: 0;
+  }
+  @keyframes glow-spin {
+    to {
+      rotate: 360deg;
+    }
+  }
+  .output {
+    min-width: 0;
+  }
+
+  /* Text gets a little more than half and a slightly smaller title, so a title of about 40
+     characters fits on two lines at desktop width; in two equal halves it took three. */
+  .is-split .inner {
+    display: grid;
+    gap: 44px;
+    align-items: center;
+  }
+  @media (min-width: 900px) {
+    .is-split .inner {
+      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
+      gap: 48px;
+    }
+    .is-split h1 {
+      font-size: clamp(44px, 5.4vw, 80px);
+    }
+  }
+
+  .is-stack .head {
+    text-align: center;
+  }
+  .is-stack .eyebrow {
+    display: inline-flex;
+  }
+  .is-stack .lead {
+    max-width: 62ch;
+    margin-inline: auto;
+  }
+  /* Input over output, not beside it: side by side, neither the source nor the file names
+     get enough width inside --max — the code is cut off and the names wrap to a second row. */
+  .is-stack .band {
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+  }
+  .is-stack .source {
+    min-width: 0;
+  }
+  .step {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    margin: 0;
+  }
+  .pill {
+    padding: 8px 14px;
+    border-radius: 999px;
+    background: var(--brand);
+    /* The page ground, not white: on the light brand of the dark theme white reaches only 3:1. */
+    color: var(--bg);
+    font-family: var(--font-mono);
+    font-size: 12px;
+    white-space: nowrap;
+  }
+  .arrow {
+    rotate: 90deg;
+    color: var(--brand);
+    font-size: 20px;
+    line-height: 1;
+  }
+  .actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 14px;
+  }
+  .is-stack .actions {
+    justify-content: center;
+    margin-top: 34px;
+  }
+
+  .is-editorial h1 {
+    margin-bottom: 36px;
+    font-size: clamp(38px, 6.2vw, 74px);
+    line-height: 1.02;
+  }
+  .is-editorial .row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 32px;
+    margin-bottom: 44px;
+  }
+  /* Lead and actions share the row about evenly; the actions keep the install box's width, so
+     the badges go below it instead of squeezing the lead into a narrow column. Both start at the
+     top, so the lead follows the title directly however tall the actions are. */
+  .is-editorial .lead {
+    flex: 1 1 380px;
+    margin: 0;
+  }
+  .is-editorial .actions {
+    flex: 0 1 470px;
+  }
+
+  /* Dark brand ground. Child components follow through the tokens. */
+  .invert {
+    --heading: #fff;
+    --text: rgb(255 255 255 / 0.78);
+    --muted: rgb(255 255 255 / 0.68);
+    --border: rgb(255 255 255 / 0.2);
+    --border-strong: rgb(255 255 255 / 0.32);
+    --surface: rgb(255 255 255 / 0.07);
+    --bg-deep: rgb(255 255 255 / 0.1);
+    --code-bg: rgb(255 255 255 / 0.07);
+    --accent: var(--invert-accent);
+    --shadow: none;
+
+    background: var(--invert-bg);
+    color: var(--text);
+  }
+
+  @media (max-width: 640px) {
+    .inner {
+      padding: 56px 20px 120px;
+    }
+    .is-stack .actions {
+      margin-top: 26px;
+    }
+    .is-editorial h1 {
+      margin-bottom: 26px;
+    }
+    .is-editorial .row {
+      margin-bottom: 32px;
+    }
+  }
+</style>

package/components/Install.astro

@@ -0,0 +1,154 @@
+---
+/** Install commands per ecosystem: CSS-only tabs, copy button when JS is available. */
+import config from 'virtual:casoon-pages/config';
+import { t } from '../lib/i18n';
+
+interface Props {
+  commands: { label: string; command: string }[];
+  label?: string;
+}
+
+const s = t(config.lang);
+const { commands, label = s.installLabel } = Astro.props;
+const uid = `install-${commands.map((c) => c.label.replace(/\W/g, '')).join('-')}`;
+
+/** Splits a command into the units a line may break between: words, and inside a word the path
+    segments after each "/" ("https://" is one). "./", "../", "~/" and a leading "/" stay with
+    what follows. Spaces are kept as separate parts. */
+const units = (command: string) =>
+  command
+    .split(/( +)/)
+    .filter(Boolean)
+    .map((word) =>
+      word.startsWith(' ') ? word : word.split(/(?<=\/)(?!\/)(?<!^(?:\.{1,2}|~)?\/)/)
+    );
+---
+
+<div class="install">
+  <div class="list" role="radiogroup" aria-label={label}>
+    {
+      commands.map((c, i) => (
+        <>
+          <input
+            class="visually-hidden"
+            type="radio"
+            name={uid}
+            id={`${uid}-${i}`}
+            value={i}
+            checked={i === 0}
+          />
+          <label for={`${uid}-${i}`}>{c.label}</label>
+        </>
+      ))
+    }
+  </div>
+  {
+    commands.map((c, i) => (
+      <div class="panel" data-i={i}>
+        <span class="prompt" aria-hidden="true">
+          $
+        </span>
+        {/* Long commands wrap instead of being cut off, so all of it stays visible and selectable.
+            Each unit is an inline-block, so a line breaks only at spaces and after a "/", never at a
+            hyphen; a unit wider than the box still breaks inside as a last resort. */}
+        <code id={`${uid}-cmd-${i}`}>
+          {units(c.command).map((part) =>
+            typeof part === 'string' ? part : part.map((unit) => <span class="unit">{unit}</span>),
+          )}
+        </code>
+        <button class="copy" type="button" data-copy={`${uid}-cmd-${i}`} data-copied={s.copied} hidden>
+          {s.copy}
+        </button>
+      </div>
+    ))
+  }
+</div>
+
+<style>
+  .install {
+    max-width: 470px;
+    overflow: hidden;
+    border: 1px solid var(--border);
+    border-radius: 14px;
+    background: var(--surface);
+    box-shadow: var(--shadow);
+  }
+  .list {
+    display: flex;
+    gap: 2px;
+    padding: 6px;
+    border-bottom: 1px solid var(--border);
+  }
+  label {
+    flex: 1;
+    padding: 7px 10px;
+    border-radius: 8px;
+    color: var(--muted);
+    font-family: var(--font-mono);
+    font-size: 12.5px;
+    text-align: center;
+    cursor: pointer;
+  }
+  input:checked + label {
+    background: var(--bg-deep);
+    color: var(--heading);
+  }
+  input:focus-visible + label {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+  .panel {
+    display: none;
+    align-items: baseline;
+    gap: 12px;
+    padding: 14px 16px;
+  }
+  /* First panel is the no-:has() fallback. */
+  .panel[data-i='0'],
+  .install:has(input[value='1']:checked) .panel[data-i='1'],
+  .install:has(input[value='2']:checked) .panel[data-i='2'],
+  .install:has(input[value='3']:checked) .panel[data-i='3'],
+  .install:has(input[value='4']:checked) .panel[data-i='4'],
+  .install:has(input[value='5']:checked) .panel[data-i='5'] {
+    display: flex;
+  }
+  .install:has(input:not([value='0']):checked) .panel[data-i='0'] {
+    display: none;
+  }
+  .prompt {
+    color: var(--muted);
+    font-family: var(--font-mono);
+    font-size: 13px;
+  }
+  /* Breaks between units (see above); a unit longer than the line breaks anywhere. */
+  code {
+    flex: 1;
+    min-width: 0;
+    color: var(--heading);
+    font-size: 13.5px;
+    line-height: 1.6;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+  .unit {
+    display: inline-block;
+    max-width: 100%;
+  }
+  .copy {
+    flex-shrink: 0;
+    padding: 4px 10px;
+    border: 1px solid var(--border);
+    border-radius: 7px;
+    background: none;
+    color: var(--muted);
+    font-size: 12px;
+    cursor: pointer;
+  }
+  .copy:hover {
+    border-color: var(--border-strong);
+    color: var(--heading);
+  }
+  .copy[hidden] {
+    display: none;
+  }
+</style>

package/components/Integrations.astro

@@ -0,0 +1,125 @@
+---
+/**
+ * A grid of things the project plugs into — registries, CI providers, editors. `icon` is a
+ * short mono label (an abbreviation, not a logo image: no external badge or icon service, same
+ * reasoning as `Badge`). `more`, given, appends a dashed placeholder card.
+ */
+import config from 'virtual:casoon-pages/config';
+import { t } from '../lib/i18n';
+
+interface Props {
+  items: { name: string; category: string; icon: string; href?: string }[];
+  heading?: string;
+  /** Label for a trailing "more coming" placeholder card. Omitted: no placeholder card. */
+  more?: string;
+}
+
+const { items, heading, more } = Astro.props;
+const s = t(config.lang);
+---
+
+<section class="integrations" aria-label={heading ?? s.overview}>
+  {heading && <p class="title">{heading}</p>}
+  <div class="marquee">
+    {
+      [false, true].map((copy) => (
+        <ul aria-hidden={copy ? 'true' : undefined}>
+          {items.map((item) => (
+            <li>
+              {item.href && !copy ? (
+                <a href={item.href}>
+                  <span class="icon" aria-hidden="true">
+                    {item.icon}
+                  </span>
+                  <span class="name">{item.name}</span>
+                  <span class="visually-hidden">{item.category}</span>
+                </a>
+              ) : (
+                <span class="item">
+                  <span class="icon" aria-hidden="true">
+                    {item.icon}
+                  </span>
+                  <span class="name">{item.name}</span>
+                </span>
+              )}
+            </li>
+          ))}
+          {more && (
+            <li>
+              <span class="item more">
+                <span class="name">{more}</span>
+              </span>
+            </li>
+          )}
+        </ul>
+      ))
+    }
+  </div>
+</section>
+
+<style>
+  /* Logo row that drifts sideways. The list is
+     rendered twice; the copy is hidden from assistive tech and not focusable. */
+  .integrations {
+    padding: 64px 0 80px;
+    background: var(--bg-deep);
+    text-align: center;
+  }
+  .title {
+    margin: 0 0 32px;
+    color: var(--heading);
+    font-size: 18px;
+  }
+  .marquee {
+    display: flex;
+    overflow: hidden;
+    mask-image: linear-gradient(90deg, transparent, #000 10% 90%, transparent);
+  }
+  ul {
+    display: flex;
+    flex: none;
+    gap: 72px;
+    margin: 0;
+    padding: 0 72px 0 0;
+    list-style: none;
+    animation: marquee 25s linear infinite;
+  }
+  .marquee:hover ul {
+    animation-play-state: paused;
+  }
+  a,
+  .item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    color: var(--muted);
+    white-space: nowrap;
+  }
+  a:hover {
+    color: var(--heading);
+  }
+  .icon {
+    display: grid;
+    place-items: center;
+    width: 40px;
+    height: 40px;
+    border: 1.5px solid currentColor;
+    border-radius: 50%;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    font-weight: 500;
+  }
+  .name {
+    font-size: 28px;
+    font-weight: 500;
+    letter-spacing: -0.01em;
+  }
+  .more .name {
+    font-weight: 400;
+  }
+  @keyframes marquee {
+    to {
+      transform: translateX(-100%);
+    }
+  }
+</style>

package/components/Keymap.astro

@@ -0,0 +1,102 @@
+---
+/**
+ * Keyboard shortcuts or CLI flags, grouped into cards: a label and one or more `<kbd>` keys per
+ * row. `keys` is a key sequence (chorded) — `['ctrl', 'k']` renders as two adjacent keycaps.
+ */
+interface Props {
+  groups: {
+    heading: string;
+    items: { label: string; keys: string[] }[];
+  }[];
+  /** Section heading. Omitted: the section carries no heading of its own. */
+  heading?: string;
+}
+
+const { groups, heading } = Astro.props;
+---
+
+<section class="keymap">
+  {heading && <h2 class="cp-label">{heading}</h2>}
+  <div class="groups">
+    {
+      groups.map((group) => (
+        <div class="group">
+          <p class="heading">{group.heading}</p>
+          <ul>
+            {group.items.map((item) => (
+              <li>
+                <span class="label">{item.label}</span>
+                <span class="keys">
+                  {item.keys.map((key) => (
+                    <kbd>{key}</kbd>
+                  ))}
+                </span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))
+    }
+  </div>
+</section>
+
+<style>
+  .keymap {
+    max-width: var(--max);
+    margin: 0 auto;
+    padding: 0 24px 80px;
+  }
+  .keymap > h2 {
+    margin: 0 0 20px;
+  }
+  .groups {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
+    gap: 18px;
+  }
+  .group {
+    padding: 20px 22px;
+    border-radius: 16px;
+    background: var(--bg-deep);
+  }
+  .heading {
+    margin: 0 0 14px;
+    color: var(--muted);
+    font-size: 13.5px;
+    font-weight: 600;
+  }
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  li {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 11px 0;
+    border-top: 1px solid var(--border);
+    font-size: 14px;
+  }
+  li:first-child {
+    border-top: 0;
+  }
+  .keys {
+    display: flex;
+    flex-shrink: 0;
+    gap: 4px;
+  }
+  kbd {
+    min-width: 22px;
+    padding: 3px 6px;
+    border: 1px solid var(--border-strong);
+    border-radius: 6px;
+    background: var(--surface);
+    box-shadow: 0 1px 0 var(--border-strong);
+    color: var(--heading);
+    font-family: var(--font-mono);
+    font-size: 12px;
+    text-align: center;
+  }
+</style>