create-trokky 0.1.2 → 0.1.3

package/files/site/conference/src/pages/speakers/[id].astro

@@ -0,0 +1,32 @@
+---
+import Base from '../../layouts/Base.astro'
+import { load } from '../../trokky/page'
+import Avatar from '../../components/Avatar.astro'
+import SessionCard from '../../components/SessionCard.astro'
+const s = await load(Astro)
+const sp = await s.speaker(Astro.params.id!)
+if (!sp) return new Response(null, { status: 404 })
+---
+<Base title={sp.name} event={s.event}>
+  <section><div class="wrap">
+    <a class="back-link" href="/speakers">← All speakers</a>
+    <div class="speaker-detail-grid">
+      <div class="speaker-aside">
+        <Avatar speaker={sp} size={280} />
+        {(sp.pronouns || sp.city) && <p class="pronoun">{[sp.pronouns, sp.city].filter(Boolean).join(" · ")}</p>}
+      </div>
+      <div class="detail-main">
+        {sp.role && <div class="eyebrow">{sp.role}</div>}
+        <h1 class="display">{sp.name}</h1>
+        {sp.org && <p class="lede" style="color:var(--ink-soft)">{sp.org}</p>}
+        {sp.bio && <p class="detail-prose">{sp.bio}</p>}
+        {sp.sessions.length > 0 && (
+          <>
+            <h3 class="serif" style="margin:2.5rem 0 1rem">Sessions at {s.event?.name}</h3>
+            {sp.sessions.map(x => <SessionCard session={x} showDay />)}
+          </>
+        )}
+      </div>
+    </div>
+  </div></section>
+</Base>

package/files/site/conference/src/pages/speakers/index.astro

@@ -0,0 +1,20 @@
+---
+import Base from '../../layouts/Base.astro'
+import { load } from '../../trokky/page'
+import SpeakerCard from '../../components/SpeakerCard.astro'
+const s = await load(Astro)
+const speakers = await s.speakers()
+---
+<Base title="Speakers" event={s.event}>
+  <section class="detail-head"><div class="wrap">
+    <span class="eyebrow">{speakers.length} speakers</span>
+    <h1 class="display">The line-up</h1>
+    <p class="lede" style="max-width:54ch;color:var(--ink-soft)">The people on the stages and in the rooms — every card links to the speaker's own page, with their sessions.</p>
+  </div></section>
+
+  <section class="section section-noborder"><div class="wrap">
+    {speakers.length > 0
+      ? <div class="card-grid">{speakers.map(sp => <SpeakerCard speaker={sp} />)}</div>
+      : <p class="empty-note">No speakers yet — open <a href="/studio">Studio</a> and add the first one.</p>}
+  </div></section>
+</Base>

package/files/site/conference/src/pages/sponsors.astro

@@ -0,0 +1,37 @@
+---
+import Base from '../layouts/Base.astro'
+import { load } from '../trokky/page'
+import SponsorMark from '../components/SponsorMark.astro'
+const s = await load(Astro)
+const tiers = await s.sponsorsByTier()
+---
+<Base title="Sponsors" event={s.event}>
+  <section class="detail-head"><div class="wrap">
+    <span class="eyebrow">Grouped by tier</span>
+    <h1 class="display">Sponsors</h1>
+    <p class="lede" style="max-width:54ch;color:var(--ink-soft)">The partners who make Frameworks Live possible, grouped by tier.</p>
+  </div></section>
+
+  <section class="section section-noborder"><div class="wrap">
+    {tiers.length > 0 ? tiers.map(t => (
+      <div class="sponsor-tier">
+        <div class="sponsor-tier-head">
+          <h3 class="serif">{t.tier}</h3>
+          <span class="tier-line"></span>
+          <span style="font-family:var(--mono);font-size:0.78rem;color:var(--ink-mute)">{t.sponsors.length} sponsor{t.sponsors.length > 1 ? 's' : ''}</span>
+        </div>
+        <div class={`sponsor-grid tier-${t.tier}`}>
+          {t.sponsors.map(sp => (
+            <a class="sponsor-card" href={sp.url || '#'}>
+              <SponsorMark sponsor={sp} />
+              <p class="sponsor-blurb">{sp.blurb}</p>
+              <span class="sponsor-link">visit {String(sp.name).toLowerCase()} →</span>
+            </a>
+          ))}
+        </div>
+      </div>
+    )) : (
+      <p class="empty-note">No sponsors yet — open <a href="/studio">Studio</a> and add the first one.</p>
+    )}
+  </div></section>
+</Base>

package/files/site/conference/src/pages/venue.astro

