feat: layout i18n (#32)

* feat: layout i18n

* refactor: add alternate urls

Author: gao-sun

src/components/Share.astro

@@ -3,13 +3,14 @@ import ShareButton from "../components/ShareButton.astro";
 
 type Props = {
   title: string;
+  shareText?: string;
 };
 
-const { title } = Astro.props;
+const { title, shareText } = Astro.props;
 ---
 
 <aside class="share">
-  <span>Share</span>
+  <span>{shareText ?? "Share"}</span>
   <div>
     <ShareButton type="x" title={title} />
     <ShareButton type="reddit" title={title} />

src/components/Topbar.astro

@@ -3,10 +3,17 @@ 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";
+
+const locale = getLocale(Astro.url);
 ---
 
 <div class="topbar">
-  <a class="home" href="/" aria-label="Go to homepage">
+  <a
+    class="home"
+    href={locale === defaultLocale ? "/" : `/${locale}`}
+    aria-label="Go to homepage"
+  >
     <Logo />
   </a>
   <div class="actions">

src/layouts/Layout.astro

@@ -1,6 +1,12 @@
 ---
 import { AstroSeo } from "@astrolib/seo";
-import { getLocale } from "astro-i18n-aut";
+import {
+  defaultLocale,
+  getLocale,
+  getLocaleUrl,
+  locales,
+} from "astro-i18n-aut";
+import { getPhrases } from "../phrases";
 
 type Props = {
   title?: string;
@@ -10,10 +16,9 @@ type Props = {
 const { props } = Astro;
 
 const locale = getLocale(Astro.url);
+const phrases = getPhrases(locale);
 const title = props.title ? `${props.title} · Auth Wiki` : "Auth Wiki";
-const description =
-  props.description ??
-  "Auth Wiki is a comprehensive collection of articles, tutorials, and resources about authentication and authorization. Learn about OAuth 2.0, OpenID Connect, SAML, and more.";
+const description = props.description ?? phrases.site.description;
 const canonical = new URL(Astro.url.pathname, Astro.site).href;
 ---
 
@@ -31,6 +36,19 @@ const canonical = new URL(Astro.url.pathname, Astro.site).href;
         url: canonical,
         site_name: "Auth Wiki",
       }}
+      languageAlternates={[
+        ...Object.keys(locales).map((lang) => ({
+          hreflang: lang,
+          href: new URL(getLocaleUrl(Astro.url.pathname, lang), Astro.url).href,
+        })),
+        {
+          hreflang: "x-default",
+          href: new URL(
+            getLocaleUrl(Astro.url.pathname, defaultLocale),
+            Astro.url,
+          ).href,
+        },
+      ]}
     />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

src/mdx-components/Resources.astro

@@ -1,5 +1,7 @@
 ---
 import ogs from "open-graph-scraper";
+import { getPhrases } from "../phrases";
+import { getLocale } from "astro-i18n-aut";
 
 /** Type to override the default metadata for the page. */
 type UrlMetadata = {
@@ -47,10 +49,13 @@ const results = await Promise.all(
     return { url, result };
   }),
 );
+
+const locale = getLocale(Astro.url);
+const phrases = getPhrases(locale);
 ---
 
 <aside>
