Merge branch 'main' into feat/fetch-news-slider-data

package.json

@@ -11,21 +11,20 @@
     "astro": "astro"
   },
   "devDependencies": {
-    "@astrojs/mdx": "^0.12.2",
-    "@astrojs/react": "^1.2.2",
-    "@astrojs/tailwind": "^2.1.3",
-    "@tailwindcss/line-clamp": "^0.4.2",
+    "@astrojs/mdx": "^0.19.7",
+    "@astrojs/react": "^2.2.1",
+    "@astrojs/tailwind": "^4.0.0",
     "@tailwindcss/typography": "^0.5.9",
-    "@types/node": "^18.11.18",
-    "astro": "^1.9.2",
+    "@types/node": "^20.4.9",
+    "astro": "^2.10.5",
     "embla-carousel-react": "^7.0.9",
     "github-slugger": "^2.0.0",
-    "mapbox-gl": "^2.12.0",
+    "mapbox-gl": "^2.15.0",
     "react-dom": "^18.2.0",
-    "react-map-gl": "^7.0.21",
+    "react-map-gl": "^7.1.3",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.1.0",
-    "tailwindcss": "^3.2.4",
-    "vite-plugin-svgr": "^2.4.0"
+    "tailwindcss": "^3.3.3",
+    "vite-plugin-svgr": "^3.2.0"
   }
 }

src/components/AcademyIndexLoader.astro

@@ -3,12 +3,20 @@ import { Course } from "@components";
 import { transformAcademy } from "@util/ContentTransformer";
 import type { AcademyPageFrontmatter } from "@interfaces/IAcademy";
 
+const { language = "en" } = Astro.props;
 
 // Only get files named index.mdx that are inside of a subfolder within the academy folder
-const rawAcademyContent = await Astro.glob<AcademyPageFrontmatter>(
-  "../pages/en/academy/*/*.mdx"
-);
 
+let rawAcademyContent;
+if (language === "ua") {
+  rawAcademyContent = await Astro.glob<AcademyPageFrontmatter>(
+    "../pages/ua/academy/*/*.mdx"
+  );
+} else {
+  rawAcademyContent = await Astro.glob<AcademyPageFrontmatter>(
+    "../pages/en/academy/*/*.mdx"
+  );
+}
 const coursesAndLessons = transformAcademy(rawAcademyContent);
 ---
 

src/components/Footer.tsx

@@ -1,25 +1,29 @@
 import React from "react";
 import { ReactComponent as TolocarLogoSvg } from "@assets/tolocar_logo.svg";
-import DeutscheZusammenArbeitImg from "@assets/deutsche_zusammenarbeit.png";
-import GizUkraineImg from "@assets/giz_ukraine.png";
-import HiwwLogoImg from "@assets/hiww_logo.svg";
+import { ReactComponent as GizLogoSvgEN } from "@assets/giz_logo_en.svg";
+import { ReactComponent as GizLogoSvgUA } from "@assets/giz_logo_ua.svg";
+import { ReactComponent as GizZusammenarbeitSvg } from "@assets/giz_zusammenarbeit.svg";
+import { ReactComponent as HiwwLogoSvg } from "@assets/hiww_logo.svg";
+import { ReactComponent as InstagramIcon } from "@assets/instagram.svg";
+import { ReactComponent as FacebookIcon } from "@assets/facebook.svg";
 import type { IMenuItem } from "@interfaces/IMenu";
 
 interface Props {
   className?: string;
   menu?: IMenuItem[];
+  locale?: string;
 }
 
