fix: get favicon from absolute path

fix: disable legacy mode of vue-i18n for use with composition API
style: close component tag immediately
2023-09-06 00:20:22 +02:00 · 2023-09-06 00:19:17 +02:00 · 2023-09-06 00:17:56 +02:00 · 2023-09-06 00:17:27 +02:00 · 2023-09-05 22:49:23 +02:00 · 2023-09-04 22:18:12 +02:00
37 changed files with 1963 additions and 4553 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -1,15 +1,15 @@
 /* eslint-env node */
-require("@rushstack/eslint-patch/modern-module-resolution");
+require('@rushstack/eslint-patch/modern-module-resolution')
 module.exports = {
  root: true,
-  extends: [
+  'extends': [
-    "plugin:vue/vue3-essential",
+    'plugin:vue/vue3-essential',
-    "eslint:recommended",
+    'eslint:recommended',
-    "@vue/eslint-config-typescript",
+    '@vue/eslint-config-typescript',
-    "@vue/eslint-config-prettier",
+    '@vue/eslint-config-prettier/skip-formatting'
  ],
  parserOptions: {
-    ecmaVersion: "latest",
+    ecmaVersion: 'latest'
-  },
+  }
-};
+}
--- a/.prettierrc.json
+++ b/.prettierrc.json
@ -1 +1,8 @@
-{}
+{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "none"
 }
--- a/index.html
+++ b/index.html
@ -2,8 +2,8 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="favicon" href="favicon.png" type="image/png" />
+    <link rel="favicon" href="/favicon.png" type="image/png" />
-    <link rel="icon" href="favicon.png" type="image/png" />
+    <link rel="icon" href="/favicon.png" type="image/png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <title>Viktor Kraastav – Reference Page</title>
@ -17,11 +17,13 @@
    <meta name="twitter:description" content="The official reference page for Viktor Kraastav with picture references and in-depth character descriptions" />
    <meta name="twitter:image" content="https://ref.sebin-nyshkim.net/viktor/preview.png" />
-    <meta name="og:type" content="website" />
+    <meta property="og:type" content="website" />
-    <meta name="og:title" content="Viktor Kraastav - Reference Page" />
+    <meta property="og:title" content="Viktor Kraastav - Reference Page" />
-    <meta name="og:url" content="https://ref.sebin-nyshkim.net/viktor/" />
+    <meta property="og:locale" content="en_US" />
-    <meta name="og:image" content="https://ref.sebin-nyshkim.net/viktor/preview.png" />
+    <meta property="og:locale:alternate" content="de_DE" />
-    <meta name="og:description" content="The official reference page for Viktor Kraastav with picture references and in-depth character descriptions" />
+    <meta property="og:url" content="https://ref.sebin-nyshkim.net/viktor/" />
    <meta property="og:image" content="https://ref.sebin-nyshkim.net/viktor/preview.png" />
    <meta property="og:description" content="The official reference page for Viktor Kraastav with picture references and in-depth character descriptions" />
  </head>
  <body>
    <script type="module" src="/src/main.ts"></script>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,37 +1,38 @@
 {
  "name": "viktor-reference",
-  "version": "0.4.1",
+  "version": "0.4.3",
  "scripts": {
    "dev": "vite --host",
    "build": "run-p type-check build-only",
-    "preview": "vite preview --port 4173",
+    "preview": "vite preview",
    "build-only": "vite build",
-    "type-check": "vue-tsc --noEmit",
+    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
-    "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",
    "format": "prettier --write src/"
  },
  "dependencies": {
-    "vue": "^3.2.45",
+    "vue": "^3.3.4",
    "vue-i18n": "^9.2.2",
-    "vue-router": "^4.1.6"
+    "vue-router": "^4.2.4"
  },
  "devDependencies": {
-    "@rushstack/eslint-patch": "^1.2.0",
+    "@rushstack/eslint-patch": "^1.3.3",
-    "@types/node": "^18.15.10",
+    "@tsconfig/node18": "^18.2.1",
-    "@types/vue-markdown": "^2.2.1",
+    "@types/node": "^20.5.9",
-    "@vitejs/plugin-vue": "^4.1.0",
+    "@vitejs/plugin-vue": "^4.3.4",
-    "@vue/eslint-config-prettier": "^7.1.0",
+    "@vue/eslint-config-prettier": "^8.0.0",
-    "@vue/eslint-config-typescript": "^11.0.2",
+    "@vue/eslint-config-typescript": "^11.0.3",
-    "@vue/tsconfig": "^0.1.3",
+    "@vue/tsconfig": "^0.4.0",
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.15",
-    "eslint": "^8.36.0",
+    "eslint": "^8.48.0",
-    "eslint-plugin-vue": "^9.10.0",
+    "eslint-plugin-vue": "^9.17.0",
    "normalize.css": "^8.0.1",
    "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.7",
+    "prettier": "^3.0.3",
-    "sass": "^1.60.0",
+    "sass": "^1.66.1",
-    "typescript": "^4.9.5",
+    "typescript": "^5.2.2",
-    "vite": "^4.2.1",
+    "vite": "^4.4.9",
-    "vite-imagetools": "^4.0.18",
+    "vite-imagetools": "^5.0.8",
-    "vue-tsc": "^1.2.0"
+    "vue-tsc": "^1.8.8"
  }
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@ -1,5 +0,0 @@
 module.exports = {
  plugins: {
    autoprefixer: {}
  }
 }
--- a/src/App.vue
+++ b/src/App.vue
@ -1,70 +1,69 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref } from 'vue'
-import { RouterView } from "vue-router";
+import { RouterView } from 'vue-router'
-import { version } from "../package.json";
+import { version } from '../package.json'
 import router from "@/router";
-import ModalDialog from "@/components/ModalDialog.vue";
+import ModalDialog from '@/components/ModalDialog.vue'
-import LocaleSwitcher from "@/components/LocaleSwitcher.vue";
+import LocaleSwitcher from '@/components/LocaleSwitcher.vue'
-import LinkButton from "@/components/LinkButton.vue";
+import LinkButton from '@/components/LinkButton.vue'
-import SiteNavigation from "@/components/SiteNavigation.vue";
+import SiteNavigation from '@/components/SiteNavigation.vue'
-import NavigationItem from "@/components/NavigationItem.vue";
+import NavigationItem from '@/components/NavigationItem.vue'
-import LanguageButton from "@/components/LanguageButton.vue";
+import LanguageButton from '@/components/LanguageButton.vue'
-import SiteFooter from "@/components/SiteFooter.vue";
+import SiteFooter from '@/components/SiteFooter.vue'
-import LanguageIcon from "@/assets/icons/LanguageIcon.vue";
+import LanguageIcon from '@/assets/icons/LanguageIcon.vue'
 const locales = [
-  { code: "en", name: "English", flag: "🇬🇧" },
+  { code: 'en', name: 'English', flag: '🇬🇧' },
-  { code: "de", name: "Deutsch", flag: "🇩🇪" },
+  { code: 'de', name: 'Deutsch', flag: '🇩🇪' }
-];
+]
-const langswitcher = ref<InstanceType<typeof ModalDialog>>();
+const langswitcher = ref<InstanceType<typeof ModalDialog>>()
 const showModal = () => {
-  langswitcher.value?.showModal();
+  langswitcher.value?.showModal()
-};
+}
 const close = () => {
-  langswitcher.value?.close();
+  langswitcher.value?.close()
-};
+}
 </script>
 <template>
  <ModalDialog id="lang-select" ref="langswitcher">
-    <template #heading>{{ $t("langswitcher.title") }}</template>
+    <template #heading>{{ $t('langswitcher.title') }}</template>
    <template #message>
