kenryuS/sera-new-hp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Applied NuxtImg to pages and components

Browse Source
This commit is contained in:
Kenryu Shibata
2024-12-07 23:29:20 +09:00
parent 3ddcf5fa5e
commit e821b258c3
13 changed files with 264 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
pages/about/achievements.vue
View File

@@ -28,7 +28,7 @@ useSeoMeta(
</section>
<section>
<img
<NuxtImg
src="/images/koshien2020_mission-rogo.png"
alt="2020 Mission Logo"
class="float-right"
@@ -58,7 +58,7 @@ useSeoMeta(
<section>
<h3>種子島ロケットコンテスト</h3>
<h4>滑空・定点回収</h4>
<img
<NuxtImg
src="/images/rocket_top.jpg"
alt="rockets"
class="float-right"
@@ -93,7 +93,7 @@ useSeoMeta(
</ul>
<br />
<h4>CanSat</h4>
<img
<NuxtImg
src="/images/cansat/cansat_03.jpg"
alt="Sample Image"
class="float-right"
@@ -145,7 +145,7 @@ useSeoMeta(
<section>
<h2>その他活動実績 (イベントなど)</h2>
<img
<NuxtImg
src="/images/uchu_fea.jpg"
alt="Sample Image"
class="float-right"

5
pages/about/gallery.vue
View File

@@ -63,7 +63,7 @@ useSeoMeta(
:key="entry.id"
>
<figure>
<img :src="entry.imagePath" :alt="entry.caption" />
<NuxtImg :src="entry.imagePath" :alt="entry.caption" />
<figcaption>{{ entry.caption }}</figcaption>
</figure>
</div>
@@ -73,7 +73,7 @@ useSeoMeta(
<button @click="closeViewer" class="close">
<Icon name="ic:baseline-close" />
</button>
<img :src="imagePathViewer" :alt="captionViewer" />
<NuxtImg :src="imagePathViewer" :alt="captionViewer" />
<p>{{ captionViewer }}</p>
<button @click="changeImage(Direction.FORWARD)" class="next">
<Icon name="material-symbols:arrow-forward-rounded" />
@@ -163,6 +163,7 @@ main {
grid-area: caption;
justify-self: center;
align-self: flex-end;
margin-inline: 1.25rem;
}
.image-viewer .close {

6
pages/about/sera.vue
View File

@@ -15,7 +15,11 @@ useSeoMeta(
<PankuzuList current-page-name="SERAについて" />
<main>
<section>
<img src="/sera-logo-text.svg" alt="SERA Logo" class="float-left" />
<NuxtImg
src="/sera-logo-text.svg"
alt="SERA Logo"
class="float-left"
/>
<p>
宇宙分野に興味ある学生が集い、宇宙理工学に関する知識を身に付けると共に、宇宙分野に関連する各種競技会へ参加して人間力と実践力を養うことを目的に活動しています。
</p>

18
pages/news/[article].vue
View File

@@ -1,4 +1,5 @@
<script setup lang="ts">
import DOMPurify from "isomorphic-dompurify";
import { marked } from "marked";
const route = useRoute();
@@ -30,9 +31,10 @@ onMounted(() => {
postedDateElement.textContent = "掲載日： " + postedDate;
articleTitle?.insertAdjacentElement("afterend", postedDateElement);
const cardContentConversion = document.createElement("div");
cardContentConversion.innerHTML = marked.parse(
data.value?.cardContent as string
) as string;
const purifiedHTML = DOMPurify.sanitize(
marked.parse(data.value?.cardContent as string) as string
);
cardContentConversion.innerHTML = purifiedHTML;
useSeoMeta(
generateSeoMeta(
articleTitle?.innerText as string,
@@ -48,11 +50,17 @@ onMounted(() => {
<PageTop text="News" image-path="/images/news-top.jpg" />
<PankuzuList :current-page-name="pankuzuListPageName()" />
<main>
<img :src="(data?.coverImagePath as string) || '/sera-logo-text.svg'" />
<NuxtImg
:src="(data?.coverImagePath as string) || '/sera-logo-text.svg'"
/>
<div
id="article"
class="markdown"
v-html="marked.parse(data?.article as string)"
v-html="
DOMPurify.sanitize(
marked.parse(data?.article as string) as string
)
"
></div>
</main>
</template>

10
pages/projects/cansat.vue
View File

@@ -13,7 +13,7 @@ useSeoMeta(
<PankuzuList current-page-name="CanSat開発チーム" />
<main>
<section>
<img
<NuxtImg
src="/images/cansat_top.jpg"
alt="CanSat top image"
class="float-left"
@@ -29,7 +29,7 @@ useSeoMeta(
<section>
<h2>CanSatとは</h2>
<img
<NuxtImg
src="/images/cansat/cansat_01.jpg"
alt="CanSat"
class="float-right"
@@ -52,7 +52,7 @@ useSeoMeta(
<section>
<h2>CanSat開発チームの活動</h2>
<img
<NuxtImg
src="/images/cansat/cansat_02.jpg"
alt="SERA自作ロケット"
class="float-left"
@@ -74,7 +74,7 @@ useSeoMeta(
<section>
<h3>缶サット甲子園</h3>
<img
<NuxtImg
src="/images/cansat/koshien2020.jpg"
alt="缶サット甲子園"
class="float-right"
@@ -92,7 +92,7 @@ useSeoMeta(
<section>
<h3>種子島ロケットコンテスト</h3>
<img
<NuxtImg
src="/images/cansat/seratank-1.png"
alt="SERATANK-1"
class="float-left"

6
pages/projects/education.vue
View File

@@ -30,7 +30,7 @@ useSeoMeta(
<section>
<h3>AlphaⅢ</h3>
<img
<NuxtImg
src="/images/rocket/alpha3.jpg"
alt="Alpha III"
class="float-left"
@@ -44,7 +44,7 @@ useSeoMeta(
<section>
<h3>Raspberry Pi</h3>
<img
<NuxtImg
src="/images/education/raspberry-pi-4.jpg"
alt="Raspberry Pi 4"
class="float-right"
@@ -79,7 +79,7 @@ useSeoMeta(
<section>
<h2>教育用ローバーの開発</h2>
<img
<NuxtImg
src="/images/education/education-1.jpg"
alt="教育用ローバー"
class="float-left"

2
pages/projects/kosen-x.vue
View File

@@ -68,7 +68,7 @@ useSeoMeta(
</section>
<section>
<img src="/images/kosen1_gunma-cgv5-a.JPG" alt="KOSEN-1" />
<NuxtImg src="/images/kosen1_gunma-cgv5-a.JPG" alt="KOSEN-1" />
<p>画像：菅原達弥(群馬高専)</p>
</section>
</main>

6
pages/projects/rocket.vue
View File

@@ -13,7 +13,7 @@ useSeoMeta(
<PankuzuList current-page-name="Rocket開発チーム" />
<main>
<section>
<img
<NuxtImg
src="/images/rocket_top.jpg"
alt="Rocket top image"
class="float-left"
@@ -29,7 +29,7 @@ useSeoMeta(
<section>
<h2>モデルロケットとは</h2>
<img
<NuxtImg
src="/images/rocket/alpha3.jpg"
alt="Alpha III"
class="float-right"
@@ -57,7 +57,7 @@ useSeoMeta(
<section>
<h2>Rocket開発チームの活動</h2>
<img
<NuxtImg
src="/images/rocket/rocket_02.jpg"
alt="2 staged rocket"
class="float-left"