refactor: set default value with withDefaults

src/components/OnAppear.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref, useTemplateRef, watch, type WatchHandle } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, useTemplateRef, watch, type WatchHandle } from 'vue'
 import { throttle } from 'radash'
 import { useWindowScroll, useWindowSize } from '@vueuse/core'
 import { createDelay, createFrames } from '@rewl/kit'
@@ -23,10 +23,10 @@ const delay = computed(() => createDelay(props.delay ?? 0))
 
 const show = ref(false)
 
-let unwatchShowCondition: WatchHandle
+let stop: WatchHandle
 
 onMounted(() => {
-  unwatchShowCondition = watch([wh, y], throttle({ interval: 100 }, ([wh, _]) => {
+  stop = watch([wh, y], throttle({ interval: 100 }, ([wh, _]) => {
     if (!el.value) return
 
     const { top, bottom } = el.value.getBoundingClientRect()
@@ -38,16 +38,16 @@ onMounted(() => {
 
     if (!show.value && inWindow) {
       next = true
-      if (props.once) unwatchShowCondition()
+      if (props.once) nextTick(() => stop())
     }
     if (show.value && outOfWindow) next = false
 
     show.value = next
-  }))
+  }), { immediate: true })
 })
 
 onUnmounted(() => {
-  unwatchShowCondition()
+  stop()
 })
 
 const cleanUp = () => {

src/components/background/BgPiece.vue

@@ -1,16 +1,17 @@
 <script setup lang="ts">
 import PieceSvg from '@/assets/byme/bg_piece.svg'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   opacity?: number
   startAt?: number
-}>()
-
-const cssOpacity = props.opacity ?? 1
+}>(), {
+  opacity: 1,
+  startAt: 1,
+})
 
 const d = 2.0
 const cssDuration = `${d}s`
-const delayTime = (props.startAt ?? 1) % 1 * d - (d)
+const delayTime = props.startAt % 1 * d - (d)
 const cssDelayTime = `${delayTime}s`
 </script>
 
@@ -22,7 +23,7 @@ const cssDelayTime = `${delayTime}s`
 
 <style lang="scss" module="bgPiece">
 .wrapper {
-  opacity: v-bind('cssOpacity');
+  opacity: v-bind('opacity');
   position: absolute;
 }
 

src/components/background/FullPage.vue

@@ -1,16 +1,17 @@
 <script setup lang="ts">
 import { type Component } from 'vue'
 
-const props = defineProps<{
+withDefaults(defineProps<{
   minHeight?: string
   background?: Component
-}>()
+}>(), {
+  minHeight: '100vh',
+  background: undefined,
+})
 
 defineOptions({
   inheritAttrs: false,
 })
-
-const cssMinHeight = props.minHeight ?? '100vh'
 </script>
 
 <template>
@@ -26,12 +27,13 @@ const cssMinHeight = props.minHeight ?? '100vh'
 <style lang="scss" scoped>
 .full-page {
   min-width: 100%;
-  min-height: v-bind('cssMinHeight');
+  min-height: v-bind('minHeight');
   position: relative;
 
   .background {
     min-width: 100%;
-    min-height: v-bind('cssMinHeight');
+    min-height: v-bind('minHeight');
+    position: relative;
   }
 }
 </style>

src/components/background/ParallaxWave.vue

@@ -3,21 +3,22 @@ import { computed } from 'vue'
 import { useWindowSize } from '@vueuse/core'
 import { range } from '@rewl/kit'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   width?: number
   height?: number
   baseHeight: number
   color: string
   duration: number
-}>()
+}>(), {
+  width: 600,
+  height: 240,
+})
 
-const w = computed(() => props.width ?? 600)
-const h = computed(() => props.height ?? 240)
 const cssBaseHeight = computed(() => `${props.baseHeight}px`)
 const cssDuration = computed(() => `${props.duration}s`)
 
 const { width: ww } = useWindowSize()
-const n = computed(() => Math.ceil(ww.value / w.value) + 2)
+const n = computed(() => Math.ceil(ww.value / props.width) + 2)
 
 const delay = Math.random() * props.duration
 const cssDelay = computed(() => `${-delay}s`)
@@ -28,8 +29,8 @@ const cssDelay = computed(() => `${-delay}s`)
     <div class="wave">
       <svg v-for="i of range(n)"
         :key="i"
-        :width="w"
-        :height="h"
+        :width="width"
+        :height="height"
         :fill="color"
         class="wave-svg"
         viewBox="0 0 1200 240"

src/components/page/PageList.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { computed, defineComponent, h, onMounted, ref, type Ref, watch } from 'vue'
 import { useWindowSize, useWindowScroll } from '@vueuse/core'
-import PageNavigator from './PageNavigator.vue'
 import { throttle } from 'radash'
 import { animate, easeInOut } from 'popmotion'
-import type { PageNavigatorItem } from './types'
+import PageNavigator, { type PageNavigatorItem } from './PageNavigator.vue'
 
 const { height } = useWindowSize()
 const { y } = useWindowScroll()

src/components/page/PageNavigator.vue

