DEV Community: ivanleomk

Magic Link Sign in using Next Auth, Prisma, Amazon SES and Supabase

ivanleomk — Tue, 09 Aug 2022 08:06:00 +0000

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 and create a free account. Once you've done so, simply go over to the dashboard and create a new project.

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.

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.

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. Once you've created a new account, navigate to the SES dashboard and click on Verified Identities.

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

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.tsxfile and add in the NextAuth Providers



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.



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
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

This brings us to the sign in page as seen below

Which when we fill in our email redirects us to

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.

Which when we click then allows our user to login and display the Authenticated screen as seen below.

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.

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!

Tidying Up the Final Product

ivanleomk — Thu, 04 Aug 2022 08:26:36 +0000

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
Part 2 : Displaying Individual Articles
Part 3 : Adding a table of contents to our blog articles
Part 4 : Tidying Up the final product

Main Goals in this article

Here are some of our main goals to work through in this article

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>.
Refactor main page to use SSG instead of a tRPC useQuery hook which might result in me getting rate-limited at some point
Prettifying the main page

Rewriting Existing Slugs

Previous Configuration

In Part 2 of this series, we looked at using Github Issues as a CMS. 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

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:

getPostIDs : This grabs all the individual Issue Ids from the repository and returns a list containing all the individual article titles.
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

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

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.

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. 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

Get relevant data on every single post in the form of a humoungous query
Filter through all this data and find a post with a title that matches the slug
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.

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

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

Once this is done, we can then return this in our getStaticProps function as seen below.

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

{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.

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

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

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

which corresponds to the code as seen below

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.

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! :)

Part 3 : Adding a Table Of Contents to blog article

ivanleomk — Sun, 31 Jul 2022 09:34:00 +0000

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
Part 2 : Displaying Individual Articles
Part 3 : Adding a table of contents to our blog articles
Part 4 : Tidying Up the final product

You can see the completed website here

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. 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.

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

Now let's look at the list of things to do

[ ] We need to dynamically set IDs for each H1 and H2 element which are equal to their content
[ ] We need to then grab this list of IDs and convert it to a table of contents
[ ] We then need to track the specific div where we are at and highlight the name of that div
[ ] 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

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

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 H2s 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

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.

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

type PostHeaderLink = {
  text: string;
  id: string;
  children: PostHeaderLink[];
};

An example of this nested structure when applied to this article 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

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

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

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

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.

The code is below

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

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

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

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

<a
  className={id === activeId ? "text-blue-600" : ""}
  href={`#${id}`}
...

This then gives us the following webpage and look when we are done.

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.

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>.

Part 2 : Using Github Issues as a CMS

ivanleomk — Thu, 28 Jul 2022 08:22:00 +0000

Quick Introduction

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
Part 2 : Displaying Individual Articles
Part 3 : Adding a table of contents to our blog articles
Part 4 : Tidying Up the final product

Current State

Previously, we successfully managed to get our website to render out the list of issues we had configured on Github using the t3-stack. If you haven't read it yet, you can read it here

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

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

/blog/2
/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.

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

 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

[1,2]

We specify that we want the issues from which is owned by 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

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

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

export type githubPost = {
  title: string;
  number: string;
  createdAt: string;
  body: string;
};

We can then utilise this in our main component as seen below

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

  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

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

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 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. 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

