feat(blog): group sidebar items by year (themeConfig.blog.sidebar.groupByYear)

[alicelovescake]

Motivation

This PR adds a new themeConfig.blog.sidebar.groupByYear option to group sidebar items by year in both mobile/desktop views.

It is turned on by default to help feature discovery, because it makes sense for many sites to use it. Users that don't like it can opt-out with themeConfig.blog.sidebar.groupByYear = false

Test Plan

Unit tests + dogfood

Test links

https://deploy-preview-10252--docusaurus-2.netlify.app/blog

Docs: https://deploy-preview-10252--docusaurus-2.netlify.app/docs/api/themes/configuration/#blog

[netlify]

✅ [V2]

Name	Link
🔨 Latest commit	0da19fd
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/667eb0271bff760008d1279a
😎 Deploy Preview	https://deploy-preview-10252--docusaurus-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.

[github-actions]

⚡️ Lighthouse report for the deploy preview of this PR

URL	Performance	Accessibility	Best Practices	SEO	PWA	Report
/	🟠 89	🟢 98	🟢 96	🟢 100	🔴 NaN	Report
/docs/installation	🟠 55	🟢 97	🟢 100	🟢 100	🔴 NaN	Report
/docs/category/getting-started	🟠 75	🟢 100	🟢 100	🟠 86	🔴 NaN	Report
/blog	🟠 70	🟢 100	🟢 100	🟠 86	🔴 NaN	Report
/blog/preparing-your-site-for-docusaurus-v3	🔴 49	🟢 96	🟢 100	🟢 100	🔴 NaN	Report
/blog/tags/release	🟠 70	🟢 100	🟢 100	🟠 86	🔴 NaN	Report
/blog/tags	🟠 75	🟢 100	🟢 100	🟠 86	🔴 NaN	Report

[slorber]

thanks @alicelovescake

Why not make it a first-class blog plugin option?
Otherwise, we expose data that we don't even use ourselves.
I think even for our own blog and others we'd want to turn this on.

I implemented a POC on your PR, let me know if this is what you had in mind:

[alicelovescake]

thanks @alicelovescake

Why not make it a first-class blog plugin option? Otherwise, we expose data that we don't even use ourselves. I think even for our own blog and others we'd want to turn this on.

I implemented a POC on your PR, let me know if this is what you had in mind:

Love your code! It's exactly what we want and what I already implemented this on the Electron blog page. TBH, I wasn't sure whether you guys were open to the change so I just wanted to keep the PR as simple as possible.
How do you feel about adding a border at the bottom of the year header?

just added the css to mobile/desktop styles.module.css

.sidebarItemHeader {
  border-bottom: 0.01rem solid var(--ifm-table-border-color);
  padding-bottom: 4px;
}

Feel free to take over the PR with your changes and add a new config option. Let me know how I can help!

[slorber]

Thanks for your feedback

Yes I'll take it over and refactor a few things in the process

How do you feel about adding a border at the bottom of the year header?

That's not super subtle IMHO, I'll try to find a good intermediate, but in any case you should be able to swizzle and customize for your own site if needed

[slorber]

Ready to merge 🎉

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	⚠️ Changes detected (Review)	46 changed, 1 removed	Jun 28, 2024, 12:51 PM

[alicelovescake]

Thanks @slorber for making this happen! You made this PR so much better. Excited for this change!