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`:

View file

@ -128,6 +128,10 @@ Let's modify `base.php` to add your site name and custom navigation:
<small>Generated in <?= number_format($pageLoadTime, 4) ?>s</small>
</p>
</footer>
<?php if (!empty($pageJsUrl)): ?>
<script defer src="<?= htmlspecialchars($pageJsUrl) ?>?v=<?= $pageJsHash ?? '' ?>"></script>
<?php endif; ?>
</body>
</html>
```
@ -301,6 +305,7 @@ $languageUrls // Links to other language versions
$translations // Translated UI strings
$cssHash // Cache-busting hash for CSS
$pageCssUrl // Page-specific CSS URL (if exists)
$pageJsUrl // Page-specific JS URL (if exists)
$pageLoadTime // Page generation time
```