Add organization index and three GitHub org pages #80

New issue

Closed

opened 2026-07-30 17:18:50 +00:00 by coilyco-ops · 1 comment

coilyco-ops commented

2026-07-30 17:18:50 +00:00

Collaborator

Outcome

Add a public organization hub to coilysiren.me, link it from the primary navigation even though that row is already crowded, and give each of Kai's three GitHub organizations its own page.

Routes

/orgs/
/orgs/coilyco-flight-deck/
/orgs/coilyco-bridge/
/orgs/coilyco-gaming/

Add ./orgs to the first top-navigation group. Keep it visible at every breakpoint. The existing wrap behavior is acceptable on narrow screens.

Experience definition

Organization hub

Use the existing post shell and the stronger visual language established by /apps.

Opening frame:

Eyebrow: THREE BAYS / ONE WORKSHOP
Title: The Coily Co orgs
Supporting copy: Public tools, the operator back office, and the games where the machinery gets playtested.

Show three large organization cards. Each card uses the existing SVG asset under src/images/icons/, a one-line purpose, a few representative repositories or capabilities, a clear internal explore action, and a secondary external GitHub action.

coilyco-flight-deck - Public OSS. LLM observability, agent devex, and tooling for AI consumers.
coilyco-bridge - Operational back office. Make the canonical Forgejo destination prominent and expose only public-safe, already-public information.
coilyco-gaming - Games and game tooling. Lead with Eco, Galaxy Gen, and Steam tooling.

The three cards become one column on phones and three columns when space permits. The icon, name, purpose, and action must remain legible without relying on color.

Organization detail pages

Each page contains:

A distinct hero using that organization's existing icon.
A concise purpose statement.
A primary link to the GitHub organization.
For Bridge, an equally prominent link to its canonical Forgejo organization.
A curated set of current public repositories or capabilities. Active work appears before archived work. Archived repositories carry an explicit archived label.
A final view all repositories link to GitHub.
A small cross-navigation block back to /orgs/ and across to the other two organizations.

Do not surface private Bridge repository names, counts, or metadata. Do not fetch organization data in the browser. Keep a public static catalog in the repo so the pages render deterministically, then direct visitors to GitHub for the exhaustive live inventory.

Visual direction

Keep the site recognizably coilysiren.me. The pages should feel like three rooms off the same hallway, not three unrelated microsites.

Flight Deck can lean cool and instrument-like.
Bridge can lean warmer and more connective.
Gaming can carry the most playful color and motion.
Preserve the existing violet shell, typography, border treatment, focus ring behavior, and mobile-first width rules.
Motion must be nonessential and respect prefers-reduced-motion.

The existing src/data/site-config.ts describes a different three-site concept that includes coilysiren and omits gaming. Do not silently repurpose that contract for these four routes.

Metadata and accessibility

Give every route a unique title, description, canonical URL, and Open Graph image.
Use heading levels in order.
Give organization logos useful alt text only when the adjacent text does not already name the organization.
Make card targets and the crowded navigation fully usable from the keyboard.
Keep visible focus treatment and sufficient contrast in all three organization accents.

Repository work

Add a shared public organization data module.
Add reusable presentational components for the hub and detail pages.
Add focused Sass for the organization experience.
Add ./orgs to src/components/links.tsx.
Update docs/FEATURES.md because this adds a new public page family.
Extend Cypress smoke coverage to visit all four routes and follow the top-nav link.

Verification

ward exec test
ward exec build
Run the relevant Cypress smoke path through the Ward command surface.
Confirm the top navigation wraps cleanly at phone width and all three cards remain readable without horizontal scrolling.
Land direct to canonical main, then verify the Forgejo test and staging-image workflows according to AGENTS.md.

Role handoff

The Designer seat completed this experience definition on 2026-07-30. Gatsby route creation, navigation changes, public content implementation, and test updates belong to the Engineer seat under the active role boundary.

