Beef up the web app

projects/web/src/App.css

@@ -3,10 +3,42 @@ body {
   padding: 20px 0;
 }
 
+a {
+  color: #333;
+  &:hover {
+    color: #555;
+  }
+}
+
 .description {
   padding: 20px 20px 0;
 }
 
+.country-list {
+  padding: 20px 20px;
+  list-style: none;
+}
+
+.back-link {
+  margin-inline-start: 20px;
+}
+
+.gh-link-container {
+  align-self: center;
+  flex-grow: 1;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.gh-link {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  img {
+    height: 1.4rem;
+  }
+}
+
 header {
   padding: 20px;
   display: flex;

projects/web/src/App.tsx

@@ -7,6 +7,7 @@ import { GovskyConfig } from "@govsky/config";
 import { ApiUser } from "@govsky/api/types";
 import { AllowedDomains, DomainHandles } from "./types";
 import { generateTree } from "./utils/generateTree";
+import { Header } from "./components/Header";
 
 const { config } = gsc;
 
@@ -72,10 +73,7 @@ function App() {
 
   return (
     <main>
-      <header>
-        <h1>GovSky</h1>
-        {countryName && <span>{countryName}</span>}
-      </header>
+      <Header countryName={countryName} />
       <p className="description">
         Discover official government accounts on Bluesky.
         <br />

projects/web/src/Index.tsx

@@ -0,0 +1,32 @@
+import { Link } from "react-router-dom";
+import "./App.css";
+import { Header } from "./components/Header";
+import * as gsc from "@govsky/config";
+
+const { config } = gsc;
+
+const sortedConfig = Object.entries(config)
+  .map(([code, { name }]) => ({ code, name }))
+  .sort((a, b) => (a.name > b.name ? 1 : -1));
+
+export const Index = () => {
+  return (
+    <main>
+      <Header />
+      <p className="description">
+        Welcome! Govsky is an effort to catalog government presence on Bluesky
+        by tracking when officially government domains sign up for the service.
+      </p>
+      <p className="description">
+        Find your country below to see which government entities are on Bluesky.
+      </p>
+      <ul className="country-list">
+        {sortedConfig.map(({ code, name }) => (
+          <li key={code}>
+            <Link to={`/${code}`}>{name}</Link>
+          </li>
+        ))}
+      </ul>
+    </main>
+  );
+};

projects/web/src/components/Header.tsx

@@ -0,0 +1,27 @@
+import { Link } from "react-router-dom";
+import gh from "./github-mark.png";
+
+type Props = {
+  countryName?: string;
+};
+
+export const Header = ({ countryName }: Props) => {
+  return (
+    <>
+      {countryName && (
+        <Link className="back-link" to="/">
+          &laquo; Back to country list
+        </Link>
+      )}
+      <header>
+        <h1>Govsky</h1>
+        {countryName && <span>{countryName}</span>}
+        <div className="gh-link-container">
+          <a className="gh-link" href="https://github.com/nas5w/govsky">
+            <img src={gh} alt="GitHub logo"></img> Github
+          </a>
+        </div>
+      </header>
+    </>
+  );
+};

projects/web/src/main.tsx

@@ -3,13 +3,14 @@ import { createRoot } from "react-dom/client";
 import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
 import App from "./App.tsx";
 import "./reset.css";
+import { Index } from "./Index.tsx";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <Router>
       <Routes>
+        <Route path="/" element={<Index />} />
         <Route path="/:country" element={<App />} />
-        <Route path="/" element={<App />} />
       </Routes>
     </Router>
   </StrictMode>