Migrate Hack Shack Open Graph tags

gatsby-node.js

@@ -1,6 +1,8 @@
 /* eslint-disable no-console */
 const fs = require('fs');
 const path = require('path');
+const axios = require('axios');
+require('dotenv').config();
 
 const { createFilePath } = require('gatsby-source-filesystem');
 
@@ -39,6 +41,67 @@ const paginatedCollectionQuery = (paginatedName) => {
 
 exports.createPages = async ({ graphql, actions }) => {
   const { createPage } = actions;
+  const { GATSBY_WORKSHOPCHALLENGE_API_ENDPOINT } = process.env;
+
+  try {
+    // eslint-disable-next-line
+    const specialBadgesApi = `${GATSBY_WORKSHOPCHALLENGE_API_ENDPOINT}/api/special-badges`;
+    const getSpecialBadges = await axios({
+      method: 'GET',
+      url: specialBadgesApi,
+    });
+
+    getSpecialBadges.data.forEach(({ id }) => {
+      createPage({
+        path: `/hackshack/workshops/${id - 1}/special-badge`,
+        component: require.resolve(
+          './src/pages/hackshack/workshops/template.js',
+        ),
+        context: {
+          specialBadgeId: id,
+        },
+      });
+    });
+  } catch (error) {
+    console.log('error: ', error);
+  }
+
+  try {
+    // eslint-disable-next-line max-len
+    const replaysApi = `${GATSBY_WORKSHOPCHALLENGE_API_ENDPOINT}/api/replays?active=true`;
+    const getReplays = await axios({
+      method: 'GET',
+      url: replaysApi,
+    });
+
+    getReplays.data.forEach(({ id }) => {
+      createPage({
+        path: `/hackshack/replays/${id}`,
+        component: require.resolve('./src/pages/hackshack/replays/template.js'),
+        context: {
+          replayId: id,
+        },
+      });
+
+      createPage({
+        path: `/hackshack/workshop/${id}`,
+        component: require.resolve('./src/pages/hackshack/replays/template.js'),
+        context: {
+          replayId: id,
+        },
+      });
+
+      createPage({
+        path: `/hackshack/workshop/${id}/finisher-badge`,
+        component: require.resolve('./src/pages/hackshack/replays/template.js'),
+        context: {
+          replayId: id,
+        },
+      });
+    });
+  } catch (error) {
+    console.log('error: ', error);
+  }
 
   const blogPost = path.resolve('./src/templates/blog-post.js');
   const platform = path.resolve('./src/templates/platform.js');
@@ -50,40 +113,53 @@ exports.createPages = async ({ graphql, actions }) => {
   const useCasesTemplate = path.resolve('./src/templates/use-case.js');
 
   const allQueryResult = await graphql(paginatedCollectionQuery('blog-posts'));
-  const openSourceQueryResult =
-    await graphql(paginatedCollectionQuery('opensource-blog-posts'));
-  const ezmeralRuntimeQueryResult =
-    await graphql(paginatedCollectionQuery('ezmeral-runtime-blog-posts'));
-  const spiffeQueryResult =
-    await graphql(paginatedCollectionQuery('spiffe-blog-posts'));
-  const dataFabricQueryResult =
-    await graphql(paginatedCollectionQuery('data-fabric-posts'));
-  const greenLakeQueryResult =
-    await graphql(paginatedCollectionQuery('greenlake-posts'));
-  const chapelQueryResult =
-    await graphql(paginatedCollectionQuery('chapel-posts'));
-  const grommetQueryResult =
-    await graphql(paginatedCollectionQuery('grommet-posts'));
-  const alletraQueryResult =
-    await graphql(paginatedCollectionQuery('alletra-posts'));
-  const deepLearningQueryResult =
-    await graphql(paginatedCollectionQuery('deep-learning-posts'));
-  const threeParQueryResult =
-    await graphql(paginatedCollectionQuery('3par-posts'));
-  const nimbleQueryResult =
-    await graphql(paginatedCollectionQuery('nimble-posts'));
-  const oneviewQueryResult =
-    await graphql(paginatedCollectionQuery('oneview-posts'));
-  const oneviewDashboardQueryResult =
-    await graphql(paginatedCollectionQuery('oneview-dashboard-posts'));
-  const iloQueryResult =
-    await graphql(paginatedCollectionQuery('ilo-posts'));
-  const determinedQueryResult =
-    await graphql(paginatedCollectionQuery('determined-ai-posts'));
-  const dsccQueryResult =
-    await graphql(paginatedCollectionQuery('dscc-posts'));
-  const othersQueryResult = 
-    await graphql(paginatedCollectionQuery('others-posts'));
+  const openSourceQueryResult = await graphql(
+    paginatedCollectionQuery('opensource-blog-posts'),
+  );
+  const ezmeralRuntimeQueryResult = await graphql(
+    paginatedCollectionQuery('ezmeral-runtime-blog-posts'),
+  );
+  const spiffeQueryResult = await graphql(
+    paginatedCollectionQuery('spiffe-blog-posts'),
+  );
+  const dataFabricQueryResult = await graphql(
+    paginatedCollectionQuery('data-fabric-posts'),
+  );
+  const greenLakeQueryResult = await graphql(
+    paginatedCollectionQuery('greenlake-posts'),
+  );
+  const chapelQueryResult = await graphql(
+    paginatedCollectionQuery('chapel-posts'),
+  );
+  const grommetQueryResult = await graphql(
+    paginatedCollectionQuery('grommet-posts'),
+  );
+  const alletraQueryResult = await graphql(
+    paginatedCollectionQuery('alletra-posts'),
+  );
+  const deepLearningQueryResult = await graphql(
+    paginatedCollectionQuery('deep-learning-posts'),
+  );
+  const threeParQueryResult = await graphql(
+    paginatedCollectionQuery('3par-posts'),
+  );
+  const nimbleQueryResult = await graphql(
+    paginatedCollectionQuery('nimble-posts'),
+  );
+  const oneviewQueryResult = await graphql(
+    paginatedCollectionQuery('oneview-posts'),
+  );
+  const oneviewDashboardQueryResult = await graphql(
+    paginatedCollectionQuery('oneview-dashboard-posts'),
+  );
+  const iloQueryResult = await graphql(paginatedCollectionQuery('ilo-posts'));
+  const determinedQueryResult = await graphql(
+    paginatedCollectionQuery('determined-ai-posts'),
+  );
+  const dsccQueryResult = await graphql(paginatedCollectionQuery('dscc-posts'));
+  const othersQueryResult = await graphql(
+    paginatedCollectionQuery('others-posts'),
+  );
 
   setPagination(allQueryResult);
   setPagination(openSourceQueryResult);
@@ -339,3 +415,27 @@ exports.createSchemaCustomization = ({ actions, schema }) => {
     }),
   ]);
 };
