feat: add notion as cms

.env.example

@@ -0,0 +1,7 @@
+# Connection to Notion API
+# see: https://developers.notion.com/docs/create-a-notion-integration
+NOTION_API_KEY=""
+
+# Edge Config is a key-value data store associated with your Vercel account
+# see: https://vercel.com/docs/concepts/edge-network/edge-config/get-started
+EDGE_CONFIG="https://edge-config.vercel.com/your_edge_config_id_here?token=your_edge_config_read_access_token_here"

package.json

@@ -10,12 +10,14 @@
   },
   "dependencies": {
     "@next/font": "13.1.6",
+    "@notionhq/client": "^2.2.3",
     "@radix-ui/react-collapsible": "^1.0.1",
     "@radix-ui/react-dropdown-menu": "^2.0.2",
     "@radix-ui/react-scroll-area": "^1.0.2",
     "@types/node": "18.13.0",
     "@types/react": "18.0.27",
     "@types/react-dom": "18.0.10",
+    "@vercel/edge-config": "^0.1.1",
     "eslint": "8.33.0",
     "eslint-config-next": "13.1.6",
     "lucide-react": "^0.112.0",

src/app/others/dev-setup/page.tsx

@@ -1,25 +1,21 @@
 import { CodePreview } from '@/components/CodePreview'
+import { getCodeBlockFromNotion } from '@/lib/notion-client'
+import { getNotionPagesId } from '@/lib/vercel-edge-config'
 import shiki from 'shiki'
 
 export const metadata = {
   title: 'Dev Setup',
 }
 
-const markdown = `
-# Dev Setup
-
-- MacBook M1 Max (64gb Memory)
-- LG 25" UltraWide Display
-
-That's it, nothing more.
-`.trim()
-
 export default async function DevSetup() {
+  const { setup_dev } = await getNotionPagesId()
+  const { content } = await getCodeBlockFromNotion(setup_dev)
+
   const highlighter = await shiki.getHighlighter({
     theme: 'rose-pine-moon',
   })
 
-  const code = highlighter.codeToHtml(markdown, { lang: 'md' })
+  const code = highlighter.codeToHtml(content, { lang: 'md' })
 
   return <CodePreview code={code} />
-}
+}

src/app/others/gaming-setup/page.tsx

@@ -1,36 +1,21 @@
 import { CodePreview } from '@/components/CodePreview'
+import { getCodeBlockFromNotion } from '@/lib/notion-client'
+import { getNotionPagesId } from '@/lib/vercel-edge-config'
 import shiki from 'shiki'
 
 export const metadata = {
   title: 'Gaming Setup',
 }
 
-const markdown = `
-# Gaming Setup
-
-- Intel Core i5-9600KF 3.7Ghz
-- 2x HyperX Fury 16GB 3000Mhz
-- Gigabyte Z390M Gaming
-- Cooler Master ATX 500W 80 Plus
-- 2x Corsair SSD MP510 480GB NVMe
-- Gigabyte NVIDIA GeForce RTX 2060 6G
-
-
-## Peripherals
-
-- Logitech G PRO Wireless Mouse
-- Keychron K2 Keyboard (Brown Switch)
-- Samsung 23.5" Curved 144hz 1ms Display
-
-That's it, nothing more.
-`.trim()
-
 export default async function GamingSetup() {
+  const { setup_gaming } = await getNotionPagesId()
+  const { content } = await getCodeBlockFromNotion(setup_gaming)
+
   const highlighter = await shiki.getHighlighter({
     theme: 'rose-pine-moon',
   })
 
-  const code = highlighter.codeToHtml(markdown, { lang: 'md' })
+  const code = highlighter.codeToHtml(content, { lang: 'md' })
 
   return <CodePreview code={code} />
 }

src/app/terminal/fish/page.tsx

@@ -1,27 +1,21 @@
 import { CodePreview } from '@/components/CodePreview'
+import { getCodeBlockFromNotion } from '@/lib/notion-client'
+import { getNotionPagesId } from '@/lib/vercel-edge-config'
 import shiki from 'shiki'
 
 export const metadata = {
   title: 'Fish',
 }
 
-const fishConfig = `if status is-interactive
-# Commands to run in interactive sessions can go here
-end
-
-set SPACEFISH_PROMPT_ADD_NEWLINE false
-
-starship init fish | source
-
-# Aliases
-# alias cat="bat --theme=\$(defaults read -globalDomain AppleInterfaceStyle &> /dev/null && echo default || echo GitHub)"`
-
 export default async function FishConfig() {
+  const { terminal_fish } = await getNotionPagesId()
+  const { content } = await getCodeBlockFromNotion(terminal_fish)
+
   const highlighter = await shiki.getHighlighter({
     theme: 'rose-pine-moon',
   })
 
-  const code = highlighter.codeToHtml(fishConfig, { lang: 'fish' })
+  const code = highlighter.codeToHtml(content, { lang: 'fish' })
 
-  return <CodePreview code={code} raw={fishConfig} />
+  return <CodePreview code={code} raw={content} />
 }

src/app/terminal/general/page.tsx

@@ -1,37 +1,21 @@
 import { CodePreview } from '@/components/CodePreview'
+import { getCodeBlockFromNotion } from '@/lib/notion-client'
+import { getNotionPagesId } from '@/lib/vercel-edge-config'
 import shiki from 'shiki'
 
 export const metadata = {
   title: 'Terminal',
 }
 
-const markdown = `
-# General
-
-Currently I'm using the combo Fish + Starship in my terminal.
-
-Fish Shell: https://fishshell.com/
-Starship: https://starship.rs/
-
----
-
-I'm also using Warp as my terminal emulator.
-
-Warp: https://www.warp.dev/
-
----
-
-For the theme, I chose Rosé Pine Moon variant: 
-
-Theme: https://github.com/austintraver/warp-theme/blob/main/base16_rose_pine_moon.yaml
-`.trim()
-
 export default async function General() {
+  const { terminal_general } = await getNotionPagesId()
+  const { content } = await getCodeBlockFromNotion(terminal_general)
+
   const highlighter = await shiki.getHighlighter({
     theme: 'rose-pine-moon',
   })
 
-  const code = highlighter.codeToHtml(markdown, { lang: 'md' })
+  const code = highlighter.codeToHtml(content, { lang: 'md' })
 
   return <CodePreview code={code} />
 }

src/lib/notion-client.ts

@@ -0,0 +1,20 @@
+import { Client, isFullBlock } from '@notionhq/client'
+import { CodeBlockObjectResponse } from '@notionhq/client/build/src/api-endpoints'
+
+export const notionClient = new Client({ auth: process.env.NOTION_API_KEY })
+
+export async function getCodeBlockFromNotion(pageId: string) {
+  const { results } = await notionClient.blocks.children.list({ block_id: pageId })
+
+  const codeBlock = results.find(
+    block => isFullBlock(block) && block.type === 'code'
+  ) as CodeBlockObjectResponse | undefined
+
+  if (!codeBlock) {
+    throw new Error(`Failed to fetch Notion content of ID: ${pageId}`)
+  }
+
+  const { plain_text } = codeBlock.code.rich_text[0]
+
+  return { content: plain_text }
+}