@casoon/pages-theme 0.0.0-stage → 0.12.8

package/routes/showcase/[slug].astro

@@ -0,0 +1,108 @@
+---
+import config from 'virtual:casoon-pages/config';
+import { examples } from 'virtual:casoon-pages/showcase';
+import ExamplePanel from '../../components/ExamplePanel.astro';
+import Base from '../../layouts/Base.astro';
+import { t } from '../../lib/i18n';
+import { descriptionHtml, descriptionText, type ShowcaseExample } from '../../lib/showcase';
+import { url } from '../../lib/url';
+
+export function getStaticPaths() {
+  return examples.map((example, i) => ({
+    params: { slug: example.slug },
+    props: { example, prev: examples[i - 1], next: examples[i + 1] },
+  }));
+}
+
+interface Props {
+  example: ShowcaseExample;
+  prev?: ShowcaseExample;
+  next?: ShowcaseExample;
+}
+
+const { example, prev, next } = Astro.props;
+const s = t(config.lang);
+---
+
+<Base title={example.title} description={example.description && descriptionText(example.description)}>
+  <div class="page">
+    <p class="back"><a href={url('showcase/')}>← {s.allExamples}</a></p>
+    <h1>{example.title}</h1>
+    {example.description && <p class="lead cp-inline-code" set:html={descriptionHtml(example.description)} />}
+    <ExamplePanel example={example} headingLevel={2} detailLink={false} />
+    <nav class="pager" aria-label={s.pagerShowcase}>
+      {
+        prev ? (
+          <a href={url(`showcase/${prev.slug}/`)}>
+            <span class="dir">{s.previous}</span>
+            <span class="label">{prev.title}</span>
+          </a>
+        ) : (
+          <span />
+        )
+      }
+      {
+        next && (
+          <a class="next" href={url(`showcase/${next.slug}/`)}>
+            <span class="dir">{s.next}</span>
+            <span class="label">{next.title}</span>
+          </a>
+        )
+      }
+    </nav>
+  </div>
+</Base>
+
+<style>
+  .page {
+    max-width: var(--max);
+    margin: 0 auto;
+    padding: 48px 24px 96px;
+  }
+  .back {
+    margin: 0 0 18px;
+    font-size: 14px;
+  }
+  h1 {
+    margin: 0 0 12px;
+    color: var(--heading);
+    font-size: 38px;
+    font-weight: 600;
+    letter-spacing: -0.025em;
+  }
+  .lead {
+    max-width: 62ch;
+    margin: 0 0 32px;
+    font-size: 17.5px;
+  }
+  .pager {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 14px;
+    margin-top: 40px;
+  }
+  .pager a {
+    display: block;
+    padding: 14px 18px;
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    background: var(--surface);
+  }
+  .pager a:hover {
+    border-color: var(--border-strong);
+  }
+  .pager .next {
+    text-align: right;
+  }
+  .dir {
+    display: block;
+    margin-bottom: 3px;
+    color: var(--muted);
+    font-size: 12px;
+  }
+  .label {
+    color: var(--heading);
+    font-size: 15px;
+    font-weight: 500;
+  }
+</style>

package/routes/showcase/index.astro

