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

feat: support code block as component props #67

Merged
merged 5 commits into from
May 16, 2024

Conversation

ManUtopiK
Copy link
Contributor

This PR attempt to fix this issue nuxt/content#1260

The goal is to write props components like a code block for better readability with a markdown formatter that don't know MDC syntax :

::home-hero
\```yaml
primary:
  text: 38K+ GitHub stars
  url: https://github.com/nuxt/nuxt.js
\```
::

(remove the \, it's break gfm).

I added this feature with experimental.componentCodeBlockProps MDC options.

@ManUtopiK
Copy link
Contributor Author

ManUtopiK commented Nov 17, 2023

Possible regression with https://docus.dev/api/components#codegroup

edit: I confirm, it breaks this component behaviour. A possible workaround is to use code block as props only with ```yaml and not ```yaml [title]

edit 2: Fixed. See below.

@ManUtopiK
Copy link
Contributor Author

Any feedback about this feature ?

@farnabaz
Copy link
Collaborator

Thank you for the pull-request.
This is feature is not planned yet, I'll put this PR at pending status. To discuss it later in next version's RFC

@ManUtopiK
Copy link
Contributor Author

Possible regression with https://docus.dev/api/components#codegroup

edit: I confirm, it breaks this component behaviour. A possible workaround is to use code block as props only with yaml and not yaml [title]

I've just fixed this behavior. Now only ```yaml can be used, so components like CodeGroup are not impacted by this feature.

A possible alternative is to use something like yaml [props] or yaml [content].
It will be nice to discuss this feature. I still have customers who complain that it breaks their markdown editor.
ping @atinux

@atinux
Copy link
Member

atinux commented May 14, 2024

I believe that this could be OK:

::home-hero
\```yaml[props]
primary:
  text: 38K+ GitHub stars
  url: https://github.com/nuxt/nuxt.js
\```
::

@ManUtopiK
Copy link
Contributor Author

ManUtopiK commented May 14, 2024

Hi!
Thanks to take a look on this request !

You suggest using yaml[props], but it doesn't add syntactic coloration as any markdown processor consider the language is yaml[props].
Did you mean yaml [props] instead (with a space) ?

::home-hero
\```yaml [props]
primary:
  text: 38K+ GitHub stars
  url: https://github.com/nuxt/nuxt.js
\```
::

@atinux
Copy link
Member

atinux commented May 15, 2024

yaml [props] sound good too yes

@ManUtopiK
Copy link
Contributor Author

Done.
I renamed this experimental feature componentCodeBlockYamlProps.
A little bit longer but more concise.

@atinux atinux requested a review from farnabaz May 16, 2024 08:18
@farnabaz farnabaz merged commit cea1c94 into nuxtlabs:main May 16, 2024
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants