Dov's Blog

Hello World/How I made this site

March 1st, 2019

Hey just in case anyone actually reads this I feel like I should point out I have no idea what I am doing I am learning React/Gatsby so take everything I say with a grain of salt

Hi! I am not really sure if I will ever really post anything here but why not try it out. This post serves as a build log for anyone interested, and more realistically myself when I come back to try and edit and find out that oops: I dont remember how this works.

Dark mode by default or an exercise in inline styling

For any of you who have ever seen the Gatsby blog starter you might notice that this site looks almost exactly the same except... noticeably darker. This was pretty simple (in the end) Here is all the global styles responsible for the dark mode

html {
    background-color: rgb(23, 24, 27);
}
a {
   color: rgb(72, 186, 249) 
}
a:visited { 
    color: rgb(105, 12, 147);
}
blockquote {
    color: grey 
}
.whitetext{
    color: white
}

And the next part was a lot of inline styles where content was inserted:

style={{
    color: `#ffffff`
}}

A day later I am a little embarrassed how long it took to make everything work but hindsight is 2020

Code highlighting

You may have noticed that

console.log('there is code highlighting')

thanks for noticing! This was a little more plug and play thanks to gatsby-remark-prismjs, gatsby-transformer-remark, and prismjs. I just used the default config

{
          resolve: `gatsby-remark-prismjs`,
          options: {
            classPrefix: "language-",
            inlineCodeMarker: null,
            aliases: {},
            showLineNumbers: false,
            noInlineHighlight: false,
          },
        },

and the twilight theme, which at first I though I would have to modify but fit perfectly with the dark theme.

Last edited field

You cant see this now but I added a field under the publish date to show when it was edited the first part was as simple as adding 'edited' to the graphql schema, and querying it when needed. However sometimes it was not there and graphqls formatdate did not like that so I made a little utility that uses moment.js to format the date. And using a fun little one-liner to only display the message if it has been edited and the response is not invalid date.

    { editedFormat !== "Invalid date" && 'Edited:' + editedFormat} 

404 page

I like when 404 pages are aware of what page they are at any given time. For example a 404 page might be dovalperin.xyz/thisdoesnotexist or dovalperin.xyz/dffjvshvs I like when the 404 page knows which one it is. Thankfully Gatsby already has the location in props so this is trivial

<h2>{this.props.location.pathname || 'This Page'}</h2>
<p> does not exist! Its probably my fault. <a href="/">Home?</a> </p> 

try it for your self

Bio component

If you did try it out (and pay really good attention) you will have noticed that the bio component says something a little different on the 404 page. I want to be able to put the bio on pages that are not posts, such as the 404. The problem was that the bio said 'written by' which did not really feel right on something that was not a post so I made the component take props. If I wanted it to say site by instead of written by I just have to pass true to the siteby prop and viola. (Thank you tertiary operators)

{props.siteby ? 'Site by' : 'Written by'}

I also made the bio component more customizable in case I ever release this as a theme. Almost the whole message is now customizable in the config file. This is the template:

{props.siteby ? 'Site by' : 'Written by'} <strong>{author}</strong> who {doeswhat}
{` `}
<a href={`https://twitter.com/${social.twitter}`}>
    {followmessage}
</a>

and this is what I pass to it for my bio (irrelevant fields removed):

author: `Dov Alperin`,
doeswhat: `lives in Brooklyn and has no idea what he is doing`,
followmessage: `I retweet smarter people on twitter`,
social: {
    twitter: `techno___freak`,
},

React components in markdown

I wanted to be able to demo what I am building or give examples of what I am talking about. Thankfully gatsby-transform-remark and rehype-react allowed me to do that by using the htmlAst field with rehype instead of gatsbys dangerouslysetinnerhtml. This tutorial explains it better than I can so I wont really try. I will however show it in action. As a demo I wrote a counter component (similar to the one in the tutorial but probably worse):

import React from "react"

export default class Counter extends React.Component {
static defaultProps = {
    start: 0
}
state = {
    val: Number(this.props.start)
}

handleUp = () => {
    this.setState(state => {
        return {val: state.val +1}
    })
}

handleDown = () => {
    this.setState(state => {
        return {val: state.val -1}
    })
}
render() {
    return (
    <div>
    <p style={{display: `block`, marginBottom: `0px`}}>{this.state.val}</p>
    <button onClick={this.handleUp}>+1</button>
    <button onClick={this.handleDown}>-1</button>
    </div>
    )
}

}

And after importing it in my blog template and plugging it in to rehype-react:

"counter": counter

I can now use the counter component as a regular html tag and insert it into my markdown, with or without props

<counter></counter>
<counter start="6"></counter>

0

6

Deploying

The site is hosted on s3 with cloudfront, the code is stored in github. I made an executable with the commands to build and deploy the site that I can run whenever I want to deploy:

#!/bin/bash
gatsby build
s3cmd put --recursive public/ s3://**********
aws cloudfront create-invalidation --distribution-id ******** --paths "/*"

lines

  1. builds the site into the public folder
  2. puts the public folder into my s3 bucket
  3. invalidates the files in the cloudfront cache so the updates show

Wrapping up

If your reading: Thanks! Not sure why this isn't a very good blog post, so thank you even more for sticking through it. The goal is to keep this post updated as the site gets updated. Thanks again for reading!


Dov Alperin

Written by Dov Alperin who lives in Brooklyn and has no idea what he is doing I retweet smarter people on twitter