문서 페이지 레이아웃, /docs/ko/readme, 검색 인덱스 포팅 및 404 개선

app.config.ts

@@ -1,21 +1,29 @@
 import { readFile } from "node:fs/promises";
-import path from "node:path";
 
 import yaml from "@rollup/plugin-yaml";
 import { defineConfig } from "@solidjs/start/config";
 import vinxiMdxPkg from "@vinxi/plugin-mdx";
+import rehypeSlug from "rehype-slug";
 import remarkFrontmatter from "remark-frontmatter";
 import unocss from "unocss/vite";
 import { imagetools } from "vite-imagetools";
 
 // 현재 Vinxi export 설정 이슈로 파일을 직접 가져와야 함
 import type { CustomizableConfig } from "./node_modules/vinxi/dist/types/lib/vite-dev";
+import { indexFilesMapping } from "./src/misc/contentIndex";
 
 const { default: vinxiMdx } = vinxiMdxPkg;
 
 export default defineConfig({
   server: {
     preset: "vercel",
+    prerender: {
+      routes: [
+        ...Object.keys(indexFilesMapping).map(
+          (fileName) => `/content-index/${fileName}.json`,
+        ),
+      ],
+    },
   },
   extensions: ["ts", "tsx", "mdx"],
   vite: () =>
@@ -34,6 +42,7 @@ export default defineConfig({
           jsxImportSource: "solid-js",
           providerImportSource: "solid-mdx",
           remarkPlugins: [remarkFrontmatter],
+          rehypePlugins: [rehypeSlug],
         }),
         imagetools({
           defaultDirectives: (url) => {

package.json

@@ -15,9 +15,13 @@
 		"lint": "NODE_OPTIONS=\"$NODE_OPTIONS --loader ts-node/esm\" eslint .",
 		"eslint": "NODE_OPTIONS=\"$NODE_OPTIONS --loader ts-node/esm\" eslint"
 	},
-  "imports": {
-    "#content": "./src/content/__generated__/index.ts"
-  },
+	"imports": {
+		"#content": "./src/content/__generated__/index.ts",
+		"#server-only": {
+			"browser": "./src/misc/server-only/browserError.ts",
+			"default": "./src/misc/server-only/serverNoop.ts"
+		}
+	},
 	"dependencies": {
 		"@eslint/js": "^8.57.0",
 		"@iconify-json/ic": "^1.1.17",
@@ -72,6 +76,7 @@
 		"monaco-editor": "^0.47.0",
 		"pretendard": "^1.3.9",
 		"prettier": "^3.2.5",
+		"rehype-slug": "^6.0.0",
 		"rehype-stringify": "^10.0.0",
 		"remark-frontmatter": "^5.0.0",
 		"remark-gfm": "^4.0.0",

src/app.tsx

@@ -3,6 +3,7 @@ import { Router } from "@solidjs/router";
 import { FileRoutes } from "@solidjs/start/router";
 import { Suspense } from "solid-js";
 
+import { NotFoundBoundary } from "./components/404";
 import Trackers from "./layouts/trackers/Trackers";
 
 export default function App() {
@@ -15,7 +16,9 @@ export default function App() {
           <Meta name="viewport" content="width=device-width,initial-scale=1" />
           <Link rel="icon" type="image/png" href="/favicon.png" />
           <Trackers />
-          <Suspense>{props.children}</Suspense>
+          <Suspense>
+            <NotFoundBoundary>{props.children}</NotFoundBoundary>
+          </Suspense>
         </MetaProvider>
       )}
     >

src/components/404.tsx

@@ -0,0 +1,58 @@
+import { HttpStatusCode } from "@solidjs/start";
+import { ErrorBoundary, type JSXElement } from "solid-js";
+
+import portoneGradientBg from "~/assets/portone-gradient-bg.png?imagetools";
+import portoneLogoWhite from "~/assets/portone-logo-white.png?imagetools";
+
+import Picture from "./Picture";
+
+export class NotFoundError extends Error {
+  constructor() {
+    super("Not Found");
+    this.name = "NotFoundError";
+  }
+}
+
+export function NotFoundBoundary(props: { children: JSXElement }) {
+  return (
+    <ErrorBoundary
+      fallback={(err) => {
+        if (err instanceof Error && err.name === "NotFoundError") {
+          return <NotFoundPage />;
+        }
+        throw err;
+      }}
+    >
+      {props.children}
+    </ErrorBoundary>
+  );
+}
+
+function NotFoundPage() {
+  return (
+    <>
+      <HttpStatusCode code={404} />
+      <Picture
+        picture={portoneGradientBg}
+        alt="PortOne"
+        class="absolute inset-0 h-full w-full object-cover object-center"
+      />
+      <div class="relative h-full flex flex-col items-center justify-center gap-3xl text-white">
+        <div class="flex flex-col items-center gap-2.5">
+          <Picture picture={portoneLogoWhite} alt="PortOne" class="w-40" />
+          <span class="text-7xl font-bold tracking-[0.08em]">404</span>
+          <span class="text-2xl tracking-[0.06em]">
+            페이지를 찾을 수 없습니다
+          </span>
+        </div>
+        <button
+          class="flex items-center gap-1 border border-gray-300 rounded-md bg-[rgb(255_255_255_/_4%)] px-4 py-3 transition-colors active:bg-portone focus:bg-[rgb(255_255_255_/16%)] hover:bg-[rgb(255_255_255_/16%)] active:text-white focus:text-portone hover:text-portone"
+          onClick={() => history.back()}
+        >
+          <i class="i-ic-baseline-arrow-back text-lg"></i>
+          <span class="text-sm">뒤로 돌아가기</span>
+        </button>
+      </div>
+    </>
+  );
+}

src/components/gitbook/ContentRef.tsx

@@ -0,0 +1,31 @@
+import { cache, createAsync } from "@solidjs/router";
+import { createMemo, Show } from "solid-js";
+
+interface Props {
+  slug: string;
+}
+
+const getEntryData = cache(async (slug: string) => {
+  "use server";
+
+  const { docs } = await import("#content");
+  return (docs as Record<string, (typeof docs)[keyof typeof docs]>)[slug]
+    ?.frontmatter;
+}, "docs/entry");
+
+export default function ContentRef(props: Props) {
+  const slug = createMemo(() => props.slug.slice(1));
+  const entryData = createAsync(() => getEntryData(slug()));
+  const title = createMemo(() => entryData()?.title);
+
+  return (
+    <Show when={title()}>
+      <a class="m-4" href={`/docs/${slug()}`}>
+        <div class="flex items-center justify-between gap-4 border rounded bg-white p-4 transition-transform hover:translate-y-[-2px] hover:text-orange-5 hover:drop-shadow-[0_12px_13px_rgba(0,0,0,0.02)]">
+          <span>{title()}</span>
+          <i class="i-ic-baseline-chevron-right inline-block text-2xl" />
+        </div>
+      </a>
+    </Show>
+  );
+}

src/components/gitbook/VersionGate.tsx

@@ -1,48 +1,14 @@
-import type React from "react";
+import { type JSXElement, Show } from "solid-js";
 
-import { useSystemVersion } from "#state/system-version";
-import { useServerFallback } from "~/misc/useServerFallback";
-import type { SystemVersion } from "~/type";
+import { useSystemVersion } from "~/state/system-version";
 
 interface Props {
-  serverSystemVersion: SystemVersion;
-  default?: SystemVersion;
-  v1?: React.ReactNode;
-  v2?: React.ReactNode;
-  children?: React.ReactNode;
+  v: "v1" | "v2";
+  children?: JSXElement;
 }
 
-const isEmptyStaticHtml = (node: React.ReactNode) => {
-  if (!(node && typeof node === "object" && "props" in node)) return false;
-  const props = node.props as unknown;
-
-  return Boolean(
-    props &&
-      typeof props === "object" &&
-      "value" in props &&
-      !JSON.parse(JSON.stringify(props.value)),
-  );
-};
-
 export default function VersionGate(props: Props) {
-  const systemVersion = useServerFallback(
-    useSystemVersion(),
-    props.serverSystemVersion,
-  );
-
-  const hasV1 = !isEmptyStaticHtml(props.v1);
-  const hasV2 = !isEmptyStaticHtml(props.v2);
-  const v1 = hasV1 ? props.v1 : null;
-  const v2 = hasV2 ? props.v2 : null;
+  const { systemVersion } = useSystemVersion();
 
-  return (
-    <>
-      {
-        {
-          v1: props.default === "v1" ? v1 ?? props.children : v1,
-          v2: props.default === "v2" ? v2 ?? props.children : v2,
-        }[systemVersion]
-      }
-    </>
-  );
+  return <Show when={systemVersion() === props.v}>{props.children}</Show>;
 }