Initial commit

Author: tylermenezes

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": ["babel-plugin-inline-import-graphql-ast"]
+}

.dockerignore

@@ -0,0 +1,6 @@
+.env
+.env.*
+.next/
+.eslint*
+README.md
+node_modules/

.eslintignore

@@ -0,0 +1,5 @@
+node_modules/
+dist/
+build/
+.next/
+.git/

.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: '@codeday',
+};

.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+.next/
+.env
+.env.*

Dockerfile

@@ -0,0 +1,14 @@
+FROM node:13-alpine
+
+ENV NODE_ENV=production
+RUN mkdir /app
+COPY package.json /app
+COPY yarn.lock /app
+WORKDIR /app
+
+RUN yarn install
+RUN yarn add --dev strip-ansi
+
+COPY . /app
+COPY ./docker-entrypoint.sh /docker-entrypoint.sh
+CMD /docker-entrypoint.sh

docker-entrypoint.sh

@@ -0,0 +1,2 @@
+npm run build
+npm run start

package.json

@@ -0,0 +1,35 @@
+{
+  "name": "www-corp",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@codeday/topo": "^3.5.0",
+    "@codeday/topocons": "^1.3.0",
+    "@emotion/core": "^10.0.34",
+    "@emotion/styled": "^10.0.27",
+    "@types/react": "^16.9.46",
+    "babel-plugin-inline-import-graphql-ast": "^2.4.1",
+    "emotion-theming": "^10.0.27",
+    "graphql": "^15.3.0",
+    "graphql-tag": "^2.11.0",
+    "hls.js": "^0.14.8",
+    "knuth-shuffle-seeded": "^1.0.6",
+    "next": "^9.5.2",
+    "next-seo": "^4.7.3",
+    "prop-types": "^15.7.2",
+    "random-seed": "^0.3.0",
+    "react": "^16.13.1",
+    "react-countup": "^4.3.3",
+    "react-dom": "^16.13.1",
+    "react-responsive-modal": "^5.0.2"
+  },
+  "devDependencies": {
+    "@codeday/eslint-config": "^2.1.2",
+    "eslint": "^7.6.0"
+  }
+}

public/favicon.ico

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { create } from 'random-seed';
+import Box, { Flex } from '@codeday/topo/Atom/Box';
+
+export default function FlexScatter({
+  children, seed, gapMin, gapMax, yOffsetMin, yOffsetMax, ...props
+}) {
+  const rand = create(seed);
+  const offsetChildren = children.map((c) => {
+    const offset = rand.intBetween(yOffsetMin, yOffsetMax);
+    return (
+      <Box
+        position="relative"
+        marginTop={`${offset}px`}
+        key="s-c.key"
+      >
+        {c}
+      </Box>
+    );
+  });
+
+  const gaps = (new Array(children.length + 1)).fill(undefined).map((_, i) => (
+    <Box
+      flexBasis={`${rand.intBetween(gapMin, gapMax)}px`}
+      flexGrow={rand.intBetween(1, 8)}
+      flexShrink={rand.intBetween(1, 8)}
+      // eslint-disable-next-line react/no-array-index-key
+      key={`flex-gap-${i}`}
+    />
+  ));
+  const zipper = (new Array(children.length * 2)).fill(undefined).map((_, i) => (
+    i % 2 === 0 ? gaps : offsetChildren)[Math.floor(i / 2)]);
+  zipper.push(gaps[gaps.length - 1]);
+
+  return (
+    <Flex justify="space-around" alignContent="space-around" wrap="wrap" {...props}>
+      {zipper}
+    </Flex>
+  );
+}
+FlexScatter.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.element).isRequired,
+  seed: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  gapMin: PropTypes.number.isRequired,
+  gapMax: PropTypes.number.isRequired,
+  yOffsetMin: PropTypes.number.isRequired,
+  yOffsetMax: PropTypes.number.isRequired,
+};

src/components/FlexScatter.js