-      <p>{{ $t("langswitcher.prompt") }}</p>
+      <p>{{ $t('langswitcher.prompt') }}</p>
-      <LocaleSwitcher
+      <LocaleSwitcher id="locale-switch" v-model="$i18n.locale" :locales="locales" />
        id="locale-switch"
        v-model="$i18n.locale"
        :locales="locales"
      />
    </template>
    <template #buttons>
      <LinkButton @click.prevent="close()">
-        {{ $t("langswitcher.buttonClose") }}
+        {{ $t('langswitcher.buttonClose') }}
      </LinkButton>
    </template>
  </ModalDialog>
  <SiteNavigation>
    <NavigationItem
-      v-for="(route, idx) in router.options.routes"
+      v-for="(route, idx) in $router.getRoutes()"
      :key="idx"
      :icon="route.meta?.icon"
      :href="route.path"
-    >{{ $t(`${route.meta?.title}`) }}</NavigationItem>
+    >
      {{ $t(`${route.meta?.title}`) }}
    </NavigationItem>
  </SiteNavigation>
  <main>
    <LanguageButton>
      <LanguageIcon @click.prevent="showModal()" />
    </LanguageButton>
-    <RouterView />
+    <RouterView v-slot="{ Component }">
      <Transition name="fade" mode="out-in">
        <component :is="Component" :key="$route.path" />
      </Transition>
    </RouterView>
  </main>
-  <SiteFooter>
+  <SiteFooter>v{{ version }} &copy; {{ new Date().getFullYear() }} Sebin Nyshkim</SiteFooter>
    v{{ version }} &copy; {{ new Date().getFullYear() }} Sebin Nyshkim
  </SiteFooter>
 </template>
--- a/src/components/AttributionTable.vue
+++ b/src/components/AttributionTable.vue
@ -1,23 +1,23 @@
 <script setup lang="ts">
-import FAIcon from "@/assets/icons/FurAffinityIcon.vue";
+import FAIcon from '@/assets/icons/FurAffinityIcon.vue'
-import TwitterIcon from "@/assets/icons/TwitterIcon.vue";
+import TwitterIcon from '@/assets/icons/TwitterIcon.vue'
 interface ArtistLink {
-  furaffinity?: string;
+  furaffinity?: string
-  twitter?: string;
+  twitter?: string
 }
 interface Attribution {
-  artwork: string;
+  artwork: string
-  artist: string;
+  artist: string
-  links: ArtistLink;
+  links: ArtistLink
 }
 interface Props {
-  attributions: Attribution[];
+  attributions: Attribution[]
 }
-defineProps<Props>();
+defineProps<Props>()
 </script>
 <template>
@ -25,19 +25,15 @@ defineProps<Props>();
    <thead class="attribution-table__head">
      <tr class="attribution-table__row">
        <th class="attribution-table__heading artwork">
-          {{ $t("attributions.artwork.headings[0]") }}
+          {{ $t('attributions.artwork.headings[0]') }}
        </th>
        <th class="attribution-table__heading artist">
-          {{ $t("attributions.artwork.headings[1]") }}
+          {{ $t('attributions.artwork.headings[1]') }}
        </th>
      </tr>
    </thead>
    <tbody class="attribution-table__body">
-      <tr
+      <tr class="attribution-table__row" v-for="(attrib, idx) in attributions" :key="idx">
        class="attribution-table__row"
        v-for="(attrib, idx) in attributions"
        :key="idx"
      >
        <td class="attribution-table__cell artwork">
          <img :src="attrib.artwork" alt="Image attribution" />
        </td>
--- a/src/components/ColorTable.vue
+++ b/src/components/ColorTable.vue
@ -1,33 +1,30 @@
 <script setup lang="ts">
 interface ColorDict {
-  name: string;
+  name: string
-  value: string;
+  value: string
 }
 interface Props {
-  colors: ColorDict[];
+  colors: ColorDict[]
 }
-defineProps<Props>();
+defineProps<Props>()
 </script>
 <template>
  <table class="color-table">
    <thead class="color-table__head">
      <tr class="color-table__row">
-        <th class="color-table__heading name">{{ $t("data.colors.headings[0]") }}</th>
+        <th class="color-table__heading name">{{ $t('data.colors.headings[0]') }}</th>
-        <th class="color-table__heading value">{{ $t("data.colors.headings[1]") }}</th>
+        <th class="color-table__heading value">{{ $t('data.colors.headings[1]') }}</th>
-        <th class="color-table__heading color">{{ $t("data.colors.headings[2]") }}</th>
+        <th class="color-table__heading color">{{ $t('data.colors.headings[2]') }}</th>
      </tr>
    </thead>
    <tbody class="color-table__body">
      <tr class="color-table__row" v-for="(color, idx) in colors" :key="idx">
        <td class="color-table__cell name">{{ $t(color.name) }}</td>
        <td class="color-table__cell value">{{ color.value }}</td>
-        <td
+        <td class="color-table__cell color" :style="{ 'background-color': color.value }"></td>
          class="color-table__cell color"
          :style="{ 'background-color': color.value }"
        ></td>
      </tr>
    </tbody>
  </table>
@ -47,8 +44,16 @@ defineProps<Props>();
    }
    &.value {
-      font-family: Menlo, JetBrains Mono, Source Code Pro, Monaco, Ubuntu Mono,
+      font-family:
-        Roboto Mono, Cascadia Code, Consolas, monospace;
+        Menlo,
        JetBrains Mono,
        Source Code Pro,
        Monaco,
        Ubuntu Mono,
        Roboto Mono,
        Cascadia Code,
        Consolas,
        monospace;
      text-align: center;
    }
  }
--- a/src/components/DataTable.vue
+++ b/src/components/DataTable.vue
@ -1,21 +1,17 @@
 <script setup lang="ts">
 interface Props {
-  headings: string[];
+  headings: string[]
-  data: string[][];
+  data: string[][]
 }
-defineProps<Props>();
+defineProps<Props>()
 </script>
 <template>
  <table class="data-table">
    <thead class="data-table__head">
      <tr class="data-table__row">
-        <th
+        <th class="data-table__heading" v-for="(heading, idx) in headings" :key="idx">
          class="data-table__heading"
          v-for="(heading, idx) in headings"
          :key="idx"
        >
          {{ $t(heading) }}
        </th>
      </tr>
--- a/src/components/LanguageButton.vue
+++ b/src/components/LanguageButton.vue
@ -7,14 +7,19 @@
 <style lang="scss">
 .lang-button {
  position: fixed;
-  inset: 1rem 1rem auto auto;
+  inset: 0.25rem 0.5rem auto auto;
-  display: block;
+  min-width: 3rem;
  max-height: 2.5rem;
  min-width: 3.5rem;
  z-index: 9001;
  color: var(--color-text);
  cursor: pointer;
  &:before {
    position: absolute;
    inset: 0.325rem 0 0.7rem 0;
    content: '';
    background-color: var(--color-background);
    border-radius: 0.3rem;
  }
  svg {
    fill: var(--color-text);
  }
--- a/src/components/LinkButton.vue
+++ b/src/components/LinkButton.vue
@ -1,10 +1,10 @@
 <script setup lang="ts">
 interface Props {
-  href?: string;
+  href?: string
-  download?: boolean | any;
+  download?: boolean | any
 }
-defineProps<Props>();
+defineProps<Props>()
 </script>
 <template>
--- a/src/components/LocaleSwitcher.vue
+++ b/src/components/LocaleSwitcher.vue
@ -1,43 +1,46 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed } from 'vue'
-import CircleCheckIcon from "@/assets/icons/CircleCheckIcon.vue";
+import CircleCheckIcon from '@/assets/icons/CircleCheckIcon.vue'
-import CircleIcon from "@/assets/icons/CircleIcon.vue";
+import CircleIcon from '@/assets/icons/CircleIcon.vue'
 interface LocaleOption {
-  code: string;
+  code: string
-  name: string;
+  name: string
-  flag: string;
+  flag: string
 }
 interface Props {
-  modelValue: string;
+  modelValue: string
-  id: string;
+  id: string
-  locales: LocaleOption[];
+  locales: LocaleOption[]
 }
