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
This commit is contained in:
Cyril Šebek 2024-06-20 14:17:06 +02:00
parent 3b33ffa05d
commit bbd72c23fc
Signed by: blboun3
SSH Key Fingerprint: SHA256:ESaOKDAPaR/9j4DJ3sU4VdxTcL7qWUxpAyPSK2LLKbY
12 changed files with 787 additions and 829 deletions

View File

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

BIN
image.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 45 KiB

View File

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

File diff suppressed because it is too large Load Diff

View File

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

View File

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

View File

@ -10,6 +10,6 @@ import { icons } from "../lib/icons"
export function NavButton({selected, variant}) { export function NavButton({selected, variant}) {
return ( 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] }} />
) )
} }

View File

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

25
src/middleware.js Normal file
View File

@ -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,
})
);

View File

@ -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}/`,
})),
});
}

View File

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

View File

@ -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}/`,
})),
});
}