@@ -0,0 +1,29 @@
+fragment IndexHeroComponent on Query {
+  cms {
+    mission: strings (where: { key: "common.mission" }) {
+      items {
+        value
+      }
+    }
+    explainer: asset(id:"6BoY9Ec9J8YRrHcj2RqsCg"){
+      url
+    }
+    indexHeroPhotos: pressPhotos(limit: 50) {
+      items {
+        region {
+          name
+        }
+        event {
+          program {
+            name
+          }
+          startsAt
+        }
+        photo {
+          jpg: url(transform: { width: 200, height: 150, format: JPG_PROGRESSIVE, resizeStrategy: FILL })
+          webp: url(transform: { width: 200, height: 150, format: JPG_PROGRESSIVE, resizeStrategy: FILL })
+        }
+      }
+    }
+  }
+}

src/components/Index/Hero.gql

@@ -0,0 +1,95 @@
+import React from 'react';
+import { create } from 'random-seed';
+import shuffle from 'knuth-shuffle-seeded';
+import Box, { Grid } from '@codeday/topo/Atom/Box';
+import Text, { Heading } from '@codeday/topo/Atom/Text';
+import Button from '@codeday/topo/Atom/Button';
+import Play from '@codeday/topocons/Icon/MediaPlay';
+import Image from '@codeday/topo/Atom/Image';
+import Slides from '@codeday/topo/Molecule/Slides';
+import FlexScatter from '../FlexScatter';
+import VideoLink from '../VideoLink';
+import { useQuery } from '../../query';
+import splitGroups from '../../utils/splitGroups';
+
+function photoSlides(rand, photoGroups) {
+  return photoGroups.map((pg, i) => (
+    <Slides key={i} w="200px" h="150px" duration={rand.floatBetween(8, 15)}>
+      {pg.map((p) => (
+        <Box key={p.photo.jpg} position="relative">
+          <Image src={p.photo.jpg} />
+          <Text
+            position="absolute"
+            bottom={0}
+            left={0}
+            right={0}
+            mb={0}
+            bg={`blackAlpha.500`}
+            color="white"
+            p={1}
+            fontSize="sm"
+          >
+            {[p.event?.program?.name, p.region?.name, p.event?.startsAt?.substring(0,4)].join(' ')}
+          </Text>
+        </Box>
+      ))}
+    </Slides>
+  ));
+}
+
+export default function Hero({ seed, ...props }) {
+  const { cms: { indexHeroPhotos, mission, explainer } } = useQuery();
+
+  const rand = create(seed);
+  const photos = shuffle(indexHeroPhotos?.items || [], seed);
+
+  return (
+    <Box {...props}>
+      <Grid
+        templateColumns={{ base: '1fr', md: '8fr 5fr', lg: '8fr 10fr', xl: '4fr 3fr' }}
+        gap={4}
+        pl={4}
+        overflow="hidden"
+      >
+        <Box m={{ base: 0, lg: 16 }} mt={{ base: 0, lg: 0 }} textAlign={{ base: 'center', md: 'left'}}>
+          <Heading as="h2" fontSize="6xl" fontWeight="bold" lineHeight="1.1" mt={8}>
+            There's a place in tech for everyone.
+          </Heading>
+          <Text fontSize="xl" mt={8} mb={8}>{mission?.items[0]?.value}</Text>
+          {explainer && (
+            <VideoLink url={explainer.url} autoPlay>
+              <Button variantColor="red">Learn More&nbsp;<Play /></Button>
+            </VideoLink>
+          )}
+        </Box>
+
+
+        {/* Small display: 4x images */}
+        <Box d={{ base: 'none', md: 'block', lg: 'none'}} marginRight='-100px'>
+          <FlexScatter
+            seed={seed}
+            gapMin={5}
+            gapMax={15}
+            yOffsetMin={-25}
+            yOffsetMax={75}
+          >
+            {photoSlides(rand, splitGroups(photos, 4))}
+          </FlexScatter>
+        </Box>
+
+        {/* Large display: 6x images */}
+        <Box d={{ base: 'none', lg: 'block'}} marginRight={{ base: '-125px', xl: '0'}}>
+          <FlexScatter
+            seed={seed}
+            gapMin={25}
+            gapMax={50}
+            yOffsetMin={-25}
+            yOffsetMax={75}
+          >
+            {photoSlides(rand, splitGroups(photos, 6))}
+          </FlexScatter>
+        </Box>
+      </Grid>
+    </Box>
+  );
+}