-const props = defineProps<Props>();
+interface Emits {
-const emit = defineEmits(["update:modelValue"]);
+  (e: 'update:modelValue', value: string): void
 }
 const props = defineProps<Props>()
 const emit = defineEmits<Emits>()
 const selectModel = computed({
  get() {
-    return props.modelValue;
+    return props.modelValue
  },
  set(value) {
-    emit("update:modelValue", value);
+    emit('update:modelValue', value)
-  },
+  }
-});
+})
 </script>
 <template>
  <div class="localeselect">
-    <div v-for="locale in locales" class="localeselect__locale">
+    <div v-for="locale in locales" class="localeselect__locale" :key="`locale-${locale.code}`">
      <input
        type="radio"
        name="lang"
        class="localeselect__input"
        :id="`lang-${locale.code}`"
        :value="locale.code"
        :key="`locale-${locale.code}`"
        v-model="selectModel"
      />
      <label class="localeselect__label" :for="`lang-${locale.code}`">
--- a/src/components/ModalDialog.vue
+++ b/src/components/ModalDialog.vue
@ -1,27 +1,27 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref } from 'vue'
 interface Props {
-  id: string;
+  id: string
 }
-defineProps<Props>();
+defineProps<Props>()
-const modal = ref<HTMLDialogElement>();
+const modal = ref<HTMLDialogElement>()
 const showModal = () => {
-  modal.value?.showModal();
+  modal.value?.showModal()
-  document.body.inert = true;
+  document.body.inert = true
-  document.body.classList.add("scroll-lock");
+  document.body.classList.add('scroll-lock')
-};
+}
 const close = () => {
-  modal.value?.close();
+  modal.value?.close()
-  document.body.inert = false;
+  document.body.inert = false
-  document.body.classList.remove("scroll-lock");
+  document.body.classList.remove('scroll-lock')
-};
+}
-defineExpose({ showModal, close });
+defineExpose({ showModal, close })
 </script>
 <template>
--- a/src/components/NavigationItem.vue
+++ b/src/components/NavigationItem.vue
@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { RouterLink } from "vue-router";
+import { RouterLink } from 'vue-router'
 interface Props {
-  icon: unknown | object;
+  icon: unknown | object
-  href: string;
+  href: string
 }
-defineProps<Props>();
+defineProps<Props>()
 </script>
 <template>
  <RouterLink class="navigation__link" :to="href">
-    <component class="navigation__link-icon" :is="icon"></component>
+    <component class="navigation__link-icon" :is="icon" />
    <span class="navigation__link-text">
      <slot></slot>
    </span>
--- a/src/components/RefImage.vue
+++ b/src/components/RefImage.vue
@ -1,17 +1,14 @@
 <script setup lang="ts">
 interface Props {
-  dropshadow?: boolean;
+  dropshadow?: boolean
 }
-defineProps<Props>();
+defineProps<Props>()
 </script>
 <template>
  <figure class="figure">
-    <picture
+    <picture class="figure__image" :class="{ 'figure__image--dropshadow': dropshadow }">
      class="figure__image"
      :class="{ 'figure__image--dropshadow': dropshadow }"
    >
      <slot></slot>
    </picture>
--- a/src/components/SiteNavigation.vue
+++ b/src/components/SiteNavigation.vue
@ -1,8 +1,3 @@
 <script setup lang="ts">
 import router from "@/router";
 import { RouterLink } from "vue-router";
 </script>
 <template>
  <nav class="navigation">
    <div class="navigation__list">
--- a/src/components/TimelineItem.vue
+++ b/src/components/TimelineItem.vue
@ -26,12 +26,11 @@
    position: relative;
    &:not(:last-child):before {
-      content: "";
+      content: '';
      position: absolute;
      inset: var(--timeline-stroke-position-odd);
      height: var(--timeline-stroke-length);
-      border-left: var(--timeline-stroke-thickness) solid
+      border-left: var(--timeline-stroke-thickness) solid var(--timeline-stroke-color);
        var(--timeline-stroke-color);
    }
    &:nth-child(odd) {
@ -58,8 +57,7 @@
      background-color: var(--timeline-circle-background);
      margin: 0;
-      border: var(--timeline-stroke-thickness) solid
+      border: var(--timeline-stroke-thickness) solid var(--timeline-stroke-color);
        var(--timeline-stroke-color);
      border-radius: 100%;
      padding: var(--timeline-circle-padding);
--- a/src/components/TimelineList.vue
+++ b/src/components/TimelineList.vue
@ -10,8 +10,7 @@
  position: relative;
  margin: 0 auto;
-  padding: 0 var(--container-spacing-right-safe) 0
+  padding: 0 var(--container-spacing-right-safe) 0 var(--container-spacing-left-safe);
    var(--container-spacing-left-safe);
  list-style: none;
--- a/src/components/WelcomeHeader.vue
+++ b/src/components/WelcomeHeader.vue
@ -2,13 +2,9 @@
  <header class="welcome">
    <div class="welcome__image">
      <picture>
-        <source
+        <source srcset="@/assets/viktor-avatar.png?w=400;800&format=avif&quality=75&as=srcset" />
-          srcset="@/assets/viktor-avatar.png?w=400;800&avif&quality=75&srcset"
+        <source srcset="@/assets/viktor-avatar.png?w=400;800&format=webp&quality=100&as=srcset" />
-        />
+        <img src="@/assets/viktor-avatar.png?w=400&format=png" alt="Viktor Avatar" />
        <source
          srcset="@/assets/viktor-avatar.png?w=400;800&webp&quality=100&srcset"
        />
        <img src="@/assets/viktor-avatar.png?w=400&png" alt="Viktor Avatar" />
      </picture>
    </div>
--- a/src/lang/index.ts
+++ b/src/lang/index.ts
@ -1,7 +1,7 @@
-import en from "./translations/en.json";
+import en from './translations/en.json'
-import de from "./translations/de.json";
+import de from './translations/de.json'
 export default {
  en,
-  de,
+  de
-};
+}
--- a/src/main.ts
+++ b/src/main.ts
@ -1,21 +1,24 @@
-import { createApp } from "vue";
+import { createApp } from 'vue'
-import App from "./App.vue";
+import App from './App.vue'
-import router from "./router";
+import router from './router'
-import { createI18n } from "vue-i18n";
+import { createI18n } from 'vue-i18n'
-import messages from "./lang";
+import messages from './lang'
-import "normalize.css";
+import 'normalize.css'
-import "@/scss/main.scss";
+import '@/scss/main.scss'
-const i18n = createI18n({
+type MessageSchema = typeof messages.en
  locale: "en",
  fallbackLocale: "en",
  messages,
 });
-const app = createApp(App);
+const i18n = createI18n<[MessageSchema], 'en' | 'de'>({
  legacy: false,
  locale: 'en',
  fallbackLocale: 'en',
  messages
 })
-app.use(router);
+const app = createApp(App)
 app.use(i18n);
