feat(guide): add github links for pages (#8725)

This commit is contained in:
Suneet Tipirneni
2022-10-08 18:58:28 -04:00
committed by GitHub
parent 1ea7664aa3
commit 1b4f69b00a
5 changed files with 27 additions and 1 deletions

View File

@@ -93,6 +93,7 @@ export default defineConfig({
alias: {
'ariakit/button': fileURLToPath(new URL('node_modules/ariakit/esm/button/index.js', import.meta.url)),
'ariakit/disclosure': fileURLToPath(new URL('node_modules/ariakit/esm/disclosure/index.js', import.meta.url)),
'ariakit/separator': fileURLToPath(new URL('node_modules/ariakit/esm/separator/index.js', import.meta.url)),
'ariakit-utils/dom': fileURLToPath(new URL('node_modules/ariakit-utils/esm/dom.js', import.meta.url)),
'ariakit-utils/events': fileURLToPath(new URL('node_modules/ariakit-utils/esm/events.js', import.meta.url)),
'ariakit-utils/focus': fileURLToPath(new URL('node_modules/ariakit-utils/esm/focus.js', import.meta.url)),

View File

@@ -0,0 +1,10 @@
import { FiExternalLink } from 'react-icons/fi';
export function ExternalLink({ href, title }: { href: string; title: string }) {
return (
<a className="text-blurple inline-flex place-items-center gap-2 text-sm font-semibold" href={href}>
<p>{title}</p>
<FiExternalLink size={18} />
</a>
);
}

View File

@@ -1,13 +1,16 @@
---
import { Separator } from 'ariakit/separator';
import type { MarkdownLayoutProps } from 'astro';
import { ExternalLink } from './ExternalLink.jsx';
import { Navbar } from './Navbar.jsx';
import { Outline } from './Outline.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 } = Astro.props;
const { headings, url } = Astro.props;
---
<script>
@@ -47,11 +50,16 @@ const { headings } = Astro.props;
<div class="prose max-w-full">
<slot />
</div>
<div
class="h-[calc(100vh - 72px)] dark:bg-dark-600 dark:border-dark-100 border-light-800 fixed top-[72px] right-0 bottom-0 z-20 hidden w-64 border-l bg-white pr-2 xl:block"
>
<Outline client:load headings={headings} />
</div>
<Separator className="my-5" />
<div class="flex place-content-end">
<ExternalLink client:load href={generateGithubURL(url!)} title="Edit this page on github" />
</div>
</div>
<div class="h-76 md:h-52"></div>

View File

@@ -1 +1,3 @@
export const DESCRIPTION = 'Imagine a guide... that explores the many possibilities for your discord.js bot.';
export const GITHUB_BASE_PAGES_PATH = 'https://github.com/discordjs/discord.js/tree/main/packages/guide/src/pages';

View File

@@ -0,0 +1,5 @@
import { GITHUB_BASE_PAGES_PATH } from './constants.js';
export function generateGithubURL(pageURL: string) {
return `${GITHUB_BASE_PAGES_PATH}${pageURL}.mdx`;
}