feat: added initial rework of docs

.gitignore

@@ -20,7 +20,6 @@
 .DS_Store
 *.pem
 /public/llms.txt
-/public/search-index.json
 
 # debug
 npm-debug.log*

app/docs/[[...slug]]/page.tsx

@@ -2,34 +2,36 @@ import Toc from '@/components/toc';
 import Pagination from '@/components/Pagination';
 import {page_routes} from '@/lib/routes-config';
 import {notFound} from 'next/navigation';
-import {getDocsForSlug} from '@/lib/markdown';
+import {getDocsForSlug, getDocsTocs, getPreviousNext} from '@/lib/markdown';
 import {Typography} from '@/components/typography';
 import CopyContent from '@/components/ui/copy-content';
 
-type PageProps = {
-  params: {slug: string[]};
-};
+type PageProps = {params: {slug: string[]}};
 
 export default async function DocsPage({params: {slug = []}}: PageProps) {
   const pathName = slug.join('/');
-  const res = await getDocsForSlug(pathName);
+  const [res, tocs, previousNext] = await Promise.all([
+    getDocsForSlug(pathName),
+    getDocsTocs(pathName),
+    getPreviousNext(pathName),
+  ]);
 
   if (!res) notFound();
 
   return (
-    <div className="flex items-start gap-14">
-      <div className="flex-[3] py-10">
+    <div className="flex flex-[4] min-w-0 items-start gap-14">
+      <div className="flex-[3] min-w-0 py-10">
         <Typography>
           <h1 className="text-3xl -mt-2">{res.frontmatter.title}</h1>
           <p className="-mt-4 text-muted-foreground text-[16.5px]">
             {res.frontmatter.description}
           </p>
           {/* Wrap content with CopyableContent */}
           <CopyContent content={res.content} />
-          <Pagination pathname={pathName} />
+          <Pagination previousNext={previousNext} />
         </Typography>
       </div>
-      <Toc path={pathName} />
+      <Toc tocs={tocs} />
     </div>
   );
 }
@@ -39,14 +41,9 @@ export async function generateMetadata({params: {slug = []}}: PageProps) {
   const res = await getDocsForSlug(pathName);
   if (!res) return null;
   const {frontmatter} = res;
-  return {
-    title: frontmatter.title,
-    description: frontmatter.description,
-  };
+  return {title: frontmatter.title, description: frontmatter.description};
 }
 
 export function generateStaticParams() {
-  return page_routes.map(item => ({
-    slug: item.href.split('/').slice(1),
-  }));
+  return page_routes.map(item => ({slug: item.href.split('/').slice(1)}));
 }

app/docs/layout.tsx

@@ -6,9 +6,9 @@ export default function DocsLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <div className="flex items-start gap-14">
+    <div className="flex relative items-start gap-14 w-full max-w-full">
       <Leftbar key="leftbar" />
-      <div className="flex-[4]">{children}</div>{' '}
+      {children}
     </div>
   );
 }

app/globals.css

@@ -21,13 +21,13 @@
     --accent-foreground: 240 5.9% 10%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 90%;
+    --border: 240 5.9% 85%;
     --input: 240 5.9% 90%;
     --radius: 0.5rem;
-    --primary-highlight: rgba(252, 33, 138, 1);
+    --primary-highlight: 331.2 97.3% 55.9%;
+    --primary-highlight-foreground: 0 0% 100%;
 
     /* Root page */
-    --foreground-rgb: 0, 0, 0;
     --paragraph-color: hsl(0, 0%, 15%);
     --primary-accent: 39, 252, 174;
     --code-border: rgba(228, 228, 231, 1);
@@ -40,7 +40,7 @@
     --foreground: 0 0% 98%;
     --card: 240 10% 3.9%;
     --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
+    --popover: 240 10% 6.3%;
     --popover-foreground: 0 0% 98%;
     --primary: 0 0% 98%;
     --primary-foreground: 240 5.9% 10%;
@@ -53,12 +53,13 @@
     --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 0% 98%;
-    --border: 240 3.7% 15.9%;
+    --border: 240 3.7% 20%;
     --input: 240 3.7% 15.9%;
     --ring: 240 4.9% 83.9%;
