Building the Blog Builder

Click on the images to zoom.

For the past few months, I've been making a Notion inspired dashboard as a content management system to create blogs. Yes, I know about MDX and Medium, but I want to create a space to share my dumb ideas on my own website in the style I want and to be able to make changes instantly. Here's a blog about how the blog is built.

"Software developers like to solve problems. If there are no problems available, they will create their own problems."

Sun Tzu, Circa 2001

Data Structures

The project employs Drizzle as the ORM of choice to bridge the gap between the database and the application. PostgreSQL was chosen as the database ~~because they have a free tier on Vercel~~ for its compatibility with Drizzle and Typescript. Below is the database schema for the blogs table:

// schema.ts

export const blogs = createTable(
  'blogs',
  {
    id: serial('id').primaryKey(),
    url: varchar('url', { length: 256 }).notNull().unique(),
    title: varchar('title', { length: 256 }).notNull(),
    description: varchar('description', { length: 256 }).default('').notNull(),
    content: jsonb('content').$type<{ data: BlogElement[] }>().default({ data: [] }).notNull(),
    published: boolean('published').default(false).notNull(),
    featured: boolean('featured').default(false).notNull(),
    createdAt: timestamp('created_at').defaultNow().notNull(),
    updatedAt: timestamp('updated_at')
      .defaultNow()
      .notNull()
      .$onUpdate(() => new Date()),
    publishedAt: timestamp('published_at'),
    image: varchar('image', { length: 256 }),
  },
  (blogs) => ({
    blogURLIdx: uniqueIndex('blogs_url_idx').on(blogs.url),
  }),
)// schema.ts

export const blogs = createTable(
  'blogs',
  {
    id: serial('id').primaryKey(),
    url: varchar('url', { length: 256 }).notNull().unique(),
    title: varchar('title', { length: 256 }).notNull(),
    description: varchar('description', { length: 256 }).default('').notNull(),
    content: jsonb('content').$type<{ data: BlogElement[] }>().default({ data: [] }).notNull(),
    published: boolean('published').default(false).notNull(),
    featured: boolean('featured').default(false).notNull(),
    createdAt: timestamp('created_at').defaultNow().notNull(),
    updatedAt: timestamp('updated_at')
      .defaultNow()
      .notNull()
      .$onUpdate(() => new Date()),
    publishedAt: timestamp('published_at'),
    image: varchar('image', { length: 256 }),
  },
  (blogs) => ({
    blogURLIdx: uniqueIndex('blogs_url_idx').on(blogs.url),
  }),
)

// blogs.ts

export type BlogElementTypes =
  | {
      type: 'image'
      data: { src: string; alt: string; width: number; height: number }
      etc: { size?: number; priority?: boolean; border?: boolean }
    }
  | { type: 'video'; data: { src: string }; etc: any }
  | { type: BlogElementTextTypes; data: { text: string }; etc: any }
  | { type: 'code'; data: { text: string; language: string }; etc: any }
  | { type: 'callout'; data: { text: string; type: AlertColor }; etc: any }
  | { type: 'divider' | 'squiggle'; data: {}; etc: any }
  
export type BlogElement = BlogElementTypes & {
  id: string
}

export type BlogElementTextTypes = 'h1' | 'h2' | 'h3' | 'caption' | 'text' | 'bullet' | 'quote'

export type BlogElementTypeValues = Extract<BlogElement, { type: string }>['type']
export type BlogElementDataValues = Extract<BlogElement, { data: object }>['data']
export type BlogElementDataType<T extends BlogElementTypeValues> = Extract<BlogElement, { type: T }>// blogs.ts

export type BlogElementTypes =
  | {
      type: 'image'
      data: { src: string; alt: string; width: number; height: number }
      etc: { size?: number; priority?: boolean; border?: boolean }
    }
  | { type: 'video'; data: { src: string }; etc: any }
  | { type: BlogElementTextTypes; data: { text: string }; etc: any }
  | { type: 'code'; data: { text: string; language: string }; etc: any }
  | { type: 'callout'; data: { text: string; type: AlertColor }; etc: any }
  | { type: 'divider' | 'squiggle'; data: {}; etc: any }
  
export type BlogElement = BlogElementTypes & {
  id: string
}

export type BlogElementTextTypes = 'h1' | 'h2' | 'h3' | 'caption' | 'text' | 'bullet' | 'quote'

export type BlogElementTypeValues = Extract<BlogElement, { type: string }>['type']
export type BlogElementDataValues = Extract<BlogElement, { data: object }>['data']
export type BlogElementDataType<T extends BlogElementTypeValues> = Extract<BlogElement, { type: T }>

