Add bio component and update styling

demo/gatsby-config.js

@@ -8,10 +8,12 @@ module.exports = {
   siteMetadata: {
     title: `Gatsby Theme Writer`,
     author: `Becca Bailey`,
-    description: `Becca likes to build things`,
-    siteUrl: `/`,
+    description:
+      "Proin at viverra nisi. Praesent vehicula dolor non enim tempor pharetra. Aenean sed fermentum massa. In posuere consequat sapien a volutpat. Vivamus quis egestas augue. Nulla eros leo, interdum vel maximus aliquet, suscipit quis purus. ",
+    siteUrl: `http://becca.is`,
     social: {
       twitter: `beccaliz`,
+      instagram: `beccamakesthings`,
     },
   },
   plugins: ["gatsby-theme-writer"],

gatsby-theme-writer/src/components/bio.js

@@ -0,0 +1,63 @@
+import React from "react"
+import Image from "gatsby-image"
+/** @jsx jsx */
+import { jsx, Flex } from "theme-ui"
+import SocialIcons from "./social-icons"
+import { graphql, useStaticQuery } from "gatsby"
+
+const Bio = () => {
+  const data = useStaticQuery(bioQuery)
+  return (
+    <>
+      <Flex sx={{ justifyContent: "flex-end" }}>
+        <SocialIcons social={data.site.siteMetadata.social} />
+      </Flex>
+      <Flex
+        sx={{
+          borderTop: "1px solid #eee",
+          paddingTop: 3,
+          paddingBottom: 3,
+          marginBottom: 3,
+          alignItems: "center",
+        }}
+      >
+        <Image
+          sx={{
+            borderRadius: "50%",
+            marginRight: 3,
+            minWidth: [100, 120],
+            maxHeight: [100, 120],
+          }}
+          fixed={data.avatar.childImageSharp.fixed}
+        />
+        <div>
+          <p>{data.site.siteMetadata.description}</p>
+        </div>
+      </Flex>
+    </>
+  )
+}
+
+export default Bio
+
+const bioQuery = graphql`
+  query Bio {
+    avatar: file(absolutePath: { regex: "/avatar.(jpeg|jpg|gif|png)/" }) {
+      childImageSharp {
+        fixed(width: 120, height: 120) {
+          ...GatsbyImageSharpFixed
+        }
+      }
+    }
+    site {
+      siteMetadata {
+        author
+        description
+        social {
+          instagram
+          twitter
+        }
+      }
+    }
+  }
+`

gatsby-theme-writer/src/components/featured-posts.js

@@ -10,6 +10,7 @@ const FeaturedPosts = ({ posts }) => {
         border: "1px solid #eee",
         backgroundColor: "#fcfcfc",
         borderRadius: 4,
+        padding: 3,
       }}
     >
       <Grid columns={posts.length}>

gatsby-theme-writer/src/components/footer.js

@@ -0,0 +1,24 @@
+import React from "react"
+/** @jsx jsx */
+import { jsx } from "theme-ui"
+
+const Footer = () => {
+  return (
+    <footer>
+      <small
+        sx={{
+          fontFamily: "heading",
+          textTransform: "uppercase",
+          fontWeight: 100,
+          fontSize: 0,
+        }}
+      >
+        © {new Date().getFullYear()}, Powered by
+        {` `}
+        <a href="https://www.gatsbyjs.org">Gatsby</a>
+      </small>
+    </footer>
+  )
+}
+
+export default Footer

gatsby-theme-writer/src/components/grid.js

@@ -1,14 +1,17 @@
+import React from "react"
 /** @jsx jsx */
 import { jsx } from "theme-ui"
 
