個人スポンサーの追加

2025/astro.config.mjs

@@ -1,5 +1,6 @@
 import react from '@astrojs/react';
 import tailwindcss from '@tailwindcss/vite';
+import dsv from '@rollup/plugin-dsv';
 
 // @ts-check
 import { defineConfig } from 'astro/config';
@@ -19,6 +20,7 @@ export default defineConfig({
 		plugins: [
 			Macros(),
 			tailwindcss(),
+      dsv(),
 		],
 	},
 

2025/package.json

@@ -33,6 +33,7 @@
 	"devDependencies": {
 		"@antfu/ni": "^25.0.0",
 		"@astrojs/ts-plugin": "^1.10.4",
+		"@rollup/plugin-dsv": "^3.0.5",
 		"@ryoppippi/eslint-config": "npm:@jsr/ryoppippi__eslint-config@^0.0.25",
 		"eslint": "^9.28.0",
 		"eslint-plugin-astro": "^1.3.1",

2025/src/components/Sponsors/Individual.astro

@@ -0,0 +1,46 @@
+---
+import Card from "../Card.astro";
+
+type Props = {
+  name: string;
+  src: string;
+  comment: string;
+};
+
+const { name, src, comment } = Astro.props;
+
+let iconUrl = "";
+try {
+  const module = await import(
+    `../../assets/individual-sponsors/${src && src !== "" ? src : "no-icon"}.png?url`
+  );
+  iconUrl = module.default;
+} catch (e) {
+  console.error(`Icon not found: ${src}`);
+}
+---
+
+<Card class="border-pink-100">
+  <div class="flex flex-col items-start space-x-4 p-4 md:flex-row">
+    <div
+      class="mb-1 flex h-12 w-12 shrink-0 overflow-hidden rounded-full bg-white shadow-sm md:h-16 md:w-16"
+    >
+      <img
+        alt={name}
+        src={iconUrl}
+        loading="lazy"
+        class="aspect-square h-full w-full object-cover"
+      />
+    </div>
+    <div class="flex shrink-1 flex-col items-start gap-1">
+      <span class="text-center text-xs font-semibold md:text-sm">{name}</span>
+      {
+        comment && comment !== "" && (
+          <span class="text-xs font-medium text-gray-500 md:text-sm">
+            {comment}
+          </span>
+        )
+      }
+    </div>
+  </div>
+</Card>

2025/src/components/Sponsors/Individuals.astro

@@ -0,0 +1,49 @@
+---
+import Card from "../Card.astro";
+import Individual from "./Individual.astro";
+import rawCsv from "../../data/individual_sponsors.csv";
+import { CsvSchema } from "../../types/schema";
+import { ExternalLink, Heart } from "@lucide/astro";
+
+const csv = CsvSchema.parse(rawCsv);
+---
+
+<div class="container mx-auto mb-8 px-4">
+  <h3 class="mb-6 text-center text-xl font-semibold md:text-2xl">
+    個人スポンサー
+  </h3>
+  <div class="mb-10 grid grid-cols-3 gap-4 md:grid-cols-3 lg:grid-cols-4">
+    {
+      csv
+        .sort((a, b) => Number(a.order_number) - Number(b.order_number))
+        .map((row) => (
+          <Individual
+            name={row.name}
+            src={row.order_number}
+            comment={row.comment}
+          />
+        ))
+    }
+  </div>
+  <Card class="flex flex-col rounded-lg border border-pink-200 bg-pink-50 p-6">
+    <Heart class="mx-auto mb-4 h-12 w-12 text-pink-500" />
+    <p class="mx-auto font-bold">個人スポンサーになりませんか？</p>
+    <p class="mx-auto mb-4 text-gray-700">
+      VimConf 2025 Smallの成功を一緒に作り上げましょう！
+    </p>
+    <span class="mx-auto">
+      <a
+        href="https://peatix.com/event/4468783/view"
+        target="_blank"
+        rel="noopener"
+      >
+        <button
+          class="inline-flex h-10 items-center justify-center gap-2 rounded-md bg-pink-500 bg-gradient-to-r px-4 py-2 text-sm font-medium whitespace-nowrap text-primary-foreground ring-offset-background transition-colors hover:bg-pink-600 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"
+        >
+          個人スポンサーになる
+          <ExternalLink class="ml-2 h-4 w-4" />
+        </button>
+      </a>
+    </span>
+  </Card>
+</div>

2025/src/components/Sponsors/index.astro

@@ -1,5 +1,6 @@
 ---
 import Card from "../Card.astro";
+import Individuals from "./Individuals.astro";
 import Heading from "../Heading.astro";
 import {
   Heart,
@@ -102,4 +103,5 @@ import {
       </Card>
     </div>
   </div>
+  <Individuals />
 </section>