The blog content data is typed in the codebase instead of the database level as a list of BlogElement elements for future flexibility. The BlogElementTypes type is a union type defined by its type, data, and etc objects, where data defines the essential fields for an element while etc contains secondary optional data I may want to support later on.

Fetching, Caching & Rendering

Since the dashboard is hosted online, an authentication layer needs to be added to web requests. Authjs and Tanstack Query are used for auth and client-side state management in the builder, where CRUD operations are handled with Route Handlers. Nextjs server actions and server components are kind of a pain to use with client interactions and mutations, so the dashboard is made up of mostly client components.

// route.ts

export async function GET(_: Request, { params }: { params: { get: string } }) {
  const session = await auth()
  if (!session?.user) {
    return Response.json(
      { error: 'Unauthorized' },
      {
        status: 401,
      },
    )
  }

  const data = await db.query.blogs.findFirst({
    where: (blogs, { eq }) => eq(blogs.url, params.get),
  })

  if (!data) {
    return Response.json(
      { error: 'Not Found' },
      {
        status: 404,
      },
    )
  }

  const response: BlogGetResp = data
  return Response.json(response)
}// route.ts

export async function GET(_: Request, { params }: { params: { get: string } }) {
  const session = await auth()
  if (!session?.user) {
    return Response.json(
      { error: 'Unauthorized' },
      {
        status: 401,
      },
    )
  }

  const data = await db.query.blogs.findFirst({
    where: (blogs, { eq }) => eq(blogs.url, params.get),
  })

  if (!data) {
    return Response.json(
      { error: 'Not Found' },
      {
        status: 404,
      },
    )
  }

  const response: BlogGetResp = data
  return Response.json(response)
}

Blogs are immutable outside of the builder, meaning that server actions, server components, and caching are suitable in optimizing SEO and application performance on published blog pages. Blogs are fetched with the getBlog server action and are cached with their url in their cache tag for cache invalidations. The server action is called in the server rendered components to generate metadata and is streamed into the rendered UI.

// actions.ts

'use server'

export async function getBlog(key: string) {
  const fetchBlog = async (key: string) => {
    const data = await db.query.blogs.findFirst({
      where: and(eq(blogs.url, key), eq(blogs.published, true)),
    })

    return data ?? null
  }

  const getCachedBlog = cache(fetchBlog, {
    tags: [`blog-${key}`],
  })

  return await getCachedBlog(key)
}

export async function getLikes(key: string) {
  try {
    const count = await kv.get(key)
    if (count === null) {
      await kv.set(key, 0)
      return 0
    }

    return count as number
  } catch (error) {
    return -1
  }
}

export async function incrLikes(key: string, count: number = 1) {
  try {
    return await kv.incrby(key, count)
  } catch (error) {
    return -1
  }
}// actions.ts

'use server'

export async function getBlog(key: string) {
  const fetchBlog = async (key: string) => {
    const data = await db.query.blogs.findFirst({
      where: and(eq(blogs.url, key), eq(blogs.published, true)),
    })

    return data ?? null
  }

  const getCachedBlog = cache(fetchBlog, {
    tags: [`blog-${key}`],
  })

  return await getCachedBlog(key)
}

export async function getLikes(key: string) {
  try {
    const count = await kv.get(key)
    if (count === null) {
      await kv.set(key, 0)
      return 0
    }

    return count as number
  } catch (error) {
    return -1
  }
}

export async function incrLikes(key: string, count: number = 1) {
  try {
    return await kv.incrby(key, count)
  } catch (error) {
    return -1
  }
}

Blog likes are handled by Redis as a key-value store. Likes are backed up to the database daily with cron jobs just to be safe. ~~I would cache the blog content as well with Redis but I'm scared of going over the free tier on Vercel~~.

UI Features

The UI feature implementations are a lot less exciting to share, as it's mostly just following the docs from libraries that are used. Since all our attention spans are busted, here's a few GIFs of some of the features.

"Hours of trial and error will save you minutes of reading documentation."

Olivia Rodrigo

Drag & Drop Reordering

Implemented with dndkit, the drag & drop library to reorder elements

Image Uploading

Implemented with UploadThing, a wrapper around AWS S3 to upload & host files

Element Shortcuts & Commands

Element CRUD operations & type changing done with keyboard event listeners

Future Improvements

There's still a lot of features that I want to implement in the builder but aren't worth the time at the moment ~~I need to start job searching~~. Here's a few that I want to add in the future:

Video & Audio Media Elements

IFrame Embeds

Nested Layouts

👋 Thanks for stopping by!