From 1b4f69b00a3b92c29617b4c5416e20ca41c6e735 Mon Sep 17 00:00:00 2001
From: Suneet Tipirneni <77477100+suneettipirneni@users.noreply.github.com>
Date: Sat, 8 Oct 2022 18:58:28 -0400
Subject: [PATCH] feat(guide): add github links for pages (#8725)

---
 packages/guide/astro.config.ts                    |  1 +
 packages/guide/src/components/ExternalLink.tsx    | 10 ++++++++++
 packages/guide/src/components/SidebarLayout.astro | 10 +++++++++-
 packages/guide/src/util/constants.ts              |  2 ++
 packages/guide/src/util/url.ts                    |  5 +++++
 5 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 packages/guide/src/components/ExternalLink.tsx
 create mode 100644 packages/guide/src/util/url.ts

diff --git a/packages/guide/astro.config.ts b/packages/guide/astro.config.ts
index 3bbff8935..ceac0eb4c 100644
--- a/packages/guide/astro.config.ts
+++ b/packages/guide/astro.config.ts
@@ -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)),
diff --git a/packages/guide/src/components/ExternalLink.tsx b/packages/guide/src/components/ExternalLink.tsx
new file mode 100644
index 000000000..8be7e899a
--- /dev/null
+++ b/packages/guide/src/components/ExternalLink.tsx
@@ -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>
+	);
+}
diff --git a/packages/guide/src/components/SidebarLayout.astro b/packages/guide/src/components/SidebarLayout.astro
index 41a60529a..33d67d644 100644
--- a/packages/guide/src/components/SidebarLayout.astro
+++ b/packages/guide/src/components/SidebarLayout.astro
@@ -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>
diff --git a/packages/guide/src/util/constants.ts b/packages/guide/src/util/constants.ts
index 71f3be4e2..a8aefdfea 100644
--- a/packages/guide/src/util/constants.ts
+++ b/packages/guide/src/util/constants.ts
@@ -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';
diff --git a/packages/guide/src/util/url.ts b/packages/guide/src/util/url.ts
new file mode 100644
index 000000000..125d745b5
--- /dev/null
+++ b/packages/guide/src/util/url.ts
@@ -0,0 +1,5 @@
+import { GITHUB_BASE_PAGES_PATH } from './constants.js';
+
+export function generateGithubURL(pageURL: string) {
+	return `${GITHUB_BASE_PAGES_PATH}${pageURL}.mdx`;
+}