セッション一覧画面を作成

2025/src/components/Header.astro

@@ -18,41 +18,53 @@ import { Menu, X } from "@lucide/astro";
       </div>
       <nav class="hidden items-center space-x-6 md:flex">
         <a
-          href="#keynote"
+          href="/2025/ja#cfp"
+          class="text-sm font-medium transition-colors hover:text-emerald-600"
+        >
+          プロポーザルの募集
+        </a>
+        <a
+          href="/2025/ja#keynote"
           class="text-sm font-medium transition-colors hover:text-emerald-600"
         >
           基調講演
         </a>
         <a
-          href="#venue"
+          href="/2025/ja#venue"
           class="text-sm font-medium transition-colors hover:text-emerald-600"
         >
           会場
         </a>
         <a
-          href="#about"
+          href="/2025/ja#about"
           class="text-sm font-medium transition-colors hover:text-emerald-600"
         >
           概要
         </a>
         <a
-          href="#schedule"
+          href="/2025/ja#schedule"
           class="text-sm font-medium transition-colors hover:text-emerald-600"
         >
           スケジュール
         </a>
         <a
-          href="#sponsors"
+          href="/2025/ja#sponsors"
           class="text-sm font-medium transition-colors hover:text-emerald-600"
         >
           スポンサー
         </a>
         <a
-          href="#staff"
+          href="/2025/ja#staff"
           class="text-sm font-medium transition-colors hover:text-emerald-600"
         >
           スタッフ
         </a>
+        <a
+          href="/2025/sessions"
+          class="text-sm font-medium transition-colors hover:text-emerald-600"
+        >
+          セッション一覧
+        </a>
         <button
           disabled
           class="inline-flex h-auto items-center justify-center gap-2 rounded-md px-2 py-1 text-sm font-medium whitespace-nowrap ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
@@ -89,29 +101,38 @@ import { Menu, X } from "@lucide/astro";
     <div class="container mx-auto px-4 py-4">
       <nav class="flex flex-col space-y-4">
         <a
-          href="#keynote"
+          href="/2025/ja#cfp"
+          class="py-2 text-sm font-medium transition-colors hover:text-emerald-600"
+          >プロポーザルの募集</a
+        >
+        <a
+          href="/2025/ja#keynote"
           class="py-2 text-sm font-medium transition-colors hover:text-emerald-600"
           >基調講演</a
         ><a
-          href="#venue"
+          href="/2025/ja#venue"
           class="py-2 text-sm font-medium transition-colors hover:text-emerald-600"
           >会場</a
         ><a
-          href="#about"
+          href="/2025/ja#about"
           class="py-2 text-sm font-medium transition-colors hover:text-emerald-600"
           >概要</a
         ><a
-          href="#schedule"
+          href="/2025/ja#schedule"
           class="py-2 text-sm font-medium transition-colors hover:text-emerald-600"
           >スケジュール</a
         ><a
-          href="#sponsors"
+          href="/2025/ja#sponsors"
           class="py-2 text-sm font-medium transition-colors hover:text-emerald-600"
           >スポンサー</a
         ><a
-          href="#staff"
+          href="/2025/ja#staff"
           class="py-2 text-sm font-medium transition-colors hover:text-emerald-600"
           >スタッフ</a
+        ><a
+          href="/2025/sessions"
+          class="py-2 text-sm font-medium transition-colors hover:text-emerald-600"
+          >セッション一覧</a
         >
       </nav>
     </div>

2025/src/components/Sessions/Session.astro

