Fix simple language selector for blog posts

dallyh · Jan 1, 2024 · 106948e · 106948e
1 parent abc0539
commit 106948e
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 25 deletions.
diff --git a/src/components/astro/global/Navigation.astro b/src/components/astro/global/Navigation.astro
@@ -72,7 +72,7 @@ await loadNamespaces(locale, namespaces);
             {!homePage && <a href={getRelativeLocaleUrl(locale, "/contact")}>{t("navigation:contact")}</a>}
         </li>
         <li>
-            <SimpleLanguageSelector showFlag={false} showTitle={false} />
+            <SimpleLanguageSelector showFlag={false} showTitle={false} post={post} />
         </li>
     </ul>
 </aside>

diff --git a/src/components/astro/global/SimpleLanguageSelector.astro b/src/components/astro/global/SimpleLanguageSelector.astro
@@ -2,49 +2,76 @@
 import ISO6991 from "iso-639-1";
 import { locales } from "@i18n/config";
 import { loadNamespaces, t } from "@i18n/i18n";
-import { getLocale } from "@i18n/utils";
+import { getLocale, getPathFromUrl } from "@i18n/utils";
 import { getRelativeLocaleUrl } from "astro:i18n";
+import type { CollectionEntry } from "astro:content";
+import { getBlogPostByIdAndLocale } from "@utils/getBlogPostByIdAndLocale";
+import { getBlogPostUrl } from "@utils/getBlogPostUrl";
 
 export interface Props {
     showFlag?: boolean;
     showTitle?: boolean;
+    post?: CollectionEntry<"posts">;
 }
 
-const locale = getLocale(Astro.url);
-const { pathname } = Astro.url;
-const { showFlag = false, showTitle = true } = Astro.props;
+const currentLocale = getLocale(Astro.url);
+const { showFlag = false, showTitle = true, post } = Astro.props;
 const capitalizeFirstLetter = (str: string) => {
     const capitalized = str.charAt(0).toUpperCase() + str.slice(1);
     return capitalized;
 };
 
 // i18next
 const namespaces = ["footer"];
-await loadNamespaces(locale, namespaces);
+await loadNamespaces(currentLocale, namespaces);
 ---
 
 <div class="language-selector">
     {showTitle && <p>{t("footer:Language")}: </p>}
     {
-        locales.map((supportedLanguage: string) => {
-            let value = getRelativeLocaleUrl(supportedLanguage, pathname);
-            const nativeName = capitalizeFirstLetter(ISO6991.getNativeName(supportedLanguage));
-            let renderSeparator = true;
-
-            if (supportedLanguage === locales[locales.length - 1]) {
-                renderSeparator = false;
-            }
-
-            return (
-                <>
-                    <a href={value} class="lang-link" rel="prefetch" data-js-language={supportedLanguage} title={`${t("footer:Language")}: ${nativeName}`}>
-                        {showFlag && <span class={`flag ${supportedLanguage}`} />}
-                        <span class={supportedLanguage === locale ? "active" : ""}>{nativeName}</span>
-                    </a>
-                    {renderSeparator && <span> | </span>}
-                </>
-            );
-        })
+        !post &&
+            locales.map((locale) => {
+                const value = getRelativeLocaleUrl(locale, getPathFromUrl(Astro.url));
+                const nativeName = capitalizeFirstLetter(ISO6991.getNativeName(locale));
+                let renderSeparator = true;
+
+                if (locale === locales[locales.length - 1]) {
+                    renderSeparator = false;
+                }
+
+                return (
+                    <>
+                        <a href={value} class="lang-link" rel="prefetch" data-js-language={locale} title={`${t("footer:Language")}: ${nativeName}`}>
+                            {showFlag && <span class={`flag ${locale}`} />}
+                            <span class={locale === locale ? "active" : ""}>{nativeName}</span>
+                        </a>
+                        {renderSeparator && <span> | </span>}
+                    </>
+                );
+            })
+    }
+    {
+        post &&
+            locales.map(async (locale) => {
+                const currentPost = await getBlogPostByIdAndLocale(locale, post.data.postId);
+                const value = getBlogPostUrl(locale, currentPost);
+                const nativeName = capitalizeFirstLetter(ISO6991.getNativeName(locale));
+                let renderSeparator = true;
+
+                if (locale === locales[locales.length - 1]) {
+                    renderSeparator = false;
+                }
+
+                return (
+                    <>
+                        <a href={value} class="lang-link" rel="prefetch" data-js-language={locale} title={`${t("footer:Language")}: ${nativeName}`}>
+                            {showFlag && <span class={`flag ${locale}`} />}
+                            <span class={locale === locale ? "active" : ""}>{nativeName}</span>
+                        </a>
+                        {renderSeparator && <span> | </span>}
+                    </>
+                );
+            })
     }
 </div>