How to add an extra .js file to the theme setup

[kapooramit]

Hi,

I have created a postbody.js file that currently sits in the sphinx_rtd_theme\static\js folder with other .js files and compiled\compressed theme.js. This file contains scripts that must run after the page body is loaded and is thus called at the end of layout.html. If I try to move any function or part of this to theme.js, it doesn't work.

I want to add this file in the src folder where source theme.js sits so that it gets compressed like theme.js and works in dev and prod webpack configuration both.

How can I do this? I have tried a few guesses in webpack.. files but I get errors and errors only. Note that I have customized the original theme in my setup.

Please help. Thank you.

-Amit

[nienn]

Hi @kapooramit, can you post a link to your project on GitHub?

[kapooramit]

I am not sure if I can at least at the moment because I have added lots of corporate branding details to it. Can I share it with you only after stripping the bare minimum branding info? If not, I will bring it back to the original theme and share it with you. Please share what would work. Thank you @nienn !

[nienn]

Hi @kapooramit, no worries, I was trying to understand your problem better so I could help you find a better solution, but I don't really need to see your project.

The documentation for adding a custom JavaScript file is here: https://docs.readthedocs.io/en/stable/guides/adding-custom-css.html. Additionally, you could delay the execution of your scripts until after DOMContentLoaded:

document.addEventListener("DOMContentLoaded", function() { 
    // your script
});

or use the jQuery version, thought it's possible this might become deprecated in a near future:

$(document).ready(function() {
    // your script
});

[kapooramit]

Yeah. Thanks. My extra .js file is working fine already. What I want to be able to do is make it part of the dev and prod environment so that it gets minified and compiled by webpack at runtime for dev environment.

So in other words, I want to move it src/ folder and then when a change is detected, it should get compiled with theme.js and get copied to same location where theme.js gets copied after compilation.

[kapooramit]

I tried this again, but the functions throw errors (undefined etc.) if they are called from theme.js even within

$(document).ready(function() {
    // your script
});. 

But somehow, if this postbody.js is called from layout.html at the end of the body, all works fine. Is there any alternative to this @nienn ?

Thank you!

[nienn]

Hi @kapooramit. The errors you are getting seem very specific to what you are trying to do and, without being able to see the code, it's difficult to guess the cause.

If you can post a link to a reproducible project I might be able to help you further.

[agjohnson]

Closing due to inactivity, but this issues seems like more general guidance with Sphinx more than anything. I'd suggest opening an issue on Stackoverflow if you are having trouble.

[kapooramit]

This worked after some struggle.