Skip to content
← All starter build updates

Events starter

Beacon

A conference site with a clear program, speaker stories and a personal agenda.

Live on VuraUpdated

Speaker/session relationships, fuller abstracts, contextual agenda saves and a real folded calendar download are operational. Static details and saved-only agenda behavior passed.

Public sourceBUILD.mdOpen verified demo ↗In-app build guide
Beacon: actual released desktop product view after the shared typography refinement.
Preview captured · Explore the product ↗

Build phase

  1. PlannedComplete
  2. BuildingComplete
  3. Local checks passedComplete
  4. In reviewComplete
  5. Live on VuraCurrent phase

This tracks the recorded release phase. The checks below include later findings and ongoing refinements.

Product scope and intended patterns

The following describes the intended reference. Features are not a verification claim; recorded check results below define what has actually been tested.

Build-time rendered public content with client-mounted interactive islands.

Learning journal

How to read this starter

Beacon is a static event site with session and speaker routes plus a local agenda island that exports VCALENDAR text.

Source map

Agenda island

src/client/main.jsx

Signals store topic, timezone, saved session ids, storage mode and ICS output.

Server renderer

src/server/render.mjs

Session and speaker routes render as direct static pages.

Static build

scripts/build.mjs

The build emits route HTML, assets, sitemap, robots and manifest.

Browser smoke

scripts/smoke.mjs

The smoke covers route loads, filtering, saving, timezone switching, ICS export, denied storage and 404.

Pure calendar serialization

src/calendar.mjs

UTC event stamps, escaped text, CRLF separators and UTF-8-aware 75-octet folding are independent of UI timezone labels.

Responsive application stylesheet

src/styles.css

Session panels align to their own content and retain the shared control and focus scale.

Code patterns worth copying

Escape VCALENDAR fields before export

src/calendar.mjs

Calendar files have their own escaping rules; saved session data should not be inserted raw.

function escapeIcs(value) { return String(value).replace(/\\/g, '\\\\').replace(/,/g, '\\,').replace(/;/g, '\\;').replace(/\n/g, '\\n'); }

Compute the calendar from saved sessions

src/client/main.jsx

Filtering and timezone controls change the visible agenda, not the UTC event instants. Saved ids drive export, including saved sessions hidden by a topic filter.

const calendar=useComputed(()=>makeIcs(data.sessions.filter((session)=>saved().includes(session.slug))));

Fold calendar lines by UTF-8 bytes

src/calendar.mjs

Continuation whitespace counts toward the next line. Date stamps come from UTC event instants and the actual generation clock.

const bytes = encoder.encode(char).length;
    if (width + bytes > 75) { result += '\r\n '; width = 1; }

Use the shared stylesheet on application routes

src/styles.css

Session panels align to their own content and retain the shared control and focus scale.

.session-detail { align-items: start; }

Real issues and fixes

Static fallback cards and mounted controls needed different link shapes

Problem
The static agenda row can be a whole-card link, but the mounted agenda row also contains a Save button. Nesting that control in a big link would be invalid and confusing.
Fix
Keep static fallback rows as whole-card links; after mounting, render title/details as its own anchor beside a separate Save button.
Proof
The browser smoke saves a session, switches timezone, exports ICS, and still opens direct session routes.
Takeaway
Interactive islands may need a different accessible link structure than their no-JS fallback.

The first page composition read like a poster, not an event tool

Problem
A graphic-led homepage hid the next useful object for someone evaluating the starter.
Fix
The current server render leads with next-session context and schedule density before ornamental content.
Proof
The smoke loads the generated home page and records a desktop screenshot from the static artifact.
Takeaway
Starter pages should foreground the workflow object, not only the aesthetic.

Calendar preview is not a downloaded calendar file

Problem
The agenda only showed textarea text while its export copy promised a file; long Unicode fields also needed byte-aware calendar serialization.
Fix
Move serialization into pure makeIcs, use UTC starts/ends and generation DTSTAMP, escape fields and fold by UTF-8 octets. Download a text/calendar Blob and revoke its temporary URL; save changes clear stale preview.
Proof
Product-depth checks cover Unicode folding and timestamps; browser tests await a real .ics download and assert saved-only sessions at desktop/mobile widths.
Takeaway
Export proof should inspect the actual file and format, not just visible preview text.

