
# Initial Set-up

This is a series of blog posts which detail how I'm setting up my website with the t3 stack. If you haven't read the previous articles, I suggest looking at

- Part 1. : [Redesigning My Website with the t3-stack](https://www.ivanleo.com/blog/setting-up-the-new-blog)
- Part 2 : [Displaying Individual Articles](https://www.ivanleo.com/blog/displaying-individual-articles)
- Part 3 : [Adding a table of contents to our blog articles](https://www.ivanleo.com/blog/adding-a-table-of-contents-to-blog-articles)
- Part 4 : [Tidying Up the final product](https://www.ivanleo.com/blog/tidying-up-the-article-page-and-adding-ssg-to-the-home-page)

# Background

Recently I chanced upon the t3 stack when browsing upon twitter so I decided to work on implementing it by creating a new t3 app using the `create-t3-app` npm package. However, before I could do much, I found this specific error when building the app on Vercel.

![Screenshot 2022-07-27 at 2 32 18 PM](https://user-images.githubusercontent.com/45760326/181177510-2f4e5d51-04f8-43fb-99f5-f573944ce8e6.png)

After doing a bit of sleuthing within the repo that `create-t3-app` had created, I traced it down to a specific file, that is `./src/env/schema.mjs` which had a line of code as 

```mjs
// @ts-check
import { z } from "zod";

/**
 * Specify your server-side environment variables schema here.
 * This way you can ensure the app isn't built with invalid env vars.
 */
export const serverSchema = z.object({
  DATABASE_URL: z.string().url(),
  NODE_ENV: z.enum(["development", "test", "production"]),
  NEXTAUTH_SECRET: z.string(),
   NEXTAUTH_URL: z.string().url(),
  DISCORD_CLIENT_ID: z.string(),
  DISCORD_CLIENT_SECRET: z.string(),
});
...

```

This was then being called in `client.mjs` and `server.mjs` during the build process which led to the error being thrown. The fix is outlined below.

```mjs
export const serverSchema = z.object({
  // DATABASE_URL: z.string().url(),
  NODE_ENV: z.enum(["development", "test", "production"]),
  // NEXTAUTH_SECRET: z.string(),
  // NEXTAUTH_URL: z.string().url(),
  // DISCORD_CLIENT_ID: z.string(),
  // DISCORD_CLIENT_SECRET: z.string(),
});

```


Here are some todos which I thought would be crucial to executing this project

- [ ] Figuring out how to hook github issues to NextJS CMS
- [ ] Implementing ISR for my NextJS Application
- [ ] Utilising tweets in my app

so without further ado, I got off to the races and begun working on this new project. 

# Github Issues as a CMS

For this specific portion, we'll be using Github's official npm package `octokit`  so run the following command 

```
npm install @octokit/graphql
```

before starting the rest of this section 

## Setting up a personal access token

> **Note** : A personal access token is used by Github to allow you to access information about your repositories and code. You'll need it for this particular project in order to use Github Issues as a CMS

What you'll want to do is to first go to github.com and then navigate to your settings and click on **Developer Settings**

<img width="217" alt="Screenshot 2022-07-27 at 2 25 58 PM" src="https://user-images.githubusercontent.com/45760326/181176531-10cf6e85-b705-4e0f-9ff8-52f477b4b78b.png">

You'll then want to click on **Personal Access Tokens**

<img width="798" alt="Screenshot 2022-07-27 at 2 27 21 PM" src="https://user-images.githubusercontent.com/45760326/181176744-3628ab4a-eccd-468d-88e6-4de8eb192754.png">

Lastly, you'll need to then configure your access token so it only has access to **public_repo** as seen blow

<img width="554" alt="Screenshot 2022-07-27 at 2 30 19 PM" src="https://user-images.githubusercontent.com/45760326/181177152-4feb1625-2b4a-4e39-8975-eb47fa0371c5.png">

You should then update this token in your local .env file

![Screenshot 2022-07-27 at 2 31 03 PM](https://user-images.githubusercontent.com/45760326/181177274-f4f4f87d-9325-4c4d-8ec1-9d9716052386.png)

> Don't forget to restart your development server so that the new .env file is loaded in.

## Configuring the TRPC router

If you've used the `create-t3-app` in order to configure your project, everything should be set-up nicely for you. Let's try to make a github-specific in this case. Go to `src/server/router/index.ts` and you'll find the following code

```
// src/server/router/index.ts
import { createRouter } from "./context";
import superjson from "superjson";

import { exampleRouter } from "./example";
import { protectedExampleRouter } from "./protected-example-router";

export const appRouter = createRouter()
  .transformer(superjson)
  .merge("example.", exampleRouter)
  .merge("question.", protectedExampleRouter);

// export type definition of API
export type AppRouter = typeof appRouter;
```

> If you've ever used express before, you'll realise that TRPC works remarkably similar. We can ensure a modular separation of individual routes by simply working with the `.merge` function. Let's create a new router to handle our github issues as seen below

```js
import { createRouter } from "./context";
import { z } from "zod";

export const githubRouter = createRouter().query("hello", {
  input: z
    .object({
      text: z.string(),
    })
    .nullish(),
  resolve({ input }) {
    const { text } = input;
    return {
      greeting: `Hello from github router. You indicated ${text}`,
    };
  },
});
```

We can now attach this to our main `appRouter` in our `index.ts` file as seen below

```js
// src/server/router/index.ts
import { createRouter } from "./context";
import superjson from "superjson";

import { githubRouter } from "./github-router";

export const appRouter = createRouter()
  .transformer(superjson)
  .merge("github.", githubRouter);

// export type definition of API
export type AppRouter = typeof appRouter;
``` 

and call it on the frontend by modifying `index.tsx` as 

```
import type { NextPage } from "next";
import Head from "next/head";
import { trpc } from "../utils/trpc";

type TechnologyCardProps = {
  name: string;
  description: string;
  documentation: string;
};

const Home: NextPage = () => {
  const hello = trpc.useQuery(["github.hello", { text: "from tRPC" }]);
  console.log(hello?.data?.greeting);

  return <>Welcome to Tailwind</>;
};

export default Home;
```

This gives us the following output in our console, indicating that we have successfully linked the frontend and our backend.

<img width="469" alt="Screenshot 2022-07-27 at 2 51 17 PM" src="https://user-images.githubusercontent.com/45760326/181180782-e0fd3bc3-c16c-4448-8a18-544e2af100ad.png">

> The reason why we have four different console logs is because `create-t3-app` automatically enables SSR for us so the content is automatically rendered on the server before being sent to the frontend, thus your frontend code runs twice.

## Getting a list of posts 

Let's first get our list of issues from github. You can do so by using the following code snippet below

```js
import { graphql } from "@octokit/graphql";

const graphqlWithAuth = graphql.defaults({
  headers: {
    authorization: `token ${process.env.GITHUB_TOKEN}`,
  },
});

export const getPosts = async () => {
  const { repository } = await graphqlWithAuth(`
        {
          repository(owner: <your github username>, name: <the repository you're importing the issues from>) {
            issues(last: 50) {
              edges {
                node {
                    title
                    createdAt
                    labels(first: 3) {
                        nodes{
                            name
                        }
                    }
                }
              }
            }
          }
        }
      `);

  console.log(repository);

  return repository;
};
```

> **Note** : You can find more information on the API at the [github documentation](https://docs.github.com/en/graphql/reference/objects#label).


 In my specific issue list, I have two tags `draft` and `published`. I only want to get a list of the issues that are tagged with the `published` tag. We can do so by performing a filter over the returned object that we obtain

```
export const getPublishedPosts: () => Promise<githubPostTitle[]> = async () => {
  const { repository } = await graphqlWithAuth(`
        {
          repository(owner: <your github username> , name: <your repository where the issues are in>) {
            
            issues(last: 50) {
              edges {
                node {
                    title
                    createdAt
                    labels(first: 3) {
                        nodes{
                            name
                        }
                    }
                }
              }
            }
          }
        }
      `);

  return repository.issues.edges
    .map(({ node }) => {
      return { ...node };
    })
    .filter((post: githubPostTitle) => {
      return post.labels.nodes[0].name === "published";
    });
};
```

We also add in a type we define called `githubPostTitle` in the code as seen below

```
type githubPostStatus = "draft" | "published";

type githubPostTitle = {
  createdAt: string;
  title: string;
  labels: {
    nodes: [{ name: githubPostStatus }];
  };
};
```

Now all we have to do is to call this in our `github-router.ts` file which stores our github router and we have a route we can call from our frontend that displays our list of posts as seen below.

> **Note: ** A router in this case is simply a collection of queries and mutations that we define. Each query and mutation has an associated resolve method in order to get a specific output. We can ensure we have typesafe APIs by using `zod` which has a number of wrapper functions in order for us to use.

```js
import { createRouter } from "./context";
import { z } from "zod";
import { getPublishedPosts, githubPostTitle } from "../../utils/github";

export const githubRouter = createRouter().query("get-posts", {
  async resolve({ input }) {
    const repositoryInformation: githubPostTitle[] = await getPublishedPosts();
    return {
      posts: repositoryInformation,
    };
  },
});

```

## Rendering our posts on the frontend

We can now call our specific route by using the custom react hook `useQuery`

```
const posts = trpc.useQuery(["github.get-posts"]);
```

This in turn returns objects that look like this

```
posts : [
    {
        "title": "Setting up a development enviroment",
        "createdAt": "2022-07-27T06:14:56Z",
        "labels": {
            "nodes": [
                {
                    "name": "published"
                }
            ]
        }
    },
    ...
]
```

Notice that once we added the filter, all our issues tagged as `draft` disappeared. We can then map over this list of posts to render if on the screen

```
import type { NextPage } from "next";
import Head from "next/head";
import { trpc } from "../utils/trpc";

const Home: NextPage = () => {
  const posts = trpc.useQuery(["github.get-posts"]);

  return (
    <>
      <h1>Posts</h1>
      {posts.data?.posts?.map((item) => {
        return <p key={item.title}>{item.title}</p>;
      })}
    </>
  );
};

export default Home;
```

which in turn produces 

<img width="796" alt="Screenshot 2022-07-27 at 4 01 24 PM" src="https://user-images.githubusercontent.com/45760326/181194422-726a7bb2-7101-469b-ad94-8547630461fc.png">

Voila! Now we've hooked up our github issues to our NextJS frontend using TRPC. In the next part of this series, we'll move on to writing out a custom page that will be able to display the markdown in each specific page properly. 




published

Setting up the new Blog

---
slug: dev-enviroment-2022
canonical_url: https://www.ivanleomk.com/dev-enviroment-2022
categories: ["Technical", "Software Engineering"]
---

Here is the quick tl;dr version for you to get up and running if you just need a solution.

# Basic Tools

## Install XCode Tools

```js
xcode-select --install
topo
```

## Verify that Git is installed

```
git -- version
```

You should see this output in the terminal once this is set-up

```
git version 2.24.3 (Apple Git-128)
```

## Install VSCode

You can do so by heading to [the official website](https://code.visualstudio.com/) and downloading the build from them. This should allow you to get quickly set up.

## Install Homebrew

```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

You can verify that this is the correct command by looking at the official [Home Brew website](https://brew.sh).

## Installing Node

I've found that it's more useful to install NVM ( Node Version Manager ) instead of just plain old vanilla Node. This helps you to potentially avoid issues when working with packages which are built with older versions of node in mind. Here are the steps as follows

- Install NVM

```
brew install nvm
```

- Install the version of NVM which you wish to use

```
nvm install node #installs the latest version of Node
nvm install [specific version]
```

- Update your bashrc file

```
mkdir ~/.nvm
vim ~/.bash_profile
```

and copy the following lines into your bash file

```
export NVM_DIR = ~/.nvm
source $(brew --prefix nvm)/nvm.sh
```

Once you've pasted these in, press `:wq` to exit and save the changes

- Next configure a default version of node

```
nvm alias default [version_here]
```

where `[version_here]` stands for whichever version you'd like to configure as the default one. You can find a list of versions by using the command `nvm ls`.

and with that you have the main things installed!


Setting up a development enviroment

# Current State

This is a series of blog posts which detail how I'm setting up my website with the t3 stack. If you haven't read the previous articles, I suggest looking at

- Part 1. : [Redesigning My Website with the t3-stack](https://www.ivanleo.com/blog/setting-up-the-new-blog)
- Part 2 : [Displaying Individual Articles](https://www.ivanleo.com/blog/displaying-individual-articles)
- Part 3 : [Adding a table of contents to our blog articles](https://www.ivanleo.com/blog/adding-a-table-of-contents-to-blog-articles)
- Part 4 : [Tidying Up the final product](https://www.ivanleo.com/blog/tidying-up-the-article-page-and-adding-ssg-to-the-home-page)

 However, now we want to do something a bit different, we want to be able to render these articles and dynamically generate pages that correspond to each of these articles.

For reference here's how the main page looks like now

![image](https://user-images.githubusercontent.com/45760326/181430590-eff1da91-e75f-42d4-9a22-4dd5f1c837c0.png)

It's not super inspiring but we've got it working such that we only list articles that are labelled as `published`. **This is a big step for us**. 

Today in this article, we have two main goals

- Using Static Generation to create individual pages for each article
- Rendering out the content we've written in markdown as HTML in the page


# Creating individual pages

## Installing New Libraries

In this walkthrough, we will be using the following libraries 

- `unified`
- `gray-matter`
- `remark-parse`
- `remark-rehype`
- `rehype-stringify`

So let's go ahead and install the libraries with `npm` as seen below.

```
npm i - s unified gray-matter remark-parse remark-rehype rehype-stringify
```

## Walkthrough

In NextJS, we are able to create dynamic routes, which are essentially routes that are generated.  Let's start by creating a file `src/pages/blog/[issueId].tsx`. By using the `[...]` syntax, we are able to indicate to NextJS that we want to create a dynamic route.

In this case, what this means is that the following routes

- <url>/blog/2
- <url>/blog/thisisarandomstring

will all match and be rendered by the [issueId] file. 

> How do we then know what are valid routes and invalid routes if any random combination that matches the specification is able to be rendered?

The answer to that is  a function called `getStaticPaths`. This tells NextJS what are the paths that we wish to support and in turn it will do the matching on the backend for us. If we attempt to access an invalid path, it will simply return a `404 Page`. Let's first begin by writing out a quick function which allows us to get a list of all the individual Issue Ids.

```js
export const getPostIds: () => Promise<number[]> = async () => {
  const { repository } = await graphqlWithAuth(
    `query getPostIds {
      repository(owner: <Your Github Username> , name: <Your Repository name>) {
        issues(last: 200) {
            nodes {
                number
            }
        }
      }
  }
`,
    {}
  );

  // Quick Type Definition here
  return repository.issues.nodes.map(
    (issue: { number: string }) => parseInt(issue.number)
  );
};
```

Let's breakdown what is happening in this specific function

```graphql
 repository(owner: <Your Github Username> , name: <Your Repository name>) {
        issues(last: 200) {
            nodes {
                number
            }
        }
      }
  }
```

> Recall that Github Issues can be identified by a unique number. **This is a property which exists on the Issue Object in the Github API** .

We extract out the list of all existing github issue numbers and transform it into an array. Since I currently have 2 published articles, this gives 

```js
[1,2]
```

We specify that we want the issues from <Your Repository Name> which is owned by <Your Github Username> and that allows us to get the correct issues we are looking for.

Now that we have a list of post Ids, we can now generate our list of paths using `getStaticPaths` as seen below

```js
export async function getStaticPaths() {
  const posts = await getPostIds();
  const paths = posts.map((issueId) => `/blog/${issueId}`);

  return {
    paths,
    fallback: false,
  };
}
```

Now that we have indicated a list of paths, we need to now tell NextJS how to render each specific page, that's where `getStaticProps` comes in handy. 

> Note : I previously made the mistake of writing getStaticProps using my NextJS APIs. This caused the production build to fail **multiple times**. Please don't make the mistake I did and just write a wrapper function around the code that handles the server communication. It will save you years of pain.

But before we use `getStaticProps`, we need to first write a small function that will allow us to obtain the metadata and raw markdown for our code given an Issue Id. This can be done by making another API call to the GraphQL API as seen below

```js
export const getPostByIssueId: (
  issueId: number
) => Promise<githubPost> = async (issueId) => {
  const { repository } = await graphqlWithAuth(
    `query getPost($number: Int!){
      repository(owner: <Your Github Username>, name: <Your Github Repository>) {
        issue(number: $number) {
            title
            number
            createdAt
            body
        }
      }
  }
`,
    {
      number: Number(issueId),
    }
  );

  return repository.issue;
};
```

with the corresponding type definition of `githubPost` seen below

```ts
export type githubPost = {
  title: string;
  number: string;
  createdAt: string;
  body: string;
};
```

We can then utilise this in our main component as seen below

```js
export async function getStaticProps({ params }: BlogPostParams) {
  const { issueId } = params;
  const post = await getPostByIssueId(parseInt(issueId));
  const { title, body } = post;
  const { content: parsedBody } = matter(body);

  const content = await unified()
    .use(remarkParse)
    .use(remarkRehype, { allowDangerousHtml: true })
    .use(rehypeStringify, { allowDangerousHtml: true })
    .process(parsedBody);

  return {
    props: {
      content: String(content),
    },
  };
}

export async function getStaticPaths() {
  const posts = await getPostIds();
  const paths = posts.map((issueId) => `/blog/${issueId}`);

  return {
    paths,
    fallback: false,
  };
}
```

Where the following chunk basically takes a raw markdown text and rehydrates it in order to generate HTML

```js
  const { title, body } = post;
  const { content: parsedBody } = matter(body);

  const content = await unified()
    .use(remarkParse)
    .use(remarkRehype, { allowDangerousHtml: true })
    .use(rehypeStringify, { allowDangerousHtml: true })
    .process(parsedBody);

```

We can now put together a simple initial component which gives us the following output

```js
import { getPostByIssueId, getPostIds } from "../../utils/github";
import matter from "gray-matter";

import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import rehypeStringify from "rehype-stringify";
import Link from "next/link";

type BlogPostProps = {
  title: string;
  content: string;
};

type BlogPostParams = {
  params: { issueId: string };
};

export default function BlogPost({ title, content }: BlogPostProps) {
  return (
    <>
      <h1>{title}</h1>
      <div
        dangerouslySetInnerHTML={{
          __html: content,
        }}
      />
    </>
  );
}

export async function getStaticProps({ params }: BlogPostParams) {
  const { issueId } = params;
  const post = await getPostByIssueId(parseInt(issueId));
  const { title, body } = post;
  const { content: parsedBody } = matter(body);

  const content = await unified()
    .use(remarkParse)
    .use(remarkRehype, { allowDangerousHtml: true })
    .use(rehypeStringify, { allowDangerousHtml: true })
    .process(parsedBody);

  return {
    props: {
      content: String(content),
    },
  };
}

export async function getStaticPaths() {
  const posts = await getPostIds();
  const paths = posts.map((issueId) => `/blog/${issueId}`);

  return {
    paths,
    fallback: false,
  };
}

```

Which generates the following output
<img width="1286" alt="Screenshot 2022-07-28 at 4 12 10 PM" src="https://user-images.githubusercontent.com/45760326/181455888-8cd9ec8b-6e7b-4c1e-9409-740b81865195.png">

So now that we've got the content, let's work on styling the specific page now.

# Styling the page

For this specific portion, we'll be using Tailwind to style our article section. If you didn't install TailwindCSS, please follow the instructions [here](https://tailwindcss.com/docs/guides/nextjs) and get it set up first.

> Tailwind provides a useful utility class called prose which applies automatic styles for us into the rendered HTML so that we don't need to generate custom rules.

But before we can plug it in, we need to install a new plugin called `@tailwindcss/typography`. You can read about it [here](https://tailwindcss.com/docs/typography-plugin). Execute the command below to install the plugin

```
npm install -D @tailwindcss/typography
```

and then modify your `tailwind.config.js` file accordingly as seen below

```js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [require("@tailwindcss/typography")],
};
```

Notice here that we've added in `@tailwindcss/typography` in the plugins section. We can then rewrite our existing component as 

```ts
export default function BlogPost({ title, content }: BlogPostProps) {
  return (
    <>
      <Link
        href={{
          pathname: "/",
        }}
      >
        <p> ← Go Back Home</p>
      </Link>
   // We Added This!
      <div className="prose mx-auto">
        <h1>{title}</h1>
        <div
          dangerouslySetInnerHTML={{
            __html: content,
          }}
        />
      </div>
    </>
  );
}
```

which gives the following output as 

<img width="545" alt="Screenshot 2022-07-28 at 4 16 30 PM" src="https://user-images.githubusercontent.com/45760326/181456688-51ec376c-d126-4f6b-aedc-a1de6b553840.png">

Voila! Now we have basic styling for any article that we write in our github issues as long as we tag it with the `published` label. In the next article, we'll look at adding comments to our new blog by using the comments section in the issue itself.

Displaying individual articles

# Initial Set Up

This is a series of blog posts which detail how I'm setting up my website with the t3 stack. If you haven't read the previous articles, I suggest looking at 

- Part 1. : [Redesigning My Website with the t3-stack](https://www.ivanleo.com/blog/setting-up-the-new-blog)
- Part 2 : [Displaying Individual Articles](https://www.ivanleo.com/blog/displaying-individual-articles)
- Part 3 : **[Adding a table of contents to our blog articles](https://www.ivanleo.com/blog/adding-a-table-of-contents-to-blog-articles)**
- Part 4 : [Tidying Up the final product](https://www.ivanleo.com/blog/tidying-up-the-article-page-and-adding-ssg-to-the-home-page)

The goal of this specific blog post is simple, we want to write up a component which will parse our rendered markdown HTML and generate a automated table of contents for us. 

> **Quick Mention** : Most of the code here is adapted from [Emma Goto's excellent article on adding content tables](https://www.emgoto.com/react-table-of-contents/). I've modified and updated code to make it work for the t3 stack.

## CSS Set-Up

Let's first set up our CSS so that it works nicely. For reference this is my current `[issueId].tsx` file.

```js
import { getPostByIssueId, getPostIds } from "../../utils/github";
import matter from "gray-matter";
import Link from "next/link";
import { renderToHTML, slugify } from "../../utils/string";
import { useEffect } from "react";

type BlogPostProps = {
  title: string;
  content: string;
  createdAt: string;
};

type BlogPostParams = {
  params: { issueId: string };
};

export default function BlogPost({ title, content, createdAt }: BlogPostProps) {
  return (
    <>
      <Link
        href={{
          pathname: "/",
        }}
      >
        <p> ← Go Back Home</p>
      </Link>
      <div className="flex items-center justify-center flex-col ">
        <h1 className="mb-10">{title}</h1>
        <div className="xl:grid xl:grid-cols-7 xl:w-full xl:max-w-7xl">
          <div
            id="content"
            className="max-w-sm md:max-w-lg lg:max-w-xl xl:max-w-4xl xl:col-span-4 prose xl:prose-lg px-4"
            dangerouslySetInnerHTML={{
              __html: content,
            }}
          />
          <div
      className="xl:col-span-3 mx-10 bg-red-400 sticky"
      style={{
        top: "60px",
        maxHeight: "calc(100vh - 90px)",
        bottom: "30px",
      }}
    >
      <h1>Table of Contents</h1>
    </div>
        </div>
      </div>
    </>
  );
}

export async function getStaticProps({ params }: BlogPostParams) {
  const { issueId } = params;
  const post = await getPostByIssueId(parseInt(issueId));
  const { title, body, createdAt } = post;

  const { content: parsedBody } = matter(body);

  const content = await renderToHTML(parsedBody);

  return {
    props: {
      content: String(content),
      title,
      createdAt,
      rawContent: body,
    },
  };
}

export async function getStaticPaths() {
  const posts = await getPostIds();
  const paths = posts.map((issueId) => `/blog/${issueId}`);

  return {
    paths,
    fallback: false,
  };
}

```

This should give you a web page which looks somewhat like this

<img width="780" alt="Screenshot 2022-07-31 at 7 49 03 AM" src="https://user-images.githubusercontent.com/45760326/182003825-8cff886b-d91f-485e-9c69-2ecc3293f12f.png">

Now let's look at the list of things to do

1. [ ] We need to dynamically set IDs for each H1 and H2 element which are equal to their content
2. [ ] We need to then grab this list of IDs and convert it to a table of contents
3. [ ] We then need to track the specific div where we are at and highlight the name of that div
4. [ ] We need to allow users to be able to click to that specific div upon clicking it

Let's tackle them 1 by 1

## Setting IDs for H1 and H2 elements which are slugs of their content

I first wrote up a small function to help convert my headings to slugs as seen below

```js
export const slugify = (text: string) => {
  return text
    .toString()
    .toLowerCase()
    .replace(/\s+/g, "-") // Replace spaces with -
    .replace(/[^\w-]+/g, "") // Remove all non-word chars
    .replace(/--+/g, "-") // Replace multiple - with single -
    .replace(/^-+/, "") // Trim - from start of text
    .replace(/-+$/, ""); // Trim - from end of text
};
```

I chose to store this in a small file I call `string.ts`

Most articles online tend to add the IDs dynamically when generating the web page or when parsing the data using remark. I couldn't really seem to get that to work so I used a quick document query selector  in order to set these IDs 

```js
document
      .querySelector("#content")
      ?.querySelectorAll("h1,h2")
      .forEach((elem, id) => {
        //@ts-ignore
        const newId = slugify(elem.outerText);
        elem.setAttribute("id", newId);
      });
```

Note a few things here.

- There is a `//@ts-ignore` snippet in the codebase which tells typescript to ignore the possibility that each element might not have the outerText value. 
- We are selecting all `H1s` and `H2`s which are present within a div with the id of content. This was set by me by modifying my react code as `  <div  id="content" ... ` 
- We are seting the IDs by calling the `slugify` function on the text content of each of our H1s and H2s. 

This can then be inserted into a useEffect hook as seen below

```js
useEffect(() => {
    document
      .querySelector("#content")
      ?.querySelectorAll("h1,h2")
      .forEach((elem, id) => {
        //@ts-ignore
        const newId = slugify(elem.outerText);
        elem.setAttribute("id", newId);
      });
},[])
```

This ensures that we only run this code **on the client side, and not the server side when it's being rendered**.

## Generating a list of headings

Now that we've successfully managed to set our IDs, we now need to generate a list of headings that we currently have for our article. This will allow us to ultimately generate out table of contents. 

What we are aiming for however, is a nested table of contents, much like what you see below.



<img width="350" alt="Screenshot 2022-07-31 at 10 01 14 AM" src="https://user-images.githubusercontent.com/45760326/182006466-4d883a94-9e5f-4458-a818-f0992db4f770.png">

Where H1 elements have no nesting and H2 elements have some slight left padding . We can first write out a quick type for this nested and recursive data structure as 

```ts
type PostHeaderLink = {
  text: string;
  id: string;
  children: PostHeaderLink[];
};
```

An example of this nested structure when applied to [this article](https://www.ivanleo.com/blog/1) is seen below

```
[
    {
        "id": "initial-set-up",
        "text": "Initial Set-up",
        "children": []
    },
    {
        "id": "github-issues-as-a-cms",
        "text": "Github Issues as a CMS",
        "children": [
            {
                "id": "setting-up-a-personal-access-token",
                "text": "Setting up a personal access token",
                "children": []
            },
            {
                "id": "configuring-the-trpc-router",
                "text": "Configuring the TRPC router",
                "children": []
            },
            {
                "id": "getting-a-list-of-posts",
                "text": "Getting a list of posts",
                "children": []
            },
            {
                "id": "rendering-our-posts-on-the-frontend",
                "text": "Rendering our posts on the frontend",
                "children": []
            }
        ]
    }

```

We can generate this by simply applying a reduce to our list of headings since H2s will always follow the H1 they are under

```js
const headingElements = Array.from(
      //@ts-ignore
      document.querySelector("#content")?.querySelectorAll("h1,h2")
      //@ts-ignore
    ).reduce((acc, heading) => {
      //@ts-ignore
      const { nodeName, innerText } = heading;
      switch (nodeName) {
        case "H1":
          return [
            ...acc,
            { id: slugify(innerText), text: innerText, children: [] },
          ];
        case "H2":
          const newAcc = [...acc];
          //@ts-ignore
          newAcc[newAcc.length - 1].children.push({
            id: slugify(innerText),
            text: innerText,
            children: [],
          });
          return newAcc;
      }
    }, []);
```

> **Note** : We use the `...` spread operator in order to create a new copy of the acc to prevent potential memory errors

This in turn gives rise to the final hook as

```js
import { useState, useEffect } from "react";
import { PostHeaderLink } from "../components/PostHeaderLink";
import { slugify } from "../utils/string";

const useHeadingsData = () => {
  const [nestedHeadings, setNestedHeadings] = useState<PostHeaderLink[]>([]);

  useEffect(() => {
    document
      .querySelector("#content")
      ?.querySelectorAll("h1,h2")
      .forEach((elem, id) => {
        //@ts-ignore
        const newId = slugify(elem.outerText);
        elem.setAttribute("id", newId);
      });

    // A bit kooky stuff, just ts-ignore and move on
    const headingElements = Array.from(
      //@ts-ignore
      document.querySelector("#content")?.querySelectorAll("h1,h2")
      //@ts-ignore
    ).reduce((acc, heading) => {
      //@ts-ignore
      const { nodeName, innerText } = heading;
      switch (nodeName) {
        case "H1":
          return [
            ...acc,
            { id: slugify(innerText), text: innerText, children: [] },
          ];
        case "H2":
          const newAcc = [...acc];
          //@ts-ignore
          newAcc[newAcc.length - 1].children.push({
            id: slugify(innerText),
            text: innerText,
            children: [],
          });
          return newAcc;
      }
    }, []);
    //@ts-ignore
    setNestedHeadings(headingElements);
  }, []);

  return { nestedHeadings };
};

export default useHeadingsData;
```

We can then write up a component which generates a table of contents recursively as seen below

```js
import React from "react";

export type PostHeaderLink = {
  text: string;
  id: string;
  children: PostHeaderLink[];
};

type PostHeaderLinkProps = {
  links: PostHeaderLink[];
};

const PostHeaderLink = ({ links  }: PostHeaderLinkProps) => {
  return (
    <>
      {links &&
        links.map(({ id, children, text }, index) => {
          return (
            <li className="mt-5" key={id}>
              <a
                href={`#${id}`}
                onClick={(e) => {
                  e.preventDefault();
                  //@ts-ignore
                  document.querySelector(`#${id}`).scrollIntoView({
                    behavior: "smooth",
                  });
                }}
              >
                {text}
              </a>
              <ul className="pl-10">
                {children.map((child, index) => {
                  return (
                    <PostHeaderLink
                      links={[child]}
                      activeId={activeId}
                      key={index}
                    />
                  );
                })}
              </ul>
            </li>
          );
        })}
    </>
  );
};

export default PostHeaderLink;
```

With this, we now have our table of contents generated! You should be able to get a webpage that looks something like this

<img width="788" alt="Screenshot 2022-07-31 at 5 13 43 PM" src="https://user-images.githubusercontent.com/45760326/182019401-760f65e6-e9d1-4f65-86dc-9ce75a7b513e.png">

> I've taken Emma Goto's original code for a hook called `useIntersectionObserver` which allows us to track the most recent
which you can read  [here](https://www.emgoto.com/react-table-of-contents/).

The code is below

```js
import { useRef, useEffect } from "react";

const useIntersectionObserver = (setActiveId) => {
  const headingElementsRef = useRef({});
  useEffect(() => {
    const callback = (headings) => {
      headingElementsRef.current = headings.reduce((map, headingElement) => {
        map[headingElement.target.id] = headingElement;
        return map;
      }, headingElementsRef.current);

      const visibleHeadings = [];
      Object.keys(headingElementsRef.current).forEach((key) => {
        const headingElement = headingElementsRef.current[key];
        if (headingElement.isIntersecting) visibleHeadings.push(headingElement);
      });

      const getIndexFromId = (id) =>
        headingElements.findIndex((heading) => heading.id === id);

      if (visibleHeadings.length === 1) {
        setActiveId(visibleHeadings[0].target.id);
      } else if (visibleHeadings.length > 1) {
        const sortedVisibleHeadings = visibleHeadings.sort(
          (a, b) => getIndexFromId(a.target.id) > getIndexFromId(b.target.id)
        );
        setActiveId(sortedVisibleHeadings[0].target.id);
      }
    };

    const observer = new IntersectionObserver(callback, {
      rootMargin: "0px 0px -40% 0px",
    });

    const headingElements = Array.from(
      document.querySelector("#content").querySelectorAll("h1,h2")
    );

    headingElements.forEach((element) => observer.observe(element));

    return () => observer.disconnect();
  }, [setActiveId]);
};

export default useIntersectionObserver;
```

In my case, because I render my content in a div with the id of `content` and only want to display H1 and H2 tags, I have modified one of the lines as seen below

> This chunk of code simply selects a parent div with the id of `content` and then extracts out all the individual `h1` and `h2` tag content 

```js
const headingElements = Array.from(
      document.querySelector("#content").querySelectorAll("h1,h2")
    );
```

We can then import this in our main `TableOfContents.tsx` file and proceed to track the existing div we are at

```js
import React, { useEffect, useState } from "react";
import useHeadingsData from "../hook/useHeadingData";
import useIntersectionObserver from "../hook/useIntersectionObserver";
import PostHeaderLink from "./PostHeaderLink";

const TableOfContents = () => {
  const { nestedHeadings } = useHeadingsData();
  const [activeId, setActiveId] = useState();

  useIntersectionObserver(setActiveId);

  return (
    <div
      className="xl:col-span-3 mx-10  sticky "
      style={{
        top: "60px",
        maxHeight: "calc(100vh - 90px)",
        bottom: "30px",
      }}
    >
      <div className="cursor-pointer text-xl py-10 px-4">
        <ul>
          <PostHeaderLink links={nestedHeadings} activeId={activeId} />
        </ul>
      </div>
    </div>
  );
};

export default TableOfContents;
```

I have also extracted out the logic for nested headings into a general purpose hook I call `useHeadingData`

```js
import { useState, useEffect } from "react";
import { PostHeaderLink } from "../components/PostHeaderLink";
import { slugify } from "../utils/string";

const useHeadingsData = () => {
  const [nestedHeadings, setNestedHeadings] = useState<PostHeaderLink[]>([]);

  useEffect(() => {
    document
      .querySelector("#content")
      ?.querySelectorAll("h1,h2")
      .forEach((elem, id) => {
        //@ts-ignore
        const newId = slugify(elem.outerText);
        elem.setAttribute("id", newId);
      });

    // A bit kooky stuff, just ts-ignore and move on
    const headingElements = Array.from(
      //@ts-ignore
      document.querySelector("#content")?.querySelectorAll("h1,h2")
      //@ts-ignore
    ).reduce((acc, heading) => {
      //@ts-ignore
      const { nodeName, innerText } = heading;
      switch (nodeName) {
        case "H1":
          return [
            ...acc,
            { id: slugify(innerText), text: innerText, children: [] },
          ];
        case "H2":
          const newAcc = [...acc];
          //@ts-ignore
          newAcc[newAcc.length - 1].children.push({
            id: slugify(innerText),
            text: innerText,
            children: [],
          });
          return newAcc;
      }
    }, []);
    //@ts-ignore
    setNestedHeadings(headingElements);
  }, []);

  return { nestedHeadings };
};

export default useHeadingsData;
```

Now all we need to do is to add a simple boolean into our code which will track whether the id of the div matches the currently selected div. If so, we change the text color

```js
<a
  className={id === activeId ? "text-blue-600" : ""}
  href={`#${id}`}
...
```

This then gives us the following webpage and look when we are done.

![2022-07-31 17 23 10](https://user-images.githubusercontent.com/45760326/182019787-53d7a8f8-1f20-44ef-bd4d-d99c6a6f972f.gif)

Now we just need to make sure this only appears in screens with a screen size that is larger than `1440px` which can be easily done with the Tailwind CSS `xl` prefix. We also add some padding to our individual H1 and H2 tags by modifying the `useHeadingData` hook to add 30px of padding to the top.

```js
document
      .querySelector("#content")
      ?.querySelectorAll("h1,h2")
      .forEach((elem, id) => {
        //@ts-ignore
        const newId = slugify(elem.outerText);
        elem.setAttribute("id", newId);

        //@ts-ignore
        elem.style.paddingTop = "30px";
      });
```

And voila! We've successfully populated a table of contents for our articles which is able to track the existing div that we are looking at and dynamically populates based on the content of the page. In the next chapter, we'll look at modifying our function call so we can move on from our existing urls of `<url>/blog/<issueId>` to `<url>/blog/<slug>`.



Adding a Table Of Contents to Blog Articles

# Initial Set Up

This is a series of blog posts which detail how I'm setting up my website with the t3 stack. If you haven't read the previous articles, I suggest looking at 

- Part 1. : [Redesigning My Website with the t3-stack](https://www.ivanleo.com/blog/setting-up-the-new-blog)
- Part 2 : [Displaying Individual Articles](https://www.ivanleo.com/blog/displaying-individual-articles)
- Part 3 : [Adding a table of contents to our blog articles](https://www.ivanleo.com/blog/adding-a-table-of-contents-to-blog-articles)
- Part 4 : **[Tidying Up the final product](https://www.ivanleo.com/blog/tidying-up-the-article-page-and-adding-ssg-to-the-home-page)**

# Main Goals in this article

Here are some of our main goals to work through in this article

1. Rewrite the existing slugs for the article pages so they map from `<url>/blog/1` which is honestly kind of ugly to `<url>/blog/<slug generated from title>`.
2. Refactor main page to use SSG instead of a tRPC useQuery hook which might result in me getting rate-limited at some point
3. Prettifying the main page

# Rewriting Existing Slugs

## Previous Configuration

In Part 2 of this series, we looked at  [using Github Issues as a CMS](https://dev.to/ivanleomk/part-2-rendering-github-issues-from-markdown-to-html-on-my-blog-5hme). One of the things that we implemented there was to grab data from Github Issues using the issue number assigned to the article.

This resulted in url slugs such as `<url>/blog/1` which admittedly was not the most satisfying to look at. I was hoping instead to be able to have article urls that looked more like `<url>/blog/<slug generated from title>`. 

> If you're unsure what a slug is, it is a modified version of a string which can be used in a url. A good example might be of an Article which is titled "Adding a Table Of Contents To Blog Articles" that can be converted into a slug `adding-a-table-of-contents-to-blog-articles`. Notice here that all letters are lowercased and spaces are replaced with `-`.

Let's first start by writing a quick function to generate slugs for our individual titles. We can do so by chaining a series of `replace` function calls

```js
export const slugify = (text: string) => {
  return text
    .toString()
    .toLowerCase()
    .replace(/\s+/g, "-") // Replace spaces with -
    .replace(/[^\w-]+/g, "") // Remove all non-word chars
    .replace(/--+/g, "-") // Replace multiple - with single -
    .replace(/^-+/, "") // Trim - from start of text
    .replace(/-+$/, ""); // Trim - from end of text
};
```

This allows us to now generate our slugs. Now we need to rewrite our `[issueId].tsx` file which will statically generate all the relevant pages for each respective article.

## Refactoring `getStaticProps`

Let's first rename `[issueId].tsx` to `[slug].tsx` so it more accurately reflects what we are trying to achieve. We have two functions to modify/write:

1. `getPostIDs` : This grabs all the individual Issue Ids from the repository and returns a list containing all the individual article titles.
2. `getSinglePost` : This grabs the information for a post given a slug that we provide

## `getPostIDs` 

Currently, we are returning the individual issue Ids of the various issues that we have in our respository using the function as seen below

```js
export const getPostIds: () => Promise<number[]> = async () => {
  const { repository } = await graphqlWithAuth(
    `query getPostIds {
      repository(owner: "ivanleomk", name: "personal_website_v2") {
        issues(last: 100) {
            nodes {
                number
            }
        }
      }
  }
`,
    {}
  );

  // Quick Type Definition here
  
  return repository.issues.nodes.map((issue: { number: number }) => {
    return issue.number;
  });
};
```

What we want is the titles of the individual articles so we should just replace the `number` with the `title` instead. This gives us a new function which looks something like what we see below

```js
export const getPostIds: () => Promise<string[]> = async () => {
  const { repository } = await graphqlWithAuth(
    `query getPostIds {
      repository(owner: "ivanleomk", name: "personal_website_v2") {
        issues(last: 100) {
            nodes {
                
                title
            }
        }
      }
  }
`
  );

  // Quick Type Definition here
  return repository.issues.nodes.map((issue: { title: string }) => issue.title);
};
```

What we see in turn is that this now returns for us a list of the individual titles. We can then call this in `getStaticPaths` in order to generate the relevant paths for our specific function as seen below.

> If you're unaware of what getStaticPaths does, it basically generates a list of paths that can be matched using the `[slug]` pattern. By doing so, we can prevent users from accessing unauthorized/invalid paths and is a feature that is built into NextJS.

```js
export async function getStaticPaths() {
  const posts = await getPostIds();
  const paths = posts.map((issueId) => `/blog/${slugify(issueId)}`);

  return {
    paths,
    fallback: false,
  };
}
```

## `getSinglePost`

I struggled quite a bit trying to find an optimal solution to this and realised that I was indeed dealing with a Yacht problem. You can read more about it [here](https://twitter.com/lauraklein/status/1553066885746331648). As a result, I realised that I should prioritise banging out a solid prototype and instead work on optimizing it down to road. 

After giving it some thought, I realised that what might be a potential solution would be to

1. Get relevant data on every single post in the form of a humoungous query
2. Filter through all this data and find a post with a title that matches the slug
4. Return the data that has been filtered

I think the main downside with this approach is that I am making multiple repetitive calls to the same API for the same payload but I wasn't quite sure how to best memoize the data when generating data with NextjS. We first begin by writing out a quick graphql request which will give us all the data that we need as seen below.

```graphql
query getPost{
      repository(owner: "ivanleomk", name: "personal_website_v2") {
        issues(last:100){
          edges{
            node{
              title
              number
              createdAt
              body
            }
          }
        }
      }
```

We then filter through this entire list of information by using a simple `filter` higher order function

```
const post = repository.issues.edges.filter((issue) => {
    return slugify(issue.node.title) === slug;
  })[0].node;
```

before finally returning the single element node which corresponds to the valid article. We can combine this in the form of a function `getSinglePost` as seen below

```js
export const getSinglePost: (slug: string) => Promise<githubPost> = async (
  slug: string
) => {
  const { repository } = await graphqlWithAuth(
    `
    query getPost{
      repository(owner: "ivanleomk", name: "personal_website_v2") {
        issues(last:100){
          edges{
            node{
              title
              number
              createdAt
              body
            }
          }
        }
      }
}
    `
  );

  const post = repository.issues.edges.filter((issue) => {
    return slugify(issue.node.title) === slug;
  })[0].node;

  return post;
};
```

We can then call this in our `getStaticProps` function. This replaces our initial `getPostByIssueId` that we wrote in [Part 2](https://dev.to/ivanleomk/part-2-rendering-github-issues-from-markdown-to-html-on-my-blog-5hme)

Once this is done, we can then return this in our `getStaticProps` function as seen below.

```js
export async function getStaticProps({ params }: BlogPostParams) {
  const { slug } = params;
  // const post = await getPostByIssueId(parseInt(issueId));
  const post = await getSinglePost(slugify(slug));
  const { title, body, createdAt } = post;

  const { content: parsedBody } = matter(body);

  const content = await renderToHTML(parsedBody);

  return {
    props: {
      content: String(content),
      title,
      createdAt,
      rawContent: body,
    },
  };
```

The code inside is otherwise identical. We can then save our changes, refresh the page and voila, we have now ported over our articles to the new url standard. We just need to update the links that we populate in `PostLink` to utilise this new url convention and we have now ported our article pages over to the new URL standard

```js
{posts.data?.posts?.map((item) => {
        return <PostLink key={item.title} post={item} />;
 })}
```

# Refactoring `index.tsx` to use SSG instead of useQuery

## Why we need to refactor this .tsx option

Currently, our `index.tsx` looks something like this

```
import type { NextPage } from "next";
import Head from "next/head";
import PostLink from "../components/PostLink";
import { trpc } from "../utils/trpc";

const Home: NextPage = () => {
  const posts = trpc.useQuery(["github.get-posts"]);

  return (
    <>
      <h1>Posts</h1>
      {posts.data?.posts?.map((item) => {
        return <PostLink key={item.title} post={item} />;
      })}
    </>
  );
};

export default Home;
```

it does the job but the problem with this is that everytime someone loads the page, we are making a call to the github API. What this means is that if 1000 people access my site within an hour, I will be rate-limited. As a result, I think it's a pretty glaring error to fix.

This is where our wonderful friend `getStaticProps` comes in! Notice here that we don't need to declare `getStaticPaths` because we are not matching on a wildcard like we do in `[slug].tsx` . Instead we only have a single defined route, that is `<url>/` that we match in `index.tsx`.

Therefore, we can add in a `getStaticProps` function that loads up the entire list of posts when the index page is being generated. Let's quickly scaffold this out.

## Writing out a `getStaticProps` function

We already have an existing function which we have written called `getPublishedPosts` which extracts out metadata of all published posts. However, since it's the front page, I'll like to only display the latest 10 posts instead of all my posts. That way users don't feel overwhelmed by my website and can see more recent and up-to-date content. We first begin by rewriting our `getPublishedPosts` function to only return 10 articles at a time. 

```js
export const getPublishedPosts: () => Promise<githubPostTitle[]> = async () => {
  const { repository } = await graphqlWithAuth(`
        {
          repository(owner: "ivanleomk", name: "personal_website_v2") {
            issues(last: 10) {
              edges {
                node {
                    number
                    title
                    createdAt
                    body
                    labels(first: 3) {
                        nodes{
                            name
                        }
                    }
                }
              }
            }
          }
        }
      `);

  return (
    repository.issues.edges
      //@ts-ignore
      .map(({ node }) => {
        return { ...node };
      })
      .filter((post: githubPostTitle) => {
        return post.labels.nodes.some((label) => label.name === "published");
      })
  );
};
```

We can then call this in the  `getStaticProps` of our `Home` component

```js
export async function getStaticProps() {
  const posts = await getPublishedPosts();
  return {
    props: {
      posts,
    },
  };
}
```

which allows us to pass in a list of `Posts` into our component as a prop. We can then utilise our previous `githubPost` declaration which we wrote in a previous post to type this prop, thus allowing us to generate the new Home page as seen below

```
import Head from "next/head";
import PostLink from "../components/PostLink";
import { getPublishedPosts, githubPostTitle } from "../utils/github";

type HomePageProps = {
  posts: githubPostTitle[];
};

const Home = ({ posts }: HomePageProps) => {
  return (
    <>
      <h1>Posts</h1>
      {posts &&
        posts?.map((item) => {
          return <PostLink key={item.title} post={item} />;
        })}
    </>
  );
};

export async function getStaticProps() {
  const posts = await getPublishedPosts();
  return {
    props: {
      posts,
    },
  };
}

export default Home;
```

And with this, we've successfully ported over our index page to a statically generated page using SSG! Now all that is left to do is to fix up the post links that we've generated. Ideally, we want to add more metadata and information for them so that users can make more educated choices when browsing through them.

Currently they look like this

<img width="381" alt="Screenshot 2022-07-31 at 9 53 13 PM" src="https://user-images.githubusercontent.com/45760326/182029625-70cbade5-07bd-4d22-b169-35433bd41827.png">

and I think we can do a lot better. Let's now add a little bit of parsing such that we display the data which the 

- The date it was created
- The tags which I want to display for this specific article 

Feel free to copy the following code in order to achieve the desired result

![Screenshot 2022-08-04 at 1 32 18 PM](https://user-images.githubusercontent.com/45760326/182770143-c1452c77-76a5-45bb-8f09-ed7e8fd1d04d.png)

which corresponds to the code as seen below

```js
import PostLink from "../components/PostLink";
import { getPublishedPosts, githubPostTitle } from "../utils/github";

type HomePageProps = {
  posts: githubPostTitle[];
};

const Home = ({ posts }: HomePageProps) => {
  return (
    <div className="flex items-center justify-center mt-10">
      <div className="max-w-4xl w-full ">
        <div>
          <h2 className="text-3xl font-extrabold tracking-tight sm:text-4xl">
            Yo I&apos;m Ivan
          </h2>
          <p className="text-xl text-gray-500">I&apos;m a software engineer</p>
        </div>
        <div className="container mx-auto mt-10">
          <div className="max-w-lg">
            <div className="flex flex-col items-start justify-content">
              <h1 className="font-bold text-lg tracking-tight">Latest Posts</h1>
              <ul>
                {posts &&
                  posts?.map((item) => {
                    return <PostLink key={item.title} post={item} />;
                  })}
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export async function getStaticProps() {
  const posts = await getPublishedPosts();
  return {
    props: {
      posts,
    },
  };
}

export default Home;
```

And the code for the post link. Note that you'll need to install `day.js` in order to be able to nicely format the code.

```js
import Link from "next/link";
import React from "react";
import { githubPostTitle } from "../utils/github";
import { slugify } from "../utils/string";
import dayjs from "dayjs";

type PostLinkProps = {
  post: githubPostTitle;
};

const PostLink = ({ post }: PostLinkProps) => {
  return (
    <Link href={`blog/${slugify(post.title)}`}>
      <div className=" py-3 pl-5">
        <p className="cursor-pointer hover:underline">
          {post.title} | {dayjs(post.createdAt).format("DD-MM-YYYY")}
        </p>
        <div className="ml-2 flex-shrink-0 flex"></div>
      </div>
    </Link>
  );
};

export default PostLink;
```

Now all that's left is to automatically generate code which will allow us to display each individual series of posts which we've written! We'll cover this in the next article so stay tuned! :)









Tidying up the final product

# Introduction

I've always been curious about how the magic links that all websites are using nowadays work and over the weekend, after watching a few videos, I put together a quick prototype that manages to do so. Let me walk you through it!

## Installing Necessary Libraries and bootstrapping the project

Before we begin, we need to start by bootstrapping a new NextJS App. You can do so by running the command

```
npx create-next-app --ts
```

This will help us to boot upa NextJS App with Typescript auto configured. Now we need to install our dependencies, which will be prisma and next-auth. We can do so by running the commands

```
yarn add prisma next-auth @next-auth/prisma-adapter nodemailer
```

Let's also add a `.env` file which looks like what we have below 

```
DATABASE_URL = 
SMTP_HOST= 
SMTP_PORT = 587 
SMTP_USER = 
SMTP_PASSWORD = 
SMTP_FROM=
NEXTAUTH_SECRET = 
```

# Supabase

## Creating Our Project

We now need to create a quick database with Supabase. If you don't have an account, you can sign up [here](https://supabase.com/) and create a free account. Once you've done so, simply go over to the dashboard and create a new project.

![Screenshot 2022-08-09 at 2 25 36 PM](https://user-images.githubusercontent.com/45760326/183579268-71c83950-282b-4faf-b283-865f1f30c043.png)

Make sure to write down your password so that you don't forget it. You'll need it to connect to your database later on.

## Grabbing our Database URI

We can find our database URI by navigating to **settings -> database -> connection string -> URI**. I've provided some snapshots below to help you find it in your project.

![Screenshot 2022-08-09 at 3 24 08 PM](https://user-images.githubusercontent.com/45760326/183589454-b2cb1641-580a-410e-844a-39fc0dad6cae.png)
![Screenshot 2022-08-09 at 3 24 24 PM](https://user-images.githubusercontent.com/45760326/183589500-af92709b-94e0-4cf9-b6b9-af242ef68050.png)
<img width="1039" alt="Screenshot 2022-08-09 at 3 25 52 PM" src="https://user-images.githubusercontent.com/45760326/183589795-95cd51c1-a7a8-467c-922b-0a1ec4049047.png">

The password will simply be the password that you set up when configuring the project.

# Prisma

## Configuring our schema

> Make sure that you've updated the .env file with the database URI that we grabbed from supabase. This should be named DATABASE_URL in the .env file.

Now that we've got a working database, we can start to setup our prisma schema to work nicely with it. Let's start by running the command 

```
npx prisma init
```

This will create for us a new `schema.prisma` file which we want to override with the code below

```
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model Account {
  id                String  @id @default(cuid())
  userId            String
  type              String
  provider          String
  providerAccountId String
  refresh_token     String? @db.Text
  access_token      String? @db.Text
  expires_at        Int?
  token_type        String?
  scope             String?
  id_token          String? @db.Text
  session_state     String?

  user User @relation(fields: [userId], references: [id], onDelete: Cascade)

  @@unique([provider, providerAccountId])
}

model Session {
  id           String   @id @default(cuid())
  sessionToken String   @unique
  userId       String
  expires      DateTime
  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
}

model User {
  id            String    @id @default(cuid())
  name          String?
  email         String?   @unique
  emailVerified DateTime?
  image         String?
  accounts      Account[]
  sessions      Session[]
}

model VerificationToken {
  identifier String
  token      String   @unique
  expires    DateTime

  @@unique([identifier, token])
}
```

Let's now test that our database is working as we planned by running a migration using the command

```
npx prisma migrate dev
```

This will apply our changes to our database and we can verify this by going back to supabase and verifying that our new tables have been created as we wanted.


![Screenshot 2022-08-09 at 3 32 09 PM](https://user-images.githubusercontent.com/45760326/183591043-972581dc-d19d-4d53-8975-986c27322d7d.png)

# Configuring Amazon Simple Email Service ( SES )

## Creating a Verified Identity

> Amazon SES is a email service provided by Amazon which helps you to send emails using either the AWS SDK or an SMTP Endpoint they provide. **For This article, we will be using their SMTP credentials**.

First, create an AWS account if you haven't. AWS is Amazon's cloud computing wing which provides a variety of different services. You can do so [here](https://aws.amazon.com/). Once you've created a new account, navigate to the SES dashboard and click on **Verified Identities**.

![Screenshot 2022-08-09 at 3 15 48 PM](https://user-images.githubusercontent.com/45760326/183587802-dde36f44-8dbe-4fe7-b6b5-e3b671df5e05.png)

![Screenshot 2022-08-09 at 3 16 21 PM](https://user-images.githubusercontent.com/45760326/183587906-38c3ba2d-c9f3-4e1e-bdd8-3ad8008d5099.png)

If you own a domain, you'll need to wait a while before being able to start sending emails out with your registered domain.

## Creating an IAM User with SMTP credentials

Now that we've got ourselves a working verified domain, we now need to configure a valid IAM user with SMTP credentials. In order to do so, we can simply navigate to the **Account Dashboard** screen in the SES page

![Screenshot 2022-08-09 at 3 19 02 PM](https://user-images.githubusercontent.com/45760326/183588395-74a7bcda-0e3c-414e-827e-7a516bcc20cf.png)

Now simply create a new user with the wizard. Name it anything you like but note down the username and password that Amazon provides you with. You'll need it to configure our NextAuth Login Flow.

With this, we've got ourselves all the credentails we need.

# NextAuth

## Configuring our Provider

Let's now start to set up our NextAuth in our project. Let's first open our `_app.tsx`file and add in the NextAuth Providers

```js
import "../styles/globals.css";
import { SessionProvider } from "next-auth/react";

export default function App({
  //@ts-ignore
  Component,
  //@ts-ignore
  pageProps: { session, ...pageProps },
}) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}
```

As you can seem we now have a new Session Provider which can help us to utilise NextAuth in our application. This helps track the individual sessions which are running in our app and in turn utilise useful functionality such as the `useSession` hook in our app.

## Updating Next Auth API Route

We now need to create a new route in the NextJS Project that we have created. This will have the route of `pages/api/auth/[...nextauth].js` and will look like what we have below. 

```js
import NextAuth from "next-auth";
import EmailProvider from "next-auth/providers/email";
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

export default NextAuth({
  // Configure one or more authentication providers
  providers: [
    EmailProvider({
      server: `smtp://${process.env.SMTP_USER}:${process.env.SMTP_PASSWORD}@${process.env.SMTP_HOST}:${process.env.SMTP_PORT}`,
      from: process.env.SMTP_FROM,
    }),
    // ...add more providers here
  ],
  adapter: PrismaAdapter(prisma),
});

```

We now need to make sure that our .env file has the relevant values

- **SMTP_USER** : This is the username generated by AWS when you created your new IAM user
- **SMTP_PASSWORD**: This is the password generated by AWS when we created the new IAM user with SMTP priviledges.
- **SMTP_HOST**: This will depend on what region you want to send the emails in. For mine it is `email-smtp.ap-southeast-1.amazonaws.com` and you can find the specific SMTP endpoint to use [here](https://docs.aws.amazon.com/general/latest/gr/ses.html)
- **SMTP_PORT**: 587
- **SMTP_FROM**: This is the value that will appear in the **FROM** field in your email. Note that you can only add enails that have been verified by SES in this step.

# Configuring index.tsx

We've now got everything set up. Let's test to see if it's working, to do so, we can use our NextJS application to test. Let's scaffold a quick application which uses the `useSession` hook in order to see if our magic link authentication works

```
import type { NextPage } from "next";
import { signIn, signOut, useSession } from "next-auth/react";

const Home: NextPage = () => {
  const { data: session } = useSession();

  if (session) {
    return (
      <div>
        Authenticated <button onClick={() => signOut()}>Sign Out</button>
      </div>
    );
  }

  return (
    <div>
      Unauthenticated Boi <button onClick={() => signIn()}>Sign in</button>
    </div>
  );
};

export default Home;
``` 

We can then try to sign in by clicking the button **Sign In**

<img width="226" alt="Screenshot 2022-08-09 at 3 43 11 PM" src="https://user-images.githubusercontent.com/45760326/183593217-38b74d87-5233-4614-9131-9c5c6c87f797.png">

This brings us to the sign in page as seen below

<img width="623" alt="Screenshot 2022-08-09 at 3 43 40 PM" src="https://user-images.githubusercontent.com/45760326/183593315-259d0a51-f345-4d98-a6de-2de2c69ccbf1.png">

Which when we fill in our  email redirects us to

<img width="534" alt="Screenshot 2022-08-09 at 3 44 18 PM" src="https://user-images.githubusercontent.com/45760326/183593500-42c1be9c-b751-4933-a8ca-7a4669712ba8.png">

We can verify that our email function works by checking whether we have recieved an email. In this case, I've used a domain `admin@ivanleo.com`.

![Screenshot 2022-08-09 at 3 42 25 PM](https://user-images.githubusercontent.com/45760326/183593096-997e4e45-c76d-4559-a262-9b3761f634e5.png)

Which when we click then allows our user to login and display the **Authenticated** screen as seen below.

<img width="295" alt="Screenshot 2022-08-09 at 3 45 38 PM" src="https://user-images.githubusercontent.com/45760326/183593818-a929a828-0e7b-4867-aeb2-32879107bf06.png">


# Deploying on Vercel

Let's deploy this new project that we've put together. We can do so by using Vercel, which provides a simple One-Click deployment from Github. Simply navigate over and select the project from the New Project tab. You'll then want to just enable the default settings as seen below.

![Screenshot 2022-08-09 at 3 49 20 PM](https://user-images.githubusercontent.com/45760326/183594564-c3b86a4a-26f2-4396-871c-1e59d20957a5.png)


Once everything is built, you'll need to add in every single environment variable which you configured in your .env file to your vercel project. You can do so at **Settings -> Enviroment Variables.**. Now just trigger a redeployment of your project and you should be good to go!