-app.mount("body");
+app.use(router)
 app.use(i18n)
 app.mount('body')
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -1,64 +1,68 @@
-import { createRouter, createWebHistory } from "vue-router";
+import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from "../views/HomeView.vue";
+import HomeView from '@/views/HomeView.vue'
-import HomeIcon from "@/assets/icons/HomeIcon.vue";
+import HomeIcon from '@/assets/icons/HomeIcon.vue'
-import IdCardIcon from "@/assets/icons/IdCardIcon.vue";
+import IdCardIcon from '@/assets/icons/IdCardIcon.vue'
-import PaletteIcon from "@/assets/icons/PaletteIcon.vue";
+import PaletteIcon from '@/assets/icons/PaletteIcon.vue'
-import BriefcaseIcon from "@/assets/icons/BriefcaseIcon.vue";
+import BriefcaseIcon from '@/assets/icons/BriefcaseIcon.vue'
-import CircleInfoIcon from "@/assets/icons/CircleInfoIcon.vue";
+import CircleInfoIcon from '@/assets/icons/CircleInfoIcon.vue'
 const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  scrollBehavior: () => {
-    return { top: 0 };
+    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({ top: 0 })
      }, 500)
    })
  },
  routes: [
    {
-      path: "/",
+      path: '/',
-      name: "home",
+      name: 'home',
      component: HomeView,
      meta: {
-        title: "nav.home",
+        title: 'nav.home',
-        icon: HomeIcon,
+        icon: HomeIcon
-      },
+      }
    },
    {
-      path: "/general",
+      path: '/general',
-      name: "general",
+      name: 'general',
-      component: () => import("@/views/GeneralView.vue"),
+      component: () => import('@/views/GeneralView.vue'),
      meta: {
-        title: "nav.general",
+        title: 'nav.general',
-        icon: IdCardIcon,
+        icon: IdCardIcon
-      },
+      }
    },
    {
-      path: "/anatomy",
+      path: '/anatomy',
-      name: "anatomy",
+      name: 'anatomy',
-      component: () => import("@/views/AnatomyView.vue"),
+      component: () => import('@/views/AnatomyView.vue'),
      meta: {
-        title: "nav.anatomy",
+        title: 'nav.anatomy',
-        icon: PaletteIcon,
+        icon: PaletteIcon
-      },
+      }
    },
    {
-      path: "/career-path",
+      path: '/career-path',
-      name: "career-path",
+      name: 'career-path',
-      component: () => import("@/views/CareerPathView.vue"),
+      component: () => import('@/views/CareerPathView.vue'),
      meta: {
-        title: "nav.careerPath",
+        title: 'nav.careerPath',
-        icon: BriefcaseIcon,
+        icon: BriefcaseIcon
-      },
+      }
    },
    {
-      path: "/attributions",
+      path: '/attributions',
-      name: "attributions",
+      name: 'attributions',
-      component: () => import("@/views/AttributionsView.vue"),
+      component: () => import('@/views/AttributionsView.vue'),
      meta: {
-        title: "nav.attributions",
+        title: 'nav.attributions',
-        icon: CircleInfoIcon,
+        icon: CircleInfoIcon
-      },
+      }
-    },
+    }
-  ],
+  ]
-});
+})
-export default router;
+export default router
--- a/src/scss/base.scss
+++ b/src/scss/base.scss
@ -1,4 +1,4 @@
-@import "fontfaces";
+@import 'fontfaces';
 /* theme colors */
 :root {
@ -33,8 +33,8 @@
 /* general purpose variables */
 :root {
-  --font-family-copy: "Arvo", sans-serif;
+  --font-family-copy: 'Arvo', sans-serif;
-  --font-family-headings: "Secular One", serif;
+  --font-family-headings: 'Secular One', serif;
  --font-size: 18px;
  --text-line-height: 1.5;
@ -43,6 +43,8 @@
  --page-background-image: url(@/assets/layered-waves-light.svg);
  --page-background-image-height: 100vw;
  --page-background-image-max-height: 50vh;
  --page-transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  --page-transform: translateY(5em);
  --paragraph-margin: 1rem;
@ -54,8 +56,7 @@
  --container-spacing-bottom-safe: max(1rem, env(safe-area-inset-bottom));
  --container-spacing-left-safe: max(1rem, env(safe-area-inset-left));
-  --textblock-padding: 0 var(--container-spacing-right-safe) 0
+  --textblock-padding: 0 var(--container-spacing-right-safe) 0 var(--container-spacing-left-safe);
    var(--container-spacing-left-safe);
  --welcome-padding: 2rem var(--container-spacing-right-safe) 2rem
    var(--container-spacing-left-safe);
@ -75,19 +76,14 @@
  --navigation-height: auto;
  --navigation-padding: 0 0 0 env(safe-area-inset-left);
-  --navigation-cutout: 0 0
+  --navigation-cutout: 0 0 calc(var(--navigation-size) + env(safe-area-inset-bottom)) 0;
-    calc(var(--navigation-size) + env(safe-area-inset-bottom)) 0;
+  --navigation-cutout-page-background: calc(var(--navigation-size) + env(safe-area-inset-bottom));
  --navigation-cutout-page-background: calc(
    var(--navigation-size) + env(safe-area-inset-bottom)
  );
  --navigation-cutout-main: 0;
  --navigation-link-display: none;
  --navigation-link-flex: 1 0 var(--navigation-size);
  --navigation-link-justify: center;
-  --navigation-link-height: calc(
+  --navigation-link-height: calc(var(--navigation-size) + env(safe-area-inset-bottom));
    var(--navigation-size) + env(safe-area-inset-bottom)
  );
  --navigation-link-padding: 0 0 env(safe-area-inset-bottom) 0;
  --navigation-link-icon-size: calc(var(--navigation-size) / 2);
  --navigation-link-icon-spacing: calc(var(--navigation-size) * 0.25);
@ -118,13 +114,10 @@
  --timeline-item-margin-even: var(--timeline-item-margin);
  --timeline-item-text-align-even: left;
  --timeline-item-content-padding-odd: 0 0 0 var(--container-spacing-left-safe);
-  --timeline-item-content-padding-even: var(
+  --timeline-item-content-padding-even: var(--timeline-item-content-padding-odd);
    --timeline-item-content-padding-odd
  );
  --table-border-radius: 1rem;
-  --table-outer-spacing: 0 var(--container-spacing-right-safe) 0
+  --table-outer-spacing: 0 var(--container-spacing-right-safe) 0 var(--container-spacing-left-safe);
    var(--container-spacing-left-safe);
  --table-cell-padding: 0.25rem 0.5rem;
 }
@ -225,11 +218,9 @@
    --page-background-image-max-height: 100vh;
    --color-table-color-cell-width: 10rem;
-    --textblock-padding: 0 var(--container-spacing-right-safe) 0
+    --textblock-padding: 0 var(--container-spacing-right-safe) 0 var(--container-spacing-left-safe);
      var(--container-spacing-left-safe);
-    --navigation-cutout: 0 0 0
+    --navigation-cutout: 0 0 0 calc(var(--navigation-size) + env(safe-area-inset-left));
      calc(var(--navigation-size) + env(safe-area-inset-left));
    --navigation-cutout-page-background: 0;
    --navigation-cutout-main: var(--navigation-cutout);
@ -238,9 +229,7 @@
    --navigation-align: stretch;
    --navigation-position: 0 auto 0 0;
-    --navigation-width: calc(
+    --navigation-width: calc(var(--navigation-size) + env(safe-area-inset-left));
      var(--navigation-size) + env(safe-area-inset-left)
    );
    --navigation-width-expanded: var(--navigation-width);
    --navigation-link-display: block;
@ -271,10 +260,8 @@
    --timeline-stroke-length: calc(100% - var(--timeline-circle-size));
    --timeline-stroke-position-even: var(--timeline-stroke-position-top)
      var(--timeline-stroke-position-horizontal) auto auto;
-    --timeline-item-margin-odd: 0 0 0
+    --timeline-item-margin-odd: 0 0 0 calc(50% - var(--timeline-circle-size) / 2);
-      calc(50% - var(--timeline-circle-size) / 2);
+    --timeline-item-margin-even: 0 calc(50% - var(--timeline-circle-size) / 2) 0 0;
    --timeline-item-margin-even: 0 calc(50% - var(--timeline-circle-size) / 2) 0
      0;
    --timeline-item-flex-order: 1;
    --timeline-item-content-margin-odd: 0 0 0 1rem;
    --timeline-item-content-margin-even: 0 1rem 0 0;
@ -298,8 +285,13 @@
@media (hover: hover) and (min-width: 50em) {
  :root {
-    --navigation-width-expanded: calc(
+    --navigation-width-expanded: calc(var(--navigation-size) * 3.75 + env(safe-area-inset-left));
-      var(--navigation-size) * 3.75 + env(safe-area-inset-left)
+  }
-    );
+}
@media (prefers-reduced-motion) {
  :root {
    --page-transition: opacity 0.5s ease;
    --page-transform: none;
  }
 }
--- a/src/scss/fontfaces.scss
+++ b/src/scss/fontfaces.scss
@ -1,2 +1,2 @@
-@import "@/assets/fonts/arvo/arvo";
+@import '@/assets/fonts/arvo/arvo';
-@import "@/assets/fonts/secular-one/secular-one";
+@import '@/assets/fonts/secular-one/secular-one';
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@ -1,4 +1,4 @@
-@import "@/scss/base";
+@import '@/scss/base';
 :root {
  font-family: var(--font-family-copy);
@ -19,7 +19,9 @@ body {
  min-height: 100vh;
  color: var(--color-text);
  background: var(--color-background-body);
-  transition: color 0.5s, background-color 0.5s;
+  transition:
    color 0.5s,
    background-color 0.5s;
  line-height: var(--text-line-height);
  text-rendering: optimizeLegibility;
@ -41,7 +43,7 @@ main {
  &:after {
    display: block;
-    content: "";
+    content: '';
    position: sticky;
    inset: auto 0 var(--navigation-cutout-page-background) 0;
@ -95,8 +97,7 @@ a {
  &:hover {
    color: var(--color-link-text-hover);
-    box-shadow: inset 0 calc(var(--link-inset-box-shadow) * -1) 0 0
+    box-shadow: inset 0 calc(var(--link-inset-box-shadow) * -1) 0 0 var(--color-link-text-underline);
      var(--color-link-text-underline);
  }
 }
@ -170,3 +171,14 @@ table {
    }
  }
 }
 .fade-enter-active,
 .fade-leave-active {
  transition: var(--page-transition);
 }
 .fade-enter-from,
 .fade-leave-to {
  opacity: 0;
  transform: var(--page-transform);
 }
--- a/src/views/AnatomyView.vue
+++ b/src/views/AnatomyView.vue
@ -1,162 +1,165 @@
 <script setup lang="ts">
-import RefImage from "@/components/RefImage.vue";
+import RefImage from '@/components/RefImage.vue'
-import ColorTable from "@/components/ColorTable.vue";
+import ColorTable from '@/components/ColorTable.vue'
 const colors = [
-  { name: "data.colors.front", value: "#e7c7b1" },
+  { name: 'data.colors.front', value: '#e7c7b1' },
-  { name: "data.colors.limbs", value: "#493428" },
+  { name: 'data.colors.limbs', value: '#493428' },
-  { name: "data.colors.back", value: "#422322" },
+  { name: 'data.colors.back', value: '#422322' },
-  { name: "data.colors.spine", value: "#341c1c" },
+  { name: 'data.colors.spine', value: '#341c1c' },
-  { name: "data.colors.tissue", value: "#6bb9db" },
+  { name: 'data.colors.tissue', value: '#6bb9db' },
-  { name: "data.colors.spikes", value: "#f8ebdd" },
+  { name: 'data.colors.spikes', value: '#f8ebdd' },
-  { name: "data.colors.eyesPrimary", value: "#a7eef1" },
+  { name: 'data.colors.eyesPrimary', value: '#a7eef1' },
-  { name: "data.colors.eyesSecondary", value: "#6dabd1" },
+  { name: 'data.colors.eyesSecondary', value: '#6dabd1' }
-];
+]
 </script>
 <template>
-  <section>
+  <article>
-    <h1>{{ $t(`${$route.meta.title}`) }}</h1>
+    <section>
-  </section>
+      <h1>{{ $t(`${$route.meta.title}`) }}</h1>
    </section>
-  <RefImage dropshadow>
+    <RefImage dropshadow>
-    <template v-if="$route.query.nsfw">
+      <template v-if="$route.query.nsfw">
-      <source
+        <source
-        srcset="
+          srcset="
-          @/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&avif&quality=75&withoutEnlargement&srcset
+            @/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=avif&quality=75&withoutEnlargement&as=srcset
-        "
+          "
-        sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
+          sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
-        type="image/avif"
+          type="image/avif"
-      />
+        />
-      <source
+        <source
-        srcset="
+          srcset="
-          @/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&webp&quality=100&withoutEnlargement&srcset
+            @/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=webp&quality=100&withoutEnlargement&as=srcset
-        "
+          "
-        sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
+          sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
-        type="image/webp"
+          type="image/webp"
-      />
+        />
-      <img
+        <img
-        srcset="
+          srcset="
-          @/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&png&withoutEnlargement&srcset
+            @/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=png&withoutEnlargement&as=srcset
-        "
+          "
-        sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
+          sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
-        alt="Viktor Ref by sabertoofs"
+          alt="Viktor Ref by sabertoofs"
-        loading="lazy"
+          loading="lazy"
-      />
+        />
-    </template>
+      </template>
-    <template v-else>
+      <template v-else>
-      <source
+        <source
-        srcset="
+          srcset="
-          @/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&avif&quality=75&withoutEnlargement&srcset
+            @/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=avif&quality=75&withoutEnlargement&as=srcset
-        "
+          "
-        sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
+          sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
-        type="image/avif"
+          type="image/avif"
-      />
+        />
-      <source
+        <source
-        srcset="
+          srcset="
-          @/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&webp&quality=100&withoutEnlargement&srcset
+            @/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=webp&quality=100&withoutEnlargement&as=srcset
-        "
+          "
-        sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
+          sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
-        type="image/webp"
+          type="image/webp"
-      />
+        />
-      <img
+        <img
-        srcset="
+          srcset="
-          @/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&png&withoutEnlargement&srcset
+            @/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=png&withoutEnlargement&as=srcset
-        "
+          "
-        sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
+          sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
-        :alt="`${$t('anatomy.images.back.caption')} by sabertoofs`"
+          :alt="`${$t('anatomy.images.back.caption')} by sabertoofs`"
-        loading="lazy"
+          loading="lazy"
-      />
+        />
-    </template>
+      </template>
-    <template #caption>
+      <template #caption>
-      {{ $t('anatomy.images.back.caption') }} &copy; <a href="http://twitter.com/sabertoofs">sabertoofs</a>
+        {{ $t('anatomy.images.back.caption') }} &copy;
-    </template>
+        <a href="http://twitter.com/sabertoofs">sabertoofs</a>
-  </RefImage>
+      </template>
    </RefImage>
-  <ColorTable :colors="colors"></ColorTable>
+    <ColorTable :colors="colors"></ColorTable>
-  <section>
+    <section>
-    <p v-for="p in $tm('anatomy.paragraphs[0]')">{{ p }}</p>
+      <p v-for="(p, i) in $tm('anatomy.paragraphs[0]')" :key="i">{{ p }}</p>
-  </section>
+    </section>
-  <RefImage dropshadow>
+    <RefImage dropshadow>
-    <template v-if="$route.query.nsfw">
+      <template v-if="$route.query.nsfw">
-      <source
+        <source
-        srcset="
+          srcset="
-          @/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&avif&quality=75&withoutEnlargement&srcset
+            @/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=avif&quality=75&withoutEnlargement&as=srcset
-        "
+          "
-        sizes="(min-width: 64em) 710px,
+          sizes="(min-width: 64em) 710px,
               (min-width: 50em) 590px,
               (min-width: 27em) 530px,
               430px"
-        type="image/avif"
+          type="image/avif"
-      />
+        />
-      <source
+        <source
-        srcset="
+          srcset="
-          @/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&webp&quality=100&withoutEnlargement&srcset
+            @/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=webp&quality=100&withoutEnlargement&as=srcset
-        "
+          "
-        sizes="(min-width: 64em) 710px,
+          sizes="(min-width: 64em) 710px,
               (min-width: 50em) 590px,
               (min-width: 27em) 530px,
               430px"
-        type="image/webp"
+          type="image/webp"
-      />
+        />
-      <img
+        <img
-        srcset="
+          srcset="
-          @/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&png&withoutEnlargement&srcset
+            @/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=png&withoutEnlargement&as=srcset
-        "
+          "
-        sizes="(min-width: 64em) 710px,
+          sizes="(min-width: 64em) 710px,
               (min-width: 50em) 590px,
               (min-width: 27em) 530px,
               430px"
-        alt="Viktor frontal shot by sabertoofs"
+          alt="Viktor frontal shot by sabertoofs"
-        loading="lazy"
+          loading="lazy"
-      />
+        />
-    </template>
+      </template>
-    <template v-else>
+      <template v-else>
-      <source
+        <source
-        srcset="
+          srcset="
-          @/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&avif&quality=75&withoutEnlargement&srcset
+            @/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=avif&quality=75&withoutEnlargement&as=srcset
-        "
+          "
-        sizes="(min-width: 64em) 710px,
+          sizes="(min-width: 64em) 710px,
               (min-width: 50em) 590px,
               (min-width: 27em) 530px,
               430px"
-        type="image/avif"
+          type="image/avif"
-      />
+        />
-      <source
+        <source
-        srcset="
+          srcset="
-          @/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&webp&quality=100&withoutEnlargement&srcset
+            @/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=webp&quality=100&withoutEnlargement&as=srcset
-        "
+          "
-        sizes="(min-width: 64em) 710px,
+          sizes="(min-width: 64em) 710px,
               (min-width: 50em) 590px,
               (min-width: 27em) 530px,
               430px"
-        type="image/webp"
+          type="image/webp"
-      />
+        />
-      <img
+        <img
-        srcset="
+          srcset="
-          @/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&png&withoutEnlargement&srcset
+            @/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=png&withoutEnlargement&as=srcset
-        "
+          "
-        sizes="(min-width: 64em) 710px,
+          sizes="(min-width: 64em) 710px,
               (min-width: 50em) 590px,
               (min-width: 27em) 530px,
               430px"
-        :alt="`${$t('anatomy.images.front.caption')} by sabertoofs`"
+          :alt="`${$t('anatomy.images.front.caption')} by sabertoofs`"
-        loading="lazy"
+          loading="lazy"
-      />
+        />
-    </template>
+      </template>
-    <template #caption>
+      <template #caption>
-      {{ $t("anatomy.images.front.caption") }} &copy;
+        {{ $t('anatomy.images.front.caption') }} &copy;
-      <a href="http://twitter.com/sabertoofs">sabertoofs</a>
+        <a href="http://twitter.com/sabertoofs">sabertoofs</a>
-    </template>
+      </template>
-  </RefImage>
+    </RefImage>
-  <section>
+    <section>
-    <p v-for="p in $tm('anatomy.paragraphs[1]')">{{ p }}</p>
+      <p v-for="(p, i) in $tm('anatomy.paragraphs[1]')" :key="i">{{ p }}</p>
-  </section>
+    </section>
  </article>
 </template>
--- a/src/views/AttributionsView.vue
+++ b/src/views/AttributionsView.vue
@ -1,121 +1,103 @@
 <script setup lang="ts">
-import AttributionTable from "@/components/AttributionTable.vue";
+import AttributionTable from '@/components/AttributionTable.vue'
-import ViktorRefAlpha from "@/assets/viktor-ref-SFW-alpha.png?w=400&webp&quality=100&imagetools";
+import ViktorRefAlpha from '@/assets/viktor-ref-SFW-alpha.png?w=400&format=webp&quality=100&imagetools'
-import ViktorFront from "@/assets/viktor-front-SFW-alpha.png?w=400&webp&quality=100&imagetools";
+import ViktorFront from '@/assets/viktor-front-SFW-alpha.png?w=400&format=webp&quality=100&imagetools'
 const attributions = [
  {
    artwork: ViktorRefAlpha,
-    artist: "sabertoofs",
+    artist: 'sabertoofs',
    links: {
-      furaffinity: "https://www.furaffinity.net/user/sabertoofs",
+      furaffinity: 'https://www.furaffinity.net/user/sabertoofs',
-      twitter: "https://twitter.com/sabertoofs",
+      twitter: 'https://twitter.com/sabertoofs'
-    },
+    }
  },
  {
    artwork: ViktorFront,
-    artist: "sabertoofs",
+    artist: 'sabertoofs',
    links: {
-      furaffinity: "https://www.furaffinity.net/user/sabertoofs",
+      furaffinity: 'https://www.furaffinity.net/user/sabertoofs',
-      twitter: "https://twitter.com/sabertoofs",
+      twitter: 'https://twitter.com/sabertoofs'
-    },
+    }
-  },
+  }
-];
+]
 </script>
 <template>
