Merge branch 'feat/new-layout' into develop

data/SiteConfig.js

@@ -23,7 +23,8 @@ const config = {
     "Just a software engineer trying to mesh art and engineering.", // User description to display in the author segment.
   // Links to social profiles/projects you want to display in the author segment/navigation bar.
   avatar: {
-    description: "Just a software engineer trying to mesh art and engineering.",
+    description:
+      "Uncovering the keys for navigating the landscape of Software Engineering. One Blog at a time.",
     photo:
       "https://shaunjacks.com/static/426d80516a46be4949bdfd16faafdcb3/b9d37/shaun-coffee-zoom.png",
   },
@@ -38,13 +39,13 @@ const config = {
     },
     {
       label: "email",
-      url: "mailto:shaun@shaunjacks.com",
+      url: "mailto:shaunbjackson@gmail.com",
     },
   ],
   menuLinks: [
     {
       name: "Me",
-      url: "/about-me",
+      url: "/about",
     },
     {
       name: "Articles",

gatsby-config.js

@@ -86,6 +86,14 @@ module.exports = {
         ],
       },
     },
+    {
+      resolve: "gatsby-plugin-react-svg",
+      options: {
+        rule: {
+          include: /assets/,
+        },
+      },
+    },
     {
       resolve: "gatsby-plugin-google-analytics",
       options: {

package.json

@@ -7,6 +7,7 @@
     "@emotion/core": "^10.0.21",
     "@mdx-js/mdx": "^1.5.1",
     "@mdx-js/react": "^1.5.1",
+    "@theme-ui/color": "^0.3.1",
     "@theme-ui/prism": "^0.2.46",
     "gatsby": "^2.17.10",
     "gatsby-image": "^2.3.4",
@@ -20,6 +21,7 @@
     "gatsby-plugin-offline": "^3.0.11",
     "gatsby-plugin-page-creator": "^2.1.27",
     "gatsby-plugin-react-helmet": "^3.1.10",
+    "gatsby-plugin-react-svg": "^3.0.0",
     "gatsby-plugin-sharp": "^2.5.6",
     "gatsby-plugin-sitemap": "^2.2.16",
     "gatsby-plugin-theme-ui": "^0.2.43",

src/components/AllCategories.js

@@ -1,15 +1,14 @@
-import React from "react"
-import { useStaticQuery, graphql } from "gatsby"
+import React from "react";
+import { useStaticQuery, graphql } from "gatsby";
 import _ from "lodash";
-import { Link } from 'gatsby'
+import { Link } from "gatsby";
 
 /** @jsx jsx */
 import { Styled, jsx } from "theme-ui";
-
-
+import { darken, lighten } from "@theme-ui/color";
 
 const AllCategories = () => {
-    const PostCategories = useStaticQuery(graphql`
+  const PostCategories = useStaticQuery(graphql`
     {
       allMdx {
         edges {
@@ -21,54 +20,56 @@ const AllCategories = () => {
         }
       }
     }
-  `)
-
-    const { edges } = PostCategories.allMdx
+  `);
 
-    const categorySet = new Set();
-    //this erases the duplicates of categories that I have
-    edges.forEach(element => {
-        const category = element.node.frontmatter
-        if(category.category) {
-            categorySet.add(category.category)
-        }
-    });
-    //this will pass that into an array so that I can loop
-    const array =[]
-    categorySet.forEach(cat => {
-        array.push(cat)
-    })
-    const renderCategories = array.map(cat => {
-        return (
-          <Styled
-            key={cat}
-            as={Link}
-            to={`/categories/${_.kebabCase(cat)}/`}
-            sx={{
-              m: 2,
-              color: `primary`,
-              border: `solid 3px`,
-              borderRadius: `5px`,
-              textDecoration: `none`,
-              fontSize:26,
-              p: 2, 
-              ":hover": {
-                  bg: `muted`
-              }
-            }}
-          >
-            {cat}
-          </Styled>
-        );
-    })
+  const { edges } = PostCategories.allMdx;
 
+  const categorySet = new Set();
+  //this erases the duplicates of categories that I have
+  edges.forEach((element) => {
+    const category = element.node.frontmatter;
+    if (category.category) {
+      categorySet.add(category.category);
+    }
+  });
+  //this will pass that into an array so that I can loop
+  const array = [];
+  categorySet.forEach((cat) => {
+    array.push(cat);
+  });
+  const renderCategories = array.map((cat) => {
     return (
-      <>
-        <Styled sx={{ display: `flex`, flexWrap: `wrap`, justifyContent:`center` }}>
-          {renderCategories}
-        </Styled>
-      </>
+      <Styled
+        key={cat}
+        as={Link}
+        to={`/categories/${_.kebabCase(cat)}/`}
+        sx={{
+          m: 2,
+          color: `primary`,
+          border: `solid 3px`,
+          borderRadius: `5px`,
+          textDecoration: `none`,
+          fontSize: 26,
+          p: 2,
+          ":hover": {
+            bg: lighten("background", 0.1),
+          },
+        }}
+      >
+        {cat}
+      </Styled>
     );
-}
+  });
+
+  return (
+    <>
+      <Styled
+        sx={{ display: `flex`, flexWrap: `wrap`, justifyContent: `center` }}
+      >
+        {renderCategories}
+      </Styled>
+    </>
+  );
+};
 
-export default AllCategories
+export default AllCategories;

src/components/Footer.js

@@ -13,15 +13,20 @@ function Footer(props) {
   return (
     <footer
       sx={{
-        fontSize: 1,
-        variant: "styles.footer"
+        width: "100%",
+        variant: "styles.footer",
+        backgroundColor: "panelBackground",
+        color: "panelText",
       }}
     >
       <div
         sx={{
           display: "flex",
           justifyContent: "space-between",
-          p: 3
+          alignItems: `center`,
+          maxWidth: `container`,
+          m: "auto",
+          p: 3,
         }}
       >
         <div>

src/components/NavMenu.js

@@ -8,7 +8,7 @@ import { Styled, jsx } from "theme-ui";
 
 class NavMenu extends React.Component {
   state = {
-    scrolled: false
+    scrolled: false,
   };
 
   componentDidMount() {
@@ -46,10 +46,10 @@ class NavMenu extends React.Component {
             top: 0,
             left: 0,
             height: `60px`,
-            backgroundColor: `background`,
+            backgroundColor: `panelBackground`,
             boxShadow: shadow,
             m: `auto`,
-            zIndex: 100
+            zIndex: 100,
           }}
         >
           <div
@@ -58,16 +58,15 @@ class NavMenu extends React.Component {
               justifyContent: `space-between`,
               alignItems: `center`,
               maxWidth: `container`,
+              height: "100%",
               m: "auto",
-              mt: `18px`,
-              px: 3
             }}
           >
-            <Link to="/" sx={{ textDecoration: `none`, color: `primary` }}>
-              <div>{siteTitle}</div>
+            <Link to="/" sx={{ textDecoration: `none`, color: `panelText` }}>
+              <div sx={{ pl: "1rem" }}>{siteTitle}</div>
             </Link>
             <div style={{ display: `flex`, alignItems: `center` }}>
-              {menuLinks.map(link => {
+              {menuLinks.map((link) => {
                 return (
                   <Styled.h3
                     key={link.url}
@@ -76,7 +75,7 @@ class NavMenu extends React.Component {
                     sx={{
                       mr: 3,
                       textDecoration: `none`,
-                      color: `primary`
+                      color: "panelText",
                     }}
                   >
                     {link.name}

src/components/PostHeader.js

@@ -6,25 +6,24 @@ import PostTags from "./PostTags";
 /** @jsx jsx */
 import { Styled, jsx } from "theme-ui";
 
-const PostHeader = props => {
+const PostHeader = (props) => {
   const { post } = props;
 
   return (
     <div sx={{ mb: `-1px`, mx: 2 }}>
       <div sx={{ display: `flex`, flexDirection: `column`, color: "text" }}>
         <div>
           <small sx={{ mr: 2 }}>{post.date}</small>
-          <small>{post.timeToRead} minute(s)</small>
         </div>
         <div
           sx={{
             display: `flex`,
             flexWrap: `wrap`,
             mt: 2,
-            alignItems: `baseline`
+            alignItems: `baseline`,
           }}
         >
-          <Styled.p
+          {/* <Styled.p
             as={Link}
             sx={{
               color: `primary`,
@@ -42,7 +41,7 @@ const PostHeader = props => {
           >
             {post.category}
           </Styled.p>
-          <PostTags tags={post.tags} />
+          <PostTags tags={post.tags} /> */}
         </div>
       </div>
     </div>

src/components/PostHeaderLong.js

@@ -0,0 +1,50 @@
+import React from "react";
+import _ from "lodash";
+import { Link } from "gatsby";
+import PostTags from "./PostTags";
+
+/** @jsx jsx */
+import { Styled, jsx } from "theme-ui";
+
+const PostHeaderLong = (props) => {
+  const { post } = props;
+
+  return (
+    <div sx={{ mb: `-1px`, mx: 2 }}>
+      <div sx={{ display: `flex`, flexDirection: `column`, color: "text" }}>
+        <div>
+          <small sx={{ mr: 2 }}>{post.date}</small>
+        </div>
+        <div
+          sx={{
+            display: `flex`,
+            flexWrap: `wrap`,
+            mt: 2,
+            alignItems: `baseline`,
+          }}
+        >
+          <Styled.p
+            as={Link}
+            sx={{
+              color: `primary`,
+              textDecoration: `none`,
+              border: `solid 1px`,
+              boxSizing: `content-box`,
+              display: `inline-block`,
+              px: `4px`,
+              borderRadius: `5px`,
+              p: 1,
+              mb: `10px`,
+              mr: 2,
+            }}
+            to={`/categories/${_.kebabCase(post.category)}/`}
+          >
+            {post.category}
+          </Styled.p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PostHeaderLong;