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

style: run linter

Browse source
This commit is contained in:
Sebin Nyshkim 2023-04-03 00:33:35 +02:00
parent bb724f581b
commit b57c5a9be8
7 changed files with 94 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

18
.eslintrc.cjs
View file

@ -1,15 +1,15 @@
/* eslint-env node */ /* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution"); require('@rushstack/eslint-patch/modern-module-resolution')
module.exports = { module.exports = {
root: true, 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: { parserOptions: {
ecmaVersion: "latest", ecmaVersion: 'latest'
}, }
}; }

33
src/components/LocaleSwitcher.vue
View file

@ -1,43 +1,42 @@
<script setup lang="ts"> <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 { interface LocaleOption {
code: string; code: string
name: string; name: string
flag: string; flag: string
} }
interface Props { interface Props {
modelValue: string; modelValue: string
id: string; id: string
locales: LocaleOption[]; locales: LocaleOption[]
} }
const props = defineProps<Props>(); const props = defineProps<Props>()
const emit = defineEmits(["update:modelValue"]); const emit = defineEmits(['update:modelValue'])
const selectModel = computed({ const selectModel = computed({
get() { get() {
return props.modelValue; return props.modelValue
}, },
set(value) { set(value) {
emit("update:modelValue", value); emit('update:modelValue', value)
}, }
}); })
</script> </script>
<template> <template>
<div class="localeselect"> <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 <input
type="radio" type="radio"
name="lang" name="lang"
class="localeselect__input" class="localeselect__input"
:id="`lang-${locale.code}`" :id="`lang-${locale.code}`"
:value="locale.code" :value="locale.code"
:key="`locale-${locale.code}`"
v-model="selectModel" v-model="selectModel"
/> />
<label class="localeselect__label" :for="`lang-${locale.code}`"> <label class="localeselect__label" :for="`lang-${locale.code}`">

5
src/components/SiteNavigation.vue
View file

@ -1,8 +1,3 @@
<script setup lang="ts">
import router from "@/router";
import { RouterLink } from "vue-router";
</script>
<template> <template>
<nav class="navigation"> <nav class="navigation">
<div class="navigation__list"> <div class="navigation__list">

31
src/views/AnatomyView.vue
View file

@ -1,17 +1,17 @@
<script setup lang="ts"> <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 = [ 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> </script>
<template> <template>
@ -71,14 +71,15 @@ const colors = [
</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;
<a href="http://twitter.com/sabertoofs">sabertoofs</a>
</template> </template>
</RefImage> </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>
@ -151,12 +152,12 @@ const colors = [
</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>
</template> </template>

26
src/views/CareerPathView.vue
View file

@ -1,13 +1,13 @@
<script setup lang="ts"> <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'
const jobIcons = [ const jobIcons = [
WhiskeyGlassIcon, WhiskeyGlassIcon,
@ -16,18 +16,18 @@ const jobIcons = [
HelmetSafetyIcon, HelmetSafetyIcon,
IndustryIcon, IndustryIcon,
TruckIcon, TruckIcon,
BoxesIcon, BoxesIcon
]; ]
</script> </script>
<template> <template>
<section> <section>
<h1>{{ $t(`${$route.meta.title}`) }}</h1> <h1>{{ $t(`${$route.meta.title}`) }}</h1>
<p v-for="p in $tm('career.paragraphs')">{{ p }}</p> <p v-for="(p, i) in $tm('career.paragraphs')" :key="i">{{ p }}</p>
</section> </section>
<TimelineList> <TimelineList>
<TimelineItem v-for="(job, idx) in $tm('career.jobs')"> <TimelineItem v-for="(job, idx) in $tm('career.jobs')" :key="idx">
<template #icon> <template #icon>
<component :is="jobIcons[idx as number]"></component> <component :is="jobIcons[idx as number]"></component>
</template> </template>

70
src/views/GeneralView.vue
View file

@ -1,50 +1,50 @@
<script setup lang="ts"> <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, { 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 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 => { 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 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 = [ 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 = [ 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> </script>
<template> <template>
@ -55,17 +55,17 @@ const sexData = [
<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>
</template> </template>

10
src/views/HomeView.vue
View file

@ -1,16 +1,16 @@
<script setup lang="ts"> <script setup lang="ts">
import WelcomeHeader from "@/components/WelcomeHeader.vue"; import WelcomeHeader from '@/components/WelcomeHeader.vue'
</script> </script>
<template> <template>
<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>
</WelcomeHeader> </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>
</template> </template>