Serving embedded static webpages

1

I’m working on a redesign of the front and backend (we’re migrating to kirby from wordpress) of an experimental art magazine.

For previous issues, some contributors have created static website artworks (usually just some simple html, css, js and some image files). These artworks were hosted at various other places (eg netlify or glitch.com) and embedded in the page with an iframe. For the new site we’d like to be able to host these files ourselves so we don’t have to worry about managing accounts on different hosts or worry about link rot, these freemium services turning to paid etc.

I’m having quite a lot of trouble figuring out the best way of hosting this content with Kirby.
My current thoughts for the process of doing this is:

  1. Upload a .zip of the static site files to the artwork page (I’m currently running a custom hook to unzip which is working)
  2. Render the index.html page of the uploaded zip in an iframe so I can keep the website menu floating on top etc.

The file structure of the above looks like:

/issue
  artwork/
    artwork.txt (in this file define iframe that points to index.html page in staticsite folder)
    ...
    staticsite/
        staticsite.txt (this file is empty and just used to load the staticsite.php template file)
        index.html
        image.png
        ...

I’m running into issues with Step 2. I can get the index.html file to load with the following code (adapted from here) that is in the staticsite.php template file:

<?php 
   echo F::read($page->root().'/index.html');

BUT all the links in the index.html file are giving 404’s because they want to link to the parent page. Eg. <img src="image.png"> wants to link to ‘[siteurl]/issue/artwork/image.png’ not ‘[siteurl]/issue/artwork/staticsite/image.png’

2

Hm, Kirby expects a path when encountering such a relative link, I think, so to correctly resolve, the src attribute would have to be

<img src="staticpage/image.png">

This could probably be solved through a route that redirects links to the child when the path doesn’t exist in the parent