]> juplo.de Git - website/commitdiff
projects / website / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: fafd38c)
Layout-Switcher: JS nach BaseLayout, Links durch Buttons ersetzen
authorKai Moritz <kai.milan.moritz@googlemail.com>
Tue, 16 Jun 2026 18:30:35 +0000 (18:30 +0000)
committerKai Moritz <kai.milan.moritz@googlemail.com>
Tue, 16 Jun 2026 18:30:35 +0000 (18:30 +0000)
Den Event-Listener-Code aus public/js/main.js in einen <script>-Block
in BaseLayout.astro verschoben. Astro bundelt das automatisch als externes
Modul – kein manuelles script-src mehr nötig.

Die <a href="#">-Links im Switcher durch <button>-Elemente ersetzt:
Buttons sind semantisch korrekt für Aktionen (keine Navigation), und ohne
JS scrollt ein Klick nicht mehr versehentlich zum Seitenanfang.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
public/js/main.js [deleted file] patch | blob | history
src/layouts/BaseLayout.astro patch | blob | history

diff --git a/public/js/main.js b/public/js/main.js
deleted file mode 100644 (file)
index 1049626..0000000
--- a/public/js/main.js
+++ /dev/null
@@ -1,21 +0,0 @@
-document.addEventListener('DOMContentLoaded', function () {
-  var switcher = document.getElementById('layout-switcher');
-  if (!switcher) return;
-
-  var links = switcher.querySelectorAll('a[data-layout]');
-  var current = document.documentElement.dataset.layout || 'classic';
-
-  links.forEach(function (link) {
-    if (link.dataset.layout === current) {
-      link.classList.add('active');
-    }
-    link.addEventListener('click', function (e) {
-      e.preventDefault();
-      var layout = this.dataset.layout;
-      document.documentElement.dataset.layout = layout;
-      try { localStorage.setItem('layout', layout); } catch (err) {}
-      links.forEach(function (l) { l.classList.remove('active'); });
-      this.classList.add('active');
-    });
-  });
-});
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index aab296757ed02a301aada205cc2aacf2a17a8db4..2043bf025868f4a1667c7ac77af47d7584b41924 100644 (file)
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -28,7 +28,28 @@ const resolvedCanonical = canonical ?? new URL(Astro.url.pathname, Astro.site).t
   <link rel="stylesheet" media="only screen" type="text/css" href="/css/resurrection.css">
   <link rel="stylesheet" media="print" type="text/css" href="/css/print.css">
   <link rel="canonical" href={resolvedCanonical}>
-  <script src="/js/main.js" crossorigin="anonymous"></script>
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      var switcher = document.getElementById('layout-switcher');
+      if (!switcher) return;
+
+      var buttons = switcher.querySelectorAll('button[data-layout]');
+      var current = document.documentElement.dataset.layout || 'classic';
+
+      buttons.forEach(function (btn) {
+        if (btn.dataset.layout === current) {
+          btn.classList.add('active');
+        }
+        btn.addEventListener('click', function () {
+          var layout = this.dataset.layout;
+          document.documentElement.dataset.layout = layout;
+          try { localStorage.setItem('layout', layout); } catch (err) {}
+          buttons.forEach(function (b) { b.classList.remove('active'); });
+          this.classList.add('active');
+        });
+      });
+    });
+  </script>
 </head>
 <body id="top" class="menu">
   <div id="page" class="cf">
@@ -61,11 +82,11 @@ const resolvedCanonical = canonical ?? new URL(Astro.url.pathname, Astro.site).t
         <li class="f" id="copyright">© <strong>mo</strong> {new Date().getFullYear()}</li>
         <li id="layout-switcher">
           <span class="layout-label">Layout: </span>
-          <a href="#" data-layout="resurrection">Resurrection</a>
+          <button data-layout="resurrection">Resurrection</button>
           |
-          <a href="#" data-layout="classic">Classic</a>
+          <button data-layout="classic">Classic</button>
           |
-          <a href="#" data-layout="none">None</a>
+          <button data-layout="none">None</button>
         </li>
         <slot name="footerlinks">
           <li class="f"><a class="f" href="/impressum.html">Impressum</a></li>
Unnamed repository; edit this file 'description' to name the repository.