i18n

v3/src/components/common/BasicScripts.astro

@@ -44,6 +44,24 @@ import { UI } from 'astrowind:config';
     let lastKnownScrollPosition = window.scrollY;
     let ticking = true;
 
+    attachEvent('#languageSelect', 'click', function () {
+      document.getElementById('languages')?.classList.remove('hidden');
+    });
+
+    /*
+    attachEvent('#languages', 'mouseleave', function () {
+      document.getElementById('languages')?.classList.add('hidden');
+    });
+    */
+
+    document.addEventListener('click', function (event) {
+      const languagesDropdown = document.getElementById('languages');
+      const languageSelect = document.getElementById('languageSelect');
+      if (languagesDropdown && !languagesDropdown.contains(event.target) && !languageSelect.contains(event.target)) {
+        languagesDropdown.classList.add('hidden');
+      }
+    });
+
     attachEvent('#header nav', 'click', function () {
       document.querySelector('[data-aw-toggle-menu]')?.classList.remove('expanded');
       document.body.classList.remove('overflow-hidden');
@@ -56,6 +74,7 @@ import { UI } from 'astrowind:config';
 
     attachEvent('[data-aw-toggle-menu]', 'click', function (_, elem) {
       elem.classList.toggle('expanded');
+      document.getElementById('languages')?.classList.toggle('expanded');
       document.body.classList.toggle('overflow-hidden');
       document.getElementById('header')?.classList.toggle('h-screen');
       document.getElementById('header')?.classList.toggle('expanded');

v3/src/components/widgets/Footer.astro

@@ -2,6 +2,7 @@
 import { Icon } from 'astro-icon/components';
 import { SITE } from 'astrowind:config';
 import { getHomePermalink } from '~/utils/permalinks';
+import { getLocalPath } from '@/i18n';
 
 interface Link {
   text?: string;
@@ -32,7 +33,7 @@ const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme
     <div class="grid grid-cols-12 gap-4 gap-y-8 sm:gap-8 py-8 md:py-12">
       <div class="col-span-12 lg:col-span-4">
         <div class="mb-2">
-          <a class="inline-block font-bold text-xl" href={getHomePermalink()}>{SITE?.name}</a>
+          <a class="inline-block font-bold text-xl" href={getHomePermalink(getLocalPath(Astro.currentLocale || '', '/'))}>{SITE?.name}</a>
         </div>
         <div class="text-sm text-muted flex gap-1">
           {

v3/src/components/widgets/Header.astro

@@ -4,10 +4,12 @@ import Logo from '~/components/Logo.astro';
 import ToggleTheme from '~/components/common/ToggleTheme.astro';
 import ToggleMenu from '~/components/common/ToggleMenu.astro';
 import Button from '~/components/ui/Button.astro';
+import { getLocalPath } from '@/i18n';
 
 import { getHomePermalink } from '~/utils/permalinks';
 import { trimSlash, getAsset } from '~/utils/permalinks';
 import type { CallToAction } from '~/types';
+import { getLocalePaths, LOCALES, DEFAULT_LOCALE } from '@/i18n';
 
 interface Link {
   text?: string;
@@ -31,6 +33,7 @@ export interface Props {
   showRssFeed?: boolean;
   position?: string;
   showGithubStar?: boolean;
+  i18n?: boolean;
 }
 
 const {
@@ -44,6 +47,7 @@ const {
   showRssFeed = false,
   showGithubStar = false,
   position = 'center',
+  i18n = false,
 } = Astro.props;
 
 const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
@@ -73,7 +77,7 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
     ]}
   >
     <div class:list={[{ 'mr-auto rtl:mr-0 rtl:ml-auto': position === 'right' }, 'flex justify-between']}>
-      <a class="flex items-center" href={getHomePermalink()}>
+      <a class="flex items-center" href={getHomePermalink(getLocalPath(Astro.currentLocale || '', '/'))}>
         <Logo />
       </a>
       <div class="flex items-center md:hidden">
@@ -137,6 +141,49 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
       <div class="items-center flex justify-between w-full md:w-auto">
         <div class="flex">
           {showToggleTheme && <ToggleTheme iconClass="w-6 h-6 md:w-5 md:h-5 md:inline-block" />}
+          {
+            i18n && (
+              <>
+                <button
+                  id="languageSelect"
+                  type="button"
+                  class="text-muted dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
+                >
+                  <Icon name="tabler:language" class="w-6 h-6 md:w-5 md:h-5 md:inline-block" />
+                </button>
+                <ul
+                  id="languages"
+                  class="md:mt-12 hidden bg-white dark:bg-dark dropdown-menu md:backdrop-blur-md dark:md:bg-dark rounded absolute pl-4 md:pl-0 font-medium md:bg-white/90 md:min-w-[200px] drop-shadow-xl"
+                >
+                  {getLocalePaths(Astro.url).map(({ path, lang }) => {
+                    let path2 = path.replace(/\/$/, '');
+                    if (path2.indexOf('/' + DEFAULT_LOCALE) === 0) {
+                      path2 = path2 + '?lang=en';
+                    }
+                    path2 = path2.replace('/' + DEFAULT_LOCALE, '');
+                    if (!path2) {
+                      path2 = '/';
+                    } else if (path2[0] != '/') {
+                      path2 = '/' + path2;
+                    }
+                    return (
+                      <li>
+                        <a
+                          class:list={[
+                            'first:rounded-t last:rounded-b md:hover:bg-gray-100 hover:text-link dark:hover:text-white dark:hover:bg-gray-700 py-2 px-5 block whitespace-no-wrap',
+                            { 'text-primary': lang === Astro.currentLocale },
+                          ]}
+                          href={path2}
+                        >
+                          {LOCALES[lang].label}
+                        </a>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </>
+            )
+          }
           {
             showRssFeed && (
               <a