Merge branch 'main' into 98/update-access-page

package.json

@@ -6,7 +6,7 @@
   "type": "module",
   "scripts": {
     "dev": "bunx --bun astro dev",
-    "build": "bunx --bun astro check && bunx --bun astro build",
+    "build": "bunx --bun astro check && bunx --bun astro build && bunx --bun pagefind --site dist",
     "sync": "bunx --bun astro sync",
     "preview": "bunx wrangler pages dev ./dist",
     "check": "bun biome check .",
@@ -19,11 +19,13 @@
     "@astrojs/react": "3.6.0",
     "@astrojs/sitemap": "3.1.6",
     "@astrojs/tailwind": "5.1.0",
+    "@pagefind/default-ui": "1.1.1",
     "astro": "4.11.6",
     "astro-google-fonts-optimizer": "0.2.2",
     "astro-seo": "0.8.4",
     "lucide-astro": "0.452.0",
     "lucide-react": "0.453.0",
+    "pagefind": "1.1.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "schema-dts": "1.1.2",

src/components/ColoredHeading.astro

@@ -38,7 +38,7 @@ const { class: className, color = 'mauve', as: As, text, ...props } = Astro.prop
   <span
     data-text={text}
     class:list={[
-      "block relative text-stroke-mauve-1 text-stroke-[8px] paint-sfm drop-shadow-bump shadow-mauve-6 whitespace-nowrap", // HACK: WebKit で縁がboxの大きさで切り取られてしまうため、boxを広げて負のmarginを設定
+      "block relative text-stroke-mauve-1 text-stroke-[8px] paint-sfm drop-shadow-bump shadow-mauve-6", // HACK: WebKit で縁がboxの大きさで切り取られてしまうため、boxを広げて負のmarginを設定
       "before:content-[attr(data-text)/''] before:absolute before:inset-0 before:text-stroke-[0px] before:text-transparent before:bg-gradient-to-b before:bg-clip-text before:pointer-events-none",
       color === "mauve" &&
         "text-mauve-11 before:from-mauve-11 before:to-mauve-12",

src/components/HeroSlideShow.astro

@@ -21,14 +21,14 @@ const { class: className, ...props } = Astro.props;
 
 <div
   class:list={[
-    "swiper flex justify-center items-center overflow-hidden",
+    "light swiper flex justify-center items-center overflow-hidden",
     className,
   ]}
   style={{ overflow: "visible" }}
   {...props}
 >
-  <div class="swiper-wrapper overflow-visible">
-    <figure class="swiper-slide relative overflow-visible">
+  <div class="overflow-visible swiper-wrapper">
+    <figure class="relative overflow-visible swiper-slide">
       <Image
         aria-hidden
         src={Cover}
@@ -47,7 +47,7 @@ const { class: className, ...props } = Astro.props;
         alt="第33回茨香祭パンフレットの表紙"
       />
       <figcaption
-        class="absolute w-full bottom-0 left-0 right-0 flex flex-col justify-end items-center p-2 gap-4 text-center font-Dela text-orange-10 text-stroke-mauve-1 text-stroke-8 paint-sfm tracking-widest drop-shadow-bump shadow-mauve-6"
+        class="absolute bottom-0 left-0 right-0 flex flex-col items-center justify-end w-full gap-4 p-2 tracking-widest text-center font-Dela text-orange-10 text-stroke-mauve-1 text-stroke-8 paint-sfm drop-shadow-bump shadow-mauve-6"
       >
         <span class="text-2xl">茨城工業高等専門学校<br />第33回 茨香祭</span>
         <span>2024年10月26日(土) ~ 10月27日(日)</span>
@@ -75,7 +75,7 @@ const { class: className, ...props } = Astro.props;
         alt="第33回茨香祭のポスター"
       />
       <figcaption
-        class="absolute w-full bottom-0 left-0 right-0 flex flex-col justify-end items-center p-2 gap-4 text-center font-Dela text-pink-10 text-stroke-mauve-1 text-stroke-8 paint-sfm tracking-widest drop-shadow-bump shadow-mauve-6"
+        class="absolute bottom-0 left-0 right-0 flex flex-col items-center justify-end w-full gap-4 p-2 tracking-widest text-center font-Dela text-pink-10 text-stroke-mauve-1 text-stroke-8 paint-sfm drop-shadow-bump shadow-mauve-6"
       >
         <span class="text-2xl">茨城工業高等専門学校<br />第33回 茨香祭</span>
         <span>2024年10月26日(土) ~ 10月27日(日)</span>

src/components/KawaiiContainer.astro

@@ -50,7 +50,7 @@ const KAWAII_TEXT =
     <p
       set:html={new Array(lines).fill(KAWAII_TEXT).join("<br />")}
       class:list={[
-        "absolute mx-auto text-2xl text-center text-transparent origin-center select-none font-Dela whitespace-nowrap mix-blend-color-burn top-16 -rotate-12 text-stroke-2",
+        "absolute mx-auto leading-relaxed text-2xl text-center text-transparent origin-center select-none font-Dela whitespace-nowrap mix-blend-color-burn top-16 -rotate-12 text-stroke-2",
         color === "mauve" && "text-stroke-mauve-9",
         color === "pink" && "text-stroke-pink-9",
         color === "yellow" && "text-stroke-yellow-11",

src/components/footer.astro

@@ -60,27 +60,28 @@ const { class: className, ...props } = Astro.props;
 
 <footer
   class:list={[
+    "light",
     "p-8 relative flex flex-col gap-6 rounded-t-3xl overflow-hidden bg-mauve-12 md:rounded-3xl",
     className,
   ]}
   {...props}
 >
-  <div class="grid grid-cols-5 h-6 bg-mauve-12 absolute top-0 left-0 right-0">
+  <div class="absolute top-0 left-0 right-0 grid h-6 grid-cols-5 bg-mauve-12">
     <div class="blur-[32px] bg-pink-9"></div>
     <div class="blur-[32px] bg-yellow-9"></div>
     <div class="blur-[32px] bg-violet-9"></div>
     <div class="blur-[32px] bg-orange-9"></div>
     <div class="blur-[32px] bg-blue-9"></div>
   </div>
-  <div class="grid grid-cols-5 h-2 absolute top-0 left-0 right-0">
+  <div class="absolute top-0 left-0 right-0 grid h-2 grid-cols-5">
     <div class="bg-pink-9"></div>
     <div class="bg-yellow-9"></div>
     <div class="bg-violet-9"></div>
     <div class="bg-orange-9"></div>
     <div class="bg-blue-9"></div>
   </div>
   <nav
-    class="relative z-10 flex flex-col items-stretch gap-6 self-stretch xl:flex-row"
+    class="relative z-10 flex flex-col items-stretch self-stretch gap-6 xl:flex-row"
   >
     <div class="flex flex-col items-center">
       <a href="/">
@@ -92,19 +93,19 @@ const { class: className, ...props } = Astro.props;
           class="w-full max-h-full md:max-h-32 aspect-[13/8]"
         />
       </a>
-      <p class="text-xs text-mauve-9 text-center break-keep whitespace-pre">
+      <p class="text-xs text-center whitespace-pre text-mauve-9 break-keep">
         &copy;2024 Shikosai Exective Committee<wbr /> All Rights Reserved.
       </p>
     </div>
 
-    <ul class="grow grid grid-cols-2 gap-6 lg:grid-cols-4">
+    <ul class="grid grid-cols-2 gap-6 grow lg:grid-cols-4">
       <li>
         <h2 class="text-sm text-mauve-4 font-Dela">公式SNS</h2>
         <ul>
           <li>
             <a
               href="https://twitter.com/shikosai33/"
-              class="text-sm text-mauve-4 font-Dela underline"
+              class="text-sm underline text-mauve-4 font-Dela"
               target="_blank"
               rel="noopener noreferrer"
             >
@@ -114,7 +115,7 @@ const { class: className, ...props } = Astro.props;
           <li>
             <a
               href="https://instagram.com/shikosai33/"
-              class="text-sm text-mauve-4 font-Dela underline"
+              class="text-sm underline text-mauve-4 font-Dela"
               target="_blank"
               rel="noopener noreferrer"
             >
@@ -127,18 +128,18 @@ const { class: className, ...props } = Astro.props;
       <li>
         <h2 class="text-sm text-mauve-4 font-Dela">サークル</h2>
         <a
-          class="text-sm text-mauve-4 font-Dela underline"
+          class="text-sm underline text-mauve-4 font-Dela"
           href="/circle#class"
         >
           クラス
         </a>
         <br />
-        <a class="text-sm text-mauve-4 font-Dela underline" href="/circle#club">
+        <a class="text-sm underline text-mauve-4 font-Dela" href="/circle#club">
           部活動・同好会
         </a>
         <br />
         <a
-          class="text-sm text-mauve-4 font-Dela underline"
+          class="text-sm underline text-mauve-4 font-Dela"
           href="/circle#others"
         >
           その他
@@ -148,21 +149,21 @@ const { class: className, ...props } = Astro.props;
       <li>
         <h2 class="text-sm text-mauve-4 font-Dela">イベント</h2>
         <a
-          class="text-sm text-mauve-4 font-Dela underline"
+          class="text-sm underline text-mauve-4 font-Dela"
           href="/event#indoor-1"
         >
           屋内ステージ
         </a>
         <br />
         <a
-          class="text-sm text-mauve-4 font-Dela underline"
+          class="text-sm underline text-mauve-4 font-Dela"
           href="/event#outdoor-1"
         >
           屋外ステージ
         </a>
         <br />
         <a
-          class="text-sm text-mauve-4 font-Dela underline"
+          class="text-sm underline text-mauve-4 font-Dela"
           href="/event#others"
         >
           その他
@@ -171,26 +172,26 @@ const { class: className, ...props } = Astro.props;
 
       <li>
         <h2 class="text-sm text-mauve-4 font-Dela">その他のページ</h2>
-        <a class="text-sm text-mauve-4 font-Dela underline" href="/">
+        <a class="text-sm underline text-mauve-4 font-Dela" href="/">
           スタッフ
         </a>
         <br />
         <a class="text-sm text-mauve-4 font-Dela underline" href="/access">
           アクセス
         </a>
         <br />
-        <a class="text-sm text-mauve-4 font-Dela underline" href="/">
+        <a class="text-sm underline text-mauve-4 font-Dela" href="/">
           お問い合わせ
         </a>
         <br />
-        <a class="text-sm text-mauve-4 font-Dela underline" href="/">
+        <a class="text-sm underline text-mauve-4 font-Dela" href="/">
           来場者アンケート
         </a>
       </li>
     </ul>
   </nav>
 
-  <hr class="h-px bg-mauve-11 border-0" />
+  <hr class="h-px border-0 bg-mauve-11" />
 
   <div class="text-center">
     <h2 class="text-sm text-center text-mauve-4 font-Dela">協賛</h2>
@@ -212,15 +213,15 @@ const { class: className, ...props } = Astro.props;
     }
   </div>
 
-  <div class="w-full flex flex-col lg:flex-row lg:justify-between">
+  <div class="flex flex-col w-full lg:flex-row lg:justify-between">
     <a
       href="https://www.ibaraki-ct.ac.jp/"
       target="_blank"
       rel="noopener noreferrer"
     >
       <Image src={Niticlogo} alt="第33回茨香祭のロゴ" class="w-auto" />
     </a>
-    <p class="text-mauve-4 lg:text-end pt-6 lg:pt-0">
+    <p class="pt-6 text-mauve-4 lg:text-end lg:pt-0">
       〒312-8508 茨城県 ひたちなか市 中根866<br />TEL 029-272-5201
     </p>
   </div>

src/components/header.astro

@@ -2,6 +2,7 @@
 import '../styles/global.css';
 import { Image } from 'astro:assets';
 import type { HTMLAttributes } from 'astro/types';
+import { Search } from 'lucide-astro';
 import Shikosai33 from '../assets/shikosai33_logo.png';
 
 /**
@@ -25,7 +26,7 @@ const { class: className, ...props } = Astro.props;
   ]}
   {...props}
 >
-  <nav class="grid grid-cols-1 grid-rows-1 w-full h-full">
+  <nav class="grid w-full h-full grid-cols-1 grid-rows-1">
     <ul class="grid grid-cols-5">
       <li
         class="flex justify-center items-center border-b-8 border-pink-9 pt-1.5"
@@ -40,7 +41,7 @@ const { class: className, ...props } = Astro.props;
       >
         <a href="/circle">
           <h2
-            class="bg-gradient-to-b from-yellow-12 to-yellow-11 bg-clip-text text-transparent"
+            class="text-transparent bg-gradient-to-b from-yellow-12 to-yellow-11 bg-clip-text"
           >
             サークル
           </h2>
@@ -52,7 +53,7 @@ const { class: className, ...props } = Astro.props;
       >
         <a href="/event">
           <h2
-            class="bg-gradient-to-b from-violet-12 to-violet-11 bg-clip-text text-transparent"
+            class="text-transparent bg-gradient-to-b from-violet-12 to-violet-11 bg-clip-text"
           >
             イベント
           </h2>
@@ -64,22 +65,23 @@ const { class: className, ...props } = Astro.props;
       >
         <a href="/staff">
           <h2
-            class="bg-gradient-to-b from-orange-12 to-orange-11 bg-clip-text text-transparent"
+            class="text-transparent bg-gradient-to-b from-orange-12 to-orange-11 bg-clip-text"
           >
             スタッフ
           </h2>
         </a>
       </li>
 
       <li
-        class="flex justify-center items-center border-b-8 border-blue-9 pt-1.5"
+        class="flex flex-row justify-end items-center border-b-8 border-blue-9 pt-1.5 pr-2"
       >
-        <a href="/access">
-          <h2
-            class="bg-gradient-to-b from-blue-12 to-blue-11 bg-clip-text text-transparent"
-          >
-            アクセス
-          </h2>
+
+        <a
+          href="/search"
+          aria-label="検索"
+          class="shrink flex justify-center items-center p-2 rounded-xl text-mauve-11 hover:text-mauve-12 hover:bg-mauve-3 active:bg-mauve-4 transition-colors"
+        >
+          <h2><Search /></h2>
         </a>
       </li>
     </ul>

src/content/events/d-c.md

@@ -8,7 +8,7 @@ image: ./_images/d_c.jpg
 name: D.C（ダ・カーポ）
 
 # イベントの開催者の名前 (団体の名前) - バンドの場合は省略
-# organizer-name: 
+# organizer-name:
 
 # イベントの概要 (バンドからのコメント)
 summary: 皆さん初めましてダ・カーポです。特段話すことはないんですけどいいメンバーが集まってるんで聞きに来てくれると嬉しいです 練習量はかなり確保している方なので楽しみにしといてください
@@ -28,5 +28,5 @@ ends-at: 2024-10-27T09:55:00+0900
 # - https://instagram.com/example
 
 # Youtubeの動画もしくはライブ配信のURL
-# youtube: https://www.youtube.com/watch?v=
+youtube: https://www.youtube.com/watch?v=Rt_cShWQBeo&list=PLdpcRcn46OU2jYBH1avFa-3bWXt__99Sj&index=5
 ---

src/content/events/gasaire-plankton.md

@@ -24,10 +24,10 @@ ends-at: 2024-10-26T14:05:00+0900
 
 # X, Instagramなどの外部リンク
 urls:
-- https://x.com/gasaireplankton
+  - https://x.com/gasaireplankton
 # - https://x.com/example
 # - https://instagram.com/example
 
 # Youtubeの動画もしくはライブ配信のURL
-# youtube: https://www.youtube.com/watch?v=
+youtube: https://www.youtube.com/watch?v=NQAN_C7bmC8&list=PLdpcRcn46OU2jYBH1avFa-3bWXt__99Sj&index=7
 ---

src/content/events/i-scream.md

@@ -8,7 +8,7 @@ image: ./_images/i-scream.png
 name: 愛SCREAM
 
 # イベントの開催者の名前 (団体の名前) - バンドの場合は省略
-# organizer-name: 
+# organizer-name:
 
 # イベントの概要 (バンドからのコメント)
 summary: 「愛scream」— 闇から生まれし音の化身。絶望と狂気を解き放ち、世界を終焉へと誘う破滅の旋律を聴け。 by田中隼生
@@ -28,5 +28,5 @@ ends-at: 2024-10-26T18:30:00+0900
 # - https://instagram.com/example
 
 # Youtubeの動画もしくはライブ配信のURL
-# youtube: https://www.youtube.com/watch?v=
+youtube: https://www.youtube.com/watch?v=FrNoBf7SOQg&list=PLdpcRcn46OU2jYBH1avFa-3bWXt__99Sj&index=6
 ---

src/content/events/mmmmic.md

@@ -8,7 +8,7 @@ image: ./_images/mmmmic.JPG
 name: mmmmic
 
 # イベントの開催者の名前 (団体の名前) - バンドの場合は省略
-# organizer-name: 
+# organizer-name:
 
 # イベントの概要 (バンドからのコメント)
 summary: mmmmicと書いてミミックと読みます。メンバー増えたのでm増やしました。頑張ります。
@@ -28,5 +28,5 @@ ends-at: 2024-10-27T12:55:00+0900
 # - https://instagram.com/example
 
 # Youtubeの動画もしくはライブ配信のURL
-# youtube: https://www.youtube.com/watch?v=
+youtube: https://www.youtube.com/watch?v=AfBbxpEcUW4&list=PLdpcRcn46OU2jYBH1avFa-3bWXt__99Sj&index=3
 ---

src/content/events/plushie.md

@@ -8,7 +8,7 @@ image: ./_images/plushie.png
 name: PLUSHIE
 
 # イベントの開催者の名前 (団体の名前) - バンドの場合は省略
-# organizer-name: 
+# organizer-name:
 
 # イベントの概要 (バンドからのコメント)
 summary: ダンス部OGを中心としたメンバーによる、数年間の全てをかけた最高クオリティを保証するダンスパフォーマンスです 現地に来れない方にも楽しんでいただけるステージの生配信も準備中です！詳細は公式SNSへ @official_plushie
@@ -24,9 +24,9 @@ ends-at: 2024-10-27T14:25:00+0900
 
 # X, Instagramなどの外部リンク
 urls:
-# - https://x.com/example
-- https://instagram.com/official_plushie
+  # - https://x.com/example
+  - https://instagram.com/official_plushie
 
 # Youtubeの動画もしくはライブ配信のURL
-# youtube: https://www.youtube.com/watch?v=
+youtube: https://www.youtube.com/watch?v=3DAWdjaUGEk&list=PLdpcRcn46OU2jYBH1avFa-3bWXt__99Sj&index=2
 ---