@casoon/pages-theme 0.0.0-stage → 0.12.8

package/components/ExamplePanel.astro

@@ -0,0 +1,153 @@
+---
+/** One showcase example: input next to the output the package produced at build time. */
+import { Code } from 'astro:components';
+import config from 'virtual:casoon-pages/config';
+import { t } from '../lib/i18n';
+import type { ShowcaseExample } from '../lib/showcase';
+import { url } from '../lib/url';
+
+interface Props {
+  example: ShowcaseExample;
+  /** Heading level of the title; the detail page uses its own h1. */
+  headingLevel?: 2 | 3;
+  detailLink?: boolean;
+}
+
+const { example, headingLevel = 2, detailLink = true } = Astro.props;
+const s = t(config.lang);
+const Heading = `h${headingLevel}` as 'h2' | 'h3';
+const outputKind = example.output.kind ?? 'terminal';
+---
+
+<section class="example">
+  <header>
+    <Heading>{example.title}</Heading>
+    <span class="file">{example.file}</span>
+    {
+      detailLink && (
+        <a href={url(`showcase/${example.slug}/`)}>
+          {s.detail}<span class="visually-hidden">: {example.title}</span> →
+        </a>
+      )
+    }
+  </header>
+  <div class="grid">
+    <div class="input" aria-label={s.input}>
+      <Code code={example.input.code} lang={(example.input.lang ?? 'text') as never} theme="css-variables" />
+    </div>
+    <div class:list={['output', outputKind]} aria-label={s.output}>
+      {outputKind === 'terminal' ? <pre tabindex="0" set:html={example.output.html} /> : <Fragment set:html={example.output.html} />}
+    </div>
+  </div>
+  {
+    example.tags && example.tags.length > 0 && (
+      <ul class="tags">
+        {example.tags.map((tag) => (
+          <li>{tag}</li>
+        ))}
+      </ul>
+    )
+  }
+</section>
+
+<style>
+  .example {
+    overflow: hidden;
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    background: var(--surface);
+    box-shadow: var(--shadow);
+  }
+  header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 4px 12px;
+    padding: 14px 20px;
+    border-bottom: 1px solid var(--border);
+  }
+  h2,
+  h3 {
+    margin: 0;
+    color: var(--heading);
+    font-size: 16px;
+    font-weight: 600;
+  }
+  .file {
+    color: var(--muted);
+    font-family: var(--font-mono);
+    font-size: 12px;
+  }
+  header a {
+    margin-left: auto;
+    font-size: 13.5px;
+  }
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
+    container-type: inline-size;
+  }
+  /* Side by side, the output sets the height of the row and a longer input scrolls inside it,
+     so a large data set does not stretch the page. Stacked, the input gets a fixed cap. */
+  .input {
+    min-width: 0;
+    height: 0;
+    min-height: 100%;
+    border-right: 1px solid var(--border);
+    background: var(--code-bg);
+  }
+  .input :global(pre.astro-code) {
+    box-sizing: border-box;
+    height: 100%;
+    max-height: none;
+    margin: 0;
+    overflow: auto;
+    font-size: 12.5px;
+  }
+  @container (max-width: 579px) {
+    .input {
+      height: auto;
+      min-height: 0;
+      border-right: none;
+      border-bottom: 1px solid var(--border);
+    }
+    .input :global(pre.astro-code) {
+      max-height: 24rem;
+    }
+  }
+  .output {
+    min-width: 0;
+    overflow: auto;
+  }
+  .output.terminal {
+    background: var(--term-bg);
+    color: var(--term-text);
+  }
+  .output.panel {
+    padding: 18px;
+  }
+  .output pre {
+    margin: 0;
+    padding: 18px;
+    overflow: auto;
+    font-size: 12.5px;
+    line-height: 1.8;
+  }
+  .tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin: 0;
+    padding: 12px 20px;
+    border-top: 1px solid var(--border);
+    list-style: none;
+  }
+  .tags li {
+    padding: 2px 8px;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    color: var(--muted);
+    font-family: var(--font-mono);
+    font-size: 12px;
+  }
+</style>

package/components/Facts.astro

