WIP on feat/renewal-design

package.json

@@ -158,7 +158,7 @@
  "yaml-eslint-parser": "^1.2.3",
  "zod": "^3.23.8"
  },
- "packageManager": "pnpm@9.6.0",
+ "packageManager": "pnpm@9.12.1",
  "pnpm": {
  "patchedDependencies": {
  "[email protected]": "patches/[email protected]",

packages/lint-local-links-valid/package.json

@@ -24,6 +24,5 @@
  },
  "peerDependencies": {
  "eslint": ">=9.0.0"
- },
- "packageManager": "[email protected]"
+ }
 }

src/layouts/sidebar/search.tsx

@@ -65,11 +65,11 @@ export function SearchButton({ lang }: SearchButtonProps) {
 export const searchIndexKo = lazy(() => fetchSearchIndex("ko"));
 export const searchIndexEn = lazy(() => fetchSearchIndex("en"));
 async function fetchSearchIndex(lang: string): Promise<SearchIndex> {
- const res = await fetch(`/content-index/opi-${lang}.json`);
+ const res = await fetch(`/content-index/${lang}.json`);
  return JSON.parse((await res.text()).normalize("NFKD")) as SearchIndex;
 }
 
-export type SearchIndex = SearchIndexItem[];
+export type SearchIndex = Record<string, SearchIndexItem[]>;
 export interface SearchIndexItem {
  slug: string;
  title?: string;
@@ -98,7 +98,8 @@ export function SearchScreen(props: SearchScreenProps) {
  const fuse = createMemo(() => {
  const index = searchIndex.latest;
  if (!index) return;
- const filteredIndex = index
+ const filteredIndex = Object.values(index)
+ .flat()
  .filter((item) => {
  const navMenuSystemVersion =
  props.navMenuSystemVersions[item.slug.replace(/^opi/, "")];

src/misc/contentIndex.ts

@@ -1,6 +1,17 @@
+import type { Lang } from "~/type";
+
 export const indexFilesMapping = {
- blog: "blog/",
- "opi-ko": "opi/ko/",
- "release-notes": "release-notes/(note)/",
-} as const satisfies Record<string, string>;
-export type IndexFileName = keyof typeof indexFilesMapping;
+ ko: {
+ docs: {
+ "원 페이먼트 인프라": "opi/ko/",
+ "파트너 정산 자동화": "platform/",
+ "릴리즈 노트": "release-notes/(note)/",
+ },
+ blog: {
+ "기술 블로그": "blog/",
+ },
+ },
+ en: {
+ docs: { "docs-en": "docs/en/" },
+ },
+} as const satisfies Record<Lang, Record<string, Record<string, string>>>;

src/routes/(root).tsx

@@ -1,24 +1,51 @@
 import "~/styles/article.css";
 
 import { Link } from "@solidjs/meta";
-import { createAsync, useLocation } from "@solidjs/router";
-import { createMemo, type JSXElement } from "solid-js";
+import {
+ cache,
+ createAsync,
+ type RouteDefinition,
+ useLocation,
+} from "@solidjs/router";
+import { createMemo, createResource, type JSXElement, Show } from "solid-js";
 import { MDXProvider } from "solid-mdx";
 
 import * as prose from "~/components/prose";
 import type { DocsEntry } from "~/content/config";
 import Gnb from "~/layouts/gnb/Gnb";
 import SidebarProvider from "~/layouts/sidebar/context";
+import { SearchProvider, SearchScreen } from "~/layouts/sidebar/search";
 import SidebarBackground from "~/layouts/sidebar/SidebarBackground";
 import { getOpiFullSlug, loadDoc } from "~/misc/opi";
+import { calcNavMenuSystemVersions } from "~/state/nav";
 import { SystemVersionProvider } from "~/state/system-version";
+import type { Lang } from "~/type";
 
 interface Props {
  children: JSXElement;
 }
 
 const navAsMenuPaths = ["/platform", "/blog", "/release-notes"];
 
+export const route = {
+ preload: ({ location }) => {
+ const lang = location.pathname.includes("/en/") ? "en" : "ko";
+ void loadNavMenuSystemVersions(lang);
+
+ const fullSlug = getOpiFullSlug(location.pathname);
+ if (!fullSlug) return;
+
+ void loadDoc(fullSlug);
+ },
+} satisfies RouteDefinition;
+
+const loadNavMenuSystemVersions = cache(async (lang: Lang) => {
+ "use server";
+
+ const { navMenu } = await import("~/state/server-only/nav");
+ return calcNavMenuSystemVersions(navMenu[lang] || []);
+}, "nav-menu-system-versions");
+
 export default function Layout(props: Props) {
  const location = useLocation();
  const lang = createMemo(() =>
@@ -37,6 +64,9 @@ export default function Layout(props: Props) {
  throw e;
  }
  });
+ const [navMenuSystemVersions] = createResource(() =>
+ loadNavMenuSystemVersions(lang()),
+ );
 
  return (
  <SystemVersionProvider>
@@ -46,19 +76,29 @@ export default function Layout(props: Props) {
  />
  <SidebarProvider>
  <MDXProvider components={prose}>
- <div class="h-full flex flex-col">
- <Gnb
- lang={lang()}
- navAsMenu={navAsMenuPaths.some((path) =>
- location.pathname.startsWith(path),
+ <SearchProvider>
+ <div class="h-full flex flex-col">
+ <Gnb
+ lang={lang()}
+ navAsMenu={navAsMenuPaths.some((path) =>
+ location.pathname.startsWith(path),
+ )}
+ docData={docData()?.frontmatter as DocsEntry}
+ />
+ <SidebarBackground />
+ <main class="mx-auto max-w-8xl min-h-0 w-full flex-1 px-10">
+ {props.children}
+ </main>
+ </div>
+ <Show when={navMenuSystemVersions.latest}>
+ {(versions) => (
+ <SearchScreen
+ lang={lang()}
+ navMenuSystemVersions={versions()}
+ />
  )}
- docData={docData()?.frontmatter as DocsEntry}
- />
- <SidebarBackground />
- <main class="mx-auto max-w-8xl min-h-0 w-full flex-1 px-10">
- {props.children}
- </main>
- </div>
+ </Show>
+ </SearchProvider>
  </MDXProvider>
  </SidebarProvider>
  </SystemVersionProvider>

src/routes/(root)/opi.tsx

@@ -1,40 +1,15 @@
-import {
- cache,
- createAsync,
- type RouteDefinition,
- useLocation,
-} from "@solidjs/router";
-import { createMemo, createResource, type JSXElement, Show } from "solid-js";
+import { createAsync, useLocation } from "@solidjs/router";
+import { createMemo, type JSXElement, Show } from "solid-js";
 
 import { NotFoundError } from "~/components/404";
 import Metadata from "~/components/Metadata";
 import * as prose from "~/components/prose";
 import type { DocsEntry } from "~/content/config";
 import DocsNavMenu from "~/layouts/sidebar/DocsNavMenu";
 import RightSidebar from "~/layouts/sidebar/RightSidebar";
-import { SearchProvider, SearchScreen } from "~/layouts/sidebar/search";
 import { getOpiFullSlug, loadDoc } from "~/misc/opi";
-import { calcNavMenuSystemVersions } from "~/state/nav";
 import { Lang } from "~/type";
 
-const loadNavMenuSystemVersions = cache(async (lang: Lang) => {
- "use server";
-
- const { navMenu } = await import("~/state/server-only/nav");
- return calcNavMenuSystemVersions(navMenu[lang] || []);
-}, "opi/nav-menu-system-versions");
-
-export const route = {
- preload: ({ location }) => {
- const fullSlug = getOpiFullSlug(location.pathname);
- if (!fullSlug) return;
- const lang = fullSlug.split("/")[0];
-
- void loadDoc(fullSlug);
- void loadNavMenuSystemVersions(lang as Lang);
- },
-} satisfies RouteDefinition;
-
 export default function Docs(props: { children: JSXElement }) {
  const location = useLocation();
  const fullSlug = createMemo(() => {
@@ -52,54 +27,41 @@ export default function Docs(props: { children: JSXElement }) {
  deferStream: true,
  });
  const frontmatter = createMemo(() => doc()?.frontmatter as DocsEntry);
- const [navMenuSystemVersions] = createResource(params, ({ lang }) =>
- loadNavMenuSystemVersions(lang),
- );
 
  return (
- <SearchProvider>
- <div class="flex gap-5">
- <DocsNavMenu lang={params().lang} slug={params().slug} />
- <div class="min-w-0 flex flex-1 justify-center gap-5">
- <Show when={frontmatter()}>
- {(frontmatter) => (
- <>
- <Metadata
- title={frontmatter().title}
- description={frontmatter().description}
- ogType="article"
- ogImageSlug={`opi/${params().lang}/${params().slug}.png`}
- docsEntry={frontmatter()}
- />
- <article class="m-4 mb-40 min-w-0 flex shrink-1 basis-200 flex-col text-slate-7">
- <div class="mb-6">
- <prose.h1 id="overview">{frontmatter().title}</prose.h1>
- <Show when={frontmatter().description}>
- <p class="my-4 text-[18px] text-gray font-400 leading-[28.8px]">
- {frontmatter().description}
- </p>
- </Show>
- </div>
- {props.children}
- </article>
- </>
- )}
- </Show>
- <RightSidebar
- lang={params().lang}
- file={doc()?.file ?? ""}
- headings={doc()?.headings ?? []}
- />
- </div>
+ <div class="flex gap-5">
+ <DocsNavMenu lang={params().lang} slug={params().slug} />
+ <div class="min-w-0 flex flex-1 justify-center gap-5">
+ <Show when={frontmatter()}>
+ {(frontmatter) => (
+ <>
+ <Metadata
+ title={frontmatter().title}
+ description={frontmatter().description}
+ ogType="article"
+ ogImageSlug={`opi/${params().lang}/${params().slug}.png`}
+ docsEntry={frontmatter()}
+ />
+ <article class="m-4 mb-40 min-w-0 flex shrink-1 basis-200 flex-col text-slate-7">
+ <div class="mb-6">
+ <prose.h1 id="overview">{frontmatter().title}</prose.h1>
+ <Show when={frontmatter().description}>
+ <p class="my-4 text-[18px] text-gray font-400 leading-[28.8px]">
+ {frontmatter().description}
+ </p>
+ </Show>
+ </div>
+ {props.children}
+ </article>
+ </>
+ )}
+ </Show>
+ <RightSidebar
+ lang={params().lang}
+ file={doc()?.file ?? ""}
+ headings={doc()?.headings ?? []}
+ />
  </div>
- <Show when={navMenuSystemVersions.latest}>
- {(versions) => (
- <SearchScreen
- lang={params().lang}
- navMenuSystemVersions={versions()}
- />
- )}
- </Show>
- </SearchProvider>
+ </div>
  );
 }