Skip to content

Commit

Permalink
feat: automate sidebar links (#65)
Browse files Browse the repository at this point in the history
  • Loading branch information
kimmyxpow authored Feb 18, 2024
1 parent 99961a9 commit 60004dc
Show file tree
Hide file tree
Showing 9 changed files with 116 additions and 180 deletions.
2 changes: 1 addition & 1 deletion .prettierrc
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,6 @@
"importOrderSortSpecifiers": true,
"importOrderCaseInsensitive": true,
"importOrderParserPlugins": ["typescript", "jsx", "mdx"],
"importOrder": ["^@/constants/(.*)$", "^@/stores/(.*)$", "^@/components/(.*)$", "^[./]"],
"importOrder": ["^@/constants/(.*)$", "^@/stores/(.*)$", "^@/utils/(.*)$", "^@/components/(.*)$", "^[./]"],
"plugins": ["@trivago/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"]
}
29 changes: 8 additions & 21 deletions app/docs/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,28 +1,15 @@
"use client";
import { ReactNode } from "react";

import { ReactNode, useEffect } from "react";
import { PythonProvider } from "react-py";

import { useNavStyleStore } from "@/stores/use-nav-style-store";
import { sidebarLinks } from "@/constants/sidebar-links";

import DocsWrapper from "@/components/docs-wrapper";
import Sidebar from "@/components/sidebar";

