From c2523dd294e906b4d884345eedded45b786c063c Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Sun, 28 Aug 2022 18:39:16 +0300
Subject: [PATCH] fixed i18n

---
 astro.config.mjs                              | 18 +++++++----
 .../AlternateLangLink/AlternateLangLink.astro | 30 +++++++++++++++++++
 src/components/AlternateLangLink/index.ts     |  1 +
 src/components/ArticleItem/ArticleItem.tsx    |  2 +-
 .../LanguageSelect/LanguageSelect.astro       | 14 +++++++--
 src/config.ts                                 |  2 ++
 src/i18n/languages.ts                         |  1 +
 src/i18n/utils.ts                             |  4 +--
 src/pages/[...slug].astro                     |  9 ++----
 src/templates/About.astro                     | 15 ++++++++--
 src/types/main.d.ts                           |  5 ++--
 src/utils/url.ts                              |  4 +++
 12 files changed, 81 insertions(+), 24 deletions(-)
 create mode 100644 src/components/AlternateLangLink/AlternateLangLink.astro
 create mode 100644 src/components/AlternateLangLink/index.ts

diff --git a/astro.config.mjs b/astro.config.mjs
index 0c6ce25..9991a20 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,8 +1,3 @@
-import { defineConfig } from "astro/config";
-import { h } from "hastscript";
-import { toString } from "hast-util-to-string";
-import { escape } from "html-escaper";
-
 /**
  * Integrations
  */
@@ -24,6 +19,14 @@ import remarkSmartypants from "remark-smartypants";
 import rehypeSlug from "rehype-slug";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
 
+/**
+ * Other required modules
+ */
+import { defineConfig } from "astro/config";
+import { h } from "hastscript";
+import { toString } from "hast-util-to-string";
+import { escape } from "html-escaper";
+
 const createAnchorLabel = (heading) => {
 	const node = h("span.anchor-label", escape(heading));
 	node.properties["is:raw"] = true;
@@ -41,11 +44,14 @@ export default defineConfig({
 				locales: {
 					ru: "ru",
 					en: "en",
+					de: "de",
 				},
 			},
 		}),
 		image(),
