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

astro.config.mjs

@@ -45,9 +45,7 @@ export default defineConfig({
       },
     ],
     defaultLocale: "en",
-    routing: {
-      prefixDefaultLocale: true,
-    },
+    routing: "manual",
     fallback: {
       de: "en",
       fr: "en",

package.json

@@ -10,11 +10,11 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/mdx": "^2.2.1",
-    "@astrojs/node": "^8.2.5",
-    "@astrojs/react": "^3.1.1",
-    "@astrojs/rss": "^4.0.5",
-    "@astrojs/sitemap": "^3.1.1",
+    "@astrojs/mdx": "^3.1.1",
+    "@astrojs/node": "^8.3.1",
+    "@astrojs/react": "^3.6.0",
+    "@astrojs/rss": "^4.0.6",
+    "@astrojs/sitemap": "^3.1.6",
     "@astrojs/tailwind": "^5.1.0",
     "@hookform/resolvers": "^3.6.0",
     "@infisical/sdk": "^2.2.3",
@@ -29,7 +29,7 @@
     "@types/nodemailer": "^6.4.15",
     "@types/react": "^18.2.74",
     "@types/react-dom": "^18.2.24",
-    "astro": "^4.5.6",
+    "astro": "^4.11.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "cmdk": "^1.0.0",

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>

src/middleware.js

@@ -0,0 +1,25 @@
+import { defineMiddleware, sequence } from "astro:middleware";
+import { middleware } from "astro:i18n"; // Astro's own i18n routing config
+
+const langs = ["en", "de", "cs", "fr"]
+
+export const userMiddleware = defineMiddleware(async (ctx, next) => {
+  // this response might come from Astro's i18n middleware, and it might return a 404
+  const response = await next();
+  // the /about page is an exception and we want to render it
+  if (ctx.url.pathname == "/") {
+    return Response.redirect(`${ctx.url.protocol}${ctx.url.host}/en/`);
+  } else if ( !langs.some(item => ctx.url.href.includes(item)) ) {
+	return Response.redirect(`${ctx.url.protocol}${ctx.url.host}/en${ctx.url.pathname}`);
+  } else {
+    return response;
+  }
+});
+
+export const onRequest = sequence(
+  userMiddleware,
+  middleware({
+    redirectToDefaultLocale: false,
+    prefixDefaultLocale: true,
+  })
+);

src/pages/[lang]/rss.xml.js

@@ -0,0 +1,24 @@
+import rss from '@astrojs/rss';
+import { getBlogPosts } from "../../content/config";
+
+export async function GET(context) {
+  const lang = context.url.pathname.substring(1,3);
+  const posts = await getBlogPosts();
+  var blog = posts.filter(
+    (post) => post.data.language == lang,
+  );
+
+  return rss({
+    title: 'Title',
+    description: 'Description',
+    site: context.site,
+    items: blog.map((post) => ({
+      title: post.data.title,
+      pubDate: post.data.publishDate,
+      description: post.data.description,
+      // Compute RSS link from post `slug`
+      // This example assumes all posts are rendered as `/blog/[slug]` routes
+      link: `/${lang}/blog/${post.blog_slug}/`,
+    })),
+  });
+}

src/pages/index.astro

@@ -1,4 +1,6 @@
 ---
+export const prerender = true;
+
 import type { GetStaticPaths } from "astro";
 import MainLayout from "../layouts/MainLayout.astro";
 

src/rss.xml.js

@@ -1,16 +0,0 @@
-import rss from '@astrojs/rss';
-import { getCollection } from 'astro:content';
-import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
-
-export async function GET(context) {
-	const posts = await getCollection('blog');
-	return rss({
-		title: SITE_TITLE,
-		description: SITE_DESCRIPTION,
-		site: context.site,
-		items: posts.map((post) => ({
-			...post.data,
-			link: `/blog/${post.slug}/`,
-		})),
-	});
-}