mirror of
https://github.com/discordjs/discord.js.git
synced 2024-08-20 20:54:47 +12:00
feat(guide): add next and previous page buttons (#8777)
This commit is contained in:
parent
56d086022f
commit
650f4ddfb2
2 changed files with 59 additions and 3 deletions
13
apps/guide/src/components/PageButton.tsx
Normal file
13
apps/guide/src/components/PageButton.tsx
Normal file
|
@ -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>
|
||||
);
|
||||
}
|
|
@ -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">
|
||||
<ExternalLink client:load href={generateGithubURL(url!)} title="Edit this page on github" />
|
||||
<div class="flex flex-col space-y-5">
|
||||
<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>
|
||||
|
||||
|
|
Loading…
Reference in a new issue