fix: Fixed wrong urls on HUB page

albano-a · Sep 19, 2024 · 2d18596 · 2d18596
1 parent 10961c1
commit 2d18596
Show file tree

Hide file tree

Showing 12 changed files with 143 additions and 155 deletions.
diff --git a/.astro/settings.json b/.astro/settings.json
@@ -1,5 +1,5 @@
 {
 	"_variables": {
-		"lastUpdateCheck": 1723506278874
+		"lastUpdateCheck": 1726756744713
 	}
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/ButtonHub.jsx b/src/components/ButtonHub.jsx
@@ -0,0 +1,34 @@
+import { h } from "preact";
+
+const HubButtons = () => {
+  const buttons = [
+    { id: "geophy", label: "Geofísica", url: "/materials/geophysics" },
+    { id: "geol", label: "Geologia", url: "/materials/geology" },
+    { id: "calc", label: "Cálculo", url: "/materials/calculus" },
+    { id: "phy", label: "Física", url: "/materials/physics" },
+    { id: "pro", label: "Programação", url: "/materials/programming" },
+  ];
+
+  const navigateTo = (url) => {
+    window.location.href = url;
+  };
+
+  return (
+    <div>
+      <div class="buttons has-addons are-large is-centered">
+        {buttons.map(({ id, label, url }) => (
+          <button
+            class="button"
+            id={id}
+            key={id}
+            onClick={() => navigateTo(url)}
+          >
+            {label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default HubButtons;
diff --git a/src/env.d.ts b/src/env.d.ts
@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
diff --git a/src/layouts/MaterialsLayout.astro b/src/layouts/MaterialsLayout.astro
@@ -2,6 +2,7 @@
 import "../style/geofisico.css";
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
+import HubButtons from "../components/ButtonHub";
 import { ViewTransitions } from "astro:transitions";
 import HeadInformation from "../components/HeadInformation.astro";
 
@@ -34,8 +35,8 @@ const { pageTitle, pageName, urlBread, pageUrl, pageDescription } = Astro.props;
               <h1 class="is-size-1 has-text-centered has-text-weight-black">
                 {pageTitle}
               </h1>
+              <HubButtons client:load />
               <slot />
-
             </div>
           </div>
         </div>

diff --git a/src/pages/materials/HUB.astro b/src/pages/materials/HUB.astro
@@ -1,6 +1,7 @@
 ---
 import MaterialsLayout from "../../layouts/MaterialsLayout.astro";
 import Card from "../../components/Card.astro";
+import HubButtons from "../../components/ButtonHub";
 
 import SmallButton from "../../components/Button";
 ---
@@ -10,34 +11,8 @@ import SmallButton from "../../components/Button";
   pageUrl="https://geofisicahub.live/materials/hub"
   pageDescription="HUB - GeofisicaHub"
 >
-  <div class="buttons has-addons are-large is-centered">
-    <button class="button" id="geophy">Geofísica</button>
-    <button class="button" id="geol">Geologia</button>
-    <button class="button" id="calc">Cálculo</button>
-    <button class="button" id="phy">Física</button>
-    <button class="button" id="pro">Programação </button>
-  </div>
   <p class="has-text-centered is-size-5">
     Bom, o site não se chama Geofisica<b>HUB</b> por nada, então nessa página você
     encontra o HUB onde poderá acessar os materiais de cada página.
   </p>
-</MaterialsLayout>
-
-<script>
-  const buttons = [
-    { id: "geophy", url: "../geophysics" },
-    { id: "geol", url: "../geology" },
-    { id: "calc", url: "../calculus" },
-    { id: "phy", url: "../physics" },
-    { id: "pro", url: "../programming" },
-  ];
-
-  buttons.forEach(({ id, url }) => {
-    const button = document.querySelector(`#${id}`);
-    if (button) {
-      button.addEventListener("click", () => {
-        window.location.href = url;
-      });
-    }
-  });
-</script>
+</MaterialsLayout>
diff --git a/src/pages/materials/calculus.astro b/src/pages/materials/calculus.astro
@@ -19,13 +19,6 @@ const guidorizzi4 =
   pageUrl="https://geofisicahub.live/materials/calculus"
   pageDescription="Materiais de Cálculo - GeofisicaHub"
 >
-  <div class="buttons has-addons are-large is-centered">
-    <button class="button" id="geophy">Geofísica</button>
-    <button class="button" id="geol">Geologia</button>
-    <button class="button is-primary is-selected" id="calc">Cálculo</button>
-    <button class="button" id="phy">Física</button>
-    <button class="button" id="pro">Programação </button>
-  </div>
   <div class="columns">
     <div class="column"></div>
     <div class="column is-two-thirds">
@@ -216,7 +209,3 @@ const guidorizzi4 =
     <div class="column"></div>
   </div>
 </MaterialsLayout>
-
-<script>
-  import "../../scripts/hubnavigation.js";
-</script>
diff --git a/src/pages/materials/geology.astro b/src/pages/materials/geology.astro
@@ -10,13 +10,6 @@ import SmallButton from "../../components/Button";
   pageUrl="https://geofisicahub.live/materials/geology"
   pageDescription="Materiais de Geologia - GeofisicaHub"
 >
-  <div class="buttons has-addons are-large is-centered">
-    <button class="button" id="geophy">Geofísica</button>
-    <button class="button is-primary is-selected" id="geol">Geologia</button>
-    <button class="button" id="calc">Cálculo</button>
-    <button class="button" id="phy">Física</button>
-    <button class="button" id="pro">Programação </button>
-  </div>
   <div class="columns">
     <div class="column"></div>
     <div class="column is-two-thirds">
@@ -125,7 +118,3 @@ import SmallButton from "../../components/Button";
     <div class="column"></div>
   </div>
 </MaterialsLayout>
-
-<script>
-  import "../../scripts/hubnavigation.js";
-</script>
diff --git a/src/pages/materials/geophysics.astro b/src/pages/materials/geophysics.astro
@@ -10,13 +10,6 @@ import SmallButton from "../../components/Button";
   pageUrl="https://geofisicahub.live/materials/geophysics"
   pageDescription="Materiais de Geofísica - GeofisicaHub"
 >
-  <div class="buttons has-addons are-large is-centered">
-    <button class="button is-primary is-selected" id="geophy">Geofísica</button>
-    <button class="button" id="geol">Geologia</button>
-    <button class="button" id="calc">Cálculo</button>
-    <button class="button" id="phy">Física</button>
-    <button class="button" id="pro">Programação </button>
-  </div>
   <div class="columns">
     <div class="column"></div>
     <div class="column is-two-thirds">
@@ -187,7 +180,3 @@ import SmallButton from "../../components/Button";
     <div class="column"></div>
   </div>
 </MaterialsLayout>
-
-<script>
-  import "../../scripts/hubnavigation.js";
-</script>
diff --git a/src/pages/materials/physics.astro b/src/pages/materials/physics.astro
@@ -10,13 +10,6 @@ import SmallButton from "../../components/Button";
   pageUrl="https://geofisicahub.live/materials/physics"
   pageDescription="Materiais de Física - GeofisicaHub"
 >
-  <div class="buttons has-addons are-large is-centered">
-    <button class="button" id="geophy">Geofísica</button>
-    <button class="button" id="geol">Geologia</button>
-    <button class="button" id="calc">Cálculo</button>
-    <button class="button is-primary is-selected" id="phy">Física</button>
-    <button class="button" id="pro">Programação </button>
-  </div>
   <div class="columns">
     <div class="column"></div>
     <div class="column is-two-thirds">
@@ -111,7 +104,3 @@ import SmallButton from "../../components/Button";
     <div class="column"></div>
   </div>
 </MaterialsLayout>
-
-<script>
-  import "../../scripts/hubnavigation.js";
-</script>
diff --git a/src/pages/materials/programming.astro b/src/pages/materials/programming.astro
@@ -8,13 +8,6 @@ import CardMaterials from "../../components/CardMaterials";
   pageUrl="https://geofisicahub.live/materials/programming"
   pageDescription="Materiais de Programação - GeofisicaHub"
 >
-  <div class="buttons has-addons are-large is-centered">
-    <button class="button" id="geophy">Geofísica</button>
-    <button class="button" id="geol">Geologia</button>
-    <button class="button" id="calc">Cálculo</button>
-    <button class="button" id="phy">Física</button>
-    <button class="button is-primary is-selected" id="pro">Programação </button>
-  </div>
   <div class="columns">
     <div class="column"></div>
     <div class="column is-two-thirds">
@@ -92,7 +85,3 @@ import CardMaterials from "../../components/CardMaterials";
     <div class="column"></div>
   </div>
 </MaterialsLayout>
-
-<script>
-  import "../../scripts/hubnavigation.js";
-</script>
diff --git a/src/scripts/hubnavigation.js b/src/scripts/hubnavigation.js
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		/// <reference path="../.astro/types.d.ts" />
		/// <reference types="astro/client" />