rob thijssen
b04afd83f9
Replaces the CRA + React 16 + class-component frontend with the
shape from architecture/generic.md §4: vite + react + swc + ts,
served as static from nginx in prod, vite dev server in dev with
/api proxied to localhost:8080.
Layout:
ui/
package.json, vite.config.ts, tsconfig.{json,app,node}.json
index.html
src/
main.tsx — react root + react-query provider
App.tsx — header, filters, vertical timeline
App.css — dark backdrop, hot-pink links
api/client.ts — TS types mirroring moments-entities;
fetchEvents, fetchSources via /api/v1
components/
Filters.tsx — source toggles, count slider, date range
TimelineEntry.tsx — renders one TimelineItem with body
support for markdown, commits, links
lib/icon.tsx — TimelineIcon → react-bootstrap-icons map
+ colour per icon
Stack: react 19, @tanstack/react-query 5, react-bootstrap 2 (on
bootstrap 5), react-vertical-timeline-component 3, rc-slider 11
(<Slider range /> replaces the removed v8 Range), react-markdown 9.
Dev proxy: /api/* → http://localhost:8080/* (rewrite strips /api).
Backend stays location-agnostic at /v1; ingress prefix is added
by nginx (and the dev proxy) so the same fetch shape works in
both environments.
Verified: tsc -b clean, vite build clean (417 KB js / 245 KB css
gzip 128 / 33), vite dev server serves the index. NOT verified
visually in a browser — that's a `pnpm run dev` away on roosta
once the api is up.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
91 lines
2.3 KiB
TypeScript
91 lines
2.3 KiB
TypeScript
import ReactMarkdown from 'react-markdown';
|
|
import { VerticalTimelineElement } from 'react-vertical-timeline-component';
|
|
import type { TimelineBody, TimelineItem, TitleSegment } from '../api/client';
|
|
import { colorFor, iconFor } from '../lib/icon';
|
|
|
|
interface Props {
|
|
item: TimelineItem;
|
|
}
|
|
|
|
export function TimelineEntry({ item }: Props) {
|
|
const Icon = iconFor(item.icon);
|
|
const date = formatDate(item.occurred_at);
|
|
|
|
return (
|
|
<VerticalTimelineElement
|
|
date={date}
|
|
iconStyle={{ background: colorFor(item.icon), color: '#fff' }}
|
|
icon={<Icon />}
|
|
>
|
|
<h4 className="vertical-timeline-element-title">
|
|
{renderSegments(item.title)}
|
|
</h4>
|
|
{item.subtitle && (
|
|
<h5 className="vertical-timeline-element-subtitle">
|
|
{renderSegments(item.subtitle)}
|
|
</h5>
|
|
)}
|
|
{item.body && <Body body={item.body} />}
|
|
</VerticalTimelineElement>
|
|
);
|
|
}
|
|
|
|
function Body({ body }: { body: TimelineBody }) {
|
|
switch (body.kind) {
|
|
case 'markdown':
|
|
return <ReactMarkdown>{body.text}</ReactMarkdown>;
|
|
case 'commits':
|
|
return (
|
|
<ul style={{ listStyle: 'none', paddingLeft: 0 }}>
|
|
{body.commits.map((c) => (
|
|
<li key={c.sha}>
|
|
<a href={c.url} target="_blank" rel="noopener noreferrer">
|
|
<code>{c.short_sha}</code>
|
|
</a>{' '}
|
|
{c.message}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
case 'links':
|
|
return (
|
|
<ul>
|
|
{body.items.map((seg, i) => (
|
|
<li key={i}>{renderSegment(seg, i)}</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
}
|
|
}
|
|
|
|
function renderSegments(segments: TitleSegment[]) {
|
|
return segments.map((seg, i) => renderSegment(seg, i));
|
|
}
|
|
|
|
function renderSegment(seg: TitleSegment, i: number) {
|
|
if (seg.kind === 'link') {
|
|
return (
|
|
<a key={i} href={seg.url} target="_blank" rel="noopener noreferrer">
|
|
{seg.text}
|
|
</a>
|
|
);
|
|
}
|
|
return <span key={i}>{seg.text}</span>;
|
|
}
|
|
|
|
function formatDate(iso: string): string {
|
|
const d = new Date(iso);
|
|
const date = d
|
|
.toLocaleDateString('en-GB', {
|
|
weekday: 'long',
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric',
|
|
})
|
|
.toLowerCase();
|
|
const time = d
|
|
.toLocaleTimeString('en-GB', { timeZoneName: 'short' })
|
|
.toLowerCase();
|
|
return `${date} — ${time}`;
|
|
}
|