improvement: show default language on index path (remove /en path) (#…

…197)

src/components/Footer/Footer.astro

@@ -1,16 +1,17 @@
 ---
+import getTranslatedContent from "@utils/directus";
+import {getLangFromUrl, getPathForLanguage} from "../../i18n/utils";
 import { Github } from "@icons/Github";
 import { Instagram } from "@icons/Instagram";
 import { Linkedin } from "@icons/Linkedin";
 import { Podcast } from "@icons/Podcast";
 import { X } from "@icons/X";
 import { Xing } from "@icons/Xing";
 import { Inovex } from "@icons/Inovex";
-import getTranslatedContent from "@utils/directus";
 import "./Footer.scss";
 
-const {lang} = Astro.params;
-const content = await getTranslatedContent("Footer", lang!);
+const lang = getLangFromUrl(Astro.url);
+const content = await getTranslatedContent("Footer", lang);
 ---
 
 <footer>
@@ -88,13 +89,13 @@ const content = await getTranslatedContent("Footer", lang!);
     <nav class="footer__right">
       <ul class="footer__internal-links">
         <li>
-          <a href=`/${lang}#home`>{content.home}</a>
+          <a href={getPathForLanguage(lang, "#home")}>{content.home}</a>
         </li>
         <li>
-          <a href=`/${lang}#features`>{content.features}</a>
+          <a href={getPathForLanguage(lang, "#features")}>{content.features}</a>
         </li>
         <li>
-          <a href=`/${lang}#about`>{content.about}</a>
+          <a href={getPathForLanguage(lang, "#about")}>{content.about}</a>
         </li>
         <li>
           <a href=`/new`>{content.getStarted}</a>
@@ -106,16 +107,16 @@ const content = await getTranslatedContent("Footer", lang!);
     <div class="footer__bottom-content">
       <ul class="footer__legal-links">
         <li>
-          <a href=`/${lang}/data-protection`>{content.privacy}</a>
+          <a href={getPathForLanguage(lang, "/data-protection")}>{content.privacy}</a>
         </li>
         <li>
-          <a href=`/${lang}/cookie-policy`>{content.cookies}</a>
+          <a href={getPathForLanguage(lang, "/cookie-policy")}>{content.cookies}</a>
         </li>
         <li>
-          <a href=`/${lang}/terms`>{content.terms}</a>
+          <a href={getPathForLanguage(lang, "/terms")}>{content.terms}</a>
         </li>
         <li>
-          <a href=`/${lang}/legal-notice`>{content.legal_notice}</a>
+          <a href={getPathForLanguage(lang, "/legal-notice")}>{content.legal_notice}</a>
         </li>
       </ul>
       <span>{content.copyright}</span>

src/components/Navbar/Navbar.astro

@@ -1,13 +1,14 @@
 ---
+import getTranslatedContent from "@utils/directus";
+import { getLangFromUrl, getPathForLanguage } from '../../i18n/utils';
 import { Logo } from "../Logo";
 import { Plus } from "../../icons/Plus";
 import { Link } from "../Link/Link";
-import getTranslatedContent from "@utils/directus";
 import UserMenu from "@components/UserMenu/UserMenu";
 import "./Navbar.scss";
 
