feat(guide): add next and previous page buttons (#8777)

apps/guide/src/components/PageButton.tsx

@@ -0,0 +1,13 @@
+export function PageButton({ url, title, direction }: { direction: 'next' | 'prev'; title: string; url: string }) {
+	return (
+		<a
+			className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple flex transform-gpu cursor-pointer select-none appearance-none flex-row flex-col place-items-center gap-2 rounded py-3 px-4 leading-none no-underline outline-0 focus:ring active:translate-y-px"
+			href={url}
+		>
+			<h3 className="text-md font-semibold">{title}</h3>
+			<p className={`${direction === 'next' ? 'ml-auto' : 'mr-auto'} text-sm text-gray-600 dark:text-gray-400`}>
+				{direction === 'next' ? 'Next Page' : 'Previous Page'}
+			</p>
+		</a>
+	);
+}

apps/guide/src/components/SidebarLayout.astro

@@ -4,13 +4,32 @@ import type { MarkdownLayoutProps } from 'astro';
 import { ExternalLink } from './ExternalLink.jsx';
 import { Navbar } from './Navbar.jsx';
 import { Outline } from './Outline.jsx';
+import { PageButton } from './PageButton.jsx';
 import { SidebarItems } from './SidebarItems.jsx';
 import { generateGithubURL } from '~/util/url.js';
 
 const pages = await Astro.glob<{ category: string; title: string }>('../pages/**/*.mdx');
 
 type Props = MarkdownLayoutProps<{}>;
-const { headings, url } = Astro.props;
+const { headings, url, frontmatter } = Astro.props;
+
+const groupedPages = pages.reduce<Record<string, typeof pages>>((acc, page) => {
+	const { category } = page.frontmatter;
+	acc[category] ??= [];
+
+	acc[category]?.push(page);
+	return acc;
+}, {});
+
+// @ts-expect-error props is not typed
+const category = frontmatter.category as string;
+
+const curCategoryPages = groupedPages[category];
+const curCategoryIndex = curCategoryPages!.findIndex((page) => page.url === url);
+
+const pagePrev = curCategoryPages![curCategoryIndex - 1];
+// eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+const pageNext = curCategoryPages![curCategoryIndex + 1];
 ---
 
 <script>
@@ -57,8 +76,32 @@ const { headings, url } = Astro.props;
 				<Outline client:load headings={headings} />
 			</div>
 			<Separator className="my-5 border-light-800 dark:border-dark-100" />
-			<div class="flex place-content-end">
+			<div class="flex flex-col space-y-5">
-				<ExternalLink client:load href={generateGithubURL(url!)} title="Edit this page on github" />
+				<div class="flex place-content-end">
+					<ExternalLink client:load href={generateGithubURL(url!)} title="Edit this page on github" />
+				</div>
+				<div class="flex w-full">
+					{
+						pagePrev && (
+							<PageButton
+								direction="prev"
+								title={pagePrev.frontmatter.title}
+								url={pagePrev.url === '' ? '/' : pagePrev.url!}
+							/>
+						)
+					}
+					<div class="justify-self-end self-end ml-auto">
+						{
+							pageNext && (
+								<PageButton
+									direction="next"
+									title={pageNext.frontmatter.title}
+									url={pageNext.url === '' ? '/' : pageNext.url!}
+								/>
+							)
+						}
+					</div>
+				</div>
 			</div>
 		</div>