-  <section>
+  <article>
-    <h1>{{ $t(`${$route.meta.title}`) }}</h1>
+    <section>
-    <h2>{{ $t("attributions.artwork.heading") }}</h2>
+      <h1>{{ $t(`${$route.meta.title}`) }}</h1>
-  </section>
+      <h2>{{ $t('attributions.artwork.heading') }}</h2>
-  <AttributionTable :attributions="attributions" />
+    </section>
-  <section>
+    <AttributionTable :attributions="attributions" />
-    <h2>{{ $t("attributions.other.heading") }}</h2>
+    <section>
-  </section>
+      <h2>{{ $t('attributions.other.heading') }}</h2>
-  <table>
+    </section>
-    <thead>
+    <table>
-      <tr>
+      <thead>
-        <th>{{ $t("attributions.other.headings[0]") }}</th>
+        <tr>
-        <th>{{ $t("attributions.other.headings[1]") }}</th>
+          <th>{{ $t('attributions.other.headings[0]') }}</th>
-      </tr>
+          <th>{{ $t('attributions.other.headings[1]') }}</th>
-    </thead>
+        </tr>
-    <tbody>
+      </thead>
-      <tr>
+      <tbody>
-        <td>{{ $t("attributions.other.icons[0]") }}</td>
+        <tr>
-        <td>
+          <td>{{ $t('attributions.other.icons[0]') }}</td>
-          <a
+          <td>
-            href="https://fontawesome.com/license/free"
+            <a
-            target="_blank"
+              href="https://fontawesome.com/license/free"
-            rel="noopener noreferrer"
+              target="_blank"
-          >
+              rel="noopener noreferrer"
-            Font Awesome
+            >
-          </a>
+              Font Awesome
-        </td>
+            </a>
-      </tr>
+          </td>
-      <tr>
+        </tr>
-        <td>{{ $t("attributions.other.headingFont[0]") }}</td>
+        <tr>
-        <td>
+          <td>{{ $t('attributions.other.headingFont[0]') }}</td>
-          <a
+          <td>
-            href="https://github.com/MichalSahar/Secular"
+            <a
-            target="_blank"
+              href="https://github.com/MichalSahar/Secular"
-            rel="noopener noreferrer"
+              target="_blank"
-          >
+              rel="noopener noreferrer"
-            Secular One
+            >
-          </a>
+              Secular One
-          {{ $t("attributions.other.headingFont[1]") }}
+            </a>
-          <a
+            {{ $t('attributions.other.headingFont[1]') }}
-            href="https://github.com/MichalSahar"
+            <a href="https://github.com/MichalSahar" target="_blank" rel="noopener noreferrer">
-            target="_blank"
+              Michal Sahar
-            rel="noopener noreferrer"
+            </a>
-          >
+          </td>
-            Michal Sahar
+        </tr>
-          </a>
+        <tr>
-        </td>
+          <td>{{ $t('attributions.other.copyFont[0]') }}</td>
-      </tr>
+          <td>
-      <tr>
+            <a
-        <td>{{ $t("attributions.other.copyFont[0]") }}</td>
+              href="https://antonkoovit.com/typefaces/arvo"
-        <td>
+              target="_blank"
-          <a
+              rel="noopener noreferrer"
-            href="https://antonkoovit.com/typefaces/arvo"
+            >
-            target="_blank"
+              Arvo
-            rel="noopener noreferrer"
+            </a>
-          >
+            {{ $t('attributions.other.copyFont[1]') }}
-            Arvo
+            <a href="https://antonkoovit.com/" target="_blank" rel="noopener noreferrer">
-          </a>
+              Anton Koovit
-          {{ $t("attributions.other.copyFont[1]") }}
+            </a>
-          <a
+          </td>
-            href="https://antonkoovit.com/"
+        </tr>
-            target="_blank"
+        <tr>
-            rel="noopener noreferrer"
+          <td>{{ $t('attributions.other.background[0]') }}</td>
-          >
+          <td>
-            Anton Koovit
+            {{ $t('attributions.other.background[1][0]') }}
-          </a>
+            <a href="https://haikei.app/" target="_blank" rel="noopener noreferrer">Haikei</a>
-        </td>
+            {{ $t('attributions.other.background[1][1]') }}
-      </tr>
+            <a href="https://zcreativelabs.com/" target="_blank" rel="noopener noreferrer">
-      <tr>
+              z creative labs
-        <td>{{ $t("attributions.other.background[0]") }}</td>
+            </a>
-        <td>
+          </td>
-          {{ $t("attributions.other.background[1][0]") }}
+        </tr>
-          <a
+      </tbody>
-            href="https://haikei.app/"
+    </table>
-            target="_blank"
+  </article>
            rel="noopener noreferrer"
          >
            Haikei
          </a>
          {{ $t("attributions.other.background[1][1]") }}
          <a
            href="https://zcreativelabs.com/"
            target="_blank"
            rel="noopener noreferrer"
          >
            z creative labs
          </a>
        </td>
      </tr>
    </tbody>
  </table>
 </template>
 <style lang="scss"></style>