+
+const fetch = require('node-fetch');
+const { GATSBY_WORKSHOPCHALLENGE_API_ENDPOINT } = process.env;
+exports.sourceNodes = async ({
+  actions: { createNode },
+  createContentDigest,
+}) => {
+  // get data from GitHub API at build time
+  const result = await fetch(
+    `${GATSBY_WORKSHOPCHALLENGE_API_ENDPOINT}/api/replays?active=true`,
+  );
+  const resultData = await result.json();
+  // create node for build time data example in the docs
+  createNode({
+    data: resultData,
+    id: 'example-build-time-data',
+    parent: null,
+    children: [],
+    internal: {
+      type: 'Example',
+      contentDigest: createContentDigest(resultData),
+    },
+  });
+};

package.json

@@ -10,6 +10,7 @@
     "@babel/core": "^7.13.1",
     "@emotion/core": "^10.1.1",
     "@sendgrid/mail": "^7.4.2",
+    "axios": "^0.24.0",
     "babel-plugin-styled-components": "^1.12.0",
     "dotenv": "^8.2.0",
     "gatsby": "^2.32.8",
@@ -44,6 +45,7 @@
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-helmet": "^6.1.0",
+    "react-player": "^2.9.0",
     "react-syntax-highlighter": "^15.4.3",
     "redux": "^4.0.5",
     "remark": "^11.0.2",

src/components/hackshack/ButtonSplit/index.js