@@ -0,0 +1,73 @@
+---
+import Base from '../layouts/Base.astro'
+import { load } from '../trokky/page'
+const s = await load(Astro)
+const v = s.venue
+const ev = s.event
+const firstWord = v?.name ? String(v.name).split(' ')[0] : 'Hall'
+const verticals = Array.from({ length: 9 }, (_, i) => i * 100)
+const horizontals = Array.from({ length: 4 }, (_, i) => i * 90)
+---
+<Base title="Venue & tickets" event={ev}>
+  <section class="venue-hero"><div class="wrap">
+    {v ? (
+      <>
+        <div class="eyebrow">The hall</div>
+        <h1 class="display" style="margin:0.4rem 0 1.2rem">{v.name}</h1>
+        <p class="lede">{v.address}</p>
+        {v.about && <p style="max-width:62ch">{v.about}</p>}
+      </>
+    ) : (
+      <p class="empty-note lede">No venue yet — open <a href="/studio">Studio</a> and describe the hall.</p>
+    )}
+    <div class="venue-map">
+      <svg viewBox="0 0 800 360" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
+        <rect width="800" height="360" fill="#F2EDE4" />
+        {verticals.map(x => <line x1={x} y1={0} x2={x} y2={360} stroke="#E4DCCD" stroke-width={1} />)}
+        {horizontals.map(y => <line x1={0} y1={y} x2={800} y2={y} stroke="#E4DCCD" stroke-width={1} />)}
+        <rect x={60} y={120} width={160} height={120} fill="none" stroke="#14110F" stroke-width={2} />
+        <text x={140} y={185} text-anchor="middle" font-family="Fraunces, serif" font-size={22} fill="#14110F">{firstWord}</text>
+        <path d="M250 220 Q 400 230 540 250 L 800 320" stroke="#3D6B9E" stroke-width={14} fill="none" opacity={0.5} />
+        <circle cx={140} cy={180} r={14} fill="#C8442B" />
+        <circle cx={140} cy={180} r={28} fill="#C8442B" opacity={0.2} />
+        <text x={170} y={186} font-family="JetBrains Mono, monospace" font-size={13} fill="#4A4540">{v?.name ?? ''}</text>
+        <text x={470} y={300} font-family="JetBrains Mono, monospace" font-size={12} fill="#3D6B9E">Rio Tejo</text>
+      </svg>
+    </div>
+  </div></section>
+
+  <section class="section"><div class="wrap">
+    <div class="section-head">
+      <div><span class="eyebrow">Getting there</span><h2 class="display">Travel</h2></div>
+    </div>
+    <div class="travel-grid">
+      {(v?.travel ?? []).length > 0
+        ? v.travel.map((t: any) => (
+            <div class="travel-item">
+              <div class="mode">{t.mode}</div>
+              <p>{t.detail}</p>
+            </div>
+          ))
+        : <p class="empty-note">No travel details yet — add them to the Venue document in Studio.</p>}
+    </div>
+  </div></section>
+
+  <section class="section section-noborder" id="tickets"><div class="wrap">
+    <div class="section-head">
+      <div><span class="eyebrow">Tickets</span><h2 class="display">Get a pass</h2></div>
+    </div>
+    <div class="tickets">
+      {(v?.tickets ?? []).length > 0
+        ? v.tickets.map((t: any) => (
+            <div class={`ticket ${t.featured ? 'is-featured' : ''}`}>
+              <div class="t-name">{t.name}</div>
+              <div class="t-price">{t.price}</div>
+              <p class="t-note">{t.note}</p>
+              <ul>{(t.features ?? []).map((f: string) => <li>{f}</li>)}</ul>
+              <a class="t-cta" href="#">Reserve a {String(t.name).toLowerCase()} pass</a>
+            </div>
+          ))
+        : <p class="empty-note">No tickets yet — add them to the Venue document in Studio.</p>}
+    </div>
+  </div></section>
+</Base>

package/files/site/conference/src/trokky/site.ts

