Load custom Javascript file from theme

[RobinNiemann]

Attempted Debugging

• I have read the debugging page

Searched GitHub Issues

• I have searched GitHub for the issue.

Describe the Scenario

My theme needs a small amount of Javascript. How can I load that Javascript file from my themes folder (e.g. BookStack/themes/my_theme/js/script.js)?

What I tried and didn't work:

• Put this into the Custom Head Setting on the customization page -> My customization needing that script is on the customization page itself and the Custom Head Setting is not loaded there.
• Overwrite common/custom-head.blade.php or layouts/base.blade.php or layouts/parts/base-body-start.blade.php or layouts/parts/base-body-start.blade.php and add the <script> block in there -> My browser blocks inline scripts; I get the Browser-Log Message "Content-Security-Policy: The page's settings blocked the loading of a resource on inline ('script-src')"
  • This was inspired by this issue wich is pretty similar but the final solution wasn't presented there and I failed to figure out the details.

What worked but is no clean solution:

• I put the script.js file into the folder Bookstack/public/dist. From there it is loaded, but this would mean that I would have to create my own Docker Image just to add that one file

Exact BookStack Version

v23.08.3

Log Content

No response

Hosting Environment

Docker Compose on local machine

[ssddanbrown]

Yeah, there's no ideal option for public files right now. I have an existing open issue for this in #3904.

My browser blocks inline scripts;

So my advise would be to override base-body-start.blade.php for this kind of thing.
You will need to add tags to befriend CSP. I'd usually start with this:

<script nonce="{{ $cspNonce }}" type="module">
  // code
</script>

The nonce="{{ $cspNonce }}" makes CSP happy.
The type="module" is optional but makes the script deferred, so no need for listening to events for waiting for the DOM to be loaded before targeting elements.

I put the script.js file into the folder Bookstack/public/dist. From there it is loaded, but this would mean that I would have to create my own Docker Image just to add that one file

You may be able to instead map a volume into this directory, or use the existing public/uploads directory which is commonly provided/advised as a volume mount location.

[RobinNiemann]

Thank you for your quick answer. I tried the inline script in base-body-start.blade.php and it worked!

Maybe I'll try changing this into an endpoint some time. But I defenitely like the issue you linked.