Add supporters page to blog

blakeembrey · blakeembrey · commit 8c286ee93ad1 · 2021-01-24T11:11:08.000-08:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,7 +36,7 @@
     "gray-matter": "4.0.2",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
-    "react-free-style": "^11.0.1",
+    "react-free-style": "^11.1.0",
     "remark": "^12.0.0",
     "remark-highlight.js": "^6.0.0",
     "remark-html": "^11.0.2",
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
@@ -1,5 +1,6 @@
 import React, { ReactNode } from "react";
 import { styled } from "react-free-style";
+import Link from "next/link";
 
 const Main = styled("div");
 
@@ -124,8 +125,11 @@ const BorderTop = styled("div", {
 });
 
 const Header = styled("ul", {
+  display: "flex",
+  justifyContent: "space-between",
+  flexWrap: "wrap",
   margin: 0,
-  padding: "2em 0",
+  padding: "1.5em 0",
   fontSize: "1.2em",
 });
 
@@ -134,6 +138,11 @@ const HeaderLink = styled("a", {
   textDecoration: "none",
   borderBottom: "2px solid transparent",
   "&:hover": { borderBottomColor: "var(--brand-color)" },
+  "&.active": { borderBottomColor: "var(--brand-color)" },
+});
+
+const PrimaryHeaderLink = styled(HeaderLink, {
+  fontWeight: "bold",
 });
 
 const Content = styled("div", {
@@ -255,13 +264,27 @@ const Content = styled("div", {
   // "pre .diff-chunk": { color: "#aaa" },
 });
 
-export const Layout = ({ children }: { children: ReactNode }) => {
+export type Props = {
+  page?: "index" | "supporters";
+  children: ReactNode;
+};
+
+export const Layout = ({ page, children }: Props) => {
   return (
     <Main>
       <BorderTop />
       <Container>
         <Header>
-          <HeaderLink href="/">Writing</HeaderLink>
+          <Link href="/" passHref>
+            <PrimaryHeaderLink className={page === "index" ? "active" : ""}>
+              Writing
+            </PrimaryHeaderLink>
+          </Link>
+          <Link href="/supporters/" passHref>
+            <HeaderLink className={page === "supporters" ? "active" : ""}>
+              Supporters
+            </HeaderLink>
+          </Link>
         </Header>
 
         <Content>{children}</Content>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -28,7 +28,7 @@ const Index: React.FC<Props> = ({ posts }) => {
       <Head>
         <title>Blake Embrey</title>
       </Head>
-      <Layout>
+      <Layout page="index">
         {posts.map((x) => {
           return (
             <Article key={x.title}>
diff --git a/src/pages/supporters.tsx b/src/pages/supporters.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+import Head from "next/head";
+import { Layout } from "../components/layout";
+
+export type Props = {
+  supporters: Array<{ name: string; url: string }>;
+};
+
+const Supporters: React.FC<Props> = ({ supporters }) => {
+  return (
+    <>
+      <Head>
+        <title>Supporters • Blake Embrey</title>
+      </Head>
+      <Layout page="supporters">
+        <ul>
+          {supporters.map((x) => {
+            return (
+              <li key={x.name}>
+                <a href={x.url}>{x.name}</a>
+              </li>
+            );
+          })}
+        </ul>
+      </Layout>
+    </>
+  );
+};
+
+export default Supporters;
+
+export const getStaticProps = async (): Promise<{ props: Props }> => {
+  return {
+    props: {
+      supporters: [
+        { name: "Ideal Postcodes", url: "https://ideal-postcodes.co.uk/" },
+        { name: "RaiderIO", url: "https://raider.io/" },
+      ],
+    },
+  };
+};
