Add BottomNav and other improvements

src/components/Board.tsx

@@ -0,0 +1,46 @@
+import { onMount } from "solid-js";
+import { shuffleList } from "../utils/shuffleList";
+
+export const Board = (props: { board: any[] }) => {
+  onMount(() => {
+    shuffleList(".board-list");
+  });
+
+  return (
+    <>
+      <div class="text-center">
+        <div class="container pb-3 px-2">
+          <div
+            class="board-list justify-content-center"
+            style="display:flex; gap: 20px; flex-wrap: wrap;"
+          >
+            {props.board.map((member) => (
+              <div class="text-center person">
+                <a href={`/about/${member.link}`}>
+                  <img
+                    src={member.avatar}
+                    width="150"
+                    class="rounded-circle mt-3 border border-white"
+                  />
+                  <h3 class="m-3">{member.name}</h3>
+                </a>
+              </div>
+            ))}
+          </div>
+        </div>
+        <p class="text-center">
+          In charge to steering the Organization is the&nbsp;
+          <a href="https://maplibre.org/about/governing-board">
+            MapLibre Governing Board
+          </a>
+          . <br />
+          They are elected by&nbsp;
+          <a href="https://github.com/maplibre/maplibre/blob/main/VOTING_MEMBERS.md">
+            Voting Members
+          </a>
+          , a group who represents the broader community.
+        </p>
+      </div>
+    </>
+  );
+};

src/components/BottomNav.astro

