Image for post
Image for post

A lot of people, I included, are using Gatsby to build their own blogs. One of the things I wanted to add to my blog was a table of contents (ToC) 📝. A ToC will show you all the headings of an article and when you click on a heading it’ll take you directly to that heading. It’s a nice little feature to have on your blog, which makes it easier for users to navigate and find the information they are looking for.

https://www.youtube.com/watch?v=YrUeiD4YO5E

Prerequisite

So before we get started you can find the source code here. …


In this article, we will briefly go over what DNS (domain name system) is and explain how it is used in conjunction with Docker 🐳.

DNS

You can think of DNS like a phonebook, except instead of people’s name and phone numbers, it stores domains names and IP addresses (this can be either IPv4 or IPv6). Where a domain name is used to identify resources i.e. google.com is a domain name. This is how DNS works:

google.com:     8.8.8.8
cloudflare.com: 1.1.1.1

Example

You can manually send a DNS request (and get a response) using the dig command. …


In this article, we will go over how you use proxychains to proxy our traffic through a socks proxy.

Image for post
Image for post

Background

Recently like everyone else, I’ve been working from home a lot more often. This means to access resources at work I need to use a VPN. However, to access some resources, such as production servers from my local machine, I need to use a SOCKS5 proxy. Without using a SOCKS proxy, I would need to do something shown in the diagram below.

Example Setup

Image for post
Image for post

First, I would need to SSH onto an intermediate server (Server A), which I have connectivity to from my local machine. Then on that intermediate server, I would need to SSH onto the production server. So this intermediate server needs to have connectivity to the Server B as well. As you can see Server B is behind a firewall, in this example, the firewall will only allow traffic from Server A to ingress to Server B. …


Image for post
Image for post

In this article, we will go over how you can manage your markdown blog posts from another git repository (repo). Separate to the git repository for your Gatsby site. This is the same process that I use to manage this repo.

So what this entails is the source code for my Gatsby site is in a repo called portfolio-site on Gitlab. Then I have another repo for all of the blog posts (in markdown) called articles. …


Image for post
Image for post

In this article, we will look at how we can add an “edit post” button, to your Gatsby blog. When this button is clicked it will take the user to your markdown file, on github/gitlab that was used to generate the blog post they are currently viewing.

Setup

Before we add the edit button to a Gatsby blog, let’s set up a simple Gatsby site using the Gatsby blog starter. You can skip this step and add the button to an existing site.

npm -g install gatsby-cli
gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog

If you don’t use the start above, you will need to make sure you have the gatsby-source-filesystem plugin installed. To import our markdown files. Your gatsby-config.js


In this article, we will go over how we can use the gitlab-auto-mr CLI script I wrote to help automate your Gitlab workflow. This is a very simple script you can use with Gitlab which will auto-create merge requests (MRs) every time you create a new branch on a project in Gitlab.

(Optional) Git Feature Branches

Feel free to skip this section if you are already familar with feature branch, skip to the Gitlab Auto MR section

Before I introduce what the script does and how we use it, let’s go over why you might need to use it. Say you’re working on a project with multiple other people and you want to make sure you keep your master/production branch clean. One way to do that is everyone uses “feature” branches. So for every feature being added to the project you create a new short-lived branch off of the master branch. Then typically one developer will work on a feature and make a merge request when ready to get the branch merged into the main master branch, to integrate their work with everyone else’s. …


Image for post
Image for post

Let’s take a look at how we can add offline local search 🔍 to a Gatsby blog. There are two main types of search we can use an offline search like elasticlunr and external API search engines like ElasticSearch. These are typically more scalable but also more expensive.

You can find more info here.

In this article, I will show you how to add offline search to your Gatsby blog using elasticlunr. This means your website needs to be indexed locally and will increase the bundle size as this index needs to be loaded by the client but with the scale and size of personal blogs (100s, not 1000s of blog post) this shouldn't make a massive difference. …


Image for post
Image for post

TailwindCSS allows us to use pre-defined classes instead of defining our CSS styles. In this article, we will go over how we can use Custom properties (sometimes referred to as CSS variables or cascading variables) with TailwindCSS.

Setup

First, follow the installation guide found here. This will show you how you can add TailwindCSS to your current project. For part 2 I will assume you called your CSS file global.css. This is the file that contains @tailwind base; etc.

global.css

First, we need to edit our TailwindCSS file so it looks something like this:

@tailwind base;
@tailwind components;
@tailwind utilities;

.root,
#root,
#docs-root {
--primary: #367ee9;
--secondary: #a0aec0;
--accent: #718096;
--background: #fff;
--main: #0d0106;
--header: #2d3748…


Image for post
Image for post

This article (sort of) continues on from my previous article How to use Storybooks, Gatsby, Babel, Tailwind, Typescript together. In this article, we will document our React components using Storybook with MDX.

You can find an example project using this here, you can also find a demo site for said project.

Prerequisite

Just to make sure everyone’s on the same page let’s follow the same steps to setup Storybook as we had in the last article. We will use the latest versions of Storybook (v6) so we can access the latest features. …


Image for post
Image for post

Cover image from, World Vector Logo

Recently I started to re-design my website, I decided to use this as an opportunity to learn some new technologies such as Gatsby, Tailwind. I also decided to try using Storybook. For this said project I used MDX to create my Storybook stories. In this article, I will show you how you can create Storybooks stories, for a Gatsby project with TailwindCSS, Typescript using MDX.

You can find an example project using this here. You can also find a demo site for said project.

This article assumes you already familiar with Typescript, TailwindCSS and Gatsby. …

About

Haseeb Majid

Software Engineer | Pythonista | Typescripter | Docker Advocate | https://haseebmajid.dev

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store