--- a/src/views/CareerPathView.vue
+++ b/src/views/CareerPathView.vue
@ -1,13 +1,18 @@
 <script setup lang="ts">
-import TimelineList from "@/components/TimelineList.vue";
+import TimelineList from '@/components/TimelineList.vue'
-import TimelineItem from "@/components/TimelineItem.vue";
+import TimelineItem from '@/components/TimelineItem.vue'
-import WhiskeyGlassIcon from "@/assets/icons/WhiskeyGlassIcon.vue";
+import WhiskeyGlassIcon from '@/assets/icons/WhiskeyGlassIcon.vue'
-import TreeIcon from "@/assets/icons/TreeIcon.vue";
+import TreeIcon from '@/assets/icons/TreeIcon.vue'
-import CarIcon from "@/assets/icons/CarIcon.vue";
+import CarIcon from '@/assets/icons/CarIcon.vue'
-import HelmetSafetyIcon from "@/assets/icons/HelmetSafetyIcon.vue";
+import HelmetSafetyIcon from '@/assets/icons/HelmetSafetyIcon.vue'
-import IndustryIcon from "@/assets/icons/IndustryIcon.vue";
+import IndustryIcon from '@/assets/icons/IndustryIcon.vue'
-import TruckIcon from "@/assets/icons/TruckIcon.vue";
+import TruckIcon from '@/assets/icons/TruckIcon.vue'
-import BoxesIcon from "@/assets/icons/BoxesIcon.vue";
+import BoxesIcon from '@/assets/icons/BoxesIcon.vue'
 interface Job {
  title: string
  desc: string
 }
 const jobIcons = [
  WhiskeyGlassIcon,
@ -16,25 +21,27 @@ const jobIcons = [
  HelmetSafetyIcon,
  IndustryIcon,
  TruckIcon,
-  BoxesIcon,
+  BoxesIcon
-];
+]
 </script>
 <template>
-  <section>
+  <article>
-    <h1>{{ $t(`${$route.meta.title}`) }}</h1>
+    <section>
-    <p v-for="p in $tm('career.paragraphs')">{{ p }}</p>
+      <h1>{{ $t(`${$route.meta.title}`) }}</h1>
-  </section>
+      <p v-for="(p, i) in $tm('career.paragraphs')" :key="i">{{ p }}</p>
    </section>
-  <TimelineList>
+    <TimelineList>
-    <TimelineItem v-for="(job, idx) in $tm('career.jobs')">
+      <TimelineItem v-for="(job, idx) in ($tm('career.jobs') as Job[])" :key="idx">
-      <template #icon>
+        <template #icon>
-        <component :is="jobIcons[idx as number]"></component>
+          <component :is="jobIcons[idx as number]"></component>
-      </template>
+        </template>
-      <template #headline>{{ job.title }}</template>
+        <template #headline>{{ job.title }}</template>
-      <template #content>
+        <template #content>
-        <p>{{ job.desc }}</p>
+          <p>{{ job.desc }}</p>
-      </template>
+        </template>
-    </TimelineItem>
+      </TimelineItem>
-  </TimelineList>
+    </TimelineList>
  </article>
 </template>
--- a/src/views/GeneralView.vue
+++ b/src/views/GeneralView.vue
@ -1,71 +1,73 @@
 <script setup lang="ts">
-import DataTable from "@/components/DataTable.vue";
+import DataTable from '@/components/DataTable.vue'
-const dob = new Date("1987-12-08");
+const dob = new Date('1987-12-08')
-const locale = "en-US";
+const locale = 'en-US'
 const dateFormat = new Intl.DateTimeFormat(locale, {
-  year: "numeric",
+  year: 'numeric',
-  month: "long",
+  month: 'long',
-  day: "2-digit",
+  day: '2-digit'
-});
+})
-const height = 227;
+const height = 227
-const weight = 175;
+const weight = 175
 const toImperial = (cm: number): string => {
-  const realFeet = (cm * 0.3937) / 12;
+  const realFeet = (cm * 0.3937) / 12
-  const feet = Math.floor(realFeet);
+  const feet = Math.floor(realFeet)
-  const inches = Math.round((realFeet - feet) * 12);
+  const inches = Math.round((realFeet - feet) * 12)
-  return `${feet}'${inches}"`;
+  return `${feet}'${inches}"`
-};
+}
 const toInch = (cm: number): string => {
-  return `${Math.round(cm / 2.45)} in`;
+  return `${Math.round(cm / 2.45)} in`
-};
+}
 const toLbs = (kg: number): number => {
-  const nearExact = kg / 0.45359237;
+  const nearExact = kg / 0.45359237
-  const lbs = Math.floor(nearExact);
+  const lbs = Math.floor(nearExact)
-  return lbs;
+  return lbs
-};
+}
-const heads = ["data.general.heading[0]", "data.general.heading[1]"];
+const heads = ['data.general.heading[0]', 'data.general.heading[1]']
 const data = [
-  ["data.general.fullName[0]", "data.general.fullName[1]"],
+  ['data.general.fullName[0]', 'data.general.fullName[1]'],
-  ["data.general.dob[0]", dateFormat.format(dob)],
+  ['data.general.dob[0]', dateFormat.format(dob)],
-  ["data.general.gender[0]", "data.general.gender[1]"],
+  ['data.general.gender[0]', 'data.general.gender[1]'],
-  ["data.general.height[0]", `${height} cm (${toImperial(height)})`],
+  ['data.general.height[0]', `${height} cm (${toImperial(height)})`],
-  ["data.general.weight[0]", `${weight} kg (${toLbs(weight)} lbs)`],
+  ['data.general.weight[0]', `${weight} kg (${toLbs(weight)} lbs)`]
-];
+]
-const sexHeads = ["data.sexuality.heading[0]", "data.sexuality.heading[1]"];
+const sexHeads = ['data.sexuality.heading[0]', 'data.sexuality.heading[1]']
 const sexData = [
-  ["data.sexuality.identifiesAs[0]", "data.sexuality.identifiesAs[1]"],
+  ['data.sexuality.identifiesAs[0]', 'data.sexuality.identifiesAs[1]'],
-  ["data.sexuality.preferredRole[0]", "data.sexuality.preferredRole[1]"],
+  ['data.sexuality.preferredRole[0]', 'data.sexuality.preferredRole[1]']
-];
+]
 </script>
 <template>