@@ -0,0 +1,112 @@
+---
+/**
+ * Verifiable key figures. Real numbers only.
+ * `layout="grid"` (default): a tile per fact, the value large. `layout="list"`: one card, a
+ * label/value row per fact — for a spec sheet (license, runtime, platforms) rather than a
+ * dashboard of numbers.
+ */
+import config from 'virtual:casoon-pages/config';
+import { t } from '../lib/i18n';
+
+interface Props {
+  items: { value: string; label: string }[];
+  layout?: 'grid' | 'list';
+  /**
+   * Region label. Default "Key facts" — override on a page that uses `Facts` more than once,
+   * so the two regions don't share one accessible name (axe: landmark-unique).
+   */
+  label?: string;
+}
+
+const { items, layout = 'grid', label } = Astro.props;
+---
+
+<section class:list={['facts', `is-${layout}`]} aria-label={label ?? t(config.lang).keyFacts}>
+  <dl>
+    {
+      items.map((f) => (
+        <div>
+          <dt>{f.label}</dt>
+          <dd>{f.value}</dd>
+        </div>
+      ))
+    }
+  </dl>
+</section>
+
+<style>
+  .facts {
+    max-width: var(--max);
+    margin: 0 auto;
+    padding: 40px 24px 80px;
+  }
+  dl {
+    margin: 0;
+  }
+  /* Sunken frame holding stat panels. */
+  .is-grid dl {
+    display: grid;
+    /* Two columns on phones instead of one tall card per fact. */
+    grid-template-columns: repeat(auto-fit, minmax(min(200px, calc(50% - 5px)), 1fr));
+    gap: 10px;
+    padding: 10px;
+    border-radius: var(--r-card);
+    background: var(--bg-sunken);
+  }
+  .is-grid div {
+    display: flex;
+    flex-direction: column-reverse;
+    justify-content: flex-end;
+    min-height: clamp(120px, 30vw, 170px);
+    padding: 24px;
+    border-radius: 12px;
+    background: var(--surface);
+    box-shadow: 0 2px 0 var(--shadow-hard);
+  }
+  .is-grid dd {
+    margin: auto 0 8px;
+    color: var(--heading);
+    font-size: clamp(34px, 3.4vw, 46px);
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    line-height: 1;
+  }
+  .is-grid dt {
+    color: var(--muted);
+    font-size: 13px;
+    letter-spacing: 0.04em;
+    line-height: 1.5;
+    text-transform: uppercase;
+  }
+
+  /* Spec sheet: one card, a label/value row per fact. */
+  .is-list dl {
+    max-width: 440px;
+    margin-inline: auto;
+    padding: 4px 24px;
+    border-radius: var(--r-card);
+    background: var(--surface);
+    box-shadow: 2px 2px 0 var(--shadow-hard);
+  }
+  .is-list div {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 20px;
+    padding: 15px 0;
+    border-top: 1px solid var(--border);
+  }
+  .is-list div:first-child {
+    border-top: 0;
+  }
+  .is-list dt {
+    color: var(--muted);
+    font-size: 14.5px;
+  }
+  .is-list dd {
+    margin: 0;
+    color: var(--heading);
+    font-weight: 600;
+    text-align: right;
+  }
+</style>

package/components/Faq.astro

@@ -0,0 +1,123 @@
+---
+/** Native <details> accordion, no JS. Entries stay independent (several may be open at once). */
+import config from 'virtual:casoon-pages/config';
+import { t } from '../lib/i18n';
+
+interface Props {
+  items: { q: string; a: string }[];
+  heading?: string;
+}
+
+const s = t(config.lang);
+const { items, heading = s.faqHeading } = Astro.props;
+// Two columns, filled top to bottom.
+const half = Math.ceil(items.length / 2);
+const columns = [items.slice(0, half), items.slice(half)].filter((col) => col.length > 0);
+---
+
+<section class="faq">
+  <h2>{heading}</h2>
+  <div class="frame">
+    {
+      columns.map((col) => (
+        <div class="list">
+          {col.map((item) => (
+            <details>
+              <summary>
+                <span>{item.q}</span>
+                <span class="icon" aria-hidden="true" />
+              </summary>
+              <p>{item.a}</p>
+            </details>
+          ))}
+        </div>
+      ))
+    }
+  </div>
+</section>
+
+<style>
+  .faq {
+    max-width: var(--max);
+    margin: 0 auto;
+    padding: 80px 24px;
+  }
+  h2 {
+    max-width: 12ch;
+    margin: 0 0 40px;
+    color: var(--heading);
+    font-size: clamp(34px, 4.4vw, 50px);
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    line-height: 1.1;
+  }
+  .frame {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
+    gap: 10px;
+    align-items: start;
+    padding: 10px;
+    border-radius: var(--r-card);
+    background: var(--bg-sunken);
+  }
+  .list {
+    display: grid;
+    gap: 10px;
+  }
+  details {
+    border-radius: 12px;
+    background: var(--bg);
+  }
+  details[open] {
+    background: var(--surface);
+  }
+  summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 24px;
+    padding: 18px 20px;
+    color: var(--heading);
+    font-size: 18px;
+    letter-spacing: -0.02em;
+    line-height: 1.4;
+    cursor: pointer;
+    list-style: none;
+  }
+  summary::-webkit-details-marker {
+    display: none;
+  }
+  /* Plus that folds into a minus. */
+  .icon {
+    position: relative;
+    flex: none;
+    width: 14px;
+    height: 14px;
+  }
+  .icon::before,
+  .icon::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 14px;
+    height: 1.5px;
+    border-radius: 1px;
+    background: currentColor;
+    translate: -50% -50%;
+    transition: transform 0.36s var(--ease-roll);
+  }
+  .icon::after {
+    transform: rotate(90deg);
+  }
+  details[open] .icon::after {
+    transform: rotate(0deg);
+  }
+  details p {
+    margin: 0;
+    padding: 0 20px 20px;
+    color: var(--text);
+    font-size: 16px;
+    line-height: 1.56;
+  }
+</style>

