Hello World

Welcome to my blog. Here's how this blog was created.

Todo Items

Notion API - remote mdx CMS
~~Table of contents~~
login ? how - to sepearte view with Draft and 'published' posts
~~copy button inside the code~~
~~cleanup old notes~~
~~add networking posts~~
~~tagging / categories~~
~~mdx component "a href to replace with Link or _new window"~~ mdx href post
~~searchbar for full text content~~
integrate with chatgpt api ?
learning ai ?

Why spend an entire weekend building this?

The best way to learn is by actually doing it.

I spent the weekend learning about Next.js and Tailwind CSS . Previously, my site was hosted using a tailwindcss template, and it worked great. There are tons of static blog generator out there, from 'flask', to 'jekyll' . However with GenAI ChatGPT Copilet, finding answers to almost anything related to tech is almost instant, cheap and easy— all you need to just ask the right questions . So why host a blog when AI can give you direct answers?

I guess learning scripting / programming, networking - for an example SNI and platform CI/CD deployment is one thing. Integrating APIs and adding features is another.

Building something from scratch is really satisfying because it helps me understand how everything fits together and gives you the confidence to make changes or add new features. I've got a lot of Udemy videos that I haven't watched yet, and I have a backlog of educational content and Steam games I still need free time to play.

Maybe my blog is just a way to track the topics I've come across and might help me to explore new idea in the future.

Here's how this blog was created

Packages that used ... to be continued

Import the font in the root layer

import "@/styles/globals.css"
import { Inter as FontSans } from "next/font/google"
 
import { cn } from "@/lib/utils"
 
const fontSans = FontSans({
  subsets: ["latin"],
  variable: "--font-sans",
})
 
export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head />
      <body
        className={cn(
          "min-h-screen bg-background font-sans antialiased",
          fontSans.variable
        )}
      >
        ...
      </body>
    </html>
  )
}

Configure theme.extend.fontFamily in tailwind.config.js

const { fontFamily } = require("tailwindcss/defaultTheme")
 
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-sans)", ...fontFamily.sans],
      },
    },
  },
}

Adding button

`npx shadcn-ui@latest add button`
import { buttonVariants } from "@/components/ui/button";
 
<Link
              href="/blog/hello-world"
              className={cn(buttonVariants({ size: "lg" }), "w-full sm:w-fit")}
            >
              Why I build this Blog
 </Link>

Install dependencies

`npm install nextjs@latest`
archie@amd /mnt/2/src/nextjs/course/jl-blog (git)-[main] % npm install rehype-pretty-code -D
archie@amd /mnt/2/src/nextjs/course/jl-blog (git)-[main] % npm install rehype-autolink-headings -D
archie@amd /mnt/2/src/nextjs/course/jl-blog (git)-[main] % npm install rehype-slug -D
npm install @rehype-pretty/transformers

Shadcn UI

npx shadcn@latest add button
npx shadcn@latest add badge