Merge pull request #273 from blz-it/hotfix/links-and-layout

Hotfix/links and layout

src/components/Footer.astro

@@ -1,6 +1,6 @@
 ---
 import { Icon } from "astro-icon";
-import { t } from "i18next";
+import i18next, { t } from "i18next";
 import { buildLink } from "../routing/buildLink";
 
 interface Social {
@@ -84,14 +84,14 @@ const socials: Social[] = [
           <ul role="list" class="mt-6 space-y-4">
             <li>
               <a
-                href={buildLink("/imprint")}
+                href={buildLink("/imprint", i18next.language)}
                 class="text-sm leading-6 text-gray-300 hover:text-white"
                 >{t("layout.footer.imprint")}</a
               >
             </li>
             <li>
               <a
-                href={buildLink("/privacy")}
+                href={buildLink("/privacy", i18next.language)}
                 class="text-sm leading-6 text-gray-300 hover:text-white"
                 >{t("layout.footer.privacy")}</a
               >

src/components/Header.astro

@@ -1,17 +1,16 @@
 ---
-import { t } from "i18next";
+import i18next, { t } from "i18next";
 import { buildLink } from "../routing/buildLink";
 import { LanguageDropdown } from "./dropdowns/LanguageDropdown";
 import { SkillsDropdown } from "./dropdowns/SkillsDropdown";
-import load from "astro-icon/lib/utils";
 
 export interface NavigationItem {
   name: string;
   href: string;
 }
 const home: NavigationItem = {
   name: t("layout.header.home"),
-  href: buildLink("/"),
+  href: buildLink("/", i18next.language),
 };
 ---
 
@@ -21,7 +20,7 @@ const home: NavigationItem = {
       class="flex w-full items-center justify-between border-b border-white py-6 lg:border-none"
     >
       <div class="flex items-center">
-        <a href={buildLink("/")}>
+        <a href={buildLink("/", i18next.language)}>
           <img class="h-10 w-auto" src="/img/wsg_hands_white.svg" alt="" />
         </a>
         <div class="ml-10 hidden space-x-8 lg:block">

src/components/dropdowns/LanguageDropdown.tsx

@@ -1,16 +1,20 @@
-import { Dropdown } from "./Dropdown";
-import i18n from "i18next";
-import { pathWithoutLanguage, getPathLang } from "../../routing/lang";
-import { useEffect, useState } from "react";
 import { ChevronUpDownIcon } from "@heroicons/react/20/solid";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { getPathLang, pathWithoutLanguage } from "../../routing/lang";
+import { Dropdown } from "./Dropdown";
 
 type LanguageDropdownProps = {
   astroPath: string;
 };
 
-const upDownChevron = <ChevronUpDownIcon className="h-5 w-5" aria-hidden="true" />;
+const upDownChevron = (
+  <ChevronUpDownIcon className="h-5 w-5" aria-hidden="true" />
+);
 
 export const LanguageDropdown = ({ astroPath }: LanguageDropdownProps) => {
+  const { i18n } = useTranslation();
+
   const [pathWithoutLang, setPathWithoutLang] = useState("/");
   const [lang, setLang] = useState(getPathLang(astroPath));
 

src/components/dropdowns/SkillsDropdown.tsx

@@ -1,33 +1,33 @@
-import { useEffect, useState } from "react";
-import { getPathLang } from "../../routing/lang";
-import { Dropdown } from "./Dropdown";
 import { ChevronDownIcon } from "@heroicons/react/20/solid";
-import { NavigationItem } from "../Header.astro";
+import { useTranslation } from "react-i18next";
 import { buildLink } from "../../routing/buildLink";
-import { t } from "i18next";
+import { getPathLang } from "../../routing/lang";
+import { NavigationItem } from "../Header.astro";
+import { Dropdown } from "./Dropdown";
 
 type SkillsDropdownProps = {
   astroPath: string;
 };
 
-const skills: NavigationItem[] = [
-  {
-    name: "Mobile",
-    href: buildLink("mobile-applications-development"),
-  },
-  {
-    name: "Full Stack",
-    href: buildLink("it-software-solutions-for-business"),
-  },
-];
-
 const downChevron = <ChevronDownIcon className="h-5 w-5" aria-hidden="true" />;
 
 export const SkillsDropdown = ({ astroPath }: SkillsDropdownProps) => {
-  const lang = getPathLang(astroPath);
+  const { t, i18n } = useTranslation();
 
+  const lang = getPathLang(astroPath);
   if (!lang) return null;
 
+  const skills: NavigationItem[] = [
+    {
+      name: "Mobile",
+      href: buildLink("mobile-applications-development", i18n.language),
+    },
+    {
+      name: "Full Stack",
+      href: buildLink("it-software-solutions-for-business", i18n.language),
+    },
+  ];
+
   return (
     <Dropdown
       item={t("layout.header.skills")}

src/components/skill/SkillInformation.astro

@@ -1,8 +1,5 @@
 ---
-import { Trans } from "astro-i18next/components";
 import { t } from "i18next";
-import { buildLink } from "../../routing/buildLink";
-import Link from "../Link.astro";
 import Headline from "../typography/Headline.astro";
 
 type Props = {

src/components/skill/SkillRoadmap.astro

@@ -1,6 +1,6 @@
 ---
 import { Trans } from "astro-i18next/components";
-import { t } from "i18next";
+import i18next, { t } from "i18next";
 import { buildLink } from "../../routing/buildLink";
 import EventCard from "../EventCard.astro";
 import Link from "../Link.astro";
@@ -33,7 +33,7 @@ import Link from "../Link.astro";
       img="/imgs/registration.webp"
       title={t("skills.nextWSC.registration.title")}
       date={t("skills.nextWSC.registration.date")}
-      link={buildLink("dm-registration")}
+      link={buildLink("dm-registration", i18next.language)}
       className="xl:mt-0"
       hoverTextColor="white"
     />
@@ -74,8 +74,9 @@ import Link from "../Link.astro";
   <ol class="sm:pt-8 md:pt-16 list-decimal space-y-4 text-left">
     <li>
       <Trans i18nKey="skills.nextWSC.registration.description">
-        <Link href={buildLink("dm-registration")}>You register yourself</Link> and
-        receive further information as well as, after the registration is closed,
+        <Link href={buildLink("dm-registration", i18next.language)}
+          >You register yourself</Link
+        > and receive further information as well as, after the registration is closed,
         your credentials.
       </Trans>
     </li>

src/components/timeline/TimeLineEntry.astro

@@ -25,7 +25,7 @@ const { date, title, text, period } = Astro.props;
   ) : (
     <li class="timeline-item">
       <div class="timeline-info">
-        <span set:html={date} />
+        <span class="text-wrap" set:html={date} />
       </div>
       <div class="timeline-marker" />
       <div class="timeline-content">

src/layouts/SkillPage.astro

@@ -1,19 +1,15 @@
 ---
-import { Trans } from "astro-i18next/components";
 import { t } from "i18next";
 import Hero from "../components/Hero.astro";
-import Link from "../components/Link.astro";
 import LinkCard from "../components/LinkCard.astro";
 import SkillInformation from "../components/skill/SkillInformation.astro";
 import SkillRoadmap from "../components/skill/SkillRoadmap.astro";
 import type Person from "../components/team/Person.astro";
-import Team from "../components/team/Team.astro";
 import TimeLine from "../components/timeline/TimeLine.astro";
 import type TimeLineEntry from "../components/timeline/TimeLineEntry.astro";
 import Layout from "../layouts/Layout.astro";
 import HeadedSection from "../layouts/sections/HeadedSection.astro";
 import WavedSection from "../layouts/sections/WavedSection.astro";
-import { buildLink } from "../routing/buildLink";
 import type { PropsOf } from "../utils/types";
 import ContactSection from "./Contact.astro";
 
@@ -76,7 +72,7 @@ const {
     </WavedSection>
     <WavedSection type={"top"} title={t("skills.additionalLinks")}>
       <dl class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-2">
-        {additionalLinks.map((link) => <LinkCard {...link} />)}
+        {additionalLinks.map((link: any) => <LinkCard {...link} />)}
       </dl>
     </WavedSection>
   </div>

src/pages/[lang]/index.astro

@@ -1,6 +1,6 @@
 ---
 import { Trans } from "astro-i18next/components";
-import { t } from "i18next";
+import i18next, { t } from "i18next";
 import Cta from "../../components/Cta.astro";
 import Hero from "../../components/Hero.astro";
 import Link from "../../components/Link.astro";
@@ -55,43 +55,46 @@ updateLang(Astro.url.pathname);
         The Federal Centres of Excellence in Software Development are located at
         the <Link href="https://aeg-nb.de" openInNewTab
           >Albert-Einstein-Gymnasium Neubrandenburg</Link
-        >. At this location, <Link href={buildLink("skill08")}
+        >. At this location, <Link
+          href={buildLink("mobile-applications-development", i18next.language)}
           >Skill 08: Mobile Applications Development</Link
-        > and <Link href={buildLink("skill09")}
-          >Skill 09: IT Software Solutions for Business</Link
+        > and <Link
+          href={buildLink(
+            "it-software-solutions-for-business",
+            i18next.language
+          )}>Skill 09: IT Software Solutions for Business</Link
         > are represented. More information on the individual skills can be found
         on the respective subpages.
       </Trans>
     </p>
-    <table>
-      <tr class="border-b-2"
-        ><th class="border-r-2 text-xl py-1">Mobile Applications Development</th
-        >
-        <th class="text-xl">IT Software Solutions for Business</th>
-      </tr>
-      <tr>
-        <td class="border-r-2">
-          <p class="mx-10 pt-2">
-            <Trans i18nKey="home.skills.skill08">
-              As a software developer with a specialization in mobile
-              applications, you are a programmer and designer in one. You ensure
-              that the apps work on users' mobile devices, look appealing, and
-              are fun to use.
-            </Trans>
-          </p>
-        </td>
-        <td>
-          <p class="mx-10 pt-2">
-            <Trans i18nKey="home.skills.skill09">
-              The skill IT Software Solutions for Business represents the entire
-              spectrum of software-developing IT professions. All full-stack
-              programmers are suitable. This includes desktop, server, database,
-              mobile app and web development.
-            </Trans>
-          </p>
-        </td>
-      </tr>
-    </table>
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-y-8 gap-x-24 mx-4">
+      <div>
+        <p class="text-xl border-white border-b-2 pb-1">
+          Mobile Applications Development
+        </p>
+        <p class="md:text-justify pt-4">
+          <Trans i18nKey="home.skills.skill08">
+            As a software developer with a specialization in mobile
+            applications, you are a programmer and designer in one. You ensure
+            that the apps work on users' mobile devices, look appealing, and are
+            fun to use.
+          </Trans>
+        </p>
+      </div>
+      <div>
+        <p class="text-xl border-white border-b-2 pb-1">
+          IT Software Solutions for Business
+        </p>
+        <p class="md:text-justify pt-4">
+          <Trans i18nKey="home.skills.skill09">
+            The skill IT Software Solutions for Business represents the entire
+            spectrum of software-developing IT professions. All full-stack
+            programmers are suitable. This includes desktop, server, database,
+            mobile app and web development.
+          </Trans>
+        </p>
+      </div>
+    </div>
   </WavedSection>
   <WavedSection type={"bottom"}>
     <Cta

src/routing/buildLink.ts

@@ -1,4 +1,2 @@
-import i18n from "i18next";
-
-export const buildLink = (path: string) =>
-  `/${i18n.language}${path.startsWith("/") ? "" : "/"}${path}`;
+export const buildLink = (path: string, language: string) =>
+  `/${language}${path.startsWith("/") ? "" : "/"}${path}`;