add content

sitek94 · Dec 23, 2020 · ee20b25 · ee20b25
1 parent 70ad4fc
commit ee20b25
Show file tree

Hide file tree

Showing 32 changed files with 349 additions and 775 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -83,6 +83,9 @@ module.exports = {
               maxWidth: 1035,
             },
           },
+          {
+            resolve: `gatsby-remark-embedder`,
+          },
         ],
       },
     },
@@ -95,10 +98,10 @@ module.exports = {
     },
     'gatsby-plugin-workerize-loader',
     'gatsby-plugin-sharp',
-    'gatsby-transformer-sharp',
     'gatsby-plugin-emotion',
     'gatsby-plugin-catch-links',
     'gatsby-plugin-react-helmet',
+    'gatsby-transformer-sharp',
     {
       resolve: `gatsby-plugin-nprogress`,
       options: {

diff --git a/gatsby-node.js b/gatsby-node.js
@@ -5,97 +5,9 @@ const rimraf = require('rimraf')
 const {spawnSync} = require('child_process')
 const slugify = require('@sindresorhus/slugify')
 const {createFilePath} = require('gatsby-source-filesystem')
-const remark = require('remark')
-const stripMarkdownPlugin = require('strip-markdown')
 const {zipFunctions} = require('@netlify/zip-it-and-ship-it')
 const config = require('./config/website')
 
-const createProjects = (createPage, edges) => {
-  edges.forEach(({node}, i) => {
-    const prev = i === 0 ? null : edges[i - 1].node
-    const next = i === edges.length - 1 ? null : edges[i + 1].node
-    const pagePath = node.fields.slug
-
-    createPage({
-      path: pagePath,
-      component: path.resolve(`./src/templates/project-page.js`),
-      context: {
-        id: node.id,
-        prev,
-        next,
-      },
-    })
-  })
-}
-
-function createProjectPages({data, actions}) {
-  if (!data.edges.length) {
-    throw new Error('There are no projects!')
-  }
-
-  const {edges} = data
-  const {createPage} = actions
-  createProjects(createPage, edges)
-
-  return null
-}
-
-function stripMarkdown(markdownString) {
-  return remark()
-    .use(stripMarkdownPlugin)
-    .processSync(markdownString)
-    .toString()
-}
-
-const createPages = async ({actions, graphql}) => {
-  const {data, errors} = await graphql(`
-    fragment PostDetails on Mdx {
-      fileAbsolutePath
-      id
-      parent {
-        ... on File {
-          name
-          sourceInstanceName
-        }
-      }
-      excerpt(pruneLength: 250)
-      fields {
-        title
-        slug
-        description
-        date
-      }
-    }
-    query {
-      projects: allMdx(sort: {order: DESC, fields: [frontmatter___date]}) {
-        edges {
-          node {
-            ...PostDetails
-          }
-        }
-      }
-      projects: allMdx(sort: {order: DESC, fields: [frontmatter___date]}) {
-        edges {
-          node {
-            ...PostDetails
-          }
-        }
-      }
-    }
-  `)
-
-  if (errors) {
-    return Promise.reject(errors)
-  }
-
-  const {projects} = data
-
-  createProjectPages({
-    data: projects,
-    actions,
-  })
-}
-
 const onCreateWebpackConfig = ({actions}) => {
   actions.setWebpackConfig({
     resolve: {
@@ -148,12 +60,6 @@ function onCreateMdxNode({node, getNode, actions}) {
     value: node.frontmatter.description,
   })
 
-  createNodeField({
-    name: 'plainTextDescription',
-    node,
-    value: stripMarkdown(node.frontmatter.description),
-  })
-
   createNodeField({
     name: 'slug',
     node,
@@ -199,24 +105,6 @@ function onCreateMdxNode({node, getNode, actions}) {
     value: node.frontmatter.redirects,
   })
 
-  createNodeField({
-    name: 'editLink',
-    node,
-    value: `https://github.com/kentcdodds/kentcdodds.com/edit/master${node.fileAbsolutePath.replace(
-      __dirname,
-      '',
-    )}`,
-  })
-
-  createNodeField({
-    name: 'historyLink',
-    node,
-    value: `https://github.com/kentcdodds/kentcdodds.com/commits/master${node.fileAbsolutePath.replace(
-      __dirname,
-      '',
-    )}`,
-  })
-
   createNodeField({
     name: 'noFooter',
     node,
@@ -260,7 +148,7 @@ const onPostBuild = async () => {
 }
 
 module.exports = {
-  createPages,
+  // createPages,
   onCreateWebpackConfig,
   onCreateNode,
   onPreBootstrap,

diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
     "gatsby-plugin-workerize-loader": "^1.5.0",
     "gatsby-remark-autolink-headers": "^2.7.0",
     "gatsby-remark-copy-linked-files": "^2.6.0",
+    "gatsby-remark-embedder": "^4.1.0",
     "gatsby-remark-images": "^3.7.1",
     "gatsby-source-filesystem": "^2.7.0",
     "gatsby-transformer-remark": "^2.12.0",

diff --git a/src/components/big-hero.js b/src/components/big-hero.js
@@ -6,6 +6,7 @@ import {fonts} from '../lib/typography'
 import Container from 'components/container'
 import heroImageRight from '../images/hero/path-right.svg'
 import heroImageLeft from '../images/hero/path-left.svg'
+
 import particlesOptions from 'lib/particles.json'
 import Particles from 'react-tsparticles'
 

diff --git a/src/components/footer.js b/src/components/footer.js
@@ -1,13 +1,15 @@
 import * as React from 'react'
 import {css} from '@emotion/react'
 import theme from '../../config/theme'
-import {bpMaxSM} from '../lib/breakpoints'
+import Link from 'components/link'
+import {bpMaxSM} from 'lib/breakpoints'
 import SubscribeForm from './forms/subscribe'
 import {GitHub, YouTube, FreeCodeCamp} from './social'
 import Container from './container'
 
 import particlesOptions from 'lib/particles.json'
 import Particles from 'react-tsparticles'
+import {fonts} from 'lib/typography'
 
 const Footer = ({subscribeForm = <SubscribeForm />, maxWidth}) => (
   <footer
@@ -52,8 +54,7 @@ const Footer = ({subscribeForm = <SubscribeForm />, maxWidth}) => (
           display: flex;
           flex-direction: column;
           align-items: flex-end;
-          div,
-          img {
+          div {
             margin: 50px 0;
             ${bpMaxSM} {
               margin: 20px 0;
@@ -62,13 +63,24 @@ const Footer = ({subscribeForm = <SubscribeForm />, maxWidth}) => (
           ${bpMaxSM} {
             align-items: center;
           }
+          h4 {
+            font-family: ${fonts.light};
+            font-size: 14px;
+            color: white;
+          }
         `}
       >
         <div>
           <GitHub />
           <FreeCodeCamp />
           <YouTube />
         </div>
+
+        <Link to="/" aria-label="Return to homepage">
+          <div>
+            <h4>by Maciek Sitkowski</h4>
+          </div>
+        </Link>
       </div>
     </Container>
   </footer>

diff --git a/src/components/header.js b/src/components/header.js
@@ -26,12 +26,6 @@ function HeaderLink({headerColor, ...props}) {
               ? 'white'
               : theme.colors.link_color_hover,
         },
-        '&.active': {
-          background:
-            headerColor === theme.colors.white
-              ? 'rgba(40, 28, 77, 0.3)'
-              : lighten(0.4, theme.brand.primary),
-        },
       }}
       {...props}
     />

diff --git a/src/components/projects/habit-tracker/index.js b/src/components/projects/habit-tracker/index.js
@@ -27,7 +27,7 @@ export default function HabitTrackerCta({
             css={css({
               color: theme.colors.white,
             })}
-            to="/projects/habit-tracker-app"
+            to="/habit-tracker-app"
           >
             Habit Tracker App
           </Link>
@@ -45,7 +45,7 @@ export default function HabitTrackerCta({
         </TopTextBox>
         <Title>{title}</Title>
         <Byline>{byline}</Byline>
-        <Button href="/projects/habit-tracker-app">{button}</Button>
+        <Button href="/habit-tracker-app">{button}</Button>
       </Content>
       <Box>
         <BoxContent>

diff --git a/src/components/projects/pocket-globe/index.js b/src/components/projects/pocket-globe/index.js
@@ -28,7 +28,7 @@ export default function PocketGlobeApp({
             css={css({
               color: theme.colors.black,
             })}
-            to="/projects/pocket-globe-app"
+            to="/pocket-globe-app"
           >
             Pocket Globe App
           </Link>
@@ -46,7 +46,7 @@ export default function PocketGlobeApp({
         </TopTextBox>
         <Title>{title}</Title>
         <Byline>{byline}</Byline>
-        <Button href="/projects/pocket-globe-app">{button}</Button>
+        <Button href="/pocket-globe-app">{button}</Button>
       </Content>
       <Box>
         <BoxContent>

diff --git a/src/components/small-hero.js b/src/components/small-hero.js
@@ -0,0 +1,43 @@
+import * as React from 'react'
+import {css} from '@emotion/react'
+import theme from '../../config/theme'
+import {bpMaxSM} from '../lib/breakpoints'
+
+import optionsParticles from 'lib/particles.json'
+import Particles from 'react-tsparticles'
+
+function Hero({
+  children,
+  headerColor, // pluk this out of the props so it's not applied to the section
+  ...props
+}) {
+  return (
+    <section
+      css={css`
+        * {
+          color: ${theme.colors.white};
+        }
+        height: 100px;
+        width: 100%;
+        background: linear-gradient(-213deg, #5e31dc 0%, #3155dc 100%);
+        z-index: 0;
+        position: relative;
+        align-items: center;
+        display: flex;
+        padding-top: 40px;
+        .particles {
+          position: absolute;
+          inset: 0px;
+        }
+        ${bpMaxSM} {
+          padding-top: 60px;
+        }
+      `}
+      {...props}
+    >
+      <Particles className="particles" options={optionsParticles} />
+    </section>
+  )
+}
+
+export default Hero
diff --git a/src/components/social.js b/src/components/social.js
@@ -20,8 +20,8 @@ export const LinkedIn = ({
   >
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="40"
-      height="40"
+      width="23"
+      height="23"
       viewBox="0 0 23 23"
     >
       <path
@@ -49,8 +49,8 @@ export const GitHub = ({
   >
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="40"
-      height="40"
+      width="23"
+      height="23"
       viewBox="0 0 23 23"
     >
       <path
@@ -79,8 +79,8 @@ export const YouTube = ({
   >
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="40"
-      height="40"
+      width="23"
+      height="24"
       viewBox="0 0 23 24"
     >
       <path
@@ -108,8 +108,8 @@ export const FreeCodeCamp = ({
   >
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="50"
-      height="40"
+      width="30"
+      height="20"
       viewBox="0 0 30 20"
     >
       <title>free-code-camp</title>

diff --git a/src/lib/particles.json b/src/lib/particles.json
@@ -28,19 +28,16 @@
       "color": "#ffffff",
       "distance": 100,
       "enable": true,
-      "opacity": 0.5,
+      "opacity": 0.3,
       "width": 1
     },
     "collisions": {
       "enable": true
     },
     "move": {
-      "direction": "none",
       "enable": true,
-      "outMode": "out",
-      "random": false,
-      "speed": 3,
-      "straight": false
+      "outMode": "bounce",
+      "speed": 3
     },
     "number": {
       "density": {