From 113737d7fe11f3839c0972f745f583f30d9da933 Mon Sep 17 00:00:00 2001
From: sergeyyarkov <serzh.yarkov@gmail.com>
Date: Thu, 15 Dec 2022 22:34:09 +0300
Subject: [PATCH] fix: fixed alternate link language for article

---
 .../AlternateLangLink/AlternateLangLink.astro | 24 +++++++++++++--
 src/pages/[...slug].astro                     | 29 ++++++++++++++-----
 2 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/src/components/AlternateLangLink/AlternateLangLink.astro b/src/components/AlternateLangLink/AlternateLangLink.astro
index 9481056..1e9d4fe 100644
--- a/src/components/AlternateLangLink/AlternateLangLink.astro
+++ b/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 {
diff --git a/src/pages/[...slug].astro b/src/pages/[...slug].astro
index 3fee87b..3eee799 100644
--- a/src/pages/[...slug].astro
+++ b/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
-					.filter((lang) => lang !== siteLang)
-					.map((lang) => <AlternateLangLink lang={lang}>{languages[lang]}</AlternateLangLink>)
+				{availableLangs
+					.filter((entry) => entry.lang !== siteLang)
+					.map((entry) => (
+						<AlternateLangLink slug={entry.slug} lang={entry.lang}>
+							{languages[entry.lang]}
+						</AlternateLangLink>
+					))
 					.reduce((prev, curr) => [prev, ", ", curr])}
 			</div>
 		)