refactor(v2): increase content area if blog sidebar is off #5171
Conversation
lex111
added
the
pr: polish
|
✔️ [V2] 🔨 Explore the source changes: 0101585 🔍 Inspect the deploy log: https://app.netlify.com/sites/docusaurus-2/deploys/60f666f6984db7000792905e 😎 Browse the preview: https://deploy-preview-5171--docusaurus-2.netlify.app |
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-5171--docusaurus-2.netlify.app/ |
|
Size Change: -165 B (0%) Total Size: 850 kB
ℹ️ View Unchanged
|
lex111
force-pushed
the
lex111/blog-layout
branch
from
1566a2c
to
786ff55
Compare
| })}> | ||
| {children} | ||
| </main> | ||
| {toc && ( |
There was a problem hiding this comment.
In my opinion we should always render the TOC layout container (col--2) even if the toc is absent (blog post list) or the toc is empty (blog post with no headings)
This permits to avoid having the blog layout being offset as we navigate from the blog list of a blog post. It was the case before.
Eventually we could add a blog plugin option to disable the toc globally, similarly to the sidebar, in which case we could make the blog post content larger. If options.blogSidebarCount === 0 && !options.toc => col--12? (or maybe col--10 col--offset-1 as 12 might be too big?
There was a problem hiding this comment.
This permits to avoid having the blog layout being offset as we navigate from the blog list of a blog post. It was the case before.
However, then we would lose the correct central positioning, it is OK?
12 might be too big?
That's a lot, so I wouldn't use more col-9 for content area.
There was a problem hiding this comment.
However, then we would lose the correct central positioning, it is OK?
To me, what matters most is that the real blog post content is centered, not really having perfect centering of the group "optional sidebar + content + optional toc".
In this screenshot, the group is centered:
In this one, the content is centered. Not perfectly though (it's not a big deal imho), but it looks better to me
and will permit to have a consistent layout on all the blog pages, and no layout shift when navigating to a blog post item:
| <main | ||
| className={clsx('col', { | ||
| 'col--7': hasSidebar, | ||
| 'col--9': !hasSidebar, |
There was a problem hiding this comment.
sidebar is 3 cols so why not go from 7 to 9 ?
Now without sidebar cols = 11, not 12
If we don't want the content to be 10 (too big?) and keep 9.
I suggest to use hasSidebar ? "col--9 col--offset-1" : "col--7"=> the main content will be better centered
There was a problem hiding this comment.
Previously, we used col--7 for content area (main element), so in case of no sidebar exist, increase it to col--9, which is the most appropriate maximum for comfortable reading.
We don't need to use col--offset-1 because we already center all columns via justify-content: center
There was a problem hiding this comment.
Agree that we'd rather limit the max width
We don't need to use col--offset-1 because we already center all columns via justify-content: center
It's not exactly the same.
Using justify-content: center means the 11 cols will be centered, so there's 1/2 col spacing on both sides but as there's no sidebar, the main content is a bit too much on the left (personal opinion).
Using col--offset-1 is more akin to using justify-content: flex-end, and the main content could become a bit more centered (but this can only be applied to larger desktop IMHO, it would look weird on medium width). What do you think about it?
There was a problem hiding this comment.
I don't really like this pseudo-centering aligning, but have changed back to this behavior as you proposed.
lex111
force-pushed
the
lex111/blog-layout
branch
from
2b11c89
to
0101585
Compare
|
thanks 👍 |
Motivation
Originally from #5150
If
blogSidebarCountfield is0in blog config, then sidebar will not appear on blog pages. In this case it is reasonable to increase the content area by 2 column.Have you read the Contributing Guidelines on pull requests?
Yes
Test Plan
Preview
Related PRs
(If this PR adds or changes functionality, please take some time to update the docs at https://github.com/facebook/docusaurus, and link to your PR here.)