feat: graceful no-JS fallback and noscript handling

- Add <noscript><style> in base.njk that unhides x-cloak/x-show content,
  hides FAB and tab buttons when JS is disabled (content stacks instead)
- Add noscript message on search page with links to blog/categories
- Add noscript banner on interactions page explaining inbound tab needs JS
This commit is contained in:
Ricardo
2026-02-19 17:35:21 +01:00
parent 03ace58be5
commit 656a70eb0e
3 changed files with 27 additions and 0 deletions

View File

@@ -76,6 +76,21 @@
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<style>[x-cloak] { display: none !important; }</style>
{# Graceful no-JS fallback: show content that Alpine would normally control #}
<noscript>
<style>
/* Override x-cloak so hidden content is visible without Alpine */
[x-cloak] { display: block !important; }
/* Show all tab panels stacked (Alpine x-show tabs) */
[x-show] { display: block !important; }
/* Hide JS-only interactive controls */
.fab-container, .fab-button, .fab-backdrop, .fab-menu { display: none !important; }
/* Hide tab button rows - content shows stacked instead */
[x-data] > .flex.border-b { display: none !important; }
/* Hide loading spinners and JS-only buttons */
[x-show*="loading"], button[\\@click*="fetch"], button[\\@click*="loadMore"] { display: none !important; }
</style>
</noscript>
<link rel="canonical" href="{{ site.url }}{{ page.url }}">
<link rel="alternate" type="application/rss+xml" href="/feed.xml" title="RSS Feed">
<link rel="alternate" type="application/json" href="/feed.json" title="JSON Feed">