@@ -1,9 +1,19 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import PageMorphDot from './PageMorphDot.vue'
-import type { PageNavigatorItem } from './types'
 import { createArray } from '@rewl/kit'
 
+interface PageNavigatorDot {
+  type: 'dot'
+  progress: number
+}
+
+interface PageNavigatorDivider {
+  type: 'divider'
+}
+
+export type PageNavigatorItem = PageNavigatorDot | PageNavigatorDivider
+
 const props = defineProps<{
   status: PageNavigatorItem[]
 }>()

src/locales/en.ts

@@ -36,6 +36,7 @@ const en = {
     },
   },
   'footer': {
+    'eof': 'This is the end of the page ... for now.',
     'last-update': 'Last Update: ',
   },
 }

src/locales/zh.ts

@@ -38,6 +38,7 @@ const zh: LocaleSchema = {
     },
   },
   'footer': {
+    'eof': '这是最后一页……至少现在是的。',
     'last-update': '最近更新：',
   },
 }

src/views/ViewMain.vue

@@ -5,7 +5,6 @@ import PageDivider from '@/components/page/PageDivider.vue'
 import PageHome from './view-main/PageHome.vue'
 import PageAbility from './view-main/PageAbility.vue'
 import PageFooter from './view-main/PageFooter.vue'
-// import FullPage from '@/components/background/FullPage.vue'
 </script>
 
 <template>

src/views/view-main/LinkItem.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 export interface LinkItemProps {
   icon: string
-  iconAlt?: string
   type: string
   link: string
 }
@@ -13,7 +12,7 @@ defineProps<LinkItemProps>()
   <a class="card link-item" :href="link" target="_blank" noopener noreferer>
     <div class="hover-fx fx-quick-hover">
       <div class="type">
-        <img class="icon-md" :src="icon" :alt="iconAlt" />
+        <img class="icon-md" :src="icon" :alt="`icon of ${type}`" />
         <div>{{ type }}</div>
       </div>
       <slot></slot>

src/views/view-main/MasteryCategory.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-
 export interface MasteryCategoryProps {
   color?: string
 }
 
-const props = defineProps<MasteryCategoryProps>()
-const cssColor = computed(() => props.color ?? '#fff')
+withDefaults(defineProps<MasteryCategoryProps>(), {
+  color: '#fff',
+})
 </script>
 
 <template>
@@ -22,6 +21,6 @@ const cssColor = computed(() => props.color ?? '#fff')
   font-size: 0.875rem;
   font-weight: 500;
   color: black;
-  background-color: v-bind('cssColor');
+  background-color: v-bind('color');
 }
 </style>

src/views/view-main/PageFooter.vue

@@ -8,8 +8,11 @@ const { t } = useI18n()
 
 <template>
   <FullPage>
+    <div class="centered">
+      {{ t('footer.eof') }}
+    </div>
     <div class="bottom-line">
-      <div class="static container">
+      <div class="static sign">
         <div>i'DLisT © {{ CopyrightYears }}</div>
         <div>{{ t('footer.last-update') }}{{ LastUpdate }}</div>
       </div>
@@ -20,6 +23,16 @@ const { t } = useI18n()
 <style lang="scss">
 @use '@/scss.scss' as *;
 
+.centered {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .bottom-line {
   position: absolute;
   bottom: 4rem;
@@ -28,7 +41,7 @@ const { t } = useI18n()
   display: flex;
   justify-content: center;
 
-  .container {
+  .sign {
     display: grid;
     grid-template-columns: auto auto;
     align-items: center;

src/views/view-main/PageHome.vue

@@ -25,14 +25,12 @@ interface LinkInfo extends LinkItemProps {
 const linksPersonal: LinkInfo[] = [
   {
     icon: Email,
-    iconAlt: 'icon of email',
     type: 'email',
     name: '[email protected]',
     link: 'mailto:[email protected]',
   },
   {
     icon: Riw,
-    iconAlt: 'icon of blog',
     type: 'blog',
     name: 'Reinventing the Wheel',
     link: 'https://blog.idl.ist',
@@ -42,35 +40,30 @@ const linksPersonal: LinkInfo[] = [
 const linksPublic: LinkInfo[] = [
   {
     icon: X,
-    iconAlt: 'icon of twitter',
     type: 'twitter',
     name: '@i_dlist',
     link: 'https://x.com/i_dlist',
   },
   {
     icon: Bluesky,
-    iconAlt: 'icon of bluesky',
     type: 'bluesky',
     name: '@idl.ist',
     link: 'https://bsky.app/profile/idl.ist',
   },
   {
     icon: Discord,
-    iconAlt: 'icon of discord',
     type: 'discord',
     name: '@i_dlist',
     link: 'https://discord.com/',
   },
   {
     icon: GitHub,
-    iconAlt: 'icon of github',
     type: 'github',
     name: '@idlist',
     link: 'https://github.com/idlist',
   },
   {
     icon: SoundCloud,
-    iconAlt: 'icon of soundcloud',
     type: 'soundcloud',
     name: '@idlist',
     link: 'https://soundcloud.com/idlist',