@casoon/pages-theme 0.0.0-stage → 0.12.8

package/components/ApiEntry.astro

@@ -0,0 +1,136 @@
+---
+/** Overview entry for a public type or function. Item-level docs stay on docs.rs / TypeDoc. */
+import { Code } from 'astro:components';
+import config from 'virtual:casoon-pages/config';
+import { t } from '../lib/i18n';
+
+interface Props {
+  kind: string;
+  name: string;
+  signature: string;
+  lang?: string;
+  since?: string;
+  params?: { name: string; type: string; desc: string }[];
+}
+
+const { kind, name, signature, lang = 'rust', since, params = [] } = Astro.props;
+---
+
+<section class="api">
+  <header>
+    <span class="kind">{kind}</span>
+    <code class="name">{name}</code>
+    {since && <span class="since">{since}</span>}
+  </header>
+  <div class="body">
+    <div class="sig"><Code code={signature} lang={lang as never} theme="css-variables" /></div>
+    <slot />
+    {
+      params.length > 0 && (
+        <>
+          <p class="label">{t(config.lang).parameters}</p>
+          <dl>
+            {params.map((p) => (
+              <div>
+                <dt>
+                  <code>{p.name}</code>
+                </dt>
+                <dd class="type">
+                  <code>{p.type}</code>
+                </dd>
+                <dd>{p.desc}</dd>
+              </div>
+            ))}
+          </dl>
+        </>
+      )
+    }
+  </div>
+</section>
+
+<style>
+  .api {
+    margin-bottom: 26px;
+    overflow: hidden;
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    background: var(--surface);
+    box-shadow: var(--shadow);
+  }
+  header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 14px 20px;
+    border-bottom: 1px solid var(--border);
+    background: var(--bg-deep);
+  }
+  .kind {
+    padding: 2px 7px;
+    border: 1px solid var(--border);
+    border-radius: 5px;
+    color: var(--muted);
+    font-family: var(--font-mono);
+    font-size: 12px;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+  .name {
+    color: var(--heading);
+    font-size: 14.5px;
+    font-weight: 500;
+  }
+  .since {
+    margin-left: auto;
+    color: var(--muted);
+    font-family: var(--font-mono);
+    font-size: 12px;
+  }
+  .body {
+    padding: 20px;
+    font-size: 14.5px;
+  }
+  .sig {
+    margin-bottom: 18px;
+    overflow: hidden;
+    border-radius: 10px;
+  }
+  .sig :global(pre.astro-code) {
+    padding: 14px 16px;
+    line-height: 1.7;
+  }
+  .body :global(p) {
+    margin: 0 0 18px;
+  }
+  .label {
+    margin-bottom: 8px !important;
+    color: var(--muted);
+    font-family: var(--font-mono);
+    font-size: 12px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+  dl {
+    margin: 0;
+  }
+  dl div {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+    gap: 4px 16px;
+    align-items: baseline;
+    padding: 10px 0;
+    border-top: 1px solid var(--border);
+    font-size: 14px;
+  }
+  dd {
+    margin: 0;
+  }
+  dt code {
+    color: var(--heading);
+    font-size: 13px;
+  }
+  .type code {
+    color: var(--accent);
+    font-size: 12.5px;
+  }
+</style>

package/components/Badge.astro

@@ -0,0 +1,31 @@
+---
+/** Static badge: version, licence, registry, status. No external badge services. */
+interface Props {
+  tone?: 'muted' | 'accent' | 'brand';
+}
+
+const { tone = 'muted' } = Astro.props;
+---
+
+<span class:list={['badge', tone]}><slot /></span>
+
+<style>
+  .badge {
+    display: inline-block;
+    padding: 3px 9px;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    line-height: 1.5;
+  }
+  .muted {
+    color: var(--muted);
+  }
+  .accent {
+    color: var(--accent);
+  }
+  .brand {
+    color: var(--brand);
+  }
+</style>

package/components/Badges.astro

@@ -0,0 +1,10 @@
+<div class="badges"><slot /></div>
+
+<style>
+  .badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 22px;
+  }
+</style>

package/components/BuildOutput.astro

@@ -0,0 +1,84 @@
+---
+/** Home section showing one real output generated during the build. */
+import config from 'virtual:casoon-pages/config';
+import { t } from '../lib/i18n';
+import { url } from '../lib/url';
+
+interface Props {
+  caption: string;
+  file: string;
+  heading?: string;
+}
+
+const s = t(config.lang);
+const { caption, file, heading = s.buildOutputHeading } = Astro.props;
+---
+
+<section class="build">
+  <div class="head">
+    <h2 class="cp-label">{heading}</h2>
+    {config.hasShowcase && <a href={url('showcase/')}>{s.allExamples} →</a>}
+  </div>
+  <figure>
+    <div class="output"><slot /></div>
+    <figcaption>
+      <p>{caption}</p>
+      <span class="file">{file}</span>
+    </figcaption>
+  </figure>
+</section>
+
+<style>
+  .build {
+    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;
+  }
+  figure {
+    margin: 0;
+    overflow: hidden;
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    background: var(--surface);
+    box-shadow: var(--shadow);
+  }
+  .output {
+    border-bottom: 1px solid var(--border);
+  }
+  .output :global(.terminal) {
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+  }
+  figcaption {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 18px 22px;
+  }
+  p {
+    margin: 0;
+    font-size: 14.5px;
+  }
+  .file {
+    flex-shrink: 0;
+    color: var(--muted);
+    font-family: var(--font-mono);
+    font-size: 12px;
+  }
+</style>

package/components/Button.astro

@@ -0,0 +1,55 @@
+---
+/** Link styled as button. One primary per view. */
+interface Props {
+  href: string;
+  variant?: 'primary' | 'secondary' | 'quiet';
+}
+
+const { href, variant = 'primary' } = Astro.props;
+---
+
+<a class:list={['btn', variant]} href={href}><span class="label"><slot /></span></a>
+
+<style>
+  /* Pill with a rolling label on hover. */
+  .btn {
+    --roll: 2.6em;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 47px;
+    padding: 10px 25px;
+    overflow: hidden;
+    border-radius: 30px;
+    font-size: 15px;
+    font-weight: 500;
+    line-height: 1.4;
+    white-space: nowrap;
+  }
+  .label {
+    display: block;
+    text-shadow: 0 var(--roll) 0 currentColor;
+    transition: transform 0.4s var(--ease-roll);
+  }
+  .btn:hover .label,
+  .btn:focus-visible .label {
+    transform: translateY(calc(-1 * var(--roll)));
+  }
+  .primary {
+    background: linear-gradient(180deg, var(--accent-top) 0%, var(--accent-fill) 25%, var(--accent-fill) 100%);
+    color: #fff;
+  }
+  .secondary {
+    background: linear-gradient(180deg, #383532 0%, #11100e 25%, #11100e 100%);
+    color: #fff;
+  }
+  .primary:hover,
+  .secondary:hover {
+    color: #fff;
+  }
+  .quiet {
+    padding-inline: 0;
+    color: var(--accent);
+  }
+</style>

package/components/CallToAction.astro

@@ -0,0 +1,64 @@
+---
+/**
+ * Closing band on the accent ground: one large centred line and one button. Put it last on the
+ * start page, right above the footer.
+ */
+interface Props {
+  title: string;
+  href: string;
+  label: string;
+}
+
+const { title, href, label } = Astro.props;
+---
+
+<section class="cta">
+  <h2>{title}</h2>
+  <a class="btn" href={href}><span class="label">{label}</span></a>
+</section>
+
+<style>
+  .cta {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 40px;
+    padding: 120px 24px;
+    background: var(--accent-fill);
+    text-align: center;
+  }
+  h2 {
+    max-width: 14ch;
+    margin: 0;
+    color: #fff;
+    font-size: clamp(40px, 6vw, 70px);
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    line-height: 1;
+  }
+  .btn {
+    --roll: 3.2em;
+    display: inline-flex;
+    align-items: center;
+    min-height: 60px;
+    padding: 0 25px;
+    overflow: hidden;
+    border-radius: 30px;
+    background: linear-gradient(180deg, #383532 0%, #11100e 25%, #11100e 100%);
+    color: #fff;
+    font-size: 17px;
+    font-weight: 500;
+  }
+  .btn:hover {
+    color: #fff;
+  }
+  .label {
+    display: block;
+    text-shadow: 0 var(--roll) 0 currentColor;
+    transition: transform 0.4s var(--ease-roll);
+  }
+  .btn:hover .label,
+  .btn:focus-visible .label {
+    transform: translateY(calc(-1 * var(--roll)));
+  }
+</style>

package/components/Callout.astro

@@ -0,0 +1,66 @@
+---
+import config from 'virtual:casoon-pages/config';
+import { t } from '../lib/i18n';
+
+interface Props {
+  type?: 'note' | 'tip' | 'caution' | 'deprecated';
+  title?: string;
+}
+
+const TITLES = t(config.lang).callout;
+const { type = 'note', title = TITLES[type] } = Astro.props;
+---
+
+<div class:list={['callout', type]} role="note">
+  <p class="title">{title}</p>
+  <div class="body"><slot /></div>
+</div>
+
+<style>
+  .callout {
+    margin: 32px 0;
+    padding: 16px 18px;
+    border: 1px solid var(--border);
+    border-left-width: 3px;
+    border-radius: 4px 12px 12px 4px;
+    font-size: 14.5px;
+  }
+  .note {
+    border-left-color: var(--accent);
+    background: var(--accent-soft);
+  }
+  .tip {
+    border-left-color: var(--accent);
+  }
+  .caution {
+    border-left-color: var(--brand);
+    background: var(--brand-soft);
+  }
+  .deprecated {
+    border-left-color: var(--border-strong);
+    background: var(--bg-deep);
+  }
+  .title {
+    margin: 0 0 3px;
+    color: var(--heading);
+    font-weight: 600;
+  }
+  /* The tinted backgrounds lower the contrast of the accent colour below 4.5:1, for any
+     project accent. Links use the heading colour and keep the accent as underline. */
+  .body :global(a),
+  .body :global(a:hover) {
+    color: var(--heading);
+    text-decoration: underline;
+    text-decoration-color: var(--accent);
+    text-underline-offset: 2px;
+  }
+  .body :global(a:hover) {
+    text-decoration-thickness: 2px;
+  }
+  .body :global(> :last-child) {
+    margin-bottom: 0;
+  }
+  .body :global(p) {
+    margin: 0 0 8px;
+  }
+</style>

package/components/CodeBlock.astro

@@ -0,0 +1,84 @@
+---
+/** Highlighted at build time (Shiki, theme-aware via CSS variables). */
+import { Code } from 'astro:components';
+import config from 'virtual:casoon-pages/config';
+import { t } from '../lib/i18n';
+
+interface Props {
+  code: string;
+  lang?: string;
+  /** File name shown left in the bar. */
+  title?: string;
+  /** Language label shown right in the bar. */
+  label?: string;
+  copy?: boolean;
+}
+
+const { code, lang = 'text', title, label, copy = true } = Astro.props;
+const s = t(config.lang);
+
+let hash = 5381;
+for (const ch of code) hash = ((hash * 33) ^ ch.charCodeAt(0)) >>> 0;
+const id = `code-${hash.toString(36)}`;
+---
+
+<figure class="codeblock">
+  {
+    (title || label || copy) && (
+      <figcaption>
+        <span>{title}</span>
+        <span class="right">
+          {label}
+          {copy && (
+            <button class="copy" type="button" data-copy={id} data-copied={s.copied} hidden>
+              {s.copy}
+            </button>
+          )}
+        </span>
+      </figcaption>
+    )
+  }
+  <div id={id}><Code code={code} lang={lang as never} theme="css-variables" /></div>
+</figure>
+
+<style>
+  .codeblock {
+    overflow: hidden;
+    border: 1px solid var(--border);
+    border-radius: 14px;
+    background: var(--code-bg);
+  }
+  figcaption {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    min-height: 42px;
+    padding: 8px 16px;
+    border-bottom: 1px solid var(--border);
+    color: var(--muted);
+    font-family: var(--font-mono);
+    font-size: 12px;
+  }
+  .right {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+  .copy {
+    padding: 2px 9px;
+    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/Demo.astro

@@ -0,0 +1,80 @@
+---
+/**
+ * A stage for the project running live in the visitor's browser.
+ *
+ * The showcase shows what the package produced at build time; this shows the
+ * package itself, working. The stage is marked `data-demo` and that mark is
+ * load-bearing: a demo may deliberately contain what the project reports on —
+ * a broken form, a failing check, an unlabelled control — so the site check
+ * measures the page around the stage, not the exhibit inside it. Everything the
+ * demo needs, including its `<script is:inline>`, belongs in the default slot.
+ *
+ * Nothing here loads from another origin. A demo that needs a CDN is a demo
+ * that cannot ship on these pages.
+ */
+interface Props {
+  title: string;
+  /** One sentence above the stage: what the visitor is looking at. */
+  lead?: string;
+  /** Accessible name of the stage region. Default: the title. */
+  label?: string;
+}
+
+const { title, lead, label } = Astro.props;
+---
+
+<section class="demo">
+  <header>
+    <h2>{title}</h2>
+    {lead && <p class="lead">{lead}</p>}
+    <slot name="controls" />
+  </header>
+
+  <!-- data-demo: the exhibit. The site check excludes it from axe and expects
+       the demo's own scripts inside it. -->
+  <div class="stage" data-demo role="region" aria-label={label ?? title}>
+    <slot />
+  </div>
+
+  <slot name="note" />
+</section>
+
+<style>
+  .demo {
+    overflow: hidden;
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    background: var(--surface);
+    box-shadow: var(--shadow);
+  }
+  header {
+    padding: 18px 20px;
+    border-bottom: 1px solid var(--border);
+  }
+  h2 {
+    margin: 0;
+    color: var(--heading);
+    font-size: 16px;
+    font-weight: 600;
+  }
+  .lead {
+    margin: 6px 0 0;
+    color: var(--muted);
+    font-size: 14.5px;
+  }
+  header :global(> :last-child:not(.lead):not(h2)) {
+    margin-top: 14px;
+  }
+  .stage {
+    position: relative;
+    padding: 20px;
+    background: var(--bg-deep);
+  }
+  .demo :global(> [slot='note']) {
+    margin: 0;
+    padding: 12px 20px;
+    border-top: 1px solid var(--border);
+    color: var(--muted);
+    font-size: 13.5px;
+  }
+</style>