package/components/Features.astro

@@ -0,0 +1,139 @@
+---
+/**
+ * Core points, each backed by something checkable.
+ * `layout="numbered"` (default, 3–5 items): a numbered list. `layout="grid"`: a denser catalog
+ * for more items — an icon tile per entry (`icon`, a short mono label) instead of the index.
+ */
+import config from 'virtual:casoon-pages/config';
+import { t } from '../lib/i18n';
+
+interface Props {
+  items: { title: string; body: string; icon?: string }[];
+  heading?: string;
+  layout?: 'numbered' | 'grid';
+}
+
+const { items, heading = t(config.lang).featuresHeading, layout = 'numbered' } = Astro.props;
+---
+
+<section class:list={['features', `is-${layout}`]}>
+  <h2 class="cp-label">{heading}</h2>
+  <ul>
+    {
+      items.map((ft, i) => (
+        <li>
+          {layout === 'numbered' ? (
+            <span class="n" aria-hidden="true">
+              {String(i + 1).padStart(2, '0')}
+            </span>
+          ) : (
+            ft.icon && (
+              <span class="icon" aria-hidden="true">
+                {ft.icon}
+              </span>
+            )
+          )}
+          <div>
+            <h3>{ft.title}</h3>
+            <p>{ft.body}</p>
+          </div>
+        </li>
+      ))
+    }
+  </ul>
+</section>
+
+<style>
+  .features {
+    max-width: var(--max);
+    margin: 0 auto;
+    padding: 80px 24px;
+  }
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  /* Large light numerals. */
+  .is-numbered ul {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
+    gap: 10px;
+  }
+  .is-numbered li {
+    display: flex;
+    flex-direction: column-reverse;
+    justify-content: flex-end;
+    gap: 28px;
+    padding: 30px 24px;
+    border-radius: var(--r-card);
+    background: var(--bg-deep);
+  }
+  .n {
+    margin-top: auto;
+    color: var(--heading);
+    font-size: 46px;
+    font-weight: 200;
+    letter-spacing: -0.02em;
+    line-height: 1;
+  }
+  h3 {
+    margin: 0 0 8px;
+    color: var(--heading);
+    font-size: 22px;
+    font-weight: 600;
+    line-height: 1.3;
+  }
+  p {
+    margin: 0;
+    font-size: 16px;
+    line-height: 1.56;
+  }
+
+  /* Catalog: cream, ink and accent cards in turn. */
+  .is-grid ul {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
+    gap: 10px;
+  }
+  .is-grid li {
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+    min-height: 240px;
+    padding: 30px 24px;
+    border-radius: var(--r-card);
+    background: var(--bg-deep);
+  }
+  .is-grid li:nth-child(6n + 1),
+  .is-grid li:nth-child(6n + 6) {
+    background: #11100e;
+    color: #cbc9c5;
+  }
+  .is-grid li:nth-child(6n + 2) {
+    background: var(--accent-fill);
+    color: #fff;
+  }
+  .is-grid li:nth-child(6n + 1) h3,
+  .is-grid li:nth-child(6n + 6) h3,
+  .is-grid li:nth-child(6n + 2) h3 {
+    color: #fff;
+  }
+  .is-grid .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    background: #fff;
+    color: #11100e;
+    font-family: var(--font-mono);
+    font-size: 15px;
+    font-weight: 500;
+  }
+  .is-grid li:nth-child(6n + 2) .icon {
+    background: #fff;
+    color: var(--accent-fill);
+  }
+</style>