@casoon/pages-theme 0.0.0-stage → 0.12.8

package/components/Quickstart.astro

@@ -0,0 +1,95 @@
+---
+import config from 'virtual:casoon-pages/config';
+import { t } from '../lib/i18n';
+import { url } from '../lib/url';
+import Button from './Button.astro';
+
+interface Props {
+  /** Steps; inline HTML allowed (e.g. <code>). */
+  steps: string[];
+  lead?: string;
+  title?: string;
+}
+
+const s = t(config.lang);
+const { steps, lead = s.quickstartLead, title = s.quickstartTitle } = Astro.props;
+---
+
+<section class="quickstart">
+  <div>
+    <h2>{title}</h2>
+    <p class="lead">{lead}</p>
+    <ol>
+      {
+        steps.map((step, i) => (
+          <li>
+            <span class="n" aria-hidden="true">
+              {String(i + 1).padStart(2, '0')}
+            </span>
+            <span set:html={step} />
+          </li>
+        ))
+      }
+    </ol>
+    <div class="cta"><Button href={url('docs/')}>{s.readDocs}</Button></div>
+  </div>
+  <div class="code"><slot /></div>
+</section>
+
+<style>
+  .quickstart {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
+    gap: 48px;
+    align-items: start;
+    max-width: var(--max);
+    margin: 0 auto;
+    padding: 0 24px 96px;
+  }
+  h2 {
+    margin: 0 0 14px;
+    color: var(--heading);
+    font-size: 30px;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+  }
+  .lead {
+    margin: 0 0 24px;
+    font-size: 15.5px;
+  }
+  ol {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  li {
+    display: flex;
+    gap: 12px;
+    font-size: 14.5px;
+  }
+  .n {
+    padding-top: 2px;
+    color: var(--muted);
+    font-family: var(--font-mono);
+    font-size: 12.5px;
+  }
+  li :global(code) {
+    padding: 1px 5px;
+    border-radius: 5px;
+    background: var(--code-bg);
+    font-size: 13px;
+  }
+  .cta {
+    margin-top: 28px;
+  }
+  /* Projects often show several code blocks here (e.g. Rust and Node). */
+  .code {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    min-width: 0;
+  }
+</style>

package/components/ReleaseHighlights.astro

@@ -0,0 +1,115 @@
+---
+/**
+ * Teaser of one release's changes on the start page, from the same `Release` the changelog
+ * route renders — parse CHANGELOG.md once with `parseChangelog`. Pass the first release whose
+ * version isn't "Unreleased" (`releases.find((r) => r.version.toLowerCase() !== 'unreleased')`),
+ * not `releases[0]`: an `## [Unreleased]` section with entries already in it would otherwise
+ * show up here as "New in vUnreleased". Never maintained twice: the entry text is the
+ * changelog entry.
+ */
+import config from 'virtual:casoon-pages/config';
+import type { Release } from '../lib/changelog';
+import { t } from '../lib/i18n';
+import { url } from '../lib/url';
+
+interface Props {
+  release: Release;
+  heading?: string;
+  /** Cap on how many of the release's entries to show. Default 6. */
+  max?: number;
+}
+
+const s = t(config.lang);
+const { release, heading = s.newIn(release.version), max = 6 } = Astro.props;
+const tone = (kind: string) =>
+  ['breaking', 'removed', 'security'].includes(kind)
+    ? 'brand'
+    : kind === 'fixed'
+      ? 'accent'
+      : 'muted';
+const changes = release.changes.slice(0, max);
+---
+
+<section class="release-highlights">
+  <div class="head">
+    <h2 class="cp-label">{heading}</h2>
+    {config.changelog && <a href={url('changelog/')}>{s.changelog} →</a>}
+  </div>
+  <ul>
+    {
+      changes.map((change) => (
+        <li>
+          <span class:list={['dot', tone(change.kind)]} aria-hidden="true" />
+          <span set:html={change.html} />
+        </li>
+      ))
+    }
+  </ul>
+</section>
+
+<style>
+  .release-highlights {
+    max-width: var(--max);
+    margin: 0 auto;
+    padding: 0 24px 80px;
+  }
+  .head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 16px;
+    margin-bottom: 20px;
+  }
+  .head h2 {
+    margin: 0;
+  }
+  .head a {
+    font-size: 14px;
+  }
+  ul {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
+    gap: 20px 40px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  li {
+    display: flex;
+    gap: 12px;
+    padding-top: 18px;
+    border-top: 1px solid var(--border);
+    font-size: 14.5px;
+    line-height: 1.55;
+  }
+  .dot {
+    flex-shrink: 0;
+    width: 7px;
+    height: 7px;
+    margin-top: 7px;
+    border-radius: 50%;
+  }
+  .dot.muted {
+    background: var(--muted);
+  }
+  .dot.accent {
+    background: var(--accent);
+  }
+  .dot.brand {
+    background: var(--brand);
+  }
+  li :global(strong) {
+    color: var(--heading);
+  }
+  li :global(code) {
+    padding: 1px 5px;
+    border-radius: 5px;
+    background: var(--code-bg);
+    font-size: 0.9em;
+  }
+  li :global(a) {
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    text-decoration-thickness: 1px;
+  }
+</style>

package/components/Spotlight.astro

@@ -0,0 +1,177 @@
+---
+/**
+ * A repeatable two-column feature section further down the page (unlike `Hero`, which is
+ * singular): eyebrow, title, lead, an optional bullet list and link row, beside a `media` slot
+ * (a `Terminal`, `CodeBlock`, screenshot — whatever shows the feature). `reverse` swaps sides,
+ * for alternating sections down a page. `lead` and `points` accept the changelog's inline
+ * Markdown subset (`` `code` ``, `**bold**`, `[text](url)`), reused rather than re-parsed.
+ */
+import { inlineMarkdown } from '../lib/changelog';
+
+interface Props {
+  eyebrow?: string;
+  title: string;
+  lead: string;
+  points?: string[];
+  links?: { label: string; href: string }[];
+  reverse?: boolean;
+}
+
+const { eyebrow, title, lead, points, links, reverse = false } = Astro.props;
+---
+
+<section class:list={['spotlight', reverse && 'reverse']}>
+  <div class="text">
+    {eyebrow && <p class="eyebrow">{eyebrow}</p>}
+    <h2>{title}</h2>
+    <p class="lead" set:html={inlineMarkdown(lead)} />
+    {
+      points && points.length > 0 && (
+        <ul class="points">
+          {points.map((point) => (
+            <li set:html={inlineMarkdown(point)} />
+          ))}
+        </ul>
+      )
+    }
+    {
+      links && links.length > 0 && (
+        <div class="links">
+          {links.map((link) => (
+            <a href={link.href}>{link.label} →</a>
+          ))}
+        </div>
+      )
+    }
+  </div>
+  <div class="media">
+    <slot />
+  </div>
+</section>
+
+<style>
+  /* Large rounded sand panel for a demo or dashboard. */
+  .spotlight {
+    display: grid;
+    gap: 44px;
+    align-items: center;
+    max-width: calc(var(--max) + 160px);
+    margin: 0 auto 80px;
+    padding: 80px;
+    border-radius: var(--r-panel);
+    background: var(--bg-deep);
+  }
+  @media (max-width: 900px) {
+    .spotlight {
+      margin-inline: 8px;
+      padding: 56px 24px;
+      border-radius: 32px;
+    }
+  }
+  @media (min-width: 900px) {
+    .spotlight {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
+      gap: 56px;
+    }
+    .spotlight.reverse {
+      grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
+    }
+    .spotlight.reverse .text {
+      order: 1;
+    }
+    .spotlight.reverse .media {
+      order: 2;
+    }
+  }
+  .eyebrow {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 0 0 16px;
+    color: var(--heading);
+    font-size: 14px;
+    text-transform: uppercase;
+  }
+  .eyebrow::before {
+    content: '';
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--accent-fill);
+  }
+  h2 {
+    margin: 0 0 20px;
+    color: var(--heading);
+    font-size: clamp(32px, 4vw, 50px);
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    line-height: 1.1;
+  }
+  .lead {
+    margin: 0;
+    font-size: 18px;
+    line-height: 1.65;
+  }
+  .lead :global(strong) {
+    color: var(--heading);
+  }
+  .lead :global(code) {
+    padding: 1px 5px;
+    border-radius: 5px;
+    background: var(--code-bg);
+    font-size: 0.9em;
+  }
+  .lead :global(a),
+  .points :global(a) {
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    text-decoration-thickness: 1px;
+  }
+  .points {
+    margin: 22px 0 0;
+    padding: 0;
+    list-style: none;
+  }
+  .points li {
+    position: relative;
+    padding-left: 32px;
+    margin-bottom: 14px;
+    font-size: 16px;
+    line-height: 1.6;
+  }
+  .points li::before {
+    content: '✓';
+    position: absolute;
+    top: 2px;
+    left: 0;
+    display: grid;
+    place-items: center;
+    width: 21px;
+    height: 21px;
+    border-radius: 50%;
+    background: var(--surface);
+    color: var(--heading);
+    font-size: 12px;
+    font-weight: 700;
+  }
+  .points :global(strong) {
+    color: var(--heading);
+  }
+  .links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 18px 26px;
+    margin-top: 24px;
+  }
+  .links a {
+    color: var(--heading);
+    font-weight: 600;
+    font-size: 14.5px;
+  }
+  .links a:hover {
+    color: var(--accent);
+  }
+  .media {
+    min-width: 0;
+  }
+</style>