/** @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

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

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 a table of contents to our article which is automatically generated based on our content.

Part 1 : Redesigning my Website with the t3-stack

ivanleomk — Wed, 27 Jul 2022 08:04:00 +0000

Quick Introduction

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
Part 2 : Displaying Individual Articles
Part 3 : Adding a table of contents to our blog articles
Part 4 : Tidying Up the final product

You can see the website here

Initial Set-up

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.

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

// @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.

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(),
});

Let's get started!

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

You'll then want to click on Personal Access Tokens

Lastly, you'll need to then configure your access token so it only has access to public_repo as seen blow

You should then update this token in your local .env file

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

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

// 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.

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

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.

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.

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

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.

I've published the next part of this series, you can read it here

Part 3 : Loops and Exceptions in Kotlin

ivanleomk — Wed, 20 Jul 2022 19:24:28 +0000

Motivation

This article is written for more advanced developers which are looking to get a quick grasp on the Kotlin Language for work or for some interesting projects.

In this article, we cover loops and exceptions and how to best use them. This is part 3 in a longer series.

Part 1 : Getting Started with Kotlin
Part 2 : Control Flow in Kotlin
Part 3 : Loops and Exceptions in Kotlin
Part 4 : Working with Types in Kotlin ( Coming Soon )

While Loops

While loops follow a general syntax of

while (Boolean Expression is true){
   //Perform some action
}

At each iteration, Kotlin checks to see if the boolean expression is still true. If it is, then it continues iterating through the block.

Note : This means that if your condition is not true, your loop will never run

We can see an example of this below

fun main(){
    val repetitions = 10;
    var counter = 0
    while(counter < repetitions){
        println("Counter : $counter ")
        counter++
    }
}

which gives us the output of

Counter : 0 
Counter : 1 
Counter : 2 
Counter : 3 
Counter : 4 
Counter : 5 
Counter : 6 
Counter : 7 
Counter : 8 
Counter : 9

Do-While

If you want your loop to run at least once, a do-while loop is what you'll probably want to use.

do{
  // Perform some action
} while(Boolean Expression is true)

We can rewrite the while loop above into a do-while as

fun main(){
    val repetitions = 10;
    var counter = 0
    do{
        println("Counter : $counter ")
        counter++
    }while(counter < repetitions)
}

Note : This means that if your condition is not true, your loop will run at least once

We can verify that our do while loop runs at least once using the code-snippet below

fun main(){
    val condition = false
    do{
        println("Loop Ran")
    }while(condition)
}

For-Loops

We can also use For-Loops if we have a known-number of iterations that we want to execute our blocks of code for.

The general syntax is

for(x in something){
  //Do Something
}

There are two main ways that we can work with for loops - using repeat or with ranges

Repeat

The repeat function call allows us to perform an action a set number of times.

fun main(){
    repeat(3){
        println("Loop Ran")
    }
}

Which gives the output of

Loop Ran
Loop Ran
Loop Ran

Ranges

We can see a more concrete example below using ranges with

fun main(){
    val range = 3..5
    for(i in range){
        println(i)
    }
}

Note : 3..5 is a shorthand syntax which we use to generate a range. So in this case, 3..5 is equivalent to a range with the values 3,4,5.

We can generate the same range in different ways as seen below

3..5 
3 until 5 
3..5 step 1

We can also generate ranges that go in the reverse direction (eg. 5,4,3 )

5 downTo 3 step 1

Note : Ranges can also be used for characters (Eg. "a","b","c" which can be generated by 'a'..'c' )

Part 2 : Control Flow with Kotlin

ivanleomk — Mon, 18 Jul 2022 21:47:23 +0000

Motivation

This article is written for more advanced developers which are looking to get a quick grasp on the Kotlin Language for work or for some interesting projects.

We cover installation, basic syntax and a quick introduction to functions in this article which is Part 2 in a long series.

Part 1 : Getting Started with Kotlin
Part 2 : Control Flow in Kotlin
Part 3 : Loops and Exceptions in Kotlin ( Coming Soon )

Note : I do use a For-Loop in this article to simulate draws from a finite sequence from 0 to 10 but the syntax is relatively similar to other languages.

Control Flow in Kotlin

In Kotlin, we have two main constructs that we can use when it comes to making decisions.

If-Else

The first is the if-else construct which we can see an example below.

fun main(){
    val controlling:Int = 3;

    if(controlling < 4){
        println("The Value is less than 4")
    }
    else{
        println("The value is larger than 4")
    }
}

This doesn't seem very useful, so let's perhaps do a quick example where we randomly generate 4 numbers instead using kotlin's random package.

import kotlin.random.Random

fun main(){
    var controlling:Int;
    for( i in 1..4){
        controlling = (0..10).random()
        if(controlling < 4){
            println("The Value of $controlling is less than 4")
        }
        else{
            println("The value of $controlling is larger than 4")
        }
    }
}

which we can further simplify into

import kotlin.random.Random

fun main(){
    var controlling:Int;
    for( i in 1..4){
        controlling = (0..10).random()
        println(
            "The value of $controlling is ${
                if(controlling > 4) "greater" else "less"
            } than 4"
        )
    }
}

This in turn gives the same output of

The value of 7 is greater than 4
The value of 10 is greater than 4
The value of 5 is greater than 4
The value of 8 is greater than 4

When to use When? :)

Another potential way of expressing this logic is by using a when construct.

import kotlin.random.Random


fun main(){
    var controlling:Int;
    for( i in 1..4){
        controlling = (0..10).random()
        when(controlling){
            in 0..4 -> println("$controlling is less than or equal to 4")
            in 5..10 -> println("$controlling is greater than 4")
            else -> println("Unsupported Number")
        }
    }
}

Let's walk through this logic a little bit

We know that (0...10).random() will yield us a number within the range of 0 to 10. This is an inclusive range which means we can get 0 and 10. *Therefore, we know that we only need to match against numbers that lie within this range. *
We want to print "less than 4" if we obtain a number less than or equal to 4 otherwise we print "greater than 4". This means that we are essentially breaking our number into two disjoint sets or groups.

These are the two groups

1,2,3,4 ( expressed as 1..4 )
5,6,7,8,9,10 ( expressed as 5..10)

Therefore, we can simply rewrite using the when loop to check membership in either side.

In general, I find that When is more useful when you have more than two or three choices to make.

Some useful shorthand syntax to remember when using When can be seen below

Finite number of distinct options

Let us first rewrite our original example above to take advantage of the , syntax. Notice that we now do not utilise the in keyword.

import kotlin.random.Random


fun main(){
    var controlling:Int;
    for( i in 1..4){
        println(i)
        controlling = (0..10).random()
        when(controlling){
            0,1,2,3,4 -> println("$controlling is less than or equal to 4")
            5,6,7,8,9,10 -> println("$controlling is greater than 4")
            else -> println("Unsupported Number")
        }
    }
}

Eg 2. Multiple Conditions

Let's write a short snippet that helps us check if a user can log in based on a given username or password.

Note : We could easily replace the following with an if-else loop if you prefer. Personally, I think this boils down to a matter of preference, When is just cleaner in general to me.


fun main(){
    val correct_username = "john.smith"
    val correct_password = "applebees"

    val username_attempts = listOf(
        "antique","john.smith","john.smith"
    )

    val password_attempts = listOf(
        "applebees","apples","applebees"
    )

    for(i in 0..2){

        when{
            correct_password == password_attempts[i] && correct_username == username_attempts[i] -> println("Login Succesful")
            correct_username != username_attempts[i] -> println("Wrong Username")
            correct_password != password_attempts[i] -> println("Wrong Password")
            else -> println("Horrible Attempt")
        }
    }
}

Conclusion

Kotlin provides two useful constructs which help us to be able to deal with user-input and implement logic in our code. In the next article, we'll look at how we can reduce redundant code by using Loops!

Part 1 : Getting Started With Kotlin

ivanleomk — Mon, 18 Jul 2022 09:52:49 +0000

Motivation

This article is written for more advanced developers which are looking to get a quick grasp on the Kotlin Language for work or for some interesting projects.

We cover installation, basic syntax and a quick introduction to functions in this article which is Part 1 in a long series.

Part 1 : Getting Started with Kotlin
Part 2 : Control Flow in Kotlin
Part 3 : Loops and Exceptions in Kotlin ( Coming Soon )

Installation

For this specific tutorial, I recommend using VsCode since it has almost everything you will need.

First, install the Kotlin language using Homebrew.

brew update
brew install kotlin

Next, install VsCode Support for Kotlin using the Kotlin extension and Code Runner.
Lastly, create a new file called test.kt with the following code within it.

In Kotlin, we always begin our program with the main function. This function is always named the same and does not take any parameters.

fun main() {
    println("Hello, world!!!")
}

which we can then run by using the code runner extension. If all is good, we should get the output as

[Running] cd <filePath> && kotlinc main.kt -include-runtime -d main.jar && java -jar main.jar
Hello, world!!!

[Done] exited with code=0 in 7.21 seconds

Congratulations! You've successfully installed Kotlin 🎉🎉🎉 !!

Programming With Kotlin

Var vs Val

While there are a variety of nuances to consider when deciding whether to use a Var and a Val, an important consideration is that

A Var is a mutable reference while a Val is an immutable one.

A good rule of thumb is to therefore minimise the use of Vars while sticking to Vals as much as possible.

Types

We use types in Kotlin in order to avoid any potential typing errors which might result in unforeseen problems. We can annotate types in Kotlin by using the command

val one:Int = 1

Kotlin by default gives us the Types of

Int
Double
Boolean
String
Char
String

Which we can annotate as seen above. If we do not annotate the type of a variable, Kotlin will simply infer its type.

Functions

We can also write more complex helper functions which we can call and utilise. Functions take the generic boilerplate version of

fun <nameOfFunction>(parameter_1:type_1,...){
//Function Code Goes Here
}

We can see an example below of a function which multiplies two numbers together

fun multiplyByN(x:Int,y:Int):Int = x * y

Note : Our function takes in two arguments and can be expressed in a single line. As a result, we can write it without using the two curly braces we normally use.

We can also make our function more extensible by using default arguments. Let's rewrite our multiplyByN function with some default arguments.

fun multiplyByN(x:Int,y:Int=4):Int = x * y

As you can see, by adding a default argument of 4, the two function calls below are now identical.

fun main() {
    println(multiplyByN(3))
    println(multiplyByN(3,4))
}

fun multiplyByN(x:Int,y:Int=4):Int = x * y

which we can verify by running it using the CodeRunner extension.

[Running] cd <filePath> && kotlinc main.kt -include-runtime -d main.jar && java -jar main.jar
12
12

[Done] exited with code=0 in 4.687 seconds

DEV Community: ivanleomk

Magic Link Sign in using Next Auth, Prisma, Amazon SES and Supabase

Introduction

Installing Necessary Libraries and bootstrapping the project

Supabase

Creating Our Project

Grabbing our Database URI

Prisma

Configuring our schema

Configuring Amazon Simple Email Service ( SES )

Creating a Verified Identity

Creating an IAM User with SMTP credentials

NextAuth

Configuring our Provider

Updating Next Auth API Route

Configuring index.tsx

Deploying on Vercel

Tidying Up the Final Product

Initial Set Up

Main Goals in this article

Rewriting Existing Slugs

Previous Configuration

Refactoring getStaticProps

getPostIDs

getSinglePost

Refactoring index.tsx to use SSG instead of useQuery

Why we need to refactor this .tsx option

Writing out a getStaticProps function

Part 3 : Adding a Table Of Contents to blog article

Initial Set Up

CSS Set-Up

Setting IDs for H1 and H2 elements which are slugs of their content

Generating a list of headings

Part 2 : Using Github Issues as a CMS

Quick Introduction

Current State

Creating individual pages

Installing New Libraries

Walkthrough

Styling the page

Part 1 : Redesigning my Website with the t3-stack

Quick Introduction

Initial Set-up

Github Issues as a CMS

Setting up a personal access token

Configuring the TRPC router

Getting a list of posts

Rendering our posts on the frontend

Part 3 : Loops and Exceptions in Kotlin

Motivation

While Loops

Do-While

For-Loops

Repeat

Ranges

Part 2 : Control Flow with Kotlin

Motivation

Control Flow in Kotlin

If-Else

When to use When? :)

Conclusion

Part 1 : Getting Started With Kotlin

Motivation

Installation

Programming With Kotlin

Var vs Val

Types

Functions

Refactoring `getStaticProps`

`getPostIDs`

`getSinglePost`

Refactoring `index.tsx` to use SSG instead of useQuery

Writing out a `getStaticProps` function