finishing touches with Gatsby

Hi! I'm Ted Zlatanov and I'll write about remaking my small site http://lifelogs.com

This is part three. The first post talked about why I went with Gatsby / React as a platform. The second post went into a little more detail about the backend. Now let's talk about the finishing touches - what it took to make the site look OK.

Hidden blog posts

I added a new status: Hidden option for blog posts. To filter it out of the views, I had to modify the BlogIndex.js code.

diff --git c/src/templates/BlogIndex.js w/src/templates/BlogIndex.js
...
@@ -137,7 +137,7 @@ export const pageQuery = graphql`
     }
 
     posts: allMarkdownRemark(
-      filter: { fields: { contentType: { eq: "posts" } } }
+      filter: { fields: { contentType: { eq: "posts" } },
+                frontmatter: { status: { ne: "Hidden" } } }

diff --git c/static/admin/config.yml w/static/admin/config.yml
...
-        options: ['Published', 'Featured', 'Draft']
+        options: ['Published', 'Featured', 'Draft', 'Hidden']

Titles, logos and favicons

There were wayyyy too many places to fix logos and favicons. Together with the site title, this really was a journey of git grep title and git grep logo over and over until I found all the locations.

It would be nice to move that out to a common configuration. Maybe when I need to retitle the site next time I'll get on that.

I also added a dumb little animation to the top right logo, and used the Feather Zap icon instead of a SVG logo:

diff --git c/src/components/Logo.css w/src/components/Logo.css
...
+.Logo:hover,
+.Logo:focus {
+  transition: all .5s;
+  transform: scale(4.0);
+}

diff --git c/src/components/Logo.js w/src/components/Logo.js
+import { Zap } from 'react-feather'
 import './Logo.css'
 
 export default () => (
-  <div
-    className="Logo"
-    style={{
-      backgroundImage: `url(/images/logo.svg)`
-  }}
+  <Zap className="Logo" />

Then I went WILD and added another hover animation to the main Zap logo added on every page:

diff --git c/src/components/PageHeader.css w/src/components/PageHeader.css
+.PageHeader--Title svg {
+  transition: ease all 0.3s;
+}
+
+.PageHeader--Title:focus, .PageHeader--Title:hover svg {
+  transform: rotate(-180deg);
+}
+

diff --git c/src/components/PageHeader.js w/src/components/PageHeader.js
...
+import { Zap } from 'react-feather'
...
-        <h1 className="PageHeader--Title">{title}</h1>
+        <h1 className="PageHeader--Title">
+          <Zap/>
+          {title}
+        </h1>

Footer fixes

I adjusted Footer.js to remove InstagramFeed.js. Also I gave credit to Thrive, the original creator, and updated the copyright notice.

Github corner

I love the upper right "Github corner" animation and made the tail wag a little more wildly. I also pointed it to my Github profile, not a specific repo.

diff --git c/src/components/GithubCorner.css w/src/components/GithubCorner.css
...
-    transform: rotate(10deg);
+    transform: rotate(90deg);

diff --git c/src/components/GithubCorner.js w/src/components/GithubCorner.js
...
-    aria-label="View source on Github"
+    aria-label="View on Github"

diff --git c/src/components/Layout.js w/src/components/Layout.js
...
-            <GithubCorner url="https://github.com/thriveweb/yellowcake" />
+            <GithubCorner url="https://github.com/tzz" />

Finishing thoughts

It was a fun journey, learning a new platform and extending it a little bit.

Compared with others I've used over the years, Gatsby and React feel like a good match. Rather than using a site generator, I felt like I was writing interactive HTML/CSS and Javascript.

I like JSX quite a bit. It's in a good literate programming balance between too much and too little domain-specific tooling and syntax sugar. With Emacs, I installed and enabled it like this and was up and running in minutes. I'll try to use a LSP server to get autocompletion etc. in the next iteration, but it wasn't a big deal this time.

  (use-package rjsx-mode
    :mode "src/\\(pages\\|templates\\|components\\)\\/.*\\.js\\'")

I would not recommend Emacs over VS Studio to most people--this is just my preference.

Gatsby had some drawbacks:

• many places to set titles and other metadata
• no centralized logo or identity in the yellowcake starter I used
• debugging it can be challenging locally if you don't know how to use the interactive debuggers well
• all the tools and plugins were somewhat chaotic

React and JSX had a few dark corners, but reading the docs and especially the in depth article really cleared things up for me.