SebinNyshkim/viktor-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: SebinNyshkim:0.4.2
Branches Tags
SebinNyshkim:main
SebinNyshkim:0.4.3
SebinNyshkim:0.4.2
SebinNyshkim:0.4.1
SebinNyshkim:0.4.0
SebinNyshkim:0.3.5
SebinNyshkim:0.3.4
SebinNyshkim:0.3.3
SebinNyshkim:0.3.2
SebinNyshkim:0.3.1a
SebinNyshkim:0.3.1
SebinNyshkim:0.3.0
SebinNyshkim:0.2.1
SebinNyshkim:0.2.0
SebinNyshkim:0.1.0
...
compare: SebinNyshkim:main
Branches Tags
SebinNyshkim:main
SebinNyshkim:0.4.3
SebinNyshkim:0.4.2
SebinNyshkim:0.4.1
SebinNyshkim:0.4.0
SebinNyshkim:0.3.5
SebinNyshkim:0.3.4
SebinNyshkim:0.3.3
SebinNyshkim:0.3.2
SebinNyshkim:0.3.1a
SebinNyshkim:0.3.1
SebinNyshkim:0.3.0
SebinNyshkim:0.2.1
SebinNyshkim:0.2.0
SebinNyshkim:0.1.0

13 commits
0.4.2 ... main

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
33 changed files with 1438 additions and 4221 deletions
Download patch file Download diff file Expand all files Collapse all files

4
index.html
View file

@ -2,8 +2,8 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>Viktor Kraastav – Reference Page</title> <title>Viktor Kraastav – Reference Page</title>

4570
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

41
package.json
View file

