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>
withastro · Jul 18, 2024 · 27d67d7 · 27d67d7
1 parent a5580eb
commit 27d67d7
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 60 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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) {