feat: rework system selection and put each system on individual pages

src/components/AnnouncementPanel.tsx

@@ -10,8 +10,16 @@ import { deletePersonalPreset, getPersonalPresets, initPersonalPresetsDb, savePe
 
 import * as Sentry from '@sentry/gatsby'
 
-function AnnouncementPanel() {
-  const AnnouncementSystem = getActiveSystem()
+import type TrainAnnouncementSystem from '@announcement-data/TrainAnnouncementSystem'
+import type StationAnnouncementSystem from '@announcement-data/StationAnnouncementSystem'
+import type AnnouncementSystem from '@announcement-data/AnnouncementSystem'
+
+interface IProps {
+  system: new () => TrainAnnouncementSystem | StationAnnouncementSystem | AnnouncementSystem
+}
+
+function AnnouncementPanel({ system }: IProps) {
+  const AnnouncementSystem = system
 
   const [isPresetsDbReady, setIsPresetsDbReady] = useState<boolean>(false)
 
@@ -105,37 +113,38 @@ function AnnouncementPanel() {
   if (!AnnouncementSystem) return null
 
   return (
-    <div
-      css={{
-        padding: 16,
-        backgroundColor: '#eee',
-        marginTop: 24,
-      }}
-    >
+    <div>
       <h2
         css={{
-          marginBottom: 16,
+          marginTop: 32,
+          marginBottom: 32,
         }}
       >
         {AnnouncementSystemInstance?.NAME}
       </h2>
 
       <div
         css={{
-          marginBottom: 16,
+          marginTop: 24,
         }}
       >
-        {AnnouncementSystemInstance?.headerComponent()}
+        <div
+          css={{
+            marginBottom: 16,
+          }}
+        >
+          {AnnouncementSystemInstance?.headerComponent()}
+        </div>
+
+        <Tabs
+          key={AnnouncementSystemInstance?.ID}
+          selectedTabIndex={getSelectedTab()}
+          onTabChange={setSelectedTab}
+          tabNames={Object.values(customTabs).map(tab => tab.name)}
+          tabItems={TabPanels ?? []}
+          customKeyPrefix={AnnouncementSystemInstance?.ID}
+        />
       </div>
-
-      <Tabs
-        key={AnnouncementSystemInstance?.ID}
-        selectedTabIndex={getSelectedTab()}
-        onTabChange={setSelectedTab}
-        tabNames={Object.values(customTabs).map(tab => tab.name)}
-        tabItems={TabPanels ?? []}
-        customKeyPrefix={AnnouncementSystemInstance?.ID}
-      />
     </div>
   )
 }

src/components/CardLink.tsx

@@ -0,0 +1,103 @@
+import React from 'react'
+
+import { Link } from 'gatsby'
+
+interface ICardLinkProps {
+  title: React.ReactNode
+  description?: React.ReactNode
+  to: string
+  className?: string
+}
+
+const CARD_PADDING = 16 as const
+
+function CardLink({ title, description, to, className }: ICardLinkProps) {
+  return (
+    <Link
+      className={className}
+      to={to}
+      css={{
+        textDecoration: 'none !important',
+        display: 'flex',
+        border: '2px solid black',
+        outline: '0px solid black',
+        background: 'white',
+
+        '&:hover, &:focus, &:active': {
+          outlineWidth: 2,
+          '& $arrow': {
+            '&::after': {
+              transform: 'translateX(3px) scaleY(0.92) scaleX(1.05) rotate(45deg)',
+            },
+          },
+        },
+      }}
+    >
+      <article
+        css={{
+          display: 'flex',
+          flexDirection: 'column',
+          padding: CARD_PADDING,
+          position: 'relative',
+          flexGrow: 1,
+        }}
+      >
+        <header
+          css={{
+            display: 'flex',
+            gap: 8,
+          }}
+        >
+          <h3
+            css={[
+              {
+                flexGrow: 1,
+              },
+              !description && {
+                marginBottom: 0,
+              },
+            ]}
+          >
+            {title}
+          </h3>
+        </header>
+
+        {description && (
+          <>
+            <div
+              aria-hidden
+              css={{
+                flexGrow: 1,
+              }}
+            />
+            <p>{description}</p>
+          </>
+        )}
+      </article>
+
+      <div
+        role="presentation"
+        aria-hidden="true"
+        css={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          padding: '10px 18px',
+          paddingRight: 20,
+          gap: 8,
+          transformOrigin: 'center',
+          '&::after': {
+            content: '""',
+            display: 'inline-block',
+            width: '0.75em',
+            height: '0.75em',
+            borderTop: '2px solid currentColor',
+            borderRight: '2px solid currentColor',
+            transform: 'rotate(45deg)',
+          },
+        }}
+      />
+    </Link>
+  )
+}
+
+export default CardLink

src/components/NavBar.tsx

@@ -17,7 +17,7 @@ export default function NavBar() {
         },
       }}
     >