@@ -0,0 +1,110 @@
+---
+const navSections = [
+  {
+    heading: "The Project",
+    links: [
+      { label: "Governing Board", href: "/about/governing-board" },
+      { label: "Team", href: "/about/team" },
+      { label: "Financial Reports", href: "/about/reports" },
+      { label: "Brand Assets", href: "/brand-assets" },
+      { label: "Roadmap", href: "/roadmap" },
+    ],
+  },
+  {
+    heading: "Get in Touch",
+    links: [
+      { label: "Community", href: "/community" },
+      { label: "Slack", href: "https://slack.openstreetmap.us" },
+      { label: "GitHub", href: "https://github.com/maplibre" },
+    ],
+  },
+  {
+    heading: "Links",
+    links: [
+      { label: "Made with MapLibre", href: "https://madewithmaplibre.com/" },
+      {
+        label: "Awesome MapLibre",
+        href: "https://github.com/maplibre/awesome-maplibre",
+      },
+      {
+        label: "All repositories",
+        href: "https://github.com/maplibre#org-profile-repositories",
+      },
+    ],
+  },
+];
+
+const isExternal = (href: string) => !href.startsWith("/");
+---
+
+<nav class="bottom-nav">
+  <hr />
+  <div class="container py-5">
+    <div class="row">
+      {
+        navSections.map((section) => (
+          <div class="col-12 col-sm-6 col-lg-4 mb-4 mb-lg-0">
+            <h5 class="bottom-nav-heading">{section.heading}</h5>
+            <ul class="bottom-nav-list">
+              {section.links.map((link) => (
+                <li>
+                  <a
+                    href={link.href}
+                    {...(isExternal(link.href)
+                      ? { target: "_blank", rel: "noopener" }
+                      : {})}
+                  >
+                    {link.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))
+      }
+    </div>
+  </div>
+</nav>
+
+<style lang="scss">
+  .bottom-nav-heading {
+    color: #fff;
+    font-size: 1rem;
+    font-weight: 600;
+    margin-bottom: 1rem;
+  }
+
+  .bottom-nav-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    li {
+      border-bottom: 1px solid rgb(57, 64, 99);
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+
+    a {
+      display: block;
+      padding: 0.5rem 0;
+      color: rgb(203, 213, 225);
+      text-decoration: none;
+      transition: color 0.2s ease;
+
+      &:hover {
+        color: #87b2f0;
+      }
+    }
+
+    li:first-child a {
+      padding-top: 0;
+    }
+
+    li:last-child a {
+      padding-bottom: 0;
+    }
+  }
+</style>

src/components/Footer.astro

@@ -1,10 +1,11 @@
 ---
 import { Image } from "astro:assets";
 import { Icon } from "astro-icon/components";
+import BottomNav from "./BottomNav.astro";
 ---
 
-<footer class="mt-auto">
-  <div class="container pb-4 pt-6"></div>
+<footer class="mt-auto pt-5">
+  <BottomNav />
   <hr />
   <div class="container">
     <div class="row py-3">

src/components/GitHubBadge.astro

@@ -0,0 +1,24 @@
+---
+interface Props {
+  href: string;
+}
+
+const { href } = Astro.props;
+---
+
+<a href={href}>
+  <span class="badge bg-primary text-white">
+    <svg
+      role="img"
+      class="inline-icon"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>GitHub</title>
+      <path
+        d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+      ></path>
+    </svg>
+    GitHub
+  </span>
+</a>

src/components/LinkBadge.astro

@@ -0,0 +1,11 @@
+---
+interface Props {
+  href: string;
+}
+
+const { href } = Astro.props;
+---
+
+<span class="badge bg-primary text-white">
+  <a href={href}><slot /></a>
+</span>

src/components/ProjectSection.astro

@@ -0,0 +1,39 @@
+---
+interface Props {
+  title: string;
+  visualStyle?: string;
+  visualFlex?: boolean;
+}
+
+const { title, visualStyle = "", visualFlex = true } = Astro.props;
+
+const visualBaseStyle = visualFlex
+  ? "display: flex; justify-content: center; align-items: center;"
+  : "";
+const fullVisualStyle = [visualBaseStyle, visualStyle]
+  .filter(Boolean)
+  .join(" ");
+---
+
+<hr />
+<div class="container">
+  <div class="row">
+    <div
+      class="col-md-12 col-lg-6"
+      style="display: flex; flex-direction: column; justify-content: center;"
+    >
+      <div>
+        <h1 style="color: white;" set:html={title} />
+
+        <slot name="description" />
+        <br /><br />
+
+        <slot name="badges" />
+        <br /><br />
+      </div>
+    </div>
+    <div class="col-md-12 col-lg-6" style={fullVisualStyle || undefined}>
+      <slot name="visual" />
+    </div>
+  </div>
+</div>

src/components/Team.tsx

@@ -0,0 +1,35 @@
+import { onMount } from "solid-js";
+import { shuffleList } from "../utils/shuffleList";
+
+export const Team = (props: { team: any[] }) => {
+  onMount(() => {
+    shuffleList(".team-list");
+  });
+
+  return (
+    <>
+      <div class="text-center">
+        <div class="container pb-5 pt-2">
+          <div
+            class="team-list justify-content-center"
+            style="display:flex; gap: 20px; flex-wrap: wrap;"
+          >
+            {props.team.map((member) => (
+              <div class="text-center person">
+                <a href={`/about/${member.link}`}>
+                  <img
+                    src={member.avatar}
+                    width="150"
+                    class="rounded-circle mt-3 border border-white"
+                  />
+                  <h3 class="m-3">{member.name}</h3>
+                  {member.position}
+                </a>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

src/layouts/Layout.astro

@@ -97,10 +97,15 @@ import { ClientRouter, fade } from "astro:transitions";
 </html>
 
 <style>
-  html,
+  html {
+    height: 100%;
+  }
+
   body {
     margin: 0;
     width: 100%;
-    height: 100%;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
   }
 </style>

src/pages/about/governing-board.astro

@@ -0,0 +1,17 @@
+---
+import TitleHeader from "../../components/TitleHeader.astro";
+import board from "../../content/board.json" with { type: "json" };
+import Layout from "../../layouts/Layout.astro";
+import { Board } from "../../components/Board";
+---
+
+<Layout title="Governing Board">
+  <TitleHeader>Governing Board</TitleHeader>
+  <div class="container">
+    <div class="row justify-content-center">
+      <div class="col-sm-10">
+        <Board board={board} client:only />
+      </div>
+    </div>
+  </div>
+</Layout>