Add page-specific JavaScript support

Update documentation for new JS variables and rendering pipeline

Add script.js file support to content directories

Implement cache-busting for JavaScript files

Update static file serving to include JavaScript files

Document page-specific script loading in base.php
This commit is contained in:
Ruben 2026-02-06 18:47:23 +01:00
parent f8a352afce
commit f1447049e4
6 changed files with 70 additions and 7 deletions

View file

@ -241,6 +241,33 @@ FolderWeb automatically loads and includes page-specific styles with cache-busti
<link rel="stylesheet" href="/portfolio/styles.css?v=abc123def">
```
## Page-Specific Scripts
For small progressive enhancements, you can add a `script.js` file to a content directory:
```
content/portfolio/
├── index.md
├── styles.css
└── script.js
```
**script.js:**
```js
// Small enhancement for this page only
document.querySelector('.portfolio-grid')?.addEventListener('click', (e) => {
// ...
});
```
FolderWeb automatically loads the script with `defer` (non-blocking) and cache-busting:
```html
<script defer src="/portfolio/script.js?v=abc123def"></script>
```
The script tag is placed before `</body>`, so it runs after the page has been parsed. This is ideal for progressive enhancement — the page works without JavaScript, but gets enhanced when it's available.
## Dark Mode
Add dark mode with CSS variables and `prefers-color-scheme`: