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.

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-07T08:58:57Z

src/components/tutorial/FeedbackButton.astro

@@ -368,6 +395,8 @@ const instanceId = Math.round(Math.random() * 10e9).toString(36);
 height: 100%;
 font-size: var(--sl-text-2xl);
 cursor: pointer;
+ text-decoration: none;
+ color: white;


Same here for the colours — white text is not visible in light mode.

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 <[email protected]>

Remove un-used component import. Co-authored-by: Paul Valladares <[email protected]>

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 <[email protected]>

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

src/components/FooterLinks.astro

src/components/starlight/EditLink.astro

TheOtterlord

Here's the translation snippets for the untranslated strings

src/components/starlight/EditLink.astro

src/components/FooterLinks.astro

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.

netlify · 2024-07-13T10:04:10Z

✅ Deploy Preview for astro-docs-2 ready!

Name	Link
🔨 Latest commit	`9fbda94`
🔍 Latest deploy log	https://app.netlify.com/sites/astro-docs-2/deploys/66985983893b060008579ca8
😎 Deploy Preview	https://deploy-preview-8197--astro-docs-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Co-authored-by: Reuben Tier <[email protected]>

sarah11918

This looks great! I tested at a few different screen sizes, and love having everything always visible in the new footer.

dreyfus92

Awesome job peeps! LGTM 🫡

delucis

Thanks for your patience on this one @SatanshuMishra! I spent a bit of time tidying up loose ends and should now be good to go. Thank you for contributing this! 🚀

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.

This comment was marked as outdated.

Sign in to view

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 <[email protected]>

Update src/components/starlight/Footer.astro

4dcdea6

Remove un-used component import. Co-authored-by: Paul Valladares <[email protected]>

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 <[email protected]>

Update src/components/tutorial/FeedbackButton.astro

bdd0a15

Co-authored-by: Chris Swithinbank <[email protected]>

Update src/components/References.astro

d268d1e

Co-authored-by: Chris Swithinbank <[email protected]>

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

src/components/FooterLinks.astro Outdated Show resolved Hide resolved

adaliszk reviewed May 16, 2024

View reviewed changes

src/components/FooterLinks.astro Outdated Show resolved Hide resolved

adaliszk reviewed May 16, 2024

View reviewed changes

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

adaliszk reviewed May 16, 2024

View reviewed changes

src/components/starlight/EditLink.astro Show resolved Hide resolved

TheOtterlord reviewed May 16, 2024

View reviewed changes

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

src/components/FooterLinks.astro Outdated Show resolved Hide resolved

src/components/FooterLinks.astro Outdated Show resolved Hide resolved

TheOtterlord reviewed May 16, 2024

View reviewed changes

Merge branch 'main' into pr-6845

dca8276

delucis and others added 12 commits July 17, 2024 23:28

Use UI strings for labels

1b2996c

Co-authored-by: Reuben Tier <[email protected]>

Use UI strings for labels

2531032

Co-authored-by: Reuben Tier <[email protected]>

Fix missing t()

acabac2

Use relative, localized link to contribute page

7471a15

Merge branch 'main' into pr-6845

0901013

Use <Icon> for heart

fa50d86

pnpm format

8d6aad1

Tidy up icons

6c46363

Clean up/simplify some layout styles

f4737d1

Fix light mode icon colour in feedback dialog

b27aa32

More layout cleanup

3de1d17

Re-use default footer

9fbda94

sarah11918 approved these changes Jul 18, 2024

View reviewed changes

dreyfus92 approved these changes Jul 18, 2024

View reviewed changes

delucis approved these changes Jul 18, 2024

View reviewed changes

delucis merged commit 27d67d7 into withastro:main Jul 18, 2024
10 checks passed

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

Loading

This comment was marked as outdated.

dreyfus92 left a comment

delucis left a comment

delucis May 7, 2024

delucis May 7, 2024

SatanshuMishra May 8, 2024

SatanshuMishra commented May 8, 2024 •

edited

Loading

TheOtterlord left a comment

adaliszk commented May 16, 2024

TheOtterlord left a comment •

edited

Loading

SatanshuMishra commented May 20, 2024

TheOtterlord commented May 20, 2024

netlify bot commented Jul 13, 2024 •

edited

Loading

sarah11918 left a comment

dreyfus92 left a comment

delucis left a comment

Sidebar Reorganization Implementation #8197

Sidebar Reorganization Implementation #8197

Conversation

SatanshuMishra commented May 7, 2024 • edited Loading

Description (required)

Related issues & labels (optional)

This comment was marked as outdated.

dreyfus92 left a comment

Choose a reason for hiding this comment

delucis left a comment

Choose a reason for hiding this comment

delucis May 7, 2024

Choose a reason for hiding this comment

delucis May 7, 2024

Choose a reason for hiding this comment

SatanshuMishra May 8, 2024

Choose a reason for hiding this comment

SatanshuMishra commented May 8, 2024 • edited Loading

TheOtterlord left a comment

Choose a reason for hiding this comment

adaliszk commented May 16, 2024

TheOtterlord left a comment • edited Loading

Choose a reason for hiding this comment

SatanshuMishra commented May 20, 2024

TheOtterlord commented May 20, 2024

netlify bot commented Jul 13, 2024 • edited Loading

✅ Deploy Preview for astro-docs-2 ready!

sarah11918 left a comment

Choose a reason for hiding this comment

dreyfus92 left a comment

Choose a reason for hiding this comment

delucis left a comment

Choose a reason for hiding this comment

SatanshuMishra commented May 7, 2024 •

edited

Loading

SatanshuMishra commented May 8, 2024 •

edited

Loading

TheOtterlord left a comment •

edited

Loading

netlify bot commented Jul 13, 2024 •

edited

Loading