New homepage for 2020 clubs (#47)

* Begin clubs page

* New homepage for 2020 clubs

* Small edits

components/footer.js

@@ -131,21 +131,7 @@ const Footer = ({ dark = false, children, ...props }) => (
               href="https://www.facebook.com/Hack-Club-741805665870458"
               icon="facebook"
             />
-            <Link
-              target="_blank"
-              rel="noopener"
-              href="https://twitch.tv/HackClubHQ"
-              color="muted"
-              title="Hack Club on Twitch"
-            >
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-                <path
-                  fillRule="evenodd"
-                  d="M27.986 15.968c0 11-1 12-12 12s-12-1-12-12 1-12 12-12 12 1 12 12zM9.313 11.432L10.225 9h12.462v8.512l-3.648 3.647h-2.735l-1.823 1.825h-1.825v-1.825H9.313v-9.727zm12.158-1.217h-10.03v8.817h2.736v1.822L16 19.032h3.343l2.128-2.129v-6.688zM16 16.296h-1.216V12.65H16v3.647zm3.343 0h-1.216V12.65h1.216v3.647z"
-                  clipRule="evenodd"
-                ></path>
-              </svg>
-            </Link>
+            <Service href="https://twitch.tv/HackClubHQ" icon="twitch" />
             <Service
               href="https://www.youtube.com/c/HackClubHQ"
               icon="youtube"

components/photo.js

@@ -0,0 +1,50 @@
+import styled from '@emotion/styled'
+import { Box, Card, Text, Image, useColorMode } from 'theme-ui'
+import theme from '../lib/theme'
+
+const Caption = styled(Text)`
+  display: block;
+  font-size: ${theme.fontSizes[1]}px;
+  line-height: ${theme.lineHeights.body};
+  padding: ${theme.space[2]}px ${theme.space[3]}px;
+  position: absolute;
+  bottom: 0;
+  border-radius: 0 0 ${theme.radii.extra}px ${theme.radii.extra}px;
+  width: 100%;
+  max-width: 100%;
+  z-index: 0;
+`
+
+const Photo = ({ src, alt, showAlt, dark, ...props }) => {
+  const [colorMode] = useColorMode()
+  const showCaption = showAlt && alt
+  return (
+    <Card
+      {...props}
+      sx={{
+        p: [0, 0, 0],
+        boxShadow: 'elevated',
+        borderRadius: 'extra',
+        position: 'relative',
+        maxWidth: '100%',
+        lineHeight: 0,
+        ...props.sx
+      }}
+    >
+      <Image
+        src={src}
+        alt={alt}
+        loading="lazy"
+        sx={{ width: '100%', height: '100%', objectFit: 'cover' }}
+      />
+      {showCaption && (
+        <Caption
+          variant={dark ? 'cards.translucentDark' : 'cards.translucent'}
+          children={alt}
+        />
+      )}
+    </Card>
+  )
+}
+
+export default Photo

lib/theme.js

@@ -11,4 +11,6 @@ theme.buttons.primary = merge(theme.buttons.primary, {
 
 theme.layout.copy.maxWidth = [null, null, 'copyPlus']
 
+theme.text.title.fontSize = [5, 6]
+
 export default theme

package.json

@@ -10,7 +10,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "@hackclub/icons": "^0.0.3",
+    "@hackclub/icons": "^0.0.4",
     "@hackclub/meta": "1.0.0",
     "@hackclub/theme": "^0.3.0",
     "@mdx-js/loader": "^1.6.16",

pages/amas.js

@@ -22,7 +22,7 @@ import Icon from '../components/icon'
 import Footer from '../components/footer'
 import { dt } from '../lib/dates'
 
-export default ({ upcoming, past }) => (
+const Page = ({ upcoming, past }) => (
   <>
     <Meta
       as={Head}
@@ -84,44 +84,48 @@ export default ({ upcoming, past }) => (
       as="section"
       sx={{ py: 5, bg: 'dark', color: 'white', textAlign: 'center' }}
     >
-      <Heading as="h2" variant="title" px={3}>
-        Upcoming guests
-      </Heading>
-      <Flex
-        variant="layout.container"
-        sx={{
-          py: 4,
-          flexWrap: 'wrap',
-          placeContent: 'center'
-        }}
-      >
-        {upcoming.map(event => (
-          <Card
-            as="a"
-            href={`https://events.hackclub.com/${event.slug}`}
-            variant="interactive"
-            m={[2, 3]}
-            key={event.id}
+      {upcoming.length > 0 && (
+        <>
+          <Heading as="h2" variant="title" px={3}>
+            Upcoming guests
+          </Heading>
+          <Flex
+            variant="layout.container"
+            sx={{
+              py: 4,
+              flexWrap: 'wrap',
+              placeContent: 'center'
+            }}
           >
-            <Avatar
-              width={96}
-              height={96}
-              sx={{ width: [96, 128] }}
-              src={event.amaAvatar}
-              alt={event.title}
-            />
-            <Heading as="h3" variant="subheadline" my={2}>
-              {event.title.replace('AMA with ', '')}
-            </Heading>
-            <Text as="p" variant="caption" mb={3}>
-              {dt(event.start)}
-            </Text>
-            <Button as="strong" variant="outline" sx={{ py: 0 }}>
-              RSVP
-            </Button>
-          </Card>
-        ))}
-      </Flex>
+            {upcoming.map(event => (
+              <Card
+                as="a"
+                href={`https://events.hackclub.com/${event.slug}`}
+                variant="interactive"
+                m={[2, 3]}
+                key={event.id}
+              >
+                <Avatar
+                  width={96}
+                  height={96}
+                  sx={{ width: [96, 128] }}
+                  src={event.amaAvatar}
+                  alt={event.title}
+                />
+                <Heading as="h3" variant="subheadline" my={2}>
+                  {event.title.replace('AMA with ', '')}
+                </Heading>
+                <Text as="p" variant="caption" mb={3}>
+                  {dt(event.start)}
+                </Text>
+                <Button as="strong" variant="outline" sx={{ py: 0 }}>
+                  RSVP
+                </Button>
+              </Card>
+            ))}
+          </Flex>
+        </>
+      )}
       <Link
         href="https://events.hackclub.com/"
         sx={{ display: 'block', px: 3, fontSize: [2, 3] }}
@@ -176,6 +180,8 @@ export default ({ upcoming, past }) => (
   </>
 )
 
+export default Page
+
 export const getStaticProps = async () => {
   const { filter } = require('lodash')
   let upcoming = []

yarn.lock

@@ -1402,10 +1402,10 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
 
-"@hackclub/icons@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@hackclub/icons/-/icons-0.0.3.tgz#4b70c294d174ef7b58732c5888ab5e2b51dc14cb"
-  integrity sha512-V9UJo0MNl5GdTBNXQvvKa8YGhNMK4dd0tsnewGNQQLBMpfSYzN0wfxhkKyY5GT5rFqmxAnt0lElW1ACxHRCByA==
+"@hackclub/icons@^0.0.4":
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/@hackclub/icons/-/icons-0.0.4.tgz#f32b51226a80e015238b9addd69cf7c89c93bdf7"
+  integrity sha512-4oybVS0S8DPP/17X8NKKuR5cdukFxV02mYiznZzbCSHtCXd70bdVb61ithuHV0q4G3s49W1Fd/JEqbd0M10qfw==
 
 "@hackclub/meta@1.0.0":
   version "1.0.0"