src/components/Index/Hero.js

@@ -0,0 +1,42 @@
+fragment IndexProgramsComponent on Query {
+  cms {
+    codeDayProgram: programs(where: { name:"CodeDay" }) {
+      items {
+        shortDescription
+      }
+    }
+
+    mainPrograms: programs(where: { name_not:"CodeDay", type:"primary" }) {
+      items {
+        name
+        url
+        shortDescription
+        logo {
+          url
+        }
+      }
+    }
+
+    otherPrograms: programs(where: { name_not:"CodeDay", type_not:"primary" }) {
+      items {
+        name
+        url
+        shortDescription
+        logo {
+          url
+        }
+      }
+    }
+
+    regions (limit: 500) {
+      items {
+        name
+        webname
+        location {
+          lat
+          lon
+        }
+      }
+    }
+  }
+}

src/components/Index/Programs.gql

@@ -0,0 +1,92 @@
+import React from 'react';
+import Box, { Grid } from '@codeday/topo/Atom/Box';
+import Image from '@codeday/topo/Atom/Image';
+import Text, { Heading } from '@codeday/topo/Atom/Text';
+import Content from '@codeday/topo/Molecule/Content';
+import { CodeDay } from '@codeday/topo/Atom/Logo';
+import { useQuery } from '../../query';
+
+export default function Programs() {
+  const { cms: { regions, mainPrograms, otherPrograms, codeDayProgram }} = useQuery();
+  return (
+    <Content>
+
+      <Heading as="h2" fontSize="5xl" textAlign="center" mb={16} mt={16} bold>Attend an Event</Heading>
+
+      {/* CodeDay */}
+      <Grid templateColumns={{ base: '1fr', md: '1fr 1fr' }} gap={8}>
+        <Box borderWidth={1} borderColor="current.border" borderRadius={2} p={4} boxShadow="md">
+          <CodeDay fontSize="4xl" withText />
+          <Text fontSize="md" mt={4} mb={4}>{codeDayProgram?.items[0]?.shortDescription}</Text>
+          <Text fontSize="md" mb={4} bold>Choose a location:</Text>
+          <Box borderWidth={1} border="current.border" maxHeight={{ base: "sm", md: "md" }} overflowY="auto">
+            {regions?.items?.map((region) => (
+              <Box
+                p={2}
+                as="a"
+                d="block"
+                href={`https://www.codeday.org/${region.webname}`}
+                target="_blank"
+                fontSize="xl"
+                borderColor="current.border"
+                borderBottomWidth="1px"
+              >
+                {region.name}
+              </Box>
+            ))}
+          </Box>
+        </Box>
+
+        {/* More Programs */}
+        <Box>
+          {mainPrograms?.items?.map((prog) => (
+            <Box
+              borderWidth={1}
+              borderColor="current.border"
+              borderRadius={2}
+              p={4}
+              mb={4}
+              boxShadow="sm"
+              d="block"
+              as="a"
+              href={prog.url}
+              target="_blank"
+              rel="noopener"
+            >
+              <Box>
+                <Box float="left" width={10} pr={4}>
+                  <Image src={prog.logo.url} height={6} alt="" />
+                </Box>
+                <Text fontSize="lg" bold>{prog.name}</Text>
+              </Box>
+              <Text clear="both" mb={0}>{prog.shortDescription}</Text>
+            </Box>
+          ))}
+
+          {/* Even more programs! */}
+          <Grid templateColumns="repeat(3, 1fr)" textAlign="center" gap={4}>
+            {otherPrograms?.items?.map((prog) => (
+                <Box
+                  borderWidth={1}
+                  borderColor="current.border"
+                  borderRadius={2}
+                  p={4}
+                  mb={4}
+                  boxShadow="sm"
+                  d="block"
+                  as="a"
+                  href={prog.url}
+                  target="_blank"
+                  rel="noopener"
+                >
+                  <Image d="inline-block" src={prog.logo.url} height={12} mb={2} />
+                  <br />
+                  <Text fontSize="lg" mb={0} bold>{prog.name}</Text>
+                </Box>
+            ))}
+          </Grid>
+        </Box>
+      </Grid>
+    </Content>
+  )
+}