-const Footer: React.FC<Props> = ({ className, menu }: Props) => {
+const Footer: React.FC<Props> = ({ className, menu, locale }: Props) => {
   return (
     <div
-      className={`w-full lg:h-[368px] flex bg-white py-16 ${className || ""}`}
+      className={`w-full flex bg-white py-16 ${className || ""}`}
     >
       <div className="container-width flex flex-col justify-between text-black">
         <div className="flex flex-col lg:flex-row">
           <div className="flex-1 flex flex-col gap-8 text-sm items-start">
             <div className="flex gap-4 items-center">
-              <TolocarLogoSvg className="h-12"/>
+              <TolocarLogoSvg className="h-12" />
               The Tolocar Project
             </div>
             <div className="mt-10 lg:mt-0 ">
@@ -36,27 +40,45 @@ const Footer: React.FC<Props> = ({ className, menu }: Props) => {
                     )
                 )}
               </ul>
+              <div className="mt-8 flex items-center gap-5">
+                <a
+                  href="https://www.instagram.com/tolocar.ua/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-neutral-500 hover:text-tolo-green transition-colors"
+                >
+                  <InstagramIcon className="h-6 w-6" />
+                </a>
+                <a
+                  href="https://www.facebook.com/profile.php?id=100085541444754"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-neutral-500 hover:text-tolo-green transition-colors"
+                >
+                  <FacebookIcon className="h-6 w-6" />
+                </a>
+              </div>
             </div>
           </div>
-          <div className="flex-1 flex flex-col gap-8 lg:flex-row text-sm mt-8">
-            <div className="flex-1 mt-10 lg:mt-0 flex items-center justify-center">
-              <a className="w-full h-auto" href="https://www.hiww.de/">
-                <img className="max-w-xs w-full h-auto" src={HiwwLogoImg} />
-              </a>
-            </div>
-            <div className="flex-1 mt-10 lg:mt-0 flex items-center justify-center">
-              <a className="w-full h-auto" href="https://www.bmz.de/">
-                <img
-                  className="max-w-xs w-full h-auto"
-                  src={DeutscheZusammenArbeitImg}
-                />
-              </a>
-            </div>
-            <div className="flex-1 mt-10 lg:mt-0 flex items-center justify-center">
-              <a className="w-full h-auto" href="https://www.giz.de/">
-                <img className="max-w-xs w-full h-auto" src={GizUkraineImg} />
-              </a>
-            </div>
+          <div className="flex-1 flex flex-col sm:gap-[10%] sm:flex-row mt-10 lg:mt-0 gap-0 text-sm sm:h-64">
+            <a
+                className={'mt-10 sm:mt-0 h-full flex-shrink'}
+                href="https://www.giz.de"
+                target="_blank">
+              <GizZusammenarbeitSvg className={'h-full w-full'} />
+            </a>
+            <a
+                className={'-mt-12 sm:mt-0 h-full flex-shrink'}
+                href="https://www.giz.de"
+                target="_blank">
+              {locale === "ua" ? <GizLogoSvgUA className={'h-full'} /> : <GizLogoSvgEN className={'h-full'} />}
+            </a>
+            <a
+                className={'-mt-60 sm:mt-0 h-full flex-shrink'}
+                href="https://www.hiww.de"
+                target="_blank">
+              <HiwwLogoSvg className={'h-full w-full'}/>
+            </a>
           </div>
         </div>
         <div className="text-sm text-neutral-500 flex flex-col lg:flex-row gap-2 lg:gap-0 mt-8">

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>

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>

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 || ""

src/components/InterventionsListItem.tsx

@@ -28,7 +28,7 @@ const InterventionsListItem: React.FC<Props> = ({
       </div>
       <a
         href={href}
-        className="group hover:translate-x-4 transition-transform mt-20"
+        className="group w-full hover:translate-x-4 transition-transform mt-20"
       >
         <div className="flex flex-col lg:flex-row overflow-hidden z-10 gap-8">
           {image && (

src/components/TableOfContents.tsx

@@ -1,11 +1,12 @@
-import type { MarkdownHeading } from 'astro';
+import React from "react";
+import type { MarkdownHeading } from "astro";
 
 interface Props {
   title: string;
   headlines: Array<MarkdownHeading>;
+  baseUrl?: string;
 }
 
-
 const buildTocList = (input: Array<MarkdownHeading>) => {
   // Create a ordered list of depth and remove duplicates
   let map = new Map(
@@ -27,7 +28,7 @@ const paddingMapping = {
   6: "pl-20",
 };
 
-const TableOfContents: React.FC<Props> = ({ title, headlines }) => {
+const TableOfContents: React.FC<Props> = ({ title, headlines, baseUrl }) => {
   const headlinesWithoutDepthGaps = buildTocList(headlines);
   return (
     <nav>
@@ -37,7 +38,12 @@ const TableOfContents: React.FC<Props> = ({ title, headlines }) => {
           const leftPadding = paddingMapping[headline.depth];
           return (
             <li key={index} className={leftPadding}>
-              <a className="hover:text-neutral-900" href={`#${headline.slug}`}>{headline.text}</a>
+              <a
+                className="hover:text-neutral-900"
+                href={`${baseUrl || ""}#${headline.slug}`}
+              >
+                {headline.text}
+              </a>
             </li>
           );
         })}

src/components/Tag.tsx

@@ -1,11 +1,15 @@
 import React from "react";
 
-const Tag = ({ title }: { title: string }) => {
-  return (
+interface Props {
+  title: string;
+}
+
+const Tag: React.FC<Props> = ({ title }) => {
+  return title ? (
     <span className="inline-block bg-tolo-green rounded-full px-4 py-1 text-lg leading-6 font-medium text-white mr-2 mb-2">
       {title}
     </span>
-  );
+  ) : null;
 };
 
 export default Tag;

src/components/WideCardWrapper.astro

@@ -4,6 +4,8 @@ import CommonUtils from "@util/CommonUtils";
 const { target, ...rest } = Astro.props;
 
 const baseUrl = CommonUtils.getBaseUrl(true);
+
+const prefixedTarget = target ? baseUrl + target : undefined;
 ---
 
-<WideCardComponent {...rest} target={baseUrl + target} />
+<WideCardComponent {...rest} target={prefixedTarget} />