use title components in docs
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m9s

This commit is contained in:
Lee 2024-04-20 03:22:10 +01:00
parent 3ca0b5be81
commit 9b0e5bfcf7
2 changed files with 22 additions and 15 deletions

@ -2,6 +2,7 @@ import { getDocumentation } from "@/app/common/documentation";
import { CustomMDX } from "@/app/components/mdx-components"; import { CustomMDX } from "@/app/components/mdx-components";
import { Metadata } from "next"; import { Metadata } from "next";
import { generateEmbed } from "@/app/common/embed"; import { generateEmbed } from "@/app/common/embed";
import { Title } from "@/app/components/title";
type DocumentationPageParams = { type DocumentationPageParams = {
params: { params: {
@ -17,16 +18,30 @@ export async function generateStaticParams() {
})); }));
} }
export async function generateMetadata({ params: { slug } }: DocumentationPageParams): Promise<Metadata> { /**
const pageSlug = slug?.join("/"); * Gets a documentation page by its slug.
*
* @param slug The slug of the documentation page.
*/
function getPage(slug?: string) {
const documentationPages = getDocumentation(); const documentationPages = getDocumentation();
let page = documentationPages.find(page => page.slug === pageSlug); let page = documentationPages.find(page => page.slug === slug);
// Use the landing page on "/documentation" // Fallback to the landing page
if (!page && !slug) { if (!page && !slug) {
page = documentationPages.find(page => page.slug === "landing"); page = documentationPages.find(page => page.slug === "landing");
} }
// We still can't find the page, return undefined
if (!page) {
return undefined;
}
return page;
}
export async function generateMetadata({ params: { slug } }: DocumentationPageParams): Promise<Metadata> {
const page = getPage(slug?.join("/"));
// Fallback to page not found // Fallback to page not found
if (!page) { if (!page) {
return generateEmbed({ return generateEmbed({
@ -42,14 +57,7 @@ export async function generateMetadata({ params: { slug } }: DocumentationPagePa
} }
export default function Page({ params: { slug } }: DocumentationPageParams) { export default function Page({ params: { slug } }: DocumentationPageParams) {
const pageSlug = slug?.join("/"); const page = getPage(slug?.join("/"));
const documentationPages = getDocumentation();
let page = documentationPages.find(page => page.slug === pageSlug);
// Use the landing page on "/documentation"
if (!page && !slug) {
page = documentationPages.find(page => page.slug === "landing");
}
// Page was not found, show an error page // Page was not found, show an error page
if (!page) { if (!page) {
@ -65,8 +73,7 @@ export default function Page({ params: { slug } }: DocumentationPageParams) {
<div className="w-full px-4 flex flex-col gap-4"> <div className="w-full px-4 flex flex-col gap-4">
{/* The documentation page title and description */} {/* The documentation page title and description */}
<div className="text-center mb-4"> <div className="text-center mb-4">
{page.metadata.title && <h1 className="text-2xl">{page.metadata.title}</h1>} <Title title={page.metadata.title} subtitle={page.metadata.description} />
{page.metadata.description && <h1>{page.metadata.description}</h1>}
</div> </div>
{/* The content of the documentation page */} {/* The content of the documentation page */}

@ -14,7 +14,7 @@ type Metadata = {
/** /**
* The description of the documentation page. * The description of the documentation page.
*/ */
description?: string; description: string;
}; };
/** /**