Sidebar Reorganization Implementation #8197

SatanshuMishra · 2024-05-07T07:35:38Z

Description (required)

This PR aims to implement the changes proposed in #6845. The changes made include:

Contribute Section was removed from the RightSideBar.
The Translate option was moved beside the Edit Page option at the bottom of the page above the Pagination.
A new References component was created to hold the links to the Contribute, Give Feedback, and Community pages.
A custom Footer component created to override the default Starlight Footer. The Pagination, EditLinks, & References components were added to this component (as before). The LastUpdated component was also added (commented out) for possible future development.
Added custom icons for Give Feedback and Community options.

Related issues & labels (optional)

Closes Sidebar reorganisation proposal #6845
Suggested label: site-improvement

Preview of changed:
Current Implementation:

Proposed Changes:

Special thanks to @delucis for coming up with the design and guidance throughout this implementation.

Removed Contribute Section from RightSideBar and Added Translate Page beside Edit Page.

- Added dedicated footer component to override default footer generated by Starlight. - Added Pagination, EditLink and References component to file. Added LastUpdated (commented) for possible future development. - Removed Contribute section completely from TableOfContents. - Updated FeedbackButton and Feedback Form to have accurate styling. - Added Footer to astro.config.ts.

vercel · 2024-05-07T07:35:42Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
docs	✅ Ready (Inspect)	Visit Preview	May 8, 2024 2:45am

dreyfus92

Hey @SatanshuMishra, awesome job thanks for tackling this. I believe we can remove this unused import.

src/components/starlight/Footer.astro

delucis

Thank you for putting this together @SatanshuMishra! Really appreciate you picking it up. I’ve left some initial feedback.

There are probably also two details to discuss:

Are we happy with this also being added to the homepage? (My gut instinct is yes, it’s nice.)
Whether we want any extra space between the pagination links and the new footer links. Curious what others think on this one.

src/components/tutorial/FeedbackButton.astro

delucis · 2024-05-07T09:06:16Z

src/components/tutorial/FeedbackButton.astro

+		text-decoration: none;
 		background-color: var(--sl-color-gray-5);
 	}

 	.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;


I’m not quite clear what the changes inside the feedback modal are doing? Comparing the preview and the live site, the live site’s styles seem correct, so I think we should aim to match them (which is maybe as simple as not changing anything?)

I discovered that moving the FeedbackButton outside the RightSideBar made some scoped CSS in-accessible. This made the formatting for the title in correct. The above fixes this. It is the same style as before (take directly from inspect). I'm not sure if there is some other way to keep the formatting.

src/components/References.astro

Remove un-used component mention. Co-authored-by: Paul Valladares <85648028+dreyfus92@users.noreply.github.com>

Remove un-used component import. Co-authored-by: Paul Valladares <85648028+dreyfus92@users.noreply.github.com>

SatanshuMishra · 2024-05-08T01:33:42Z

Thank you for putting this together @SatanshuMishra! Really appreciate you picking it up. I’ve left some initial feedback.

There are probably also two details to discuss:

Are we happy with this also being added to the homepage? (My gut instinct is yes, it’s nice.)

Whether we want any extra space between the pagination links and the new footer links. Curious what others think on this one.

I think this looks good too @delucis! Certainly nice to give people to learn about how to contribute, give us feedback or see the amazing community page we have.

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>

- Changed References to FooterLinks - Changed color consistency for Footer and FeedbackButton.

adaliszk · 2024-05-16T13:04:37Z

src/components/FooterLinks.astro

+		style="display: flex; flex-direction: row; align-items: center; text-decoration: none;"
+	>
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12.001 4.52853C14.35 2.42 17.98 2.49 20.2426 4.75736C22.5053 7.02472 22.583 10.637 20.4786 12.993L11.9999 21.485L3.52138 12.993C1.41705 10.637 1.49571 7.01901 3.75736 4.75736C6.02157 2.49315 9.64519 2.41687 12.001 4.52853ZM18.827 6.1701C17.3279 4.66794 14.9076 4.60701 13.337 6.01687L12.0019 7.21524L10.6661 6.01781C9.09098 4.60597 6.67506 4.66808 5.17157 6.17157C3.68183 7.66131 3.60704 10.0473 4.97993 11.6232L11.9999 18.6543L19.0201 11.6232C20.3935 10.0467 20.319 7.66525 18.827 6.1701Z"></path></svg>
+		 Community


