From 656a70eb0ef37cf4bacc83308606aabade267a45 Mon Sep 17 00:00:00 2001
From: Ricardo <rick@rmendes.net>
Date: Thu, 19 Feb 2026 17:35:21 +0100
Subject: [PATCH] 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
---
 _includes/layouts/base.njk | 15 +++++++++++++++
 interactions.njk           |  6 ++++++
 search.njk                 |  6 ++++++
 3 files changed, 27 insertions(+)

diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
index 01d9e79..01a6785 100644
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@@ -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">
diff --git a/interactions.njk b/interactions.njk
index 2bc2806..1f1481f 100644
--- a/interactions.njk
+++ b/interactions.njk
@@ -8,6 +8,12 @@ permalink: /interactions/
   <p class="text-surface-600 dark:text-surface-400">Activity across the IndieWeb - both my engagement and responses to my content.</p>
 </div>
 
+<noscript>
+  <div class="p-4 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg mb-6">
+    <p class="text-amber-800 dark:text-amber-200 text-sm">The inbound webmentions tab requires JavaScript to load data from the API. Enable JavaScript for the full interactive experience. Outbound interactions are shown below.</p>
+  </div>
+</noscript>
+
 {# Tab navigation for Outbound/Inbound #}
 <div x-data="interactionsApp()" x-init="init()">
   {# Tab buttons #}
diff --git a/search.njk b/search.njk
index 70cb4a4..48c94af 100644
--- a/search.njk
+++ b/search.njk
@@ -11,6 +11,12 @@ pagefindIgnore: true
 </div>
 
 <div id="search"></div>
+<noscript>
+  <div class="p-6 bg-surface-100 dark:bg-surface-800 rounded-lg mt-4">
+    <p class="text-surface-700 dark:text-surface-300">Search requires JavaScript to be enabled. Please enable JavaScript in your browser settings to use the search feature.</p>
+    <p class="text-surface-500 text-sm mt-2">Alternatively, you can browse content via the <a href="/blog/" class="text-primary-600 dark:text-primary-400 hover:underline">blog archive</a> or <a href="/categories/" class="text-primary-600 dark:text-primary-400 hover:underline">categories</a>.</p>
+  </div>
+</noscript>
 
 <script>
   initPagefind("#search", { showSubResults: true });