Merge pull request #51 from kyoto-tech/housekeeping

addressing checker issues

Author: ashryanbeats

AGENTS.md

@@ -0,0 +1,40 @@
+# AGENTS.md
+
+## Purpose
+This repo is the Astro-powered marketing site for the Kyoto Tech Meetup community.
+
+## Key References (Read First)
+- `README.md` for setup, scripts, and contribution workflow.
+- i18n strings and locale wiring:
+  - `src/i18n/ui.ts` (string tables + default language)
+  - `src/i18n/utils.ts` (translation helper + fallback behavior)
+  - `astro.config.mjs` (Astro i18n locales/default)
+  - `src/pages/index.astro` and `src/pages/ja/index.astro` (locale routing)
+  - `src/components/LanguagePicker.astro` and `src/layouts/Layout.astro` (language switch + meta)
+- RSS/community feed JSON:
+  - `src/data/member-feeds.json` (source list)
+  - `src/data/composite-feed.json` (generated output consumed by UI)
+  - `scripts/fetch-feeds.mjs` (RSS aggregator that writes the JSON above)
+
+## Quick Start
+- Install: `npm install`
+- Dev server: `npm run dev` (http://localhost:4321)
+- Checks: `npm run check`
+- Build: `npm run build`
+- Preview: `npm run preview`
+
+## i18n Rules
+- Add/modify strings in `src/i18n/ui.ts` under both `en` and `ja`.
+- Keep keys aligned across locales; `useTranslations` falls back to `defaultLang`.
+- Prefer `useTranslations(lang)` in Astro/React components instead of inline strings.
+- New locale pages should mirror the base page structure (`src/pages/ja/...`).
+
+## Editing Guidelines
+- Keep Tailwind usage consistent with existing patterns.
+- Prefer editing existing Astro/React components over adding new ones.
+- Do not edit `dist/` (build output).
+- If adding dependencies, update both `package.json` and `package-lock.json`.
+
+## Data Notes
+- `src/data/composite-feed.json` is generated; update via `scripts/fetch-feeds.mjs`.
+- `src/data/member-feeds.json` is the source-of-truth for aggregated RSS feeds.

src/components/Hero.astro

@@ -0,0 +1,41 @@
+---
+import LanguagePicker from "./LanguagePicker.astro";
+
+type Props = {
+  tagline: string;
+  title: string;
+  subtitle: string;
+};
+
+const { tagline, title, subtitle } = Astro.props as Props;
+const heroImageSrc =
+  "https://images.unsplash.com/photo-1570463723985-41c39db0343d?q=80&w=1335&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D?auto=format&fit=crop&w=2000&q=80";
+---
+
+<header
+  class="relative isolate flex min-h-[70vh] items-center px-6 py-20 text-white sm:py-28 md:px-16"
+>
+  <div class="absolute inset-0 -z-10">
+    <img
+      src={heroImageSrc}
+      alt=""
+      loading="lazy"
+      fetchpriority="high"
+      decoding="async"
+      class="h-full w-full object-cover"
+    />
+    <div class="absolute inset-0 bg-black/40"></div>
+  </div>
+  <div class="mx-auto max-w-3xl text-center md:ml-[5%] md:text-left">
+    <p class="text-xs font-semibold uppercase tracking-[0.3em] text-white/80">
+      {tagline}
+    </p>
+    <h1
+      class="mt-4 text-4xl font-semibold leading-tight text-white md:text-5xl"
+    >
+      {title}
+    </h1>
+    <p class="mt-4 text-lg text-white/90">{subtitle}</p>
+  </div>
+  <LanguagePicker />
+</header>

src/layouts/Layout.astro

@@ -12,6 +12,13 @@ const hrefEn = `${SITE_URL}/`;
 const hrefJa = `${SITE_URL}/ja/`;
 const ogLocale = activeLang === "ja" ? "ja_JP" : "en_US";
 const ogLocaleAlternate = activeLang === "ja" ? "en_US" : "ja_JP";
+const gtmId = "GTM-5SB4S7NJ";
+const gtmScript = `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({"gtm.start":
+new Date().getTime(),event:"gtm.js"});var f=d.getElementsByTagName(s)[0],
+j=d.createElement(s),dl=l!="dataLayer"?"&l="+l:"";j.async=true;j.src=
+"https://www.googletagmanager.com/gtm.js?id="+i+dl;f.parentNode.insertBefore(j,f);
+})(window,document,"script","dataLayer","${gtmId}");`;
+const gtmNoscriptSrc = `https://www.googletagmanager.com/ns.html?id=${gtmId}`;
 const orgDescription =
 	activeLang === "ja"
 		? "京都でテクノロジーを探求するデベロッパー、デザイナー、研究者、ファウンダーのための集まり。"
@@ -139,11 +146,7 @@ const ldData = {
 		<meta name="generator" content={Astro.generator} />
 
 		<!-- Google Tag Manager -->
-		<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-		new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-		j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-		'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-		})(window,document,'script','dataLayer','GTM-5SB4S7NJ');</script>
+		<script is:inline set:html={gtmScript}></script>
 		<!-- End Google Tag Manager -->
 
 		<meta
@@ -182,8 +185,15 @@ const ldData = {
 	<body>
 
 		<!-- Google Tag Manager (noscript) -->
-		<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5SB4S7NJ"
-		height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+		<noscript>
+			<iframe
+				src={gtmNoscriptSrc}
+				height="0"
+				width="0"
+				style="display:none;visibility:hidden"
+				title="Google Tag Manager"
+			></iframe>
+		</noscript>
 		<!-- End Google Tag Manager (noscript) -->
 
 		<a class="skip-link" href="#main-content">{t("a11y.skipToMain")}</a>

src/pages/index.astro

@@ -1,13 +1,14 @@
 ---
+/* eslint-disable max-lines */
 import Layout from "../layouts/Layout.astro";
+import Hero from "../components/Hero.astro";
 import WhyJoin from "../components/WhyJoin.astro";
 import WhatWeDo from "../components/WhatWeDo.astro";
 import Calendar from "../components/Calendar.astro";
 import Footer from "../components/Footer.astro";
 import { FaGithub, FaDiscord, FaMeetup, FaEnvelope } from "react-icons/fa";
 import { FaRegClock, FaRegCalendarAlt } from "react-icons/fa";
 import { useTranslations } from "../i18n/utils";
-import LanguagePicker from "../components/LanguagePicker.astro";
 import memberFeeds from "../data/member-feeds.json";
 import compositeFeed from "../data/composite-feed.json";
 import eventLocations from "../data/event-locations.json";
@@ -196,35 +197,11 @@ const nextUpdate = compositeFeed?.generatedAt
 ---
 
 <Layout>
-  <header
-    class="relative isolate flex min-h-[70vh] items-center px-6 py-20 text-white sm:py-28 md:px-16"
-  >
-    <div class="absolute inset-0 -z-10">
-      <img
-        src="https://images.unsplash.com/photo-1570463723985-41c39db0343d?q=80&w=1335&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D?auto=format&fit=crop&w=2000&q=80"
-        alt=""
-        loading="lazy"
-        fetchpriority="high"
-        decoding="async"
-        class="h-full w-full object-cover"
-      />
-      <div class="absolute inset-0 bg-black/40"></div>
-    </div>
-    <div class="mx-auto max-w-3xl text-center md:ml-[5%] md:text-left">
-      <p class="text-xs font-semibold uppercase tracking-[0.3em] text-white/80">
-        {t("home.header.tagline")}
-      </p>
-      <h1
-        class="mt-4 text-4xl font-semibold leading-tight text-white md:text-5xl"
-      >
-        {t("home.header.title")}
-      </h1>
-      <p class="mt-4 text-lg text-white/90">
-        {t("home.header.subtitle")}
-      </p>
-    </div>
-    <LanguagePicker />
-  </header>
+  <Hero
+    tagline={t("home.header.tagline")}
+    title={t("home.header.title")}
+    subtitle={t("home.header.subtitle")}
+  />
 
   <main id="main-content" class="space-y-0">
     <section id="quick-links" class="bg-white/90 px-6 py-12 md:px-12">
@@ -348,7 +325,6 @@ const nextUpdate = compositeFeed?.generatedAt
               feedsWithItems.map((feed) => (
                 <article
                   class="flex h-full flex-col overflow-visible rounded-2xl border border-slate-200/70 bg-white/95 p-5 shadow-lg shadow-stone-900/5 ring-1 ring-white/80"
-                  key={feed.feedUrl}
                 >
                   <div class="flex flex-wrap items-center gap-3">
                     <h4 class="text-lg font-semibold text-slate-900">
@@ -384,7 +360,6 @@ const nextUpdate = compositeFeed?.generatedAt
                         {feed.items.map((item) => (
                           <div
                             class="group relative z-0 min-w-[280px] max-w-md flex-1 rounded-xl border border-slate-100 bg-slate-50/70 p-3 pb-10 transition hover:border-(--accent) hover:bg-white hover:z-10 after:clear-both after:block after:content-['']"
-                            key={item.id}
                           >
                             {item.image ? (
                               <div class="float-right ml-3 mb-2 h-24 w-28 overflow-hidden rounded-lg border border-slate-100 bg-slate-100">