It seems that might be possible to do what I need. I want to be able to write p5.js sketch files inside my page bundles (directories) for each post I do. This are plain Javascript files, but I can totally change the extension for this to work. For each of these, let’s call them *.sketch or *.p5 files, I want to output an HTML file based on a template I write, in the same place those were found (with the same name too if possible just with .html extension. These should produce embeddable html files I can then use with an iframe in my site. I read the docs and started defining my custom media type and output, but it is unclear where or how I define the template for them and be able to drop them in the same page bundle I found them.
In summary:
Inside page bundles, pick all *.custom files, use a custom text/html template and produce *.html files. Is that possible with Hugo?
So what I can do is create a new folder inside content called sketches (a new Page Type) with markdown/html files with the script tag and the javascript code and have a custom template for those (I can even use the front matter here for something extra). With the right layout, I can produce minimal templates with the sketches and embed those everywhere using a helper shortcode. Does that seem right?
I can later define a Taxonomy and create a full list of all sketches and what not.
Also if you do not wish to create a dedicated Section for sketches you can define the layout or type parameter of the respective content files their front matter. With this method your intended template that should reside under /layouts/sketches/single.html will be picked up by the relevant pages, irrespective of the actual location of the content file.
Thanks! That seems like a fine approach as it will let me keep my code organized better. But for some reason is not working for me. Does that work inside Page Bundles? My blog is organized like:
/content/posts/my-post/index.md
Can I add 1 or more: /content/posts/my-post/sketch-1.md /content/posts/my-post/sketch-2.md
in the same folder? Because Hugo is ignoring them. What would be the right value for layout or template in the front matter if I do have a template in /layouts/sketches/single.html (that one was working with /content/sketches/sketch-1.md by the way).
A leaf Page Bundle is defined by an index.md every other .md within that same Bundle is a Page Resource that does not get published and its content can be rendered through the templates.
Those look super useful if I needed to embed the JS directly! Thanks! Just to be clear, if I get the .Content of a Page Resource it will get rendered through the corresponding layout?
Unfortunately for this specific case, I do need the generated html files to embed via iframe. But the resource approach will definitely come in handy!
No you need to define the markup you need within the Page Resource context.
For example if you have only one Page Resource in a leaf Page Bundle you could do:
{{- with .Resources.ByType "page" -}}
<div>{{ .Content }} etc. </div>
{{- end -}}
OR
If there are several Page Resources per Page Bundle you could do:
{{- with .Resources.ByType "page" -}}
{{- range . -}}
<div>{{ .Content }} etc. </div>
{{- end -}}
{{- end -}}
As for the P5 iframes, you could include these HTML files under the staticDir so that these files get published and then call them through a front matter parameter in each respective content file.
That is exactly what I can’t do. The post was about converting JS files into HTML, because I don’t have the HTML files to begin with. But I can do the JS inside Markdown in their own Page Type and those will get published.
Page resources seem great, but in this case I cannot produce the embeddable HTML files out of them.
Thanks so much for the help, I think I got the gist of it and I even understood the purpose of the custom Outputs in the process.