chore: merge main and add 404 page

Author: ubugeeei

README.md

@@ -1,6 +1,6 @@
 # Vue Fes Japan Speakers
 
-歴代のVue Fes Japanのスピーカーを一覧できるサイトです（パネルディスカッションやイベントスピーカーは含めておりません）。
+歴代のVue Fes Japanのスピーカーを一覧できるサイトです（イベントスピーカーは含めておりません）。
 
 ![Vue Fes Japan Speakersのサイトスクリーンショット](./public/og-image.png)
 

app/app.ts

@@ -5,6 +5,7 @@ import { YEARS } from "../types";
 import { getSpeakerNames, getSpeakerTalks } from "./composables/speaker";
 import { isValidYear } from "./utils/years";
 import HomeRoute from "./routes/HomeRoute.vue";
+import NotFoundRoute from "./routes/NotFoundRoute.vue";
 import SpeakerRoute from "./routes/SpeakerRoute.vue";
 import YearRoute from "./routes/YearRoute.vue";
 
@@ -78,6 +79,14 @@ export default defineApp({
       },
       render: { strategy: "ssg" },
     }),
+    defineRoute({
+      path: "/404.html",
+      component: NotFoundRoute,
+      head: {
+        title: "Page Not Found",
+      },
+      render: { strategy: "ssg" },
+    }),
     defineRoute({
       path: "/speakers/:name",
       component: SpeakerRoute,

app/components/AppFooter.vue

@@ -6,10 +6,10 @@ const { t } = useVfjsI18n();
 
 <template>
   <footer
-    class="border-t border-[var(--rule)] flex flex-wrap gap-x-[24px] gap-y-[8px] items-baseline justify-between px-[var(--pad-x)] py-[20px] text-[12px] text-[var(--ink-3)] [font-family:var(--font-mono)]"
+    class="border-t border-[var(--rule)] flex flex-wrap gap-x-[24px] gap-y-[8px] items-baseline justify-between px-[var(--pad-x)] py-[20px] text-[12px] [font-family:var(--font-mono)]"
   >
     <div>
-      <a href="/" class="text-inherit underline hover:no-underline hover:text-[var(--ink-3)]">
+      <a href="/" class="text-inherit underline hover:no-underline hover:text-[var(--ink)]">
         {{ t.back_top }}
       </a>
     </div>
@@ -18,10 +18,11 @@ const { t } = useVfjsI18n();
         href="https://github.com/yamanoku/vuefes-japan-speakers"
         target="_blank"
         rel="noopener"
-        class="text-inherit underline hover:no-underline hover:text-[var(--ink-3)]"
+        class="text-inherit no-underline hover:underline hover:text-[var(--ink)]"
       >
         GitHub
       </a>
+      <span class="text-[10px] ml-[4px]">({{ t.external }})</span>
     </div>
   </footer>
 </template>

app/components/AppMasthead.vue

@@ -13,22 +13,22 @@ const { t } = useVfjsI18n();
   <section
     class="border-b border-[var(--rule)] pt-[clamp(48px,8vw,120px)] pb-[clamp(40px,6vw,72px)] px-[var(--pad-x)]"
   >
-    <div class="grid grid-cols-12 gap-6 items-end">
+    <div class="grid grid-cols-12 gap-6">
       <div
         class="col-span-9 flex items-center gap-[clamp(18px,2.4vw,34px)] max-[800px]:col-span-12 max-[560px]:flex-col max-[560px]:items-start"
       >
         <AppLogoMark
           class="w-[clamp(42px,5vw,72px)] h-auto text-[var(--ink)] mb-[0.08em] max-[560px]:mb-0"
         />
         <h1
-          class="m-0 [font-family:var(--font-display)] font-[500] text-[clamp(38px,6.2vw,104px)] leading-[0.96] text-[var(--ink)] word-break-keep-all"
+          class="m-0 [font-family:var(--font-display)] font-[500] text-[clamp(38px,6.2vw,104px)] leading-[0.96] text-[var(--ink)] break-keep"
         >
           <span>Vue Fes Japan Speakers</span>
         </h1>
       </div>
       <aside
+        class="grid items-center col-span-3 [font-family:var(--font-mono)] text-[20px] leading-[1.7] tracking-[0.06em] border-l border-[var(--rule)] pl-[16px] max-[800px]:col-span-12 max-[800px]:border-l-0 max-[800px]:pl-0 max-[800px]:border-t max-[800px]:pt-[16px]"
         aria-label="Archive scope"
-        class="col-span-3 [font-family:var(--font-mono)] text-[12px] leading-[1.7] tracking-[0.06em] text-[var(--ink-3)] border-l border-[var(--rule-soft)] pl-[16px] max-[800px]:col-span-12 max-[800px]:border-l-0 max-[800px]:pl-0 max-[800px]:border-t max-[800px]:pt-[16px]"
       >
         <div>
           <b class="text-[var(--ink)] font-[500] not-italic">

app/components/ChronicleView.vue

@@ -97,7 +97,7 @@ const grouped = computed(() => {
             :id="`year-${year}`"
           >
             <span
-              class="[font-family:var(--font-display)] font-[500] text-[clamp(72px,8vw,120px)] leading-[0.85] tracking-[-0.04em] tabular-nums text-[var(--ink)]"
+              class="[font-family:var(--font-display)] font-[500] text-[clamp(72px,8vw,120px)] leading-[0.85] tabular-nums text-[var(--ink)]"
               aria-hidden="true"
             >
               {{ year }}
@@ -117,7 +117,7 @@ const grouped = computed(() => {
           </div>
 
           <!-- Rows -->
-          <ul class="list-none p-0 m-0 border-t border-[var(--rule-soft)]">
+          <ol class="list-none p-0 m-0 border-t border-[var(--rule-soft)]">
             <li
               v-for="(s, i) in arr"
               :key="`${year}-${i}`"
@@ -130,7 +130,7 @@ const grouped = computed(() => {
                 <span>{{ String(i + 1).padStart(2, "0") }}</span>
               </div>
               <div
-                class="grid grid-cols-[minmax(0,300px)_minmax(0,1fr)] gap-[clamp(16px,2vw,32px)] items-baseline max-[700px]:grid-cols-1 max-[700px]:gap-[6px]"
+                class="grid grid-cols-[minmax(0,200px)_minmax(0,1fr)] gap-[clamp(16px,2vw,32px)] items-baseline max-[700px]:grid-cols-1 max-[700px]:gap-[6px]"
               >
                 <!-- Speaker names -->
                 <div
@@ -159,20 +159,19 @@ const grouped = computed(() => {
                     :href="s.url"
                     target="_blank"
                     rel="noopener noreferrer"
-                    class="text-[var(--ink-2)] no-underline hover:text-[var(--ink)]"
+                    class="text-[var(--ink-2)] no-underline group hover:text-[var(--ink)]"
                   >
                     <span
                       v-if="s.format === 'panel'"
-                      class="relative top-[-1px] inline-flex items-center self-center align-middle [font-family:var(--font-mono)] text-[10px] uppercase tracking-[0.06em] border border-[var(--accent)] text-[var(--accent)] px-[5px] py-[1px] leading-[1.15] mr-[8px]"
+                      class="relative top-[-1px] inline-flex items-center self-center align-middle [font-family:var(--font-mono)] text-[10px] uppercase tracking-[0.06em] border border-[var(--ink)] text-[var(--ink)] px-[5px] py-[1px] leading-[1.15] mr-[8px]"
                     >
                       {{ t.session_format_panel }}
                     </span>
-                    <span class="hover:underline">{{ s.title }}</span>
+                    <span class="group-hover:underline">{{ s.title }}</span>
                     <span
-                      class="[font-family:var(--font-mono)] text-[12px] text-[var(--ink-2)] ml-[4px]"
-                      :aria-label="t.external"
+                      class="[font-family:var(--font-mono)] text-[10px] text-[var(--ink-2)] ml-[4px]"
                     >
-                      ↗
+                      ({{ t.external }})
                     </span>
                   </a>
                   <span
@@ -184,7 +183,7 @@ const grouped = computed(() => {
                 </div>
               </div>
             </li>
-          </ul>
+          </ol>
         </li>
       </ol>
     </section>

app/components/DirectoryView.vue

@@ -109,24 +109,24 @@ function toggleRow(name: string) {
         <button
           class="text-[12px] tracking-[0.06em] uppercase px-[10px] py-[5px] border cursor-pointer whitespace-nowrap"
           :class="
-            sort === 'name'
+            sort === 'appearances'
               ? 'bg-[var(--ink)] text-[var(--paper)] border-[var(--ink)]'
               : 'border-[var(--rule-soft)] text-[var(--ink-3)] hover:text-[var(--ink)] hover:border-[var(--ink)]'
           "
-          @click="sort = 'name'"
+          @click="sort = 'appearances'"
         >
-          Name A→Z
+          Appearances ↓
         </button>
         <button
           class="text-[12px] tracking-[0.06em] uppercase px-[10px] py-[5px] border cursor-pointer whitespace-nowrap"
           :class="
-            sort === 'appearances'
+            sort === 'name'
               ? 'bg-[var(--ink)] text-[var(--paper)] border-[var(--ink)]'
               : 'border-[var(--rule-soft)] text-[var(--ink-3)] hover:text-[var(--ink)] hover:border-[var(--ink)]'
           "
-          @click="sort = 'appearances'"
+          @click="sort = 'name'"
         >
-          Appearances ↓
+          Name A→Z
         </button>
         <button
           class="text-[12px] tracking-[0.06em] uppercase px-[10px] py-[5px] border cursor-pointer whitespace-nowrap"
@@ -236,8 +236,7 @@ function toggleRow(name: string) {
               <li
                 v-for="(talk, k) in rec.talks"
                 :key="k"
-                class="grid gap-[16px] items-baseline py-[6px] border-t border-[var(--rule-softer)]"
-                style="grid-template-columns: 56px minmax(0, 1fr) auto"
+                class="grid grid-cols-[30px_1fr] gap-[16px] items-baseline py-[6px] border-t border-[var(--rule-softer)]"
                 :class="k === 0 ? 'border-t-0' : ''"
               >
                 <a
@@ -246,41 +245,42 @@ function toggleRow(name: string) {
                 >
                   {{ talk.year }}
                 </a>
-                <a
-                  class="text-[14px] text-[var(--ink)] pb-[1px] leading-[1.45] no-underline"
-                  :href="talk.url"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <span
-                    v-if="talk.format === 'panel'"
-                    class="relative top-[-1px] inline-flex items-center self-center align-middle [font-family:var(--font-mono)] text-[10px] uppercase tracking-[0.06em] border border-[var(--accent)] text-[var(--accent)] px-[5px] py-[1px] leading-[1.15] mr-[8px]"
+                <div class="flex flex-col gap-y-[8px]">
+                  <a
+                    class="text-[14px] text-[var(--ink)] pb-[1px] leading-[1.45] no-underline group"
+                    :href="talk.url"
+                    target="_blank"
+                    rel="noopener noreferrer"
                   >
-                    {{ t.session_format_panel }}
-                  </span>
-                  <span class="hover:underline">{{ talk.title || t.tbd }}</span>
+                    <span
+                      v-if="talk.format === 'panel'"
+                      class="relative top-[-1px] inline-flex items-center self-center align-middle [font-family:var(--font-mono)] text-[10px] uppercase tracking-[0.06em] border border-[var(--ink)] text-[var(--ink)] px-[5px] py-[1px] leading-[1.15] mr-[8px]"
+                    >
+                      {{ t.session_format_panel }}
+                    </span>
+                    <span class="group-hover:underline">{{ talk.title || t.tbd }}</span>
+                    <span
+                      class="[font-family:var(--font-mono)] text-[10px] text-[var(--ink-2)] ml-[4px]"
+                    >
+                      ({{ t.external }})
+                    </span>
+                  </a>
                   <span
-                    class="[font-family:var(--font-mono)] text-[12px] text-[var(--ink-2)] ml-[4px]"
-                    :aria-label="t.external"
+                    v-if="talk.coSpeakers.length > 0"
+                    class="text-[12px] [font-family:var(--font-mono)] text-[var(--ink-3)]"
                   >
-                    ↗
+                    w/
+                    <template v-for="(cn, ci) in talk.coSpeakers" :key="cn">
+                      <template v-if="ci > 0">,</template>
+                      <a
+                        class="text-[var(--ink)] border-b border-[var(--rule-soft)] pb-[1px] no-underline hover:border-[var(--ink)]"
+                        :href="`/speakers/${encodeURIComponent(cn)}`"
+                      >
+                        {{ cn }}
+                      </a>
+                    </template>
                   </span>
-                </a>
-                <span
-                  v-if="talk.coSpeakers.length > 0"
-                  class="text-[12px] [font-family:var(--font-mono)] text-[var(--ink-3)]"
-                >
-                  w/
-                  <template v-for="(cn, ci) in talk.coSpeakers" :key="cn">
-                    <template v-if="ci > 0">,</template>
-                    <a
-                      class="text-[var(--ink)] border-b border-[var(--rule-soft)] pb-[1px] no-underline hover:border-[var(--ink)]"
-                      :href="`/speakers/${encodeURIComponent(cn)}`"
-                    >
-                      {{ cn }}
-                    </a>
-                  </template>
-                </span>
+                </div>
               </li>
             </ol>
           </div>

app/composables/useVfjsI18n.ts

@@ -27,6 +27,9 @@ export interface VfjsTranslations {
   back_top: string;
   official_site: string;
   related_talks: string;
+  all_speakers: string;
+  not_found_title: string;
+  not_found_description: string;
   year_total_talks: (n: number) => string;
   appearance_count: (n: number) => string;
 }
@@ -53,13 +56,16 @@ const translations: Record<"ja" | "en", VfjsTranslations> = {
     color_scheme_system: "システム",
     empty: "該当するスピーカーが見つかりません。",
     tbd: "タイトル未定",
-    external: "外部リンク",
+    external: "外部サイトへ移動",
     session_format_panel: "パネル",
     speaker_profile: "スピーカー",
     years_appeared: "登壇年",
     back_top: "TOPページに戻る",
     official_site: "公式サイト",
     related_talks: "発表一覧",
+    all_speakers: "発表者一覧",
+    not_found_title: "ページが見つかりません",
+    not_found_description: "指定されたページは存在しないか、移動した可能性があります。",
     year_total_talks: (n: number) => `全 ${n} 発表`,
     appearance_count: (n: number) => `${n}回登壇`,
   },
@@ -84,13 +90,16 @@ const translations: Record<"ja" | "en", VfjsTranslations> = {
     color_scheme_system: "System",
     empty: "No speakers match the current filters.",
     tbd: "TBD",
-    external: "External",
+    external: "External Site",
     session_format_panel: "Panel",
     speaker_profile: "Speaker",
     years_appeared: "Appeared in",
     back_top: "Back to top page",
     official_site: "Official site",
     related_talks: "Talks",
+    all_speakers: "Speakers",
+    not_found_title: "Page Not Found",
+    not_found_description: "The page you requested does not exist or may have moved.",
     year_total_talks: (n: number) => `${n} talks total`,
     appearance_count: (n: number) => `${n} appearance${n > 1 ? "s" : ""}`,
   },

app/islands/HomePageIsland.vue

@@ -41,7 +41,11 @@ const stats = computed(() => {
   for (const speaker of props.allSpeakers) {
     speaker.name.forEach((name) => speakerSet.add(name));
   }
-  return { speakers: speakerSet.size, talks: props.allSpeakers.length, years: YEARS.length };
+  return {
+    speakers: speakerSet.size,
+    talks: props.allSpeakers.length,
+    years: YEARS.length,
+  };
 });
 </script>