mirror of
https://github.com/ArthurDanjou/artsite.git
synced 2026-01-31 10:29:25 +01:00
Fix main page
This commit is contained in:
@@ -1,170 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { type Activity, IDEs } from '~~/types'
|
||||
|
||||
const { data: activity, refresh } = await useAsyncData<Activity>('activity', () => $fetch('/api/activity'))
|
||||
useIntervalFn(async () => await refresh(), 5000)
|
||||
const codingActivity = computed(() => activity.value!.data.activities.find(activity => IDEs.some(ide => ide.name === activity.name)))
|
||||
|
||||
const { locale, locales } = useI18n()
|
||||
const currentLocale = computed(() => locales.value.find(l => l.code === locale.value))
|
||||
|
||||
const getActivity = computed(() => {
|
||||
if (!codingActivity.value)
|
||||
return
|
||||
|
||||
const { name, details, state, timestamps } = codingActivity.value
|
||||
const isActive = name === 'Visual Studio Code'
|
||||
? !details.includes('Idling')
|
||||
: state.toLowerCase().includes('editing')
|
||||
const project = details
|
||||
? details
|
||||
.charAt(0)
|
||||
.toUpperCase()
|
||||
+ details
|
||||
.slice(1)
|
||||
.replace('Workspace:', '')
|
||||
.trim()
|
||||
: ''
|
||||
const stateWord = state.split(' ')[1]
|
||||
const timeAgo = useTimeAgo(timestamps.start).value
|
||||
const formatDate = (date: number, format: string) => useDateFormat(date, format, { locales: currentLocale.value?.code ?? 'en' }).value
|
||||
|
||||
return {
|
||||
active: isActive,
|
||||
name,
|
||||
project,
|
||||
state: stateWord,
|
||||
start: {
|
||||
ago: locale.value === 'en'
|
||||
? timeAgo
|
||||
: timeAgo
|
||||
.replace('ago', '')
|
||||
.replace('hours', 'heures')
|
||||
.replace('minutes', 'minutes')
|
||||
.replace('seconds', 'secondes')
|
||||
.trim(),
|
||||
formated: {
|
||||
date: formatDate(timestamps.start, 'DD MMM YYYY'),
|
||||
time: formatDate(timestamps.start, 'HH:mm:ss'),
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
const { t } = useI18n({
|
||||
useScope: 'local',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ClientOnly>
|
||||
<div
|
||||
v-if="getActivity"
|
||||
class="flex items-start gap-2"
|
||||
>
|
||||
<UTooltip :text="getActivity.active ? t('tooltip.online') : t('tooltip.idling')">
|
||||
<div class="relative flex h-3 w-3 mt-2">
|
||||
<div
|
||||
v-if="getActivity.active"
|
||||
class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75"
|
||||
/>
|
||||
<div
|
||||
:class="getActivity.active ? 'bg-green-500' : 'bg-amber-500'"
|
||||
class="relative inline-flex rounded-full h-3 w-3"
|
||||
/>
|
||||
</div>
|
||||
</UTooltip>
|
||||
<i18n-t
|
||||
v-if="getActivity.active"
|
||||
keypath="working"
|
||||
tag="div"
|
||||
>
|
||||
<template #project>
|
||||
<strong>{{ getActivity.project }}</strong>
|
||||
</template>
|
||||
<template #state>
|
||||
{{ getActivity.state }}
|
||||
</template>
|
||||
<template #editor>
|
||||
<span class="space-x-1">
|
||||
<UIcon
|
||||
:name="`i-logos:${IDEs.find(ide => ide.name === getActivity!.name)!.icon}`"
|
||||
size="16"
|
||||
/>
|
||||
<strong>{{ getActivity.name }}</strong></span>
|
||||
</template>
|
||||
<template #start>
|
||||
<strong>{{ getActivity.start.ago }}</strong>
|
||||
</template>
|
||||
<template #format>
|
||||
<strong>{{ getActivity.start.formated.date }}</strong> {{ t('separator') }}
|
||||
<strong>{{ getActivity.start.formated.time }}</strong>
|
||||
</template>
|
||||
</i18n-t>
|
||||
<i18n-t
|
||||
v-else
|
||||
keypath="idling"
|
||||
tag="div"
|
||||
class="space-x-1"
|
||||
>
|
||||
<template #editor>
|
||||
<UIcon
|
||||
:name="IDEs.find(ide => ide.name === getActivity!.name)!.icon"
|
||||
size="16"
|
||||
/>
|
||||
<strong>{{ getActivity.name }}</strong>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="my-5 flex md:items-start gap-2"
|
||||
>
|
||||
<UTooltip :text="t('tooltip.offline')">
|
||||
<span class="cursor-not-allowed h-3 w-3 inline-flex rounded-full bg-red-500 mt-2" />
|
||||
</UTooltip>
|
||||
<p class="not-prose">
|
||||
{{ t('offline') }}
|
||||
</p>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
|
||||
//todo: translate
|
||||
<i18n lang="json">
|
||||
{
|
||||
"en": {
|
||||
"offline": "I'm currently offline. Come back later to see what I'm working on.",
|
||||
"working": "I'm actually working on {project}, editing {state}, using {editor}. I've started {start}, the {format}.",
|
||||
"idling": "I'm idling on my computer with {editor} running in background.",
|
||||
"tooltip": {
|
||||
"online": "I'm online 👋",
|
||||
"offline": "I'm offline 🫥",
|
||||
"idling": "I'm sleeping 😴"
|
||||
},
|
||||
"separator": "at"
|
||||
},
|
||||
"fr": {
|
||||
"offline": "Je suis actuellement hors ligne. Revenez plus tard pour voir sur quoi je travaille.",
|
||||
"working": "Je travaille actuellement sur {project}, éditant {state}, en utilisant {editor}. J'ai commencé il y a {start}, le {format}.",
|
||||
"idling": "Je suis en veille sur mon ordinateur avec {editor} en arrière-plan.",
|
||||
"tooltip": {
|
||||
"online": "Je suis connecté 👋",
|
||||
"offline": "Je suis déconnecté 🫥",
|
||||
"idling": "Je dors 😴"
|
||||
},
|
||||
"separator": "à"
|
||||
},
|
||||
"es": {
|
||||
"offline": "Ahora mismo estoy desconectado. Vuelve más tarde para ver en lo que estoy trabajando.",
|
||||
"working": "Estoy trabajando en {project}, editando {state}, y utilizando {editor}. He empezado hace {start}, el {format}.",
|
||||
"idling": "Estoy en reposo en mi ordenador con {editor} en segundo plano.",
|
||||
"tooltip": {
|
||||
"online": "Estoy conectado 👋",
|
||||
"offline": "Estoy desconectado 🫥",
|
||||
"idling": "Estoy durmiendo 😴"
|
||||
},
|
||||
"separator": "a"
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
@@ -1,35 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
const { width } = useWindowSize()
|
||||
const { t } = useI18n({
|
||||
useScope: 'local',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ClientOnly>
|
||||
<div
|
||||
v-if="width > 1024"
|
||||
class="group text-[12px] italic flex items-center gap-1"
|
||||
>
|
||||
<UIcon
|
||||
class="transform -rotate-12 duration-300 group-hover:animate-wave"
|
||||
name="i-ph-hand-pointing-duotone"
|
||||
/>
|
||||
<p>{{ t('quote') }}</p>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
|
||||
<i18n lang="json">
|
||||
{
|
||||
"en": {
|
||||
"quote": "Hover the bold texts to find out more about me."
|
||||
},
|
||||
"fr": {
|
||||
"quote": "Survolez les textes en gras pour en savoir plus sur moi."
|
||||
},
|
||||
"es": {
|
||||
"quote": "Pase el cursor sobre los textos en negrita para obtener más información sobre mí."
|
||||
},
|
||||
}
|
||||
</i18n>
|
||||
@@ -1,39 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
const { t } = useI18n({
|
||||
useScope: 'local',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center gap-2 mt-4">
|
||||
<div class="flex items-center">
|
||||
<UTooltip text="It's me 👋">
|
||||
<div class="flex items-center w-12 h-12">
|
||||
<UAvatar
|
||||
alt="Avatar"
|
||||
class="hover:rotate-[360deg] duration-500 transform-gpu"
|
||||
size="md"
|
||||
src="/favicon.png"
|
||||
/>
|
||||
</div>
|
||||
</UTooltip>
|
||||
</div>
|
||||
<p class="not-prose">
|
||||
{{ t('quote') }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<i18n lang="json">
|
||||
{
|
||||
"en": {
|
||||
"quote": "Hello everyone! Thanks for visiting my portfolio. Please leave whatever you like to say, such as suggestions, appreciations, questions or anything!"
|
||||
},
|
||||
"fr": {
|
||||
"quote": "Bonjour tout le monde ! Merci de visiter mon portfolio. N'hésitez pas à laisser ce que vous avez à dire, comme des suggestions, des appréciations, des questions ou autre chose !"
|
||||
},
|
||||
"es": {
|
||||
"quote": "Hola a todos ! Muchas gracias por visitar mi portfolio. No dudes en dejar cualquier comentario, como sugerencias, apreciaciones. preguntas, o cualquier cosa !"
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
@@ -1,82 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Stats } from '~~/types'
|
||||
|
||||
const { locale, locales } = useI18n()
|
||||
const currentLocale = computed(() => locales.value.find(l => l.code === locale.value))
|
||||
|
||||
const { data: stats } = await useFetch<Stats>('/api/stats')
|
||||
const { t } = useI18n({
|
||||
useScope: 'local',
|
||||
})
|
||||
|
||||
const formatDate = (date: Date, format: string) => useDateFormat(date, format, { locales: currentLocale.value?.code ?? 'en' }).value
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ClientOnly>
|
||||
<i18n-t
|
||||
v-if="stats"
|
||||
keypath="stats"
|
||||
tag="p"
|
||||
>
|
||||
<template #time>
|
||||
{{ useTimeAgo(new Date(stats.coding.data.range.start)).value.split(' ')[0] }}
|
||||
</template>
|
||||
<template #date>
|
||||
<HoverText
|
||||
:hover="t('tooltip.date')"
|
||||
:text="formatDate(new Date(stats.coding.data.range.start), 'DD MMMM YYYY')"
|
||||
/>
|
||||
</template>
|
||||
<template #hours>
|
||||
<HoverText
|
||||
:hover="t('tooltip.hours')"
|
||||
:text="usePrecision(stats.coding.data.grand_total.total_seconds_including_other_language / 3600, 0).value"
|
||||
/>
|
||||
</template>
|
||||
<template #editors>
|
||||
{{ stats.editors.data.slice(0, 2).map(editor => `${editor.name} (${editor.percent}%)`).join(t('separator')) }}
|
||||
</template>
|
||||
<template
|
||||
v-if="stats.os.data[0]"
|
||||
#os
|
||||
>
|
||||
{{ stats.os.data[0].name }} ({{ stats.os.data[0].percent }}%)
|
||||
</template>
|
||||
<template #languages>
|
||||
{{
|
||||
stats.languages.data.slice(0, 2).map(language => `${language.name} (${language.percent}%)`).join(t('separator'))
|
||||
}}
|
||||
</template>
|
||||
</i18n-t>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
|
||||
<i18n lang="json">
|
||||
{
|
||||
"en": {
|
||||
"stats": "I collect some data for {time} years, started the {date}. I've coded for a total of {hours} hours. My best editors are {editors}. My best OS is {os}. My top languages are {languages}.",
|
||||
"separator": " and ",
|
||||
"tooltip": {
|
||||
"date": "That was so long ago 🫣",
|
||||
"hours": "That's a lot 😮"
|
||||
}
|
||||
},
|
||||
"fr": {
|
||||
"stats": "Je collecte des données depuis {time} ans, commencé le {date}. J'ai codé un total de {hours} heures. Mes meilleurs éditeurs sont {editors}. Mon meilleur OS est {os}. Mes langages préférés sont {languages}.",
|
||||
"separator": " et ",
|
||||
"tooltip": {
|
||||
"date": "C'était il y a si longtemps 🫣",
|
||||
"hours": "C'est beaucoup 😮"
|
||||
}
|
||||
},
|
||||
"es": {
|
||||
"stats": "Recopilo datos desde hace {time} años, empecé el {date}. He programado durante un total de {hours} horas. Mis mejores editores son {editors}. Mi mejor OS es {os}. Y mis lenguajes favoritos son {languages}.",
|
||||
"separator": " y ",
|
||||
"tooltip": {
|
||||
"date": "hace tato tiempo…🫣",
|
||||
"hours": "es mucho 😮"
|
||||
}
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
Reference in New Issue
Block a user