-  <section>
+  <article>
-    <h1>{{ $t(`${$route.meta.title}`) }}</h1>
+    <section>
-  </section>
+      <h1>{{ $t(`${$route.meta.title}`) }}</h1>
    </section>
-  <DataTable :headings="heads" :data="data"></DataTable>
+    <DataTable :headings="heads" :data="data"></DataTable>
-  <section>
+    <section>
-    <h2>{{ $t("general.personality.heading") }}</h2>
+      <h2>{{ $t('general.personality.heading') }}</h2>
-    <p v-for="p in $tm('general.personality.paragraphs')">{{ p }}</p>
+      <p v-for="(p, i) in $tm('general.personality.paragraphs')" :key="i">{{ p }}</p>
-  </section>
+    </section>
-  <section>
+    <section>
-    <h2>{{ $t("general.sexuality.heading") }}</h2>
+      <h2>{{ $t('general.sexuality.heading') }}</h2>
-  </section>
+    </section>
-  <DataTable :headings="sexHeads" :data="sexData"></DataTable>
+    <DataTable :headings="sexHeads" :data="sexData"></DataTable>
-  <section>
+    <section>
-    <p v-for="p in $tm('general.sexuality.paragraphs')">{{ p }}</p>
+      <p v-for="(p, i) in $tm('general.sexuality.paragraphs')" :key="i">{{ p }}</p>
-  </section>
+    </section>
  </article>
 </template>
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@ -1,16 +1,18 @@
 <script setup lang="ts">
-import WelcomeHeader from "@/components/WelcomeHeader.vue";
+import WelcomeHeader from '@/components/WelcomeHeader.vue'
 </script>
 <template>
-  <WelcomeHeader>
+  <article>
-    <template #main>{{ $t("welcomeHeader.mainTitle") }}</template>
+    <WelcomeHeader>
-    <template #sub>{{ $t("welcomeHeader.subTitle") }}</template>
+      <template #main>{{ $t('welcomeHeader.mainTitle') }}</template>
-  </WelcomeHeader>
+      <template #sub>{{ $t('welcomeHeader.subTitle') }}</template>
    </WelcomeHeader>
-  <section>
+    <section>
-    <h3>{{ $t("home.heading") }}</h3>
+      <h3>{{ $t('home.heading') }}</h3>
-    <p v-for="p in $tm('home.paragraphs')">{{ p }}</p>
+      <p v-for="(p, i) in $tm('home.paragraphs')" :key="i">{{ p }}</p>
-  </section>
+    </section>
  </article>
 </template>
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@ -0,0 +1,12 @@
 {
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["globals.d.ts", "env.d.ts", "src/**/*", "src/**/*.json", "src/**/*.vue", "package.json"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
 }
--- a/tsconfig.config.json
+++ b/tsconfig.config.json
@ -1,8 +0,0 @@
 {
  "extends": "@vue/tsconfig/tsconfig.node.json",
  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"],
  "compilerOptions": {
    "composite": true,
    "types": ["node"]
  }
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,16 +1,11 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "files": [],
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "references": [
    {
-      "path": "./tsconfig.config.json"
+      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    }
  ]
 }
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,17 @@
 {
  "extends": "@tsconfig/node18/tsconfig.json",
  "include": [
    "globals.d.ts",
    "vite.config.*",
    "vitest.config.*",
    "cypress.config.*",
    "nightwatch.conf.*",
    "playwright.config.*"
  ],
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "types": ["node"]
  }
 }
--- a/vite.config.mts
+++ b/vite.config.mts
@ -0,0 +1,23 @@
 import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import { imagetools } from 'vite-imagetools'
 import autoprefixer from 'autoprefixer'
 import vue from '@vitejs/plugin-vue'
 // https://vitejs.dev/config/
 export default defineConfig({
  base: "/viktor/",
  plugins: [vue(), imagetools()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    devSourcemap: true,
    postcss: {
      plugins: [autoprefixer({})]
    }
  }
 })
--- a/vite.config.ts
+++ b/vite.config.ts
@ -1,19 +0,0 @@
 import { fileURLToPath, URL } from "node:url";
 import { defineConfig } from "vite";
 import { imagetools } from "vite-imagetools";
 import vue from "@vitejs/plugin-vue";
 // https://vitejs.dev/config/
 export default defineConfig({
  base: "/viktor/",
  plugins: [vue(), imagetools()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  css: {
    devSourcemap: true,
  },
 });
Author	SHA1	Message	Date
Sebin Nyshkim	2830fd9350	fix: get favicon from absolute path	2023-09-06 00:20:22 +02:00
Sebin Nyshkim	986126a2bb	fix: disable legacy mode of vue-i18n for use with composition API	2023-09-06 00:19:17 +02:00
Sebin Nyshkim	3d13c256e3	style: close component tag immediately	2023-09-06 00:17:56 +02:00
Sebin Nyshkim	f67ba1e655	refactor: get routes via getRoutes() function instead of importing router config	2023-09-06 00:17:27 +02:00
Sebin Nyshkim	1553825719	refactor: add type definition for emits	2023-09-05 22:49:23 +02:00
Sebin Nyshkim	f1961f5cef	chore: bump version number	2023-09-04 22:18:12 +02:00
Sebin Nyshkim	a67cddc74b	build: update packages	2023-09-04 22:17:47 +02:00
Sebin Nyshkim	68a43b6b9c	feat: add transitions between pages	2023-09-04 22:17:24 +02:00
Sebin Nyshkim	f2b408fce5	refactor: type MessageSchema in createI18n() constructor	2023-09-04 20:19:26 +02:00
Sebin Nyshkim	35f5343149	style: run formatter	2023-09-04 20:06:56 +02:00
Sebin Nyshkim	b5eae39f89	build: include json files under src/translations/	2023-09-04 19:53:15 +02:00
Sebin Nyshkim	39993112b7	refactor: update asset URLs for vite-imagetools v5 Shorthand parameters have been removed as of vite-imagetools v5	2023-09-04 19:52:19 +02:00
Sebin Nyshkim	d4dc47b1e1	build: update to new create-vue scaffold	2023-09-04 19:19:43 +02:00
Sebin Nyshkim	25ee71b615	chore: bump version number	2023-07-17 15:46:32 +02:00
Sebin Nyshkim	23a24c5842	feat: add interface for translation key iteration	2023-07-17 15:39:34 +02:00
Sebin Nyshkim	29f549ddd9	build: update npm packages	2023-07-17 15:37:46 +02:00
Sebin Nyshkim	223a32580c	fix: wrong open graph meta tag attributes	2023-07-17 14:53:07 +02:00
Sebin Nyshkim	3723e4b036	build: update npm packages	2023-04-03 00:33:48 +02:00
Sebin Nyshkim	b57c5a9be8	style: run linter	2023-04-03 00:33:35 +02:00
Sebin Nyshkim	bb724f581b	build: inline postcss config into vite config	2023-04-03 00:29:07 +02:00
Sebin Nyshkim	44d974a870	feat: update prettier config	2023-04-03 00:28:37 +02:00
Sebin Nyshkim	3c83d66bf5	fix: add colored background to language switcher for better visibility	2023-03-28 20:17:26 +02:00
`@ -1,2 +1,2 @@`
	`@import "@/assets/fonts/arvo/arvo";`	`@import '@/assets/fonts/arvo/arvo';`
	`@import "@/assets/fonts/secular-one/secular-one";`	`@import '@/assets/fonts/secular-one/secular-one';`