@@ -0,0 +1,64 @@
+---
+import { User, FileText } from "@lucide/astro";
+import Card from "../Card.astro";
+
+type Props = {
+  session_id: string;
+  speaker_name: string;
+  title: string;
+  abstract: string;
+  self_introduction?: string;
+  image_url?: string;
+};
+
+const { speaker_name, title, abstract, self_introduction, image_url } =
+  Astro.props;
+---
+
+<Card class="mb-5 p-8">
+  <div class="flex flex-col items-center gap-6 md:flex-row md:items-start">
+    <div class="flex-shrink-0">
+      <span
+        class="relative flex h-24 w-24 shrink-0 overflow-hidden rounded-full md:h-32 md:w-32"
+      >
+        <img
+          class="aspect-square h-full w-full object-cover text-center"
+          alt={speaker_name}
+          src={image_url ||
+            "https://via.placeholder.com/150?text=" +
+              encodeURIComponent(speaker_name.charAt(0))}
+        /></span
+      >
+    </div>
+    <div class="flex-1 text-center md:text-left">
+      <div class="mb-3">
+        <h3 class="mb-2 text-2xl font-bold text-gray-900 md:text-3xl">
+          {speaker_name}
+        </h3>
+      </div>
+      <div class="mb-4">
+        <p class="text-lg text-gray-600 italic">{title}</p>
+      </div>
+      <div>
+        <div class="mb-3 flex items-center justify-center md:justify-start">
+          <FileText class="mr-2 h-5 w-5 text-emerald-600" />
+          <span class="font-semibold text-gray-800">概要</span>
+        </div>
+        <p class="leading-relaxed text-gray-700" style="white-space: pre-line;">
+          {abstract}
+        </p>
+      </div>
+      {
+        self_introduction && (
+          <div>
+            <div class="mb-3 flex items-center">
+              <User class="mr-2 h-5 w-5 text-emerald-600" />
+              <span class="font-semibold text-gray-800">スピーカー紹介</span>
+            </div>
+            <p class="leading-relaxed text-gray-600">{self_introduction}</p>
+          </div>
+        )
+      }
+    </div>
+  </div>
+</Card>

2025/src/components/Sessions/index.astro

@@ -0,0 +1,30 @@
+---
+import Heading from "../Heading.astro";
+import Session from "./Session.astro";
+import { getCollection } from "astro:content";
+import { getSessionImageUrl } from "./index";
+
+const sessions = await getCollection("sessions");
+
+// 各セッションに画像URLを追加
+const sessionsWithImages = await Promise.all(
+  sessions.map(async (session) => ({
+    ...session,
+    data: {
+      ...session.data,
+      image_url: await getSessionImageUrl(session.data.session_id),
+    },
+  })),
+);
+---
+
+<section id="sessions" class="bg-white py-10 md:py-16">
+  <div class="container mx-auto px-4">
+    <Heading>セッション一覧</Heading>
+    {
+      sessionsWithImages
+        .sort((a, b) => a.data.start_at.getTime() - b.data.start_at.getTime())
+        .map((session) => <Session {...session.data} />)
+    }
+  </div>
+</section>

2025/src/components/Sessions/index.ts

@@ -0,0 +1,22 @@
+import type { ImageMetadata } from "astro";
+
+const images = import.meta.glob<{ default: ImageMetadata }>(
+  "/src/assets/sessions/*.{png,jpg}",
+);
+
+export async function getSessionImageUrl(sessionId: string): Promise<string> {
+  const customExtensions: Record<string, string> = {
+    atusy: "jpg",
+    teppei22: "jpg",
+  };
+
+  const suffix = customExtensions[sessionId] ?? "png";
+
+  const imagePath = `/src/assets/sessions/${sessionId}.${suffix}`;
+  if (images[imagePath]) {
+    const imageModule = await images[imagePath]();
+    return imageModule.default.src;
+  }
+
+  return "";
+}

2025/src/content/config.ts

@@ -15,7 +15,24 @@ const sponsors = defineCollection({
   }),
 });
 
+const sessions = defineCollection({
+  loader: glob({
+    pattern: "*.toml",
+    base: "./src/content/sessions",
+  }),
+  schema: z.object({
+    session_id: z.string(),
+    start_at: z.coerce.date(),
+    end_at: z.coerce.date(),
+    speaker_name: z.string(),
+    title: z.string(),
+    abstract: z.string(),
+    self_introduction: z.string().optional(),
+  }),
+});
+
 // コレクションのエクスポート
 export const collections = {
   sponsors,
+  sessions,
 };

2025/src/content/sessions/atusy.toml

