feat: Nuxt 2からNuxt 4へ移行し全依存を最新化

.github/workflows/pr.yml

@@ -12,6 +12,7 @@ jobs:
         node-version: '22'
         cache: 'npm'
     - run: npm ci
+    - run: npx nuxt prepare
     - run: npm run lint
   build:
     runs-on: ubuntu-latest

.github/workflows/push.yml

@@ -21,5 +21,5 @@ jobs:
       uses: peaceiris/actions-gh-pages@v4
       with:
         github_token: ${{ secrets.GITHUB_TOKEN }}
-        publish_dir: ./dist
+        publish_dir: ./.output/public
         publish_branch: master

.gitignore

@@ -6,6 +6,7 @@ npm-debug.log
 
 # Nuxt build
 .nuxt
+.output
 
 # Nuxt generate
 dist

components/Contact.vue

@@ -1,23 +1,29 @@
 <template>
   <section class="second-section" id="contact">
     <div class="section-content">
       <div class="row">
         <div class="one-half column">
           <h1 class="section-heading wf-roundedmplus1c">お問い合わせ</h1>
-          <p class="wf-roundedmplus1c"><a href="https://prickathon.connpass.com/event/76592/">イベントページ</a>か、以下の連絡先へお願いいたします。</p>
+          <p class="wf-roundedmplus1c">
+            <a href="https://prickathon.connpass.com/event/76592/">イベントページ</a>か、以下の連絡先へお願いいたします。
+          </p>
           <ul class="person-list">
             <li class="person">
               @takanakahiko
               <ul class="contact-list">
                 <li class="email">takanakahiko [at] gmail.com</li>
-                <li class="twitter"><a href="https://twitter.com/takanakahiko">@takanakahiko</a></li>
+                <li class="twitter">
+                  <a href="https://twitter.com/takanakahiko">@takanakahiko</a>
+                </li>
               </ul>
             </li>
             <li class="person">
               @e_ntyo
               <ul class="contact-list">
                 <li class="email">entyo.contact [at] gmail.com</li>
-                <li class="twitter"><a href="https://twitter.com/e_ntyo">@e_ntyo</a></li>
+                <li class="twitter">
+                  <a href="https://twitter.com/e_ntyo">@e_ntyo</a>
+                </li>
               </ul>
             </li>
           </ul>
@@ -27,8 +33,9 @@
   </section>
 </template>
 