-const {lang} = Astro.params;
-const content = await getTranslatedContent("Header", lang!);
+const lang = getLangFromUrl(Astro.url);
+const content = await getTranslatedContent("Header", lang);
 
 const userMenuLabels = {
   germanLabel: content.german,
@@ -20,18 +21,18 @@ const userMenuLabels = {
 <nav id="navbar" class="navbar">
   <ul>
     <li>
-      <a aria-label={content.home} href=`/${lang}`>
+      <a aria-label={content.home} href={getPathForLanguage(lang, "/")}>
         <Logo />
       </a>
     </li>
     <li>
-      <a href=`/${lang}#home`>{content.home}</a>
+      <a href={getPathForLanguage(lang, "#home")}>{content.home}</a>
     </li>
     <li>
-      <a href=`/${lang}#features`>{content.features}</a>
+      <a href={getPathForLanguage(lang, "#features")}>{content.features}</a>
     </li>
     <li>
-      <a href=`/${lang}#about`>{content.aboutUs}</a>
+      <a href={getPathForLanguage(lang, "#about")}>{content.aboutUs}</a>
     </li>
     <li>
       <UserMenu client:load {...userMenuLabels} />

src/components/UserMenu/UserMenu.tsx

@@ -95,7 +95,7 @@ const UserMenu = ({
             </a>
           </li>
           <li>
-            <a href="/en">
+            <a href="/">
               <svg
                 width="32"
                 height="32"

src/i18n/utils.ts

@@ -0,0 +1,17 @@
+const languages = {
+  en: 'English',
+  de: 'German',
+};
+
+const defaultLang = 'en';
+
+export function getLangFromUrl(url: URL) {
+  const [, lang] = url.pathname.split('/');
+  if (lang in languages) return lang as keyof typeof languages;
+  return defaultLang;
+}
+
+export function getPathForLanguage(lang: keyof typeof languages, path: string) {
+  return lang === defaultLang ? path : `/${lang}${path}`;
+}
+

src/layouts/Layout.astro

@@ -1,4 +1,5 @@
 ---
+import { getLangFromUrl } from "src/i18n/utils";
 import Navbar from "../components/Navbar/Navbar.astro";
 import Footer from "../components/Footer/Footer.astro";
 
@@ -7,10 +8,11 @@ export interface Props {
 }
 
 const { title } = Astro.props;
+const lang = getLangFromUrl(Astro.url);
 ---
 
 <!doctype html>
-<html lang="en">
+<html lang={lang}>
   <head>
     <meta charset="UTF-8" />
     <meta name="description" content="Open source online retrospective & collaboration tool - fast onboarding, jump right into a session with your team" />
@@ -25,11 +27,11 @@ const { title } = Astro.props;
   </head>
   <body>
     <div class="body_wrapper">
-      <Navbar />
+      <Navbar lang={lang} />
       <main>
         <slot />
       </main>
-      <Footer />
+      <Footer lang={lang} />
     </div>
   </body>
 </html>

src/layouts/LegalLayout.astro

@@ -1,29 +1,30 @@
 ---
+import { getLangFromUrl, getPathForLanguage } from "src/i18n/utils";
+import getTranslatedContent from "@utils/directus";
 import { ViewTransitions } from "astro:transitions";
 import Layout from "./Layout.astro";
-import getTranslatedContent from "@utils/directus";
 import "./LegalLayout.scss";
 
-const {lang} = Astro.params;
-const content = await getTranslatedContent("Legal_Menu", lang!);
+const lang = getLangFromUrl(Astro.url);
+const content = await getTranslatedContent("Legal_Menu", lang);
 
 const pathname = new URL(Astro.request.url).pathname;
 
 const navItems = [
   {
-    href: `/${lang}/data-protection`,
+    href: getPathForLanguage(lang, "/data-protection"),
     name: content.privacy,
   },
   {
-    href: `/${lang}/cookie-policy`,
+    href: getPathForLanguage(lang, "/cookie-policy"),
     name: content.cookies,
   },
   {
-    href: `/${lang}/terms`,
+    href: getPathForLanguage(lang, "/terms"),
     name: content.terms,
   },
   {
-    href: `/${lang}/legal-notice`,
+    href: getPathForLanguage(lang, "/legal-notice"),
     name: content.legal_notice,
   },
 ];

src/pages/cookie-policy.astro

@@ -0,0 +1,11 @@
+---
+import LegalLayout from "@layouts/LegalLayout.astro";
+import getTranslatedContent from "@utils/directus.ts";
+import "@styles/Legal.scss";
+
+const content = await getTranslatedContent("Cookie_Policy", "en");
+---
+
+<LegalLayout>
+  <section set:html={content.Cookie_Policy} />
+</LegalLayout>

src/pages/data-protection.astro

@@ -0,0 +1,12 @@
+---
+import LegalLayout from "@layouts/LegalLayout.astro";
+import getTranslatedContent from "@utils/directus.ts";
+import "@styles/Legal.scss";
+
+const content = await getTranslatedContent("Privacy_Policy", "en");
+---
+
+<LegalLayout>
+  <section class="legal__content" set:html={content.Privacy_Policy} />
+</LegalLayout>
+

src/pages/de/cookie-policy.astro

@@ -0,0 +1,11 @@
+---
+import LegalLayout from "@layouts/LegalLayout.astro";
+import getTranslatedContent from "@utils/directus.ts";
+import "@styles/Legal.scss";
+
+const content = await getTranslatedContent("Cookie_Policy", "de");
+---
+
+<LegalLayout>
+  <section set:html={content.Cookie_Policy} />
+</LegalLayout>

src/pages/de/data-protection.astro

@@ -0,0 +1,12 @@
+---
+import LegalLayout from "@layouts/LegalLayout.astro";
+import getTranslatedContent from "@utils/directus.ts";
+import "@styles/Legal.scss";
+
+const content = await getTranslatedContent("Privacy_Policy", "de");
+---
+
+<LegalLayout>
+  <section class="legal__content" set:html={content.Privacy_Policy} />
+</LegalLayout>
+

src/pages/[lang]/index.astro → src/pages/de/index.astro

@@ -1,5 +1,4 @@
 ---
-import type { GetStaticPaths } from "astro";
 import Hero from "@views/Hero/Hero.astro";
 import Choices from "@views/Choices/Choices.astro";
 import Uniqueness from "@views/Uniqueness/Uniqueness.astro";
@@ -9,18 +8,15 @@ import TargetUser from "@views/TargetUser/TargetUser.astro";
 import Features from "@views/Features/Features.astro";
 import Feedback from "@views/Feedback/Feedback.astro";
 import AboutUs from "@views/AboutUs/AboutUs.astro";
-
-export const getStaticPaths = (() => {
-  return [{ params: { lang: "en" } }, { params: { lang: "de" } }];
-}) satisfies GetStaticPaths;
 ---
 
-<Layout title="scrumlr.io - Online collaboration">
+<Layout title="scrumlr.io - Online collaboration" >
   <Hero />
   <Choices />
   <Uniqueness />
   <Mobile />
   <Features />
+  <TargetUser />
   <Feedback />
   <AboutUs />
 </Layout>

src/pages/de/legal-notice.astro

@@ -0,0 +1,11 @@
+---
+import LegalLayout from "@layouts/LegalLayout.astro";
+import getTranslatedContent from "@utils/directus.ts";
+import "@styles/Legal.scss";
+
+const content = await getTranslatedContent("Legal_Notice", "de");
+---
+
+<LegalLayout>
+  <section set:html={content.legal_notice} />
+</LegalLayout>

src/pages/de/terms.astro

@@ -0,0 +1,17 @@
+---
+import LegalLayout from "@layouts/LegalLayout.astro";
+import getTranslatedContent from "@utils/directus.ts";
+import "@styles/Legal.scss";
+
+const content = await getTranslatedContent("Terms_Conditions", "de");
+---
+
+<LegalLayout>
+  <section set:html={content.Terms_Conditions} />
+</LegalLayout>
+
+<style>
+  section {
+    text-wrap: wrap;
+  }
+</style>