mirror of
https://github.com/System-End/site.git
synced 2026-04-19 15:18:18 +00:00
Switch to Letterhead (#293)
* Switch to Letterhead * stupid errors * Import things nice garry
This commit is contained in:
Sam Poder
GitHub
parent
5d96651b93
commit
9cba84ca99
3 changed files with 133 additions and 98 deletions
117
components/letterhead.js
Normal file
117
components/letterhead.js
Normal file
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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>
|
||||
Loading…
Add table
Reference in a new issue