-  <h2>Resources and references</h2>
+  <h2>{phrases.content.resources_and_references}</h2>
   {
     results.map(({ url, result }) => (
       <a href={url} class="resource" target="_blank" rel="noopener">

src/mdx-components/SeeAlso.astro

@@ -1,5 +1,7 @@
 ---
+import { getLocale } from "astro-i18n-aut";
 import Ref from "./Ref.astro";
+import { getPhrases } from "../phrases";
 
 type Props = {
   /**
@@ -15,9 +17,12 @@ const { slugs } = Astro.props;
 if (slugs.length === 0) {
   throw new Error('The "slugs" prop must contain at least one slug.');
 }
+
+const locale = getLocale(Astro.url);
+const phrases = getPhrases(locale);
 ---
 
-<h2>See also</h2>
+<h2>{phrases.content.see_also}</h2>
 <ul class="list">
   {
     slugs.map((slug) => (

src/pages/[slug].astro

@@ -15,6 +15,7 @@ import { Icon } from "astro-icon/components";
 import { getCollection } from "astro:content";
 import { getEntry } from "astro:content";
 import { defaultLocale, getLocale } from "astro-i18n-aut";
+import { getPhrases } from "../phrases";
 
 export async function getStaticPaths() {
   // Only the default locale is needed for generating paths. Other locales will be handled by
@@ -53,6 +54,8 @@ const { headings, Content } = await entry.render();
 if (headings.some(({ depth }) => depth === 1)) {
   throw new Error("The article must not contain a top-level heading.");
 }
+
+const phrases = getPhrases(locale);
 ---
 
 <Layout title={title} description={description}>
@@ -70,22 +73,22 @@ if (headings.some(({ depth }) => depth === 1)) {
             {description}
           </p>
           <div class="actions">
-            <Share title={title} />
+            <Share title={title} shareText={phrases.general.share} />
             <a
               class="edit"
               href={`https://github.com/logto-io/auth-wiki/edit/master/src/content/${entry.collection}/${entry.slug}.mdx`}
               target="_blank"
               rel="noopener"
             >
               <Icon name="github" />
-              <span>Edit on GitHub</span>
+              <span>{phrases.content.edit_on_github}</span>
             </a>
           </div>
         </div>
       </header>
       <div class="content">
         <nav class="toc">
-          <h2>Table of Contents</h2>
+          <h2>{phrases.content.table_of_contents}</h2>
           <ul>
             {
               headings
@@ -120,6 +123,7 @@ if (headings.some(({ depth }) => depth === 1)) {
     position: relative;
   }
   header div.background {
+    z-index: -1;
     position: absolute;
     background: linear-gradient(180deg, #6225cc 0%, rgb(179, 3, 255) 100%);
     top: -100px;
@@ -128,6 +132,7 @@ if (headings.some(({ depth }) => depth === 1)) {
     right: 0;
   }
   .background-cells {
+    z-index: -1;
     position: absolute;
     right: 12px;
     top: 100px;

src/pages/index.astro

@@ -5,6 +5,7 @@ import Topbar from "../components/Topbar.astro";
 import Footer from "../components/Footer.astro";
 import BackgroundBanner from "../components/BackgroundBanner.astro";
 import Share from "../components/Share.astro";
+import { getPhrases } from "../phrases";
 import { getCollection } from "astro:content";
 import { defaultLocale, getLocale } from "astro-i18n-aut";
 
@@ -44,6 +45,8 @@ const sections = entries
     },
     {} as Record<string, typeof entries>,
   );
+
+const phrases = getPhrases(locale);
 ---
 
 <Layout>
@@ -59,14 +62,8 @@ const sections = entries
           <li>OAuth 2.0</li>
           <li>SAML</li>
         </ul>
-        <p>
-          Explore and find clear definitions of key glossaries related to
-          authentication, authorization, and identity management. Work with
-          open-standards like <a href="/openid-connect">OpenID Connect</a>, <a
-            href="/oauth-2.0">OAuth 2.0</a
-          >, and <a href="/saml">SAML</a>.
-        </p>
-        <Share title="Auth Wiki" />
+        <p set:html={phrases.home.description} />
+        <Share title="Auth Wiki" shareText={phrases.general.share} />
       </div>
     </header>
     <div class="content">
@@ -132,11 +129,11 @@ const sections = entries
       line-height: 36px;
       margin: 0;
     }
-    header p a {
+    header p :global(a) {
       color: #f1e8ff;
       text-decoration: none;
     }
-    header p a:hover {
+    header p :global(a:hover) {
       text-decoration: underline 1.5px;
       text-underline-offset: 2px;
     }
@@ -202,7 +199,7 @@ const sections = entries
       header div.background {
         display: none;
       }
-      header p a {
+      header p :global(a) {
         color: #cabeff;
       }
     }

src/phrases/en.ts

@@ -0,0 +1,17 @@
+export const en = Object.freeze({
+  general: {
+    share: 'Share',
+  },
+  site: {
+    description: 'Auth Wiki is a comprehensive collection of articles, tutorials, and resources about authentication and authorization. Learn about OAuth 2.0, OpenID Connect, SAML, and more.',
+  },
+  home: {
+    description: 'Explore and find clear definitions of key glossaries related to authentication, authorization, and identity management. Work with open-standards like <a href="/openid-connect">OpenID Connect</a>, <a href="/oauth-2.0">OAuth 2.0</a>, and <a href="/saml">SAML</a>.'
+  },
+  content: {
+    edit_on_github: 'Edit on GitHub',
+    table_of_contents: 'Table of Contents',
+    see_also: 'See also',
+    resources_and_references: 'Resources and references',
+  }
+});

src/phrases/index.ts

@@ -0,0 +1,16 @@
+export * from './en';
+export * from './zh';
+
+import { en } from './en';
+import { zh } from './zh';
+
+export const getPhrases = (locale: string) => {
+  switch (locale) {
+    case 'zh':
+      return zh;
+    case 'en':
+      return en;
+    default:
+      throw new Error(`Unsupported locale: ${locale}`);
+  }
+}

src/phrases/zh.ts

@@ -0,0 +1,17 @@
+export const zh = Object.freeze({
+  general: {
+    share: '分享',
+  },
+  site: {
+    description: 'Auth Wiki 是一个关于身份验证和授权的全面文章、教程和资源集合。了解 OAuth 2.0、OpenID Connect、SAML 等内容。'
+  },
+  home: {
+    description: '探索并找到与身份验证、授权和身份管理相关的关键术语的清晰定义。使用诸如 <a href="/openid-connect">OpenID Connect</a>、<a href="/oauth-2.0">OAuth 2.0</a> 和 <a href="/saml">SAML</a> 等开放标准。'
+  },
+  content: {
+    edit_on_github: '在 GitHub 上编辑',
+    table_of_contents: '目录',
+    see_also: '另请参阅',
+    resources_and_references: '资源和参考',
+  }
+});