@cratis/cast 0.0.1 → 0.1.0

package/site/components/Contact.astro

@@ -0,0 +1,163 @@
+---
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { person, profileLinks } from '../data';
+import { renderInline } from '../lib/inline';
+
+interface Props {
+  index: string;
+  title?: string;
+  label?: string;
+  intro?: string;
+}
+const { index, title = 'Append an event to *my stream.*', label = 'Command', intro = 'Questions about event sourcing, Cratis, a project or a role? Issue the command and it lands in my inbox.' } = Astro.props;
+const mailto = person.email ? `mailto:${person.email}` : undefined;
+const channels = [person.email ? 'email' : undefined, ...profileLinks.slice(0, 3).map((link) => link.label)].filter(Boolean).join(' · ');
+---
+
+<section id="contact" class="relative overflow-hidden py-24 md:py-40" aria-labelledby="contact-title">
+  <div class="pointer-events-none absolute inset-0" aria-hidden="true">
+    <div class="absolute bottom-0 left-1/2 h-[30rem] w-[70rem] -translate-x-1/2 translate-y-1/2 rounded-full bg-accent/15 blur-[120px]"></div>
+  </div>
+  <div class="container-x relative">
+    <p class="mb-5 flex items-center gap-3 font-mono text-xs text-fg-faint" data-reveal>
+      {index && <span class="text-fg-muted">{index}</span>}{index && <span class="h-px w-8 bg-line-strong" aria-hidden="true"></span>}<span class="note note-command">{label}</span>
+    </p>
+    <h2 id="contact-title" class="max-w-[14ch] text-[clamp(2.75rem,7.5vw,6.5rem)] leading-[0.92] font-[800] tracking-[-0.045em]" data-reveal set:html={renderInline(title)} />
+    <p class="mt-6 max-w-[52ch] text-lg text-fg-muted" data-reveal set:html={renderInline(intro)} />
+
+    <div class="mt-14 grid grid-cols-1 items-center gap-6 lg:grid-cols-[1fr_auto_1fr]" data-reveal data-contact>
+      <!-- Command sticky note -->
+      <div class="sticky-card cmd">
+        <p class="flex items-center justify-between font-mono text-xs">
+          <span class="note note-command">Command</span>
+          <span class="text-fg-faint">{person.handle}/inbox</span>
+        </p>
+        <p class="mt-4 font-display text-4xl font-[680] tracking-[-0.03em] text-command-soft">SendMessage</p>
+        <dl class="mt-5 grid grid-cols-[5.5rem_1fr] gap-y-2 font-mono text-[0.8125rem]">
+          <dt class="text-fg-faint">to</dt><dd class="truncate text-fg">{person.email ?? person.name}</dd>
+          <dt class="text-fg-faint">from</dt><dd class="text-fg-muted">you</dd>
+          <dt class="text-fg-faint">channel</dt><dd class="text-fg-muted">{channels}</dd>
+        </dl>
+        <button type="button" class="btn mt-6 w-full border-command/40 bg-command/15 text-command-soft hover:bg-command/25" data-send aria-expanded="false" aria-controls="contact-result" hidden>
+          Execute command
+          <span class="font-mono text-xs opacity-70" aria-hidden="true">↵</span>
+        </button>
+      </div>
+
+      <svg viewBox="0 0 80 24" class="arrow mx-auto hidden h-6 w-20 text-fg-faint lg:block" fill="none" aria-hidden="true">
+        <path d="M2 12h72m-8-7 8 7-8 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="4 5"></path>
+      </svg>
+
+      <!-- Resulting event -->
+      <div id="contact-result" class="sticky-card evt" data-result>
+        <p class="flex items-center justify-between font-mono text-xs">
+          <span class="note">Event</span>
+          <span class="text-fg-faint" data-result-seq>pending</span>
+        </p>
+        <p class="mt-4 font-display text-4xl font-[680] tracking-[-0.03em] text-event-soft">MessageRequested</p>
+        {person.email && <div class="mt-6 flex flex-wrap gap-2.5">
+          <a href={mailto} class="btn btn-primary">
+            <svg viewBox="0 0 16 16" class="size-4" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><rect x="2" y="3.5" width="12" height="9" rx="1.5"></rect><path d="m2.5 4.5 5.5 4 5.5-4" stroke-linejoin="round"></path></svg>
+            Write an email
+          </a>
+          <span class="relative inline-flex">
+            <button type="button" class="btn" data-copy={person.email} aria-label={`Copy email address ${person.email}`}>
+              <svg viewBox="0 0 16 16" class="size-4" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="5" y="5" width="9" height="9" rx="2"></rect><path d="M11 5V3.5A1.5 1.5 0 0 0 9.5 2h-6A1.5 1.5 0 0 0 2 3.5v6A1.5 1.5 0 0 0 3.5 11H5"></path></svg>
+              <span data-copy-label>Copy email</span>
+            </button>
+            <span class="sr-only" aria-live="polite" data-copy-status></span>
+          </span>
+        </div>}
+        <div class="mt-3 flex flex-wrap gap-2.5">
+          {profileLinks.map((link) => <a href={link.url} class="btn btn-sm" rel="me noopener">{link.label}</a>)}
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+  .sticky-card {
+    position: relative;
+    border-radius: 1.25rem;
+    padding: 1.5rem;
+    border: 1px solid var(--color-line);
+    background: color-mix(in srgb, var(--color-ink-900) 80%, transparent);
+    backdrop-filter: blur(12px);
+    transition:
+      opacity 700ms var(--ease-out-expo),
+      transform 700ms var(--ease-out-expo),
+      filter 700ms var(--ease-out-expo);
+  }
+  @media (min-width: 768px) {
+    .sticky-card {
+      padding: 2rem;
+    }
+  }
+  .cmd {
+    border-color: rgb(91 134 242 / 0.3);
+    background:
+      radial-gradient(120% 100% at 0% 0%, rgb(91 134 242 / 0.16), transparent 60%),
+      color-mix(in srgb, var(--color-ink-900) 80%, transparent);
+    box-shadow: 0 30px 80px -40px rgb(91 134 242 / 0.5);
+  }
+  .evt {
+    border-color: rgb(242 153 74 / 0.3);
+    background:
+      radial-gradient(120% 100% at 100% 0%, rgb(242 153 74 / 0.16), transparent 60%),
+      color-mix(in srgb, var(--color-ink-900) 80%, transparent);
+    box-shadow: 0 30px 80px -40px rgb(242 153 74 / 0.5);
+  }
+  /* Before the command executes, the event is a ghost. */
+  [data-armed] .evt {
+    opacity: 0.35;
+    filter: blur(1.5px) saturate(0.3);
+    transform: translateX(-12px) scale(0.97);
+    pointer-events: none;
+    border-style: dashed;
+  }
+  [data-armed] .arrow {
+    opacity: 0.4;
+  }
+  .arrow {
+    transition: opacity 600ms ease, color 600ms ease;
+  }
+  [data-sent] .arrow {
+    color: var(--color-event);
+  }
+  :global(.js-motion) [data-sent] .arrow path {
+    animation: dash 1.2s linear infinite;
+  }
+  @keyframes dash {
+    to {
+      stroke-dashoffset: -18;
+    }
+  }
+</style>
+
+<script>
+  import { onPageLoad } from '../lib/lifecycle';
+  onPageLoad(() => {
+    const root = document.querySelector<HTMLElement>('[data-contact]');
+    const send = root?.querySelector<HTMLButtonElement>('[data-send]');
+    const result = root?.querySelector<HTMLElement>('[data-result]');
+    if (root && send && result) {
+      send.hidden = false;
+      root.toggleAttribute('data-armed', true);
+      result.setAttribute('inert', '');
+      send.addEventListener('click', () => {
+        root.removeAttribute('data-armed');
+        root.setAttribute('data-sent', '');
+        result.removeAttribute('inert');
+        send.setAttribute('aria-expanded', 'true');
+        send.disabled = true;
+        send.textContent = 'Command accepted';
+        const seq = root.querySelector('[data-result-seq]');
+        if (seq) seq.textContent = 'appended';
+        result.querySelector<HTMLElement>('a')?.focus({ preventScroll: true });
+      });
+    }
+  });
+</script>