@@ -0,0 +1,28 @@
+session_id = "atusy"
+start_at = 2025-11-02T14:20:00+09:00
+end_at = 2025-11-02T14:50:00+09:00
+speaker_name = "atusy"
+title = 'Beyond Syntax Highlighting: Unlocking the Power of Tree-sitter in Neovim'
+abstract = '''
+Neovim users get benefits of beautiful syntax highlighting with Tree-sitter.
+However, Tree-sitter can do much more than just syntax highlighting.
+Once you understand it is actually an incremental parsing library, you may come up with various ways to enhance your text edit experience.
+
+I will introduce some of my favorite use cases and their implementations (tree-sitter parser, query, and Neovim plugin).
+Audience can try out these examples themselves, or use them as a starting point for their own creative ideas.
+
+Here are some of the use cases I will cover:
+
+* Select and edit syntactically meaningful regions
+    * select a specific kind of nodes as text objects (e.g. function, class, etc.)
+    * select a node that includes the cursor position with a help of easymotion-like labelling
+* Add extra highights to your code
+    * change the background color of code blocks in markdown files
+    * emphasize URL paths in literal string
+* and more
+    * syntax-aware code folding
+    * context-aware key mappings based on the node under the cursor
+
+Also, I would like to introduce `treesitter-ls`, a tree-sittere-powered language server.
+Although this is currently a work in progress, it is worth introducing as it potentially provides the power of tree-sitter to non-Neovim users.
+'''

2025/src/content/sessions/hrsh7th.toml

@@ -0,0 +1,15 @@
+session_id = "hrsh7th"
+start_at = 2025-11-02T10:00:00+09:00
+end_at = 2025-11-02T10:50:00+09:00
+speaker_name = "hrsh7th"
+title = 'nvim-cmp retrospective: Exploring Completion and Facing FOSS Challenges'
+abstract = '''
+Over 15 years with Vim, I transitioned from user to OSS contributor and plugin creator.
+This keynote reflects on my nvim-cmp journey, sharing insights into text completion across Vim, VSCode, and LSP.
+Meanwhile, I'll candidly discuss FOSS challenges—maintenance limits and burnout—touching on my current perspectives.
+'''
+self_introduction = '''
+hrsh7th is a Web frontend engineer based in Japan.
+With around 15 years of experience using (n)vim, he's the author of popular plugins like vim-vsnip and nvim-cmp.
+As a Web frontend engineer, he has a strong interest in enhancing editor-based workflows and user experience for daily development.
+'''

2025/src/content/sessions/kawarimidoll.toml

@@ -0,0 +1,20 @@
+session_id = "kawarimidoll"
+start_at = 2025-11-02T13:15:00+09:00
+end_at = 2025-11-02T13:35:00+09:00
+speaker_name = "kawarimidoll"
+title = 'Getting Started with *your own* Neovim feat. mini.nvim'
+abstract = '''
+It's exciting to start using Neovim with the thought, "Using Neovim is cool!"
+Many beginners want to improve their Neovim. They often start by copying settings recommended on websites or YouTube.
+That's fine and can be useful, but it's still using someone else's Neovim as long as you're just following recommendations.
+To truly make Neovim your own, you need to understand what you can achieve by configuring it yourself.
+Many beginners simply don't know what's possible through configuration. That's why I'll introduce some of those possibilities.
+In this talk, I'll show you an overview of Neovim features and settings using a nice plugin, mini.nvim.
+This plugin is a collection of many useful modules that you can mix and match according to your needs.
+By exploring these modules, you'll gain insight into what Neovim can do and what features you might need.
+More importantly, you'll learn to think about what you want to achieve, how to figure out the best way to do it, and how to write the right settings for that.
+This process helps you develop your engineering skills.
+You'll also experience the joy of growing your configuration. It's not just useful, it's really fun!
+Let's get started with your own Neovim, featuring mini.nvim!
+Disclaimer: I'm not the author of mini.nvim. I'm a big fan of it and use it in my Neovim configuration.
+'''

2025/src/content/sessions/kuuote.toml

@@ -0,0 +1,8 @@
+session_id = "kuuote"
+start_at = 2025-11-02T14:50:00+09:00
+end_at = 2025-11-02T15:20:00+09:00
+speaker_name = "kuuote"
+title = 'Assists text writing anywhere'
+abstract = '''
+In recent years, the rise of generative AI has only heightened the importance of writing skills. In this presentation, I'll explain how Vim's rich editing features make it particularly suitable for writing, and how customization can enhance your writing experience. I'll demonstrate this with practical examples from my own workflow, then share my method for quickly exporting text outside of Vim.
+'''

