formatting, favicon

public/no-js.css

@@ -1,3 +1,7 @@
+/*
+ * this file is used to style the display when JavaScript is disabled
+ */
+
 #app {
     display: none !important;
 }
@@ -11,11 +15,23 @@ noscript {
     inset: 0 !important;
     z-index: 1000 !important;
 
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
+    font-family:
+        system-ui,
+        -apple-system,
+        BlinkMacSystemFont,
+        "Segoe UI",
+        Roboto,
+        Oxygen,
+        Ubuntu,
+        Cantarell,
+        "Open Sans",
+        "Helvetica Neue",
+        sans-serif !important;
     text-align: center !important;
 }
 
-noscript, noscript * {
+noscript,
+noscript * {
     color: red !important;
 }
 
@@ -24,13 +40,12 @@ noscript a {
     text-decoration: underline !important;
 }
 
-@media (prefers-color-scheme: dark)
-{
+@media (prefers-color-scheme: dark) {
     noscript {
         background-color: #000 !important;
     }
 
     noscript a {
         color: #aaf !important;
     }
-}
+}

public/watchface.json

@@ -1,6 +1,6 @@
 {
   "now": {
-	"time": "20:00",
+    "time": "20:00",
     "date": "02-04-2024"
   },
   "battery": 80,

src/components/ProjectComponent.vue

@@ -40,9 +40,19 @@ const projectName = computed(() => {
 
 <template>
     <a class="project no-external-icon" :href="project.url" target="_blank">
-        <div class="image-wrapper" :style="'--image-count: ' + (project.image ? 1 : project.images ? project.images.length : 0).toString()">
+        <div
+            class="image-wrapper"
+            :style="'--image-count: ' + (project.image ? 1 : project.images ? project.images.length : 0).toString()"
+        >
             <img class="image" v-if="project.image" :src="project.image" alt="Project preview" />
-            <img class="image" v-else v-for="image in project.images" v-bind:key="image" :src="image" alt="Project preview" />
+            <img
+                class="image"
+                v-else
+                v-for="image in project.images"
+                v-bind:key="image"
+                :src="image"
+                alt="Project preview"
+            />
         </div>
         <div class="vertical-stack">
             <div class="name">{{ projectName }}</div>
@@ -114,9 +124,8 @@ const projectName = computed(() => {
 
     padding: 20px;
 
-    /* select an image-wrapper which has at least two children */ 
-    .image-wrapper:has(:not(img:first-child:last-child)):not(:empty)
-    {
+    /* select an image-wrapper which has at least two children */
+    .image-wrapper:has(:not(img:first-child:last-child)):not(:empty) {
         display: flex;
         flex-direction: row;
         overflow: hidden;

src/localizer/index.ts

@@ -2,12 +2,12 @@ import * as localizedStrings from "./locales"
 
 import { createI18n } from "vue-i18n"
 
+import { type Plugin as VuePlugin, type App as VueApp } from "vue"
+
 export const LOCALES = ["nl", "en"] as const
 
 export type Locale = (typeof LOCALES)[number]
 
-export type Localizer = { locale: Locale; install: (app: any) => void }
-
 /**
  * A type that represents a value that is localized in multiple languages.
  * The key is the locale, and the value is the localized value.
@@ -16,11 +16,22 @@ export type Localizer = { locale: Locale; install: (app: any) => void }
  */
 export type Localized<V = any> = { [K in Locale]: V }
 
+/**
+ * A list of the domains for each locale the app supports.
+ * @warn Do not use this in href attributes, as it won't work during development. For redirects, use the `changeLanguage` function.
+ */
 export const domainsByLocale: Localized<`https://${string}`> = {
     en: "https://jonathanbout.com",
     nl: "https://jonathanbout.nl"
 }
 
+const localizerPlugin = {
+    install(app: VueApp) {
+        app.provide("locale", currentLocale)
+        app.use(i18n)
+    }
+} as VuePlugin
+
 /**
  * Change the language of the site by setting the locale in local storage and reloading the page. This may also redirect to the other domain if the locale is changed.
  * @param newLanguage the new locale to set
@@ -51,16 +62,16 @@ export function changeLanguage(newLanguage: Locale) {
 
 /**
  * Create a Vue plugin that enables localization and provides a method to change the locale from within the app.
- * @returns a Vue localizer plugin
  */
-export function createLocalizer(): Localizer {
+export function createLocalizer(): VuePlugin {
     /*
      * Determine the locale to use. In order of priority:
-     * 1. If the query parameter changeLocale is set, change the locale to the locale for the current domain
-     * 2. If the locale is set in local storage, use that
-     * 3. If the browser language is set to Dutch, use the Dutch locale
-     * 4. If the browser language is set to English, use the English locale
-     * 5. If none of the above, use the locale for the current domain (.com is English, .nl is Dutch)
+     * 1. If the visitor is a crawler or a bot, use the locale for the current domain
+     * 2. If the query parameter changeLocale is set, change the locale to the locale for the current domain
+     * 3. If the locale is set in local storage, use that
+     * 4. If the browser language is set to Dutch, use the Dutch locale
+     * 5. If the browser language is set to English, use the English locale
+     * 6. If none of the above, use the locale for the current domain (.com is English, .nl is Dutch)
      */
 
     let locale: Locale = "en"
@@ -78,17 +89,12 @@ export function createLocalizer(): Localizer {
             /bot|googleother|google-extended|mediapartners|apis-google|google-safety|bingpreview|microsoftpreview|crawler|spider|robot|crawling|inspectiontool/i
         )
     ) {
-        i18n.global.locale.value = locale
+        currentLocale.value = locale
 
-        return {
-            locale,
-            install: (app: any) => {
-                app.provide("locale")
-                app.use(i18n)
-            }
-        }
+        return localizerPlugin
     }
 
+    // if the query parameter changeLocale is set, change the locale to the locale for the current domain
     const query = new URLSearchParams(window.location.search)
 
     if (query.get("changeLocale")) {
@@ -97,6 +103,7 @@ export function createLocalizer(): Localizer {
 
         window.location.search = query.toString()
     } else {
+        // if the locale is set in local storage, use that
         let preferredLocale = window.localStorage.getItem("locale")
 
         if (!LOCALES.includes(preferredLocale as Locale)) {
@@ -119,25 +126,19 @@ export function createLocalizer(): Localizer {
         }
     }
 
-    i18n.global.locale.value = locale
+    currentLocale.value = locale
 
     /**
      * return a Vue-plugin compatible object, with the locale and the install method.
      * The install method will be called by Vue when the plugin is used,
      * and initializes the i18n plugin with the correct locale and messages.
      */
-    return {
-        locale,
-        install: (app: any) => {
-            app.provide("locale", locale)
-            app.use(i18n)
-        }
-    } as Localizer
+    return localizerPlugin
 }
 
 export const i18n = createI18n({
     locale: "en",
-    fallbackLocale: "common",
+    fallbackLocale: ["common", "en"],
     messages: localizedStrings,
     legacy: false,
     fallbackWarn: import.meta.env.DEV,

src/projects/index.ts

@@ -224,7 +224,7 @@ const projects: Project[] = [
             start: new Date(2023, 3),
             end: new Date(2023, 6)
         },
-        image: "/images/projects/rara.png",
+        image: "/images/projects/rara.png"
     })
 ]
 

src/views/HomeView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import GitHubStatsComponent from "@/components/GitHubStatsComponent.vue"
-import { computed, onMounted, ref } from "vue"
+import { computed, onMounted, onUnmounted, ref } from "vue"
 import { useI18n } from "vue-i18n"
 
 const { t } = useI18n()
@@ -38,6 +38,8 @@ const randomString = (length: number) => {
     return result
 }
 
+const timeouts: number[] = []
+
 onMounted(() => {
     const text = t("home.greeting")
 
@@ -49,17 +51,25 @@ onMounted(() => {
 
     // animate the heading
     for (let i = 0; i <= text.length * 10; i++) {
-        setTimeout(
+        const id = setTimeout(
             () => {
                 const slice = text.slice(0, i / 10)
                 const left = randomString(text.length - i / 10).replace(/(.)/g, highlight)
                 heading.value!.innerHTML = slice + left
+                // remove from timeouts array
+                timeouts.splice(timeouts.indexOf(id), 1)
             },
             i * 5 + 100
         )
+        timeouts.push(id)
     }
 })
 
+onUnmounted(() => {
+    resetTimeout && clearTimeout(resetTimeout)
+    timeouts.forEach((id) => clearTimeout(id))
+})
+
 function jump() {
     if (Date.now() - lastClick.value < 1000) {
         clickCount.value += 1