+    --primary-highlight: 331.2 97.3% 55.9%;
+    --primary-highlight-foreground: 0 0% 100%;
 
     /* Root page */
-    --foreground-rgb: 255, 255, 255;
     --paragraph-color: #d4d4d8;
     --primary-accent: 39, 252, 174;
     --code-border: rgba(39, 39, 42, 1);
@@ -110,18 +111,13 @@
   }
 }
 
-.search-snippet {
-  padding: 0.5rem;
-}
-
-.search-selected {
-  border-radius: 0.25rem;
-}
-
 mark {
-  color: rgb(var(--foreground-rgb));
-  padding: 0.25rem 0.1rem;
-  background-color: var(--primary-highlight);
+  color: hsl(var(--primary-highlight-foreground));
+  border-radius: 0.25rem;
+  padding: 0.2rem;
+  margin: 0 0.05rem;
+  background-color: hsl(var(--primary-highlight));
+  font-weight: 500;
 }
 
 .lightbulb-toggle {
@@ -198,8 +194,8 @@ mark {
 }
 
 .new-badge {
-  color: var(--primary-highlight);
-  border-color: var(--primary-highlight);
+  color: hsl(var(--primary-highlight));
+  border-color: hsl(var(--primary-highlight));
 }
 
 .search-shortcut {
@@ -211,11 +207,6 @@ mark {
   top: 4rem !important;
 }
 
-.leftbar-aside {
-  max-height: calc(100vh - 72px);
-  overflow-y: scroll;
-}
-
 .footer-container {
   color: hsl(var(--foreground) / 50%);
   font-size: 0.875rem;
@@ -271,7 +262,7 @@ mark {
 }
 
 .prose code {
-  color: var(--primary-highlight) !important;
+  color: hsl(var(--primary-highlight)) !important;
   font-weight: 400;
   border-radius: 0.5rem !important;
   padding-left: 0.3rem !important;
@@ -475,31 +466,6 @@ mark {
   cursor: pointer;
 }
 
-.button-link:hover {
-  background-color: var(--primary-highlight) !important;
-}
-
-.button-link.pagination-button {
-  transition: all 0.3s ease;
-  white-space: normal;
-  height: fit-content;
-  padding: 1rem;
-  border-color: hsl(var(--border));
-}
-
-.button-link.pagination-button-prev {
-  text-align: left;
-}
-
-.button-link.pagination-button-next {
-  text-align: right;
-}
-
-.button-link.pagination-button:hover {
-  background-color: inherit !important;
-  border-color: hsl(var(--foreground) / 30%);
-}
-
 .prose a.button-link,
 .prose a.heading-link {
   text-decoration: none;

app/page.module.css

@@ -25,33 +25,6 @@
   margin: 4rem 0 2rem;
 }
 
-.main a {
-  text-decoration: underline;
-  color: var(--foreground-rgb);
-}
-
-.main a:hover {
-  background: hsla(0, 0%, 100%, 0.3);
-  outline: 2px solid hsla(0, 0%, 100%, 0.3);
-}
-
-.main a.primaryButton {
-  text-decoration: none;
-  color: rgb(var(--foreground-rgb));
-}
-
-.main a.primaryButton:hover {
-  background: hsl(var(--accent));
-  outline: none;
-  color: rgba(255, 255, 255, 1);
-}
-
-.ctaContainer {
-  display: flex;
-  width: 100%;
-  justify-content: center;
-}
-
 .highlight {
   color: rgb(var(--primary-accent));
 }
@@ -116,7 +89,7 @@
 }
 
 .main strong {
-  color: rgb(var(--foreground-rgb));
+  color: hsl(var(--foreground));
 }
 
 .main span.logoName {
@@ -145,7 +118,7 @@
 }
 
 .footer {
-  margin: 8rem 0 0;
+  margin: 8rem 0 2rem;
   align-self: center;
 }
 
@@ -181,7 +154,7 @@ p.footerText {
   margin-top: 1rem;
   text-align: center;
   font-size: 0.75rem;
-  color: rgb(var(--foreground-rgb));
+  color: hsl(var(--foreground));
 }
 
 @media (max-width: 909px) {