export default function MdxLayout({ children }: { children: ReactNode }) {
const { setDocsStyle } = useNavStyleStore();
const packages = {
micropip: ["OpenSeriesBellshade"]
};

useEffect(() => {
setDocsStyle();
}, [setDocsStyle]);

export default async function MdxLayout({ children }: { children: ReactNode }) {
return (
<PythonProvider packages={packages}>
<Sidebar />
<main className="prose prose-indigo max-w-none overflow-y-auto rounded-xl p-8 dark:prose-invert prose-pre:border prose-img:w-full prose-img:rounded-xl dark:prose-h1:bg-clip-text dark:prose-h1:font-bold dark:prose-pre:border-zinc-700 lg:pl-80">
{children}
</main>
</PythonProvider>
<>
<Sidebar sidebarLinks={sidebarLinks} />
<DocsWrapper>{children}</DocsWrapper>
</>
);
}
Binary file modified bun.lockb
Binary file not shown.
25 changes: 25 additions & 0 deletions components/docs-wrapper/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
"use client";

import { ReactNode, useEffect } from "react";
import { PythonProvider } from "react-py";

import { useNavStyleStore } from "@/stores/use-nav-style-store";

export default function DocsWrapper({ children }: { children: ReactNode }) {
const { setDocsStyle } = useNavStyleStore();
const packages = {
micropip: ["OpenSeriesBellshade"]
};

useEffect(() => {
setDocsStyle();
}, [setDocsStyle]);

return (
<PythonProvider packages={packages}>
<main className="prose prose-indigo max-w-none overflow-y-auto rounded-xl p-8 dark:prose-invert prose-pre:border prose-img:w-full prose-img:rounded-xl dark:prose-h1:bg-clip-text dark:prose-h1:font-bold dark:prose-pre:border-zinc-700 lg:pl-[21rem]">
{children}
</main>
</PythonProvider>
);
}
29 changes: 18 additions & 11 deletions components/sidebar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,17 @@
import Link from "next/link";
import { usePathname } from "next/navigation";

import { documentations } from "@/constants/documentations";
import { featuredLinks } from "@/constants/featured-links";

import { useSidebarStore } from "@/stores/use-sidebar-store";

export default function Sidebar() {
import { DocumentGroup } from "@/utils/get-docs";

type Props = {
sidebarLinks: DocumentGroup;
};

const Sidebar = ({ sidebarLinks }: Props) => {
const pathname = usePathname();
const { isSidebarOpen, toggleSidebar } = useSidebarStore();

Expand Down Expand Up @@ -42,20 +47,20 @@ export default function Sidebar() {
))}
</div>
<div className="space-y-4">
{documentations.map((documentation) => (
<div key={documentation.parent} className="space-y-4">
{Object.keys(sidebarLinks).map((category) => (
<div key={category} className="space-y-4">
<span className="text-xs font-bold uppercase text-zinc-800 dark:text-zinc-200">
{documentation.parent}
{category}
</span>
<div className="flex flex-col">
{documentation.childs.map((link) => (
{sidebarLinks[category].map((item) => (
<Link
key={link.href}
className={`border-l-2 py-2 pl-6 text-sm font-medium hover:border-l-indigo-600 hover:text-indigo-600 dark:hover:border-l-indigo-500 dark:hover:text-indigo-500 ${link.href === pathname ? "border-l-indigo-600 text-indigo-600 dark:border-l-indigo-500 dark:text-indigo-500" : "text-zinc-400 dark:border-l-zinc-700"}`}
href={link.href}
key={item.link}
className={`border-l-2 py-2 pl-6 text-sm font-medium capitalize hover:border-l-indigo-600 hover:text-indigo-600 dark:hover:border-l-indigo-500 dark:hover:text-indigo-500 ${item.link === pathname ? "border-l-indigo-600 text-indigo-600 dark:border-l-indigo-500 dark:text-indigo-500" : "text-zinc-400 dark:border-l-zinc-700"}`}
href={item.link}
onClick={() => toggleSidebar()}
>
{link.title}
{item.title}
</Link>
))}
</div>
Expand All @@ -69,4 +74,6 @@ export default function Sidebar() {
></div>
</>
);
}
};

export default Sidebar;
147 changes: 0 additions & 147 deletions constants/documentations.ts

This file was deleted.

3 changes: 3 additions & 0 deletions constants/sidebar-links.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { getDocs } from "@/utils/get-docs";

export const sidebarLinks = getDocs({ "get started": ["tentang"] });
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
"@types/mdx": "^2.0.10",
"@uiw/codemirror-theme-vscode": "^4.21.21",
"@uiw/react-codemirror": "^4.21.21",
"fast-glob": "^3.3.2",
"next": "14.0.4",
"next-themes": "^0.2.1",
"nextjs-toploader": "^1.6.4",
Expand All @@ -35,6 +36,7 @@
"@iconify/tailwind": "^0.1.4",
"@tailwindcss/typography": "^0.5.10",
"@trivago/prettier-plugin-sort-imports": "^4.3.0",
"@types/bun": "^1.0.6",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
Expand Down
59 changes: 59 additions & 0 deletions utils/get-docs.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import { globSync } from "fast-glob";

export type DocumentGroup = {
[key: string]: {
title: string;
link: string;
}[];
};

type PrioritizedCategories = {
[category: string]: string[];
};

export const getDocs = (prioritizedCategories: PrioritizedCategories) => {
const documentPaths = getDocumentPaths();
const documentGroup = groupDocumentsByCategory(documentPaths);
const sortedDocuments = prioritizeAndSortDocuments(documentGroup, prioritizedCategories);
return sortedDocuments;
};

const getDocumentPaths = () => globSync("app/docs/**/**/*.mdx");

const groupDocumentsByCategory = (documentPaths: string[]): DocumentGroup => {
const documentGroup: DocumentGroup = {};
documentPaths.forEach((path) => {
const match = path.match(/app\/docs\/([\w-]+)\/([\w-]+)\/page\.mdx/);
if (!match || match.length < 3) return;

const [, category, title] = match;
const formattedCategory = category.replace(/-/g, " ");
const formattedTitle = title.replace(/-/g, " ");
const link = `/docs/${category}/${title}`;

const categoryKey = formattedCategory.toUpperCase();
documentGroup[categoryKey] = [...(documentGroup[categoryKey] || []), { title: formattedTitle, link }];
});
return documentGroup;
};

const prioritizeAndSortDocuments = (
documentGroup: DocumentGroup,
prioritizedCategories: PrioritizedCategories
): DocumentGroup => {
const sortedDocuments: DocumentGroup = {};

Object.entries(prioritizedCategories).forEach(([category, links]) => {
const categoryKey = category.toUpperCase();
if (documentGroup[categoryKey]) {
sortedDocuments[categoryKey] = documentGroup[categoryKey].sort((a, b) =>
links.includes(a.title.toLowerCase()) ? -1 : links.includes(b.title.toLowerCase()) ? 1 : 0
);
delete documentGroup[categoryKey];
}
});

Object.assign(sortedDocuments, documentGroup);

return sortedDocuments;
};

0 comments on commit 60004dc

Please sign in to comment.