@@ -0,0 +1,195 @@
+---
+import config from 'virtual:casoon-pages/config';
+import { examples } from 'virtual:casoon-pages/showcase';
+import ExamplePanel from '../../components/ExamplePanel.astro';
+import Base from '../../layouts/Base.astro';
+import { t } from '../../lib/i18n';
+import { descriptionHtml, type ShowcaseExample } from '../../lib/showcase';
+import { url } from '../../lib/url';
+
+const s = t(config.lang);
+
+// Examples in groups (in the order of each group's first example); without groups one list.
+const groups: { label: string; id: string; items: ShowcaseExample[] }[] = [];
+for (const example of examples as ShowcaseExample[]) {
+  const label = example.group ?? '';
+  let group = groups.find((g) => g.label === label);
+  if (!group) {
+    const id = `group-${
+      label
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-|-$/g, '') || 'all'
+    }`;
+    group = { label, id, items: [] };
+    groups.push(group);
+  }
+  group.items.push(example);
+}
+const grouped = groups.some((g) => g.label !== '');
+---
+
+<Base title={s.showcase} description={s.showcaseDescription(config.name)}>
+  <div class="page">
+    <h1>{s.showcase}</h1>
+    <p class="lead">{config.showcaseLead || s.showcaseLead(config.name)}</p>
+    {
+      grouped && (
+        <nav class="jump" aria-label={s.showcase}>
+          <ul>
+            {groups.map((g) => (
+              <li>
+                <a href={`#${g.id}`}>
+                  {g.label || s.showcase} <span class="count">{g.items.length}</span>
+                </a>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      )
+    }
+    {
+      groups.map((group) => (
+        <section class="group" id={grouped ? group.id : undefined}>
+          {grouped && group.label && <h2>{group.label}</h2>}
+          <div class="list">
+            {group.items
+              .filter((example) => !example.preview)
+              .map((example) => (
+                <ExamplePanel example={example} />
+              ))}
+          </div>
+          {group.items.some((example) => example.preview) && (
+            <ul class="cards">
+              {group.items
+                .filter((example) => example.preview)
+                .map((example) => (
+                  <li class="card">
+                    <a href={url(`showcase/${example.slug}/`)}>
+                      <span class="preview" set:html={example.preview!.html} />
+                      <span class="name">{example.title}</span>
+                      {example.description && (
+                        <span class="text cp-inline-code" set:html={descriptionHtml(example.description)} />
+                      )}
+                    </a>
+                  </li>
+                ))}
+            </ul>
+          )}
+        </section>
+      ))
+    }
+  </div>
+</Base>
+
+<style>
+  .page {
+    max-width: var(--max);
+    margin: 0 auto;
+    padding: 56px 24px 96px;
+  }
+  h1 {
+    margin: 0 0 12px;
+    color: var(--heading);
+    font-size: 38px;
+    font-weight: 600;
+    letter-spacing: -0.025em;
+  }
+  h2 {
+    margin: 0 0 16px;
+    color: var(--heading);
+    font-size: 24px;
+    font-weight: 600;
+    letter-spacing: -0.015em;
+  }
+  .lead {
+    max-width: 62ch;
+    margin: 0 0 32px;
+    font-size: 17.5px;
+  }
+  .jump ul {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin: 0 0 40px;
+    padding: 0;
+    list-style: none;
+  }
+  .jump a {
+    display: inline-block;
+    padding: 6px 12px;
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    color: var(--text);
+    font-size: 14px;
+    text-decoration: none;
+  }
+  .jump a:hover,
+  .jump a:focus-visible {
+    border-color: var(--accent);
+    color: var(--heading);
+  }
+  .count {
+    color: var(--muted);
+  }
+  .group + .group {
+    margin-top: 56px;
+  }
+  .group {
+    scroll-margin-top: 80px;
+  }
+  .list {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+  .list:not(:empty) + .cards {
+    margin-top: 20px;
+  }
+  .cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+    gap: 16px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .card a {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    height: 100%;
+    padding: 12px;
+    border: 1px solid var(--border);
+    border-radius: 14px;
+    background: var(--surface);
+    color: var(--text);
+    text-decoration: none;
+  }
+  .card a:hover,
+  .card a:focus-visible {
+    border-color: var(--accent);
+  }
+  .preview {
+    display: block;
+    line-height: 0;
+  }
+  .preview :global(img) {
+    width: 100%;
+    height: auto;
+  }
+  .name {
+    color: var(--heading);
+    font-family: var(--font-mono);
+    font-size: 15px;
+    font-weight: 600;
+  }
+  .text {
+    color: var(--muted);
+    font-size: 13.5px;
+    line-height: 1.45;
+  }
+  .text :global(code) {
+    font-size: 0.9em;
+  }
+</style>

package/styles/base.css

@@ -0,0 +1,307 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  overflow-x: clip;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font-sans);
+  font-size: 16px;
+  line-height: 1.65;
+  -webkit-font-smoothing: antialiased;
+  text-wrap: pretty;
+}
+
+main {
+  flex: 1;
+}
+
+a {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+a:hover {
+  color: var(--brand);
+}
+
+button {
+  font: inherit;
+}
+
+img,
+svg {
+  max-width: 100%;
+}
+
+figure {
+  margin: 0;
+}
+
+h1,
+h2,
+h3 {
+  text-wrap: balance;
+}
+
+code,
+kbd,
+pre,
+samp {
+  font-family: var(--font-mono);
+}
+
+::selection {
+  background: var(--accent-soft);
+}
+
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+.visually-hidden {
+  position: absolute !important;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.skip-link {
+  position: absolute;
+  left: 12px;
+  top: -100px;
+  z-index: 100;
+  padding: 8px 14px;
+  border-radius: 8px;
+  background: var(--heading);
+  color: var(--bg);
+}
+
+.skip-link:focus {
+  top: 12px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    transition: none !important;
+    animation: none !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Highlighted code (Shiki) */
+pre.astro-code {
+  margin: 0;
+  padding: 18px;
+  font-size: 13px;
+  line-height: 1.8;
+  overflow: auto;
+}
+
+/* ANSI output (lib/ansi.ts) */
+.ansi-bold {
+  font-weight: 500;
+  color: var(--ansi-15);
+}
+.ansi-dim {
+  color: var(--term-dim);
+}
+.ansi-italic {
+  font-style: italic;
+}
+.ansi-underline {
+  text-decoration: underline;
+}
+.ansi-fg-0 {
+  color: var(--ansi-0);
+}
+.ansi-fg-1 {
+  color: var(--ansi-1);
+}
+.ansi-fg-2 {
+  color: var(--ansi-2);
+}
+.ansi-fg-3 {
+  color: var(--ansi-3);
+}
+.ansi-fg-4 {
+  color: var(--ansi-4);
+}
+.ansi-fg-5 {
+  color: var(--ansi-5);
+}
+.ansi-fg-6 {
+  color: var(--ansi-6);
+}
+.ansi-fg-7 {
+  color: var(--ansi-7);
+}
+.ansi-fg-8 {
+  color: var(--ansi-8);
+}
+.ansi-fg-9 {
+  color: var(--ansi-9);
+}
+.ansi-fg-10 {
+  color: var(--ansi-10);
+}
+.ansi-fg-11 {
+  color: var(--ansi-11);
+}
+.ansi-fg-12 {
+  color: var(--ansi-12);
+}
+.ansi-fg-13 {
+  color: var(--ansi-13);
+}
+.ansi-fg-14 {
+  color: var(--ansi-14);
+}
+.ansi-fg-15 {
+  color: var(--ansi-15);
+}
+
+/* Section label used above home sections and in the docs kit */
+/* Section labels: an eyebrow with an orange dot, and as h2 a large
+   section heading. */
+.cp-label {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 0 0 28px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.6;
+  text-transform: uppercase;
+  color: var(--heading);
+}
+.cp-label::before {
+  content: "";
+  flex: none;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent-fill);
+}
+h2.cp-label {
+  display: block;
+  margin: 0 0 40px;
+  font-size: clamp(34px, 4.4vw, 50px);
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+  text-transform: none;
+}
+h2.cp-label::before {
+  content: none;
+}
+
+/* Rendered Markdown / MDX */
+.cp-prose > :first-child {
+  margin-top: 0;
+}
+.cp-prose h2 {
+  margin: 44px 0 14px;
+  font-size: 25px;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  line-height: 1.25;
+  color: var(--heading);
+  scroll-margin-top: calc(var(--header-h) + 16px);
+}
+.cp-prose h3 {
+  margin: 32px 0 10px;
+  font-size: 19px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--heading);
+  scroll-margin-top: calc(var(--header-h) + 16px);
+}
+.cp-prose p,
+.cp-prose ul,
+.cp-prose ol {
+  margin: 0 0 18px;
+}
+.cp-prose li + li {
+  margin-top: 6px;
+}
+.cp-prose a {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  text-decoration-thickness: 1px;
+}
+.cp-inline-code code,
+.cp-prose :not(pre) > code {
+  padding: 1px 5px;
+  border-radius: 5px;
+  background: var(--code-bg);
+  color: var(--heading);
+  font-size: 0.86em;
+}
+.cp-prose > figure,
+.cp-prose > .tabs {
+  margin-bottom: 22px;
+}
+.cp-prose > pre,
+.cp-prose > .astro-code {
+  margin: 0 0 22px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+}
+.cp-prose table {
+  width: 100%;
+  margin: 0 0 22px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  border-collapse: separate;
+  border-spacing: 0;
+  overflow: hidden;
+  font-size: 14.5px;
+}
+/* Narrow screens: a wide table scrolls inside itself instead of widening the page. */
+@media (max-width: 900px) {
+  .cp-prose table {
+    display: block;
+    overflow-x: auto;
+  }
+}
+.cp-prose th {
+  padding: 11px 16px;
+  background: var(--bg-deep);
+  color: var(--heading);
+  font-size: 13px;
+  font-weight: 600;
+  text-align: left;
+}
+.cp-prose td {
+  padding: 11px 16px;
+  border-top: 1px solid var(--border);
+}
+.cp-prose blockquote {
+  margin: 0 0 18px;
+  padding-left: 16px;
+  border-left: 1px solid var(--border-strong);
+  color: var(--muted);
+}
+.cp-prose hr {
+  margin: 40px 0;
+  border: 0;
+  border-top: 1px solid var(--border);
+}

package/styles/fonts.css

@@ -0,0 +1,52 @@
+/* Self-hosted, Latin subset. No font CDN: the sites load no external resources. */
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src: url("../fonts/inter-latin-500-normal.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Onest";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url("../fonts/onest-latin-wght-normal.woff2") format("woff2");
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src: url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
+}