feat: custom 404 and docs nav fixes (#394)

* fix: 404 on docs
* feat: add custom 404 page
* feat: add utility for slugs array

Author: ginifizz

pwa/api/contributors.ts

@@ -169,7 +169,7 @@ export async function getContributorBySlug(slug: string): Promise<Contributor> {
       name: data.name ? data.name : undefined,
     };
   }
-  return notFound();
+  notFound();
 }
 
 // TODO: replace the method when events pages will be done

pwa/api/doc/index.ts

@@ -12,6 +12,7 @@ import { cache } from "react";
 import { current } from "consts";
 import { load as parseHtml } from "cheerio";
 import { Chapters } from "types";
+import { notFound } from "next/navigation";
 
 export const MyOctokit = Octokit.plugin(throttling);
 const sidebarMemoryCache = new Map();
@@ -87,16 +88,21 @@ export async function loadMarkdownBySlugArray(slug: string[]) {
 }
 
 export const getDocTitle = async (version: string, slug: string[]) => {
-  const key = slug.join("");
-  if (sidebarMemoryCache.has(key)) {
+  try {
+    const key = slug.join("");
+    if (sidebarMemoryCache.has(key)) {
+      return sidebarMemoryCache.get(key);
+    }
+    const { data } = await getDocContentFromSlug(version, slug);
+    const md = Buffer.from((data as any).content, "base64").toString();
+    const title = extractHeadingsFromMarkdown(md, 1)?.[0];
+
+    sidebarMemoryCache.set(key, title || slug.shift());
     return sidebarMemoryCache.get(key);
+  } catch (err) {
+    console.error(err);
+    return null;
   }
-  const { data, path } = await getDocContentFromSlug(version, slug);
-  const md = Buffer.from((data as any).content, "base64").toString();
-  const title = extractHeadingsFromMarkdown(md, 1)?.[0];
-
-  sidebarMemoryCache.set(key, title || slug.shift());
-  return sidebarMemoryCache.get(key);
 };
 
 export const loadV2DocumentationNav = cache(async (branch: string) => {
@@ -149,7 +155,6 @@ const indexes = [
   "schema-generator",
   "client-generator",
 ];
-
 export const getDocContentFromSlug = async (
   version: string,
   slug: string[]
@@ -168,9 +173,9 @@ export const getDocContentFromSlug = async (
 
     return { data, path: p };
   } catch (error) {
-    console.error("An error occured while fetching %s", p);
+    console.error(`An error occured while fetching ${p}`);
     console.error(error);
-    return { data: { content: "error" }, path: p };
+    throw error;
   }
 };
 

pwa/app/(common)/[...not-found]/page.tsx

@@ -0,0 +1,5 @@
+import { notFound } from "next/navigation";
+
+export default function NotFoundCatchAll() {
+  notFound();
+}

pwa/app/(common)/docs/[...slug]/layout.tsx

@@ -1,11 +1,9 @@
 import React from "react";
-import Sidebar from "components/docs/Sidebar";
 import { loadV2DocumentationNav } from "api/doc";
 import { versions, current } from "consts";
-import { DocProvider } from "contexts/DocContext";
-import MobileSideBar from "components/docs/MobileSidebar";
+import DocLayout from "../components/DocLayout";
 
-async function DocLayout({
+async function Layout({
   params: { slug },
   children,
 }: {
@@ -17,17 +15,7 @@ async function DocLayout({
   const version = versions.includes(slug[0]) ? slug[0] : current;
   const nav = await loadV2DocumentationNav(version);
 
-  return (
-    <div className="max-w-8xl mx-auto overflow-x-clip">
-      <DocProvider>
-        <MobileSideBar docMenuParts={nav} />
-        <div className="flex flex-row flex-wrap items-start justify-start">
-          <Sidebar docMenuParts={nav} />
-          <div className="flex-1 overflow-clip">{children}</div>
-        </div>
-      </DocProvider>
-    </div>
-  );
+  return <DocLayout nav={nav}>{children}</DocLayout>;
 }
 
-export default DocLayout;
+export default Layout;

pwa/app/(common)/docs/[...slug]/page.tsx

@@ -7,18 +7,27 @@ import {
 import classNames from "classnames";
 import { current, versions } from "consts";
 import Script from "next/script";
-import { Metadata, ResolvingMetadata } from "next";
+import { Metadata } from "next";
 import BreadCrumbs from "components/docs/BreadCrumbs";
+import { notFound } from "next/navigation";
+import { getVersionAndSlugFromSlugs } from "utils";
 
 export async function generateStaticParams() {
   const slugs: { slug: string[] }[] = [];
   const navs = await loadV2DocumentationNav(current);
   for (const nav of navs) {
     for (const link of nav.links) {
-      slugs.push({ slug: link.link.replace("/docs/", "").split("/") });
+      slugs.push({
+        slug: link.link
+          .replace("/docs/", "")
+          .split("/")
+          .filter((p) => p !== ""),
+      });
     }
   }
-
+  for (const version of versions) {
+    slugs.push({ slug: [version] });
+  }
   return slugs;
 }
 
@@ -41,44 +50,38 @@ export default async function Page({
       });
     }
   }
+  try {
+    const { version, slugs } = getVersionAndSlugFromSlugs(slug);
+    const { data, path } = await getDocContentFromSlug(version, slugs);
 
-  const version = versions.includes(slug[0]) ? slug[0] : current;
-  const contentSlug = versions.includes(slug[0])
-    ? slug.slice(1, slug.length)
-    : slug;
-  const { data, path } = await getDocContentFromSlug(
-    version,
-    contentSlug.length ? contentSlug : ["distribution"]
-  );
-
-  const html = await getHtmlFromGithubContent({ data, path });
-  const title = await getDocTitle(version, slug);
+    const html = await getHtmlFromGithubContent({ data, path });
+    const title = await getDocTitle(version, slugs);
 
-  const breadCrumbs = [
-    {
-      title: version,
-      link: version === current ? `/docs/${version}` : "/docs",
-    },
-    { title },
-  ];
+    const breadCrumbs = [
+      {
+        title: version,
+        link: version === current ? `/docs/${version}` : "/docs",
+      },
+      { title },
+    ];
 
-  if (slug.length > 2 || (slug.length === 2 && !versions.includes(slug[0]))) {
-    breadCrumbs.splice(1, 0, { title: "..." });
-  }
+    if (slug.length > 2 || (slug.length === 2 && !versions.includes(slug[0]))) {
+      breadCrumbs.splice(1, 0, { title: "..." });
+    }
 
-  return (
-    <div
-      className={classNames(
-        "px-6 md:px-10 py-6 leading-loose text-blue-black/80 ",
-        "dark:text-white/80"
-      )}
-    >
-      <BreadCrumbs breadCrumbs={breadCrumbs} />
-      <div className="prose max-w-none dark:prose-invert prose-img:max-w-full prose-headings:font-title prose-h1:font-bold prose-code:after:hidden prose-code:before:hidden prose-code:py-1 prose-code:px-1.5 prose-code:bg-gray-100 prose-code:dark:bg-blue-darkest prose-h1:border-b-px prose-h1:border-b-gray-300 prose-h1:pb-2 max-md:prose-tr:flex max-md:prose-tr:flex-col max-md:prose-td:px-0 max-md:prose-td:py-1">
-        <div className="doc" dangerouslySetInnerHTML={{ __html: html }}></div>
-      </div>
-      <Script id="codeselector-switch">
-        {`function switchCode(event) {
+    return (
+      <div
+        className={classNames(
+          "px-6 md:px-10 py-6 leading-loose text-blue-black/80 ",
+          "dark:text-white/80"
+        )}
+      >
+        <BreadCrumbs breadCrumbs={breadCrumbs} />
+        <div className="prose max-w-none dark:prose-invert prose-img:max-w-full prose-headings:font-title prose-h1:font-bold prose-code:after:hidden prose-code:before:hidden prose-code:py-1 prose-code:px-1.5 prose-code:bg-gray-100 prose-code:dark:bg-blue-darkest prose-h1:border-b-px prose-h1:border-b-gray-300 prose-h1:pb-2 max-md:prose-tr:flex max-md:prose-tr:flex-col max-md:prose-td:px-0 max-md:prose-td:py-1">
+          <div className="doc" dangerouslySetInnerHTML={{ __html: html }}></div>
+        </div>
+        <Script id="codeselector-switch">
+          {`function switchCode(event) {
           const k = event.target.getAttribute('key')
           const p = event.target.parentNode.parentNode.parentNode
           ;[].slice.call(p.querySelectorAll('div[key]')).forEach(e => e.classList.add('hidden'))
@@ -93,9 +96,13 @@ export default async function Page({
           event.target.classList.add(...selectedClasses)
 
         }`}
-      </Script>
-    </div>
-  );
+        </Script>
+      </div>
+    );
+  } catch (err) {
+    console.error(err);
+    notFound();
+  }
 }
 
 export async function generateMetadata({
@@ -105,10 +112,16 @@ export async function generateMetadata({
     slug: string[];
   };
 }): Promise<Metadata> {
-  const version = versions.includes(slug[0]) ? slug[0] : current;
-  const title = await getDocTitle(version, slug);
+  try {
+    const { version, slugs } = getVersionAndSlugFromSlugs(slug);
+    const title = await getDocTitle(version, slugs);
 
-  return {
-    title: `${title} - API Platform`,
-  };
+    return {
+      title: `${title} - API Platform`,
+    };
+  } catch {
+    return {
+      title: "API Platform Documentation - API Platform",
+    };
+  }
 }