feat(v2): add TOC to blog posts #3274
Conversation
| <div className="container margin-vert--lg"> | ||
| <div | ||
| className="container margin-vert--lg" | ||
| style={{maxWidth: 'inherit'}}> |
There was a problem hiding this comment.
I'm not sure if this was the correct way to handle the layout/style.
I tried to use a 3-6-3 column layout, but because of the max-width property on the container it was very cramped. I didn't know whether it'd be best to override the max-width property, get rid of the container class name, or do something entirely different.
There was a problem hiding this comment.
not sure exactly what to do sorry 🤪 just know that adding the TOC shouldn't reduce as much the main content width
There was a problem hiding this comment.
Also avoid inline style objects, use real CSS instead
There was a problem hiding this comment.
@slorber For now, I made the blog TOC use col--2 instead of col--3 unlike the docs' TOC. Although it's narrower, it allows the content widths across all blog pages to be left untouched. I'll keep exploring other approaches and tinkering with the CSS
|
Deploy preview for docusaurus-2 ready! Built with commit 3af8eea |
|
Hey @amy-lei , that looks nice thanks. Before your change:
After your change:
I think it takes too much space. We should increase width of the main blog post content surface, and we should aim to make the design/layout more consistent with what we have for docs:
Note sure if it's 100% possible, as blog doesn't have a sidebar, but if we can have the same width for blog/docs TOC with a theme constant that could be nice :) |
packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx
Outdated
Show resolved
Hide resolved
packages/docusaurus-theme-classic/src/theme/BlogListPage/index.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Thanks, that looks like a nice start
- Avoid inline style, use css modules
- why modify other pages than the BlogPostPage?
- move TOC component to separate folder
- try to sync TOC layout/width between blog/docs
- option to hide tocs not needed for now
If you really want to provide an option to hide TOC, do it through themeConfig, and provide it for both docs/blog
packages/docusaurus-theme-classic/src/theme/BlogListPage/index.tsx
Outdated
Show resolved
Hide resolved
| <div className="container margin-vert--lg"> | ||
| <div | ||
| className="container margin-vert--lg" | ||
| style={{maxWidth: 'inherit'}}> |
There was a problem hiding this comment.
not sure exactly what to do sorry 🤪 just know that adding the TOC shouldn't reduce as much the main content width
packages/docusaurus-theme-classic/src/theme/BlogTagsPostsPage/index.tsx
Outdated
Show resolved
Hide resolved
packages/docusaurus-theme-classic/src/theme/BlogTagsListPage/index.tsx
Outdated
Show resolved
Hide resolved
| <div className="container margin-vert--lg"> | ||
| <div | ||
| className="container margin-vert--lg" | ||
| style={{maxWidth: 'inherit'}}> |
There was a problem hiding this comment.
Also avoid inline style objects, use real CSS instead
|
I had weird thought if the user wants to swizzle Toc for Docs but not For Blog. May be no one wants to do that but just a thought. |
|
If the user wants to customize one toc and not the other, he could swizzle the DocPage directly and use his own comp instead of the theme one. If people ask for this we could create TOC, BlogTOC, DocTOC, but that feels overkill for now. |
* refactor TOC into own component * make layout consistent across blog pages
|
Thanks @amy-lei this is perfect 👍 |
Motivation
As discussed in #2717 thought it would be nice to provide a TOC out of the box for blog posts like v1 did.
Have you read the Contributing Guidelines on pull requests?
Yes
Test Plan
Start a development server and check out the existing blog posts where a TOC is applicable. The TOC can also be toggled off like with docs by adding
hide_table_of_contentsto the header.Related PRs
N/A