Merge pull request #14 from kyoto-tech/i18n

I18n

Author: ashryanbeats

astro.config.mjs

@@ -11,6 +11,11 @@ export default defineConfig({
   site: "https://kyoto-tech.github.io",
   integrations: [react(), sitemap(), mdx()],
 
+  i18n: {
+    locales: ["en", "ja"],
+    defaultLocale: "en",
+  },
+
   vite: {
     plugins: [tailwindcss()]
   }

public/flags/GB.svg

@@ -0,0 +1,26 @@
+---
+import { languages } from '../i18n/ui';
+import { getRelativeLocaleUrl } from 'astro:i18n';
+
+const langsToFlags = {
+    en: 'GB.svg',
+    ja: 'JP.svg',
+};
+
+const activeLang = Astro.currentLocale;
+const visibleLangs = Object.entries(languages).filter(([lang]) => lang !== activeLang);
+
+---
+<ul class="absolute top-4 right-4 md:top-6 md:right-6 z-20 flex gap-2">
+    {visibleLangs.map(([lang, label]) => (
+            <li>
+                <a
+                    href={getRelativeLocaleUrl(lang, "/")}
+                    class="block p-2 md:p-3 rounded-lg bg-white/20 backdrop-blur-sm hover:bg-white/30 transition-colors shadow-lg ring-1 ring-white/30"
+                    title={label}
+                >
+                    <img src={`/flags/${langsToFlags[lang]}`} alt={label} width="24" height="16" class="w-6 h-4 md:w-8 md:h-5" />
+                </a>
+            </li>
+    ))}
+</ul>

public/flags/JP.svg

@@ -0,0 +1,114 @@
+export const languages = {
+    en: "English",
+    ja: "Japanese",
+};
+
+export const defaultLang = "en";
+
+export const ui = {
+    en: {
+        "home.header.tagline": "Kyoto Tech Meetup",
+        "home.header.title": "Connect, learn, and build together in Japan's cultural heart",
+        "home.header.subtitle": "Gatherings for developers, designers, researchers, and founders exploring technology in Kyoto.",
+        "home.header.cta": "Join the next meetup",
+
+        "home.whyJoin.label": "Why Join?",
+        "home.whyJoin.title": "Small, intentional gatherings",
+
+        "home.benefit1.title": "Conversation, not conferences",
+        "home.benefit1.description": "Small, high-signal gatherings where people actually talk to each other about what they're building, learning, and struggling with. No stage, no slide decks, no pressure.",
+
+        "home.benefit2.title": "Community",
+        "home.benefit2.description": "Meet a mix of locals and visitors: software engineers, founders, designers, researchers, and remote workers from all over the world. It's a uniquely international, high-signal environment.",
+
+        "home.benefit3.title": "Collaboration",
+        "home.benefit3.description": "Use the meetup to find co-founders, collaborators, study buddies, or just people who care about the same weird tech rabbit holes you do.",
+
+        "home.whatsHappening.label": "What's happening?",
+        "home.whatsHappening.title": "Two core sessions each month",
+
+        "home.activity1.title": "Morning Tech Coffee",
+        "home.activity1.content1": "A relaxed, conversation-first meetup in central Kyoto.",
+        "home.activity1.content2": "We grab coffee, grab a table, and talk about whatever people are building or exploring: AI workflows, indie apps, creative coding, career paths in Japan, or day-to-day life in Kyoto. No agenda, no presentations.",
+        "home.activity1.content3": "It's simple, friendly, and a great way to start the day before work.",
+
+        "home.activity2.title": "Community Hack Day",
+        "home.activity2.content1": "A collaborative working session where we ship projects.",
+        "home.activity2.content2": "Bring an idea, help someone else, or join a team on something that interests you. Projects stay intentionally small and shippable, and everything lives openly in the [Kyoto Tech Meetup GitHub organization](https://github.com/kyoto-tech).",
+        "home.activity2.content3": "It's creative, practical, and a great way to contribute to the local ecosystem.",
+
+        "home.whoComes.label": "Who Comes?",
+        "home.whoComes.title": "People who like to build in public",
+        "home.whoComes.intro": "You'll probably like it here if you are:",
+        "home.whoComes.item1": "A software engineer or researcher working with web, AI, or creative tech",
+        "home.whoComes.item2": "A founder or early-stage startup person",
+        "home.whoComes.item3": "A designer, PM, or DX / DevRel person who likes talking product",
+        "home.whoComes.item4": "A grad student or visiting researcher looking for a local tech community",
+        "home.whoComes.item5": "A remote worker in Kyoto who misses nerding out with coworkers",
+
+        "home.languages.title": "Languages",
+        "home.languages.description": "The meetup is English-friendly with a natural mix of English and Japanese. Come as you are; we'll make space.",
+
+        "home.locations.title": "Locations",
+        "home.locations.description1": "We meet at cafés and shared spaces in central Kyoto.",
+        "home.locations.description2": "Exact time and place are in each event invite and reminder email.",
+
+        "home.footer.copyright": "Kyoto Tech Meetup. Crafted by volunteers in Kyoto.",
+        "home.footer.github": "GitHub",
+        "home.footer.discord": "Discord",
+        "home.footer.meetup": "Meetup",
+    },
+    ja: {
+        "home.header.tagline": "Kyoto Tech Meetup",
+        "home.header.title": "日本の文化都市・京都でつながり、学び、ものづくりをしよう",
+        "home.header.subtitle": "京都でテクノロジーを探求するデベロッパー、デザイナー、研究者、創業者のための集まりです。",
+        "home.header.cta": "次のミートアップに参加する",
+
+        "home.whyJoin.label": "参加する理由",
+        "home.whyJoin.title": "小規模で意図のある集まり",
+
+        "home.benefit1.title": "話すための場、会議ではない",
+        "home.benefit1.description": "小規模で密度の高い集まり。参加者が実際に、自分が作っているもの・学んでいること・悩んでいることについて話せる場所です。ステージもスライドもプレッシャーもありません。",
+
+        "home.benefit2.title": "コミュニティ",
+        "home.benefit2.description": "地元の人も、海外からの訪問者も。ソフトウェアエンジニア、創業者、デザイナー、研究者、リモートワーカーなど、世界中から来た人たちと出会えます。国際色豊かで、高い情報密度の環境です。",
+
+        "home.benefit3.title": "コラボレーション",
+        "home.benefit3.description": "共同創業者、協力者、勉強仲間を見つけたり、あなたと同じ“ちょっと変わった”技術の話題に興味を持つ仲間とつながることができます。",
+
+        "home.whatsHappening.label": "今やっていること",
+        "home.whatsHappening.title": "月に2回のコアセッション",
+
+        "home.activity1.title": "Morning Tech Coffee",
+        "home.activity1.content1": "京都中心部で行う、リラックスした「会話主体」のミートアップです。",
+        "home.activity1.content2": "コーヒーを買って席につき、みんなが作っているもの・試していることについて気軽に話します。AIのワークフロー、個人開発、クリエイティブコーディング、日本でのキャリア、京都の日常など、テーマは自由。アジェンダもプレゼンもありません。",
+        "home.activity1.content3": "シンプルでフレンドリー。仕事前に一日を気持ちよく始められます。",
+
+        "home.activity2.title": "Community Hack Day",
+        "home.activity2.content1": "みんなでプロジェクトを“実際に”仕上げるコラボレーションデイです。",
+        "home.activity2.content2": "アイデアを持ってくるのもよし、誰かを手伝うのもよし、興味のあるチームに参加するのもOK。プロジェクトは意図的に小さく、すぐに形にできる範囲で進めます。すべてはオープンに、[Kyoto Tech Meetup GitHub Organization](https://github.com/kyoto-tech) に公開されます。",
+        "home.activity2.content3": "クリエイティブで実践的。京都のテックコミュニティに貢献する絶好の場です。",
+
+        "home.whoComes.label": "参加者",
+        "home.whoComes.title": "“作っているところ”をオープンにする人たち",
+        "home.whoComes.intro": "こんな人なら、きっと楽しめます：",
+
+        "home.whoComes.item1": "Web・AI・クリエイティブ系の技術に取り組むエンジニアや研究者",
+        "home.whoComes.item2": "創業者やアーリーステージのスタートアップ関係者",
+        "home.whoComes.item3": "プロダクトの話が好きなデザイナー、PM、DX／DevRel の方",
+        "home.whoComes.item4": "京都に滞在中の大学院生や研究者で、地元のTechコミュニティを探している人",
+        "home.whoComes.item5": "京都に住むリモートワーカーで、同僚と“技術の雑談”を恋しく思っている人",
+
+        "home.languages.title": "対応言語",
+        "home.languages.description": "英語で気軽に参加できます。英語と日本語が自然に混ざるミートアップなので、そのままの自分でどうぞ。みんなで場をつくります。",
+
+        "home.locations.title": "開催場所",
+        "home.locations.description1": "京都中心部のカフェやシェアスペースで集まっています。",
+        "home.locations.description2": "具体的な場所と時間は、各イベントの案内メールやリマインダーでお知らせします。",
+
+        "home.footer.copyright": "Kyoto Tech Meetup — 京都在住のボランティアによるコミュニティ運営。",
+        "home.footer.github": "GitHub",
+        "home.footer.discord": "Discord",
+        "home.footer.meetup": "Meetup"
+    },
+} as const;

src/components/LanguagePicker.astro

@@ -0,0 +1,7 @@
+import { ui, defaultLang } from "./ui";
+
+export function useTranslations(lang: keyof typeof ui) {
+    return function t(key: keyof typeof ui[typeof defaultLang]) {
+        return ui[lang][key] || ui[defaultLang][key];
+    }
+}

src/i18n/ui.ts

@@ -1,9 +1,10 @@
 ---
 import "../styles/global.css";
+const activeLang = Astro.currentLocale;
 ---
 
 <!doctype html>
-<html lang="en">
+<html lang={activeLang}>
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width" />