We have a project to create frontend components built with SCSS and TS. Components can be changed per theme. For this we create a separate CSS & JS file for each theme.
We would like to present the components in a Bootstrap-like documentation. For this we want to use the Hugo. There should be a documentation page for each component and we want to add a theme switch with which you can view the components in the different themes.
So that the theme switch has no effect on the documentation page itself, but only on the components presented, we display the components in an iframe, in which the respective CSS & JS files are then loaded.
Unfortunately the loading of the pages in the iframes doesn't work correctly and we can't find the reason. The pages are also not loaded if you open them directly without an iframe.
Below is a simplified example:
- Go to Components/Accordion in the browser view
- Open the src/docu/components/accordion/index.md
- We load the following files via iframe
- src/docu/components/accordion/accordion-basic.html
- src/docu/components/accordion/accordion-initial-active.html
- src/docu/components/accordion/accordion-toggler.html
- You can find the iFrame under src/assets/hugo/layouts/shortcodes/example.html
Hugo simply does not recognize the files accordion-basic.html, etc., regardless of whether I make *.md files out of them, add them to the menu ( src/assets/hugo/config/_default/menus.toml ) or add other information in the upper --- XYZ --- area in the header of the file.
Anyone know what mistake I'm making?
