Posters!

components/iframe.js

@@ -0,0 +1,9 @@
+import { Box } from 'theme-ui'
+
+export default function IFrame() {
+  return (
+      <Box sx={{mx: 4}}>
+        <iframe src="/BND.pdf" height="400" width="288" />
+      </Box>
+  )
+}

pages/[slug].js

@@ -0,0 +1,49 @@
+import { Box, Container, Grid, Flex, Heading, Button, Link } from 'theme-ui'
+import { useRouter } from 'next/router'
+
+export default function App({}) {
+  const router = useRouter()
+  return (
+    <Grid sx={{ gap: '20px', textAlign: 'center', my: 4 }}>
+      <Heading as="h1" sx={{ fontSize: 5 }}>
+        Innovation Challenge
+      </Heading>
+
+      <Box
+        sx={{
+          maxWidth: '600px',
+          mx: 'auto',
+          bg: 'sunken',
+          p: 3,
+          borderRadius: 4
+        }}
+      >
+        <Link target="_blank" href="https://innovation-challenge.co">
+          The Innovation Challenge
+        </Link>{' '}
+        is an entrepreneurship competition designed for secondary students in
+        APAC. It is funded through a{' '}
+        <Link target="_blank" href="https://www.ibo.org/programmes/middle-years-programme/dr-siva-kumari-myp-student-innovators-grant/dr-siva-kumari-myp-student-innovators-grant-finalists-2021/">
+          MYP Innovator's Grant
+        </Link>{' '}
+        from the IBO, all of our finances are transparent{' '}
+        <Link target="_blank" href="https://bank.hackclub.com/the-innovation-circuit">
+          here
+        </Link>
+        .
+      </Box>
+      <Button
+        as="a"
+        download
+        href={`/${router.query.slug}.pdf`}
+        sx={{ width: 'fit-content', margin: 'auto', borderRadius: 4 }}
+      >
+        Download Poster
+      </Button>
+      <iframe
+        src={`${router.query.slug}.pdf`}
+        style={{ height: '90vh', width: '40vw', margin: 'auto' }}
+      />
+    </Grid>
+  )
+}

pages/_app.js

@@ -3,14 +3,17 @@ import NextApp from 'next/app'
 import '@the-innovation-circuit/theme/fonts/fonts.css'
 import theme from '@the-innovation-circuit/theme'
 import { ThemeProvider } from 'theme-ui'
-import ColorSwitcher from '../components/color-switcher'
 
 export default class App extends NextApp {
   render() {
     const { Component, pageProps } = this.props
     return (
-      <ThemeProvider theme={theme}>
-        <ColorSwitcher />
+      <ThemeProvider
+        theme={{
+          ...theme,
+          colors: { ...theme.colors, modes: {} }
+        }}
+      >
         <Component {...pageProps} />
       </ThemeProvider>
     )

pages/index.js

@@ -0,0 +1,30 @@
+import { Box, Container, Grid, Flex, Heading } from 'theme-ui'
+
+function IFrame({ src }) {
+  return (
+    <Box sx={{ mx: 4, my: 3, width: '288px' }} as="a" href={src.replace(".pdf", "")}>
+      <iframe src={src} height="400" width="288" style={{pointerEvents: 'none'}} />
+    </Box>
+  )
+}
+
+export default function App({ files }) {
+  return (
+    <Container>
+      <Heading as="h1" sx={{ textAlign: 'center', fontSize: 6, mt: 4 }}>
+        Innovation Challenge Posters
+      </Heading>
+      <Flex columns={4} sx={{ flexWrap: 'wrap', justifyContent: 'center' }}>
+        {files.map(pdf => (
+          <IFrame src={pdf} key={pdf} />
+        ))}
+      </Flex>
+    </Container>
+  )
+}
+
+export async function getStaticProps() {
+  const fs = require('fs')
+  let files = fs.readdirSync('./public')
+  return { props: { files } }
+}

yarn.lock

@@ -454,16 +454,6 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
 
-"@hackclub/meta@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@hackclub/meta/-/meta-1.1.0.tgz#08051822921ff1406b23ff242d3ce395908c7817"
-  integrity sha512-YgDkhrKVzElaoEAf5xcXu0C5RKqwft2g2Rk26dHdcRrb3oOUDa9mJM6O0KC2VJ4G7/iLO+qotUnc/vtsREugVw==
-
-"@hackclub/theme@^0.3.1":
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/@hackclub/theme/-/theme-0.3.1.tgz#ab1f473178e3f1fa857a41e5edf53d30c42562e9"
-  integrity sha512-Kl1emuTu+LQdo+g1RqOwUr8Q3eV/A9Xn6hcwwhiKnsI2hFnSVxjvP1ZKTzdUdQjhSqgl2FAMg84AAn7ZjZRJWg==
-
 "@hapi/[email protected]":
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/@hapi/accept/-/accept-5.0.2.tgz#ab7043b037e68b722f93f376afb05e85c0699523"
@@ -664,6 +654,16 @@
     "@styled-system/core" "^5.1.2"
     "@styled-system/css" "^5.1.4"
 
+"@the-innovation-circuit/meta@^1.1.0":
+  version "1.1.32"
+  resolved "https://registry.yarnpkg.com/@the-innovation-circuit/meta/-/meta-1.1.32.tgz#8ad826386c6a675613ae39ca8042d142f9b9d345"
+  integrity sha512-SbCKelqVCC1p3Fp+BT3j5icd7Aut0HZJ843p8IkyTlF1su2oi5Yj9KjZORnyAVbmzoZxMbY4eA1H59sOJmMgDw==
+
+"@the-innovation-circuit/theme@^0.3.1":
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@the-innovation-circuit/theme/-/theme-0.3.3.tgz#963e23b88685e571902cca769b5d13c891031ce1"
+  integrity sha512-PTRs5qNfz6MaZedxp3HyOj3r6tdS4x/2r/aCChHrxQ+CgYYt8VSX+ctIqzTLK8+sAIce8bc8gvjcNWxy03wfZA==
+
 "@theme-ui/[email protected]":
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/@theme-ui/color-modes/-/color-modes-0.10.0.tgz#85071f16d7d4458f3dab5a7af8b9ea459da4dcd0"