## Outcome Add a public organization hub to coilysiren.me, link it from the primary navigation even though that row is already crowded, and give each of Kai's three GitHub organizations its own page. ## Routes * `/orgs/` * `/orgs/coilyco-flight-deck/` * `/orgs/coilyco-bridge/` * `/orgs/coilyco-gaming/` Add `./orgs` to the first top-navigation group. Keep it visible at every breakpoint. The existing wrap behavior is acceptable on narrow screens. ## Experience definition ### Organization hub Use the existing post shell and the stronger visual language established by `/apps`. Opening frame: * Eyebrow: `THREE BAYS / ONE WORKSHOP` * Title: `The Coily Co orgs` * Supporting copy: `Public tools, the operator back office, and the games where the machinery gets playtested.` Show three large organization cards. Each card uses the existing SVG asset under `src/images/icons/`, a one-line purpose, a few representative repositories or capabilities, a clear internal `explore` action, and a secondary external GitHub action. * **coilyco-flight-deck** - Public OSS. LLM observability, agent devex, and tooling for AI consumers. * **coilyco-bridge** - Operational back office. Make the canonical Forgejo destination prominent and expose only public-safe, already-public information. * **coilyco-gaming** - Games and game tooling. Lead with Eco, Galaxy Gen, and Steam tooling. The three cards become one column on phones and three columns when space permits. The icon, name, purpose, and action must remain legible without relying on color. ### Organization detail pages Each page contains: * A distinct hero using that organization's existing icon. * A concise purpose statement. * A primary link to the GitHub organization. * For Bridge, an equally prominent link to its canonical Forgejo organization. * A curated set of current public repositories or capabilities. Active work appears before archived work. Archived repositories carry an explicit `archived` label. * A final `view all repositories` link to GitHub. * A small cross-navigation block back to `/orgs/` and across to the other two organizations. Do not surface private Bridge repository names, counts, or metadata. Do not fetch organization data in the browser. Keep a public static catalog in the repo so the pages render deterministically, then direct visitors to GitHub for the exhaustive live inventory. ## Visual direction Keep the site recognizably coilysiren.me. The pages should feel like three rooms off the same hallway, not three unrelated microsites. * Flight Deck can lean cool and instrument-like. * Bridge can lean warmer and more connective. * Gaming can carry the most playful color and motion. * Preserve the existing violet shell, typography, border treatment, focus ring behavior, and mobile-first width rules. * Motion must be nonessential and respect `prefers-reduced-motion`. The existing `src/data/site-config.ts` describes a different three-site concept that includes `coilysiren` and omits `gaming`. Do not silently repurpose that contract for these four routes. ## Metadata and accessibility * Give every route a unique title, description, canonical URL, and Open Graph image. * Use heading levels in order. * Give organization logos useful alt text only when the adjacent text does not already name the organization. * Make card targets and the crowded navigation fully usable from the keyboard. * Keep visible focus treatment and sufficient contrast in all three organization accents. ## Repository work * Add a shared public organization data module. * Add reusable presentational components for the hub and detail pages. * Add focused Sass for the organization experience. * Add `./orgs` to `src/components/links.tsx`. * Update `docs/FEATURES.md` because this adds a new public page family. * Extend Cypress smoke coverage to visit all four routes and follow the top-nav link. ## Verification * `ward exec test` * `ward exec build` * Run the relevant Cypress smoke path through the Ward command surface. * Confirm the top navigation wraps cleanly at phone width and all three cards remain readable without horizontal scrolling. * Land direct to canonical `main`, then verify the Forgejo test and staging-image workflows according to `AGENTS.md`. ## Role handoff The Designer seat completed this experience definition on 2026-07-30. Gatsby route creation, navigation changes, public content implementation, and test updates belong to the Engineer seat under the active role boundary.

coilyco-ops referenced this issue from coilyco-flight-deck/agent-compose

2026-07-30 17:28:33 +00:00

Let Designer land complete graphical web experiences #160

coilysiren commented

2026-07-30 18:26:11 +00:00

Owner

The contents of these pages should include the literal same content as the .github repos - just formatted in a native way. Which means pulling from aosk

The contents of these pages should include the literal same content as the `.github` repos - just formatted in a native way. Which means pulling from aosk

coilyco-ops referenced this issue from a commit

2026-07-30 18:59:14 +00:00

feat: add organization profile pages

coilyco-ops closed this issue

2026-07-30 18:59:14 +00:00