feat: language selector (#34)

* feat: language selector

* refactor: improve comments

* refactor: add language selector in topbar

Author: gao-sun

src/components/ByLogto.astro

@@ -1,9 +1,9 @@
 ---
 import { Icon } from "astro-icon/components";
-import SolidA from "./SolidA.astro";
 ---
 
-<SolidA
+<a
+  class="solid-button"
   href="https://logto.io/?ref=auth-wiki"
   target="_blank"
   rel="noopener"
@@ -12,10 +12,10 @@ import SolidA from "./SolidA.astro";
   <span class="designed-by">Designed by</span>
   <Icon name="logto-logo" />
   <span>Logto</span>
-</SolidA>
+</a>
 
 <style>
-  @media (max-width: 500px) {
+  @media (max-width: 660px) {
     .designed-by {
       display: none;
     }

src/components/LanguageSelector.astro

@@ -0,0 +1,51 @@
+---
+import { getLocale, getLocaleUrl } from "astro-i18n-aut";
+import { localeDisplay } from "../phrases";
+
+type Props = {
+  class?: string;
+};
+
+const locale = getLocale(Astro.url);
+const alternateLinks = Object.fromEntries(
+  Object.keys(localeDisplay).map((locale) => [
+    locale,
+    getLocaleUrl(Astro.url.pathname, locale),
+  ]),
+);
+const { class: className, ...rest } = Astro.props;
+---
+
+<astro-language-selector data-links={JSON.stringify(alternateLinks)}>
+  <select class={className} {...rest}>
+    {
+      Object.entries(localeDisplay).map(([value, display]) => (
+        <option value={value} selected={value === locale}>
+          {display}
+        </option>
+      ))
+    }
+  </select>
+</astro-language-selector>
+
+<script>
+  // Astro doesn't provide syntax sugar for passing frontmatter variables to scripts, so a custom
+  // element with data attributes is used to pass data from the frontmatter to the script.
+  // https://docs.astro.build/en/guides/client-side-scripts/#pass-frontmatter-variables-to-scripts
+  class AstroLanguageSelector extends HTMLElement {
+    connectedCallback() {
+      const select = this.querySelector("select");
+      const links = JSON.parse(this.dataset.links ?? "{}");
+
+      if (select) {
+        select.addEventListener("change", () => {
+          const locale = select.value;
+          const url = links[locale];
+          window.location.href = url;
+        });
+      }
+    }
+  }
+
+  customElements.define("astro-language-selector", AstroLanguageSelector);
+</script>

src/components/ShareButton.astro

@@ -43,7 +43,8 @@ const { type, title } = Astro.props;
 </style>
 
 <script>
-  // Astro doesn't provide syntax sugar for passing frontmatter variables to scripts.
+  // Astro doesn't provide syntax sugar for passing frontmatter variables to scripts, so a custom
+  // element with data attributes is used to pass data from the frontmatter to the script.
   // https://docs.astro.build/en/guides/client-side-scripts/#pass-frontmatter-variables-to-scripts
   import { buildShareUrlMap } from "../utils/share";
 

src/components/SolidA.astro

@@ -2,8 +2,8 @@
 import { Icon } from "astro-icon/components";
 import Logo from "./Logo.astro";
 import ByLogto from "./ByLogto.astro";
-import SolidA from "./SolidA.astro";
 import { defaultLocale, getLocale } from "astro-i18n-aut";
+import LanguageSelector from "./LanguageSelector.astro";
 
 const locale = getLocale(Astro.url);
 ---
@@ -17,14 +17,16 @@ const locale = getLocale(Astro.url);
     <Logo />
   </a>
   <div class="actions">
-    <SolidA
+    <a
+      class="solid-button"
       href="https://github.com/logto-io/auth-wiki"
       target="_blank"
       rel="noopener"
     >
       <Icon name="github" />
       <span class="github">GitHub</span>
-    </SolidA>
+    </a>
+    <LanguageSelector class="select solid-button" />
     <ByLogto />
   </div>
 </div>
@@ -50,7 +52,18 @@ const locale = getLocale(Astro.url);
     display: flex;
     gap: 12px;
   }
-  @media (max-width: 500px) {
+  .select {
+    border: none;
+    border-right: 12px solid transparent;
+    height: 100%;
+  }
+  @media (max-width: 810px) {
+    .topbar a.home :global(svg) {
+      width: auto;
+      height: 24px;
+    }
+  }
+  @media (max-width: 600px) {
     .topbar .actions {
       gap: 8px;
     }

src/components/Topbar.astro

@@ -159,4 +159,43 @@ const canonical = new URL(
       background-color: var(--shiki-dark-bg) !important;
     }
   }
+
+  /* Reusable styles */
+  .solid-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    padding: 8px 12px;
+    border-radius: 6px;
+    color: #fff;
+    background-color: rgba(255, 255, 255, 0.1);
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+    transition: background-color 0.2s ease-in-out;
+  }
+
+  .solid-button:hover {
+    cursor: pointer;
+    background-color: rgba(255, 255, 255, 0.18);
+  }
+
+  .solid-button svg {
+    height: 20px;
+    width: auto;
+    margin-inline-end: -2px;
+  }
+  @media (max-width: 810px) {
+    .solid-button {
+      font-size: 12px;
+      line-height: 16px;
+      padding: 6px 10px;
+    }
+
+    .solid-button svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
 </style>

src/layouts/Layout.astro

@@ -67,15 +67,10 @@ const phrases = getPhrases(locale);
         <div class="background"></div>
         <div class="metadata">
           <BackgroundCells class="background-cells" />
-          <Tags data={tags} />
-          <h1>{title}</h1>
-          <p class="description">
-            {description}
-          </p>
           <div class="actions">
-            <Share title={title} shareText={phrases.general.share} />
+            <Tags data={tags} />
             <a
-              class="edit"
+              class="button"
               href={`https://github.com/logto-io/auth-wiki/edit/master/src/content/${entry.collection}/${entry.slug}.mdx`}
               target="_blank"
               rel="noopener"
@@ -84,6 +79,11 @@ const phrases = getPhrases(locale);
               <span>{phrases.content.edit_on_github}</span>
             </a>
           </div>
+          <h1>{title}</h1>
+          <p class="description">
+            {description}
+          </p>
+          <Share title={title} shareText={phrases.general.share} />
         </div>
       </header>
       <div class="content">
@@ -175,11 +175,16 @@ const phrases = getPhrases(locale);
     justify-content: space-between;
     flex-wrap: wrap;
     column-gap: 32px;
+    row-gap: 16px;
+  }
+  div.actions select.button {
+    border: none;
+    border-right: 12px solid transparent;
   }
-  div.actions a.edit {
+  div.actions .button {
     display: inline-flex;
     align-items: center;
-    gap: 6px;
+    gap: 8px;
     text-decoration: none;
     border-radius: 8px;
     padding: 6px 10px;
@@ -191,10 +196,11 @@ const phrases = getPhrases(locale);
     transition: background-color 0.2s ease-in-out;
     text-wrap: nowrap;
   }
-  div.actions a.edit:hover {
+  div.actions .button:hover {
+    cursor: pointer;
     background-color: rgba(255, 255, 255, 0.2);
   }
-  div.actions a.edit :global(svg) {
+  div.actions .button :global(svg) {
     width: 16px;
     height: auto;
   }
@@ -385,7 +391,7 @@ const phrases = getPhrases(locale);
     div.metadata p.description {
       color: rgba(255, 255, 255, 0.7);
     }
-    div.actions a.edit {
+    div.actions .button {
       color: rgba(255, 255, 255, 0.6);
     }
     div.content {

src/pages/[slug].astro

@@ -4,6 +4,12 @@ export * from './zh';
 import { en } from './en';
 import { zh } from './zh';
 
+/** Display names for each locale. */
+export const localeDisplay: Readonly<Record<string, string>> = Object.freeze({
+  en: 'English',
+  zh: '简体中文',
+});
+
 export const getPhrases = (locale: string) => {
   switch (locale) {
     case 'zh':