search

retypeapp / retype

Retype is an ✨ ultra-high-performance✨ static site generator that builds a website based on simple text files.
https://retype.com
Other
1.06k stars 204 forks source link

Reload on svg changes #607

Open d-rk opened 1 year ago

d-rk commented 1 year ago

Hey,

I have some svg images which are rendered from plantuml. For this I have a process in place which watches plantuml files and re-renders the svg images if needed.

Now I want retype to reload the page with the new svg if that happens. I see that retype detects the changed file and updates/builds the page. But the change in the svg does not show up until I refresh the page manually.

I guess this has something to do with browser caching and I found this comment in another issue: https://github.com/retypeapp/retype/issues/324#issuecomment-1574432413

So I tried to load the svg like this:

![my scg](some_svg.svg?v={{ nonce }})

But this does not help either. I would assume that the nonce is regenerated on every render of the page, but printing {{ nonce }} somewhere on the page shows that the nonce is not updated when the page changes.

Any hints how I can get my svgs to reload?

geoffreymcgill commented 1 year ago

But the change in the svg does not show up until I refresh the page manually.

In this scenario, are you running Retype locally using the retype start command?

I'll have to check to see if .svg files will trigger the hot reload. I forget if they do (or do not), but sounds like they are not.

d-rk commented 1 year ago

In this scenario, are you running Retype locally using the retype start command?

yes

geoffreymcgill commented 1 year ago

I was able to reproduce this issue. Updating the image does trigger Retype to automatically rebuild the project, but the live-sync in the browser does not trigger the image to be updated in the browser. A manual browser refresh is required.

We are investigating and will try to fix this right away.

geoffreymcgill commented 1 year ago

The issue with the image not reloading/updating is because the browser is caching the file.

The {{nonce}} does not get updated because no code or content in the page (or anywhere else) is being updated. We also do not update the {{nonce}} when an image is updated as this would trigger a complete rebuild of the project, or at least on pages that use the {{nonce}}.

In your scenario, the {{nonce}} may only be used on one page, but the common setup is to use the {{nonce}} in the <head> and that would trigger a complete rebuild of all pages in the project.

We don't have an obvious solution/fix at the moment, but we are going to think about this a try to implement something. Changing the logic of how the {{nonce}} triggers a rebuild is one option but we need to investigate further.

I will keep this thread updated with our progress.

conanthedev commented 1 year ago

Likely for the same reason, modifying custom.css also requires to manually refresh the browser.