Migrate the blog to MDX using velite (#18)

* Migrate the blog to use mdx files

Signed-off-by: Adam Gutglick <adam@spiraldb.com>

* Use velite to render MDX posts

Signed-off-by: Adam Gutglick <adam@spiraldb.com>

* Solve a rendering issue, removing some akward line breaks

Signed-off-by: Adam Gutglick <adam@spiraldb.com>

* Change package manager to bun

Signed-off-by: Adam Gutglick <adam@spiraldb.com>

---------

Signed-off-by: Adam Gutglick <adam@spiraldb.com>

Author: AdamGS

.gitignore

@@ -39,3 +39,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+#velite generated files
+.velite
+public/static

CLAUDE.md

@@ -4,16 +4,17 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ## Development Commands
 
-- `bun run dev` - Start development server with Turbopack
-- `bun run build` - Build production application
-- `bun run lint` - Run ESLint
+- `bun dev` - Start development server with Turbopack
+- `bun build` - Build production application
+- `bun lint` - Run ESLint
 - `bun start` - Start production server
 
 ## Architecture Overview
 
 This is a Next.js 15 marketing website for Vortex, a columnar file format. The site features:
 
 ### Core Technologies
+
 - **Next.js 15** with App Router and Turbopack for development
 - **React 19** with TypeScript
 - **TailwindCSS 4** for styling
@@ -22,21 +23,24 @@ This is a Next.js 15 marketing website for Vortex, a columnar file format. The s
 - **Vercel Analytics** for performance monitoring
 
 ### Visual System
+
 - **3D Logo Animation**: WebGL-rendered GLTF model (`/public/logo.glb`) with ASCII art shader effect
 - **Interactive Mouse/Touch Controls**: Model rotates based on user interaction
 - **Responsive Design**: Different camera positions and sizing for mobile/desktop
 - **Custom Fonts**: Geist Sans, Geist Mono, and Funnel Display
 
 ### Component Structure
+
 - `HeroASCII` - Main 3D logo component with WebGL rendering and ASCII conversion
 - `Overlay` - Text overlay on top of the 3D scene
 - Layout components (`Header`, `Footer`) wrap all pages
 - 404 page has its own hero variant (`hero-404`, `overlay-404`)
 
 ### Key Files
+
 - `src/app/page.tsx` - Homepage with metadata for SEO
 - `src/components/hero/index.tsx` - Complex WebGL rendering with custom shaders
 - `src/app/layout.tsx` - Root layout with analytics providers and font loading
 - `next.config.ts` - Plausible proxy configuration
 
-The site is optimized for performance with font optimization, analytics integration, and responsive WebGL rendering.
+The site is optimized for performance with font optimization, analytics integration, and responsive WebGL rendering.

README.md

@@ -2,25 +2,13 @@ This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-
 
 ## Getting Started
 
-First, install dependencies and run the development server:
+Start by install the [bun](https://bun.sh/) package manager.
 
-```bash
-npm install
-npm run dev
-```
-
-or
-
-```bash
-yarn install
-yarn dev
-```
-
-or
+Then, install dependencies and run the development server:
 
 ```bash
-pnpm install
-pnpm dev
+bun install
+bun dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
@@ -29,7 +17,7 @@ You can start editing the page by modifying `app/page.tsx`. The page auto-update
 
 This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
 
-**Note:** The deployment is managed by `pnpm`, so any dependency change should be managed by it and reflected in `pnpm-lock.yaml`.
+**Note:** The deployment is managed by `bun`, so any dependency change should be managed by it and reflected in `bun.lock`.
 
 ## Learn More
 

bun.lock

@@ -1,7 +1,15 @@
-import type { NextConfig } from "next";
 import { withPlausibleProxy } from "next-plausible";
 
-const nextConfig: NextConfig = withPlausibleProxy()({
+// Start Velite automatically with Next.js (recommended approach)
+const isDev = process.argv.indexOf("dev") !== -1;
+const isBuild = process.argv.indexOf("build") !== -1;
+if (!process.env.VELITE_STARTED && (isDev || isBuild)) {
+  process.env.VELITE_STARTED = "1";
+  const { build } = await import("velite");
+  await build({ watch: isDev, clean: !isDev });
+}
+
+const nextConfig = withPlausibleProxy()({
   async headers() {
     return [
       {
@@ -33,7 +41,8 @@ const nextConfig: NextConfig = withPlausibleProxy()({
       },
       {
         source: "/slack",
-        destination: "https://join.slack.com/t/spiraldb/shared_invite/zt-382vtcz8y-Fe5YEL2_zShwSCgNRnwktQ",
+        destination:
+          "https://join.slack.com/t/spiraldb/shared_invite/zt-382vtcz8y-Fe5YEL2_zShwSCgNRnwktQ",
         permanent: false
       }
     ];

next.config.ts next.config.mjsnext.config.ts renamed to next.config.mjs

@@ -9,16 +9,19 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@mdx-js/react": "^3.1.1",
+    "@next/mdx": "^15.5.3",
+    "@tailwindcss/typography": "^0.5.18",
     "@vercel/analytics": "^1.5.0",
-    "gray-matter": "^4.0.3",
     "next": "15.2.4",
     "next-plausible": "^3.12.4",
     "ogl": "^1.0.11",
     "prettier": "^3.5.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-markdown": "^10.1.0",
-    "use-scramble": "^2.2.15"
+    "use-scramble": "^2.2.15",
+    "velite": "^0.3.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",