Skip to content
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

Default Prose Headings components should not render as links (bad HTML and too opinionated) #1444

Closed
ManasMadrecha opened this issue Aug 12, 2022 · 2 comments · Fixed by #1564
Labels
enhancement New feature or request

Comments

@ManasMadrecha
Copy link

Is your feature request related to a problem? Please describe

As you can see here main/src/runtime/components/Prose/ProseH3.vue, H2 to H6 headings become links.

  • It's not good to have such opiniated structure for something so basic like Heading HTML elements.

  • The V1 option was better, i.e., having hidden # on left side of heading which shows on hover, instead of converting entire heading text into a.

  • Also, it's not good HTML too, because such a link is inline. And a link cannot have certain descendants. But currently, the component accepts any slot, so any random HTML element will be descendant of a.

  • Also, it makes it harder to select the Text of the Heading.

Describe the solution you'd like

Just add simple slot like https://github.com/nuxt/content/blob/main/src/runtime/components/Prose/ProseH1.vue.
Nothing fancy.

For those who want links in their headings, they can add it using respective remark plugin (e.g., autolink-headings). That plugin gives way more options any way.

Describe alternatives you've considered

Create own Prose components for H2 to H6 headings. 👎🏻 Because it's like resetting something, whereas styling and how template should be --- such things any way should be left to the user, and not Module.

Additional context

Tailwind's Preflight philosophy. As a Module, have sensible defaults. Don't have such opiniated rigidity that user have to spend time resetting things anyway.

Simply make things behave more like you’d expect them to.

@ManasMadrecha ManasMadrecha added the enhancement New feature or request label Aug 12, 2022
@nobkd
Copy link
Contributor

nobkd commented Aug 13, 2022

  1. It's only h2 to h4
  2. You can just override the prose components' behavior as you like: @nuxt/content V2 renders <a> tag inside heading tags (h1, h2 ...) #1248

I like that links are generated by default, but I also agree with your point, that it's overriding standard behavior and kind of restrictive sometimes, even though it's just a heading (that is not supposed to contain that much other elements).

Being able to define in the config if the heading-links are generated would be a great option.

@ManasMadrecha
Copy link
Author

ManasMadrecha commented Aug 13, 2022

@nobkd

  • Yes, we can override it, but will have to do in every project. 😕
  • Also, need to create H2, H3, H4 such three separate .vue files every time.
  • And, most importantly, some words of Headings can at times be links. So, how will that work? Because currently, entire headings themselves are getting converted into links.

So, better to have such template of heading-links inside some theme of Content Module (e.g., Content-wind) and not inside the core Module itself.

@ManasMadrecha ManasMadrecha changed the title Default Prose Headings components should not render as links (bad HTML and too opinated) Default Prose Headings components should not render as links (bad HTML and too opinionated) Aug 14, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants