Medhat Dawoud

Enhancements in my Gatsby Blog

React
• 5 min read

As you might know, this website is built using gatsby which is built using react, recently I’m working hard to make my blog better and better, I changed some internal and exposed features that I’d like to share with you today.

First let’s talk about the technical changes:

Actually I tried to clean up my blog implementation and work still in progress but here is a list of small but very useful stuff.

1. components directory

In this directory I started as list of directories categorized by the purpose for instance a folder for all components related to articles, another folder for all components related to layout, but eventually I find out that making this folder flat is the best thing, and create a folder per component that hold the component .js file and the .scss file for styling as I’m using sass, an of course for easing it I added a berrel to the whole folder as indx.js that export all components so we can import any component in any template or page like this

import { Article, SocialIcons } from './components';

2. Blog posts folder structure

In fact this is up to the flavor you like, and for me I started with a folder called posts and inside it I put a .md MarkDown file, and I added logic in the gatsby.node.js file to use the name of this file as a slug and put it into the graphQl node of this post, but actually later on I find that this is not convinient and decided to put each post in a folder named the same as the date of the post like 2019-10-30, but I decided to add the slug into the frontmatter of the markdown in the end and make the files inside the date folders all named index.md as follow:

2019-05-15
  | index.md
2019-05-17
  | index.md
2019-10-13
  | index.md
...

some people prefer to add the posts opensource on github in a different repo or even in the same repo, I’m not doing that right now but might change my mind later.

3. Commenting system ‘Disqus’

when I started adding my blog, I decided to have a commenting system into it, and I used to have this out of the box for my previous websites as I used to depend on wordpress for that, so I decided to add Disqus as my commenting system and it’s pretty easy to be added to gatsby blogs using a plugin called gatasby-plugin-disqus 🔗. But recently I felt that comming inside the blog post itself is kind of old fashion and no other person would get benefit out of this Q/A, so I added a link to the discussion on Twitter, that you can find in the bottom of this page and of course social sharing links for easy sharing, to be honest I got inspired for this from Kent C.Dodds 🔗’s blog and I feel it very effective way in keeping in touch with the readers, and in general Disqus is not that good after all.

4. Mobile responsiveness

Of course I’m watching my readers though Google Analytics and other stuff to make sure I’m giving a good service for the right people, and I guess so far I do. Based on the results I got from these analysis I find that most of the people who are checking my websitte are accessing it though mobile phones, so I decided to invest some time enhacing and fixing a lot of issues in the Mobile version of this website including but not everything:

  • the menu used to crash in screen smaller than 400px now it doesn’t.
  • list of topics in the blog landing page was crashing as well.
  • the Metadata in each post (topic, time to read, and author) where borken in the smaller devices.
  • and a lot more.

please help in testing it on mobile and report any issue you face, I belive it will never be perfect.

5. Concent Manager

Since I’m living in the Netherlands 🇳🇱 , we have to follow the GDPR 🔗, so I’ve added a concent manager asking the users permission to give thier data to google analytics, and they can revoke that concent any time from the bottom left corner.

6. video embedder

I’m now using a cool plugin for embedding anything (video, tweet, codesandbox, …) called gatsby-remark-embedder 🔗 it’s really useful and I recommend it for anyone who has gatsby blog, and I’m using it to convert the youtube videos in the SemiColon secction mainly for the time being but I’ll rely on it for more stuff soon.

About the non-technical updates:

I didn’t change the look and feel of the website a lot but the content has been changed and will be changed more soon:

1. Semicolon Academy

I started putting posts into the SemiColon Academy 🔗 section. If you are following me for long time you might know that I have a good library for technical videos on my Youtube Channel 🔗 in arabic ؏ and it’s not very convenient to add extra informations in the video dscription on youtube which rarly people check, so I decided to re-publish them again here and give some more info and more links in arabic as well like this video.

https://www.youtube.com/watch?v=I6FBMVhmhTo&ab_channel=SemiColonAcademy 🔗

2. Plans for making videos again

From the previous point, since I’ll re-publish SemiColon academy video here in the website, I’m truly thinking of getting back on track and create a weeking video on youtube and put it here as well, let me know in a tweet if you are looking forward to it. BTW thanks for more than +6140 subscribers till this moment who are interested in my content on YouTube, I 💙 you.

I hope you enjoyed reading this quick one, and at least to learn one new thing today.

Tot ziens 👋

SHARE