@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Box, Stack, Text } from 'grommet';
+import { MainButton, PinkBox, TealBox } from './styles';
+
+export const ButtonSplit = ({ to, children }) => {
+  const [hover, setHover] = useState(false);
+  // Each box needs to include the child text to maintain
+  // dynamic width
+  const TextSizeHolder = () => (
+    <Text color="rgba(0,0,0,0)" size="large" weight="bold">
+      {children}
+    </Text>
+  );
+  return (
+    <MainButton
+      plain
+      href={to}
+      target="_blank"
+      onMouseOver={() => setHover(true)}
+      onFocus={() => setHover(true)}
+      onMouseOut={() => setHover(false)}
+      onBlur={() => setHover(false)}
+    >
+      <Box>
+        <Stack>
+          <TealBox
+            background="teal!"
+            pad={{ horizontal: 'large', vertical: 'small' }}
+            round="small"
+          >
+            <TextSizeHolder />
+          </TealBox>
+          <PinkBox
+            background="#F740FF"
+            pad={{ horizontal: 'large', vertical: 'small' }}
+            round="small"
+          >
+            <TextSizeHolder />
+          </PinkBox>
+          <Box pad={{ horizontal: 'large', vertical: 'small' }}>
+            <Text color={hover ? 'black' : 'dark-1'} size="large" weight="bold">
+              {children}
+            </Text>
+          </Box>
+          {/* 
+              The hit area of the button changes when the boxes are
+              animated The below Boxes keep the hit area
+              consistent regardless of hover state
+          */}
+          <Box
+            style={{
+              transform: 'translate(5px) translateY(5px)',
+            }}
+            pad={{ horizontal: 'large', vertical: 'small' }}
+            opacity={0}
+          >
+            <TextSizeHolder />
+          </Box>
+          <Box
+            style={{
+              transform: 'translate(-5px) translateY(-5px)',
+            }}
+            pad={{ horizontal: 'large', vertical: 'small' }}
+            opacity={0}
+          >
+            <TextSizeHolder />
+          </Box>
+        </Stack>
+      </Box>
+    </MainButton>
+  );
+};
+
+ButtonSplit.propTypes = {
+  children: PropTypes.node.isRequired,
+  to: PropTypes.string.isRequired,
+};
+
+export default ButtonSplit;

src/components/hackshack/ButtonSplit/styles.js

@@ -0,0 +1,100 @@
+import { Box, Button } from 'grommet';
+import styled, { keyframes } from 'styled-components';
+
+const tealSlide = keyframes`
+  0% {
+    transform: translateX(-5px) translateY(-5px);
+  }
+
+  30% {
+    transform: translateX(5px) translateY(-5px);
+  }
+
+  60% {
+    transform: translateX(5px) translateY(5px) scale(1.025);
+  }
+
+  100% {
+    transform: translateX(1px) translateY(1px) scale(1.025);
+  }
+`;
+
+const tealSlideReverse = keyframes`
+  0% {
+  transform: translateX(0) translateY(0);
+  }
+
+  30% {
+  transform: translateX(4px) translateY(0);
+  }
+
+  50% {
+  transform: translateX(5px) translateY(-5px);
+  }
+
+  100% {
+    transform: translateX(-5px) translateY(-5px);
+  }
+`;
+
+export const TealBox = styled(Box)`
+  transform: translateX(-5px) translateY(-5px);
+  transition: transform 0.15s ease-in-out;
+  animation: ${tealSlideReverse} 0.25s forwards ease-out;
+`;
+
+const pinkSlide = keyframes`
+0% {
+  transform: translateX(5px) translateY(5px);
+}
+
+30% {
+  transform: translateX(-5px) translateY(5px);
+}
+
+60% {
+  transform: translateX(-6px) translateY(-2px) scale(1.025);
+}
+
+100% {
+  transform: translateX(-1px) translateY(-1px) scale(1.025);
+}
+`;
+
+const pinkSlideReverse = keyframes`
+0% {
+  transform: translateX(0) translateY(0);
+}
+
+30% {
+  transform: translateX(-4px) translateY(0);
+}
+
+50% {
+  transform: translateX(-5px) translateY(5px);
+}
+
+100% {
+  transform: translateX(5px) translateY(5px);
+}
+`;
+
+export const PinkBox = styled(Box)`
+  transform: translateX(5px) translateY(5px);
+  transition: transform 0.15s ease-in-out;
+  mix-blend-mode: screen;
+  animation: ${pinkSlideReverse} 0.2s forwards ease-out;
+`;
+
+export const MainButton = styled(Button)`
+  &:hover {
+    ${TealBox} {
+      animation: ${tealSlide} 0.2s forwards ease-out;
+    }
+
+    ${PinkBox} {
+      animation: ${pinkSlide} 0.25s forwards ease-out;
+      animation-delay: 0.05s;
+    }
+  }
+`;