fix: fixed alternate link language for article

src/components/AlternateLangLink/AlternateLangLink.astro

@@ -7,12 +7,32 @@ import { getLanguageFromURL } from "@root/utils";
 
 export interface Props extends astroHTML.JSX.AnchorHTMLAttributes {
 	lang: LanguageKeys;
+
+	/**
+	 * Custom article slug for alternate language
+	 */
+	slug?: string;
 }
 
-const { pathname } = Astro.url;
+let { pathname } = Astro.url;
 const siteLang = getLanguageFromURL(pathname);
-const { lang, ...attrs } = Astro.props as Props;
+const { lang, slug, ...attrs } = Astro.props as Props;
+
+/**
+ * Articles have different slug for different languages, so I have to modify it according to user's language.
+ */
+const mofifyArticleSlug = (slug) =>
+	lang === DEFAULT_LANGUAGE
+		? pathname.replace(pathname.split("/").at(4), slug)
+		: pathname.replace(pathname.split("/").at(3), slug);
+
 let href: string;
+
+if (slug && pathname.includes("/blog/")) {
+	pathname = mofifyArticleSlug(slug);
+}
+
+/* Someday I'll refactor this */
 if (lang === DEFAULT_LANGUAGE) {
 	href = `/${pathname.split("/").slice(2).join("/")}`;
 } else {

src/pages/[...slug].astro

@@ -1,10 +1,10 @@
 ---
 import type { MDXInstance } from "astro";
 
+import { DEFAULT_LANGUAGE } from "@root/config";
 import ArticleLayout from "@layouts/article.astro";
 import AlternateLangLink from "@components/AlternateLangLink";
 import { getLanguageFromURL } from "@root/utils";
-import { DEFAULT_LANGUAGE } from "@root/config";
 import { formatArticlesByLangs, useTranslation } from "@i18n/utils";
 import languages from "@i18n/languages";
 
@@ -14,9 +14,14 @@ const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
 
 export interface Props {
 	article: MDXInstance<ArticleType>;
-	alternateLangs: LanguageKeys[];
+	availableLangs: AvailableLang[];
 }
 
+type AvailableLang = {
+	lang: LanguageKeys;
+	slug: any;
+};
+
 export async function getStaticPaths() {
 	const modules = import.meta.glob<MDXInstance<ArticleType>>("../../content/articles/**/*.mdx", { eager: true });
 	const entries = Object.keys(modules).map((key) => [key, key.split("/").slice(6)[0]]);
@@ -28,26 +33,34 @@ export async function getStaticPaths() {
 			const dirName = key.split("/").at(-3);
 			const published_at = new Date(article.frontmatter.published_at).toLocaleDateString("en-CA");
 			const slug = `${lang !== DEFAULT_LANGUAGE ? `${lang}/` : ""}blog/${published_at}/${article.frontmatter.slug}`;
+			const availableLangs: AvailableLang[] = Object.keys(formatted[dirName]).map((lang: LanguageKeys) => ({
+				lang,
+				slug: formatted[dirName][lang].frontmatter.slug,
+			}));
 
-			return { params: { slug }, props: { article, alternateLangs: Object.keys(formatted[dirName]) } };
+			return { params: { slug }, props: { article, availableLangs } };
 		})
 		.filter(({ props: { article } }) => !article.frontmatter.draft);
 }
 
 const {
 	article: { Content, frontmatter },
-	alternateLangs,
+	availableLangs,
 } = Astro.props as Props;
 ---
 
 <ArticleLayout lang={siteLang} content={frontmatter} canonicalUrl={canonicalUrl.href}>
 	{
-		alternateLangs.length > 1 && (
+		availableLangs.length > 1 && (
 			<div class="languages-available">
 				{t("article.availableOn")}:
-				{alternateLangs
+				{availableLangs
-					.filter((lang) => lang !== siteLang)
+					.filter((entry) => entry.lang !== siteLang)
-					.map((lang) => <AlternateLangLink lang={lang}>{languages[lang]}</AlternateLangLink>)
+					.map((entry) => (
+						<AlternateLangLink slug={entry.slug} lang={entry.lang}>
+							{languages[entry.lang]}
+						</AlternateLangLink>
+					))
 					.reduce((prev, curr) => [prev, ", ", curr])}
 			</div>
 		)