feat: add simple footer

.husky/pre-commit

@@ -0,0 +1 @@
+npm run generate

package.json

@@ -9,7 +9,9 @@
     "preview": "vite preview --host",
     "build-only": "vite build",
     "type-check": "vue-tsc --build --force",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "prepare": "husky",
+    "generate": "tsx scripts/generate.ts && git add src/generated.ts"
   },
   "dependencies": {
     "@rewl/kit": "^0.1.3",
@@ -31,6 +33,7 @@
     "eslint": "^9.13.0",
     "eslint-plugin-vue": "^9.29.1",
     "globals": "^15.11.0",
+    "husky": "^9.1.6",
     "npm-run-all2": "^6.2.6",
     "radash": "^12.1.0",
     "sass": "^1.80.4",

scripts/generate.ts

@@ -0,0 +1,28 @@
+import fs from 'fs/promises'
+
+interface YearMonthDay {
+  year: number
+  month: number
+  day: number
+}
+
+export const ymd = (date: Date): YearMonthDay => {
+  return {
+    year: date.getFullYear(),
+    month: date.getMonth() + 1,
+    day: date.getDate(),
+  }
+}
+
+const date = ymd(new Date())
+const update = `${date.year} / ${date.month} / ${date.day}`
+
+const yearStart = 2024
+const yearPeriod = yearStart == date.year ? `${date.year}` : `${yearStart} - ${date.year}`
+
+const content = `// Auto-generated file, don't modify.
+export const LastUpdate = '${update}'
+export const CopyrightYears = '${yearPeriod}'
+`
+
+await fs.writeFile('src/generated.ts', content, { encoding: 'utf8' })

src/assets/byme/README.md

@@ -0,0 +1,3 @@
+THe SVG files in this folder are made by me.
+
+No, it's not MIT.

src/assets/svgrepo/readme.md

@@ -22,4 +22,4 @@ krita: https://www.svgrepo.com/svg/341976/krita
 affinity_designer: https://www.svgrepo.com/svg/305670/affinity-designer
 star: https://www.svgrepo.com/svg/525539/star
 electron: https://www.svgrepo.com/svg/327355/logo-electron
-
+heart: https://www.svgrepo.com/svg/525363/heart-angle

src/components/OnAppear.vue

@@ -1,32 +1,33 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, useTemplateRef, watch, type WatchHandle } from 'vue'
-import { debounce } from 'radash'
+import { throttle } from 'radash'
 import { useWindowScroll, useWindowSize } from '@vueuse/core'
 import { createDelay, createFrames } from '@rewl/kit'
 
 const { height: wh } = useWindowSize()
 const { y } = useWindowScroll()
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   name?: string
   delay?: number
-}>()
+  once?: boolean
+}>(), {
+  name: 'v',
+  delay: 0,
+})
 
 const el = useTemplateRef('el')
