-
-
-
-
diff --git a/apps/blog/next.config.js b/apps/blog/next.config.js
new file mode 100644
index 0000000..dd90483
--- /dev/null
+++ b/apps/blog/next.config.js
@@ -0,0 +1,8 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+ output: "export",
+ distDir: "build",
+ images: { unoptimized: true },
+}
+
+module.exports = nextConfig
diff --git a/apps/blog/package.json b/apps/blog/package.json
index 27d1748..d724b13 100644
--- a/apps/blog/package.json
+++ b/apps/blog/package.json
@@ -2,49 +2,46 @@
"name": "@developomp-site/blog",
"version": "0.0.0",
"private": true,
- "type": "module",
"scripts": {
- "dev": "vite",
- "build": "vite build",
- "lint": "eslint .",
- "preview": "vite preview",
+ "dev": "open-cli http://localhost:3000 && next dev",
+ "build": "next build",
+ "lint": "next lint",
"clean": "rm -rf .turbo build node_modules"
},
- "dependencies": {
+ "devDependencies": {
"@developomp-site/content": "workspace:*",
+ "@developomp-site/eslint-config": "workspace:*",
+ "@developomp-site/prettier-config": "workspace:*",
+ "@developomp-site/tailwind-config": "workspace:*",
"@fontsource/noto-sans-kr": "^5.0.5",
"@fontsource/source-code-pro": "^5.0.5",
"@fortawesome/free-brands-svg-icons": "^6.4.0",
"@fortawesome/free-solid-svg-icons": "^6.4.0",
"@fortawesome/react-fontawesome": "^0.2.0",
"@kunukn/react-collapse": "^2.2.10",
- "highlight.js": "^11.8.0",
- "hoofd": "^1.7.0",
- "katex": "^0.16.8",
- "react": "^18.2.0",
- "react-dom": "^18.2.0",
- "wouter": "^2.11.0",
- "zustand": "^4.3.9"
- },
- "devDependencies": {
- "@developomp-site/eslint-config": "workspace:*",
- "@developomp-site/prettier-config": "workspace:*",
- "@developomp-site/tailwind-config": "workspace:*",
"@types/highlight.js": "^10.1.0",
- "@types/katex": "^0.16.0",
- "@types/react": "^18.2.14",
+ "@types/katex": "^0.16.2",
+ "@types/node": "20.4.5",
+ "@types/react": "18.2.17",
"@types/react-collapse": "^5.0.1",
- "@types/react-dom": "^18.2.6",
- "@typescript-eslint/eslint-plugin": "^5.61.0",
- "@typescript-eslint/parser": "^5.61.0",
- "@vitejs/plugin-react": "^4.0.2",
- "eslint": "^8.44.0",
- "eslint-plugin-react-hooks": "^4.6.0",
- "eslint-plugin-react-refresh": "^0.4.2",
- "prettier-plugin-tailwindcss": "^0.3.0",
- "tailwindcss": "^3.3.2",
- "typescript": "^5.1.6",
- "vite": "^4.4.2",
- "vite-plugin-dynamic-import": "^1.5.0"
+ "@types/react-dom": "18.2.7",
+ "@typescript-eslint/eslint-plugin": "^6.2.0",
+ "@typescript-eslint/parser": "^6.2.0",
+ "autoprefixer": "10.4.14",
+ "eslint": "8.45.0",
+ "eslint-config-next": "13.4.12",
+ "eslint-plugin-prettier": "^4.2.1",
+ "highlight.js": "^11.8.0",
+ "katex": "^0.16.8",
+ "next": "13.4.12",
+ "open-cli": "^7.2.0",
+ "postcss": "8.4.27",
+ "prettier": "^2.8.8",
+ "prettier-plugin-tailwindcss": "^0.4.1",
+ "react": "18.2.0",
+ "react-dom": "18.2.0",
+ "tailwindcss": "3.3.3",
+ "typescript": "5.1.6",
+ "zustand": "^4.3.9"
}
}
diff --git a/apps/blog/postcss.config.js b/apps/blog/postcss.config.js
index d41ad63..fef1b22 100644
--- a/apps/blog/postcss.config.js
+++ b/apps/blog/postcss.config.js
@@ -1,4 +1,4 @@
-export default {
+module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
diff --git a/apps/blog/src/App.tsx b/apps/blog/src/App.tsx
deleted file mode 100644
index 7d84dfd..0000000
--- a/apps/blog/src/App.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { useTitleTemplate } from "hoofd"
-import { Route, Switch } from "wouter"
-
-import Footer from "@/components/Footer"
-import Header from "@/components/Header"
-import Loading from "@/components/Loading"
-import Home from "@/pages/Home"
-import NotFound from "@/pages/NotFound"
-import Page from "@/pages/Page"
-
-function App() {
- useTitleTemplate("pomp's blog | %s")
-
- return (
- <>
-
{prevURL ? (
-
+
@@ -31,14 +31,14 @@ export default function SeriesControlButtons({
)}
-
+
{nextURL ? (
-
+
diff --git a/apps/blog/src/pages/Page/Toc.scss b/apps/blog/src/app/[category]/[[...slug]]/Toc.scss
similarity index 100%
rename from apps/blog/src/pages/Page/Toc.scss
rename to apps/blog/src/app/[category]/[[...slug]]/Toc.scss
diff --git a/apps/blog/src/pages/Page/Toc.tsx b/apps/blog/src/app/[category]/[[...slug]]/Toc.tsx
similarity index 85%
rename from apps/blog/src/pages/Page/Toc.tsx
rename to apps/blog/src/app/[category]/[[...slug]]/Toc.tsx
index 51a537f..813a040 100644
--- a/apps/blog/src/pages/Page/Toc.tsx
+++ b/apps/blog/src/app/[category]/[[...slug]]/Toc.tsx
@@ -1,3 +1,5 @@
+"use client"
+
import "./Toc.scss"
import { faCaretDown, faCaretUp } from "@fortawesome/free-solid-svg-icons"
@@ -10,8 +12,9 @@ interface Props {
}
export default function Toc({ data }: Props) {
- const [isTocOpened, setIsTocOpened] = useState(
- localStorage.getItem("isTocOpened") === "true"
+ const [isTocOpened, setIsTocOpened] = useState(
+ typeof window !== "undefined" &&
+ localStorage.getItem("isTocOpened") === "true"
)
useEffect(() => {
diff --git a/apps/blog/src/pages/Page/helper.ts b/apps/blog/src/app/[category]/[[...slug]]/helper.ts
similarity index 79%
rename from apps/blog/src/pages/Page/helper.ts
rename to apps/blog/src/app/[category]/[[...slug]]/helper.ts
index cc75c8d..70f2e0f 100644
--- a/apps/blog/src/pages/Page/helper.ts
+++ b/apps/blog/src/app/[category]/[[...slug]]/helper.ts
@@ -2,27 +2,47 @@ import type { PageData } from "@developomp-site/content/src/types/types"
import contentMap from "@/contentMap"
+import { Params } from "./page"
+
export enum PageType {
POST,
SERIES,
SERIES_HOME,
}
-export async function fetchContent(content_id: string) {
+export interface Data {
+ pageData: PageData
+ pageType: PageType
+}
+
+export async function getData(params: Params): Promise {
+ const contentID = `/${params.category}/${params.slug.join("/")}`
+
+ const content = await fetchContent(contentID)
+ const pageType = categorizePageType(contentID) || PageType.POST
+ const pageData = parsePageData(content, pageType, contentID)
+
+ return {
+ pageData,
+ pageType,
+ }
+}
+
+export async function fetchContent(contentID: string) {
try {
return await import(
- `@developomp-site/content/dist/content${content_id}.json`
+ `@developomp-site/content/dist/content${contentID}.json`
)
} catch (err) {
return
}
}
-export function categorizePageType(content_id: string): PageType | undefined {
- if (content_id.startsWith("/post")) return PageType.POST
- if (content_id.startsWith("/series")) {
+export function categorizePageType(contentID: string): PageType | undefined {
+ if (contentID.startsWith("/post")) return PageType.POST
+ if (contentID.startsWith("/series")) {
// if the URL looks like /series/series-title (if the url has two slashes)
- if ([...(content_id.match(/\//g) || [])].length == 2)
+ if ([...(contentID.match(/\//g) || [])].length == 2)
return PageType.SERIES_HOME
// if the URL looks like /series/series-title/post-title (if the url does not have 2 slashes)
diff --git a/apps/blog/src/pages/Page/Page.tsx b/apps/blog/src/app/[category]/[[...slug]]/page.tsx
similarity index 60%
rename from apps/blog/src/pages/Page/Page.tsx
rename to apps/blog/src/app/[category]/[[...slug]]/page.tsx
index 4e37742..7f90803 100644
--- a/apps/blog/src/pages/Page/Page.tsx
+++ b/apps/blog/src/app/[category]/[[...slug]]/page.tsx
@@ -1,61 +1,66 @@
import "./Page.scss"
-import type { PageData } from "@developomp-site/content/src/types/types"
-import { useMeta, useTitle } from "hoofd"
-import { useEffect, useState } from "react"
-import { useLocation } from "wouter"
+import { type Metadata } from "next"
+import { type ParsedUrlQuery } from "querystring"
+import NotFound, { metadata as notFoundMetadata } from "@/app/not-found"
import Card from "@/components/Card"
-import Loading from "@/components/Loading"
import PostCard from "@/components/PostCard"
import Tag from "@/components/Tag"
import TagList from "@/components/TagList"
import contentMap from "@/contentMap"
-import NotFound from "../NotFound"
-import {
- categorizePageType,
- fetchContent,
- PageType,
- parsePageData,
-} from "./helper"
+import { getData, PageType } from "./helper"
import Meta from "./Meta"
import SeriesControlButtons from "./SeriesControlButtons"
import Toc from "./Toc"
-export default function Page() {
- const [location] = useLocation()
- const [pageData, setPageData] = useState(undefined)
- const [pageType, setPageType] = useState(PageType.POST)
- const [isLoading, setLoading] = useState(true)
+export interface Params extends ParsedUrlQuery {
+ category: "posts" | "series"
+ slug: string[]
+}
- useTitle(pageData?.title || "Loading")
- useMeta({ property: "og:title", content: pageData?.title })
+interface Props {
+ params: Params
+}
- useEffect(() => {
- setPageData(undefined)
- setLoading(true)
+export async function generateStaticParams(): Promise {
+ return Object.keys(contentMap.posts).map((key) => {
+ const contentID = key.replace(/\/$/, "") // remove trailing slash
+ const parts = contentID
+ .split("/") // /a/b/c/ => ['', 'a', 'b', 'c', '']
+ .filter((x) => x) // ['', 'a', 'b', 'c', ''] => ['a', 'b', 'c']
- const content_id = location.replace(/\/$/, "") // remove trailing slash
+ const category = parts[0]
+ if (category !== "posts" && category !== "series")
+ throw "Invalid Page Type"
- fetchContent(content_id).then((fetched_content) => {
- const pageType = categorizePageType(content_id)
+ const slug = parts.slice(1) // ['a', 'b', 'c'] => ['b', 'c']
- // stop loading without setting pageData so 404 page will display
- if (!fetched_content || pageType === undefined) {
- setLoading(false)
- return
- }
+ return { category, slug }
+ })
+}
- setPageData(parsePageData(fetched_content, pageType, content_id))
- setPageType(pageType)
- setLoading(false)
- })
- }, [location])
+export async function generateMetadata({ params }: Props): Promise {
+ if (params.category != "posts" && params.category != "series")
+ return notFoundMetadata
- if (isLoading) return
+ {children}
+
+
+
+
+ )
+}
diff --git a/apps/blog/src/pages/NotFound/NotFound.tsx b/apps/blog/src/app/not-found.tsx
similarity index 51%
rename from apps/blog/src/pages/NotFound/NotFound.tsx
rename to apps/blog/src/app/not-found.tsx
index e936e62..23bb045 100644
--- a/apps/blog/src/pages/NotFound/NotFound.tsx
+++ b/apps/blog/src/app/not-found.tsx
@@ -1,11 +1,16 @@
-import { useMeta, useTitle } from "hoofd"
+import { type Metadata } from "next"
import Card from "@/components/Card"
-export default function NotFound() {
- useTitle("404")
- useMeta({ property: "og:title", content: "pomp's blog | Page Not Found" })
+export const metadata: Metadata = {
+ metadataBase: new URL("https://blog.developomp.com"),
+ title: "404",
+ openGraph: {
+ title: "pomp's blog | Page Not Found",
+ },
+}
+export default function NotFound() {
return (
404
diff --git a/apps/blog/src/app/page.tsx b/apps/blog/src/app/page.tsx new file mode 100644 index 0000000..ce2dd4a --- /dev/null +++ b/apps/blog/src/app/page.tsx @@ -0,0 +1,12 @@ +import { Metadata } from "next" + +import Home from "./Home" + +export const metadata: Metadata = { + metadataBase: new URL("https://blog.developomp.com"), + title: "pomp's blog | Home", +} + +export default function Page() { + return
-
-
- 
-
+
+
-
+
+
diff --git a/apps/blog/src/components/Header/SearchButton.tsx b/apps/blog/src/components/Header/SearchButton.tsx
index 45b8595..2460656 100644
--- a/apps/blog/src/components/Header/SearchButton.tsx
+++ b/apps/blog/src/components/Header/SearchButton.tsx
@@ -1,13 +1,15 @@
import { faSearch } from "@fortawesome/free-solid-svg-icons"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { Link } from "wouter"
+import Link from "next/link"
export default function SearchButton() {
return (
-
-
-
-
- {title}
- {/* show "(series)" for urls that matches regex "/series/
-
-
- {tags &&
- tags.map((tag) => (
-
-
-
- {title}
- {/* show "(series)" for urls that matches regex "/series/" */}
- {/\/series\/[^/]*$/.test(content_id) && " (series)"}
-
-
- -
-
+
+ {title}
+ {/* show "(series)" for urls that matches regex "/series/
+
+
+ {tags &&
+ tags.map((tag) => (
+
+
+
)
}
diff --git a/apps/blog/src/pages/Home/ShowMoreButton.tsx b/apps/blog/src/components/ShowMoreButton.tsx
similarity index 100%
rename from apps/blog/src/pages/Home/ShowMoreButton.tsx
rename to apps/blog/src/components/ShowMoreButton.tsx
diff --git a/apps/blog/src/main.tsx b/apps/blog/src/main.tsx
deleted file mode 100644
index 34e42f7..0000000
--- a/apps/blog/src/main.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import "@fontsource/noto-sans-kr/400.css"
-import "@fontsource/noto-sans-kr/700.css"
-import "@fontsource/source-code-pro"
-import "katex/dist/katex.min.css"
-import "./index.css"
-import "./styles/anchor.scss"
-import "./styles/blockQuote.scss"
-import "./styles/button.scss"
-import "./styles/callout.scss"
-import "./styles/checkbox.scss"
-import "./styles/code.scss"
-import "./styles/colorChip.scss"
-import "./styles/global.scss"
-import "./styles/heading.scss"
-import "./styles/hr.scss"
-import "./styles/img.scss"
-import "./styles/katex.scss"
-import "./styles/kbd.scss"
-import "./styles/list.scss"
-import "./styles/mark.scss"
-import "./styles/scrollbar.scss"
-import "./styles/subSup.scss"
-import "./styles/table.scss"
-
-import ReactDOM from "react-dom/client"
-
-import App from "@/App.tsx"
-
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
- ()((set) => {
- applyTheme()
-
- addEventListener("storage", () => {
- setTheme(getStoredThemeSetting())
+ if (typeof window !== "undefined") {
applyTheme()
- })
+
+ addEventListener("storage", () => {
+ setTheme(getStoredThemeSetting())
+ applyTheme()
+ })
+ }
return {
theme: getStoredThemeSetting(),
diff --git a/apps/blog/src/vite-env.d.ts b/apps/blog/src/vite-env.d.ts
deleted file mode 100644
index 11f02fe..0000000
--- a/apps/blog/src/vite-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-///
-
-
-
-
-
+
+ {title}
+ {/* show "(series)" for urls that matches regex "/series/" */}
+ {/\/series\/[^/]*$/.test(content_id) && " (series)"}
+
+
+ +
+
+
+
+
-
-
-
+
+
+
+
+