Logo

@ivanleomk

I write code sometimes
HomePostsNotesWork Log

back?

New Website who dis

I've been working on a new website for a while now. Here's what I've learned.

Contents:

IntroductionGoal for this website

Introduction

I wanted to redesign my site because previous versions were very complex and I wanted to simplify it. I also wanted to try out some new libraries and frameworks.

The code is entirely open-source and you can see it here

So without ado, let's see what are some of the new additions.

Content Layer

You can check out Content Layer here

If I could sum up what I liked about content layer, it would be that it's a very simple way to create a CMS. It's also very flexible and you can use it with any framework.

You simply declare a schema and point them to a content directory. They then parse it and give it to you in a typesafe manner which you can then query and use in your frontend.

Here's an example of what it looks like when you declare a type to be parsed from your markdown code

normal_types.ts

title: {
      type: "string",
      description: "The title of the post",
      required: true,
    },

You can even declare computed types which will allow you to do some transformations on the data before you see it - think formatted dates, parsed item types etc.

computed_types.ts

{
  parsed_date: {
      type: "string",
      resolve: (doc) => format(new Date(doc.date), "MMM dd, yyyy"),
    }
}

I was a bit lazy to work out all the individual styling so I copied the styling off this repository here. Major shout to Ekom Enyong for getting it all nailed down and providing some useful components.

NextJS V13

I like this a lot - I initially had some trouble adjusting to the new manner in which the pages are structured but I got used to it pretty quickly.

I posted a quick thread about it on twitter about some of my thoughts about the new Next JS 13 release after using it for a while.

What I've found extremely useful is the colocation of files within a specific folder. While my use case is not sufficiently complex, I've found it to be more intuitive when you can see things that way.

Additionally, the metadata support for SEO is first class, just look at how you declare it within a page

page.ts

export const metadata = {
  title: "Ivan Leo",
  description:
    "Hey there! I'm a full stack engineer based in Singapore

That's all you need to render out your metadata within the page. There are a bunch of other optimisations I'd like to play with further down the line (Eg. OG image generation on the fly, etc) but we'll save that for another post.

Goal for this website

I think the overall goal for this website is two fold

  1. As I continue experimenting and exploring my interest in AI, I'd like there to be a nice repository of my past work so that I can continue to build on it and improve it.

  2. I'd also like to keep myself accountable and start building and shipping products instead of just leaving them to limbo on my local machine and github.

Excited for what is to come.