fix: menu

tolocar-project · Sep 21, 2023 · c4ce4de · c4ce4de
1 parent 1dfd1c6
commit c4ce4de
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 58 deletions.
diff --git a/src/components/FooterCards.astro b/src/components/FooterCards.astro
@@ -0,0 +1,38 @@
+---
+import { Card, CardContainer } from "@components";
+
+interface Props {
+  language?: string;
+}
+
+const { language = "en" } = Astro.props;
+---
+
+<CardContainer className="lg:h-[408px]">
+  <Card
+    title={language === "ua"
+      ? "Ти знаходишся в Україні і думаєш, що ми можемо бути тобі корисними?"
+      : "You are based in Ukraine and think we could help you?"}
+    bg={4}
+    target="mailto:[email protected]"
+    actionCaption={language === "ua" ? "Контактуй з нами" : "Get in contact"}
+  >
+    {
+      language === "ua"
+        ? "Школи, університети, громадські організації, стартапи та інші організації можуть звернутись до нас з запитом на спільний з Толокаром проект, воркшоп або тренінг."
+        : "Schools, universities, NGOs, Startups and other organizations can reach out to us to request the Tolocars for projects, workshops and trainings."
+    }
+  </Card>
+  <Card
+    title={language === "ua"
+      ? "Ти мейкер і хочеш налагодити партнерство з нами?"
+      : "You are a Maker and want to partner with us?"}
+    bg={5}
+    target="mailto:[email protected]"
+    actionCaption={language === "ua" ? "Контактуй з нами" : "Get in contact"}
+  >
+    Ми шукаємо мейкерів, фаблаби, хакерспейси, мейкерспейси та інші спільноти,
+    які мають бажання налагодити партнерство з нами в Україні або в інших
+    країнах.
+  </Card>
+</CardContainer>
diff --git a/src/components/Giscus.astro b/src/components/Giscus.astro
@@ -1,11 +1,27 @@
 ---
-
+interface Props {
+  language?: string;
+}
+const { language = "en" } = Astro.props;
 ---
+
 <div class="w-full bg-neutral-50">
   <div class="container-width md:grid grid-cols-12 gap-8 my-8">
     <div class="col-start-5 col-span-7">
-      <div class="font-medium text-lg">Liked this resource? React or comment on GitHub</div>
-      <div class="w-full my-8 flex items-center after:content-[''] after:bg-neutral-300 after:h-[1px] after:flex-1 font-bold text-[15px] text-neutral-500"><span class="pr-4 bg-neutral-50 uppercase">Comments</span></div>
+      <div class="font-medium text-lg">
+        {
+          language === "ua"
+            ? "Сподобався цей ресурс? Відреагуйте або прокоментуйте на Github"
+            : "Liked this resource? React or comment on GitHub"
+        }
+      </div>
+      <div
+        class="w-full my-8 flex items-center after:content-[''] after:bg-neutral-300 after:h-[1px] after:flex-1 font-bold text-[15px] text-neutral-500"
+      >
+        <span class="pr-4 bg-neutral-50 uppercase"
+          >{language === "ua" ? "Коментарі" : "Comments"}</span
+        >
+      </div>
       <script
         is:inline
         src="https://giscus.app/client.js"
@@ -21,8 +37,7 @@
         data-theme="light"
         data-lang="en"
         crossorigin="anonymous"
-        async
-      ></script>
+        async></script>
     </div>
   </div>
-</div>
+</div>
diff --git a/src/components/HeroImage.tsx b/src/components/HeroImage.tsx
@@ -5,9 +5,9 @@ interface Props {
   className?: string;
 }
 
