@cratis/cast 0.0.1 → 0.2.0

package/site/components/Activity.astro

@@ -0,0 +1,196 @@
+---
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { CastView } from '../profile/CastView';
+import Inline from './Inline.astro';
+import SectionHeader from './SectionHeader.astro';
+import PullRequestFeed from './PullRequestFeed.astro';
+
+interface Props {
+  cast: CastView;
+  index: string;
+  title?: string;
+  label?: string;
+  intro?: string;
+}
+const { index, title = 'Every contribution, *appended.*', label = 'Event store', intro } = Astro.props;
+const { cast } = Astro.props;
+const { cratis, github, snapshotDate } = cast;
+import { foldCalendar, formatDay, formatMonthLong } from '../lib/contributions';
+
+const fmt = new Intl.NumberFormat('en-US');
+const cal = foldCalendar(github.contributions.weeks);
+const total = github.contributions.total;
+const pad = cal.days[0]?.weekday ?? 0;
+
+// Month labels sit above the first week that contains the 1st of that month.
+const monthLabels: { week: number; label: string }[] = [];
+for (const d of cal.days) {
+  if (d.date.endsWith('-01') && d.week > 0) {
+    monthLabels.push({ week: d.week, label: new Date(`${d.date}T00:00:00Z`).toLocaleDateString('en-US', { month: 'short', timeZone: 'UTC' }) });
+  }
+}
+
+const facts = [
+  { key: 'activeDays', value: `${cal.activeDays} / ${cal.days.length}` },
+  { key: 'longestStreak', value: `${cal.longest} days` },
+  { key: 'currentStreak', value: `${cal.current} days` },
+  { key: 'busiestDay', value: `${fmt.format(cal.busiest.count)} · ${formatDay(cal.busiest.date)}` },
+];
+const summary = `Contribution heatmap: ${fmt.format(total)} contributions between ${formatDay(cal.first)} and ${formatDay(cal.last)}, on ${cal.activeDays} of ${cal.days.length} days. Longest streak ${cal.longest} days. Busiest day ${formatDay(cal.busiest.date)} with ${fmt.format(cal.busiest.count)}.`;
+---
+
+<section id="activity" class="relative py-24 md:py-36" aria-labelledby="activity-title">
+  <div class="container-x">
+    <SectionHeader host={cast.host} index={index} label={label} title={title} id="activity-title">
+      <p class="mt-6 max-w-[60ch] text-lg leading-relaxed text-fg-muted">
+        {intro ? <Fragment><Inline text={intro} host={cast.host} /></Fragment> : <>My GitHub contribution calendar, re-projected as an event store: one partition per day, brighter means more events appended.
+        Captured when the site was built.</>}
+      </p>
+    </SectionHeader>
+
+    {cal.days.length === 0 ? (
+      <div class="panel p-8 font-mono text-sm text-fg-faint" data-reveal>EventNotFound: no contribution calendar has been captured yet. It appears after the first build with a GitHub token.</div>
+    ) : <div class="panel overflow-hidden" data-reveal data-heatmap>
+      <div class="flex flex-wrap items-center justify-between gap-3 border-b border-line px-5 py-3.5 md:px-7">
+        <p class="font-mono text-sm">
+          <span class="text-fg-faint">EventStore:</span> <span class="text-event">github.com/{github.login}</span>
+          <span class="text-fg-faint">· partitioned by day</span>
+        </p>
+        <p class="font-mono text-xs text-fg-faint">snapshot taken <time datetime={github.fetchedAt}>{snapshotDate()}</time></p>
+      </div>
+
+      <div class="grid gap-8 p-5 md:p-7 xl:grid-cols-[1fr_15rem]">
+        <div class="min-w-0">
+          <p class="mb-6 flex flex-wrap items-baseline gap-x-3 gap-y-1">
+            <span class="font-display text-[clamp(2.5rem,5vw,3.75rem)] leading-none font-[650] tracking-[-0.04em] text-event tabular-nums">{fmt.format(total)}</span>
+            <span class="text-fg-muted">events appended in the last year</span>
+          </p>
+
+          <div class="scroller -mx-1 overflow-x-auto px-1 pb-2" data-heatmap-scroll>
+            <div class="relative min-w-[40rem] pl-8" aria-hidden="true">
+              <div class="relative mb-1.5 h-4 font-mono text-[0.625rem] text-fg-faint">
+                {monthLabels.map((m) => <span class="absolute" style={`left: calc(${(m.week / cal.weekCount) * 100}%)`}>{m.label}</span>)}
+              </div>
+              <div class="absolute top-[1.375rem] left-0 grid h-[calc(100%-1.375rem)] grid-rows-7 font-mono text-[0.625rem] leading-none text-fg-faint">
+                {['', 'Mon', '', 'Wed', '', 'Fri', ''].map((d) => <span class="flex items-center">{d}</span>)}
+              </div>
+              <div class="hm" style={`--weeks:${cal.weekCount}`} data-heatmap-grid>
+                {Array.from({ length: pad }, () => <span class="pad"></span>)}
+                {cal.days.map((d, i) => <span class="c" data-l={d.level} data-d={d.date} data-n={d.count} style={`--w:${d.week}`} data-i={i}></span>)}
+              </div>
+            </div>
+          </div>
+
+          <div class="mt-4 flex flex-wrap items-center justify-between gap-4 font-mono text-[0.6875rem] text-fg-faint">
+            <span
+              class="focus-hint rounded-md"
+              tabindex="0"
+              role="group"
+              aria-label={`${summary} Use the arrow keys to read individual days.`}
+              aria-describedby="activity-table-caption"
+              data-heatmap-keys
+            >
+              <span aria-hidden="true">Focus here and use <kbd class="kbd">←</kbd><kbd class="kbd">→</kbd><kbd class="kbd">↑</kbd><kbd class="kbd">↓</kbd> to read days</span>
+            </span>
+            <span class="flex items-center gap-1.5" aria-hidden="true">
+              less
+              {[0, 1, 2, 3, 4].map((l) => <span class="c legend" data-l={l}></span>)}
+              more
+            </span>
+          </div>
+          <p class="sr-only" aria-live="polite" data-heatmap-live></p>
+        </div>
+
+        <dl class="grid grid-cols-2 content-start gap-px overflow-hidden rounded-xl border border-line bg-line xl:grid-cols-1">
+          {
+            facts.map((f) => (
+              <div class="bg-ink-900 px-4 py-3">
+                <dt class="font-mono text-[0.6875rem] text-fg-faint">{f.key}</dt>
+                <dd class="mt-1 text-sm text-fg tabular-nums">{f.value}</dd>
+              </div>
+            ))
+          }
+        </dl>
+      </div>
+
+      <table class="sr-only">
+        <caption id="activity-table-caption">Contributions per month</caption>
+        <thead><tr><th scope="col">Month</th><th scope="col">Contributions</th></tr></thead>
+        <tbody>
+          {cal.months.map((m) => <tr><th scope="row">{formatMonthLong(m.month)}</th><td>{fmt.format(m.total)}</td></tr>)}
+        </tbody>
+      </table>
+    </div>}
+    {!cratis && <PullRequestFeed cast={cast} class="mt-6" />}
+  </div>
+  <div class="hm-tip" role="presentation" data-heatmap-tip hidden></div>
+</section>
+
+<style>
+  .hm {
+    display: grid;
+    grid-template-rows: repeat(7, 1fr);
+    grid-template-columns: repeat(var(--weeks), 1fr);
+    grid-auto-flow: column;
+    gap: 3px;
+  }
+  .c {
+    aspect-ratio: 1;
+    border-radius: 2.5px;
+    background: var(--hm-0);
+    transition: background-color 500ms var(--ease-out-expo), box-shadow 200ms ease;
+  }
+  .c.legend {
+    width: 0.7rem;
+  }
+  .c[data-l='1'] { background: var(--hm-1); }
+  .c[data-l='2'] { background: var(--hm-2); }
+  .c[data-l='3'] { background: var(--hm-3); }
+  .c[data-l='4'] { background: var(--hm-4); box-shadow: 0 0 8px color-mix(in oklab, var(--color-event) 35%, transparent); }
+  .c[data-on] {
+    outline: 1.5px solid var(--color-fg);
+    outline-offset: 1px;
+  }
+  [data-heatmap] {
+    --hm-0: color-mix(in oklab, var(--color-fg) 6%, transparent);
+    --hm-1: color-mix(in oklab, var(--color-event) 28%, transparent);
+    --hm-2: color-mix(in oklab, var(--color-event) 50%, transparent);
+    --hm-3: color-mix(in oklab, var(--color-event) 75%, transparent);
+    --hm-4: var(--color-event);
+  }
+  /* Partitions fill in left to right on first view. */
+  :global(.js-motion) [data-heatmap]:not(.filled) .hm .c {
+    background: var(--hm-0);
+    box-shadow: none;
+  }
+  :global(.js-motion) [data-heatmap].filled .hm .c {
+    transition-delay: calc(var(--w) * 14ms);
+  }
+  .hm-tip {
+    position: fixed;
+    z-index: 70;
+    pointer-events: none;
+    transform: translate(-50%, calc(-100% - 10px));
+    padding: 0.35rem 0.6rem;
+    border-radius: 0.5rem;
+    border: 1px solid var(--color-line-strong);
+    background: var(--color-ink-800);
+    color: var(--color-fg);
+    font-family: var(--font-mono);
+    font-size: 0.6875rem;
+    white-space: nowrap;
+    box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.5);
+  }
+  .scroller {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-line-strong) transparent;
+  }
+</style>
+
+<script>
+  import { initHeatmap } from '../scripts/heatmap';
+  import { onPageLoad } from '../lib/lifecycle';
+  onPageLoad(initHeatmap);
+</script>

