discordjs/discord.js
2
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2024-08-20 20:54:47 +12:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Suneet Tipirneni 2022-11-25 15:49:36 -05:00 committed by GitHub
parent 56d086022f
commit 650f4ddfb2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 59 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
apps/guide/src/components/PageButton.tsx Normal file
View 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>
);
}

49
apps/guide/src/components/SidebarLayout.astro
View file

@ -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>