added Back To Top functionality and Pankuzu list, Q and A Box, and Hamburger menu components

pages/about/achievements.vue

@@ -12,6 +12,7 @@ useSeoMeta(
 
 <template>
     <PageTop text="活動実績" image-path="/images/page-top.jpg" />
+    <PankuzuList current-page-name="活動実績" />
     <main>
         <section>
             <p>

pages/about/for-middle-schoolers-and-new-comers.vue

@@ -36,6 +36,7 @@ useSeoMeta(
         text="中学生・新入生向けページ"
         image-path="/images/page-top.jpg"
     />
+    <PankuzuList current-page-name="中学生・新入生向けページ" />
     <main>
         <h3>SERAに興味があるみなさんへ</h3>
 
@@ -51,6 +52,11 @@ useSeoMeta(
             <NuxtLink to="/about/sera"> 詳しくはこちら </NuxtLink>
         </QAndABox>
 
+        <QAndABox question="どんな目標を持って活動していますか？">
+            <p>「社会で戦える技術者になる」という目的の下、大会やコンテストに参加する中で、 個人のスキルやチーム力の向上を目標に活動しています。</p>
+            <NuxtLink to="/about/sera">詳しくはこちら</NuxtLink>
+        </QAndABox>
+
         <QAndABox
             question="SERAでの活動を通して、どのような力を身に付けることができますか？"
         >
@@ -69,7 +75,7 @@ useSeoMeta(
         </QAndABox>
 
         <QAndABox question="活動場所はどこ？">
-            <p></p>
+            <p>現在は文化部室の一室を主な活動場所としています。</p>
         </QAndABox>
 
         <QAndABox question="Rocket開発チームでやっている事は？">
@@ -100,9 +106,22 @@ useSeoMeta(
             <NuxtLink to="/projects/kosen-x"> 詳しくはこちら </NuxtLink>
         </QAndABox>
 
+        <QAndABox question="大会での成績はどのようなものがありますか？">
+            <p>
+                種子島ロケットコンテストのロケット競技における滞空および定点回収部門での優勝のほか、
+                インターハイ相当の大会となる缶サット甲子園で岐阜地方大会を3連覇しています(昨年度の大会まで)。
+            </p>
+            <NuxtLink to="/about/achievements">詳しくはこちら</NuxtLink>
+        </QAndABox>
+
+        <QAndABox question="県外での活動などはありますか？">
+            <p>あります。最も遠くて種子島でのコンテストに参加していますが、コロナの影響で令和4年度の県外の活動も少なくなると予想されます。</p>
+            <p>遠征費については、県外での大会にかかる旅費や交通費に対して学校からの補助があります。</p>
+        </QAndABox>
+
         <QAndABox question="何人で活動していますか？">
             <p>
-                {{ memberGradeRatioDate }}現座、 1年生が{{
+                {{ memberGradeRatioDate }}現在、 1年生が{{
                     SiteInfo.memberGradeRatio.first
                 }}人、 2年生が{{ SiteInfo.memberGradeRatio.second }}人、
                 3年生が{{ SiteInfo.memberGradeRatio.third }}人、 4年生が{{
@@ -112,6 +131,55 @@ useSeoMeta(
                 }}人で活動しています。
             </p>
         </QAndABox>
+
+        <QAndABox question="環境都市工学科や建築学科など、宇宙に全く関係ない学科出身の部員はいますか？">
+            <p>環境都市工学科、建築学科の学生も実際に活動しています。</p>
+            <p>
+                また現在、大手ゼネコンなどでは宇宙ホテル、月面太陽光発電、宇宙エレベーターの開発プロジェクトが検討されているので、
+                環境都市工学科、建築学科ともに宇宙開発と大いに関係しています。
+            </p>
+            <p>
+                宇宙の謎を探り、人類の生存圏を宇宙へ拡大していくためには様々な分野の人たちが協力する必要があるため、学科の垣根は関係ありません。
+                また、活動をしていく中で専門的な知識だけでなく、WordやPowerPointを用いた資料作成といった社会人として仕事をするときに役立つスキルも身に付けることが出来ます。
+            </p>
+        </QAndABox>
+
+        <QAndABox question="部員の学科の割合は？">
+            <p>
+                {{ memberDepartmentRatioDate }}現在、
+                M科{{ SiteInfo.memberDepartmentRatio.mechanicalEng }}人、
+                D科{{ SiteInfo.memberDepartmentRatio.elecControl }}人、
+                E科{{ SiteInfo.memberDepartmentRatio.elecAndComp }}人、
+                C科{{ SiteInfo.memberDepartmentRatio.civilEng }}人、
+                A科{{ SiteInfo.memberDepartmentRatio.architecture }}人です。
+            </p>
+        </QAndABox>
+
+        <QAndABox question="宇宙関係などの特別な知識は必要ですか？">
+            <p>入会する際は特に知識は全く必要ありません。</p>
+            <p>必要な知識は、入部してから先輩方に教えてもらえます。</p>
+        </QAndABox>
+
+        <QAndABox question="他の部活との兼部は可能ですか？実際に兼部している人はいますか？">
+            <p>兼部は可能です。 実際に、バドミントン部、バレー部などの運動部や、その他文化部との兼部をしている人がいます。 </p>
+        </QAndABox>
+
+        <QAndABox question="顧問の先生はどのような先生ですか？">
+            <p>
+                {{ SiteInfo.advisor.department }}に所属されている{{ SiteInfo.advisor.name }}教員です。{{ SiteInfo.advisor.description }}
+            </p>
+        </QAndABox>
+
+        <QAndABox question="用意しておく必要のある道具などはありますか？">
+            <p>個人で使用できるパソコンを用意しておくと、スムーズに活動に参加できます。</p>
+            <p>持っていないからと言って活動できないわけではありません。部で所有するパソコンを使用して活動を行うことも出来ます。</p>
+        </QAndABox>
+
+        <QAndABox question="部費などのかかる費用について教えてください。">
+            <p>¥10,000/年となります。年度初めに徴収させて頂きます。</p>
+            <p>年間予算内でも説明させて頂きますが、集金した部費は、制作材料の購入、機器のメンテナンス、先輩への贈り物などの厚生費に使わせて頂きます。</p>
+            <p>この他に、任意での購入とはなりますが、ユニフォームの購入費(入部後に連絡)がかかります。</p>
+        </QAndABox>
     </main>
 </template>
 
@@ -121,9 +189,24 @@ main {
     margin-inline: auto;
 }
 
+main > div {
+    margin-inline: 1rem;
+}
+
 h3 {
     width: fit-content;
     color: var(--neptune1);
     margin-inline: auto;
 }
+
+a,
+a:visited {
+    color: var(--neptune1);
+}
+
+@media screen and (max-width: 640px) {
+    main > div {
+        margin-inline: 0;
+    }
+}
 </style>

pages/about/gallery.vue

@@ -2,8 +2,8 @@
 const { data } = await useFetch("/api/getGalleryImages");
 
 enum Direction {
-    FORWARD,
-    BACKWARD,
+    BACKWARD = -1,
+    FORWARD = 1,
 }
 
 const showViewer = ref<boolean>(false);
@@ -26,7 +26,7 @@ const closeViewer = () => {
 
 const changeImage = (direction: number) => {
     const lastIndex = (data.value?.length as number) - 1;
-    const delta = direction === Direction.FORWARD ? 1 : -1;
+    const delta = direction;
     let newIndex = indexViewer.value + delta;
     if (newIndex < 0) {
         newIndex = lastIndex;
@@ -52,6 +52,7 @@ useSeoMeta(
 
 <template>
     <PageTop text="写真集" image-path="/images/page-top.jpg" />
+    <PankuzuList current-page-name="写真集" />
     <main>
         <p>大会や日々の活動の様子をアップロードしていきます</p>
         <div class="image-list">
@@ -61,8 +62,10 @@ useSeoMeta(
                 @click="openViewer(entry)"
                 :key="entry.id"
             >
-                <img :src="entry.imagePath" :alt="entry.caption" />
-                <figcaption>{{ entry.caption }}</figcaption>
+                <figure>
+                    <img :src="entry.imagePath" :alt="entry.caption" />
+                    <figcaption>{{ entry.caption }}</figcaption>
+                </figure>
             </div>
         </div>
         <Transition name="image-viewer-transition">
@@ -71,7 +74,7 @@ useSeoMeta(
                     <Icon name="ic:baseline-close" />
                 </button>
                 <img :src="imagePathViewer" :alt="captionViewer" />
-                <figcaption>{{ captionViewer }}</figcaption>
+                <p>{{ captionViewer }}</p>
                 <button @click="changeImage(Direction.FORWARD)" class="next">
                     <Icon name="material-symbols:arrow-forward-rounded" />
                 </button>
@@ -115,13 +118,13 @@ main {
     transition: scale 0.2s ease-in-out;
 }
 
-.image-thumbnail img {
+.image-thumbnail > figure > img {
     width: 15rem;
     height: 10rem;
     object-fit: cover;
 }
 
-.image-thumbnail figcaption {
+.image-thumbnail > figure > figcaption {
     width: 15rem;
     text-align: center;
 }
@@ -152,11 +155,12 @@ main {
     align-self: center;
 }
 
-.image-viewer figcaption {
+.image-viewer p {
     color: var(--sunlight);
     font-size: 24pt;
     grid-area: caption;
     justify-self: center;
+    align-self: flex-end;
 }
 
 .image-viewer .close {

pages/about/sera.vue

@@ -12,6 +12,7 @@ useSeoMeta(
 
 <template>
     <PageTop text="SERAについて" image-path="/images/page-top.jpg" />
+    <PankuzuList current-page-name="SERAについて" />
     <main>
         <section>
             <img src="/sera-logo-text.svg" alt="SERA Logo" class="float-left" />

pages/news/[article].vue

@@ -17,7 +17,7 @@ if (data.value === undefined || data.value === null) {
 onMounted(() => {
     const article = document.getElementById("article");
     const articleTitle = article?.getElementsByTagName("h1")[0];
-    const postedDate = new Date(data.value?.date).toLocaleDateString(
+    const postedDate = new Date(data.value?.date as number).toLocaleDateString(
         "ja-JP-u-ca-japanese",
         { dateStyle: "medium" }
     );

pages/news/index.vue

@@ -12,6 +12,7 @@ useSeoMeta(
 
 <template>
     <PageTop text="News" image-path="/images/news-top.jpg" />
+    <PankuzuList />
     <main>
         <div class="news-list">
             <NewsCard

pages/projects/cansat.vue

@@ -10,6 +10,7 @@ useSeoMeta(
 
 <template>
     <PageTop text="CanSat開発チーム" image-path="/images/page-top.jpg" />
+    <PankuzuList current-page-name="CanSat開発チーム" />
     <main>
         <section>
             <img

pages/projects/education.vue

@@ -10,6 +10,7 @@ useSeoMeta(
 
 <template>
     <PageTop text="教育プロジェクト" image-path="/images/page-top.jpg" />
+    <PankuzuList current-page-name="教育プロジェクト" />
     <main>
         <section>
             <h2>新入生研修</h2>

pages/projects/index.vue

@@ -10,6 +10,7 @@ useSeoMeta(
 
 <template>
     <PageTop text="Projects" image-path="/images/page-top.jpg" />
+    <PankuzuList />
     <main>
         <ul class="cards-list">
             <li>

pages/projects/kosen-x.vue

@@ -10,6 +10,7 @@ useSeoMeta(
 
 <template>
     <PageTop text="CubeSat KOSEN-X" image-path="/images/page-top.jpg" />
+    <PankuzuList current-page-name="CubeSat KOSEN-X" />
     <main>
         <section>
             <p>

pages/projects/rocket.vue

@@ -10,6 +10,7 @@ useSeoMeta(
 
 <template>
     <PageTop text="Rocket開発チーム" image-path="/images/page-top.jpg" />
+    <PankuzuList current-page-name="Rocket開発チーム" />
     <main>
         <section>
             <img