I need to display a local p5.js sketch in an iframe on my project pages. The iframe solution is a must (sigh) because I want to avoid having to convert each of my 100+ p5 scripts to Instance Mode. Long story.
Each page’s p5 sketch is stored as a folder named “sketch” and contains “index.html”, “sketch.js” + various assets. To keep things organized, I would like to be able to keep the “sketch” folder as a subfolder of each page.
My problem is I can’t figure out how to get the URL (neither absolute nor relative) of “sketch/index.html” for use in the iframe’s src attribute. All my efforts result in a standard 404 error page.
I am a Kirby n00b so I may be wrong, but I have a hunch that it might have something to do with the way Kirby (or Apache?) rewrites URL’s. I’ve been looking into routes but don’t really know what to do with them.
Hope to get some pointers on how to proceed from here. Thanks!
Exactly, your problem is that Kirby’s .htaccess prevents direct access to files in the content folder and sends them through the router:
RewriteRule ^content/(.*) index.php [L]
Files that need to be publicly accessible like images etc. are copied to the public media folder and their urls rewritten to this location.
A way to access your files would therefore be to go through the router (or allow partial access to files in the content folder, but that’s not such a great idea security-wise).
I made a folder named “sketches” in the root (ie. outside the content folder) and moved my sketches there. Instant access! Thanks for pointing me in the right direction, @pixelijn
Structure-wise, I guess I’ll have to come to terms with having to keep sketches and pages in separate folders. The benefit of doing it this way though is that I don’t have to modify anything.
Over time, I would love to find a more robust way to integrate my p5.js sketches in Kirby. But this’ll do for now.
