From 9cba84ca9941b4fe6945e22a150252fcff17dde4 Mon Sep 17 00:00:00 2001
From: Sam Poder <39828164+sampoder@users.noreply.github.com>
Date: Fri, 14 Jan 2022 11:49:44 +1100
Subject: [PATCH] Switch to Letterhead (#293)

* Switch to Letterhead

* stupid errors

* Import things

nice garry
---
 components/letterhead.js                      | 117 ++++++++++++++++++
 pages/content/transparency/may-2020.js        |  98 ---------------
 .../content/transparency}/may-2020.mdx        |  16 +++
 3 files changed, 133 insertions(+), 98 deletions(-)
 create mode 100644 components/letterhead.js
 delete mode 100644 pages/content/transparency/may-2020.js
 rename {components => pages/content/transparency}/may-2020.mdx (94%)

diff --git a/components/letterhead.js b/components/letterhead.js
new file mode 100644
index 00000000..b82ebba0
--- /dev/null
+++ b/components/letterhead.js
@@ -0,0 +1,117 @@
+import { Avatar, Badge, Box, Container, Flex, Heading } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from './nav'
+import Footer from './footer'
+import ForceTheme from './force-theme'
+
+const Authored = ({ name, avatar, url, date, ...props }) => (
+  <Flex
+    mt={3}
+    {...props}
+    sx={{
+      flexWrap: 'wrap',
+      justifyContent: 'center',
+      alignItems: 'center',
+      'a, span, time': {
+        mt: 0,
+        mb: 2,
+        bg: 'white',
+        color: 'muted',
+        border: '1px solid',
+        borderColor: 'background',
+        bg: 'sunken',
+        fontSize: 2,
+        fontWeight: 'body',
+        lineHeight: '36px',
+        '@media print': {
+          bg: 'transparent',
+          border: 0,
+          fontSize: 1
+        }
+      }
+    }}
+  >
+    <Badge
+      variant="pill"
+      as={url ? 'a' : 'span'}
+      href={url}
+      sx={{
+        mr: [2, 3],
+        pl: 1,
+        pr: 3,
+        display: 'inline-flex',
+        alignItems: 'center',
+        textDecoration: 'none'
+      }}
+    >
+      <Avatar src={avatar} alt={name} size={36} mr={2} />
+      {name}
+    </Badge>
+    <Badge
+      variant="pill"
+      as="time"
+      px={3}
+      dateTime={date?.startsWith('20') ? date : undefined}
+    >
+      {date}
+    </Badge>
+  </Flex>
+)
+
+const Letterhead = ({
+  title,
+  desc,
+  author = { name: null, avatar: null, url: null },
+  date,
+  img,
+  path,
+  includeMeta = true,
+  hideGitHub = false,
+  children,
+  ...props
+}) => (
+  <>
+    <Meta as={Head} title={title} description={desc} image={img} />
+    <Nav color="text" />
+    <ForceTheme theme="light" />
+    <Box
+      as="header"
+      sx={{
+        bg: 'sheet',
+        color: 'text',
+        pt: [5, null, null, null, 6],
+        pb: [3, null, 4],
+        textAlign: 'center'
+      }}
+    >
+      <Container variant="copy">
+        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
+          {title}
+        </Heading>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+          {desc}
+        </Heading>
+        {author?.name && <Authored {...author} date={date} />}
+      </Container>
+    </Box>
+    <Container
+      variant="copy"
+      sx={{
+        py: [3, 4],
+        fontSize: [2, 3],
+        h1: {
+          textAlign: ['left', 'center'],
+          color: 'cyan',
+          my: 4,
+          a: { color: 'inherit' }
+        }
+      }}
+    >
+      {children}
+    </Container>
+    <Footer />
+  </>
+)
+
+export default Letterhead
diff --git a/pages/content/transparency/may-2020.js b/pages/content/transparency/may-2020.js
deleted file mode 100644
index 362aa1d3..00000000
--- a/pages/content/transparency/may-2020.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import { Avatar, Badge, Box, Container, Flex, Heading } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../../../components/nav'
-import Footer from '../../../components/footer'
-import ForceTheme from '../../../components/force-theme'
-import May2020 from '../../../components/may-2020.mdx'
-
-const TransparencyReport = () => (
-  <>
-    <Meta
-      as={Head}
-      title="May 2020 Transparency Update"
-      description="An update with the latest open finances from Hack Club HQ."
-      image="https://workshop-cards.hackclub.com/Transparency%20Update.png?theme=light&brand=HQ&fontSize=225px&caption=May%202020"
-    />
-    <Nav color="text" />
-    <ForceTheme theme="light" />
-    <Box
-      as="header"
-      sx={{
-        bg: 'sheet',
-        color: 'text',
-        pt: [5, null, null, null, 6],
-        pb: [3, null, 4],
-        textAlign: 'center'
-      }}
-    >
-      <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
-          May 2020 Transparency Update
-        </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
-          An update with the latest open finances from Hack Club HQ.
-        </Heading>
-        <Flex
-          sx={{
-            flexWrap: 'wrap',
-            justifyContent: 'center',
-            alignItems: 'center',
-            mt: 3,
-            mb: 0,
-            div: {
-              mt: 0,
-              color: 'muted',
-              border: '1px solid',
-              borderColor: 'border',
-              bg: 'sunken',
-              fontSize: 2,
-              fontWeight: 'body',
-              lineHeight: '36px'
-            }
-          }}
-        >
-          <Badge
-            variant="pill"
-            sx={{
-              mr: [2, 3],
-              pl: 1,
-              pr: 3,
-              display: 'inline-flex',
-              alignItems: 'center'
-            }}
-          >
-            <Avatar
-              src="https://hackclub.com/team/zach.jpg"
-              alt="Zach"
-              size={36}
-              mr={2}
-            />
-            @zrl
-          </Badge>
-          <Badge variant="pill" sx={{ px: 3 }}>
-            2020-06-03
-          </Badge>
-        </Flex>
-      </Container>
-    </Box>
-    <Container
-      variant="copy"
-      sx={{
-        py: [3, 4],
-        fontSize: [2, 3],
-        h1: {
-          textAlign: ['left', 'center'],
-          color: 'cyan',
-          my: 4,
-          a: { color: 'inherit' }
-        }
-      }}
-    >
-      <May2020 />
-    </Container>
-    <Footer />
-  </>
-)
-
-export default TransparencyReport
diff --git a/components/may-2020.mdx b/pages/content/transparency/may-2020.mdx
similarity index 94%
rename from components/may-2020.mdx
rename to pages/content/transparency/may-2020.mdx
index 2bfa33f1..6d594c36 100644
--- a/components/may-2020.mdx
+++ b/pages/content/transparency/may-2020.mdx
@@ -1,3 +1,17 @@
+import Letterhead from '../../../components/letterhead'
+
+<Letterhead
+title="May 2020 Transparency Update"
+desc="An update with the latest open finances from Hack Club HQ."
+img="https://workshop-cards.hackclub.com/Transparency%20Update.png?theme=light&brand=HQ&fontSize=225px&caption=May%202020"
+author={{
+  name: '@zrl',
+  avatar: 'https://hackclub.com/team/zach.jpg',
+  url: 'https://app.slack.com/team/U0266FRGP'
+}}
+date="2020-06-03"
+path="transparency-may.mdx">
+
 In 2014, after dropping out of high school at 16 to become a programmer, I started Hack Club. I had so many questions. How would finances work? How did other organizations get donations? How did they budget and spend their money? How much does it cost to run a program that reaches 1,000 people? What is an appropriate monthly salary for an employee? How much do lawyers and CPAs cost?
 
 For me, learning to program was largely possible because of open source: the code of so much software written by both professionals and hobbyists is available publicly on GitHub. When you see under the hood at how software is made, you learn yourself. But nonprofits don't work that way. They are enigmas to outsiders. While top-level information is available to the public via [IRS Form 990](https://en.wikipedia.org/wiki/Form_990) ([example](https://990s.foundationcenter.org/990_pdf_archive/946/946069890/946069890_201712_990.pdf)), the actual budgets and details of spending are closely guarded secrets—often not even donors, staff members, or board members are privy to how nonprofits spend their money.
@@ -141,3 +155,5 @@ If you’re interested in seeing the Google Sheet I used to calculate the above
 Please note that while the above encompasses all of HQ's spending in our Hack Club Bank account, it does not include GitHub grants to clubs, postage bought by Mail Team, or grants made from our internal "Discretionary Fund" to students in need that is funded by Ron Conway.
 
 _Thanks to Christina, Melody, and Lachlan for their help writing this post._
+
+</Letterhead>