From 27d67d77963c6f827c77f4aed88bb3ae57d02060 Mon Sep 17 00:00:00 2001
From: Satanshu Mishra <satanshumishra@outlook.com>
Date: Thu, 18 Jul 2024 02:04:51 -0700
Subject: [PATCH] Sidebar Reorganization Implementation (#8197)

Co-authored-by: Paul Valladares <85648028+dreyfus92@users.noreply.github.com>
Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>
Co-authored-by: Reuben Tier <64310361+TheOtterlord@users.noreply.github.com>
---
 astro.config.ts                               |  1 +
 src/components/FooterLinks.astro              | 43 +++++++++++++++++
 src/components/starlight/EditLink.astro       | 20 ++++++--
 src/components/starlight/Footer.astro         |  8 ++++
 .../starlight/TableOfContents.astro           | 47 +------------------
 src/components/tutorial/FeedbackButton.astro  | 31 +++++++-----
 6 files changed, 90 insertions(+), 60 deletions(-)
 create mode 100644 src/components/FooterLinks.astro
 create mode 100644 src/components/starlight/Footer.astro

diff --git a/astro.config.ts b/astro.config.ts
index 0fc6794f9cadb..839a717d367dc 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -32,6 +32,7 @@ export default defineConfig({
 				TableOfContents: './src/components/starlight/TableOfContents.astro',
 				PageSidebar: './src/components/starlight/PageSidebar.astro',
 				Pagination: './src/components/starlight/Pagination.astro',
+				Footer: './src/components/starlight/Footer.astro',
 				SiteTitle: './src/components/starlight/SiteTitle.astro',
 				Search: './src/components/starlight/Search.astro',
 				Sidebar: './src/components/starlight/Sidebar.astro',
diff --git a/src/components/FooterLinks.astro b/src/components/FooterLinks.astro
new file mode 100644
index 0000000000000..a819c010da57a
--- /dev/null
+++ b/src/components/FooterLinks.astro
@@ -0,0 +1,43 @@
+---
+import { Icon } from '@astrojs/starlight/components';
+import FeedbackButton from '../components/tutorial/FeedbackButton.astro';
+import { useTranslations } from '~/i18n/util';
+import { getLanguageFromURL } from '~/util';
+
+const t = useTranslations(Astro);
+const lang = getLanguageFromURL(Astro.url.pathname);
+---
+
+<section class="sl-flex">
+	<a href={`/${lang}/contribute/`} class="sl-flex">
+		<Icon name="open-book" size="1.2em" />
+		{t('rightSidebar.contribute')}
+	</a>
+
+	<FeedbackButton />
+
+	<a href="https://community.astro.build" class="sl-flex">
+		<Icon name="heart" size="1.2em" />
+		{t('rightSidebar.community')}
+	</a>
+</section>
+
+<style>
+	section {
+		justify-content: center;
+		flex-wrap: wrap;
+		gap: 0.5rem 1.5rem;
+		font-size: var(--sl-text-sm);
+	}
+
+	a {
+		align-items: center;
+		text-decoration: none;
+		gap: 0.5rem;
+		color: var(--sl-color-gray-3);
+	}
+
+	a:hover {
+		color: var(--sl-color-white);
+	}
+</style>
diff --git a/src/components/starlight/EditLink.astro b/src/components/starlight/EditLink.astro
index 61b1b26c2e63b..3ef14e83b330a 100644
--- a/src/components/starlight/EditLink.astro
+++ b/src/components/starlight/EditLink.astro
@@ -1,9 +1,11 @@
 ---
 import { Icon } from '@astrojs/starlight/components';
 import type { Props } from '@astrojs/starlight/props';
+import { useTranslations } from '~/i18n/util';
 
 const { editUrl, labels, entry, locale, isFallback } = Astro.props;
 
+const t = useTranslations(Astro);
 const githubEditUrl =
 	entry.data.githubURL && (locale === 'en' || isFallback)
 		? `${entry.data.githubURL}${entry.data.hasREADME ? 'README.md' : ''}`
@@ -12,14 +14,24 @@ const githubEditUrl =
 
 {
 	editUrl && (
-		<a href={githubEditUrl} class="sl-flex">
-			<Icon name="pencil" size="1.2em" />
-			{labels['page.editLink']}
-		</a>
+		<div class="sl-flex">
+			<a href={githubEditUrl} class="sl-flex">
+				<Icon name="pencil" size="1.2em" />
+				{labels['page.editLink']}
+			</a>
+			<a href="https://contribute.docs.astro.build/guides/i18n/" class="sl-flex">
+				<Icon name="translate" size="1.2em" /> {t('rightSidebar.translatePage')}
+			</a>
+		</div>
 	)
 }
 
 <style>
+	div {
+		flex-wrap: wrap;
+		gap: 0.5rem 1.5rem;
+		font-size: var(--sl-text-sm);
+	}
 	a {
 		gap: 0.5rem;
 		align-items: center;
diff --git a/src/components/starlight/Footer.astro b/src/components/starlight/Footer.astro
new file mode 100644
index 0000000000000..5f68acb2d8da7
--- /dev/null
+++ b/src/components/starlight/Footer.astro
@@ -0,0 +1,8 @@
+---
+import DefaultFooter from '@astrojs/starlight/components/Footer.astro';
+import FooterLinks from '../FooterLinks.astro';
+import type { Props } from '@astrojs/starlight/props';
+---
+
+<DefaultFooter {...Astro.props} />
+<FooterLinks />
diff --git a/src/components/starlight/TableOfContents.astro b/src/components/starlight/TableOfContents.astro
index 7a1411b68de7f..17636003bfc4b 100644
--- a/src/components/starlight/TableOfContents.astro
+++ b/src/components/starlight/TableOfContents.astro
@@ -4,19 +4,12 @@ import { useTranslations as useStarlightTranslations } from '@astrojs/starlight/
 import TableOfContentsList from '../../../node_modules/@astrojs/starlight/components/TableOfContents/TableOfContentsList.astro';
 import type { Props } from '@astrojs/starlight/props';
 import TutorialNav from '../tutorial/TutorialNav.astro';
-import { Icon } from '@astrojs/starlight/components';
-import FeedbackButton from '../tutorial/FeedbackButton.astro';
 
 const isTutorial = Astro.props.entry.slug.split('/')[1] === 'tutorial';
 
-const { locale, toc, editUrl, entry, isFallback } = Astro.props;
+const { locale, toc } = Astro.props;
 const t = useTranslations(Astro);
 const starlightTranslations = useStarlightTranslations(locale);
-
-const githubEditUrl =
-	entry.data.githubURL && (locale === 'en' || isFallback)
-		? `${entry.data.githubURL}${entry.data.hasREADME ? 'README.md' : ''}`
-		: editUrl;
 ---
 
 {
@@ -28,47 +21,11 @@ const githubEditUrl =
 						? t('tutorial.trackerLabel')
 						: starlightTranslations('tableOfContents.onThisPage')}
 				</h2>
-				{isTutorial ? (
-					<TutorialNav {...Astro.props} />
-				) : (
-					<>
-						<TableOfContentsList toc={toc.items} />
-						<h2 class="contribute">{t('rightSidebar.contribute')}</h2>
-						<ul>
-							<li>
-								<a href={`/${locale}/contribute/`}>
-									<Icon name="open-book" /> {t('rightSidebar.contribute')}
-								</a>
-							</li>
-							<li>
-								<a href={githubEditUrl}>
-									<Icon name="pencil" /> {t('rightSidebar.editPage')}
-								</a>
-							</li>
-							<li>
-								<a href="https://contribute.docs.astro.build/guides/i18n/">
-									<Icon name="translate" /> {t('rightSidebar.translatePage')}
-								</a>
-							</li>
-						</ul>
-						<FeedbackButton />
-					</>
-				)}
+				{isTutorial ? <TutorialNav {...Astro.props} /> : <TableOfContentsList toc={toc.items} />}
 			</nav>
 		</starlight-toc>
 	)
 }
 
-<style>
-	ul {
-		padding: 0;
-		list-style: none;
-	}
-
-	.contribute {
-		margin-top: 1rem;
-	}
-</style>
-
 <script src="../../../node_modules/@astrojs/starlight/components/TableOfContents/starlight-toc"
 ></script>
diff --git a/src/components/tutorial/FeedbackButton.astro b/src/components/tutorial/FeedbackButton.astro
index d5c13874bfd11..c544376b75c8c 100644
--- a/src/components/tutorial/FeedbackButton.astro
+++ b/src/components/tutorial/FeedbackButton.astro
@@ -26,6 +26,7 @@ const instanceId = Math.round(Math.random() * 10e9).toString(36);
 
 <feedback-form>
 	<button data-open-modal disabled>
+		<Icon name="comment-alt" size="1.2em" />
 		<UIString key="feedback.button" />
 	</button>
 
@@ -234,6 +235,17 @@ const instanceId = Math.round(Math.random() * 10e9).toString(36);
 		--feedback-form-close-icon-size: 1.5rem;
 	}
 
+	button[data-open-modal] {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		color: var(--sl-color-gray-3);
+	}
+
+	button[data-open-modal]:hover {
+		color: var(--sl-color-white);
+	}
+
 	dialog {
 		font-size: var(--theme-text-base);
 		margin: 1.5rem auto auto;
@@ -368,6 +380,8 @@ const instanceId = Math.round(Math.random() * 10e9).toString(36);
 		height: 100%;
 		font-size: var(--sl-text-2xl);
 		cursor: pointer;
+		text-decoration: none;
+		color: var(--sl-color-white);
 	}
 
 	.select-buttons > button {
@@ -381,6 +395,11 @@ const instanceId = Math.round(Math.random() * 10e9).toString(36);
 	}
 
 	.select-buttons h2 {
+		font-size: var(--sl-text-h5);
+		font-weight: 600;
+		line-height: var(--sl-line-height-headings);
+		margin-bottom: 0.5rem;
+		text-decoration: none;
 		color: var(--sl-color-white);
 	}
 
@@ -458,19 +477,9 @@ const instanceId = Math.round(Math.random() * 10e9).toString(36);
 	}
 
 	button[data-open-modal] {
-		margin-top: 0.5rem;
-		border: 1px solid var(--sl-color-gray-1);
-		border-radius: 1rem;
 		background-color: transparent;
 		cursor: pointer;
-		font-size: var(--sl-text-xs);
-		line-height: calc(1 / var(--theme-text-xs));
-		padding: 0.25rem 0.75rem;
-	}
-
-	button[data-open-modal]:hover,
-	button[data-open-modal]:focus {
-		background-color: var(--sl-color-gray-6);
+		border: none;
 	}
 
 	button[data-open-modal]:focus:not(:focus-visible) {