Update packages

package.json

@@ -10,31 +10,31 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.34",
-    "@fortawesome/free-brands-svg-icons": "^5.15.2",
-    "@fortawesome/free-regular-svg-icons": "^5.15.2",
-    "@fortawesome/free-solid-svg-icons": "^5.15.2",
-    "@fortawesome/vue-fontawesome": "^3.0.0-3",
+    "@fortawesome/fontawesome-svg-core": "^1.3.0",
+    "@fortawesome/free-brands-svg-icons": "^5.15.4",
+    "@fortawesome/free-regular-svg-icons": "^5.15.4",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/vue-fontawesome": "^3.0.0-5",
     "animejs": "^3.2.1",
-    "core-js": "^3.6.5",
-    "googleapis": "^67.0.0",
-    "got": "^11.8.1",
+    "core-js": "^3.21.1",
+    "googleapis": "^67.1.1",
+    "got": "^11.8.3",
     "lodash.get": "^4.4.2",
-    "nodemailer": "^6.4.17",
-    "spin.js": "^4.1.0",
+    "nodemailer": "^6.7.2",
+    "spin.js": "^4.1.1",
     "vercel": "^23.1.2",
-    "vue": "^3.0.0",
-    "vue-router": "^4.0.0-rc.3",
-    "vuex": "^4.0.0-rc.1"
+    "vue": "^3.2.31",
+    "vue-router": "^4.0.13",
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0",
+    "@vue/cli-plugin-babel": "^4.5.15",
+    "@vue/cli-plugin-eslint": "^4.5.15",
+    "@vue/cli-service": "^4.5.15",
+    "@vue/compiler-sfc": "^3.2.31",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0-0",
+    "eslint-plugin-vue": "^7.20.0",
     "prerender-spa-plugin": "^3.4.0",
     "vue-svg-loader": "^0.16.0"
   },

src/components/SectionAppLink.vue

@@ -41,7 +41,7 @@ export default {
   setup(props) {
     const { activeClass, exactActiveClass, totalItems } = toRefs(props);
     const path = toRef(props, 'to');
-    const { isActive, isExactActive } = useLink(path);
+    const { isActive, isExactActive } = useLink(props);
 
     const isExternalLink = computed(() => checkExternalPath({ path: path.value }));
     const computedClassName = computed(() =>

src/components/helpers/animate.js

@@ -64,7 +64,6 @@ export const animateCliText = ({ cliContainer, anime, staggeredAnimation }) => {
     targets: '.bash-history .animation-text',
     opacity: [0, 1],
     round: 1,
-    delay: 25,
     delay: anime.stagger(25, { start: 350, direction: 'normal', easing: 'linear' }),
     complete: () => {
       // display the blinking cursor after animation finished

src/components/helpers/index.js

@@ -32,19 +32,6 @@ export const getWorkData = vuexCompanies => {
   });
 };
 
-export const createAnimationRefs = (refName, maxNumber, ref) => {
-  if (maxNumber === 0 || !maxNumber) {
-    return undefined;
-  }
-
-  const animationRefs = new Array(maxNumber).fill().reduce((acc, val, i) => {
-    acc[refName + i] = ref(null);
-    return acc;
-  }, {});
-
-  return animationRefs;
-};
-
 export const getExplodedContent = (textArr = []) => {
   const getFormattedLine = (textLine = '', i, self) => {
     const split = textLine.split('');

src/components/hero_component/index.vue

@@ -23,7 +23,7 @@
           class="bash-history"
           v-for="(line, i) in animationText"
           :key="i"
-          :ref="'animationText' + i"
+          :ref="(el) => animationTextRefs.push(el)"
           tabindex="0"
         >
           <span class="animation-text">{{ line }}</span>
@@ -37,7 +37,7 @@
 import anime from 'animejs/lib/anime.es.js';
 import { computed, ref, onMounted, onUnmounted } from 'vue';
 import { useStore } from 'vuex';
-import { createAnimationRefs, getExplodedContent } from '../helpers';
+import { getExplodedContent } from '../helpers';
 import { getAnimationObserver } from '../helpers/intersect';
 import { stopAnimation } from '../helpers/animate';
 
@@ -53,14 +53,18 @@ export default {
     const cliContainer = ref(null);
     const cliWrapperActiveText = ref(null);
     const animationText = store.getters['hero/getAnimationText'];
-    const animationTextRefs = createAnimationRefs('animationText', animationText?.length, ref);
+    // Using a function ref in the HTML above because of the bug documented here:
+    // https://github.com/vuejs/core/issues/5525#issuecomment-1059855276
+    // function ref working while regular v-for ref is failing
+    // https://stackblitz.com/edit/vitejs-vite-h42vi4?file=src/App.vue
+    const animationTextRefs = ref([]);
     let staggeredAnimation = ref(null);
 
     onMounted(() => {
       // prepare text for animation -> explode into single characters
       const formattedText = getExplodedContent(animationText);
       for (let i in formattedText) {
-        animationTextRefs[`animationText${i}`].value.innerHTML = formattedText[i];
+        animationTextRefs.value[i].innerHTML = formattedText[i];
       }
       //  check that cli is visible & trigger animation
       cliObserver = getAnimationObserver({ cliContainer, anime, staggeredAnimation });
@@ -77,7 +81,7 @@ export default {
       cliContainer,
       cliWrapperActiveText,
       animationText,
-      ...animationTextRefs,
+      animationTextRefs,
     };
   },
 };

src/components/project_item/project_content.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import ShipandcoContent from './shipandco';
 import StockandcoContent from './stockandco';
@@ -26,19 +26,23 @@ export default {
     const route = useRoute();
     const modifierClass = ref('');
 
-    if (route?.params?.project_item) {
-      modifierClass.value = route.params.project_item;
-    }
+    watch(
+      () => route?.params?.project_item,
+      (projectItem) => {
+        if (!projectItem) {
+          modifierClass.value = '';
+        } else {
+          modifierClass.value = `${projectItem}-link`;
+        }
+      }
+    );
 
-    // eslint will complain about the side effect in the computed property.
-    // consider adding a watch for the modifierClass value
     const projectContentComponent = computed(() => {
       const current = route?.params?.project_item;
       if (!current) {
-        modifierClass.value = '';
         return undefined;
       }
-      modifierClass.value = `${route.params.project_item}-link`;
+
       return `${route.params.project_item}-content`;
     });