-const Grid = ({ columns, children, padding = 3 }) => {
+const Grid = ({ columns, children, padding = 3, responsive = true }) => {
+  columns = responsive
+    ? ["repeat(1, 1fr)", `repeat(${columns}, 1fr)`]
+    : `repeat(${columns}, 1fr)`
   return (
     <div
       sx={{
         display: "grid",
-        gridColumnGap: 3,
-        gridTemplateColumns: ["repeat(1, 1fr)", `repeat(${columns}, 1fr)`],
-        padding: 3,
+        gridColumnGap: padding,
+        gridTemplateColumns: columns,
       }}
     >
       {children}

gatsby-theme-writer/src/components/icons.js

@@ -0,0 +1,73 @@
+import React from "react"
+
+export const Twitter = props => {
+  return (
+    <svg
+      preserveAspectRatio="xMidYMid meet"
+      x="0"
+      y="0"
+      viewBox="0 0 50 50"
+      width="30"
+      height="30"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M24.826 0C11.137 0 0 11.137 0 24.826c0 13.688 11.137 24.826 24.826 24.826 13.688 0 24.826-11.138 24.826-24.826C49.652 11.137 38.516 0 24.826 0zm11.075 19.144c.011.246.017.494.017.742 0 7.551-5.746 16.255-16.259 16.255-3.227 0-6.231-.943-8.759-2.565.447.053.902.08 1.363.08 2.678 0 5.141-.914 7.097-2.446a5.72 5.72 0 0 1-5.338-3.969 5.76 5.76 0 0 0 2.58-.096 5.715 5.715 0 0 1-4.583-5.603l.001-.072a5.69 5.69 0 0 0 2.587.714 5.71 5.71 0 0 1-2.541-4.755c0-1.048.281-2.03.773-2.874a16.225 16.225 0 0 0 11.777 5.972 5.707 5.707 0 0 1-.147-1.303 5.714 5.714 0 0 1 9.884-3.91 11.406 11.406 0 0 0 3.63-1.387 5.74 5.74 0 0 1-2.516 3.162 11.36 11.36 0 0 0 3.282-.899 11.494 11.494 0 0 1-2.848 2.954z" />
+    </svg>
+  )
+}
+
+export const Facebook = props => {
+  return (
+    <svg
+      preserveAspectRatio="xMidYMid meet"
+      x="0"
+      y="0"
+      viewBox="0 0 50 50"
+      width="30"
+      height="30"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M24.826 0C11.137 0 0 11.137 0 24.826c0 13.688 11.137 24.826 24.826 24.826 13.688 0 24.826-11.138 24.826-24.826C49.652 11.137 38.516 0 24.826 0zM31 25.7h-4.039v14.396h-5.985V25.7h-2.845v-5.088h2.845v-3.291c0-2.357 1.12-6.04 6.04-6.04l4.435.017v4.939h-3.219c-.524 0-1.269.262-1.269 1.386v2.99h4.56L31 25.7z" />
+    </svg>
+  )
+}
+
+export const Instagram = props => {
+  return (
+    <svg
+      preserveAspectRatio="xMidYMid meet"
+      x="0"
+      y="0"
+      viewBox="0 0 50 50"
+      width="30"
+      height="30"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M24.825 29.796a4.978 4.978 0 0 0 4.972-4.97 4.954 4.954 0 0 0-.94-2.897 4.964 4.964 0 0 0-4.029-2.073c-1.659 0-3.126.82-4.031 2.072a4.947 4.947 0 0 0-.94 2.897 4.973 4.973 0 0 0 4.968 4.971zM35.678 18.746V13.96l-.623.002-4.164.013.016 4.787z" />
+      <path d="M24.826 0C11.137 0 0 11.137 0 24.826c0 13.688 11.137 24.826 24.826 24.826 13.688 0 24.826-11.138 24.826-24.826C49.652 11.137 38.516 0 24.826 0zm14.119 21.929v11.56a5.463 5.463 0 0 1-5.457 5.458H16.164a5.462 5.462 0 0 1-5.457-5.458V16.165a5.462 5.462 0 0 1 5.457-5.457h17.323a5.463 5.463 0 0 1 5.458 5.457v5.764z" />
+      <path d="M32.549 24.826c0 4.257-3.464 7.723-7.723 7.723s-7.722-3.466-7.722-7.723a7.67 7.67 0 0 1 .568-2.897h-4.215v11.56a2.706 2.706 0 0 0 2.706 2.704h17.323a2.707 2.707 0 0 0 2.706-2.704v-11.56h-4.217c.367.894.574 1.873.574 2.897z" />
+    </svg>
+  )
+}
+
+export const Linkedin = props => {
+  return (
+    <svg
+      preserveAspectRatio="xMidYMid meet"
+      x="0"
+      y="0"
+      viewBox="0 0 50 50"
+      width="30"
+      height="30"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M29.35 21.298c-2.125 0-3.074 1.168-3.605 1.988v-1.704h-4.002c.052 1.128 0 12.041 0 12.041h4.002v-6.727c0-.359.023-.72.131-.977.29-.72.948-1.465 2.054-1.465 1.448 0 2.027 1.104 2.027 2.724v6.442h4.003v-6.905c-.002-3.696-1.977-5.417-4.61-5.417zm-3.608 2.03h-.025c.008-.014.02-.027.025-.041v.041zM15.523 21.582h4.002v12.041h-4.002z" />
+      <path d="M24.826 0C11.137 0 0 11.137 0 24.826c0 13.688 11.137 24.826 24.826 24.826 13.688 0 24.826-11.138 24.826-24.826C49.652 11.137 38.516 0 24.826 0zm13.165 36.055c0 1.056-.876 1.91-1.959 1.91H13.451c-1.08 0-1.957-.854-1.957-1.91V13.211c0-1.055.877-1.91 1.957-1.91h22.581c1.082 0 1.959.856 1.959 1.91v22.844z" />
+      <path d="M17.551 15.777c-1.368 0-2.264.898-2.264 2.08 0 1.155.869 2.08 2.211 2.08h.026c1.396 0 2.265-.925 2.265-2.08-.027-1.181-.868-2.08-2.238-2.08z" />
+    </svg>
+  )
+}

gatsby-theme-writer/src/components/layout.js

@@ -1,8 +1,15 @@
 import React from "react"
 import { css, Global } from "@emotion/core"
-import { Layout as StyledLayout, Header, Main, Container } from "theme-ui"
+import {
+  Layout as StyledLayout,
+  Header,
+  Main,
+  Container,
+  Footer as StyledFooter,
+} from "theme-ui"
 import { graphql, useStaticQuery } from "gatsby"
 import SiteTitle from "./site-title"
+import Footer from "./footer"
 
 const Layout = ({ children }) => {
   const data = useStaticQuery(graphql`
@@ -33,6 +40,9 @@ const Layout = ({ children }) => {
       <Main>
         <Container>{children}</Container>
       </Main>
+      <StyledFooter>
+        <Footer />
+      </StyledFooter>
     </StyledLayout>
   )
 }

gatsby-theme-writer/src/components/post-metadata.js

@@ -1,8 +1,17 @@
 import React from "react"
+/** @jsx jsx */
+import { jsx } from "theme-ui"
 
 const PostMetadata = ({ timeToRead, formattedDate }) => {
   return (
-    <small>
+    <small
+      sx={{
+        fontFamily: "heading",
+        textTransform: "uppercase",
+        fontWeight: 100,
+        fontSize: 0,
+      }}
+    >
       {formattedDate} | {`${timeToRead || 0} minute read`}
     </small>
   )

gatsby-theme-writer/src/components/posts.js

@@ -1,14 +1,13 @@
 import React from "react"
 import PostPreview from "./post-preview"
-/** @jsx jsx */
-import { jsx } from "theme-ui"
 
 const Posts = ({ posts }) => {
   console.log(posts)
   return (
     <>
       {posts.map(post => (
         <PostPreview
+          key={post.node.id}
           title={post.node.frontmatter.title}
           formattedDate={post.node.frontmatter.date}
           descriptionHTML={post.node.excerpt}

gatsby-theme-writer/src/components/social-icons.js

@@ -0,0 +1,30 @@
+import React from "react"
+import { Facebook, Twitter, Linkedin, Instagram } from "./icons"
+/** @jsx jsx */
+import { jsx, Flex } from "theme-ui"
+import Grid from "./grid"
+
+const socialIcons = {
+  facebook: Facebook,
+  twitter: Twitter,
+  linkedin: Linkedin,
+  instagram: Instagram,
+}
+
+const SocialIcons = ({ social }) => {
+  const keys = Object.keys(social)
+  return (
+    <Grid columns={keys.length} padding={2} responsive={false}>
+      {keys.map(name => {
+        const Icon = socialIcons[name]
+        return (
+          <a title={name} href={social[name]}>
+            <Icon fill={"#333"} />
+          </a>
+        )
+      })}
+    </Grid>
+  )
+}
+
+export default SocialIcons

gatsby-theme-writer/src/gatsby-plugin-theme-ui/index.js

@@ -15,20 +15,20 @@ export default {
     title: "Petit Formal Script, sans-serif",
     default: "Lora, serif",
   },
-  fontSizes: [18, 20, 22, 27, 36, 48],
+  fontSizes: [14, 18, 20, 22, 27, 36, 48],
   lineHeights: {
-    text: "1.45",
+    text: "1.55",
     heading: "1.1",
   },
   sizes: {
-    container: 900,
+    container: 800,
   },
   styles: {
     Layout: {
       backgroundColor: "background",
       color: "text",
       fontFamily: "default",
-      fontSize: 1,
+      fontSize: 2,
       lineHeight: "text",
     },
     Header: {
@@ -46,6 +46,11 @@ export default {
       paddingBottom: 3,
       paddingTop: 3,
     },
+    Footer: {
+      margin: "0 auto",
+      maxWidth: "container",
+      padding: 3,
+    },
     h1: {
       color: "text",
       fontSize: 5,

gatsby-theme-writer/src/templates/blog-index.js

@@ -2,10 +2,12 @@ import React from "react"
 import Layout from "../components/layout"
 import Posts from "../components/posts"
 import FeaturedPosts from "./featured-posts"
+import Bio from "../components/bio"
 
 const BlogIndexTemplate = ({ pageContext }) => {
   return (
     <Layout>
+      <Bio />
       <FeaturedPosts />
       <Posts posts={pageContext.posts} />
     </Layout>

gatsby-theme-writer/src/templates/blog-post.js

@@ -2,8 +2,9 @@ import { graphql, Link } from "gatsby"
 import React from "react"
 import Layout from "../components/layout"
 import PostMetadata from "../components/post-metadata"
+import Image from "gatsby-image"
 /** @jsx jsx */
-import { jsx } from "theme-ui"
+import { jsx, Styled } from "theme-ui"
 
 class BlogPostTemplate extends React.Component {
   render() {
@@ -13,12 +14,19 @@ class BlogPostTemplate extends React.Component {
 
     return (
       <Layout location={this.props.location} title={siteTitle}>
-        <h1>{post.frontmatter.title}</h1>
+        <Image
+          sx={{ marginBottom: 4 }}
+          fluid={post.frontmatter.featuredImage.childImageSharp.fluid}
+        />
+        <Styled.h1 sx={{ marginBottom: 1 }}>{post.frontmatter.title}</Styled.h1>
         <PostMetadata
           formattedDate={post.frontmatter.date}
           timeToRead={post.timeToRead}
         />
-        <div dangerouslySetInnerHTML={{ __html: post.html }} />
+        <div
+          sx={{ fontSize: 3 }}
+          dangerouslySetInnerHTML={{ __html: post.html }}
+        />
         <ul
           sx={{
             display: `flex`,
@@ -64,6 +72,13 @@ export const pageQuery = graphql`
       frontmatter {
         title
         date(formatString: "MMMM DD, YYYY")
+        featuredImage {
+          childImageSharp {
+            fluid(maxWidth: 1000, maxHeight: 500) {
+              ...GatsbyImageSharpFluid
+            }
+          }
+        }
       }
     }
   }