Skip to content

Commit 4c96357

Browse files
Moon-DaeSeungMoon-DaeSeung
authored
refactor components folder tree (more semantic) (#10)
* refactor components folder tree in docs * tmp
1 parent 57bc3b1 commit 4c96357

File tree

11 files changed

+167
-37
lines changed

11 files changed

+167
-37
lines changed

‎app/[lang]/guide/[group]/[slug]/guide-page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
NavigationButton,
1111
Sidebar,
1212
TOC,
13-
} from "@/components";
13+
} from "@/components/docs";
1414
import { generateTOC } from "@/lib/generateTOC";
1515

1616
interface GuidePageProps {

‎app/layout.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import type { Metadata } from "next";
22
import localFont from "next/font/local";
33
import "./globals.css";
4-
import { Navigation, ThemeProvider } from "@/components";
4+
import { ThemeProvider } from "@/components/theme-provider";
5+
import Navigation from "@/components/navigation";
56

67
const pretendard = localFont({
78
src: "./fonts/Pretendard-Regular.woff",

‎components/dynamic-layout.tsx renamed to ‎components/docs/dynamic-layout.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use client";
22

3-
import useIsMobile from "../hooks/useIsMobile";
3+
import useIsMobile from "@/hooks/useIsMobile";
44

55
interface DynamicLayoutProps {
66
sidebar: React.ReactNode;
@@ -19,7 +19,7 @@ export default function DynamicLayout({
1919

2020
return (
2121
<div
22-
className={`flex flex-col justify-center gap-5 md:flex-row ${isMobile ? "p-4" : "p-5"}`}
22+
className={`flex flex-col justify-center gap-5 md:flex-row bg-primary ${isMobile ? "p-4" : "p-5"}`}
2323
>
2424
{!isMobile && <div>{sidebar}</div>}
2525
{isMobile && <div>{mobileSidebar}</div>}

‎components/docs/guide-page.tsx

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
"use client";
2+
3+
import React, { useEffect } from "react";
4+
import ReactMarkdown from "react-markdown";
5+
import rehypeRaw from "rehype-raw";
6+
import rehypeHighlight from "rehype-highlight";
7+
import {
8+
DynamicLayout,
9+
MobileSidebar,
10+
NavigationButton,
11+
Sidebar,
12+
TOC,
13+
} from "@/components/docs";
14+
import { generateTOC } from "@/lib/generateTOC";
15+
16+
interface GuidePageProps {
17+
params: {
18+
lang: string;
19+
group: string;
20+
slug: string;
21+
};
22+
content: string;
23+
title: string;
24+
prevDocument: any;
25+
nextDocument: any;
26+
allDocuments: any[];
27+
}
28+
29+
export default function GuidePage({
30+
params,
31+
content,
32+
title,
33+
prevDocument,
34+
nextDocument,
35+
allDocuments,
36+
}: GuidePageProps) {
37+
const { lang, group, slug } = params;
38+
const tocItems = generateTOC(content);
39+
40+
useEffect(() => {
41+
const headings = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
42+
headings.forEach((heading) => {
43+
heading.id =
44+
heading.textContent?.toLowerCase().replace(/\s+/g, "-") ?? "";
45+
});
46+
}, [content]);
47+
48+
return (
49+
<DynamicLayout
50+
sidebar={
51+
<Sidebar
52+
documents={allDocuments}
53+
currentSlug={slug}
54+
currentGroup={group}
55+
lang={lang}
56+
/>
57+
}
58+
mobileSidebar={
59+
<MobileSidebar
60+
documents={allDocuments}
61+
currentSlug={slug}
62+
currentGroup={group}
63+
lang={lang}
64+
/>
65+
}
66+
toc={<TOC items={tocItems} />}
67+
>
68+
<div className="p-4 sm:p-8 md:p-12 bg-white dark:bg-black rounded-sm">
69+
<p className="text-lg sm:text-xl font-bold mb-4 dark:text-white">
70+
{group} &gt; {title}
71+
</p>
72+
<ReactMarkdown
73+
className="prose prose-sm sm:prose lg:prose-lg dark:prose-invert prose-headings:dark:text-white prose-p:dark:text-gray-300 prose-strong:dark:text-white prose-code:dark:text-white prose-ul:dark:text-gray-300 prose-ol:dark:text-gray-300"
74+
rehypePlugins={[rehypeRaw, rehypeHighlight]}
75+
>
76+
{content}
77+
</ReactMarkdown>
78+
</div>
79+
<div className="mt-8 mb-4 flex justify-between gap-4">
80+
<div className="flex-1">
81+
{prevDocument && (
82+
<NavigationButton
83+
document={prevDocument}
84+
lang={lang}
85+
direction="prev"
86+
/>
87+
)}
88+
</div>
89+
<div className="flex-1">
90+
{nextDocument && (
91+
<NavigationButton
92+
document={nextDocument}
93+
lang={lang}
94+
direction="next"
95+
/>
96+
)}
97+
</div>
98+
</div>
99+
</DynamicLayout>
100+
);
101+
}

‎components/docs/index.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export { default as Sidebar } from "./sidebar";
2+
export { default as ThemeToggle } from "./theme-toggle";
3+
export { default as TOC } from "./toc";
4+
export { default as DynamicLayout } from "./dynamic-layout";
5+
export { default as MobileSidebar } from "./mobile-sidebar";
6+
export { default as NavigationButton } from "./navigation-button";
7+
export { default as GuidePage } from "./guide-page";

‎components/mobile-sidebar.tsx renamed to ‎components/docs/mobile-sidebar.tsx

+7-10
Original file line numberDiff line numberDiff line change
@@ -28,16 +28,13 @@ export default function MobileSidebar({
2828
const [isOpen, setIsOpen] = useState(false);
2929
const [openGroup, setOpenGroup] = useState<string | null>(null);
3030

31-
const groupedDocuments = documents.reduce(
32-
(acc, doc) => {
33-
if (!acc[doc.group]) {
34-
acc[doc.group] = [];
35-
}
36-
acc[doc.group].push(doc);
37-
return acc;
38-
},
39-
{} as Record<string, Document[]>,
40-
);
31+
const groupedDocuments = documents.reduce((acc, doc) => {
32+
if (!acc[doc.group]) {
33+
acc[doc.group] = [];
34+
}
35+
acc[doc.group].push(doc);
36+
return acc;
37+
}, {} as Record<string, Document[]>);
4138

4239
const toggleDropdown = () => setIsOpen(!isOpen);
4340
const toggleGroup = (group: string) => {

‎components/navigation-button.tsx renamed to ‎components/docs/navigation-button.tsx

File renamed without changes.

‎components/sidebar.tsx renamed to ‎components/docs/sidebar.tsx

+11-14
Original file line numberDiff line numberDiff line change
@@ -22,37 +22,34 @@ export default function Sidebar({
2222
currentGroup,
2323
lang,
2424
}: SidebarProps) {
25-
const groupedDocuments = documents.reduce(
26-
(acc, doc) => {
27-
if (!acc[doc.group]) {
28-
acc[doc.group] = [];
29-
}
30-
acc[doc.group].push(doc);
31-
return acc;
32-
},
33-
{} as Record<string, Document[]>,
34-
);
25+
const groupedDocuments = documents.reduce((acc, doc) => {
26+
if (!acc[doc.group]) {
27+
acc[doc.group] = [];
28+
}
29+
acc[doc.group].push(doc);
30+
return acc;
31+
}, {} as Record<string, Document[]>);
3532

3633
return (
37-
<nav className="w-64 h-fit p-4 rounded-md border-2 dark:border-white border-black flex flex-col gap-2">
34+
<nav className="w-64 h-fit p-4 rounded-md border-2 dark:border-white border-white flex flex-col gap-2">
3835
<div>
3936
{Object.entries(groupedDocuments).map(([group, docs]) => (
4037
<div key={group}>
41-
<h3 className="font-black mb-1 text-xl dark:text-gray-500">
38+
<h3 className="text-white mb-1 text-xl dark:text-gray-500">
4239
{group}
4340
</h3>
4441
<ul className="ml-0.5">
4542
{docs.map((doc) => (
4643
<li key={doc.slug} className="mb-1">
4744
<Link
48-
href={`/${lang}/guide/${doc.group}/${doc.slug}`}
45+
href={`/${lang}/docs/${doc.group}/${doc.slug}`}
4946
className={`flex justify-center items-center gap-1 cursor-pointer p-2 rounded ${
5047
currentSlug === doc.slug && currentGroup === doc.group
5148
? "bg-gray-900 text-white"
5249
: "hover:bg-gray-900 hover:text-white dark:hover:bg-gray-900 dark:hover:text-white dark:text-gray-500"
5350
}`}
5451
>
55-
<p className="flex-1">{doc.title}</p>
52+
<p className="flex-1 text-white">{doc.title}</p>
5653
<ChevronRightIcon className="h-4 w-4 inline-block" />
5754
</Link>
5855
</li>

‎components/theme-toggle.tsx renamed to ‎components/docs/theme-toggle.tsx

File renamed without changes.

‎components/docs/toc.tsx

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
interface TOCItem {
2+
id: string;
3+
title: string;
4+
}
5+
6+
interface TOCProps {
7+
items: TOCItem[];
8+
}
9+
10+
export default function TOC({ items }: TOCProps) {
11+
return (
12+
<nav className="w-60 px-4 sticky top-10 max-h-[calc(100vh-5rem)] overflow-y-auto">
13+
<ul>
14+
{items.map((item) => (
15+
<li key={item.id}>
16+
<a
17+
href={`#${item.id}`}
18+
className={`text-sm hover:font-bold dark:text-gray-500 dark:hover:text-white`}
19+
>
20+
{item.title}
21+
</a>
22+
</li>
23+
))}
24+
</ul>
25+
</nav>
26+
);
27+
}

‎components/index.ts

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
export { default as Navigation } from "./navigation";
2-
export { default as LanguageSelector } from "./language-selector";
3-
export { default as Sidebar } from "./sidebar";
4-
export { ThemeProvider } from "./theme-provider";
5-
export { default as ThemeToggle } from "./theme-toggle";
6-
export { default as TOC } from "./toc";
7-
export { default as DynamicLayout } from "./dynamic-layout";
8-
export { default as NavigationButton } from "./navigation-button";
9-
export { default as MobileSidebar } from "./mobile-sidebar";
1+
// export { default as Navigation } from "./navigation";
2+
// export { default as LanguageSelector } from "./language-selector";
3+
// export { default as Sidebar } from "./sidebar";
4+
// export { ThemeProvider } from "./theme-provider";
5+
// export { default as ThemeToggle } from "./theme-toggle";
6+
// export { default as TOC } from "./toc";
7+
// export { default as DynamicLayout } from "./dynamic-layout";
8+
// export { default as NavigationButton } from "./navigation-button";
9+
// export { default as MobileSidebar } from "./mobile-sidebar";

0 commit comments

Comments
 (0)