@ -1,37 +1,38 @@
{ {
"name": "viktor-reference", "name": "viktor-reference",
"version": "0.4.2", "version": "0.4.3",
"scripts": { "scripts": {
"dev": "vite --host", "dev": "vite --host",
"build": "run-p type-check build-only", "build": "run-p type-check build-only",
"preview": "vite preview --port 4173", "preview": "vite preview",
"build-only": "vite build", "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": { "dependencies": {
"vue": "^3.2.45", "vue": "^3.3.4",
"vue-i18n": "^9.2.2", "vue-i18n": "^9.2.2",
"vue-router": "^4.2.4" "vue-router": "^4.2.4"
}, },
"devDependencies": { "devDependencies": {
"@rushstack/eslint-patch": "^1.3.2", "@rushstack/eslint-patch": "^1.3.3",
"@types/node": "^18.16.19", "@tsconfig/node18": "^18.2.1",
"@types/vue-markdown": "^2.2.1", "@types/node": "^20.5.9",
"@vitejs/plugin-vue": "^4.2.3", "@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.3", "@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.45.0", "eslint": "^8.48.0",
"eslint-plugin-vue": "^9.15.1", "eslint-plugin-vue": "^9.17.0",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"prettier": "^2.8.8", "prettier": "^3.0.3",
"sass": "^1.63.6", "sass": "^1.66.1",
"typescript": "^4.9.5", "typescript": "^5.2.2",
"vite": "^4.4.4", "vite": "^4.4.9",
"vite-imagetools": "^4.0.19", "vite-imagetools": "^5.0.8",
"vue-tsc": "^1.8.5" "vue-tsc": "^1.8.8"
} }
} }

67
src/App.vue
View file

@ -1,70 +1,69 @@
<script setup lang="ts"> <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 = [ 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 = () => { const showModal = () => {
langswitcher.value?.showModal(); langswitcher.value?.showModal()
}; }
const close = () => { const close = () => {
langswitcher.value?.close(); langswitcher.value?.close()
}; }
</script> </script>
<template> <template>
<ModalDialog id="lang-select" ref="langswitcher"> <ModalDialog id="lang-select" ref="langswitcher">
<template #heading>{{ $t("langswitcher.title") }}</template> <template #heading>{{ $t('langswitcher.title') }}</template>
<template #message> <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>
<template #buttons> <template #buttons>
<LinkButton @click.prevent="close()"> <LinkButton @click.prevent="close()">
{{ $t("langswitcher.buttonClose") }} {{ $t('langswitcher.buttonClose') }}
</LinkButton> </LinkButton>
</template> </template>
</ModalDialog> </ModalDialog>
<SiteNavigation> <SiteNavigation>
<NavigationItem <NavigationItem
v-for="(route, idx) in router.options.routes" v-for="(route, idx) in $router.getRoutes()"
:key="idx" :key="idx"
:icon="route.meta?.icon" :icon="route.meta?.icon"
:href="route.path" :href="route.path"
>{{ $t(`${route.meta?.title}`) }}</NavigationItem> >
{{ $t(`${route.meta?.title}`) }}
</NavigationItem>
</SiteNavigation> </SiteNavigation>
<main> <main>
<LanguageButton> <LanguageButton>
<LanguageIcon @click.prevent="showModal()" /> <LanguageIcon @click.prevent="showModal()" />
</LanguageButton> </LanguageButton>
<RouterView /> <RouterView v-slot="{ Component }">
<Transition name="fade" mode="out-in">
<component :is="Component" :key="$route.path" />
</Transition>
</RouterView>
</main> </main>
<SiteFooter> <SiteFooter>v{{ version }} &copy; {{ new Date().getFullYear() }} Sebin Nyshkim</SiteFooter>
v{{ version }} &copy; {{ new Date().getFullYear() }} Sebin Nyshkim
</SiteFooter>
</template> </template>

28
src/components/AttributionTable.vue
View file

@ -1,23 +1,23 @@
<script setup lang="ts"> <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 { interface ArtistLink {
furaffinity?: string; furaffinity?: string
twitter?: string; twitter?: string
} }
interface Attribution { interface Attribution {
artwork: string; artwork: string
artist: string; artist: string
links: ArtistLink; links: ArtistLink
} }
interface Props { interface Props {
attributions: Attribution[]; attributions: Attribution[]
} }
defineProps<Props>(); defineProps<Props>()
</script> </script>
<template> <template>
@ -25,19 +25,15 @@ defineProps<Props>();
<thead class="attribution-table__head"> <thead class="attribution-table__head">
<tr class="attribution-table__row"> <tr class="attribution-table__row">
<th class="attribution-table__heading artwork"> <th class="attribution-table__heading artwork">
{{ $t("attributions.artwork.headings[0]") }} {{ $t('attributions.artwork.headings[0]') }}
</th> </th>
<th class="attribution-table__heading artist"> <th class="attribution-table__heading artist">
{{ $t("attributions.artwork.headings[1]") }} {{ $t('attributions.artwork.headings[1]') }}
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody class="attribution-table__body"> <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"> <td class="attribution-table__cell artwork">
<img :src="attrib.artwork" alt="Image attribution" /> <img :src="attrib.artwork" alt="Image attribution" />
</td> </td>

31
src/components/ColorTable.vue
View file

@ -1,33 +1,30 @@
<script setup lang="ts"> <script setup lang="ts">
interface ColorDict { interface ColorDict {
name: string; name: string
value: string; value: string
} }
interface Props { interface Props {
colors: ColorDict[]; colors: ColorDict[]
} }
defineProps<Props>(); defineProps<Props>()
</script> </script>
<template> <template>
<table class="color-table"> <table class="color-table">
<thead class="color-table__head"> <thead class="color-table__head">
<tr class="color-table__row"> <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> </tr>
</thead> </thead>
<tbody class="color-table__body"> <tbody class="color-table__body">
<tr class="color-table__row" v-for="(color, idx) in colors" :key="idx"> <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 name">{{ $t(color.name) }}</td>
<td class="color-table__cell value">{{ color.value }}</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> </tr>
</tbody> </tbody>
</table> </table>
@ -47,8 +44,16 @@ defineProps<Props>();
} }
&.value { &.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; text-align: center;
} }
} }

12
src/components/DataTable.vue
View file

@ -1,21 +1,17 @@
<script setup lang="ts"> <script setup lang="ts">
interface Props { interface Props {
headings: string[]; headings: string[]
data: string[][]; data: string[][]
} }
defineProps<Props>(); defineProps<Props>()
</script> </script>
<template> <template>
<table class="data-table"> <table class="data-table">
<thead class="data-table__head"> <thead class="data-table__head">
<tr class="data-table__row"> <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) }} {{ $t(heading) }}
</th> </th>
</tr> </tr>

2
src/components/LanguageButton.vue
View file

@ -15,7 +15,7 @@
&:before { &:before {
position: absolute; position: absolute;
inset: 0.325rem 0 0.7rem 0; inset: 0.325rem 0 0.7rem 0;
content: ""; content: '';
background-color: var(--color-background); background-color: var(--color-background);
border-radius: 0.3rem; border-radius: 0.3rem;
} }

6
src/components/LinkButton.vue
View file

