Added LinksGrid components, updated documentation

pages/about/index.vue

@@ -1,4 +1,31 @@
 <script setup lang="ts">
+const linksList: Array<LinkCardProperty> = [
+    {
+        title: "SERAについて",
+        description: "岐阜工業高等専門学校宇宙工学研究会【SERA】の概要です。",
+        link: "/about/sera",
+        imagePath: "",
+    },
+    {
+        title: "活動実績",
+        description: "SERAの活動実績、受賞歴を紹介します。",
+        link: "/about/achievements",
+        imagePath: "",
+    },
+    {
+        title: "写真集",
+        description: "大会や普段の活動での様子です。",
+        link: "/about/gallery",
+        imagePath: "",
+    },
+    {
+        title: "中学生・新入生向け",
+        description: "部活のFAQを集めてみました。",
+        link: "/about/for-middle-schoolers-and-new-comers",
+        imagePath: "",
+    },
+];
+
 useSeoMeta(
     generateSeoMeta(
         "About Us",
@@ -12,56 +39,30 @@ useSeoMeta(
     <PageTop text="クラブ情報" image-path="/images/page-top.jpg" />
     <PankuzuList />
     <main>
-        <ul>
-            <li>
-                <LinkCard
-                    title="SERAについて"
-                    description="岐阜工業高等専門学校宇宙工学研究会【SERA】の概要です。"
-                    link="/about/sera"
-                />
-            </li>
-            <li>
-                <LinkCard
-                    title="活動実績"
-                    description="SERAの活動実績、受賞歴を紹介します。"
-                    link="/about/achievements"
-                />
-            </li>
-            <li>
-                <LinkCard
-                    title="写真集"
-                    description="大会や普段の活動での様子です。"
-                    link="/about/gallery"
-                />
-            </li>
-            <li>
-                <LinkCard
-                    title="中学生・新入生向け"
-                    description="部活のFAQを集めてみました。"
-                    link="/about/for-middle-schoolers-and-new-comers"
-                />
-            </li>
-        </ul>
+        <LinksGrid id="links" :links="linksList" />
     </main>
 </template>
 
 <style scoped>
-ul {
-    list-style: none;
-    display: grid;
-    gap: 20px;
-    grid: repeat(2, 1fr) / repeat(2, 1fr);
-    width: fit-content;
-    padding: 0;
-    margin: auto;
+main {
+    display: flex;
+    justify-content: center;
 }
 
-@media screen and (max-width: 1024px) {
+#links {
+    width: 80%;
+    max-width: 64rem;
+}
+
+@media screen and (max-width: 960px) {
     main {
         margin: var(--main-margin-top-bottom) 0;
     }
-    ul {
-        grid: repeat(3, 1fr) / 1fr;
+}
+
+@media screen and (max-width: 640px) {
+    main {
+        margin: var(--main-margin-top-bottom) 0;
     }
 }
 </style>

pages/index.vue

@@ -1,9 +1,17 @@
 <script setup lang="ts">
 import { marked } from "marked";
+import DOMPurify from "isomorphic-dompurify";
 import { EntryType, type NewsEntry } from "~/utils/types/news";
 import type { SlideEntry } from "~/utils/types/slide";
 import SiteInfo from "~/assets/siteinfo.json";
 
+const backgroundImageOptimization = useBackgroundImageOptimization();
+const backgroundImageOptimizer = (path: string) => {
+    backgroundImageOptimization.backgroundImageStyles.value = path;
+    const ret = backgroundImageOptimization.backgroundImageStyles.value;
+    return ret;
+};
+
 const { data } = await useFetch("/api/getNewsList");
 
 const getNewsEntriesForSlide = (): Array<SlideEntry> => {
@@ -58,6 +66,12 @@ const slidesForProjects: Array<SlideEntry> = [
     },
 ];
 
+let slideEntries = ref<Array<SlideEntry>>([
+    ...welcomeSlide,
+    ...getNewsEntriesForSlide(),
+    ...slidesForProjects,
+]);
+
 interface QuickLinkEntry {
     label: string;
     imagePath: string;
@@ -82,10 +96,6 @@ const quickLinkEntries: Array<QuickLinkEntry> = [
     },
 ];
 
-let slideEntries = ref<Array<SlideEntry>>(
-    welcomeSlide.concat(getNewsEntriesForSlide(), slidesForProjects)
-);
-
 onMounted(() => {
     const twitterScript = document.createElement("script");
     const twitterDivision = document.getElementById("twitter");
@@ -110,7 +120,7 @@ useSeoMeta(
             :entries="slideEntries"
             :duration="6000"
             width="100vw"
-            height="max(50svh, 30rem)"
+            height="max(50svh, 32rem)"
             id="slide"
         />
         <div id="quick-links-container">
@@ -119,7 +129,7 @@ useSeoMeta(
                     class="quick-link-entry"
                     v-for="entry in quickLinkEntries"
                     :key="quickLinkEntries.indexOf(entry)"
-                    :style="{ backgroundImage: `url('${entry.imagePath}')` }"
+                    :style="backgroundImageOptimizer(entry.imagePath)"
                 >
                     <NuxtLink :to="entry.link">
                         <h2>{{ entry.label }}</h2>
@@ -150,7 +160,13 @@ useSeoMeta(
                         </div>
                     </div>
                     <article
-                        v-html="marked.parse(entry.cardContent as string)"
+                        v-html="
+                            DOMPurify.sanitize(
+                                marked.parse(
+                                    entry.cardContent as string
+                                ) as string
+                            )
+                        "
                     ></article>
                     <NuxtLink
                         v-if="entry.entryType === EntryType.Article"
@@ -256,12 +272,15 @@ main:last-child {
     #quick-links {
         width: 100vw;
         height: 100vw;
+        min-height: calc(30rem + 2 * var(--quick-link-margin));
         grid-template-columns: 1fr;
         grid-template-rows: repeat(3, 1fr);
         margin-inline: 0;
     }
-    .quick-link-entry > a > h2 {
-        font-size: 7cqi;
+    .quick-link-entry {
+        & > a > h2 {
+            font-size: 7cqi;
+        }
     }
 }
 

pages/news/index.vue

@@ -34,15 +34,6 @@ useSeoMeta(
     margin: 1rem 0;
 }
 
-.news-list > div:has(a) {
-    transition: all 0.3s ease-in-out;
-    &:hover {
-        scale: 105%;
-        filter: grayscale(25%);
-        transition: all 0.3s ease-in-out;
-    }
-}
-
 @media screen and (max-width: 640px) {
     .news-list {
         grid-auto-flow: row;

pages/projects/index.vue

@@ -1,4 +1,35 @@
 <script setup lang="ts">
+const linksList: Array<LinkCardProperty> = [
+    {
+        title: "Rocket開発チーム",
+        description:
+            "SERA Rocket開発チームです。モデルロケットの製作を中心に活動しており、ロケットに関する知識を高めることを目指しています。",
+        link: "/projects/rocket",
+        imagePath: "/images/rocket_top.jpg",
+    },
+    {
+        title: "CanSat開発チーム",
+        description:
+            "SERA CanSat開発チームです。缶サットの製作を中心に活動しており、人工衛星などに関する知識を高めることを目指しています。",
+        link: "/projects/cansat",
+        imagePath: "/images/cansat_top.jpg",
+    },
+    {
+        title: "教育プロジェクト",
+        description:
+            "SERAでは主に新入会員の教育を目的に、教育用ローバー(CanSat)の開発を行っています。外部でも使用できるようなキットを目指して開発中です。",
+        link: "/projects/education",
+        imagePath: "/images/education/education-1.jpg",
+    },
+    {
+        title: "CubeSat KOSEN-X",
+        description:
+            "高専連携による超小型衛星開発についてです。高専スペース連携が中心となって製作しているCubeSatのプロジェクトに一部の部員が参加させて頂いております。",
+        link: "/projects/kosen-x",
+        imagePath: "/images/kosen1_gunma-cgv5-a.JPG",
+    },
+];
+
 useSeoMeta(
     generateSeoMeta(
         "Projects",
@@ -12,60 +43,36 @@ useSeoMeta(
     <PageTop text="Projects" image-path="/images/page-top.jpg" />
     <PankuzuList />
     <main>
-        <ul class="cards-list">
-            <li>
-                <LinkCard
-                    title="Rocket開発チーム"
-                    description="SERA Rocket開発チームです。モデルロケットの製作を中心に活動しており、ロケットに関する知識を高めることを目指しています。"
-                    link="/projects/rocket"
-                    image-path="/images/rocket_top.jpg"
-                />
-            </li>
-            <li>
-                <LinkCard
-                    title="CanSat開発チーム"
-                    description="SERA CanSat開発チームです。缶サットの製作を中心に活動しており、人工衛星などに関する知識を高めることを目指しています。"
-                    link="/projects/cansat"
-                    image-path="/images/cansat_top.jpg"
-                />
-            </li>
-            <li>
-                <LinkCard
-                    title="教育プロジェクト"
-                    description="SERAでは主に新入会員の教育を目的に、教育用ローバー(CanSat)の開発を行っています。外部でも使用できるようなキットを目指して開発中です。"
-                    link="/projects/education"
-                    image-path="/images/education/education-1.jpg"
-                />
-            </li>
-            <li>
-                <LinkCard
-                    title="CubeSat KOSEN-X"
-                    description="高専連携による超小型衛星開発についてです。高専スペース連携が中心となって製作しているCubeSatのプロジェクトに一部の部員が参加させて頂いております。"
-                    link="/projects/kosen-x"
-                    image-path="/images/kosen1_gunma-cgv5-a.JPG"
-                />
-            </li>
-        </ul>
+        <LinksGrid class="cards-list" :links="linksList" />
     </main>
 </template>
 
 <style scoped>
-.cards-list {
-    list-style: none;
-    display: grid;
-    grid: repeat(2, auto) / repeat(2, auto);
-    gap: 2rem;
-    width: fit-content;
-    padding: 0;
-    margin: auto;
+main {
+    display: flex;
+    justify-content: center;
 }
 
-@media screen and (max-width: 1024px) {
+.cards-list {
+    width: 80%;
+    max-width: 64rem;
+}
+
+@media screen and (max-width: 1080px) {
     main {
         margin: var(--main-margin-top-bottom) 0;
     }
-    .cards-list {
-        grid: repeat(4, 1fr) / 1fr;
+}
+
+@media screen and (max-width: 960px) {
+    main {
+        margin: var(--main-margin-top-bottom) 0;
+    }
+}
+
+@media screen and (max-width: 640px) {
+    main {
+        margin: var(--main-margin-top-bottom) 0;
     }
 }
 </style>