Refactor footer into page layout

VojtaStruhar · Jan 8, 2025 · 8fa6c4b · 8fa6c4b
1 parent 7d3a5b7
commit 8fa6c4b
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 88 deletions.
diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro
@@ -30,75 +30,89 @@ let config_json = templates[Astro.currentLocale] || templates.en;
   </head>
   <body>
     <slot />
-    <script lang="js" define:vars={{ config_json }}>
-      var data = {};
 
-      function showOutput() {
-        copyButton?.style.setProperty("display", "block");
-        let output = document.getElementById("output");
-        if (output) {
-          output.innerHTML = "";
-          config_json.categories.forEach((category) => {
-            output.innerHTML += `\n---{ ${category.title} }---\n`;
-            category.options.forEach((item) => {
-              if (
-                category.type === "check" &&
-                data[category.title].includes(item)
-              ) {
-                output.innerHTML += `☑ ${item}\n`;
-              } else if (data[category.title] === item) {
-                output.innerHTML += `☑ ${item}\n`;
-              } else {
-                output.innerHTML += `☐ ${item}\n`;
-              }
-            });
-          });
-
-          output.innerHTML += `\n`;
-          output.innerHTML += `---{ ${config_json.author} }---\n`;
-          output.innerHTML += `☑ https://vojtastruhar.github.io/steam-review-template \n`;
-        }
-      }
-
-      let outputButton = document.getElementById("output-button");
-      if (outputButton) {
-        outputButton.addEventListener("click", showOutput);
-      }
-      let copyButton = document.getElementById("copy-output");
-      if (copyButton) {
-        copyButton.addEventListener("click", () => {
-          navigator.clipboard.writeText(
-            document.getElementById("output").innerText,
-          );
-        });
-      }
-      copyButton?.style.setProperty("display", "none");
+    <div class="max-w-screen-sm mx-auto px-4">
+      <pre id="output"></pre>
+    </div>
+    <footer class="bg-slate-700 text-white py-2 flex flex-col items-end">
+      <p class="px-8">
+        <a
+          href="https://www.vojtechstruhar.com"
+          target="_blank"
+          class="text-white">Vojtěch Struhár</a
+        >, 2021
+      </p>
+    </footer>
+  </body>
+</html>
+<script lang="js" define:vars={{ config_json }}>
+  var data = {};
 
-      [...document.getElementsByTagName("input")].forEach((input) => {
-        if (input.type == "checkbox") {
-          data[input.name] = [];
-        }
-        input.addEventListener("change", (event) => {
-          console.log("calling index.astro - L107:L128");
-          let target = event.target;
-          if (target) {
-            if (target.type == "checkbox") {
-              if (target.checked) {
-                data[target.name].push(target.value);
-              } else {
-                data[target.name] = data[target.name].filter(
-                  (item) => item != target.value,
-                );
-              }
-            } else {
-              data[target.name] = target.value;
-            }
+  function showOutput() {
+    copyButton?.style.setProperty("display", "block");
+    let output = document.getElementById("output");
+    if (output) {
+      output.innerHTML = "";
+      config_json.categories.forEach((category) => {
+        output.innerHTML += `\n---{ ${category.title} }---\n`;
+        category.options.forEach((item) => {
+          if (
+            category.type === "check" &&
+            data[category.title].includes(item)
+          ) {
+            output.innerHTML += `☑ ${item}\n`;
+          } else if (data[category.title] === item) {
+            output.innerHTML += `☑ ${item}\n`;
+          } else {
+            output.innerHTML += `☐ ${item}\n`;
           }
         });
       });
-    </script>
-  </body>
-</html>
+
+      output.innerHTML += `\n`;
+      output.innerHTML += `---{ ${config_json.author} }---\n`;
+      output.innerHTML += `☑ https://vojtastruhar.github.io/steam-review-template \n`;
+    }
+  }
+
+  let outputButton = document.getElementById("output-button");
+  if (outputButton) {
+    outputButton.addEventListener("click", showOutput);
+  }
+  let copyButton = document.getElementById("copy-output");
+  if (copyButton) {
+    copyButton.addEventListener("click", () => {
+      navigator.clipboard.writeText(
+        document.getElementById("output").innerText,
+      );
+    });
+  }
+  copyButton?.style.setProperty("display", "none");
+
+  [...document.getElementsByTagName("input")].forEach((input) => {
+    if (input.type == "checkbox") {
+      data[input.name] = [];
+    }
+    input.addEventListener("change", (event) => {
+      console.log("calling index.astro - L107:L128");
+      let target = event.target;
+      if (target) {
+        if (target.type == "checkbox") {
+          if (target.checked) {
+            data[target.name].push(target.value);
+          } else {
+            data[target.name] = data[target.name].filter(
+              (item) => item != target.value,
+            );
+          }
+        } else {
+          data[target.name] = target.value;
+        }
+      }
+    });
+  });
+</script>
+
 <style is:global>
   body {
     margin: 0;

diff --git a/src/pages/en/index.astro b/src/pages/en/index.astro
@@ -52,19 +52,7 @@ import FlagSelect from "../../components/FlagSelect.astro";
         Copy output</button
       >
     </div>
-
-    <pre id="output"></pre>
   </div>
-
-  <footer class="bg-slate-700 text-white py-2 flex flex-col items-end">
-    <p class="px-8">
-      <a
-        href="https://www.vojtechstruhar.com"
-        target="_blank"
-        class="text-white">Vojtěch Struhár</a
-      >, 2021
-    </p>
-  </footer>
 </PageLayout>
 
 <style>

diff --git a/src/pages/es/index.astro b/src/pages/es/index.astro
@@ -52,19 +52,7 @@ import FlagSelect from "../../components/FlagSelect.astro";
         Copiar el resultado</button
       >
     </div>
-
-    <pre id="output"></pre>
   </div>
-
-  <footer class="bg-slate-700 text-white py-2 flex flex-col items-end">
-    <p class="px-8">
-      <a
-        href="https://www.vojtechstruhar.com"
-        target="_blank"
-        class="text-white">Vojtěch Struhár</a
-      >, 2021
-    </p>
-  </footer>
 </PageLayout>
 
 <style>