-const HeroImage: React.FC<Props> = ({ className }: Props) => {
+const HeroImage: React.FC<Props> = ({ className }) => {
   return (
-    <div className="container-width mt-20 md:mt-32">
+    <div className="container-width mt-20 md:mt-32" id="top">
       <div
         className={`grayscale flex p-8 bg-center justify-center w-full h-full items-center bg-[url('/src/assets/Header.jpg')] ${
           className || ""

diff --git a/src/layouts/AcademyContent.astro b/src/layouts/AcademyContent.astro
@@ -13,6 +13,7 @@ import { getParentPage } from "@util/ContentTransformer";
 import fs from "node:fs";
 import Giscus from "@components/Giscus.astro";
 import CommonUtils from "@util/CommonUtils";
+import FooterCards from "@components/FooterCards.astro";
 
 const rawAcademyContent = await Astro.glob<AcademyPageFrontmatter>(
   "../pages/en/academy/*/*.mdx"
@@ -27,14 +28,15 @@ const editDate = new Date(statsMtime);
 const parentPage = getParentPage(rawAcademyContent, url);
 
 const localeFromUrl =
-  Astro?.url?.pathname.replace(baseUrl, "").split("/").filter(Boolean)[0] || "en";
+  Astro?.url?.pathname.replace(baseUrl, "").split("/").filter(Boolean)[0] ||
+  "en";
 ---
 
 <BaseLayout frontmatter={frontmatter}>
   <div class="mt-20 container-width">
-    <BackButton target={`${baseUrl}${localeFromUrl}/academy`}
-      >Back to Academy Overview</BackButton
-    >
+    <BackButton target={`${baseUrl}${localeFromUrl}/academy`}>
+      Back to Academy Overview
+    </BackButton>
   </div>
   <div class="container-width-hero">
     <AcademyHeroImage
@@ -78,24 +80,6 @@ const localeFromUrl =
       }`}
     >
     </div>
-    <CardContainer className="lg:h-[408px]">
-      <Card
-        title="You are based in Ukraine and think we could help you?"
-        bg={4}
-        target="mailto:[email protected]"
-        actionCaption="Get in contact"
-        >Schools, universities, NGOs, Startups and other organizations can reach
-        out to us to request the Tolocars for projects, workshops and trainings.</Card
-      >
-      <Card
-        title="You are a Maker and want to partner with us?"
-        bg={5}
-        target="mailto:[email protected]"
-        actionCaption="Get in contact"
-        >We are looking for Makers, FabLabs, Hackerspaces, Makerspaces and other
-        Communities who wants to partner with us in the Ukraine and
-        internationally over the internet.</Card
-      >
-    </CardContainer>
+    <FooterCards language={localeFromUrl} />
   </ContentSection>
 </BaseLayout>
diff --git a/src/layouts/AcademyIndex.astro b/src/layouts/AcademyIndex.astro
@@ -1,31 +1,21 @@
 ---
+import FooterCards from "@components/FooterCards.astro";
 import BaseLayout from "./BaseLayout.astro";
-import { ContentSection, Card, CardContainer } from "@components";
+import { ContentSection } from "@components";
+import CommonUtils from "@util/CommonUtils";
 const { frontmatter } = Astro.props;
+
+const baseUrl = CommonUtils.getBaseUrl(false);
+
+const localeFromUrl =
+  Astro?.url?.pathname.replace(baseUrl, "").split("/").filter(Boolean)[0] ||
+  "en";
 ---
 
 <BaseLayout footerGrey={true} frontmatter={frontmatter}>
   <slot />
   <ContentSection>
     <div class="absolute w-full bg-white h-64 top-0"></div>
-    <CardContainer className="lg:h-[408px]">
-      <Card
-        title="You are based in Ukraine and think we could help you?"
-        bg={4}
-        target="mailto:[email protected]"
-        actionCaption="Get in contact"
-        >Schools, universities, NGOs, Startups and other organizations can reach
-        out to us to request the Tolocars for projects, workshops and trainings.</Card
-      >
-      <Card
-        title="You are a Maker and want to partner with us?"
-        bg={5}
-        target="mailto:[email protected]"
-        actionCaption="Get in contact"
-        >We are looking for Makers, FabLabs, Hackerspaces, Makerspaces and other
-        Communities who wants to partner with us in the Ukraine and
-        internationally over the internet.</Card
-      >
-    </CardContainer>
+    <FooterCards language={localeFromUrl} />
   </ContentSection>
 </BaseLayout>
diff --git a/src/pages/en/_menu.mdx b/src/pages/en/_menu.mdx
@@ -1,7 +1,7 @@
 ---
 menu:
   - title: Home
-    target: "/en/#top"
+    target: "en/#top"
     hideInFooter: true
 
   - title: What is a Tolocar?

diff --git a/src/pages/ua/_menu.mdx b/src/pages/ua/_menu.mdx
@@ -1,20 +1,20 @@
 ---
 menu:
   - title: Головна
-    target: "/ua/#top"
+    target: "ua/#top"
     hideInFooter: true
 
   - title: Мотивація
-    target: "/ua/#motivation"
+    target: "ua/#motivation"
 
   - title: Що таке толокар?
-    target: "/ua/#what-is-a-tolocar"
+    target: "ua/#what-is-a-tolocar"
 
   - title: Проєкти та спільнота
-    target: "/ua/#projects-community"
+    target: "ua/#projects-community"
 
   - title: Makerspace Academy
-    target: "/en/academy"
+    target: "ua/academy"
 
   - title: Контакти
     target: "mailto:[email protected]"

diff --git a/src/pages/ua/academy/index.mdx b/src/pages/ua/academy/index.mdx
@@ -6,7 +6,7 @@ title: Maker Academy
 import { HeaderLogo, Footer, WideCard, Course } from "@components";
 import AcademyIndexLoader from "@components/AcademyIndexLoader.astro";
 
-<WideCard title="Makerspace Academy" text="У Makerspace Academy ви знайдете багато корисної інформації про мейкерство та мейкерські простори." target="ua/academy" linkButtonVariant="search" caption="Search for Resources" bg={1} className="mt-20 md:mt-32"/>
+<WideCard title="Makerspace Academy" text="У Makerspace Academy ви знайдете багато корисної інформації про мейкерство та мейкерські простори." bg={1} className="mt-20 md:mt-32"/>
 <div class="container-width">
   <div class="w-full my-8 grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16">
     <AcademyIndexLoader language="ua" />