package/components/Swatch.astro

@@ -0,0 +1,45 @@
+---
+/** Colour token preview for design documentation. */
+import config from 'virtual:casoon-pages/config';
+import { t } from '../lib/i18n';
+
+interface Props {
+  token: string;
+  value?: string;
+}
+
+const { token, value = t(config.lang).themeDependent } = Astro.props;
+---
+
+<div class="swatch">
+  <div class="chip" style={`background: var(${token})`}></div>
+  <p class="token">{token}</p>
+  <p class="value">{value}</p>
+</div>
+
+<style>
+  .swatch {
+    overflow: hidden;
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    background: var(--surface);
+  }
+  .chip {
+    height: 56px;
+    border-bottom: 1px solid var(--border);
+  }
+  p {
+    margin: 0 !important;
+    padding: 0 12px;
+    font-family: var(--font-mono);
+    font-size: 12px;
+  }
+  .token {
+    padding-top: 10px;
+    color: var(--heading);
+  }
+  .value {
+    padding-bottom: 10px;
+    color: var(--muted);
+  }
+</style>

package/components/Tabs.astro

@@ -0,0 +1,90 @@
+---
+/**
+ * CSS-only tabs (e.g. Rust / Node / CLI). One named slot per tab id:
+ *   <Tabs tabs={[{ id: 'rust', label: 'Rust' }]}><div slot="rust">…</div></Tabs>
+ */
+import config from 'virtual:casoon-pages/config';
+import { t } from '../lib/i18n';
+
+interface Props {
+  tabs: { id: string; label: string }[];
+  label?: string;
+}
+
+const { tabs, label = t(config.lang).tabsLabel } = Astro.props;
+const uid = `tabs-${tabs.map((t) => t.id).join('-')}`;
+const panels = await Promise.all(tabs.map((t) => Astro.slots.render(t.id)));
+---
+
+<div class="tabs">
+  <div class="list" role="radiogroup" aria-label={label}>
+    {
+      tabs.map((t, i) => (
+        <>
+          <input
+            class="visually-hidden"
+            type="radio"
+            name={uid}
+            id={`${uid}-${i}`}
+            value={i}
+            checked={i === 0}
+          />
+          <label for={`${uid}-${i}`}>{t.label}</label>
+        </>
+      ))
+    }
+  </div>
+  {panels.map((html, i) => <div class="panel" data-i={i} set:html={html} />)}
+</div>
+
+<style>
+  .list {
+    display: flex;
+    gap: 2px;
+    border-bottom: 1px solid var(--border);
+  }
+  label {
+    margin-bottom: -1px;
+    padding: 9px 14px;
+    border-bottom: 2px solid transparent;
+    color: var(--muted);
+    font-size: 14px;
+    cursor: pointer;
+  }
+  input:checked + label {
+    border-bottom-color: var(--accent);
+    color: var(--heading);
+  }
+  input:focus-visible + label {
+    outline: 2px solid var(--accent);
+    outline-offset: -2px;
+  }
+  .panel {
+    display: none;
+    padding: 18px;
+    border: 1px solid var(--border);
+    border-top: 0;
+    border-radius: 0 0 12px 12px;
+    background: var(--code-bg);
+  }
+  .panel[data-i='0'],
+  .tabs:has(> .list input[value='1']:checked) > .panel[data-i='1'],
+  .tabs:has(> .list input[value='2']:checked) > .panel[data-i='2'],
+  .tabs:has(> .list input[value='3']:checked) > .panel[data-i='3'],
+  .tabs:has(> .list input[value='4']:checked) > .panel[data-i='4'],
+  .tabs:has(> .list input[value='5']:checked) > .panel[data-i='5'] {
+    display: block;
+  }
+  .tabs:has(> .list input:not([value='0']):checked) > .panel[data-i='0'] {
+    display: none;
+  }
+  .panel :global(pre.astro-code) {
+    padding: 0;
+    border: 0;
+    background: none !important;
+    font-size: 13.5px;
+  }
+  .panel :global(> :last-child) {
+    margin-bottom: 0;
+  }
+</style>

