Vuepress: Can we please remove the hardcoded "content"-class?

[kumorig]

Feature request

This is a minor issue and more of a feature-request I guess:
I wish <Content></Content> didn't automatically inject class="content". Currently the default output is <div class="content custom"></div>. Where custom can be toggled by a variable (weird?), and content can't be toggled at all.

Use case:
I tried to make my own template using bulma css framework. It relies on the content-class for other things, and the hardcoded class proved to be quite a headache.

I did skim over other popular CSS-frameworks to get an idea of how popular the use of .content is. It's not common. I found it in Semantic-ui but only in very limited scopes (such as .ui.header .content and .ui.card .content) so not a real problem there I think. Also OnsenUI seems to be relying on .content. If you had picked .container there would have been clashes for sure. While .content is a little bit better it's still too generic for a hard-coded value.

What problem does this feature solve?

Removing/changing the very generic and common classname would help to prevent clashes when other CSS is used. It also makes the themes slightly more flexible and friendly to theme.

What does the proposed API look like?

If the hardcoded value was dropped then <Content class="content" /> would produce the same output as the <Content /> does now but without locking the user in. This is also how the component works currently. (i.e. <Content :custom="false" class="myclass" /> produces <div class="content myclass">)

Just a side-note:

I also think it's counter intuitive to have a boolean to toggle the custom class when (again) <Content class="custom" /> seems to work just fine. (But maybethis is for some other reason?)
https://github.com/vuejs/vuepress/blob/491ca2a36f72da716a995b1d689af4e3df79b806/lib/app/components/Content.js#L4-L13

How should this be implemented in your opinion?

Just drop the hardcoded content-class and add classes in the themes instead.
I'm fine with components that are restricted in scope (such as .badge) have a hard-coded class since I can easily add my own component or style around it. For me the line is drawn when classes control layout and structure.

The default template has a pageClasses. I'm fine with that approach (since it's optional and can be themed away if necessary).

Are you willing to work on this yourself?**

Well sure, but so far I haven't even figured out where the content-class is injected? In the markdown-parser/render perhaps?

[meteorlxy]

It's hard-coded in the custom markdown-loader.

https://github.com/vuejs/vuepress/blob/530912e7aa27fa0a91539659f09f710966416047/lib/webpack/markdownLoader.js#L85

Move it into the Content component as a prop could be a better solution.

[ulivz]

Thanks for your interest in VuePress, but for now we don't accept new feature request before we release 1.0.0. we'll include it in the next version.

[davestewart]

Surely this is a classic case for id="content" !?

[meteorlxy]

Close as it's stale.