Add Japanese pages & misc

AGENT.md

@@ -58,6 +58,7 @@ This project does not use npm scripts. Instead, use `mise` tasks:
 - 2 space indentation (configured in .editorconfig)
 - Use ExternalLink component for external URLs
 - Responsive design implemented via SCSS breakpoints
+- Add file extensions (e.g., ".ts") when you `import` the local files
 
 ## Important Files
 

astro.config.ts

@@ -4,13 +4,22 @@ import compress from "astro-compress";
 import icon from "astro-icon";
 import mdx from "@astrojs/mdx";
 import tailwindcss from "@tailwindcss/vite";
+import { defaultLocale, locales } from "./src/libs/i18n/configs.ts";
 
 export default defineConfig({
   compressHTML: true,
   site: "https://guildkit.net",
 
   trailingSlash: "always",
 
+  i18n: {
+    locales,
+    defaultLocale,
+    routing: {
+      prefixDefaultLocale: true,
+    },
+  },
+
   integrations: [
     mdx(),
     icon(),

src/assets/scss/base/_mixins.scss

@@ -1,8 +1,6 @@
 @mixin text-decoration(
   $color: var(--text-decoration-color),
   $hoverColor: var(--text-decoration-hover-color),
-  $thickness: 2px,
-  $hoverThickness: 1px,
   $underlineOffset: 4px,
   $hoverUnderlineOffset: 2px
 ) {
@@ -12,13 +10,11 @@
   text-decoration-line: underline;
   text-decoration-style: solid;
   text-decoration-color: $color;
-  text-decoration-thickness: $thickness;
   text-decoration-skip-ink: none;
   text-underline-offset: $underlineOffset;
 
   &:where(:hover, :focus-visible) {
     text-decoration-color: $hoverColor;
-    text-decoration-thickness: $hoverThickness;
     text-underline-offset: $hoverUnderlineOffset;
   }
 }

src/components/Footer.astro

@@ -1,12 +1,37 @@
 ---
+import { useTranslations } from "@libs/i18n/utils.ts";
 import ExternalLink from "./ExternalLink.astro";
 import Logo from "./Logo.astro";
+import LanguagePicker from "./LanguagePicker.astro";
+import { defaultLocale } from "@libs/i18n/configs.ts";
 
 /**
  * Footer Component
  * @description A component that displays the footer of the website
  */
 const currentYear = new Date().getFullYear();
+const locale = Astro.currentLocale ?? Astro.preferredLocale ?? defaultLocale;
+const t = useTranslations(locale);
+
+const footerLinks = [
+  {
+    section: "GuildKit",
+    items: [
+      {
+        text: t("footer.home"),
+        href: `/${ locale }/`,
+      },
+      {
+        text: "GitHub",
+        href: "https://github.com/guildkit/guildkit",
+      },
+      {
+        text: t("footer.demo"),
+        href: "https://demo.guildkit.net",
+      },
+    ],
+  },
+] as const;
 ---
 
 <footer>
@@ -15,38 +40,24 @@ const currentYear = new Date().getFullYear();
   <section class="py-20">
     <h2 class="sr-only">Footer</h2>
     <div class="container flex justify-between gap-8">
-      <div class="flex flex-col gap-4">
-        <h3 class="text-2xl font-bold">GuildKit</h3>
-        <ul class="flex flex-col gap-2">
-          <li><a href="/">Home</a></li>
-          <li><a href="https://github.com/guildkit/guildkit">GitHub</a></li>
-          <li><a href="https://demo.guildkit.net">Demo</a></li>
-        </ul>
-      </div>
-
-      <!--
-      <div class="flex flex-col gap-4">
-        <h3 class="text-2xl font-bold">Developer tools</h3>
-        <ul class="flex flex-col gap-2">
-          <li>
-            <ExternalLink href="https://www.w3.org/WAI/ARIA/apg/">ARIA Authoring Practices</ExternalLink>
-          </li>
-          <li>
-            <ExternalLink href="https://web.dev/articles/focus">Focus Management</ExternalLink>
-          </li>
-          <li>
-            <ExternalLink href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML">Semantic HTML Guide
-            </ExternalLink
-            >
-          </li>
-          <li>
-            <ExternalLink href="https://www.tpgi.com/screen-reader-user-survey-results/">Screen Reader Survey
-            </ExternalLink
-            >
-          </li>
-        </ul>
-      </div>
-      -->
+      {footerLinks.map(({ section, items }) => (
+        <div class="flex flex-col gap-4">
+          <h3 class="text-2xl font-bold">{section}</h3>
+          <ul class="flex flex-col gap-2">
+            {items.map(({ text, href }) => (
+              <li>
+                {
+                  (href.startsWith("/") || href.startsWith(".")) ? (
+                    <a href={href}>{text}</a>
+                  ) : (
+                    <ExternalLink href={href}>{text}</ExternalLink>
+                  )
+                }
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
 
       <div class="flex flex-col gap-4">
         <Logo loading="lazy" />
@@ -59,8 +70,9 @@ const currentYear = new Date().getFullYear();
     </div>
   </section>
   <section class="py-8">
-    <div class="container flex flex-col gap-4 md:flex-row md:justify-between">
-      <p>&copy; {currentYear} <ExternalLink href="https://github.com/phanect">Jumpei Ogawa</ExternalLink></p>
+    <div class="container flex flex-col gap-4 md:flex-row md:justify-between md:items-center">
+      <p>&copy; 2025-{currentYear} <ExternalLink href="https://www.tenkumogroup.com">tenkumo, Inc.</ExternalLink></p>
+      <LanguagePicker />
     </div>
   </section>
 </footer>

src/components/Hero.astro

@@ -1,24 +1,39 @@
 ---
 import { Icon } from "astro-icon/components";
 import { Image } from "astro:assets";
+import { useTranslations } from "@libs/i18n/utils";
 import heroImage from "@assets/images/hero.png";
+import { defaultLocale } from "@libs/i18n/configs.ts";
+
+const lang = Astro.currentLocale ?? Astro.preferredLocale ?? defaultLocale;
+const t = useTranslations(lang);
+const sloganLines = [
+  t("hero.slogan1"),
+  t("hero.slogan2"),
+  t("hero.slogan3"),
+].filter((slogan) => !!slogan); // Remove empty string
 ---
 
 <section class="hero my-24">
   <div class="container">
     <div class="flex items-start gap-16 w-fit">
       <div class="flex flex-col items-center gap-8 md:items-start">
-        <h1 class="text-left text-nowrap text-6xl md:text-left lg:text-8xl">
-          Build your own<br />
-          <span class="text-gradient">Job Portal</span>
+        <h1 class="text-left text-6xl lg:text-8xl text-nowrap flex flex-col gap-y-4">
+          {
+            sloganLines.map((slogan, i) => (
+              <span class:list={i === 1 ? "text-gradient" : ""}>
+                {slogan}
+              </span>
+            ))
+          }
         </h1>
         <div class="flex flex-col items-center gap-3 min-[500px]:flex-row">
           <a class="button has-icon" href="https://github.com/guildkit/guildkit">
             <Icon name="lucide:view" />
-            Watch on GitHub
+            {t("hero.watch-github")}
           </a>
           <div class="font-bold">
-            Coming soon
+            {t("hero.coming-soon")}
           </div>
           <!--
           <a class="button has-icon color-secondary" href="https://accessible-astro.incluud.dev/">

src/components/LanguagePicker.astro

@@ -0,0 +1,29 @@
+---
+import { localeNames } from "@libs/i18n/configs.ts";
+
+/**
+ * LanguagePicker Component
+ * @description A component that displays language selection links
+ */
+---
+
+<div class="language-picker">
+  <ul class="list-none flex gap-3">
+    {
+      Object.entries(localeNames).map(([ locale, langLabel ]) => (
+        <li>
+          <a
+            href={`/${ locale }/`}
+            aria-current={Astro.currentLocale === locale ? "page" : undefined}
+            class:list={[
+              "underline decoration-1 text-sm transition-opacity duration-200 hover:opacity-70",
+              { "font-bold decoration-2": Astro.currentLocale === locale },
+            ]}
+          >
+            {langLabel}
+          </a>
+        </li>
+      ))
+    }
+  </ul>
+</div>

src/layouts/DefaultLayout.astro

@@ -4,6 +4,7 @@ import "../styles/tailwind.css";
 import "../assets/scss/index.scss";
 import Footer from "../components/Footer.astro";
 import Header from "../components/Header.astro";
+import { defaultLocale } from "@libs/i18n/configs.ts";
 
 type Props = {
   /** The title of the page */
@@ -13,9 +14,10 @@ type Props = {
 };
 
 const { title, description } = Astro.props;
+const lang = Astro.currentLocale ?? Astro.preferredLocale ?? defaultLocale;
 ---
 
-<html lang="en" dir="ltr">
+<html lang={lang} dir="ltr">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

src/libs/i18n/configs.ts

@@ -0,0 +1,8 @@
+import type { Locale } from "./utils.ts";
+
+export const locales = [ "en", "ja" ] as const satisfies string[];
+export const localeNames = {
+  en: "English",
+  ja: "日本語",
+} as const satisfies Record<Locale, string>;
+export const defaultLocale = "en" as const satisfies Locale;

src/libs/i18n/translations.ts

@@ -0,0 +1,48 @@
+import type { Translations } from "./utils.ts";
+
+export const translations = {
+  "nav.home": {
+    en: "Home",
+    ja: "ホーム",
+  },
+  "nav.demo": {
+    en: "Demo",
+    ja: "デモ",
+  },
+  "footer.home": {
+    en: "Home",
+    ja: "ホーム",
+  },
+  "footer.demo": {
+    en: "Demo",
+    ja: "デモ",
+  },
+  "skip.link": {
+    en: "Skip to main content",
+    ja: "メインコンテンツにスキップ",
+  },
+  "dark.mode.toggle": {
+    en: "Toggle dark mode",
+    ja: "ダークモードを切り替える",
+  },
+  "hero.slogan1": {
+    en: "Build your own",
+    ja: "ギルドキットで",
+  },
+  "hero.slogan2": {
+    en: "Job Portal",
+    ja: "転職サイト",
+  },
+  "hero.slogan3": {
+    en: "",
+    ja: "を作ろう",
+  },
+  "hero.watch-github": {
+    en: "Watch on GitHub",
+    ja: "GitHub で watch",
+  },
+  "hero.coming-soon": {
+    en: "Coming soon",
+    ja: "近日公開予定",
+  },
+} as const satisfies Translations;

src/libs/i18n/utils.ts

@@ -0,0 +1,13 @@
+import { defaultLocale, locales } from "./configs.ts";
+import { translations } from "./translations.ts";
+
+export type Locale = typeof locales[number];
+export type Translations = Record<string, Record<Locale, string>>;
+
+const isSupportedLocale = (maybeLocaleString: string): maybeLocaleString is Locale =>
+  (locales as unknown as string[]).includes(maybeLocaleString);
+
+export const useTranslations = (locale: string | undefined) => {
+  const _locale = (locale && isSupportedLocale(locale)) ? locale : defaultLocale;
+  return (key: keyof typeof translations): string => translations[key][_locale] || translations[key][defaultLocale];
+};

src/pages/404.astro → src/pages/[locale]/404.astro

@@ -1,5 +1,10 @@
 ---
 import DefaultLayout from "@layouts/DefaultLayout.astro";
+import { locales } from "@libs/i18n/configs.ts";
+
+export function getStaticPaths() {
+  return locales.map((locale) => ({ params: { locale }}));
+}
 ---
 
 <DefaultLayout title="404">

src/pages/[locale]/index.astro

@@ -0,0 +1,13 @@
+---
+import DefaultLayout from "@layouts/DefaultLayout.astro";
+import Hero from "@components/Hero.astro";
+import { locales } from "@libs/i18n/configs.ts";
+
+export function getStaticPaths() {
+  return locales.map((locale) => ({ params: { locale }}));
+}
+---
+
+<DefaultLayout title="Home">
+  <Hero />
+</DefaultLayout>

src/pages/index.astro

@@ -1,8 +1,3 @@
 ---
-import DefaultLayout from "@layouts/DefaultLayout.astro";
-import Hero from "@components/Hero.astro";
+// This file should never be visited.
 ---
-
-<DefaultLayout title="Home">
-  <Hero />
-</DefaultLayout>