package/components/Terminal.astro

@@ -0,0 +1,79 @@
+---
+/**
+ * Terminal window. Pass raw ANSI via `ansi` (converted at build time), or
+ * pre-rendered HTML from the project's own renderer as slot content.
+ */
+import { ansiToHtml } from '../lib/ansi';
+
+interface Props {
+  ansi?: string;
+  /** Command or shell name shown in the title bar. */
+  title?: string;
+  /** Window dots in the title bar. */
+  dots?: boolean;
+}
+
+const { ansi, title, dots = false } = Astro.props;
+const html = ansi !== undefined ? ansiToHtml(ansi) : await Astro.slots.render('default');
+---
+
+<figure class="terminal">
+  {
+    title && (
+      <figcaption>
+        {dots && (
+          <span class="dots" aria-hidden="true">
+            <i />
+            <i />
+            <i />
+          </span>
+        )}
+        {title}
+      </figcaption>
+    )
+  }
+  <pre tabindex="0" set:html={html} />
+</figure>
+
+<style>
+  .terminal {
+    overflow: hidden;
+    border: 1px solid var(--border);
+    border-radius: 14px;
+    background: var(--term-bg);
+    color: var(--term-text);
+  }
+  figcaption {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 10px 16px;
+    border-bottom: 1px solid var(--term-border);
+    color: var(--term-dim);
+    font-family: var(--font-mono);
+    font-size: 12px;
+  }
+  .dots {
+    display: flex;
+    gap: 7px;
+  }
+  .dots i {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: #ff5f57;
+  }
+  .dots i:nth-child(2) {
+    background: #febc2e;
+  }
+  .dots i:nth-child(3) {
+    background: #28c840;
+  }
+  pre {
+    margin: 0;
+    padding: 18px;
+    overflow: auto;
+    font-size: 12.5px;
+    line-height: 1.85;
+  }
+</style>

