Updates

.prettierrc.json

@@ -5,16 +5,16 @@
   "printWidth": 100,
   "overrides": [
     {
-      "files": ["**/*.html", "**/*.yaml", "**/*.yml"],
+      "files": ["**/*.vue"],
       "options": {
-        "singleQuote": false,
-        "printWidth": 119
+        "printWidth": 120
       }
     },
     {
-      "files": ["**/*.html", "**/*.vue"],
+      "files": ["**/*.html", "**/*.yaml", "**/*.yml"],
       "options": {
-        "printWidth": 119
+        "singleQuote": false,
+        "printWidth": 120
       }
     },
     {

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "prebuild": "npm run type-check",
+    "prebuild": "npm run tsc",
     "build": "vite build",
     "build-only": "vite build",
     "dev": "vite",
@@ -15,7 +15,7 @@
     "prepreview": "npm run build",
     "preview": "vite preview",
     "preview-only": "vite preview",
-    "type-check": "vue-tsc --build"
+    "tsc": "vue-tsc --build"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^7.2.0",
@@ -29,17 +29,17 @@
     "@tsconfig/node24": "^24.0.4",
     "@types/aos": "^3.0.7",
     "@types/bootstrap": "^5.2.10",
-    "@types/node": "^25.5.2",
+    "@types/node": "^25.6.0",
     "@vitejs/plugin-vue": "^6.0.5",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.7.0",
     "@vue/tsconfig": "^0.9.1",
-    "eslint": "^9.39.4",
+    "eslint": "^10.2.0",
     "eslint-plugin-vue": "~10.8.0",
     "jiti": "^2.6.1",
-    "prettier": "3.8.1",
-    "typescript": "^5.9.3",
-    "vite": "^8.0.7",
+    "prettier": "3.8.2",
+    "typescript": "^6.0.2",
+    "vite": "^8.0.8",
     "vue-tsc": "^3.2.6"
   },
   "engines": {

src/assets/main.css

@@ -46,11 +46,3 @@ body {
 .hvr-grow-lg:hover {
   transform: scale(1.2);
 }
-
-.heart:hover {
-  color: #ff6433 !important;
-}
-
-.discord:hover {
-  color: #7785cc !important;
-}

src/components/BackToTop.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
+import { debounce } from '@/utils'
 
 const backToTop = ref<HTMLElement | null>(null)
 
@@ -13,37 +14,30 @@ const onScroll = () => {
   }
 }
 
-function debounce<T extends (...args: unknown[]) => unknown>(fn: T, timeout = 250): (...args: Parameters<T>) => void {
-  let timeoutID: ReturnType<typeof setTimeout>
-  return (...args: Parameters<T>) => {
-    clearTimeout(timeoutID)
-    timeoutID = setTimeout(() => fn(...args), timeout)
-  }
-}
-
-onMounted(() => {
-  // console.log('onMounted: window.addEventListener')
-  window.addEventListener('scroll', debounce(onScroll))
-})
-
 const topClick = () => {
   if (window.location.hash) {
+    // let vue router handle the scroll
     window.location.hash = ''
   } else {
     document.body.scrollTop = 0
     document.documentElement.scrollTop = 0
   }
 }
+
+onMounted(() => {
+  // console.log('onMounted: window.addEventListener')
+  window.addEventListener('scroll', debounce(onScroll))
+})
 </script>
 
 <template>
-  <button ref="backToTop" id="back-to-top" type="button" class="btn btn-outline-secondary" :onclick="topClick">
+  <button ref="backToTop" type="button" class="btn btn-outline-secondary back-to-top" @click="topClick">
     <i class="fa-regular fa-square-caret-up"></i>
   </button>
 </template>
 
 <style scoped>
-#back-to-top {
+.back-to-top {
   position: fixed;
   bottom: 50px;
   right: 10px;

src/components/FooterView.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { RouterLink } from 'vue-router'
-import router from '../router/index.ts'
+import router from '@/router/index.ts'
 import { SETTINGS } from '@/config/settings.ts'
+
+const routes = computed(() => router.options.routes.filter((route) => route.meta?.name))
 </script>
 
 <template>
@@ -22,7 +25,7 @@ import { SETTINGS } from '@/config/settings.ts'
       <div class="ms-md-auto">
         <nav aria-label="Secondary Navigation">
           <ol class="list-inline mb-1 d-flex flex-column flex-sm-row">
-            <li class="list-inline-item mb-2 mb-sm-0" v-for="{ meta, path } in router.options.routes" :key="path">
+            <li class="list-inline-item mb-2 mb-sm-0" v-for="{ meta, path } in routes" :key="path">
               <RouterLink :to="path" class="text-decoration-none link-body-emphasis" active-class="fw-bold">
                 {{ meta?.name }}
               </RouterLink>

src/components/HeaderView.vue

@@ -1,13 +1,33 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { RouterLink } from 'vue-router'
 import router from '../router/index.ts'
+import { SETTINGS } from '@/config/settings.ts'
 import { Collapse } from 'bootstrap'
 import ThemeSwitch from '@/components/ThemeSwitch.vue'
-import { SETTINGS } from '@/config/settings.ts'
 
 const navbarContent = ref<HTMLElement | null>(null)
 
+const routes = computed(() => router.options.routes.filter((route) => route.meta?.name))
+
+const navLinks = [
+  {
+    href: SETTINGS.kofi,
+    linkClass: 'hvr-grow-lg heart',
+    iconClass: 'fa-classic fa-solid fa-heart fa-xl',
+  },
+  {
+    href: SETTINGS.discord,
+    linkClass: 'hvr-grow-lg discord',
+    iconClass: 'fa-brands fa-discord fa-xl',
+  },
+  {
+    href: SETTINGS.github,
+    linkClass: 'hvr-grow-lg',
+    iconClass: 'fa-brands fa-github fa-xl',
+  },
+]
+
 function closeMenu() {
   const navbar = navbarContent?.value
   if (!navbar?.classList.contains('show')) return
@@ -35,27 +55,17 @@ function closeMenu() {
       </button>
       <div ref="navbarContent" class="collapse navbar-collapse me-auto" id="navbarSupportedContent">
         <ul class="navbar-nav me-auto">
-          <li class="nav-item" v-for="{ meta, path } in router.options.routes" :key="path">
+          <li class="nav-item" v-for="{ meta, path } in routes" :key="path">
             <RouterLink :to="path" class="nav-link" active-class="active" :onclick="closeMenu">{{
               meta?.name
             }}</RouterLink>
           </li>
         </ul>
         <ul class="navbar-nav nav-icons d-flex flex-row">
-          <li class="nav-item">
-            <a class="nav-link hvr-grow-lg heart" :href="SETTINGS.kofi" target="_blank" rel="noopener">
-              <i class="fa-classic fa-solid fa-heart fa-xl"></i
-            ></a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link hvr-grow-lg discord" :href="SETTINGS.discord" target="_blank" rel="noopener">
-              <i class="fa-brands fa-discord fa-xl"></i
-            ></a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link hvr-grow-lg" :href="SETTINGS.github" target="_blank" rel="noopener">
-              <i class="fa-brands fa-github fa-xl"></i
-            ></a>
+          <li v-for="link in navLinks" :key="link.href" class="nav-item">
+            <a class="nav-link" :class="link.linkClass" :href="link.href" target="_blank" rel="noopener">
+              <i :class="link.iconClass"></i>
+            </a>
           </li>
           <ThemeSwitch />
         </ul>
@@ -64,4 +74,12 @@ function closeMenu() {
   </nav>
 </template>
 
-<!--<style scoped></style>-->
+<!--suppress CssUnusedSymbol -->
+<style scoped>
+.heart:hover {
+  color: #ff6433 !important;
+}
+.discord:hover {
+  color: #7785cc !important;
+}
+</style>

src/components/HeadingTitle.vue

@@ -5,7 +5,7 @@ defineProps<{
 </script>
 
 <template>
-  <h1 class="animate__animated animate__zoomIn"><i :class="`${fa} me-2`"></i> <slot></slot></h1>
+  <h1 class="animate__animated animate__zoomIn"><i :class="`${fa} me-2`"></i> <slot /></h1>
 </template>
 
 <!--<style scoped></style>-->

src/utils/index.ts

@@ -0,0 +1,10 @@
+export function debounce<T extends (...args: unknown[]) => unknown>(
+  fn: T,
+  timeout = 250,
+): (...args: Parameters<T>) => void {
+  let timeoutID: ReturnType<typeof setTimeout>
+  return (...args: Parameters<T>) => {
+    clearTimeout(timeoutID)
+    timeoutID = setTimeout(() => fn(...args), timeout)
+  }
+}