2025/src/content/sessions/mikoto2000.toml

@@ -0,0 +1,10 @@
+session_id = 'mikoto2000'
+start_at = 2025-11-02T15:35:00+09:00
+end_at = 2025-11-02T15:55:00+09:00
+speaker_name = 'mikoto2000'
+title = 'Cloud-Native, but Still Want to Use Vim: Running Vim Editor in Eclipse Che IDE'
+abstract = '''
+Vimmers are the kind of people who want to use Vim anytime, anywhere — and that doesn’t change even in a cloud-native world.
+I’ve been working on a way to run the Vim editor inside Eclipse Che, a cloud-native IDE.
+It’s not fully production-ready yet, but in this talk, I’d like to share how it works and discuss the challenges I’ve faced.
+'''

2025/src/content/sessions/rbtnn.toml

@@ -0,0 +1,14 @@
+session_id = "rbtnn"
+start_at = 2025-11-02T11:00:00+09:00
+end_at = 2025-11-02T11:50:00+09:00
+speaker_name = "rbtnn"
+title = 'WIP'
+abstract = '''
+WIP
+'''
+self_introduction = '''
+rbtnn is what you might call an SIer in Japan. These days, his main role is team management, so he doesn't get to write code as often.
+That said, he worked across the stack throughout his career—from server-side and client-side development to embedded systems—making him a so-called full-stack engineer.
+Vim has been his primary text editor for nearly 15 years, and he uses it to write code in almost any programming language.
+He's contributed to Vim itself several times in the past, and this time, He'd like to introduce a feature he implemented called TabPanel, and share the background and motivation behind adding it.
+'''

2025/src/content/sessions/satoru_kitaguchi_dot.toml

@@ -0,0 +1,18 @@
+session_id = "satoru_kitaguchi_dot"
+start_at = 2025-11-02T15:55:00+09:00
+end_at = 2025-11-02T16:15:00+09:00
+speaker_name = "Satoru Kitaguchi"
+title = 'Designing Repeatable Edits: The Architecture of . in Vim'
+abstract = '''
+Vim’s dot (.) command is deceptively simple—it repeats the last change.
+But beneath this minimalism lies one of Vim’s most powerful ideas: editing as a repeatable, structured action.
+Dot doesn’t just replay—it expresses Vim’s philosophy of reusable, composable editing.
+
+In this session, we’ll explore how dot works under the hood: how edits are recorded and replayed, and why some actions are repeatable while others are not.
+We'll then move into practical techniques for designing dot-friendly edits using operators, motions, and text objects.
+
+We’ll also look at why many plugin actions don’t support dot repeat by default, and how tools like repeat.vim and repeat#set() help restore consistency.
+By understanding how to align plugin behavior with Vim’s model, we can extend dot’s elegance even in custom workflows.
+
+Ultimately, this talk is not just about using . more effectively—it’s about writing edits and workflows that align with it, unlocking a deeper level of speed, clarity, and composability in your Vim usage.
+'''

2025/src/content/sessions/satoru_kitaguchi_register.toml

@@ -0,0 +1,22 @@
+session_id = "satoru_kitaguchi_register"
+start_at = 2025-11-02T16:15:00+09:00
+end_at = 2025-11-02T16:35:00+09:00
+speaker_name = "Satoru Kitaguchi"
+title = "You Know They're Not Just Clipboards — Now Learn What They Really Are"
+abstract = '''
+You already know Vim registers aren’t just clipboards.
+But when asked:
+“Why didn’t it go into ""0""?”,
+“What’s rotating in ""1–9""?”,
+or “Why did the thing I just copied disappear?” —
+can you explain why?
+
+Vim’s register system is both powerful and subtle.
+It tracks what gets saved, when it's overwritten, and which register each operation touches—often silently.
+Understanding this system is key to avoiding accidental loss and enabling intentional, reusable editing workflows.
+
+In this talk, we’ll break down how each register works: ""0"", ""1–9"", ""a–z"", ""="", ""_"", ""*"" and others.
+You’ll learn practical techniques for designing safer edits, preserving state, and even injecting dynamic content from expressions or shell commands.
+
+This session will help you stop guessing—and start thinking in registers.
+'''