Merge pull request #187 from vim-jp/feature/2025-refactor

リファクタリング

Author: staticWagomU

2025/package.json

@@ -17,6 +17,7 @@
 	},
 	"dependencies": {
 		"@astrojs/react": "^4.2.0",
+		"@lucide/astro": "^0.511.0",
 		"@tailwindcss/vite": "^4.1.6",
 		"@types/react": "^19.0.8",
 		"@types/react-dom": "^19.0.3",

2025/pnpm-lock.yaml

@@ -1,11 +1,10 @@
+---
+import Heading from "./Heading.astro";
+---
+
 <section id="about" class="bg-emerald-50 py-10 md:py-16">
   <div class="container mx-auto px-4">
-    <div class="mb-8 text-center">
-      <h2 class="mb-3 text-2xl font-bold text-gray-900 md:text-3xl">
-        VimConf とは
-      </h2>
-      <div class="mx-auto h-1 w-16 bg-emerald-500"></div>
-    </div>
+    <Heading> VimConf とは </Heading>
     <div
       class="mx-auto mb-8 max-w-3xl text-center text-base text-gray-700 md:text-lg"
     >

2025/src/components/AboutVimConf.astro

@@ -0,0 +1,16 @@
+---
+type Props = {
+  class?: string;
+};
+
+const { class: className } = Astro.props;
+---
+
+<div
+  class:list={[
+    className,
+    "rounded-lg border border-emerald-100 bg-card text-card-foreground",
+  ]}
+>
+  <slot />
+</div>

2025/src/components/Card.astro

@@ -1,153 +1,13 @@
+---
+import VimLogo from "./VimLogo.astro";
+import { Mail, XIcon } from "@lucide/astro";
+---
+
 <footer class="bg-gray-900 py-6 text-white sm:py-8 md:py-12">
   <div class="container mx-auto px-4">
     <div class="mb-4 flex flex-col items-center sm:mb-6">
       <div class="mb-2 sm:mb-3">
-        <svg
-          width="40"
-          height="40"
-          viewBox="0 0 294 294"
-          version="1.1"
-          class="mx-auto"
-          aria-label="Vim Logo"
-        >
-          <path
-            fill-rule="evenodd"
-            fill="#000000"
-            fill-opacity="1"
-            d="M 286.99858,145.37446 145.22904,6.4877374 6.3423305,148.18305 145.22904,287.14399 286.99858,145.37446"
-          ></path>
-          <path
-            fill-rule="evenodd"
-            fill="#006b05"
-            fill-opacity="1"
-            d="M 272.81498,145.37446 H 281.31108 L 145.22904,281.45649 V 272.96039 L 272.81498,145.37446"
-          ></path>
-          <path
-            fill-rule="evenodd"
-            fill="#007d17"
-            fill-opacity="1"
-            d="M 12.02983,148.18305 H 20.52592 L 145.22904,272.96039 V 281.45649 L 12.02983,148.18305"
-          ></path>
-          <path
-            fill-rule="evenodd"
-            fill="#66ff99"
-            fill-opacity="1"
-            d="M 145.22904,20.601017 V 12.175237 L 12.02983,148.18305 H 20.52592 L 145.22904,20.601017"
-          ></path>
-          <path
-            fill-rule="evenodd"
-            fill="#45ff02"
-            fill-opacity="1"
-            d="M 145.22904,12.175237 V 20.601017 L 272.81498,145.37446 H 281.31108 L 145.22904,12.175237"
-          ></path>
-          <path
-            fill-rule="evenodd"
-            fill="#009933"
-            fill-opacity="1"
-            d="M 145.22904,272.96039 272.81498,145.37446 145.22904,20.601017 20.52592,148.18305 145.22904,272.96039"
-          ></path>
-          <path
-            fill-rule="evenodd"
-            fill="#000000"
-            fill-opacity="1"
-            d="M 171.72514,48.968207 180.22123,57.534607 121.61576,117.00727 V 57.534607 H 127.30326 L 135.79936,48.968207 V 26.358827 L 127.30326,17.792417 H 32.83842 L 24.34233,26.358827 V 48.968207 L 32.83842,57.534607 H 39.46341 V 250.28071 L 49.8306,258.7768 H 79.135285 L 282.24467,48.968207 V 26.358827 L 273.74858,17.792417 H 181.15873 L 171.72514,26.358827 V 48.968207"
-          ></path>
-          <path
-            fill-rule="evenodd"
-            fill="#ffffff"
-            fill-opacity="1"
-            d="M 35.647,51.847107 29.95951,46.159607 V 29.167417 L 35.647,23.479917 124.49467,23.409607 130.11186,29.167417 124.49467,31.905707 121.61576,29.167417 35.647,43.280707 V 51.847107"
-          ></path>
-          <path
-            fill-rule="evenodd"
-            fill="#ffffff"
-            fill-opacity="1"
-            d="M 52.63919,253.0893 46.01419,247.4018 V 51.776797 L 52.63919,46.159607 V 253.0893"
-          ></path>
-          <path
-            fill-rule="evenodd"
-            fill="#ffffff"
-            fill-opacity="1"
-            d="M 194.40483,51.847107 200.09233,46.159607 V 57.534607 L 105.55717,153.87055 115.99858,131.19086 194.40483,51.847107"
-          ></path>
-          <path
-            fill-rule="evenodd"
-            fill="#7f7f7f"
-            fill-opacity="1"
-            d="M 54.5806,43.351017 52.63919,46.159607 46.01419,51.847107 H 35.647 V 40.472107 L 54.5806,43.351017"
-          ></path>
-          <path
-            fill-rule="evenodd"
-            fill="#7f7f7f"
-            fill-opacity="1"
-            d="M 115.99858,51.847107 V 131.19086 L 105.55717,153.80024 V 46.089297 H 121.61576 L 124.49467,43.280707 121.61576,29.167417 H 130.11186 V 46.159607 L 124.49467,51.847107 H 115.99858"
-          ></path>
-          <path
-            fill-rule="evenodd"
-            fill="#ffffff"
-            fill-opacity="1"
-            d="M 183.02983,51.847107 177.41264,46.159607 V 29.167417 L 183.96733,23.479917 H 270.00639 L 276.63139,29.167417 267.12748,37.663517 183.02983,43.280707 V 51.847107"
-          ></path>
-          <path
-            fill-rule="evenodd"
-            fill="#7f7f7f"
-            fill-opacity="1"
-            d="M 276.63139,46.159607 77.189975,253.0893 H 52.63919 V 244.59321 H 70.639195 L 270.00639,40.472107 267.12748,29.167417 H 276.63139 V 46.159607"
-          ></path>
-          <path
-            fill-rule="evenodd"
-            fill="#7f7f7f"
-            fill-opacity="1"
-            d="M 201.96733,43.351017 200.02201,46.159607 194.40483,51.847107 H 183.02983 V 40.472107 L 201.96733,43.351017"
-          ></path>
-          <path
-            fill-rule="evenodd"
-            fill="#cccccc"
-            fill-opacity="1"
-            d="M 105.55717,153.80024 V 46.089297 H 121.61576 L 124.49467,43.280707 V 31.905707 L 121.61576,29.097107 H 38.4556 L 35.647,31.905707 V 43.280707 L 38.4556,46.089297 H 52.63919 V 244.59321 L 56.31108,247.4018 H 72.510285 L 270.93998,40.472107 V 32.335387 L 268.06108,29.097107 H 185.90873 L 183.02983,31.905707 V 43.351017 L 185.90873,46.159607 H 200.09233 V 57.534607 L 105.55717,153.80024"
-          ></path>
-          <path
-            fill-rule="evenodd"
-            fill="#000000"
-            fill-opacity="1"
-            d="M 157.11186,153.94477 163.73295,148.25727 H 180.72514 L 185.47904,153.94477 179.79154,170.93696 173.23686,176.62446 H 156.24467 L 151.42045,170.93696 157.11186,153.94477"
-          ></path>
-          <path
-            fill-rule="evenodd"
-            fill="#000000"
-            fill-opacity="1"
-            d="M 162.79936,247.47211 179.86186,196.49555 H 174.17436 L 179.86186,179.43305 H 205.27983 L 210.96733,185.12055 H 214.78373 L 220.39701,179.43305 H 239.33451 L 245.02201,185.12055 H 246.7642 L 252.45561,179.43305 H 275.18998 L 282.74858,190.80805 270.36576,231.12836 H 275.98295 L 270.51029,247.47211 H 236.45561 L 249.77201,207.80024 H 241.27983 L 233.42826,230.98383 H 239.04545 L 233.71733,247.47211 H 199.66264 L 212.90873,207.80024 H 204.41264 L 196.49467,231.12836 H 202.18217 L 196.85404,247.47211 H 162.79936"
-          ></path>
-          <path
-            fill-rule="evenodd"
-            fill="#cccccc"
-            fill-opacity="1"
-            d="M 272.59623,185.12055 276.99076,191.38227 263.02201,236.16742 H 268.6392 L 266.7642,241.78461 H 244.08451 L 257.33451,202.11274 H 237.46342 L 226.15873,236.16742 H 231.77201 L 229.90092,241.78461 H 207.22123 L 220.47123,202.11274 H 200.59623 L 189.29545,236.16742 H 194.98295 L 193.03764,241.78461 H 170.35795 L 187.42045,190.80805 H 181.73295 L 183.60404,185.12055 H 204.41264 L 210.10014,190.80805 H 215.71733 L 221.40483,185.12055 H 238.39701 L 244.08451,190.80805 H 249.77201 L 255.46342,185.12055 H 272.59623"
-          ></path>
-          <path
-            fill-rule="evenodd"
-            fill="#000000"
-            fill-opacity="1"
-            d="M 176.98295,179.43305 159.63139,231.05414 H 165.53373 L 159.91654,247.47211 H 125.93217 L 142.92436,196.49555 H 137.23686 Z M 137.23686,196.49555 142.92436,179.43305 H 176.98295"
-          ></path>
-          <path
-            fill-rule="evenodd"
-            fill="#cccccc"
-            fill-opacity="1"
-            d="M 156.17436,241.78461 158.04545,236.16742 H 152.35795 L 169.42045,185.12055 H 145.80717 L 143.86186,190.80805 H 150.48686 L 133.49467,241.78461 H 156.17436"
-          ></path>
-          <path
-            fill-rule="evenodd"
-            fill="#cccccc"
-            fill-opacity="1"
-            d="M 175.03764,168.12836 178.85404,156.75336 176.98295,153.94477 H 165.60404 L 161.86186,156.75336 158.04545,168.12836 159.99076,170.93696 H 171.36576 L 175.03764,168.12836"
-          ></path>
-          <path
-            id="path493"
-            d="M 145.12105,3.3517574 130.76203,18.394747 127.11871,15.264067 31.97365,15.288597 21.72771,25.825397 22.1063,50.075757 32.23102,59.999677 36.93702,59.951037 36.91461,113.38251 3.3009405,148.29105 37.10861,182.45707 37.22627,251.95198 50.00475,261.3461 80.244076,261.25145 97.694441,243.26376 145.12105,290.46913 185.68669,249.88976 196.10872,249.75339 203.50153,230.21172 199.53002,230.13688 206.22808,210.30504 211.02399,210.32736 196.10872,249.75339 233.01409,249.93792 240.42134,228.69336 236.51407,228.62916 242.76924,210.18687 247.10767,210.16289 233.01409,249.93792 272.05781,249.94941 279.40528,228.81333 H 273.70241 L 285.19864,190.54679 276.63139,177.01555 258.69128,177.03834 290.22902,145.26646 240.12959,95.850279 284.62171,50.217357 284.42093,25.243167 274.81653,15.419587 180.88302,15.341177 170.07647,25.156267 170.11178,27.542667 Z"
-            style="fill: none; stroke: rgb(255, 255, 255); stroke-width: 4.72441; stroke-opacity: 1;"
-          ></path>
-        </svg>
+        <VimLogo class="mx-auto h-10 w-10" />
       </div>
       <h2 class="text-lg font-bold sm:text-xl md:text-2xl">
         VimConf 2025 Small
@@ -176,44 +36,15 @@
           class="space-y-1 text-xs text-gray-300 sm:space-y-2 sm:text-sm md:text-base"
         >
           <li class="flex items-center">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              class="lucide lucide-mail mr-2 h-4 w-4 text-emerald-400"
-            >
-              <rect width="20" height="16" x="2" y="4" rx="2"></rect>
-              <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
-            </svg>
+            <Mail class="mr-2 h-4 w-4 text-emerald-400" />
             <a
               href="mailto:[email protected]"
               class="transition-colors hover:text-emerald-400"
               >[email protected]</a
             >
           </li>
           <li class="flex items-center">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              class="lucide lucide-twitter mr-2 h-4 w-4 text-emerald-400"
-            >
-              <path
-                d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"
-              ></path>
-            </svg>
+            <XIcon class="mr-2 h-4 w-4 text-emerald-400" />
             <a
               href="https://twitter.com/vim_jp"
               target="_blank"

2025/src/components/Footer.astro

@@ -1,5 +1,6 @@
 ---
 import VimLogo from "./VimLogo.astro";
+import { Menu, X } from "@lucide/astro";
 ---
 
 <header
@@ -72,38 +73,10 @@ import VimLogo from "./VimLogo.astro";
         >
           <span class="sr-only">Toggle menu</span>
           <span id="menu-close" class="hidden">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              class="lucide lucide-x h-6 w-6"
-              ><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path>
-            </svg>
+            <X class="h-6 w-6" />
           </span>
           <span id="menu-open">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              class="lucide lucide-menu h-6 w-6"
-              ><line x1="4" x2="20" y1="12" y2="12"></line><line
-                x1="4"
-                x2="20"
-                y1="6"
-                y2="6"></line><line x1="4" x2="20" y1="18" y2="18"></line></svg
-            >
+            <Menu class="h-6 w-6" />
           </span>
         </button>
       </div>

2025/src/components/Header.astro

@@ -0,0 +1,24 @@
+---
+type Props = {
+  class?: string;
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+};
+
+const { class: className, level = 2 }: Props = Astro.props;
+---
+
+{
+  level === 2 && (
+    <div class="mb-8 text-center">
+      <h2
+        class:list={[
+          className,
+          "mb-3 text-2xl font-bold text-gray-900 md:text-3xl",
+        ]}
+      >
+        <slot />
+      </h2>
+      <div class="mx-auto h-1 w-16 bg-emerald-500" />
+    </div>
+  )
+}