[feat] back button closes modal

astro.config.mjs

@@ -11,6 +11,9 @@ export default defineConfig({
       },
     }),
   ],
-  adapter: node({ mode: "standalone" }),
+  adapter: node({ mode: "standalone", checkOrigin: false }),
   output: "server",
+  security: {
+    checkOrigin: false
+  }
 });

src/assets/js/main.js

@@ -1,3 +1,25 @@
-const filterfacet = (event) => {
+import * as bootstrap from 'bootstrap';
-    console.log(event);
+window.bootstrap = bootstrap;
-}
+
+
+// trap browser back and close the modal if open
+const cardModal = document.getElementById('cardModal');
+// Push a new history state when the modal is shown
+cardModal.addEventListener('shown.bs.modal', () => {
+  history.pushState({ modalOpen: true }, null, '#cardModal');
+});
+// Listen for the browser's back button (popstate event)
+window.addEventListener('popstate', (e) => {
+  if (cardModal.classList.contains('show')) {
+    const modalInstance = bootstrap.Modal.getInstance(cardModal);
+    if (modalInstance) {
+      modalInstance.hide();
+    }
+  }
+});
+// Trigger a back navigation when the modal is closed via its native controls (X, backdrop click)
+cardModal.addEventListener('hide.bs.modal', () => {
+  if (history.state && history.state.modalOpen) {
+    history.back();
+  }
+});

src/layouts/Main.astro

@@ -38,22 +38,7 @@ import '/src/assets/css/main.scss';
         </div>
       </div>
       
-    <script>
-      // Import only what you need
-      // import 'bootstrap/js/dist/alert';
-      import 'bootstrap/js/dist/button';
-      // import 'bootstrap/js/dist/carousel';
-      // import 'bootstrap/js/dist/collapse';
-      // import 'bootstrap/js/dist/dropdown';
-      import 'bootstrap/js/dist/modal';
-      import 'bootstrap/js/dist/offcanvas';
-      // import 'bootstrap/js/dist/popover';
-      // import 'bootstrap/js/dist/scrollspy';
-      import 'bootstrap/js/dist/tab';
-      import 'bootstrap/js/dist/toast';
-      // import 'bootstrap/js/dist/tooltip';
-    </script>
     <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.min.js"></script>
-    <script is:inline src="/src/assets/js/main.js"></script>
+    <script type="module" src="/src/assets/js/main.js"></script>
   </body>
 </html>

src/pages/partials/cards.astro

@@ -122,7 +122,7 @@ const facets = searchResults.results.slice(1).map((result: any) => {
 
     <div id="facetContainer" hx-swap-oob="true">
         <div class="bg-dark sticky-top p-2 d-flex justify-content-end align-items-center">
-            <button type="reset" data-bs-dismiss="offcanvas" class="btn btn-danger me-2">Clear</button>
+            <button type="reset" form="searchform" data-bs-dismiss="offcanvas" class="btn btn-danger me-2">Clear</button>
             <button type="submit" form="searchform" data-bs-dismiss="offcanvas" class="btn btn-success">Apply Filters</button>
         </div>
         {facets.map((facet) => (