@@ -0,0 +1,182 @@
+/**
+ * What the pages read.
+ *
+ * They call the core directly rather than the HTTP API: the site is server-side code in the same
+ * process as Trokky, so it has the same trust and needs no token, and a render never leaves the
+ * process. Only published content is ever returned from here.
+ *
+ * Nothing in this file is runtime-specific — that is the point. It is byte-identical on Workers
+ * and on Node; only `page.ts` differs, because only the way a page gets hold of the core differs.
+ *
+ * A conference is joined data — a session points at its track and its speakers — so the whole
+ * program is loaded once and resolved here. The Studio writes references as `{_ref, _type}`
+ * objects and seeds write plain ids; both must join, which is what `refId` is for.
+ */
+import type { TrokkyCore } from '@trokky/trokky'
+
+/**
+ * Where the API is mounted, for the media URLs the browser will fetch. Declared here rather than
+ * imported, because the Workers entry that also declares it does not exist on Node.
+ */
+const API_PATH = '/api'
+
+type Doc = Record<string, any> & { id: string; _status?: string }
+
+const published = { filter: { _status: 'published' } }
+
+/** A Studio reference field stores `{_ref, _type}`; seeds and hand-written content store the
+ *  plain id. The adapter matches on the stored shape, so joins read through this — never `===`. */
+export const refId = (value: unknown): string | null => {
+  if (typeof value === 'string') return value
+  const ref = (value as { _ref?: unknown } | null)?._ref
+  return typeof ref === 'string' ? ref : null
+}
+
+/** A date field is stored exactly as written (`2026-05-13`); the Studio may write a full ISO
+ *  datetime. Both are the same day, which is what the schedule groups on. */
+const dayOf = (value: unknown): string => (/^\d{4}-\d{2}-\d{2}/.exec(String(value ?? '')) ?? [''])[0]
+
+export interface Site {
+  event: Doc | null
+  venue: Doc | null
+  /** Tracks in their scheduled column order. */
+  tracks(): Promise<Doc[]>
+  track(id: string): Promise<Doc | null>
+  /** Speakers in name order. */
+  speakers(): Promise<Doc[]>
+  /** One speaker, with sessions reverse-resolved from the session documents. */
+  speaker(id: string): Promise<Doc | null>
+  sessions(opts?: { day?: string; track?: string; speaker?: string; type?: string }): Promise<Doc[]>
+  session(id: string): Promise<Doc | null>
+  /** Tiers in platinum, gold, silver, partner order; empty tiers are skipped. */
+  sponsorsByTier(): Promise<{ tier: string; sponsors: Doc[] }[]>
+  /** The distinct session days, in order. */
+  days(): Promise<string[]>
+}
+
+const TIERS = ['platinum', 'gold', 'silver', 'partner']
+
+export async function site(core: TrokkyCore): Promise<Site> {
+  const [event, venue, trackRows, speakerRows, sessionRows, sponsorRows] = await Promise.all([
+    core.getDocument('event', 'event') as Promise<Doc | null>,
+    core.getDocument('venue', 'venue') as Promise<Doc | null>,
+    core.listDocuments('track', published) as Promise<Doc[]>,
+    core.listDocuments('speaker', published) as Promise<Doc[]>,
+    core.listDocuments('session', published) as Promise<Doc[]>,
+    core.listDocuments('sponsor', published) as Promise<Doc[]>,
+  ])
+
+  // Name guards: a hand-written document without a name would otherwise throw once it reached a
+  // sort key, and one bad doc would 500 every route on the site.
+  const tracks = [...trackRows].sort((a, b) =>
+    Number(a.order ?? 0) - Number(b.order ?? 0) || String(a.name ?? '').localeCompare(String(b.name ?? '')))
+  const tracksById = new Map(tracks.map(t => [t.id, t]))
+
+  const speakers = [...speakerRows].sort((a, b) => String(a.name ?? '').localeCompare(String(b.name ?? '')))
+  const speakersById = new Map(speakers.map(sp => [sp.id, sp]))
+
+  const resolveSession = (s: Doc): Doc => ({
+    ...s,
+    day: dayOf(s.day),
+    track: tracksById.get(refId(s.track) ?? '') ?? null,
+    speakers: (s.speakers ?? []).map((v: unknown) => speakersById.get(refId(v) ?? '')).filter((sp): sp is Doc => Boolean(sp)),
+  })
+
+  const sessions = sessionRows
+    .map(resolveSession)
+    .sort((a, b) => a.day.localeCompare(b.day) || String(a.start ?? '').localeCompare(String(b.start ?? '')))
+
+  /** A speaker's sessions, reverse-resolved: the speaker document stores none. */
+  const sessionsBySpeaker = new Map<string, Doc[]>()
+  for (const s of sessions) for (const sp of s.speakers) {
+    if (!sessionsBySpeaker.has(sp.id)) sessionsBySpeaker.set(sp.id, [])
+    sessionsBySpeaker.get(sp.id)!.push(s)
+  }
+
+  const sessionById = new Map(sessions.map(s => [s.id, s]))
+
+  return {
+    event,
+    venue,
+
+    tracks: async () => tracks,
+    track: async id => tracksById.get(id) ?? null,
+
+    speakers: async () => speakers,
+    speaker: async id => {
+      const sp = speakersById.get(id)
+      return sp ? { ...sp, sessions: sessionsBySpeaker.get(id) ?? [] } : null
+    },
+
+    sessions: async ({ day, track, speaker, type } = {}) => sessions.filter(s =>
+      (!day || s.day === day) &&
+      (!track || s.track?.id === track) &&
+      (!type || s.type === type) &&
+      (!speaker || s.speakers.some((sp: Doc) => sp.id === speaker))
+    ),
+    session: async id => sessionById.get(id) ?? null,
+
+    sponsorsByTier: async () => {
+      const tiers = new Map(TIERS.map(t => [t, [] as Doc[]]))
+      for (const sp of sponsorRows) if (tiers.has(sp.tier)) tiers.get(sp.tier)!.push(sp)
+      return [...tiers.entries()].filter(([, sponsors]) => sponsors.length > 0).map(([tier, sponsors]) => ({ tier, sponsors }))
+    },
+
+    // A session with no parseable day gets '' from dayOf; it must not become a phantom column.
+    days: async () => [...new Set(sessions.map(s => s.day).filter(Boolean))].sort(),
+  }
+}
+
+/**
+ * A media field holds `{ asset: { _ref: <media id> }, alt?, caption? }` — the shape the Studio
+ * reads and writes. A bare id is accepted too, for content written by hand.
+ */
+export function mediaId(value: unknown): string | null {
+  if (typeof value === 'string') return value
+  const ref = (value as { asset?: { _ref?: unknown } } | null)?.asset?._ref
+  return typeof ref === 'string' ? ref : null
+}
+
+export const mediaUrl = (value: unknown, variant?: 'thumbnail' | 'large'): string | null => {
+  const id = mediaId(value)
+  if (!id) return null
+  return variant ? `${API_PATH}/media/${id}/variants/${variant}` : `${API_PATH}/media/${id}/file`
+}
+
+/** Formatting and the generated marks, shared by the pages and the components. */
+
+const DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+
+/** `2026-05-13` — or the Studio's datetime form of it — as `Wed 13 May`. */
+export const formatDate = (value: unknown): string => {
+  const day = dayOf(value)
+  if (!day) return ''
+  const d = new Date(`${day}T00:00:00`)
+  return `${DAYS[d.getDay()]} ${d.getDate()} ${MONTHS[d.getMonth()]}`
+}
+
+export const formatDateRange = (start: unknown, end: unknown): string => {
+  const s = dayOf(start).slice(0, 10)
+  const e = dayOf(end).slice(0, 10)
+  if (!s || !e) return ''
+  const a = new Date(`${s}T00:00:00`)
+  const b = new Date(`${e}T00:00:00`)
+  if (a.getMonth() === b.getMonth()) {
+    return `${MONTHS[a.getMonth()]} ${a.getDate()}–${b.getDate()}, ${b.getFullYear()}`
+  }
+  return `${formatDate(s)} – ${formatDate(e)}`
+}
+
+/**
+ * The generated marks: speakers and sponsors without an uploaded image render a deterministic
+ * monogram instead, seeded from a string so the same name always gets the same color — the
+ * site ships no image assets at all.
+ */
+export const hashStr = (s: string): number => [...s].reduce((h, c) => (h * 31 + c.charCodeAt(0)) >>> 0, 0)
+
+const MARK_COLORS = ['#C8442B', '#2C6E6A', '#B8860B', '#5B4B8A', '#3D6B9E', '#8A3324', '#4A6741', '#7A4B6E']
+export const colorFor = (s: string): string => MARK_COLORS[hashStr(s) % MARK_COLORS.length]
+
+export const initials = (name: string): string =>
+  name.split(/\s+/).map(w => w[0]).slice(0, 2).join('').toUpperCase()

