Add guides pages

bin/guide-migrator.js

@@ -1,2 +1,29 @@
 const fs = require('fs');
+const path = require('path');
+const yaml = require('json-to-pretty-yaml');
 const guides = require('./data/guides.json');
+
+guides.forEach((guide) => {
+  const { id: guideId } = guide;
+
+  const guidePath = path.join(__dirname, `../src/guides/${guideId}.md`);
+  const guideWithoutFrontmatter = fs.readFileSync(guidePath, 'utf8');
+  const guideFrontMatter = yaml.stringify({
+    layout: 'layouts/guide.njk',
+    title: guide.title,
+    description: guide.description,
+    isNew: guide.isNew,
+    type: guide.type,
+    createdAt: guide.createdAt,
+    sitemap: {
+      priority: 0.7,
+      changefreq: 'weekly',
+    },
+    tags: ['guide', `${guide.type}-guide`, `guide-sitemap`],
+  });
+
+  const guideWithFrontmatter = `---\n${guideFrontMatter}---\n\n${guideWithoutFrontmatter}`;
+
+  console.log(`Writing guide ${guideId} to disk`);
+  fs.writeFileSync(guidePath, guideWithFrontmatter);
+});

config/utils/markdown.js

@@ -20,6 +20,8 @@ const markdown = markdownIt({
   .use(markdownMark)
   .use(markdownClass, {
     h1: ['text-5xl', 'font-bold', 'mb-5', 'mt-2'],
+    h2: ['text-3xl', 'font-bold', 'mb-3', 'mt-1'],
+    h3: ['text-2xl', 'font-bold', 'mb-0', 'mt-1'],
     p: ['mb-4'],
   });
 

package.json

@@ -36,6 +36,7 @@
     "hasha": "^5.2.2",
     "html-minifier": "^4.0.0",
     "jsdom": "^20.0.1",
+    "json-to-pretty-yaml": "^1.2.2",
     "markdown-it": "^13.0.1",
     "markdown-it-anchor": "^8.6.5",
     "markdown-it-class": "^1.0.0",

src/_includes/layouts/guide.njk

@@ -0,0 +1,22 @@
+{% extends 'layouts/base.njk' %}
+
+{# Adds the syntax highlighter CSS for markdown based roadmap #}
+{% block headerAssets %}
+  {{ super() }}
+
+  {% set css %}
+    {% include "styles/prism.css" %}
+  {% endset %}
+
+  <style>{{ css | safe }}</style>
+{% endblock %}
+
+
+{% block main %}
+  <h1 class='text-4xl mt-5 mb-1 font-semibold'>{{ title }}</h1>
+  <p class='text-gray-400 mb-4'>{{ description }}</p>
+
+  <main id='main-content' class="p-1 container mx-auto max-w-[800px]">
+    {{ content | safe }}
+  </main>
+{% endblock %}

src/guides/asymptotic-notation.md

@@ -1,4 +1,20 @@
+---
+layout: "layouts/guide.njk"
+title: "Asymptotic Notation"
+description: "Learn the basics of measuring the time and space complexity of algorithms"
+isNew: false
+type: "visual"
+createdAt: "2021-04-03T15:48:21.191Z"
+sitemap:
+  priority: 0.7
+  changefreq: "weekly"
+tags:
+  - "guide"
+  - "visual-guide"
+  - "guide-sitemap"
+---
+
 Asymptotic notation is the standard way of measuring the time and space that an algorithm will consume as the input grows. In one of my last guides, I covered "Big-O notation" and a lot of you asked for a similar one for Asymptotic notation. You can find the [previous guide here](/guides/big-o-notation).
 
-[![](/guides/asymptotic-notation.png)](/guides/asymptotic-notation.png)
+[![](/assets/guides/asymptotic-notation.png)](/assets/guides/asymptotic-notation.png)
 

src/guides/avoid-render-blocking-javascript-with-async-defer.md

@@ -1,2 +1,18 @@
-[![](/guides/avoid-render-blocking-javascript-with-async-defer.png)](/guides/avoid-render-blocking-javascript-with-async-defer.png)
+---
+layout: "layouts/guide.njk"
+title: "Async and Defer Script Loading"
+description: "Learn how to avoid render blocking JavaScript using async and defer scripts."
+isNew: false
+type: "visual"
+createdAt: "2021-09-10T19:59:14.191Z"
+sitemap:
+  priority: 0.7
+  changefreq: "weekly"
+tags:
+  - "guide"
+  - "visual-guide"
+  - "guide-sitemap"
+---
+
+[![](/assets/guides/avoid-render-blocking-javascript-with-async-defer.png)](/assets/guides/avoid-render-blocking-javascript-with-async-defer.png)
 

src/guides/basic-authentication.md

@@ -1,2 +1,18 @@
-[![](/guides/basic-authentication.png)](/guides/basic-authentication.png)
+---
+layout: "layouts/guide.njk"
+title: "Basic Authentication"
+description: "Understand what is basic authentication and how it is implemented"
+isNew: false
+type: "visual"
+createdAt: "2021-05-19T20:59:14.191Z"
+sitemap:
+  priority: 0.7
+  changefreq: "weekly"
+tags:
+  - "guide"
+  - "visual-guide"
+  - "guide-sitemap"
+---
+
+[![](/assets/guides/basic-authentication.png)](/assets/guides/basic-authentication.png)
 

src/guides/basics-of-authentication.md

@@ -1,10 +1,26 @@
+---
+layout: "layouts/guide.njk"
+title: "Basics of Authentication"
+description: "Learn the basics of Authentication and Authorization"
+isNew: true
+type: "textual"
+createdAt: "2022-09-21T19:59:14.191Z"
+sitemap:
+  priority: 0.7
+  changefreq: "weekly"
+tags:
+  - "guide"
+  - "textual-guide"
+  - "guide-sitemap"
+---
+
 Our last video series was about data structures. We looked at the most common data structures, their use cases, pros and cons, and the different operations you could perform on each data structure.
 
 Today, we are kicking off a similar series for Authentication strategies where we will discuss everything you need to know about authentication and authentication strategies.
 
 In this guide today will be talking about what authentication is, and we will cover some terminology that will help us later in the series. You can watch the video below or continue reading this guide.
 
-<iframe src="https://www.youtube.com/embed/Mcyt9SrZT6g" title="Basics of Authentication" />
+<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/Mcyt9SrZT6g" title="Basics of Authentication" />
 
 ## What is Authentication?
 

src/guides/big-o-notation.md

@@ -1,4 +1,20 @@
+---
+layout: "layouts/guide.njk"
+title: "Big-O Notation"
+description: "Easy to understand explanation of Big-O notation without any fancy terms"
+isNew: false
+type: "visual"
+createdAt: "2021-03-15T15:48:21.191Z"
+sitemap:
+  priority: 0.7
+  changefreq: "weekly"
+tags:
+  - "guide"
+  - "visual-guide"
+  - "guide-sitemap"
+---
+
 Big-O notation is the mathematical notation that helps analyse the algorithms to get an idea about how they might perform as the input grows. The image below explains Big-O in a simple way without using any fancy terminology. 
 
-[![](/guides/big-o-notation.png)](/guides/big-o-notation.png)
+[![](/assets/guides/big-o-notation.png)](/assets/guides/big-o-notation.png)
 

src/guides/character-encodings.md

@@ -1,2 +1,18 @@
-[![](/guides/character-encodings.png)](/guides/character-encodings.png)
+---
+layout: "layouts/guide.njk"
+title: "Character Encodings"
+description: "Covers the basics of character encodings and explains ASCII vs Unicode"
+isNew: false
+type: "visual"
+createdAt: "2021-05-14T20:59:14.191Z"
+sitemap:
+  priority: 0.7
+  changefreq: "weekly"
+tags:
+  - "guide"
+  - "visual-guide"
+  - "guide-sitemap"
+---
+
+[![](/assets/guides/character-encodings.png)](/assets/guides/character-encodings.png)
 

src/guides/ci-cd.md

@@ -1,4 +1,20 @@
+---
+layout: "layouts/guide.njk"
+title: "What is CI and CD?"
+description: "Learn the basics of CI/CD and how to implement that with GitHub Actions."
+isNew: false
+type: "visual"
+createdAt: "2021-07-09T19:59:14.191Z"
+sitemap:
+  priority: 0.7
+  changefreq: "weekly"
+tags:
+  - "guide"
+  - "visual-guide"
+  - "guide-sitemap"
+---
+
 The image below details the differences between the continuous integration and continuous delivery. Also, here is the [accompanying video on implementing that with GitHub actions](https://www.youtube.com/watch?v=nyKZTKQS_EQ).
 
-[![](/guides/ci-cd.png)](/guides/ci-cd.png)
+[![](/assets/guides/ci-cd.png)](/assets/guides/ci-cd.png)
 

src/guides/design-patterns-for-humans.md

@@ -1,3 +1,19 @@
+---
+layout: "layouts/guide.njk"
+title: "Design Patterns for Humans"
+description: "A language agnostic, ultra-simplified explanation to design patterns"
+isNew: false
+type: "textual"
+createdAt: "2019-01-23T17:00:00.860Z"
+sitemap:
+  priority: 0.7
+  changefreq: "weekly"
+tags:
+  - "guide"
+  - "textual-guide"
+  - "guide-sitemap"
+---
+
 Design patterns are solutions to recurring problems; **guidelines on how to tackle certain problems**. They are not classes, packages or libraries that you can plug into your application and wait for the magic to happen. These are, rather, guidelines on how to tackle certain problems in certain situations.
 
 > Design patterns are solutions to recurring problems; guidelines on how to tackle certain problems

src/guides/dhcp-in-one-picture.md

@@ -1,2 +1,18 @@
-[![](/guides/dhcp.png)](/guides/dhcp.png)
+---
+layout: "layouts/guide.njk"
+title: "DHCP in One Picture"
+description: "Here is what happens when a new device joins the network."
+isNew: false
+type: "visual"
+createdAt: "2021-04-28T15:48:21.191Z"
+sitemap:
+  priority: 0.7
+  changefreq: "weekly"
+tags:
+  - "guide"
+  - "visual-guide"
+  - "guide-sitemap"
+---
+
+[![](/assets/guides/dhcp.png)](/assets/guides/dhcp.png)
 

src/guides/dns-in-one-picture.md

@@ -1,3 +1,19 @@
+---
+layout: "layouts/guide.njk"
+title: "DNS in One Picture"
+description: "Quick illustrative guide on how a website is found on the internet."
+isNew: false
+type: "visual"
+createdAt: "2018-12-04T17:00:00.860Z"
+sitemap:
+  priority: 0.7
+  changefreq: "weekly"
+tags:
+  - "guide"
+  - "visual-guide"
+  - "guide-sitemap"
+---
+
 DNS or Domain Name System is one of the fundamental blocks of the internet. As a developer, you should have at-least the basic understanding of how it works. This article is a brief introduction to what is DNS and how it works.
 
 DNS at its simplest is like a phonebook on your mobile phone. Whenever you have to call one of your contacts, you can either dial their number from your memory or use their name which will then be used by your mobile phone to search their number in your phone book to call them. Every time you make a new friend, or your existing friend gets a mobile phone, you have to memorize their phone number or save it in your phonebook to be able to call them later on. DNS or Domain Name System, in a similar fashion, is a mechanism that allows you to browse websites on the internet. Just like your mobile phone does not know how to call without knowing the phone number, your browser does not know how to open a website just by the domain name; it needs to know the IP Address for the website to open. You can either type the IP Address to open, or provide the domain name and press enter which will then be used by your browser to find the IP address by going through several hoops. The picture below is the illustration of how your browser finds a website on the internet.

src/guides/history-of-javascript.md

@@ -1,3 +1,19 @@
+---
+layout: "layouts/guide.njk"
+title: "Brief History of JavaScript"
+description: "How JavaScript was introduced and evolved over the years"
+isNew: false
+type: "textual"
+createdAt: "2017-10-28T17:00:00.860Z"
+sitemap:
+  priority: 0.7
+  changefreq: "weekly"
+tags:
+  - "guide"
+  - "textual-guide"
+  - "guide-sitemap"
+---
+
 Around 10 years ago, Jeff Atwood (the founder of stackoverflow) made a case that JavaScript is going to be the future and he coined the “Atwood Law” which states that *Any application that can be written in JavaScript will eventually be written in JavaScript*. Fast-forward to today, 10 years later, if you look at it it rings truer than ever. JavaScript is continuing to gain more and more adoption.
 
 ### JavaScript is announced

src/guides/http-basic-authentication.md

@@ -1,10 +1,27 @@
+---
+layout: "layouts/guide.njk"
+title: "HTTP Basic Authentication"
+description: "Learn what is HTTP Basic Authentication and how to implement it in Node.js"
+isNew: true
+type: "textual"
+createdAt: "2022-10-03T19:59:14.191Z"
+sitemap:
+  priority: 0.7
+  changefreq: "weekly"
+tags:
+  - "guide"
+  - "textual-guide"
+  - "guide-sitemap"
+---
+
 Our last guide was about the [basics of authentication](/guides/basics-of-authentication), where we discussed authentication, authorization, types of authentication, authentication factors, authentication strategies, and so on.
 
 In this guide today, we will be learning about basic authentication, and we will see how we can implement Basic Authentication in Node.js. We have a [visual guide on the basic authentication](/guides/basic-authentication) and an illustrative video, watch the video below or continue reading:
 
-<iframe src="https://www.youtube.com/embed/mwccHwUn7Gc" title="HTTP Basic Authentication" />
+<iframe class="w-full aspect-video mb-5" src="https://www.youtube.com/embed/mwccHwUn7Gc" title="HTTP Basic Authentication"></iframe>
 
 ## What is Basic Authentication?
+
 Given the name "Basic Authentication", you should not confuse Basic Authentication with the standard username and password authentication. Basic authentication is a part of the HTTP specification, and the details can be [found in the RFC7617](https://www.rfc-editor.org/rfc/rfc7617.html).
 
 Because it is a part of the HTTP specifications, all the browsers have native support for "HTTP Basic Authentication". Given below is the screenshot from the implementation in Google Chrome.