Large-scale UI rework (#66)

Sinytra · Dec 31, 2024 · 1a79c88 · 1a79c88
2 parents 96a5846 + 3c8f153
commit 1a79c88
Show file tree

Hide file tree

Showing 125 changed files with 15,366 additions and 7,019 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,6 +5,10 @@
 /.pnp
 .pnp.js
 .yarn/install-state.gz
+pnpm-lock.yaml
+
+# contentlayer
+.contentlayer
 
 # testing
 /coverage

diff --git a/app/(developers)/api/og/route.tsx b/app/(developers)/api/og/route.tsx
@@ -267,7 +267,7 @@ export async function GET(req: NextRequest) {
     if (!project) {
       return NextResponse.json({'error': 'Project not found'}, { status: 400 });
     }
-    const platformProject = await platforms.getPlatformProject(project.platform, project.slug);
+    const platformProject = await platforms.getPlatformProject(project);
     return projectPageImage(coords, platformProject, fonts);
   }
 
@@ -277,7 +277,7 @@ export async function GET(req: NextRequest) {
     return NextResponse.json({'error': 'Page not found'}, { status: 400 });
   }
 
-  const project = await platforms.getPlatformProject(page.project.platform, page.project.slug);
+  const project = await platforms.getPlatformProject(page.project);
   const metadata = matter(page.content).data as DocsEntryMetadata;
 
   const iconUrl: AssetLocation | null = metadata.hide_icon === true || !metadata.icon && !metadata.id ? null : await service.getAsset(slug, (metadata.icon || metadata.id)!, version);

diff --git a/app/[locale]/(main)/(developers)/layout.tsx b/app/[locale]/(main)/(developers)/layout.tsx
@@ -8,7 +8,7 @@ export default async function ProjectLayout({params, children}: Readonly<{
   setContextLocale(params.locale);
 
   return (
-    <div className="flex flex-col w-full items-center mx-1 sm:mx-6">
+    <div className="flex flex-col w-full items-center mx-1 page-wrapper-ext">
       <div className="max-w-5xl w-full">
         {children}
       </div>

diff --git a/app/[locale]/(main)/about/layout.tsx b/app/[locale]/(main)/about/layout.tsx
@@ -15,7 +15,7 @@ export default function AboutLayout({params, children}: Readonly<{
   const messages = useMessages();
 
   return (
-    <div className="flex flex-col md:flex-row gap-4 w-full md:justify-center">
+    <div className="flex flex-col md:flex-row gap-4 w-full md:justify-center page-wrapper-ext">
       <aside className="w-full md:w-64 flex-shrink-0 bg-muted rounded-md px-2 mb-2 md:mb-0">
         <MetaDocsNavigation messages={messages['MetaDocsNavigation']} docsOnly={localPreview.isEnabled()}/>
       </aside>

diff --git a/app/[locale]/(main)/browse/page.tsx b/app/[locale]/(main)/browse/page.tsx
@@ -32,36 +32,39 @@ export default function Browse({params, searchParams}: Properties) {
   const page = parseAsInteger.withDefault(1).parseServerSide(searchParams.page);
 
   return (
-      <NuqsAdapter>
-        <div className="flex flex-col md:flex-row gap-4 w-full md:justify-center">
-          <aside
-              className="px-1 md:p-1.5 md:pt-2 bg-muted rounded-md w-full md:w-64 mb-2 md:mb-0 flex-shrink-0 md:sticky md:top-20 md:h-[calc(100vh_-_8rem)]"
-          >
-            <CollapsibleDocsTreeBase title={t('sidebar.title')} defaultOpen={false}>
-              <NextIntlClientProvider messages={pick(messages, 'BrowsePage', 'SearchProjectTypes')}>
-                <BrowseFilterPanel/>
-              </NextIntlClientProvider>
-            </CollapsibleDocsTreeBase>
-          </aside>
+    <NuqsAdapter>
+      <div className="flex flex-col md:flex-row gap-4 w-full md:justify-center page-wrapper-ext">
+        <aside
+          className="px-1 md:p-1.5 md:pt-2 bg-muted rounded-md w-full md:w-64 mb-2 md:mb-0 flex-shrink-0 md:sticky md:top-20 md:h-[calc(100vh_-_8rem)]"
+        >
+          <CollapsibleDocsTreeBase title={t('sidebar.title')} defaultOpen={false}>
+            <NextIntlClientProvider messages={pick(messages, 'BrowsePage', 'SearchProjectTypes')}>
+              <BrowseFilterPanel/>
+            </NextIntlClientProvider>
+          </CollapsibleDocsTreeBase>
+        </aside>
 
-          <div className="w-full max-w-[60rem] flex flex-col gap-2">
-            <div className="flex flex-col gap-4 sm:flex-row flex-wrap items-end sm:items-start justify-between w-full pb-4 mb-2 border-b border-neutral-700">
-              <ProjectSearch placeholder={t('search')}/>
+        <div className="w-full sm:max-w-[60rem] flex flex-col gap-2">
+          <div
+            className="flex flex-col gap-4 sm:flex-row flex-wrap items-end sm:items-start justify-between w-full pb-4 mb-2 border-b border-neutral-700">
+            <ProjectSearch placeholder={t('search')}/>
 
-              <NextIntlClientProvider messages={pick(messages, 'BrowsePage', 'SearchProjectTypes')}>
-                <BrowseSortDropdown/>
-              </NextIntlClientProvider>
-            </div>
+            <NextIntlClientProvider messages={pick(messages, 'BrowsePage', 'SearchProjectTypes')}>
+              <BrowseSortDropdown/>
+            </NextIntlClientProvider>
+          </div>
 
+          <NextIntlClientProvider messages={pick(messages, 'ModVersionRange')}>
             <Suspense fallback={
               <div className="w-full flex justify-center my-3">
                 <LoadingContent/>
               </div>
             }>
               <BrowseProjectList query={query} page={page} types={types} sort={sort}/>
             </Suspense>
-          </div>
+          </NextIntlClientProvider>
         </div>
-      </NuqsAdapter>
+      </div>
+    </NuqsAdapter>
   )
 }
diff --git a/app/[locale]/(main)/layout.tsx b/app/[locale]/(main)/layout.tsx
@@ -1,15 +1,13 @@
-import {ReactNode} from "react";
-import {setContextLocale} from "@/lib/locales/routing";
+import { ReactNode } from "react";
+import { setContextLocale } from "@/lib/locales/routing";
 
-export default function LocaleLayout({params, children}: Readonly<{
+export default function LocaleLayout({ params, children }: Readonly<{
   params: { locale: string };
   children: ReactNode;
 }>) {
   setContextLocale(params.locale);
 
-  return (
-    <div className="page-wrapper flex flex-1 min-h-[100vh] mx-4 sm:mx-2">
-      {children}
-    </div>
-  )
+  return <div className="flex flex-col min-h-screen mx-4 page-wrapper sm:mx-2">
+    {children}
+  </div>;
 }
diff --git a/app/[locale]/(main)/project/[slug]/[version]/[...path]/page.tsx b/app/[locale]/(main)/project/[slug]/[version]/[...path]/page.tsx
@@ -1,13 +1,20 @@
 import {Suspense} from "react";
-import DocsEntryPage from "@/components/docs/DocsEntryPage";
-import DocsLoadingSkeleton from "@/components/docs/DocsLoadingSkeleton";
+import DocsEntryPage from "@/components/docs/body/DocsEntryPage";
+import DocsLoadingSkeleton from "@/components/docs/body/DocsLoadingSkeleton";
 import {Metadata, ResolvingMetadata} from "next";
 import {setContextLocale} from "@/lib/locales/routing";
 import service from "@/lib/service";
 import {redirect} from "next/navigation";
 import matter from "gray-matter";
 import {DocsEntryMetadata} from "@/lib/docs/metadata";
 import platforms from "@/lib/platforms";
+import DocsInnerLayoutClient from "@/components/docs/layout/DocsInnerLayoutClient";
+import DocsPageFooter from "@/components/docs/layout/DocsPageFooter";
+import DocsNonContentRightSidebar from "@/components/docs/side/DocsNonContentRightSidebar";
+import DocsContentRightSidebar from "@/components/docs/side/DocsContentRightSidebar";
+import {NextIntlClientProvider} from "next-intl";
+import {getMessages} from "next-intl/server";
+import {pick} from "lodash";
 
 export const dynamic = 'force-static';
 export const fetchCache = 'force-cache';
@@ -20,7 +27,7 @@ export async function generateMetadata({params}: {
     return {title: (await parent).title?.absolute};
   }
 
-  const project = await platforms.getPlatformProject(page.project.platform, page.project.slug);
+  const project = await platforms.getPlatformProject(page.project);
   const result = matter(page.content).data as DocsEntryMetadata;
 
   return {
@@ -40,12 +47,42 @@ export default async function ProjectDocsPage({params}: {
 }) {
   setContextLocale(params.locale);
 
+  const projectData = await service.getBackendLayout(params.slug, params.version, params.locale);
+  if (!projectData) {
+    return redirect('/');
+  }
+
   const page = await service.renderDocsPage(params.slug, params.path, params.version, params.locale);
   if (!page) redirect(`/project/${params.slug}/docs`);
 
+  const messages = await getMessages();
+
   return (
-    <Suspense fallback={<DocsLoadingSkeleton/>}>
-      <DocsEntryPage page={page} path={params.path} version={params.version}/>
-    </Suspense>
+    <DocsInnerLayoutClient project={page.project}
+                           tree={projectData.tree}
+                           version={params.version} locale={params.locale}
+                           rightSidebar={
+                             !page.content.metadata.hide_meta
+                               ? <DocsContentRightSidebar project={projectData.project}
+                                                          metadata={page.content.metadata}
+                                                          version={params.version}/>
+                               : <NextIntlClientProvider messages={pick(messages, 'DocsNonContentRightSidebar')}>
+                                   <DocsNonContentRightSidebar headings={page.content.metadata._headings || []}/>
+                                 </NextIntlClientProvider>
+                           }
+                           footer={
+                             <DocsPageFooter locale={params.locale} locales={projectData.project.locales}
+                                             version={params.version} versions={projectData.project.versions}
+                                             editUrl={page.edit_url} updatedAt={page.updated_at}
+                                             showHistory={page.content.metadata.history !== undefined}
+                                             slug={params.slug} path={params.path}
+                                             local={projectData.project.local}
+                             />
+                           }
+    >
+      <Suspense fallback={<DocsLoadingSkeleton/>}>
+        <DocsEntryPage page={page}/>
+      </Suspense>
+    </DocsInnerLayoutClient>
   )
 }
diff --git a/app/[locale]/(main)/project/[slug]/[version]/layout.tsx b/app/[locale]/(main)/project/[slug]/[version]/layout.tsx
@@ -1,21 +1,34 @@
-import ProjectDocsBaseLayout from "@/components/docs/layout/ProjectDocsBaseLayout";
-import DocsTree from "@/components/docs/tree/DocsTree";
 import {ReactNode} from "react";
 import {setContextLocale} from "@/lib/locales/routing";
+import service from "@/lib/service";
+import DocsLayoutClient from "@/components/docs/layout/DocsLayoutClient";
+import {redirect} from "next/navigation";
+import {NextIntlClientProvider, useTranslations} from "next-intl";
+import {getMessages} from "next-intl/server";
+import {pick} from "lodash";
+import {NuqsAdapter} from "nuqs/adapters/next/app";
+import LeftSidebarContextProvider from "@/components/docs/side/LeftSidebarContext";
+import {ErrorBoundary} from "react-error-boundary";
 import {FileQuestionIcon, HouseIcon} from "lucide-react";
 import {Button} from "@/components/ui/button";
 import Link from "next/link";
 import GitHubIcon from "@/components/ui/icons/GitHubIcon";
-import {NavLink} from "@/components/navigation/link/NavLink";
-import {ErrorBoundary} from "react-error-boundary";
-import {useTranslations} from "next-intl";
 import PrimaryButton from "@/components/ui/custom/PrimaryButton";
-import {redirect} from "next/navigation";
-import service from "@/lib/service";
+import {NavLink} from "@/components/navigation/link/NavLink";
+import DocsSidebarContextProvider from "@/components/docs/side/DocsSidebarContext";
 
 export const dynamic = 'force-static';
 export const fetchCache = 'force-cache';
 
+interface LayoutProps {
+  children: ReactNode;
+  params: {
+    slug: string;
+    version: string;
+    locale: string;
+  };
+}
+
 function getIssueCreationLink(repo: any) {
   return `https://github.com/${repo}/issues/new`;
 }
@@ -40,16 +53,16 @@ function DocsPageNotFoundError({issueURL}: { issueURL?: string }) {
 
       <div className="inline-flex gap-4 mt-4">
         {issueURL &&
-            <Button variant="secondary" asChild>
-                <Link href={issueURL} target="_blank">
-                    <GitHubIcon className="mr-2 w-4 h-4"/>
-                    {t('submit')}
-                </Link>
-            </Button>
+          <Button variant="secondary" asChild>
+              <Link href={issueURL} target="_blank">
+                  <GitHubIcon className="mr-2 w-4 h-4"/>
+                {t('submit')}
+              </Link>
+          </Button>
         }
         <PrimaryButton asChild>
           <NavLink href="/">
-            <HouseIcon className="mr-2 w-4 h-4" strokeWidth={2.5} />
+            <HouseIcon className="mr-2 w-4 h-4" strokeWidth={2.5}/>
             {t('return')}
           </NavLink>
         </PrimaryButton>
@@ -58,20 +71,33 @@ function DocsPageNotFoundError({issueURL}: { issueURL?: string }) {
   )
 }
 
-export default async function ProjectLayout({children, params}: Readonly<{
-  children: ReactNode;
-  params: { slug: string; version: string; locale: string }
-}>) {
+export default async function HomepageLayout({children, params}: LayoutProps) {
   setContextLocale(params.locale);
 
-  const data = await service.getBackendLayout(params.slug, params.version, params.locale);
-  if (!data) redirect('/');
+  const messages = await getMessages();
+
+  const projectData = await service.getBackendLayout(params.slug, params.version, params.locale);
+  if (!projectData) {
+    return redirect('/');
+  }
 
   return (
-    <ErrorBoundary fallback={<DocsPageNotFoundError issueURL={data.project.is_public ? getIssueCreationLink(data.project.source_repo) : undefined}/>}  >
-      <ProjectDocsBaseLayout leftPanel={<DocsTree slug={params.slug} tree={data.tree} version={params.version} />}>
-        {children}
-      </ProjectDocsBaseLayout>
+    <ErrorBoundary fallback={
+      <DocsPageNotFoundError
+        issueURL={projectData.project.is_public ? getIssueCreationLink(projectData.project.source_repo) : undefined}
+      />
+    }>
+      <NuqsAdapter>
+        <LeftSidebarContextProvider>
+          <DocsSidebarContextProvider>
+            <NextIntlClientProvider messages={pick(messages, 'ProjectTypes', 'ProjectCategories', 'PageEditControls', 'DocsVersionSelector', 'DocsLanguageSelect', 'ModVersionRange')}>
+              <DocsLayoutClient title={projectData.project.name}>
+                {children}
+              </DocsLayoutClient>
+            </NextIntlClientProvider>
+          </DocsSidebarContextProvider>
+        </LeftSidebarContextProvider>
+      </NuqsAdapter>
     </ErrorBoundary>
-  )
-}
+  );
+}