package/site/components/Cratis.astro

@@ -0,0 +1,233 @@
+---
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { cratis as cratisData } from '../data';
+import SectionHeader from './SectionHeader.astro';
+import PullRequestFeed from './PullRequestFeed.astro';
+import { cratisRepos, mergedPrFloor, mergedPrTotal, snapshotDate, starsFor, type CratisRepo } from '../lib/github';
+import { renderInline } from '../lib/inline';
+
+interface Props {
+  index: string;
+  title?: string;
+  label?: string;
+}
+const cratis = cratisData!;
+const { index, title = cratis.title, label = cratis.label } = Astro.props;
+
+const fmt = new Intl.NumberFormat('en-US');
+const byName = new Map(cratisRepos.map((r) => [r.name, r]));
+const pipeline = cratis.pipeline.map((n) => byName.get(n)).filter((r): r is CratisRepo => !!r);
+const tooling = cratisRepos.filter((r) => r.group === 'tooling');
+const clients = cratisRepos.filter((r) => r.group === 'client');
+const asOf = snapshotDate();
+
+const rankOne = cratisRepos.filter((r) => r.rank === 1).length;
+const founded = cratis.repos.filter((r) => r.founded);
+// Only facts that hold: each figure appears when the data supports it.
+const headline = [
+  ...(rankOne > 0 ? [{ value: `#1`, label: `committer on ${rankOne} Cratis ${rankOne === 1 ? 'repository' : 'repositories'}`, accent: 'text-command', live: false }] : []),
+  ...(founded.length > 0 ? [{ value: String(founded.length), label: `${founded.length === 1 ? 'repository' : 'repositories'} founded: ${founded.map((r) => r.name).join(', ')}`, accent: 'text-event', live: false }] : []),
+  ...(cratis.clientLanguages.length > 0 ? [{ value: String(cratis.clientLanguages.length), label: `Chronicle client languages: ${cratis.clientLanguages.join(', ')}`, accent: 'text-view', live: false }] : []),
+  ...(mergedPrTotal > 0 ? [{ value: `${fmt.format(mergedPrFloor)}${mergedPrTotal >= 100 ? '+' : ''}`, label: 'merged PRs in the Cratis org', accent: 'text-fg', live: true }] : []),
+];
+const badge = (r: CratisRepo) => (r.founded ? 'b-founded' : r.rank === 1 ? 'b-lead' : 'b-muted');
+---
+
+<section id="cratis" class="relative overflow-hidden py-24 md:py-36" aria-labelledby="cratis-title">
+  <div class="pointer-events-none absolute top-1/3 -right-40 size-[40rem] rounded-full bg-command/10 blur-[120px]" aria-hidden="true"></div>
+  <div class="container-x relative">
+    <SectionHeader index={index} kind="command" label={label} title={title} id="cratis-title">
+      <div class="mt-6 grid max-w-[64ch] gap-4 text-lg leading-relaxed">
+        {cratis.pitch && <p class="text-fg" set:html={renderInline(cratis.pitch)} />}
+        <p class="text-fg-muted" set:html={renderInline(cratis.role)} />
+      </div>
+      <div class="mt-6 flex flex-wrap gap-3">
+        {Object.entries(cratis.links).map(([text, href]) => <a href={href} class="btn btn-sm" rel="noopener">{text} <span aria-hidden="true">↗</span></a>)}
+      </div>
+    </SectionHeader>
+
+    {headline.length > 0 && <dl class:list={['grid grid-cols-2 gap-px overflow-hidden rounded-2xl border border-line bg-line', headline.length >= 4 ? 'lg:grid-cols-4' : headline.length === 3 ? 'lg:grid-cols-3' : '']} data-reveal>
+      {
+        headline.map((h) => (
+          <div class="flex flex-col bg-ink-900 p-5 md:p-6">
+            <dt class="order-2 mt-2 text-sm leading-snug text-fg-muted">
+              {h.label}
+              {h.live && <> (<span data-merged-prs="exact">{fmt.format(mergedPrTotal)}</span>, <span data-pr-status>as of {asOf}</span>)</>}
+            </dt>
+            <dd data-merged-prs={h.live ? 'floor' : undefined} class={`order-1 font-display text-[clamp(2.25rem,4.4vw,3.5rem)] leading-none font-[750] tracking-[-0.045em] tabular-nums ${h.accent}`}>{h.value}</dd>
+          </div>
+        ))
+      }
+    </dl>}
+
+    {pipeline.length > 0 && <div class="mt-16 md:mt-20" data-reveal>
+      <div class="mb-5 flex flex-wrap items-baseline justify-between gap-3">
+        <h3 class="font-display text-2xl font-[620] tracking-[-0.02em]">From model to running app</h3>
+        <p class="font-mono text-xs text-fg-faint">my commits and merged PRs, all-time, as of {asOf}</p>
+      </div>
+      <ol class="pipeline grid gap-4 lg:grid-cols-4" aria-label="The Cratis pipeline">
+        {
+          pipeline.map((r, i) => (
+            <li class="relative">
+              <a href={r.url} rel="noopener" class="panel glow group flex h-full flex-col p-5" style="--glow: var(--color-command)">
+                <span class="flex items-center justify-between gap-2 font-mono text-[0.6875rem]">
+                  <span class="text-fg-faint">{String(i + 1).padStart(2, '0')} · {r.step}</span>
+                  <span class={`badge ${badge(r)}`}>{r.role}</span>
+                </span>
+                <span class="mt-6 font-display text-3xl font-[650] tracking-[-0.03em] transition-colors group-hover:text-command-soft">{r.name}</span>
+                <span class="note note-command mt-1">{r.kind}</span>
+                <span class="mt-3 text-sm leading-relaxed text-fg-muted">{r.desc}</span>
+                <span class="mt-auto flex gap-4 pt-5 font-mono text-xs text-fg-faint tabular-nums">
+                  <span><span class="text-fg">{fmt.format(r.commits)}</span> commits</span>
+                  <span><span class="text-fg">{fmt.format(r.prs)}</span> PRs</span>
+                  {starsFor(`Cratis/${r.name}`) !== undefined && <span class="ml-auto" aria-label={`${starsFor(`Cratis/${r.name}`)} stars on GitHub`}>★ {starsFor(`Cratis/${r.name}`)}</span>}
+                </span>
+              </a>
+              {i < pipeline.length - 1 && <span class="flow" aria-hidden="true"></span>}
+            </li>
+          ))
+        }
+      </ol>
+    </div>}
+
+    {(tooling.length > 0 || clients.length > 0) && <div class="mt-6 grid gap-4 lg:grid-cols-12" data-reveal>
+      <ul class:list={['grid gap-4 sm:grid-cols-2', clients.length > 0 ? 'lg:col-span-8' : 'lg:col-span-12 lg:grid-cols-3']} aria-label="Around the pipeline">
+        {
+          tooling.map((r) => {
+            const Tag = r.url ? 'a' : 'div';
+            return (
+              <li>
+                <Tag href={r.url} rel={r.url ? 'noopener' : undefined} class:list={['panel flex h-full flex-col p-5', r.url && 'glow group']} style="--glow: var(--color-command)">
+                  <span class="flex items-center justify-between gap-2 font-mono text-[0.6875rem]">
+                    <span class="note note-command">{r.kind}</span>
+                    <span class={`badge ${badge(r)}`}>{r.role}</span>
+                  </span>
+                  <span class="mt-4 font-display text-xl font-[640] tracking-[-0.02em] transition-colors group-hover:text-command-soft">{r.name}</span>
+                  <span class="mt-1.5 text-sm leading-relaxed text-fg-muted">{r.desc}</span>
+                  {r.note && <span class="mt-2 font-mono text-xs text-view">{r.note}</span>}
+                  <span class="mt-auto flex gap-4 pt-4 font-mono text-xs text-fg-faint tabular-nums">
+                    <span><span class="text-fg">{fmt.format(r.commits)}</span> commits</span>
+                    <span><span class="text-fg">{fmt.format(r.prs)}</span> PRs</span>
+                  </span>
+                </Tag>
+              </li>
+            );
+          })
+        }
+      </ul>
+      {clients.length > 0 && <div class="panel p-5 lg:col-span-4">
+        <p class="note">Chronicle clients</p>
+        <p class="mt-3 font-display text-xl font-[640] tracking-[-0.02em]">{cratis.clientLanguages.length || clients.length} {cratis.clientLanguages.length ? 'languages' : 'clients'}</p>
+        {cratis.clientLanguages.length > 0 && <p class="mt-1 text-sm text-fg-muted">{cratis.clientLanguages.join(' · ')}.</p>}
+        <ul class="mt-4 divide-y divide-line border-t border-line">
+          {
+            clients.map((r) => (
+              <li>
+                <a href={r.url} rel="noopener" class="group flex items-start justify-between gap-3 py-3">
+                  <span class="min-w-0">
+                    <span class="block font-mono text-sm text-fg group-hover:underline">{r.name}</span>
+                    <span class="block text-xs leading-relaxed text-fg-muted">{r.desc}</span>
+                  </span>
+                  <span class="shrink-0 text-right">
+                    <span class={`badge ${badge(r)}`}>{r.role}</span>
+                    <span class="mt-1 block font-mono text-[0.6875rem] text-fg-faint tabular-nums">{fmt.format(r.commits)} commits</span>
+                  </span>
+                </a>
+              </li>
+            ))
+          }
+        </ul>
+      </div>}
+    </div>}
+
+    <div class="mt-16 grid gap-6 md:mt-20 lg:grid-cols-12">
+      <PullRequestFeed class="lg:col-span-7" />
+
+      {cratis.highlights.length > 0 && <div class="lg:col-span-5" data-reveal style="--reveal-delay:120ms">
+        <h3 class="font-display text-2xl font-[620] tracking-[-0.02em]">Highlights from the log</h3>
+        <p class="mt-2 text-fg-muted">A few of the changes I have landed in Cratis.</p>
+        <ol class="panel mt-6 divide-y divide-line overflow-hidden font-mono text-sm" aria-label="Highlights">
+          {
+            cratis.highlights.map((h) => (
+              <li class="flex items-start gap-3 px-5 py-3.5 transition-colors hover:bg-fg/[0.02]">
+                <svg viewBox="0 0 16 16" class="mt-0.5 size-4 shrink-0 text-[#a371f7] [html[data-theme=light]_&]:text-[#8250df]" fill="currentColor" aria-label="merged" role="img">
+                  <path d="M5.45 5.154A4.25 4.25 0 0 0 9.25 7.5h1.378a2.251 2.251 0 1 1 0 1.5H9.25A5.734 5.734 0 0 1 5 7.123v3.505a2.25 2.25 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.95-.218ZM4.25 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm8.5-4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM5 3.25a.75.75 0 1 0 0 .005V3.25Z" />
+                </svg>
+                <span class="text-fg">{h}</span>
+              </li>
+            ))
+          }
+        </ol>
+      </div>}
+    </div>
+  </div>
+</section>
+
+<style>
+  .badge {
+    display: inline-block;
+    border-radius: 999px;
+    padding: 0.05rem 0.5rem;
+    font-family: var(--font-mono);
+    font-size: 0.625rem;
+    white-space: nowrap;
+    border: 1px solid var(--color-line);
+    color: var(--color-fg-muted);
+  }
+  .b-founded {
+    color: var(--color-event-soft);
+    border-color: color-mix(in oklab, var(--color-event) 45%, transparent);
+    background: color-mix(in oklab, var(--color-event) 10%, transparent);
+  }
+  .b-lead {
+    color: var(--color-command-soft);
+    border-color: color-mix(in oklab, var(--color-command) 45%, transparent);
+    background: color-mix(in oklab, var(--color-command) 10%, transparent);
+  }
+  /* Connector between pipeline stages, with a pulse travelling along it. */
+  .flow {
+    position: absolute;
+    z-index: 1;
+    left: 50%;
+    bottom: -1rem;
+    width: 1px;
+    height: 1rem;
+    background: linear-gradient(var(--color-command), var(--color-event));
+    overflow: hidden;
+  }
+  @media (min-width: 1024px) {
+    .flow {
+      left: auto;
+      right: -1rem;
+      bottom: auto;
+      top: 50%;
+      width: 1rem;
+      height: 1px;
+      background: linear-gradient(90deg, var(--color-command), var(--color-event));
+    }
+  }
+  .flow::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: #fff;
+    opacity: 0;
+  }
+  :global(.js-motion) .flow::after {
+    animation: flow-pulse 2.4s ease-in-out infinite;
+  }
+  .pipeline > li:nth-child(2) .flow::after { animation-delay: 0.6s; }
+  .pipeline > li:nth-child(3) .flow::after { animation-delay: 1.2s; }
+  @keyframes flow-pulse {
+    0%, 100% { opacity: 0; }
+    50% { opacity: 0.9; }
+  }
+</style>
+
+<script>
+  import { hydrateRelativeTimes } from '../lib/reltime';
+  import { onPageLoad } from '../lib/lifecycle';
+  onPageLoad(() => hydrateRelativeTimes(document.querySelector('[data-feed]') ?? document));
+</script>

package/site/components/CratisMark.astro

@@ -0,0 +1,18 @@
+---
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { cratisMarkPaths } from '../../badges/cratisMark';
+
+interface Props {
+  class?: string;
+  label?: string;
+}
+const { class: className = 'size-5', label } = Astro.props;
+---
+
+<svg viewBox="0 0 328 328" class={className} role={label ? 'img' : undefined} aria-label={label} aria-hidden={label ? undefined : 'true'}>
+  <g transform="translate(0 328) scale(.1 -.1)" fill="currentColor">
+    {cratisMarkPaths.map((path) => <path d={path} />)}
+  </g>
+</svg>