So I'm trying to make a website where I'm able to just drag and drop folders containing HTML, js, and CSS files into a "library" directory and have those files served on my flask app. There's one big problem I haven't been able to get over. The problem is that all of these HTML files link to their respective js files using relative paths. For example:

<script src="js/keyboard_input_manager.js"></script>

and these files are 2 folders deep into my (combined) templates/static folder. I could fix this by doing

<script src="library/2048/js/keyboard_input_manager.js"></script>

but that is very tedious, especially when working with so many files.

TLDR: If I were to run my flask app and load a template, it wouldn't load any js or CSS because of relative paths.

Is there any way to go about this without individually changing each path to relate to the templates folder?

Example of my current filesystem:

-FLASK PROJECT
   |->library (templates/static folder)
   |    |->2048
   |       |->index.html, index.css, index.js
   |    |->Game2
   |       |->index.html, index.css, index.js
   |->main.py

What I've Tried:

• Using Blueprint but I can't create a whole blueprint for every file?
• Messing with paths of template folder and static folder

Flask Noob - Please let me know if I'm leaving out any helpful information :) Thanks