Files not found in iframe

Hi,

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:

codesandbox

  • 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?

Thanks and best regards

What do you mean by β€œdoes not recognize”? Also, it might be easier to help if you provided code instead of prose, i.e. a link to your Hugo repository.

I’m not allowed to publish the complete repository, so I created the slimmed down version on codesandbox ( link ), where you can find all the essential files.

On the subject of β€œHugo simply does not recognize the files”, for example accordion-basic.html: no matter whether I make an *.md file out of it, added to the menu or something else, I cannot open the corresponding page. It should appear at the url HOST/components/accordion/accordion-basic but I keep getting a 404.

At least that’s how I understand the connection between folder structure and URL structure (according to Content Organization | Hugo ) : )

Impossible to say with this slimmed down stuff. I don’t even see a hugo config file.

It’s much easier to see what’s happening when looking at the repository:
https://github.com/nanatsusaia/StyleGuideHugo

Read this entire post before making any changes.

Option 1: Use a leaf bundle

Your content is a currently a leaf bundle:

src/docu/components/accordion/
β”œβ”€β”€ accordion-basic.html
β”œβ”€β”€ accordion-initial-active.html
β”œβ”€β”€ accordion-toggler.html
└── index.md  --> This makes it a leaf bundle

Looking at this structure, it would seem that the HTML files are page resources, and if properly linked, everything would work as desired.

But instead of being just dumb chunks of HTML, you have added front matter to each of the HTML files. So those files are rendered as content and then discarded because, in a leaf bundle, there can only be one content page (source is index.md).

command

rm -rf dist && npm run docu:build  && tree dist/docu/components/accordion

result

dist/docu/components/accordion/
└── index.html

You can see that the accordion*.html files are missing from the directory.

Now remove the front matter from each of the files, and run the command again.

dist/docu/components/accordion/
β”œβ”€β”€ accordion-basic.html
β”œβ”€β”€ accordion-initial-active.html
β”œβ”€β”€ accordion-toggler.html
└── index.html

That’s better, but you’ve got another problem.

In src/docu/components/accordion/index.md you have:

{{< example link="/components/accordion/accordion-basic/" name="accordion-basic" >}}

The link is wrongβ€”it is missing the file extension. Either of the following will work:

{{< example link="accordion-basic.html" name="accordion-basic" >}}
{{< example link="/components/accordion/accordion-basic.html" name="accordion-basic" >}}

Make the same change to the other shortcode calls on this page.

Option 2: Use a branch bundle

This is a branch bundle:

src/docu/components/accordion/
β”œβ”€β”€ accordion-basic.html
β”œβ”€β”€ accordion-initial-active.html
β”œβ”€β”€ accordion-toggler.html
└── _index.md  --> This makes it a branch bundle

If you rename index.md to _index.md, all files in the directory are rendered upon build.

dist/docu/components/accordion/
β”œβ”€β”€ accordion-basic/
β”‚   └── index.html
β”œβ”€β”€ accordion-initial-active/
β”‚   └── index.html
β”œβ”€β”€ accordion-toggler/
β”‚   └── index.html
β”œβ”€β”€ index.html
└── index.xml

No additional changes are required.

1 Like