-<style lang='scss'>
-@import "~assets/css/util";
+<style lang="scss">
+@import "~/assets/css/util";
+
 @media screen and (min-width: 480px) {
   section {
     min-height: 100vh;
@@ -45,20 +52,22 @@
     list-style: none;
 
     li:before {
-      font-family: FontAwesome;
+      font-family: "Font Awesome 6 Free";
+      font-weight: 900;
       margin-right: 0.5em;
     }
 
     .twitter:before {
+      font-family: "Font Awesome 6 Brands";
       content: "\f099";
     }
 
     .email:before {
-      content: "\f003";
+      content: "\f0e0";
     }
 
     .person:before {
-      content: "\f2c0";
+      content: "\f007";
     }
 
     li a {
@@ -71,4 +80,4 @@
     font-family: "Rounded Mplus 1c";
   }
 }
-</style>
+</style>

components/Home.vue

@@ -1,10 +1,9 @@
 <template>
   <section class="first-section" id="home">
     <div class="section-content">
       <div class="row">
         <div id="nav" class="fourteen columns text-center">
           <ul>
-            <!-- TODO: navbar + router の構成に変更する -->
             <li>
               <a href="#home">Home</a>
             </li>
@@ -26,7 +25,7 @@
             <div class="text-container">
               <span>
                 プリパラを技術の面から支えていきたい，
-                <br/>そんな思いから生まれたハッカソン．
+                <br />そんな思いから生まれたハッカソン．
               </span>
             </div>
           </div>
@@ -35,7 +34,7 @@
             <div class="text-container">
               <span>
                 プリパラと自分の技術を組み合わせて，
-                <br/>面白いことをしていきましょう！
+                <br />面白いことをしていきましょう！
               </span>
             </div>
           </div>
@@ -44,7 +43,7 @@
             <div class="text-container">
               <span>
                 み～んなともだち、み～んなハッカー！
                 <br />創作はじめる時間だよ!
               </span>
             </div>
           </div>
@@ -61,15 +60,13 @@
           </a>
         </div>
       </div>
-
     </div>
   </section>
 </template>
 
-<style lang='scss'>
-@import "~assets/css/util";
+<style lang="scss">
+@import "~/assets/css/util";
 
-// TODO: スマホ向けレイアウトをまともにする
 @media screen and (min-width: 480px) {
   section {
     min-height: 100vh;
@@ -84,7 +81,7 @@
 }
 
 .first-section {
-  background: #ffffbb;  
+  background: #ffffbb;
   .hero-image {
     border-radius: 100%;
     display: block;
@@ -105,7 +102,7 @@
   .text-center {
     text-align: center;
   }
-  
+
   #nav {
     margin: 13px 0 0 0;
     ul li {
@@ -139,7 +136,5 @@
   .pretty-row {
     margin-bottom: 1em;
   }
-
 }
 </style>
-

components/Works.vue

@@ -1,57 +1,56 @@
 <template>
   <section class="works-section" id="works">
     <div class="section-content wf-roundedmplus1c">
       <h1 class="section-heading">成果物</h1>
-      <ul :class="['events' , isOpen ? 'is-open' : '']">
-        <li v-for="event in revesedEvents" :key="event.times">
-          <span class="event-title">{{event.title}}</span>
+      <ul :class="['events', isOpen ? 'is-open' : '']">
+        <li v-for="event in reversedEvents" :key="event.times">
+          <span class="event-title">{{ event.title }}</span>
           <ul class="works">
             <li v-for="work in event.works" :key="work.id">
-
               <div class="work-container">
                 <div class="work-thumbnail">
-                  <img :src="work.thumbnailUrl||'/yume-junbityu.jpg'" class="work-thumbnail-img">
+                  <img :src="work.thumbnailUrl || '/yume-junbityu.jpg'" class="work-thumbnail-img">
                 </div>
                 <div class="work-text-content">
                   <p class="work-name">
-                    <a v-if="work.linkToContent" :href="work.linkToContent">{{work.name}}</a>
-                    <span v-else>{{work.name}}</span>
+                    <a v-if="work.linkToContent" :href="work.linkToContent">{{ work.name }}</a>
+                    <span v-else>{{ work.name }}</span>
                   </p>
-                  <p class="work-description">{{work.description}}</p>
+                  <p class="work-description">{{ work.description }}</p>
                   <div class="work-meta">
-                    <span class="work-authors">{{work.authors.join(" , ")}}</span>
+                    <span class="work-authors">{{ work.authors.join(" , ") }}</span>
                   </div>
-
                 </div>
-
               </div>
-
-
             </li>
           </ul>
         </li>
       </ul>
-      <div :class="['readmore', isOpen ? 'hidden' : '' ]">
-        <a class="button button-primary" v-on:click="isOpen = true">続きを読む</a>
+      <div :class="['readmore', isOpen ? 'hidden' : '']">
+        <a class="button button-primary" @click="isOpen = true">続きを読む</a>
       </div>
     </div>
   </section>
 </template>
 
-<script>
-export default {
-  props: ['history'],
-  data: function(){ return { isOpen:false } },
-  computed: {
-    revesedEvents(){ return this.history.events.slice().reverse() }
-  }
-}
+<script setup lang="ts">
+import type { History } from '~/types/history'
+
+const props = defineProps<{
+  history: History | null
+}>()
+
+const isOpen = ref(false)
+
+const reversedEvents = computed(() => {
+  if (!props.history) return []
+  return props.history.events.slice().reverse()
+})
 </script>
 
-<style lang='scss'>
-@import "~assets/css/util";
+<style lang="scss">
+@import "~/assets/css/util";
 
-// TODO: スマホ向けレイアウトをまともにする
 @media screen and (min-width: 480px) {
   section {
     min-height: 100vh;
@@ -67,29 +66,31 @@
 .events {
   overflow-y: hidden;
   max-height: 55vh;
-  .event-title{
+  .event-title {
     font-size: 2em;
   }
-  &.is-open{
+  &.is-open {
     max-height: none;
   }
 }
 
 .works {
   display: flex;
   list-style: none;
-  flex-wrap:wrap;
+  flex-wrap: wrap;
 }
 
-.work-container{
+.work-container {
   width: 240px;
   transition: 0.5s;
   margin-left: 30px;
   margin-right: 30px;
   border: 1px solid #ddd;
   border-radius: 4px;
   background: #fff;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px rgba(0, 0, 0, 0.1);
+  box-shadow:
+    0px 1px 2px rgba(0, 0, 0, 0.1),
+    0 8px 20px rgba(0, 0, 0, 0.1);
 }
 
 .work-thumbnail {
@@ -110,7 +111,9 @@
     font-size: 20px;
     color: #4cc48e;
     font-weight: bold;
-    a { color: inherit; }
+    a {
+      color: inherit;
+    }
   }
   .work-description {
     margin: 0 0 12px 0;
@@ -130,11 +133,13 @@
   }
 }
 
-.readmore{
-	text-align:center;
-	cursor:pointer;
-	z-index:999;
+.readmore {
+  text-align: center;
+  cursor: pointer;
+  z-index: 999;
 }
 
+.hidden {
+  display: none;
+}
 </style>
-

eslint.config.mjs

@@ -0,0 +1,8 @@
+// @ts-check
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt({
+  rules: {
+    'vue/multi-word-component-names': 'off'
+  }
+})

layouts/default.vue

@@ -1,16 +1,19 @@
 <template>
   <div>
-    <nuxt/>
+    <slot />
   </div>
 </template>
 
-<script>
-export default {
-  mounted() {
-    const hash = this.$route.hash
-    if (hash && hash.match(/^#.+$/)) {
-      this.$scrollTo(hash)
+<script setup lang="ts">
+const route = useRoute()
+
+onMounted(() => {
+  const hash = route.hash
+  if (hash && hash.match(/^#.+$/)) {
+    const el = document.querySelector(hash)
+    if (el) {
+      el.scrollIntoView({ behavior: 'smooth' })
     }
   }
-}
+})
 </script>