slorber
commented
3 years ago Make sense, all docusaurus pages should have a convenient way to target them with custom CSS.
In general, we should have:
- one wrapper class per "plugin" (like blog-wrapper)
- one unique class per page types for better granularity (like blog-list-page)
Each theme page should rather always have 2 classes, like blog-wrapper blog-list-page
For retrocompatibility we'd rather avoid refactoring existing classes
I'd also like to have all those classnames being migrated to the theme-common package under a constant file like ThemeClassnames.ts, so that it's more explicit that those classnames should remain stable over time or we'd break user's custom CSS
Assigning this task to MLH fellows.
javidrashid
🚀 Feature
Add class names to individuate blog theme components.
Have you read the Contributing Guidelines on issues?
Yes
Motivation
Having a class name to differentiate blog list pages from post pages would allow styling the pages using the global style methodology.
Pitch
Currently, global styling is not possible since there is not variancy between the structures of
BlogListPageandBlogPostPage. Adding another class name (e.g.blog-list-page,blog-post-page), alongside theblog-wrapperclass name, would allow for global styling.Furthermore, there doesn't seem to be another way to inject additional class names into these components except to wrap them. I don't feel wrapping the components is a good flow, just to add classes to target for styling, since a global styling methodology often tries to lessen its dependency on structure.
For the
docusaurus-theme-classic, these are the proposed changes to the blog components:blog-list-pageclass name to theLayoutcomponent forBlogListPageblog-post-pageclass name to theLayoutcomponent forBlogPostPageblog-tags-list-pageclass name to theLayoutcomponent forBlogTagsListPageblog-tags-post-pageclass name to theLayoutcomponent forBlogTagsPostsPage