-		compress(),
+		compress({
+			img: false,
+		}),
 		mdx({
 			remarkPlugins: [remarkGfm, remarkSmartypants],
 			rehypePlugins: [
diff --git a/src/components/AlternateLangLink/AlternateLangLink.astro b/src/components/AlternateLangLink/AlternateLangLink.astro
new file mode 100644
index 0000000..9481056
--- /dev/null
+++ b/src/components/AlternateLangLink/AlternateLangLink.astro
@@ -0,0 +1,30 @@
+---
+/**
+ * This components is used in article layout to display links in alternative lanugages.
+ */
+import { DEFAULT_LANGUAGE } from "@root/config";
+import { getLanguageFromURL } from "@root/utils";
+
+export interface Props extends astroHTML.JSX.AnchorHTMLAttributes {
+	lang: LanguageKeys;
+}
+
+const { pathname } = Astro.url;
+const siteLang = getLanguageFromURL(pathname);
+const { lang, ...attrs } = Astro.props as Props;
+let href: string;
+if (lang === DEFAULT_LANGUAGE) {
+	href = `/${pathname.split("/").slice(2).join("/")}`;
+} else {
+	href = `/${lang}/`;
+	if (siteLang !== DEFAULT_LANGUAGE) {
+		href += `${pathname.split("/").slice(2).join("/")}`;
+	} else {
+		href += `${pathname.split("/").slice(1).join("/")}`;
+	}
+}
+---
+
+<a href={href} {...attrs}>
+	<slot />
+</a>
diff --git a/src/components/AlternateLangLink/index.ts b/src/components/AlternateLangLink/index.ts
new file mode 100644
index 0000000..49f0896
--- /dev/null
+++ b/src/components/AlternateLangLink/index.ts
@@ -0,0 +1 @@
+export { default } from "./AlternateLangLink.astro";
diff --git a/src/components/ArticleItem/ArticleItem.tsx b/src/components/ArticleItem/ArticleItem.tsx
index 0c0e074..4051a13 100644
--- a/src/components/ArticleItem/ArticleItem.tsx
+++ b/src/components/ArticleItem/ArticleItem.tsx
@@ -11,7 +11,7 @@ export type ArticleItemProps = {
 
 export const ArticleItem: Component<ArticleItemProps> = (props) => {
 	const isNonDefaultLanguage = props.data.lang && props.data.lang !== props.lang;
-	const hrefLangPrefix = props.data.lang && props.data.lang !== DEFAULT_LANGUAGE ? "/en" : "";
+	const hrefLangPrefix = props.data.lang && props.data.lang !== DEFAULT_LANGUAGE ? `/${props.data.lang}` : "";
 	return (
 		<article class="article-item">
 			<a
diff --git a/src/components/LanguageSelect/LanguageSelect.astro b/src/components/LanguageSelect/LanguageSelect.astro
index 4144f64..d0865bf 100644
--- a/src/components/LanguageSelect/LanguageSelect.astro
+++ b/src/components/LanguageSelect/LanguageSelect.astro
@@ -1,6 +1,6 @@
 ---
 import { Icon } from "astro-icon";
-import { DEFAULT_LANGUAGE } from "@root/config";
+import { DEFAULT_LANGUAGE, SUPPORTED_LANGUAGES } from "@root/config";
 import languages from "@i18n/languages";
 import { getLanguageFromURL } from "@root/utils";
 
@@ -11,7 +11,7 @@ const lang = getLanguageFromURL(Astro.url.pathname);
 	<Icon name="translate" width="21" height="21" />
 	<select id="languageSelect" value={lang} aria-label="Select language">
 		{
-			Object.entries(languages).map(([code]) => (
+			SUPPORTED_LANGUAGES.map((code) => (
 				<option value={code} selected={lang === code}>
 					<span>{code.toLocaleUpperCase()}</span>
 				</option>
@@ -71,7 +71,15 @@ const lang = getLanguageFromURL(Astro.url.pathname);
 	const changeLanguageHandler = (e) => {
 		const newLang = e.target.value;
 		const pathname = window.location.pathname;
-		const url = newLang === DEFAULT_LANGUAGE ? pathname.slice(3) : `${newLang}${pathname}`;
+		let url;
+
+		if (lang !== DEFAULT_LANGUAGE) {
+			url = pathname.split("/").slice(2).join("/");
+		} else {
+			url = pathname.slice(1);
+		}
+
+		if (newLang !== DEFAULT_LANGUAGE) url = `${newLang}/${url}`;
 
 		/* Move user to articles page with new language */
 		if (window.location.pathname.includes("/blog/")) {
diff --git a/src/config.ts b/src/config.ts
index 4cec084..ed1ad93 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -3,6 +3,8 @@ export const DEFAULT_LANGUAGE: LanguageKeys = "ru";
 /* Show banner about website development */
 export const IS_SITE_UNDER_CONSTRUCTION = import.meta.env.IS_SITE_UNDER_CONSTRUCTION === "true" ? true : false;
 
+export const SUPPORTED_LANGUAGES: SupportedLanguages = ["ru", "en"];
+
 export const SITE_METADATA: SiteMetadataType = {
 	title: "Sergey Yarkov",
 	name: "yarkov.tech",
diff --git a/src/i18n/languages.ts b/src/i18n/languages.ts
index ceb7191..3068727 100644
--- a/src/i18n/languages.ts
+++ b/src/i18n/languages.ts
@@ -1,4 +1,5 @@
 export default {
 	ru: "Русский",
 	en: "English",
+	de: "Deutsch",
 };
diff --git a/src/i18n/utils.ts b/src/i18n/utils.ts
index 0273a25..ffea41a 100644
--- a/src/i18n/utils.ts
+++ b/src/i18n/utils.ts
@@ -1,6 +1,6 @@
 import type { AstroGlobal, MDXInstance } from "astro";
 import * as utils from "@utils/url";
-import { DEFAULT_LANGUAGE } from "@root/config";
+import { DEFAULT_LANGUAGE, SUPPORTED_LANGUAGES } from "@root/config";
 import languages from "./languages";
 
 type TranslatedArticlesType = Record<string, Record<LanguageKeys, MDXInstance<ArticleType>> | Record<string, never>>;
@@ -21,7 +21,7 @@ export function formatArticlesByLangs(data: Record<string, MDXInstance<ArticleTy
 }
 
 export function getLanguageKeys(): Array<string> {
-	return Object.keys(languages);
+	return Object.keys(languages).filter((lang) => SUPPORTED_LANGUAGES.includes(lang as LanguageKeys));
 }
 
 function transformExports<T>(modules: Record<string, { default: T }>) {
diff --git a/src/pages/[...slug].astro b/src/pages/[...slug].astro
index 8e0a3ca..3fee87b 100644
--- a/src/pages/[...slug].astro
+++ b/src/pages/[...slug].astro
@@ -2,6 +2,7 @@
 import type { MDXInstance } from "astro";
 
 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";
@@ -37,8 +38,6 @@ const {
 	article: { Content, frontmatter },
 	alternateLangs,
 } = Astro.props as Props;
-
-const { pathname } = Astro.url;
 ---
 
 <ArticleLayout lang={siteLang} content={frontmatter} canonicalUrl={canonicalUrl.href}>
@@ -48,11 +47,7 @@ const { pathname } = Astro.url;
 				{t("article.availableOn")}:
 				{alternateLangs
 					.filter((lang) => lang !== siteLang)
-					.map((lang) => (
-						<a href={DEFAULT_LANGUAGE === lang ? `/${pathname.split("/").slice(2).join("/")}` : `/${lang}${pathname}`}>
-							{languages[lang]}
-						</a>
-					))
+					.map((lang) => <AlternateLangLink lang={lang}>{languages[lang]}</AlternateLangLink>)
 					.reduce((prev, curr) => [prev, ", ", curr])}
 			</div>
 		)
diff --git a/src/templates/About.astro b/src/templates/About.astro
index 1a26cb3..4287e6f 100644
--- a/src/templates/About.astro
+++ b/src/templates/About.astro
@@ -1,5 +1,7 @@
 ---
-import { SITE_METADATA } from "@root/config";
+import type { MDXInstance } from "astro";
+
+import { DEFAULT_LANGUAGE, SITE_METADATA } from "@root/config";
 import PageLayout from "@layouts/default.astro";
 import PageHeading from "@components/PageHeading";
 import SkillsList from "@components/SkillsList";
@@ -11,7 +13,14 @@ import { useTranslation } from "@i18n/utils";
 
 const lang = getLanguageFromURL(Astro.url.pathname);
 const t = useTranslation(Astro);
-const { Content } = await import(`../../content/about/${lang}/index.mdx`);
+let markdown: MDXInstance<{}> | undefined;
+
+try {
+	markdown = (await import(`../../content/about/${lang}/index.mdx`)) as MDXInstance<{}>;
+} catch (error) {
+	markdown = (await import(`../../content/about/${DEFAULT_LANGUAGE}/index.mdx`)) as MDXInstance<{}>;
+}
+
 const { skills } = SITE_METADATA;
 ---
 
@@ -19,7 +28,7 @@ const { skills } = SITE_METADATA;
 	<PageHeading heading={t("pageTitle.about")} />
 	<section>
 		<ArticleContent>
-			<Content />
+			{markdown && <markdown.Content />}
 		</ArticleContent>
 		<SkillsList>
 			{skills.map((block) => <SkillsBlock data={block} />)}
diff --git a/src/types/main.d.ts b/src/types/main.d.ts
index b5af401..777fe01 100644
--- a/src/types/main.d.ts
+++ b/src/types/main.d.ts
@@ -17,6 +17,7 @@ declare global {
 
 	type LanguageKeys = keyof typeof languages;
 	type UIDictionaryKeys = keyof typeof uiKeys;
+	type SupportedLanguages = LanguageKeys[];
 
 	type SiteMetadataType = {
 		title: string;
@@ -52,14 +53,14 @@ declare global {
 		icon: string;
 		name: string;
 		year: string;
-		description: Record<LanguageKeys, string>;
+		description: Record<string, string>;
 		sourceUrl?: string | undefined;
 		articleUrl?: string | undefined;
 		demoUrl?: string | undefined;
 	};
 
 	type SkillsType = {
-		title: Record<LanguageKeys, string>;
+		title: Record<string, string>;
 		list: Array<{
 			icon?: string | undefined;
 			name: string;
diff --git a/src/utils/url.ts b/src/utils/url.ts
index 6957833..702a282 100644
--- a/src/utils/url.ts
+++ b/src/utils/url.ts
@@ -12,3 +12,7 @@ export const getLanguageFromURL = (pathname: string): LanguageKeys => {
 	if (Object.hasOwn(languages, lang)) return lang;
 	return DEFAULT_LANGUAGE;
 };
+
+export const removeLangFromURL = (pathname: string): string => {
+	return pathname.split("/").slice(2).join("/");
+};