Image
Web Development

2023 Blog Site Update Notes

January 19, 2023

//

6 min read

It’s that time again! Time to do some spring cleaning on the blog site and check out the latest and greatest in front-end tech. There’s been some great progress in static site frameworks, so let’s chat about my latest journey.

Check out the old site here

Updated Blog

Framework: Next.js 13

CSS: TailwindCSS

CMS: Notion

Deployment: Vercel

Repo: Updated Site Repo


As this is a technical blog, let’s go into a little more detail about the implementation.

Next JS

I’ve been following the progress of Next for a while now and I can say, after implementing it myself, that it’s my new favorite static site framework. I am using version 13, but I’m not using some of the newer features such as the new /app directory or Turbopack (the rust-based successor to Webpack) until they come out of beta.


Notion as a CMS

I’m a huge Notion Junkie.

I organize all my daily tasks, projects, notes, and keep several databases for movies, TV, and readings all in Notion. They recently opened their API to the public which is how it can be used as a CMS. It’s not as fully featured as some CMS’s, but it still works great. There are a few ways to get this going, so I’ll go over a few.

Setting up Notion Database

In Notion I just setup a database with the following schema:

  • Name (Where the content is)
  • Slug
  • Description
  • Tags (Multiselect)
  • Published (Boolean)
  • Date (date)
  • (Optional) Wordcount (Number)

Option 1: Rendering with React Notion X

This library fetches data on a “Page” level and renders an exact clone of what it looks like in Notion. There’s not a whole lot of flexibility for styling, but it’s a quick and easy way to add content to an external site.

import { NotionAPI } from 'notion-client' /* Chrome Development Tools > Application > Cookie > and Copy the token_v2 and notion_user_id */ const notion = new NotionAPI({ activeUser: process.env.NOTION_ACTIVE_USER, authToken: process.env.NOTION_TOKEN_V2 }) // Page ID grabbed from the url const recordMap = await notion.getPage('067dd719a912471ea9a3ac10710e7fdf') ... import * as React from 'react' import { NotionRenderer } from 'react-notion-x' export default ({ recordMap }) => ( <NotionRenderer recordMap={recordMap} fullPage={true} darkMode={false} /> )

Option 2: Rendering with Notion as Markdown (What I used)

For this approach, you’ll need to use the Notion official API client to download the page, convert it to markdown using the Notion to Markdown library, then use React Markdown to render the data.

// Start the notion client const notion = new Client({ auth: process.env.NOTION_TOKEN, }); // Fetch all published posts from the database id export const getAllPublished = async (): Promise<PostMetadata[]> => { const posts = await notion.databases.query({ database_id: process.env.DATABASE_ID || '', filter: { property: "Published", // Only grab entries that are published checkbox: { equals: true, }, }, sorts: [ { property: "Date", direction: "descending", }, ], }); return posts.results; }; // Fetch a single post and convert it to markdown const n2m = new NotionToMarkdown({ notionClient: notion }); export const getSingleBlogPostBySlug = async (slug: string): Promise<SinglePost> => { const response = await notion.databases.query({ database_id: process.env.DATABASE_ID || '', filter: { property: "Slug", formula: { string: { equals: slug, }, }, }, }); const page: any = response.results[0]; const metadata = getPageMetaData(page); const mdblocks = await n2m.pageToMarkdown(page.id); const mdString = n2m.toMarkdownString(mdblocks); metadata.cover = page.cover.external.url; return { metadata, markdown: mdString, }; }; ... // Not every markdown tag is defined, so you’ll need to override using the // React Markdown settings. <ReactMarkdown components={{ // When the code tag is used, replace with custom code component with highlighting code({ node, inline, className, children, ...props }) { const match = /language-(\w+)/.exec(className || '') return !inline && match ? ( <CodeBlock codestring={String(children).replace(/\n$/, '')} language={match[1]} /> ) : ( <code className={className} {...props}> {children} </code> ) } }}> {markdown} </ReactMarkdown>

There are plenty more options, but these are what I determined to be the “best” in my own opinion.


TailwindCSS

I’ve been creating and organizing my own CSS/SCSS files for years now, so I thought it was time to try something out-of-the-box. I know there are plenty of frameworks and design systems to choose from, but I decided to see what all the buzz was about with Tailwind.

The big feature that caught my attention was it’s use of utility classes instead of semantic class names. Basically, for (almost) every CSS property, they’ve created a class that implements it. For instance if you want an element to have rounded edges you just add the class rounded or the other preset radius classes and now the element will be rounded. You can compose multiple classes to style specific elements. For example:

Vanilla

.header { padding: 60px; text-align: center; background: #000; color: white; font-size: 30px; } <h1 class="header">Heading 1</h1>

Tailwind

<h1 class="p-10 text-center bg-black text-white text-3xl">Heading 1</h1>

It can definitely add some clutter to the HTML but it decreases complexity by having only one file. All the settings and definitions can be customized so you aren’t tied into their designs. Implementing styling this way can also cause repetition in your code. A good thing though, is that it forces the code to be split up into reusable components, which is good design anyways.

All in all, even though it takes a little while to get used to, I think it’s worth it in the end.


Future Features

I still haven’t implemented all of the features that I wanted, but here’s my wish list:

  • Book Widget - Just a little widget that grabs the book I’m currently reading from my Notion book DB
  • Custom support for more Notion blocks - React markdown doesn’t pick up all the notion markdown tags, so I’ll need to add more functionality to support more advanced features
  • Update my Avatar - I made this a few years ago and it’s likeness is not really up to date…
  • SEO - I just put in the basic headers, but I’ll look into adding more
  • Open Graph - This is mostly for sharing with social media (mostly twitter) but I do think it’s important these days
  • Search/Filter by Tag - Since all the blog entries have assigned tags, it would be nice to be able to filter through them.
  • Discussion and Social Interactions - I would like to have some “like buttons” or other ways for users to interact.
  • Better Design - This site is pretty bare-bones. Normally I like to make things a little more colorful.

© 2024 Chad Lumley