Question: Should this not be translated?

Hi @adaliszk! This PR simply aims to transfer the existing content into the new structure. The Community link is a new addition and doesn't have a translation. I'm not 100% sure but a separate PR will probably need to be submitted if this PR (with the basic structure) is approved.

adaliszk · 2024-05-16T13:04:41Z

src/components/FooterLinks.astro

+		style="display: flex; flex-direction: row; align-items: center; text-decoration: none;"
+	>
+		<Icon name="open-book" size="1.2em" />
+		 Contribute


Question: Should this not be translated?

I can review this. Perhaps I missed the translation for this.

adaliszk · 2024-05-16T13:05:02Z

src/components/starlight/EditLink.astro

+				{labels['page.editLink']}
+			</a>
+			<a href="https://contribute.docs.astro.build/guides/i18n/" class="sl-flex" style="padding-left: 10px;">
+				<Icon name="translate" size="1.2em" /> Translate


Question: Should this not be translated?

Same as before. I can review this. Perhaps I missed the translation for this.

adaliszk · 2024-05-16T13:07:38Z

src/components/starlight/EditLink.astro

-			<Icon name="pencil" size="1.2em" />
-			{labels['page.editLink']}
-		</a>
+		<div class="sl-flex">


Nitpick: For small screens, this probably should contain a row alignment so that the translated texts do not wrap.

TheOtterlord

Here's the translation snippets for the untranslated strings

TheOtterlord · 2024-05-16T13:04:06Z

src/components/starlight/EditLink.astro

+				{labels['page.editLink']}
+			</a>
+			<a href="https://contribute.docs.astro.build/guides/i18n/" class="sl-flex" style="padding-left: 10px;">
+				<Icon name="translate" size="1.2em" /> Translate


Suggested change

<Icon name="translate" size="1.2em" /> Translate

<Icon name="translate" size="1.2em" /> {t('rightSidebar.translatePage')}

TheOtterlord · 2024-05-16T13:05:06Z

src/components/FooterLinks.astro

+		style="display: flex; flex-direction: row; align-items: center; text-decoration: none;"
+	>
+		<Icon name="open-book" size="1.2em" />
+		 Contribute


Suggested change

Contribute

{t('rightSidebar.contribute')}

TheOtterlord · 2024-05-16T13:07:58Z

src/components/FooterLinks.astro

+		style="display: flex; flex-direction: row; align-items: center; text-decoration: none;"
+	>
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12.001 4.52853C14.35 2.42 17.98 2.49 20.2426 4.75736C22.5053 7.02472 22.583 10.637 20.4786 12.993L11.9999 21.485L3.52138 12.993C1.41705 10.637 1.49571 7.01901 3.75736 4.75736C6.02157 2.49315 9.64519 2.41687 12.001 4.52853ZM18.827 6.1701C17.3279 4.66794 14.9076 4.60701 13.337 6.01687L12.0019 7.21524L10.6661 6.01781C9.09098 4.60597 6.67506 4.66808 5.17157 6.17157C3.68183 7.66131 3.60704 10.0473 4.97993 11.6232L11.9999 18.6543L19.0201 11.6232C20.3935 10.0467 20.319 7.66525 18.827 6.1701Z"></path></svg>
+		 Community


Suggested change

Community

{t('rightSidebar.community')}

adaliszk · 2024-05-16T13:14:46Z

Overall, it would look better if both the link lists were always aligned to the center, perhaps even with a top border to separate the footer from the rest of the content.
Another thing that might be worthwhile to do is on mobile screens. The links would be excellent if they were bigger and had full-width rows, so it's easy to tap on them.

TheOtterlord

At getting-started the bottom padding of the Discord button looks a little weird.

Changing the padding to only use the top might make it look better.

SatanshuMishra · 2024-05-20T00:22:05Z

Here's the translation snippets for the untranslated strings