@ -1,10 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
interface Props { interface Props {
href?: string; href?: string
download?: boolean | any; download?: boolean | any
} }
defineProps<Props>(); defineProps<Props>()
</script> </script>
<template> <template>

6
src/components/LocaleSwitcher.vue
View file

@ -15,8 +15,12 @@ interface Props {
locales: LocaleOption[] locales: LocaleOption[]
} }
interface Emits {
(e: 'update:modelValue', value: string): void
}
const props = defineProps<Props>() const props = defineProps<Props>()
const emit = defineEmits(['update:modelValue']) const emit = defineEmits<Emits>()
const selectModel = computed({ const selectModel = computed({
get() { get() {

26
src/components/ModalDialog.vue
View file

@ -1,27 +1,27 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue"; import { ref } from 'vue'
interface Props { interface Props {
id: string; id: string
} }
defineProps<Props>(); defineProps<Props>()
const modal = ref<HTMLDialogElement>(); const modal = ref<HTMLDialogElement>()
const showModal = () => { 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 = () => { 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> </script>
<template> <template>

10
src/components/NavigationItem.vue
View file

@ -1,17 +1,17 @@
<script setup lang="ts"> <script setup lang="ts">
import { RouterLink } from "vue-router"; import { RouterLink } from 'vue-router'
interface Props { interface Props {
icon: unknown | object; icon: unknown | object
href: string; href: string
} }
defineProps<Props>(); defineProps<Props>()
</script> </script>
<template> <template>
<RouterLink class="navigation__link" :to="href"> <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"> <span class="navigation__link-text">
<slot></slot> <slot></slot>
</span> </span>

9
src/components/RefImage.vue
View file

@ -1,17 +1,14 @@
<script setup lang="ts"> <script setup lang="ts">
interface Props { interface Props {
dropshadow?: boolean; dropshadow?: boolean
} }
defineProps<Props>(); defineProps<Props>()
</script> </script>
<template> <template>
<figure class="figure"> <figure class="figure">
<picture <picture class="figure__image" :class="{ 'figure__image--dropshadow': dropshadow }">
class="figure__image"
:class="{ 'figure__image--dropshadow': dropshadow }"
>
<slot></slot> <slot></slot>
</picture> </picture>

8
src/components/TimelineItem.vue
View file

@ -26,12 +26,11 @@
position: relative; position: relative;
&:not(:last-child):before { &:not(:last-child):before {
content: ""; content: '';
position: absolute; position: absolute;
inset: var(--timeline-stroke-position-odd); inset: var(--timeline-stroke-position-odd);
height: var(--timeline-stroke-length); 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) { &:nth-child(odd) {
@ -58,8 +57,7 @@
background-color: var(--timeline-circle-background); background-color: var(--timeline-circle-background);
margin: 0; 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%; border-radius: 100%;
padding: var(--timeline-circle-padding); padding: var(--timeline-circle-padding);

3
src/components/TimelineList.vue
View file

@ -10,8 +10,7 @@
position: relative; position: relative;
margin: 0 auto; 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; list-style: none;

10
src/components/WelcomeHeader.vue
View file

@ -2,13 +2,9 @@
<header class="welcome"> <header class="welcome">
<div class="welcome__image"> <div class="welcome__image">
<picture> <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> </picture>
</div> </div>

8
src/lang/index.ts
View file

@ -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 { export default {
en, en,
de, de
}; }

35
src/main.ts
View file

@ -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')

86
src/router/index.ts
View file

@ -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({ const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), history: createWebHistory(import.meta.env.BASE_URL),
scrollBehavior: () => { scrollBehavior: () => {
return { top: 0 }; return new Promise((resolve) => {
setTimeout(() => {
resolve({ top: 0 })
}, 500)
})
}, },
routes: [ routes: [
{ {
path: "/", path: '/',
name: "home", name: 'home',
component: HomeView, component: HomeView,
meta: { 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: { 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: { 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: { 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: { meta: {
title: "nav.attributions", title: 'nav.attributions',
icon: CircleInfoIcon, icon: CircleInfoIcon
}, }
}, }
], ]
}); })
export default router; export default router

56
src/scss/base.scss
View file

@ -1,4 +1,4 @@
@import "fontfaces"; @import 'fontfaces';
/* theme colors */ /* theme colors */
:root { :root {
@ -33,8 +33,8 @@
/* general purpose variables */ /* general purpose variables */
:root { :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; --font-size: 18px;
--text-line-height: 1.5; --text-line-height: 1.5;
@ -43,6 +43,8 @@
--page-background-image: url(@/assets/layered-waves-light.svg); --page-background-image: url(@/assets/layered-waves-light.svg);
--page-background-image-height: 100vw; --page-background-image-height: 100vw;
--page-background-image-max-height: 50vh; --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; --paragraph-margin: 1rem;
@ -54,8 +56,7 @@
--container-spacing-bottom-safe: max(1rem, env(safe-area-inset-bottom)); --container-spacing-bottom-safe: max(1rem, env(safe-area-inset-bottom));
--container-spacing-left-safe: max(1rem, env(safe-area-inset-left)); --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 --welcome-padding: 2rem var(--container-spacing-right-safe) 2rem
var(--container-spacing-left-safe); var(--container-spacing-left-safe);
@ -75,19 +76,14 @@
--navigation-height: auto; --navigation-height: auto;
--navigation-padding: 0 0 0 env(safe-area-inset-left); --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-cutout-main: 0;
--navigation-link-display: none; --navigation-link-display: none;
--navigation-link-flex: 1 0 var(--navigation-size); --navigation-link-flex: 1 0 var(--navigation-size);
--navigation-link-justify: center; --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-padding: 0 0 env(safe-area-inset-bottom) 0;
--navigation-link-icon-size: calc(var(--navigation-size) / 2); --navigation-link-icon-size: calc(var(--navigation-size) / 2);
--navigation-link-icon-spacing: calc(var(--navigation-size) * 0.25); --navigation-link-icon-spacing: calc(var(--navigation-size) * 0.25);
@ -118,13 +114,10 @@
--timeline-item-margin-even: var(--timeline-item-margin); --timeline-item-margin-even: var(--timeline-item-margin);
--timeline-item-text-align-even: left; --timeline-item-text-align-even: left;
--timeline-item-content-padding-odd: 0 0 0 var(--container-spacing-left-safe); --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-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; --table-cell-padding: 0.25rem 0.5rem;
} }
@ -225,11 +218,9 @@
--page-background-image-max-height: 100vh; --page-background-image-max-height: 100vh;
--color-table-color-cell-width: 10rem; --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-page-background: 0;
--navigation-cutout-main: var(--navigation-cutout); --navigation-cutout-main: var(--navigation-cutout);
@ -238,9 +229,7 @@
--navigation-align: stretch; --navigation-align: stretch;
--navigation-position: 0 auto 0 0; --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-width-expanded: var(--navigation-width);
--navigation-link-display: block; --navigation-link-display: block;
@ -271,10 +260,8 @@
--timeline-stroke-length: calc(100% - var(--timeline-circle-size)); --timeline-stroke-length: calc(100% - var(--timeline-circle-size));
--timeline-stroke-position-even: var(--timeline-stroke-position-top) --timeline-stroke-position-even: var(--timeline-stroke-position-top)
var(--timeline-stroke-position-horizontal) auto auto; 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-flex-order: 1;
--timeline-item-content-margin-odd: 0 0 0 1rem; --timeline-item-content-margin-odd: 0 0 0 1rem;
--timeline-item-content-margin-even: 0 1rem 0 0; --timeline-item-content-margin-even: 0 1rem 0 0;
@ -298,8 +285,13 @@
@media (hover: hover) and (min-width: 50em) { @media (hover: hover) and (min-width: 50em) {
:root { :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;
} }
} }

4
src/scss/fontfaces.scss
View file

@ -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';

22
src/scss/main.scss
View file

@ -1,4 +1,4 @@
@import "@/scss/base"; @import '@/scss/base';
:root { :root {
font-family: var(--font-family-copy); font-family: var(--font-family-copy);
@ -19,7 +19,9 @@ body {
min-height: 100vh; min-height: 100vh;
color: var(--color-text); color: var(--color-text);
background: var(--color-background-body); 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); line-height: var(--text-line-height);
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
@ -41,7 +43,7 @@ main {
&:after { &:after {
display: block; display: block;
content: ""; content: '';
position: sticky; position: sticky;
inset: auto 0 var(--navigation-cutout-page-background) 0; inset: auto 0 var(--navigation-cutout-page-background) 0;
@ -95,8 +97,7 @@ a {
&:hover { &:hover {
color: var(--color-link-text-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);
}

26
src/views/AnatomyView.vue
View file

@ -15,6 +15,7 @@ const colors = [
</script> </script>
<template> <template>
<article>
<section> <section>
<h1>{{ $t(`${$route.meta.title}`) }}</h1> <h1>{{ $t(`${$route.meta.title}`) }}</h1>
</section> </section>
@ -23,21 +24,21 @@ const colors = [
<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"
@ -48,21 +49,21 @@ const colors = [
<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`"
@ -86,7 +87,7 @@ const colors = [
<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: 50em) 590px,
@ -96,7 +97,7 @@ const colors = [
/> />
<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: 50em) 590px,
@ -106,7 +107,7 @@ const colors = [
/> />
<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: 50em) 590px,
@ -120,7 +121,7 @@ const colors = [
<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: 50em) 590px,
@ -130,7 +131,7 @@ const colors = [
/> />
<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: 50em) 590px,
@ -140,7 +141,7 @@ const colors = [
/> />
<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: 50em) 590px,
@ -160,4 +161,5 @@ const colors = [
<section> <section>
<p v-for="(p, i) in $tm('anatomy.paragraphs[1]')" :key="i">{{ p }}</p> <p v-for="(p, i) in $tm('anatomy.paragraphs[1]')" :key="i">{{ p }}</p>
</section> </section>
</article>
</template> </template>

80
src/views/AttributionsView.vue
View file

@ -1,48 +1,49 @@
<script setup lang="ts"> <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 = [ const attributions = [
{ {
artwork: ViktorRefAlpha, artwork: ViktorRefAlpha,
artist: "sabertoofs", artist: 'sabertoofs',
links: { 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, artwork: ViktorFront,
artist: "sabertoofs", artist: 'sabertoofs',
links: { 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> </script>
<template> <template>
<article>
<section> <section>
<h1>{{ $t(`${$route.meta.title}`) }}</h1> <h1>{{ $t(`${$route.meta.title}`) }}</h1>
<h2>{{ $t("attributions.artwork.heading") }}</h2> <h2>{{ $t('attributions.artwork.heading') }}</h2>
</section> </section>
<AttributionTable :attributions="attributions" /> <AttributionTable :attributions="attributions" />
<section> <section>
<h2>{{ $t("attributions.other.heading") }}</h2> <h2>{{ $t('attributions.other.heading') }}</h2>
</section> </section>
<table> <table>
<thead> <thead>
<tr> <tr>
<th>{{ $t("attributions.other.headings[0]") }}</th> <th>{{ $t('attributions.other.headings[0]') }}</th>
<th>{{ $t("attributions.other.headings[1]") }}</th> <th>{{ $t('attributions.other.headings[1]') }}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>{{ $t("attributions.other.icons[0]") }}</td> <td>{{ $t('attributions.other.icons[0]') }}</td>
<td> <td>
<a <a
href="https://fontawesome.com/license/free" href="https://fontawesome.com/license/free"
@ -54,7 +55,7 @@ const attributions = [
</td> </td>
</tr> </tr>
<tr> <tr>
<td>{{ $t("attributions.other.headingFont[0]") }}</td> <td>{{ $t('attributions.other.headingFont[0]') }}</td>
<td> <td>
<a <a
href="https://github.com/MichalSahar/Secular" href="https://github.com/MichalSahar/Secular"
@ -63,18 +64,14 @@ const attributions = [
> >
Secular One Secular One
</a> </a>
{{ $t("attributions.other.headingFont[1]") }} {{ $t('attributions.other.headingFont[1]') }}
<a <a href="https://github.com/MichalSahar" target="_blank" rel="noopener noreferrer">
href="https://github.com/MichalSahar"
target="_blank"
rel="noopener noreferrer"
>
Michal Sahar Michal Sahar
</a> </a>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>{{ $t("attributions.other.copyFont[0]") }}</td> <td>{{ $t('attributions.other.copyFont[0]') }}</td>
<td> <td>
<a <a
href="https://antonkoovit.com/typefaces/arvo" href="https://antonkoovit.com/typefaces/arvo"
@ -83,39 +80,24 @@ const attributions = [
> >
Arvo Arvo
</a> </a>
{{ $t("attributions.other.copyFont[1]") }} {{ $t('attributions.other.copyFont[1]') }}
<a <a href="https://antonkoovit.com/" target="_blank" rel="noopener noreferrer">
href="https://antonkoovit.com/"
target="_blank"
rel="noopener noreferrer"
>
Anton Koovit Anton Koovit
</a> </a>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>{{ $t("attributions.other.background[0]") }}</td> <td>{{ $t('attributions.other.background[0]') }}</td>
<td> <td>
{{ $t("attributions.other.background[1][0]") }} {{ $t('attributions.other.background[1][0]') }}
<a <a href="https://haikei.app/" target="_blank" rel="noopener noreferrer">Haikei</a>
href="https://haikei.app/" {{ $t('attributions.other.background[1][1]') }}
target="_blank" <a href="https://zcreativelabs.com/" target="_blank" rel="noopener noreferrer">
rel="noopener noreferrer"
>
Haikei
</a>
{{ $t("attributions.other.background[1][1]") }}
<a
href="https://zcreativelabs.com/"
target="_blank"
rel="noopener noreferrer"
>
z creative labs z creative labs
</a> </a>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</article>
</template> </template>
<style lang="scss"></style>

6
src/views/CareerPathView.vue
View file

@ -10,8 +10,8 @@ import TruckIcon from '@/assets/icons/TruckIcon.vue'
import BoxesIcon from '@/assets/icons/BoxesIcon.vue' import BoxesIcon from '@/assets/icons/BoxesIcon.vue'
interface Job { interface Job {
title: string; title: string
desc: string; desc: string
} }
const jobIcons = [ const jobIcons = [
@ -26,6 +26,7 @@ const jobIcons = [
</script> </script>
<template> <template>
<article>
<section> <section>
<h1>{{ $t(`${$route.meta.title}`) }}</h1> <h1>{{ $t(`${$route.meta.title}`) }}</h1>
<p v-for="(p, i) in $tm('career.paragraphs')" :key="i">{{ p }}</p> <p v-for="(p, i) in $tm('career.paragraphs')" :key="i">{{ p }}</p>
@ -42,4 +43,5 @@ const jobIcons = [
</template> </template>
</TimelineItem> </TimelineItem>
</TimelineList> </TimelineList>
</article>
</template> </template>

2
src/views/GeneralView.vue
View file

@ -48,6 +48,7 @@ const sexData = [
</script> </script>
<template> <template>
<article>
<section> <section>
<h1>{{ $t(`${$route.meta.title}`) }}</h1> <h1>{{ $t(`${$route.meta.title}`) }}</h1>
</section> </section>
@ -68,4 +69,5 @@ const sexData = [
<section> <section>
<p v-for="(p, i) in $tm('general.sexuality.paragraphs')" :key="i">{{ p }}</p> <p v-for="(p, i) in $tm('general.sexuality.paragraphs')" :key="i">{{ p }}</p>
</section> </section>
</article>
</template> </template>

2
src/views/HomeView.vue
View file

@ -3,6 +3,7 @@ import WelcomeHeader from '@/components/WelcomeHeader.vue'
</script> </script>
<template> <template>
<article>
<WelcomeHeader> <WelcomeHeader>
<template #main>{{ $t('welcomeHeader.mainTitle') }}</template> <template #main>{{ $t('welcomeHeader.mainTitle') }}</template>
<template #sub>{{ $t('welcomeHeader.subTitle') }}</template> <template #sub>{{ $t('welcomeHeader.subTitle') }}</template>
@ -13,4 +14,5 @@ import WelcomeHeader from '@/components/WelcomeHeader.vue'
<p v-for="(p, i) in $tm('home.paragraphs')" :key="i">{{ p }}</p> <p v-for="(p, i) in $tm('home.paragraphs')" :key="i">{{ p }}</p>
</section> </section>
</article>
</template> </template>

12
tsconfig.app.json Normal file
View file

@ -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/*"]
}
}
}

8
tsconfig.config.json
View file

@ -1,8 +0,0 @@
{
"extends": "@vue/tsconfig/tsconfig.node.json",
"include": ["vite.config.*", "vitest.config.*", "cypress.config.*"],
"compilerOptions": {
"composite": true,
"types": ["node"]
}
}

15
tsconfig.json
View file

@ -1,16 +1,11 @@
{ {
"extends": "@vue/tsconfig/tsconfig.web.json", "files": [],
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
"references": [ "references": [
{ {
"path": "./tsconfig.config.json" "path": "./tsconfig.node.json"
},
{
"path": "./tsconfig.app.json"
} }
] ]
} }

17
tsconfig.node.json Normal file
View file

@ -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"]
}
}

23
vite.config.mts Normal file
View file

@ -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({})]
}
}
})

22
vite.config.ts
View file

@ -1,22 +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,
postcss: {
plugins: [require('autoprefixer')]
}
},
});