package/components/index.ts

@@ -0,0 +1,25 @@
+export { default as AnchorGrid } from './AnchorGrid.astro';
+export { default as ApiEntry } from './ApiEntry.astro';
+export { default as Badge } from './Badge.astro';
+export { default as Badges } from './Badges.astro';
+export { default as BuildOutput } from './BuildOutput.astro';
+export { default as Button } from './Button.astro';
+export { default as Callout } from './Callout.astro';
+export { default as CallToAction } from './CallToAction.astro';
+export { default as CodeBlock } from './CodeBlock.astro';
+export { default as Demo } from './Demo.astro';
+export { default as ExamplePanel } from './ExamplePanel.astro';
+export { default as Facts } from './Facts.astro';
+export { default as Faq } from './Faq.astro';
+export { default as Features } from './Features.astro';
+export { default as FileSet } from './FileSet.astro';
+export { default as Hero } from './Hero.astro';
+export { default as Install } from './Install.astro';
+export { default as Integrations } from './Integrations.astro';
+export { default as Keymap } from './Keymap.astro';
+export { default as Quickstart } from './Quickstart.astro';
+export { default as ReleaseHighlights } from './ReleaseHighlights.astro';
+export { default as Spotlight } from './Spotlight.astro';
+export { default as Swatch } from './Swatch.astro';
+export { default as Tabs } from './Tabs.astro';
+export { default as Terminal } from './Terminal.astro';

package/content.ts

@@ -0,0 +1,23 @@
+import { defineCollection } from 'astro:content';
+import { glob } from 'astro/loaders';
+import { z } from 'astro/zod';
+
+export const docsSchema = z.object({
+  title: z.string(),
+  description: z.string().optional(),
+  /** Position inside its sidebar group; lower comes first. */
+  order: z.number().default(100),
+  /** Label in the sidebar, if shorter than the title. */
+  sidebarLabel: z.string().optional(),
+});
+
+/**
+ * The `docs` collection. Sources live in the project repository's docs/ folder,
+ * next to site/, so documentation is versioned and reviewed with the code.
+ */
+export function docsCollection({ base = '../docs' }: { base?: string } = {}) {
+  return defineCollection({
+    loader: glob({ pattern: '**/*.{md,mdx}', base }),
+    schema: docsSchema,
+  });
+}