What went smoothly

  • The local agenda can export calendar text without any ticketing or account service.
  • Direct session and speaker pages make the starter useful even without the agenda island.
  • The same saved-session ids feed the preview and file; static schedule/session/speaker relationships stay readable without JavaScript.
  • Content-fit session details and compact schedule labels keep agenda actions close to event facts; the wordmark remains a 44px home target.

Boundaries to preserve

  • Sessions and speakers are fictional event fixtures.
  • Agenda state and ICS output are local-only; there is no ticketing, sync or external calendar API.

Verification record

Build journal

  1. · Live on Vura

    Shared typography release captured from production

    Published shared typography and responsive control refinements are tied to the exact live deployment and source revision. Actual released captures replace the previous gallery preview; existing product behavior and source-grounded lessons are retained.

  2. · Live on Vura

    Product-depth iteration released and exercised

    Speaker/session relationships, fuller abstracts, contextual agenda saves and a real folded calendar download are operational. Static details and saved-only agenda behavior passed.

  3. · Live on Vura

    Reviewed source ready for release verification

    Unique product identities and deeper workflows are implemented and independently reviewed. Existing releases remain accessible while new source is published and fresh deployments are exercised.

  4. · Live on Vura

    Product-depth iteration in progress

    Adding fuller session details, speaker relationships and actual calendar download alongside the preview. The current source and deployment links still identify the previous verified release.

  5. · Live on Vura

    Live corrections verified after independent follow-up

    The agenda groups sessions by day and makes selected filters visible. Its mounted session links and separate Save buttons now preserve both navigation and local persistence.

  6. · Live on Vura

    Design refinement released for live workflow review

    The agenda groups sessions by day and makes selected filters visible. Its mounted session links and separate Save buttons now preserve both navigation and local persistence.

  7. · Live on Vura

    Independent live design review started

    The existing public app remains available while a new design review examines hierarchy, typography, navigation and workflow clarity. Actual findings and before/after repairs will be recorded as they are verified.

  8. · Live on Vura

    Hosted reference rechecked after documentation review

    Public source, green CI and the live app were checked together after the clean-machine documentation pass. Lessons and limitations now reflect the implemented code rather than pending pre-release work.

  9. · Live on Vura

    Final source and CI checkpoint verified

    The public source and build reference match the released learning journal, and the source workflow is green. The demo remains live at the same verified deployment; README and CI-only refinements did not change application code.

  10. · Live on Vura

    Clean-machine browser setup documented

    The README now installs the locked Chromium engine after npm ci and explains the Linux system-library prerequisite. The hosted application is unchanged; code examples, repair notes and boundaries remain source-backed.

  11. · Live on Vura

    Cross-platform verification refinement

    The390px guide now wraps correctly with wider Linux fallback fonts. The updated stylesheet is deployed and the Linux check passed.

  12. · Live on Vura

    Public template and Vura release

    The reviewed implementation is available from its independent repository and real hosted URL. Detailed code examples and actual repair notes are linked below.

  13. · In review

    Design review cleared; release verification underway

    The local implementation is complete and revised visual evidence has passed review. Source and demo links will appear only after publication and hosted verification.

  14. · In review

    Local build ready for specialist review

    The implementation owner completed the local build and workflow checks. No public source release or hosted verification is claimed yet.

  15. · Building

    Implementation started

    The standalone project files exist and the product build is active. No local verification or live release is claimed yet.

  16. · Planned

    Product scope recorded

    This is a planned starter, not a working release. Implementation, tests, public source and deployment evidence will be added as they are completed.

Implementation lessons

Known limitations

Remaining work and blockers

No release blockers are recorded for this snapshot.

Using this as an agent reference

Read the public README and BUILD.md, reproduce the recorded checks and inspect the source before adapting the starter. A live demo, where available, provides separate deployed evidence.

Agent workflowSignalsEffectsGlobal stateRouting