-const name = computed(() => props.name ?? 'v')
-const classEnterFrom = computed(() => `${name.value}-enter-from`)
-const classEnterActive = computed(() => `${name.value}-enter-active`)
+const classEnterFrom = computed(() => `${props.name}-enter-from`)
+const classEnterActive = computed(() => `${props.name}-enter-active`)
 const delay = computed(() => createDelay(props.delay ?? 0))
 
 const show = ref(false)
 
 let unwatchShowCondition: WatchHandle
 
 onMounted(() => {
-  unwatchShowCondition = watch([wh, y], debounce({ delay: 100 }, ([wh, _]) => {
-    if (!el.value) {
-      return
-    }
+  unwatchShowCondition = watch([wh, y], throttle({ interval: 100 }, ([wh, _]) => {
+    if (!el.value) return
 
     const { top, bottom } = el.value.getBoundingClientRect()
 
@@ -37,13 +38,12 @@ onMounted(() => {
 
     if (!show.value && inWindow) {
       next = true
+      if (props.once) unwatchShowCondition()
     }
-    if (show.value && outOfWindow) {
-      next = false
-    }
+    if (show.value && outOfWindow) next = false
 
     show.value = next
-  }), { immediate: true })
+  }))
 })
 
 onUnmounted(() => {

src/components/background/BgPiece.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import PieceSvg from '@/assets/bg/bg_piece.svg'
+import PieceSvg from '@/assets/byme/bg_piece.svg'
 
 const props = defineProps<{
   opacity?: number

src/components/background/FullPage.vue

@@ -27,6 +27,7 @@ const cssMinHeight = props.minHeight ?? '100vh'
 .full-page {
   min-width: 100%;
   min-height: v-bind('cssMinHeight');
+  position: relative;
 
   .background {
     min-width: 100%;

src/components/page/PageList.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { computed, defineComponent, h, ref, type Ref, watch } from 'vue'
+import { computed, defineComponent, h, onMounted, ref, type Ref, watch } from 'vue'
 import { useWindowSize, useWindowScroll } from '@vueuse/core'
 import PageNavigator from './PageNavigator.vue'
-import { debounce } from 'radash'
+import { throttle } from 'radash'
 import { animate, easeInOut } from 'popmotion'
 import type { PageNavigatorItem } from './types'
 
@@ -51,17 +51,19 @@ const setupNavigatorStatus = (): PageNavigatorItem[] => {
 
 const navigatorStatus = ref(setupNavigatorStatus())
 
-watch(() => slots.default(), () => {
-  navigatorStatus.value = setupNavigatorStatus()
+onMounted(() => {
+  watch(() => slots.default(), () => {
+    navigatorStatus.value = setupNavigatorStatus()
+  }, { immediate: true })
 })
 
-let magnetScrollTimeout: ReturnType<typeof setTimeout> | undefined
+let snapScrollTimeout: ReturnType<typeof setTimeout> | undefined
 let scrollAnimation: ReturnType<typeof animate> | undefined
 
-const cancelMagnetScroll = () => {
-  if (magnetScrollTimeout) {
-    clearTimeout(magnetScrollTimeout)
-    magnetScrollTimeout = undefined
+const cancelSnapScroll = () => {
+  if (snapScrollTimeout) {
+    clearTimeout(snapScrollTimeout)
+    snapScrollTimeout = undefined
   }
 }
 
@@ -120,22 +122,24 @@ const updateNavigatorStatus = (windowHeight: number) => {
     navigatorStatus.value[i].progress = percent
   }
 
-  cancelMagnetScroll()
+  cancelSnapScroll()
 
   if (insidePage || !props.snapScroll) {
     return
   }
 
-  magnetScrollTimeout = setTimeout(() => {
+  snapScrollTimeout = setTimeout(() => {
     jumpTo(mostIndex, scrollAlign)
-    magnetScrollTimeout = undefined
+    snapScrollTimeout = undefined
   }, delay.value)
 }
 
-watch([height, y], debounce({ delay: 100 }, ([wh, _]) => updateNavigatorStatus(wh)), { immediate: true })
+onMounted(() => {
+  watch([height, y], throttle({ interval: 100 }, ([wh, _]) => updateNavigatorStatus(wh)), { immediate: true })
+})
 
 const jumpTo = (index: number, align: ScrollAlign = 'top') => {
-  cancelMagnetScroll()
+  cancelSnapScroll()
 
   if (scrollAnimation) {
     scrollAnimation.stop()
@@ -151,7 +155,7 @@ const jumpTo = (index: number, align: ScrollAlign = 'top') => {
     to = toMax
   }
   const from = window.scrollY
-  const duration = Math.max(Math.abs(from - to) / height.value * 1000, 500)
+  const duration = Math.max(Math.abs(from - to) / height.value * 500, 250)
 
   scrollAnimation = animate({
     from,

src/generated.ts

@@ -0,0 +1,3 @@
+// Auto-generated file, don't modify.
+export const LastUpdate = '2024 / 11 / 15'
+export const CopyrightYears = '2024'

src/locales/en.ts

@@ -35,6 +35,9 @@ const en = {
       'japanese': 'Japanese',
     },
   },
+  'footer': {
+    'last-update': 'Last Update: ',
+  },
 }
 
 export default en

src/locales/zh.ts

@@ -27,8 +27,8 @@ const zh: LocaleSchema = {
       'pl': '编程语言',
       'web': '网页技术',
       'desktop': '桌面应用',
-      'gamedev': '游戏开发',
-      'art': '绘画 & 设计',
+      'gamedev': '游戏设计',
+      'art': '绘画 & 平面',
       'compose': '编曲',
     },
     'skills': {
@@ -37,6 +37,9 @@ const zh: LocaleSchema = {
       'japanese': '日文',
     },
   },
+  'footer': {
+    'last-update': '最近更新：',
+  },
 }
 
 export default zh

src/utils.scss

@@ -27,6 +27,16 @@
   }
 }
 
+.icon-md {
+  width: 1rem;
+  height: 1rem;
+}
+
+.icon-sm {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
 .card {
   padding: 0.25rem;
 

src/views/ViewMain.vue

@@ -4,6 +4,7 @@ import PageContent from '@/components/page/PageContent.vue'
 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>
 
@@ -18,5 +19,11 @@ import PageAbility from './view-main/PageAbility.vue'
     <PageContent>
       <PageAbility />
     </PageContent>
+
+    <PageDivider />
+
+    <PageContent>
+      <PageFooter />
+    </PageContent>
   </PageList>
 </template>

src/views/view-main/LinkItem.vue

@@ -13,7 +13,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 :src="icon" :alt="iconAlt" />
+        <img class="icon-md" :src="icon" :alt="iconAlt" />
         <div>{{ type }}</div>
       </div>
       <slot></slot>
@@ -53,11 +53,6 @@ defineProps<LinkItemProps>()
     font-size: 0.875rem;
     color: #fff;
     background-color: hsl(0, 0%, 10%);
-
-    img {
-      width: 1rem;
-      height: 1rem;
-    }
   }
 }
 </style>