Hey @TheOtterlord! I'm not sure if translation suggestions should be submitted on this PR. They may need to be their own PRs since this PR focuses on generating the new structure. Feel free to correct me if I'm wrong through!

TheOtterlord · 2024-05-20T13:09:42Z

The suggestions apply our existing translations from the old structure, so we're not introducing any new translations.

SatanshuMishra added 2 commits May 6, 2024 14:17

RightSideBar and Options

de5f069

Removed Contribute Section from RightSideBar and Added Translate Page beside Edit Page.

Removed Unused Imports

0c2c247

dreyfus92 reviewed May 7, 2024

View reviewed changes

src/components/starlight/Footer.astro Outdated Show resolved Hide resolved

src/components/starlight/Footer.astro Outdated Show resolved Hide resolved

vercel bot deployed to Preview – docs May 7, 2024 07:53 View deployment

delucis added the site improvement Some thing that improves the website functionality - ask @delucis for help! label May 7, 2024

delucis reviewed May 7, 2024

View reviewed changes

delucis mentioned this pull request May 7, 2024

Add comment and heart icons withastro/starlight#1837

Merged

SatanshuMishra and others added 2 commits May 7, 2024 18:31

Update src/components/starlight/Footer.astro

06f1518

Remove un-used component mention. Co-authored-by: Paul Valladares <85648028+dreyfus92@users.noreply.github.com>

Update src/components/starlight/Footer.astro

4dcdea6

Remove un-used component import. Co-authored-by: Paul Valladares <85648028+dreyfus92@users.noreply.github.com>

vercel bot deployed to Preview – docs May 8, 2024 01:49 View deployment

SatanshuMishra and others added 3 commits May 7, 2024 18:51

Update src/components/tutorial/FeedbackButton.astro

3befde2

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>

Update src/components/tutorial/FeedbackButton.astro

bdd0a15

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>

Update src/components/References.astro

d268d1e

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>

vercel bot deployed to Preview – docs May 8, 2024 02:08 View deployment

Name Change and Color Consistency

9abc7b2

- Changed References to FooterLinks - Changed color consistency for Footer and FeedbackButton.

vercel bot deployed to Preview – docs May 8, 2024 02:45 View deployment

adaliszk reviewed May 16, 2024

View reviewed changes

TheOtterlord reviewed May 16, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Sidebar Reorganization Implementation #8197

Sidebar Reorganization Implementation #8197

SatanshuMishra commented May 7, 2024 •

edited

vercel bot commented May 7, 2024 •

edited

dreyfus92 left a comment

delucis left a comment

delucis May 7, 2024

SatanshuMishra May 8, 2024

SatanshuMishra commented May 8, 2024 •

edited

adaliszk May 16, 2024

SatanshuMishra May 20, 2024

adaliszk May 16, 2024

SatanshuMishra May 20, 2024

adaliszk May 16, 2024

SatanshuMishra May 20, 2024

adaliszk May 16, 2024

TheOtterlord left a comment

TheOtterlord May 16, 2024

TheOtterlord May 16, 2024

TheOtterlord May 16, 2024

adaliszk commented May 16, 2024

TheOtterlord left a comment •

edited

SatanshuMishra commented May 20, 2024

TheOtterlord commented May 20, 2024

	<Icon name="translate" size="1.2em" /> Translate
	<Icon name="translate" size="1.2em" /> {t('rightSidebar.translatePage')}

Sidebar Reorganization Implementation #8197

Are you sure you want to change the base?

Sidebar Reorganization Implementation #8197

Conversation

SatanshuMishra commented May 7, 2024 • edited

Description (required)

Related issues & labels (optional)

vercel bot commented May 7, 2024 • edited

dreyfus92 left a comment

Choose a reason for hiding this comment

delucis left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SatanshuMishra commented May 8, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

TheOtterlord left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adaliszk commented May 16, 2024

TheOtterlord left a comment • edited

Choose a reason for hiding this comment

SatanshuMishra commented May 20, 2024

TheOtterlord commented May 20, 2024

SatanshuMishra commented May 7, 2024 •

edited

vercel bot commented May 7, 2024 •

edited

SatanshuMishra commented May 8, 2024 •

edited

TheOtterlord left a comment •

edited