I would like to add a templateParam to inject custom css.

[btimby]

Reason/Context

Please try answering few of those questions

• Why we need this improvement?
• How will this change help?
• What is the motivation?

This improvement will allow customization of the generated HTML styles. I want this feature to hide the sidebar. In my project, the sidebar is useless as I have but a single channel (thus navigation makes no sense) and the sidebar takes up space. I can use this change for my ends, others could use it for myriad other purposes.

Description

Please try answering few of those questions

• What changes have to be introduced?
• Will this be a breaking change?
• How could it be implemented/designed?

I will add a templateParam to the package.json file as well as handling for said parameter in the HTML template. When defined, this option will inject a new <style> tag with the given css. I will add documentation for this new parameter.

This will not be a breaking change. No real design is necessary.

[btimby]

This proposal would function much like a similar feature in swagger-ui-express:

https://github.com/scottie1984/swagger-ui-express#custom-css-styles

[magicmatatjahu]

@btimby Hello! Thanks for the issue. The custom css for html-template will be added when we will resolve these issues in the react-component, which renders the html under the hood:

• Create script to generate the custom theme asyncapi-react#370
• Add to all TailwindCSS classes the prefix asyncapi-react#369
• Disable preflight (css normalizer) from TailwindCSS  asyncapi-react#368

For your case with hiding the sidebar, we already support it in the react-component, but currently we have hardcoded config for it in the template - https://github.com/asyncapi/html-template/blob/master/filters/all.js#L12. Hide/show appropriate section should be done by config, because then template won't render appropriate section and template will less weight. Using css, you only "hide" elements, but they are still in the DOM

...so what about config param which will be the stringified config for react-component:

ag ./schema.yaml @asyncapi/html-template -p config='{ "showSidebar": false }'

What do you think?

[btimby]

@magicmatatjahu That sounds like a much better idea. Not knowing how the HTML is generated or what libraries were used, I was happy with simply hiding the sidebar. However, if there are mechanisms for disabling the rendering of it, so much the better.

I will investigate how to do this instead of custom css.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience ❤️

[derberg]

@magicmatatjahu where are we with this one?

[magicmatatjahu]

@derberg @btimby Created PR but I didn't have any info from August. I will wait max two weeks for response and then I'll decide what to do with that.

[btimby]

@magicmatatjahu I should have a chance to address your review tomorrow. I am sorry but I missed the notifications (until today).

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience ❤️

[derberg]

ping pong anybody out there 😄

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience ❤️

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience ❤️