-
-
Notifications
You must be signed in to change notification settings - Fork 8.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(v2): blog sidebar #3593
feat(v2): blog sidebar #3593
Conversation
Deploy preview for docusaurus-2 ready! Built with commit 0b3a40c |
@lex111 any opinion on the design we should use for this feature? (I'm not very good at design) Here's a POC, will polish this a bit to before merge and cleanup TOC classes I reused: |
@slorber definitely, the recent posts section should not look like TOC. |
@lex111 any design suggestion for this feature then? Maybe you want it to be more like v1? (no border etc...) I'll polish the node part but if you have a good idea don't hesitate to modify the BlogSidebar UI component, as all the design is basically there we shouldn't have any conflict |
Yes, that's what I meant. Let's remove the border, make the fonts bigger. You can look at v1 as an example https://docusaurus.io/blog/2019/12/30/docusaurus-2019-recap |
@lex111 does it look good enough to merge? 2 grid cols might feel a bit small compared to v1. |
packages/docusaurus-theme-classic/src/theme/BlogSidebar/styles.module.css
Outdated
Show resolved
Hide resolved
….module.css Co-authored-by: Alexey Pyltsyn <lex61rus@gmail.com>
@@ -25,7 +26,10 @@ function BlogListPage(props: Props): JSX.Element { | |||
<Layout title={title} description={blogDescription}> | |||
<div className="container margin-vert--lg"> | |||
<div className="row"> | |||
<main className="col col--8 col--offset-2"> | |||
<div className="col col--2"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not a fan of empty divs (if blogSidebarCount=0
), let's handle this case properly (add col--offset-2
class if there is no sidebar).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The problem is that it requires to do this check everywhere 🤪
I'd rather encapsulate it and keep a constant layout, makes code simpler for same results.
I don't think it's a bad practice to put an empty div for layout reasons, particularly if it has a width. It's common with flexbox to do so.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Well, okay, although I don't really like this approach.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Feel free to self-merge.
Nice 😉soon 20k stars |
Motivation
Feature parity with Docusaurus v1.
https://docusaurus.io/docs/en/adding-blog#changing-how-many-blog-posts-show-on-sidebar
Needed for RN migration, cc @Simek
Have you read the Contributing Guidelines on pull requests?
yes
Test Plan
tests + preview + dogfooding