Update Astro & created custom middleware

- Updated Astro to newest version (4.11.0)
- Created custom middleware (middleware.js), to extend on Astro's default i18n
- Code cleanup and bugfixes

src/components/ContactForm.tsx

@@ -90,7 +90,7 @@ export function ContactForm({ currentLocale }) {
                   <FormControl>
                     <Input
                       placeholder={t("contact").nameDefaultValue}
-                      className="col-span-3"
+                      className="col-span-3 text-foreground"
                       {...field}
                     />
                   </FormControl>
@@ -111,7 +111,7 @@ export function ContactForm({ currentLocale }) {
                   <FormControl>
                     <Input
                       placeholder={t("contact").emailDefaultValue}
-                      className="col-span-3"
+                      className="col-span-3 text-foreground"
                       type="email"
                       {...field}
                     />
@@ -133,7 +133,7 @@ export function ContactForm({ currentLocale }) {
                   <FormControl>
                     <Textarea
                       placeholder={t("contact").messageDefaultValue}
-                      className="col-span-3"
+                      className="col-span-3 text-foreground"
                       {...field}
                     />
                   </FormControl>

src/components/Hero.astro

@@ -24,10 +24,16 @@ const t = useTranslations(getLangFromUrl(Astro.url))
     <div class="mt-[5.5rem] w-full grid justify-around grid-cols-2">
         <button
           type="button"
+          onclick="linkToBlog()"
           class="text-3xl bg-accent text-bkg p-1 rounded-md bg-opacity-75 hover:bg-opacity-100 m-2"
         >
           {t("hero").buttons[0]}
         </button>
         <ContactForm currentLocale={Astro.currentLocale} client:load />
     </div>
+    <script client:load is:inline>
+        function linkToBlog() {
+            document.getElementById("blogBtn").click()
+        }
+    </script>
 </SinglePage>

src/components/NavButton.jsx

@@ -10,6 +10,6 @@ import { icons } from "../lib/icons"
 export function NavButton({selected, variant}) {
 
     return (
-        <Button variant="outline" size="icon" className={cn("bg-inherit border-none text-content", selected ? "text-accent hover:text-bkg" : "text-content hover:text-bkg")} dangerouslySetInnerHTML={{ __html: icons[variant] }}  />
+        <Button id={`${variant}Btn`} variant="outline" size="icon" className={cn("bg-inherit border-none text-content", selected ? "text-accent hover:text-bkg" : "text-content hover:text-bkg")} dangerouslySetInnerHTML={{ __html: icons[variant] }}  />
     )
 }

src/components/Navbar.astro

@@ -16,17 +16,20 @@ function selected(path) {
 		currentURL == path
 	);
 }
+
+const locale = Astro.currentLocale ? Astro.currentLocale : "en"
+
 ---
 <NavbarSkeleton>
 	<!-- Page Navigation -->
 	<div class="flex gap-1">
-		<a href={getRelativeLocaleUrl(Astro.currentLocale, "/")}>
+		<a href={`/${locale}/`}>
 			<NavButton selected={selected("/")} variant="home"/>
 		</a>
-		<a href={getRelativeLocaleUrl(Astro.currentLocale, "/blog")}>
+		<a href={`/${locale}/blog`}>
 			<NavButton selected={selected("/blog")} variant="blog"/>
 		</a>
-		<a href={getRelativeLocaleUrl(Astro.currentLocale, "/music")}>
+		<a href={`/${locale}/music`}>
 			<NavButton selected={selected("/music")} variant="music"/>
 		</a>
 	</div>
@@ -38,7 +41,7 @@ function selected(path) {
 
 	<!-- Options (language, light/dark mode) -->
 	<div class="flex gap-1">
-		<LangSwitcher client:load client:only/>
-		<ThemeSelector client:load client:only/>
+		<LangSwitcher client:load client:only="react"/>
+		<ThemeSelector client:load client:only="react"/>
 	</div>
 </NavbarSkeleton>