Add post footer

pomber · Jan 24, 2020 · 422dd03 · 422dd03
1 parent f0c9d93
commit 422dd03
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 16 deletions.
diff --git a/src/components/content.data.js b/src/components/content.data.js
@@ -1,4 +1,11 @@
 module.exports = [
+  {
+    type: "project",
+    title: "CSS Dragon Illusion",
+    description: "A CSS-only optical illusion",
+    date: "2020/01/22",
+    url: "https://codepen.io/pomber/full/povqmoX",
+  },
   {
     type: "project",
     title: "Code Surfer v3",

diff --git a/src/components/header-aside.js b/src/components/header-aside.js
@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { jsx } from "theme-ui"
-import { Twitter, Medium, GitHub, RSS } from "./social-icons"
+import { SocialIcons } from "./social-icons"
 import { useStaticQuery, graphql } from "gatsby"
 import Img from "gatsby-image"
 
@@ -31,20 +31,7 @@ function HeaderAside() {
         }}
         alt="Rodrigo Pombo"
       />
-      <div
-        sx={{
-          pt: 2,
-          mx: ["auto", 0],
-          textAlign: "center",
-          "& > :not(:last-child)": { pr: 3 },
-        }}
-      >
-        <Twitter />
-        <GitHub />
-        <Medium />
-        {/* <Patreon /> */}
-        <RSS />
-      </div>
+      <SocialIcons />
     </div>
   )
 }

diff --git a/src/components/post.js b/src/components/post.js
@@ -6,6 +6,19 @@ import Layout from "../components/layout"
 import SEO from "../components/seo"
 import { MDXRenderer } from "gatsby-plugin-mdx"
 import ContentWithAside from "../components/content-with-aside"
+import { SocialIcons } from "./social-icons"
+
+const PostFooter = () => {
+  return (
+    <footer sx={{ paddingTop: 3, textAlign: "center" }}>
+      <p sx={{ fontSize: "2rem", letterSpacing: "0.3em" }}>***</p>
+      <p>
+        Explore more on <Styled.a href="/">pomb.us</Styled.a>
+      </p>
+      <SocialIcons />
+    </footer>
+  )
+}
 
 const Post = ({ data: { post, card }, location }) => (
   <Layout location={location}>
@@ -34,6 +47,7 @@ const Post = ({ data: { post, card }, location }) => (
         }
       />
       <MDXRenderer>{post.body}</MDXRenderer>
+      <PostFooter />
     </main>
   </Layout>
 )

diff --git a/src/components/social-icons.js b/src/components/social-icons.js
@@ -54,4 +54,22 @@ function RSS() {
   )
 }
 
-export { Twitter, GitHub, Medium, Patreon, RSS }
+function SocialIcons() {
+  return (
+    <div
+      sx={{
+        pt: 2,
+        mx: ["auto", 0],
+        textAlign: "center",
+        "& > :not(:last-child)": { pr: 3 },
+      }}
+    >
+      <Twitter />
+      <GitHub />
+      <Medium />
+      <RSS />
+    </div>
+  )
+}
+
+export { Twitter, GitHub, Medium, Patreon, RSS, SocialIcons }