package/manifest.json

@@ -137,6 +137,11 @@
           "id": "magazine",
           "title": "Magazine",
           "hint": "Articles, authors, categories, documents, pages."
+        },
+        {
+          "id": "conference",
+          "title": "Conference",
+          "hint": "Event, venue, tracks, speakers, sessions, sponsors."
         }
       ]
     }
@@ -225,10 +230,11 @@
       },
       "allow": {
         "content": [
-          "magazine"
+          "magazine",
+          "conference"
         ]
       },
-      "because": "A site needs something to render. Choose the magazine content model, or drop the frontend."
+      "because": "A site needs something to render. Choose the magazine or conference content model, or drop the frontend."
     }
   ],
   "defaults": {
@@ -326,6 +332,21 @@
         "parts": "full-site",
         "content": "magazine"
       }
+    },
+    {
+      "id": "conference",
+      "title": "The conference template",
+      "repo": "https://github.com/Trokky/templates",
+      "path": "conference",
+      "deployButton": "https://deploy.workers.cloudflare.com/?url=https://github.com/Trokky/templates/tree/main/conference",
+      "composition": {
+        "target": "workers",
+        "data": "cloudflare-d1",
+        "media": "cloudflare-r2",
+        "images": "cloudflare-images",
+        "parts": "full-site",
+        "content": "conference"
+      }
     }
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-trokky",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Compose a Trokky project: pick the target, adapters and parts you want.",
   "type": "module",
   "license": "MIT",