package/site/components/Agentic.astro

@@ -0,0 +1,144 @@
+---
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { CastView } from '../profile/CastView';
+import Inline from './Inline.astro';
+import SectionHeader from './SectionHeader.astro';
+
+interface Props {
+  cast: CastView;
+  index: string;
+  title?: string;
+  label?: string;
+}
+const { cast } = Astro.props;
+const { agentic: agenticData, config, github, postsFor, themes } = cast;
+const agentic = agenticData!;
+const { index, title = agentic.title, label = agentic.label } = Astro.props;
+const fmt = new Intl.NumberFormat('en-US');
+const aiTheme = themes.find((theme) => theme.id === config.writing.agenticTheme);
+const aiPosts = postsFor(aiTheme?.id);
+const columns = Math.max(1, Math.min(agentic.workflow.length, 6));
+const kinds = ['command', 'event', 'view', 'event', 'command'] as const;
+---
+
+<section id="agentic" class="relative overflow-hidden py-24 md:py-36" aria-labelledby="agentic-title">
+  <div class="pointer-events-none absolute top-1/4 -left-40 size-[36rem] rounded-full bg-view/8 blur-[120px]" aria-hidden="true"></div>
+  <div class="container-x relative">
+    <SectionHeader host={cast.host} index={index} kind="view" label={label} title={title} id="agentic-title">
+      <p class="mt-6 max-w-[62ch] text-lg leading-relaxed text-fg-muted"><Inline text={agentic.pitch} host={cast.host} /></p>
+    </SectionHeader>
+
+    <div class="panel overflow-hidden" data-reveal data-harness>
+      <div class="flex flex-wrap items-center justify-between gap-3 border-b border-line px-5 py-3 md:px-7">
+        <p class="font-mono text-sm"><span class="text-fg-faint">Workflow:</span> <span class="text-view">{agentic.workflowLabel}</span></p>
+        <p class="font-mono text-xs text-fg-faint">
+          {github.contributions.total > 0 && <><span class="text-fg">{fmt.format(github.contributions.total)}</span> contributions</>}
+          {github.contributions.commits ? <> · <span class="text-fg">{fmt.format(github.contributions.commits)}</span> commits</> : null}{github.contributions.total > 0 && ' in the last year'}
+        </p>
+      </div>
+      {agentic.workflow.length > 0 && <ol class="harness relative grid gap-px bg-line" style={`--columns:${columns}`} aria-label="Agent workflow">
+        {
+          agentic.workflow.map((w, i) => (
+            <li class="stage relative bg-ink-900 p-5" style={`--i:${i}`}>
+              <span class="flex items-center justify-between font-mono text-[0.6875rem] text-fg-faint">
+                <span>{String(i + 1).padStart(2, '0')} · {w.who}</span>
+              </span>
+              <span class="mt-4 block font-display text-2xl font-[650] tracking-[-0.02em]">{w.step}</span>
+              <span class={`note mt-1 ${kinds[i] === 'command' ? 'note-command' : kinds[i] === 'view' ? 'note-view' : ''}`}>{w.event}</span>
+              <span class="mt-3 block text-sm leading-relaxed text-fg-muted"><Inline text={w.text} host={cast.host} /></span>
+              {w.loop && (
+                <span class="loop mt-4 inline-flex whitespace-nowrap items-center gap-1.5 rounded-full border border-event/30 bg-event/8 px-2.5 py-0.5 font-mono text-[0.6875rem] text-event-soft">
+                  ↺ {w.loop}
+                </span>
+              )}
+            </li>
+          ))
+        }
+        <span class="pulse pointer-events-none absolute top-0 left-0 hidden h-px md:block" aria-hidden="true"></span>
+      </ol>}
+    </div>
+
+    <ul class="mt-6 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+      {
+        agentic.items.map((item, i) => {
+          const Tag = item.url ? 'a' : 'div';
+          return (
+            <li class:list={[item.list && 'md:col-span-2']} data-reveal style={`--reveal-delay:${(i % 3) * 60}ms`}>
+              <Tag href={item.url} rel={item.url ? cast.host.rel : undefined} class:list={['panel flex h-full flex-col p-5 md:p-6', item.url && 'glow group']} style="--glow: var(--color-view)">
+                <span class="note note-view">{item.kind}</span>
+                <span class="mt-4 font-display text-2xl font-[650] tracking-[-0.02em] transition-colors group-hover:text-view-soft">{item.name}</span>
+                <span class="mt-2 text-sm leading-relaxed text-fg-muted"><Inline text={item.text} host={cast.host} /></span>
+                {item.list && (
+                  <span class="mt-5 block">
+                    <span class="block font-mono text-[0.6875rem] tracking-[0.08em] text-fg-faint uppercase">{item.listLabel}</span>
+                    <span class="mt-2 flex flex-wrap gap-1.5">
+                      {item.list.map((x) => <span class="tag px-2 py-0.5 text-xs">{x}</span>)}
+                    </span>
+                  </span>
+                )}
+              </Tag>
+            </li>
+          );
+        })
+      }
+    {
+      aiPosts.length > 0 && (
+        <li class="md:col-span-2" data-reveal><div class="panel h-full p-5 md:px-7">
+          <p class="font-mono text-xs text-fg-faint">On the blog · {aiPosts.length} posts about {aiTheme?.label}</p>
+          <ul class="mt-3 grid gap-x-8 gap-y-2 md:grid-cols-2">
+            {aiPosts.map((p) => (
+              <li>
+                <a href={p.url} rel={cast.host.rel} class="group flex items-baseline gap-3 text-[0.9375rem]">
+                  <span class="text-view" aria-hidden="true">→</span>
+                  <span class="text-fg group-hover:underline">{p.headline}</span>
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div></li>
+      )
+    }
+    </ul>
+
+  </div>
+</section>
+
+<style>
+  @media (min-width: 768px) {
+    .harness {
+      grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
+    }
+  }
+  .pulse {
+    width: calc(100% / var(--columns, 5));
+    background: linear-gradient(90deg, transparent, var(--color-view), transparent);
+    opacity: 0;
+  }
+  :global(.js-motion) [data-harness].is-visible .pulse {
+    animation: harness 7.5s var(--ease-out-expo) infinite;
+  }
+  @keyframes harness {
+    0% { transform: translateX(0); opacity: 0; }
+    6% { opacity: 1; }
+    94% { opacity: 1; }
+    100% { transform: translateX(calc((var(--columns, 5) - 1) * 100%)); opacity: 0; }
+  }
+  .stage::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: color-mix(in oklab, var(--color-view) 6%, transparent);
+    opacity: 0;
+    pointer-events: none;
+  }
+  :global(.js-motion) [data-harness].is-visible .stage::before {
+    animation: stage-lit 7.5s ease-in-out infinite;
+    animation-delay: calc(var(--i) * 1.5s);
+  }
+  @keyframes stage-lit {
+    0%, 22%, 100% { opacity: 0; }
+    8% { opacity: 1; }
+  }
+</style>