docs: update documentation to OKF v0.1 format
This commit is contained in:
@@ -3,7 +3,7 @@ type: architecture
|
|||||||
title: Frontend Structure
|
title: Frontend Structure
|
||||||
description: Angular routes, components, services, guards, interceptors, and authenticated SSE transport.
|
description: Angular routes, components, services, guards, interceptors, and authenticated SSE transport.
|
||||||
tags: [architecture, frontend, angular, shell, sse]
|
tags: [architecture, frontend, angular, shell, sse]
|
||||||
timestamp: 2026-07-21T23:25:00Z
|
timestamp: 2026-07-22T09:22:34Z
|
||||||
---
|
---
|
||||||
|
|
||||||
# Routes
|
# Routes
|
||||||
@@ -25,7 +25,7 @@ Routes live in `frontend/src/app/app.routes.ts`:
|
|||||||
| Symbol | Path | Responsibility |
|
| Symbol | Path | Responsibility |
|
||||||
|---|---|---|
|
|---|---|---|
|
||||||
| `HomeComponent` | `frontend/src/app/features/home/home.component.ts` | Smart shell; owns navigation signals, user hydration, change-password flow, and event-stream lifecycle. |
|
| `HomeComponent` | `frontend/src/app/features/home/home.component.ts` | Smart shell; owns navigation signals, user hydration, change-password flow, and event-stream lifecycle. |
|
||||||
| `ShellHeaderComponent` | `frontend/src/app/features/shell/header/shell-header.component.ts` | Renders title, active section, event LED/countdown, and user menu. |
|
| `ShellHeaderComponent` | `frontend/src/app/features/shell/header/shell-header.component.ts` | Renders title, active section, event LED/countdown, and user menu; contains component-scoped LED styling. |
|
||||||
| `QuickTabsComponent` | `frontend/src/app/features/shell/tabs/quick-tabs.component.ts` | Emits navigation events for Challenges, Scoreboard, and Blog. |
|
| `QuickTabsComponent` | `frontend/src/app/features/shell/tabs/quick-tabs.component.ts` | Emits navigation events for Challenges, Scoreboard, and Blog. |
|
||||||
| `EventStatusStore` | `frontend/src/app/core/services/event-status.store.ts` | Applies event state frames and computes countdown text. |
|
| `EventStatusStore` | `frontend/src/app/core/services/event-status.store.ts` | Applies event state frames and computes countdown text. |
|
||||||
| `AuthenticatedEventSourceService` | `frontend/src/app/core/services/authenticated-event-source.service.ts` | Opens authenticated SSE over `fetch`, parsing streamed frames into `EventSourceLike` events. |
|
| `AuthenticatedEventSourceService` | `frontend/src/app/core/services/authenticated-event-source.service.ts` | Opens authenticated SSE over `fetch`, parsing streamed frames into `EventSourceLike` events. |
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ type: guide
|
|||||||
title: Authenticated Shell
|
title: Authenticated Shell
|
||||||
description: How a signed-in user experiences the post-login shell, including authenticated event streaming.
|
description: How a signed-in user experiences the post-login shell, including authenticated event streaming.
|
||||||
tags: [guide, shell, header, sse, navigation, tester]
|
tags: [guide, shell, header, sse, navigation, tester]
|
||||||
timestamp: 2026-07-22T09:03:53Z
|
timestamp: 2026-07-22T09:22:34Z
|
||||||
---
|
---
|
||||||
|
|
||||||
# When this view is available
|
# When this view is available
|
||||||
@@ -35,11 +35,7 @@ before the shell mounts.
|
|||||||
|
|
||||||
# Event LED colors
|
# Event LED colors
|
||||||
|
|
||||||
The LED is rendered by `ShellHeaderComponent` as a `<span class="led">`
|
The LED is rendered by `ShellHeaderComponent` as a `<span class="led">` with one of four state classes attached via `[class.led-<state>]`. Its component-scoped styling is declared in `frontend/src/app/features/shell/header/shell-header.component.ts` and is driven entirely by the existing theme color tokens — there is no per-state color in TypeScript.
|
||||||
with one of four state classes attached via `[class.led-<state>]`. The
|
|
||||||
visual styling lives in `frontend/src/styles.css` and is driven entirely
|
|
||||||
by the existing theme color tokens — there is no per-state color in
|
|
||||||
TypeScript.
|
|
||||||
|
|
||||||
| Event state | CSS class | Color token | Approx. hex | Visual |
|
| Event state | CSS class | Color token | Approx. hex | Visual |
|
||||||
|-------------------|-----------------------|-----------------------|-------------|--------|
|
|-------------------|-----------------------|-----------------------|-------------|--------|
|
||||||
@@ -81,8 +77,8 @@ error event. The shell retains the last event state until a later connection suc
|
|||||||
| `frontend/src/app/features/home/home.component.ts` | Hosts the shell and starts/stops the authenticated event stream. |
|
| `frontend/src/app/features/home/home.component.ts` | Hosts the shell and starts/stops the authenticated event stream. |
|
||||||
| `frontend/src/app/core/services/authenticated-event-source.service.ts` | Fetch-based authenticated SSE transport with abort and frame parsing. |
|
| `frontend/src/app/core/services/authenticated-event-source.service.ts` | Fetch-based authenticated SSE transport with abort and frame parsing. |
|
||||||
| `frontend/src/app/core/services/event-status.store.ts` | Applies event frames and derives the live countdown. |
|
| `frontend/src/app/core/services/event-status.store.ts` | Applies event frames and derives the live countdown. |
|
||||||
| `frontend/src/app/features/shell/header/shell-header.component.ts` | Renders event LED, countdown, navigation, and user menu. |
|
| `frontend/src/app/features/shell/header/shell-header.component.ts` | Renders event LED, countdown, navigation, and user menu; owns the component-scoped LED shape and state color rules. |
|
||||||
| `frontend/src/styles.css` | Defines the `.led` base shape plus the four `.led-{state}` background-color rules keyed on theme tokens. |
|
| `frontend/src/styles.css` | Defines the shared theme color tokens consumed by the shell LED. |
|
||||||
| `frontend/src/app/features/shell/tabs/quick-tabs.component.ts` | Renders the main navigation tabs. |
|
| `frontend/src/app/features/shell/tabs/quick-tabs.component.ts` | Renders the main navigation tabs. |
|
||||||
| `tests/frontend/authenticated-event-source.spec.ts` | Verifies authorization headers, SSE frame delivery, and anonymous header omission. |
|
| `tests/frontend/authenticated-event-source.spec.ts` | Verifies authorization headers, SSE frame delivery, and anonymous header omission. |
|
||||||
|
|
||||||
|
|||||||
+1
-1
@@ -11,7 +11,7 @@ scoreboard, an event window with a public countdown, theming, and admin
|
|||||||
controls.
|
controls.
|
||||||
|
|
||||||
The docs below are organized by purpose so agents can pull just the slice
|
The docs below are organized by purpose so agents can pull just the slice
|
||||||
they need. Last regenerated 2026-07-22T09:03:53Z.
|
they need. Last regenerated 2026-07-22T09:22:34Z.
|
||||||
|
|
||||||
# Architecture
|
# Architecture
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user