-      <Link to="/">Generator</Link>
+      <Link to="/">Home</Link>
       <Link to="/amey-live-train-announcements">Live announcements</Link>
       <Link to="/about">About</Link>
       <Link to="/changelog">Latest changes</Link>

src/components/PanelPanes/CustomAnnouncementPane.tsx

@@ -255,7 +255,7 @@ function CustomAnnouncementPane({
     return (
       <div
         css={{
-          padding: 16,
+          padding: 24,
           backgroundColor: '#eee',
         }}
       >
@@ -279,7 +279,7 @@ function CustomAnnouncementPane({
   return (
     <div
       css={{
-        padding: 16,
+        padding: 24,
         backgroundColor: '#eee',
       }}
     >

src/components/PanelPanes/CustomButtonPane.tsx

@@ -62,7 +62,7 @@ function CustomButtonPane({ buttons, buttonSections }: ICustomButtonPaneProps) {
   return (
     <div
       css={{
-        padding: 16,
+        padding: 24,
         backgroundColor: '#eee',
       }}
     >

src/components/SystemPageTemplate.tsx

@@ -0,0 +1,63 @@
+import Layout from '@components/Layout'
+import AnnouncementPanel from '@components/AnnouncementPanel'
+import NavBar from '@components/NavBar'
+import Disclaimers from '@components/Disclaimers'
+
+import RailSymbol from '@assets/rail-symbol-2/white-on-red-inset.svg'
+
+import { Link, PageProps } from 'gatsby'
+
+import BackIcon from 'mdi-react/ArrowLeftIcon'
+
+import type AnnouncementSystem from '@announcement-data/AnnouncementSystem'
+import type StationAnnouncementSystem from '@announcement-data/StationAnnouncementSystem'
+import type TrainAnnouncementSystem from '@announcement-data/TrainAnnouncementSystem'
+
+interface IProps {
+  location: PageProps['location']
+  system: new () => TrainAnnouncementSystem | StationAnnouncementSystem | AnnouncementSystem
+}
+
+export default function SystemPageTemplate({ location, system }: IProps) {
+  return (
+    <Layout location={location}>
+      <header>
+        <h1
+          css={{
+            fontSize: '2rem',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <img
+            alt=""
+            role="presentation"
+            css={{
+              height: 64,
+              width: 64,
+              marginRight: 16,
+              marginTop: -3,
+            }}
+            src={RailSymbol}
+          />
+          <span>Rail announcements</span>
+        </h1>
+      </header>
+
+      <NavBar />
+
+      <main css={{ margin: '0 24px' }}>
+        <Link css={{ marginTop: 24, display: 'inline-block' }} className="button" to="/">
+          <span className="buttonLabel">
+            <BackIcon /> Back to system selection
+          </span>
+        </Link>
+
+        <AnnouncementPanel system={system} />
+      </main>
+
+      <Disclaimers />
+    </Layout>
+  )
+}

src/pages/index.tsx

@@ -1,6 +1,4 @@
-import MainSelector from '@components/MainSelector'
 import Layout from '@components/Layout'
-import AnnouncementPanel from '@components/AnnouncementPanel'
 import NavBar from '@components/NavBar'
 import Disclaimers from '@components/Disclaimers'
 
@@ -9,6 +7,31 @@ import MegaphoneIcon from 'mdi-react/MegaphoneOutlineIcon'
 
 import { Link, PageProps } from 'gatsby'
 import Breakpoints from '@data/breakpoints'
+import { Fragment } from 'react'
+import CardLink from '@components/CardLink'
+
+const Systems = [
+  {
+    groupTitle: 'Rolling stock',
+    systems: [
+      { title: 'Bombardier Xstar', url: '/rolling-stock/bombardier-xstar' },
+      { title: 'Class 700/707/717', url: '/rolling-stock/class-700-707-717' },
+      { title: 'LNER Azuma', url: '/rolling-stock/lner-azuma' },
+      { title: 'Transport for Wales TrainFX', url: '/rolling-stock/tfw-trainfx' },
+      { title: 'TfL Jubilee Line', url: '/rolling-stock/tfl/jubilee-line' },
+      { title: 'TfL Northern Line', url: '/rolling-stock/tfl/northern-line' },
+      { title: 'TfL Elizabeth Line', url: '/rolling-stock/tfl/elizabeth-line' },
+    ],
+  },
+  {
+    groupTitle: 'Stations',
+    systems: [
+      { title: 'Amey — Phil Sayer', url: '/stations/amey-phil-sayer' },
+      { title: 'Amey — Celia Drummond', url: '/stations/amey-celia-drummond' },
+      { title: 'ScotRail', url: '/stations/scotrail' },
+    ],
+  },
+]
 
 function IndexPage({ location }: PageProps) {
   return (
@@ -40,8 +63,6 @@ function IndexPage({ location }: PageProps) {
       <NavBar />
 
       <main>
-        <MainSelector />
-
         <aside
           css={{
             display: 'flex',
@@ -52,7 +73,7 @@ function IndexPage({ location }: PageProps) {
             padding: 24,
             background: 'hsl(204 50% 85% / 1)',
             gap: 16,
-            marginTop: 16,
+            marginTop: 32,
             [Breakpoints.upTo.tablet]: {
               flexDirection: 'column',
               justifyContent: 'center',
@@ -68,7 +89,23 @@ function IndexPage({ location }: PageProps) {
           </Link>
         </aside>
 
-        <AnnouncementPanel />
+        <div css={{ maxWidth: 800, margin: '64px auto' }}>
+          <h2 css={{ margin: '32px 12px', fontSize: '1.25em' }}>Select a system</h2>
+
+          {Systems.map(group => (
+            <Fragment key={group.groupTitle}>
+              <h3 css={{ margin: '24px 12px' }}>{group.groupTitle}</h3>
+
+              <ul css={{ padding: 0, margin: 0, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 16 }}>
+                {group.systems.map(system => (
+                  <li key={system.url}>
+                    <CardLink to={system.url} title={system.title} />
+                  </li>
+                ))}
+              </ul>
+            </Fragment>
+          ))}
+        </div>
       </main>
 
       <Disclaimers

src/pages/rolling-stock/bombardier-xstar.tsx

@@ -0,0 +1,9 @@
+import BombardierXstar from '@announcement-data/systems/rolling-stock/BombardierXstar'
+
+import SystemPageTemplate from '@components/SystemPageTemplate'
+
+import type { PageProps } from 'gatsby'
+
+export default function BombardierXstarPage({ location }: PageProps) {
+  return <SystemPageTemplate system={BombardierXstar} location={location} />
+}

src/pages/rolling-stock/class-700-707-717.tsx

@@ -0,0 +1,9 @@
+import ThameslinkClass700 from '@announcement-data/systems/rolling-stock/TLClass700'
+
+import SystemPageTemplate from '@components/SystemPageTemplate'
+
+import type { PageProps } from 'gatsby'
+
+export default function Class700Page({ location }: PageProps) {
+  return <SystemPageTemplate system={ThameslinkClass700} location={location} />
+}

src/pages/rolling-stock/lner-azuma.tsx

@@ -0,0 +1,9 @@
+import LnerAzuma from '@announcement-data/systems/rolling-stock/LNERAzuma'
+
+import SystemPageTemplate from '@components/SystemPageTemplate'
+
+import type { PageProps } from 'gatsby'
+
+export default function LnerAzumaPage({ location }: PageProps) {
+  return <SystemPageTemplate system={LnerAzuma} location={location} />
+}