Merge branch 'refs/heads/master' into feature_es

# Conflicts: # app/components/AppHeader.vue # app/components/content/Quote.vue # app/components/home/Map.vue # app/pages/index.vue # content/home/en.md # content/home/fr.md # nuxt.config.ts # package.json # pnpm-lock.yaml # tailwind.config.ts
2026-01-25 09:52:46 +01:00 · 2024-11-26 20:10:22 +01:00
parent 2fa861584a 4d203e5b5c
commit f7a6bfd554
75 changed files with 4324 additions and 2987 deletions
--- a/app/components/content/Activity.vue
+++ b/app/components/content/Activity.vue
@@ -3,40 +3,56 @@ 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.filter(activity => IDEs.some(ide => ide.name === activity.name))[0])
+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.filter(l => l.code === locale.value)[0])
+const currentLocale = computed(() => locales.value.find(l => l.code === locale.value))

 const getActivity = computed(() => {
-  const activity = codingActivity.value
-  if (!activity) return
+  if (!codingActivity.value)
+    return

-  const active = activity.name === 'Visual Studio Code' ? !activity.details.includes('Idling') : activity.state.toLowerCase().includes('editing')
-  const capitalise = (str: string) => str.charAt(0).toUpperCase() + str.slice(1)
-  const project = activity.details ? capitalise(activity.details.replace('Workspace:', '')) : ''
-  const state = activity.state.split(' ')[1]
-  const start = {
-    ago: useTimeAgo(activity.timestamps.start).value,
-    formated: `${useDateFormat(
-      activity.timestamps.start,
-      'DD MMM YYYY',
-      { locales: currentLocale.value!.code ?? 'en' }
-    ).value} ${t('separator')}
-    ${useDateFormat(activity.timestamps.start, 'HH:mm:ss', { locales: currentLocale.value!.code ?? 'en' }).value}`
-  }
+  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,
-    name: activity.name,
+    active: isActive,
+    name,
    project,
-    state,
-    start
+    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'
+  useScope: 'local',
 })
 </script>

@@ -62,7 +78,6 @@ const { t } = useI18n({
        v-if="getActivity.active"
        keypath="working"
        tag="div"
-        class="space-x-1"
      >
        <template #project>
          <strong>{{ getActivity.project }}</strong>
@@ -71,17 +86,19 @@ const { t } = useI18n({
          {{ getActivity.state }}
        </template>
        <template #editor>
-          <UIcon
-            :name="IDEs.find(ide => ide.name === getActivity!.name)!.icon"
-            size="16"
-          />
-          <strong>{{ getActivity.name }}</strong>
+          <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 }}</strong>
+          <strong>{{ getActivity.start.formated.date }}</strong> {{ t('separator') }}
+          <strong>{{ getActivity.start.formated.time }}</strong>
        </template>
      </i18n-t>
      <i18n-t
--- a/app/components/content/CatchPhrase.vue
+++ b/app/components/content/CatchPhrase.vue
@@ -1,3 +1,10 @@
+<script lang="ts" setup>
+const { width } = useWindowSize()
+const { t } = useI18n({
+  useScope: 'local',
+})
+</script>
+
 <template>
  <ClientOnly>
    <div
@@ -13,13 +20,6 @@
  </ClientOnly>
 </template>

-<script lang="ts" setup>
-const { width } = useWindowSize()
-const { t } = useI18n({
-  useScope: 'local'
-})
-</script>
-
 <i18n lang="json">
 {
  "en": {
--- a/app/components/content/HoverText.vue
+++ b/app/components/content/HoverText.vue
@@ -4,15 +4,15 @@ import type { PropType } from 'vue'
 defineProps({
  text: {
    type: [String, Number],
-    required: true
+    required: true,
  },
  hover: {
    type: String,
-    required: true
+    required: true,
  },
  position: {
-    type: String as PropType<'top' | 'right' | 'bottom' | 'left'>
-  }
+    type: String as PropType<'top' | 'right' | 'bottom' | 'left'>,
+  },
 })
 </script>

--- a/app/components/content/ProseA.vue
+++ b/app/components/content/ProseA.vue
@@ -4,13 +4,13 @@ import type { PropType } from 'vue'
 defineProps({
  href: {
    type: String,
-    default: ''
+    default: '',
  },
  target: {
    type: String as PropType<'_blank' | '_parent' | '_self' | '_top' | (string & object) | null | undefined>,
    default: undefined,
-    required: false
-  }
+    required: false,
+  },
 })
 </script>

--- a/app/components/content/ProseH2.vue
+++ b/app/components/content/ProseH2.vue
@@ -1,3 +1,12 @@
+<script lang="ts" setup>
+import { computed, useRuntimeConfig } from '#imports'
+
+const props = defineProps<{ id?: string }>()
+
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => props.id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h2)))
+</script>
+
 <template>
  <h2
    :id="id"
@@ -12,12 +21,3 @@
    <slot v-else />
  </h2>
 </template>
-
-<script lang="ts" setup>
-import { computed, useRuntimeConfig } from '#imports'
-
-const props = defineProps<{ id?: string }>()
-
-const { headings } = useRuntimeConfig().public.mdc
-const generate = computed(() => props.id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h2)))
-</script>
--- a/app/components/content/ProseH3.vue
+++ b/app/components/content/ProseH3.vue
@@ -1,3 +1,12 @@
+<script lang="ts" setup>
+import { computed, useRuntimeConfig } from '#imports'
+
+const props = defineProps<{ id?: string }>()
+
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => props.id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h2)))
+</script>
+
 <template>
  <h2
    :id="id"
@@ -12,12 +21,3 @@
    <slot v-else />
  </h2>
 </template>
-
-<script lang="ts" setup>
-import { computed, useRuntimeConfig } from '#imports'
-
-const props = defineProps<{ id?: string }>()
-
-const { headings } = useRuntimeConfig().public.mdc
-const generate = computed(() => props.id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h2)))
-</script>
--- a/app/components/content/ProseIcon.vue
+++ b/app/components/content/ProseIcon.vue
@@ -2,18 +2,25 @@
 defineProps({
  icon: {
    type: String,
-    required: true
-  }
+    required: true,
+  },
+  color: {
+    type: String,
+    default: 'gray',
+  },
 })
 </script>

 <template>
  <span class="inline-flex items-center">
    <UIcon
-      class="mb-1 mr-1"
-      :name="icon"
+      class="mr-1"
+      :name="`i-logos:${icon}`"
    />
-    <span class="sofia font-medium underline-offset-2 underline decoration-neutral-300 dark:decoration-neutral-700">
+    <span
+      :class="`text-${color}-500 decoration-${color}-300`"
+      class="sofia font-medium underline-offset-2 underline"
+    >
      <slot />
    </span>
  </span>
--- a/app/components/content/Quote.vue
+++ b/app/components/content/Quote.vue
@@ -1,16 +1,21 @@
+<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 👋">
-        <UAvatar
-          alt="Avatar"
-          chip-color="gray"
-          chip-position="top-right"
-          chip-text="!"
-          class="hover:rotate-[360deg] duration-500 transform-gpu"
-          size="md"
-          src="/favicon.png"
-        />
+        <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">
@@ -19,12 +24,6 @@
  </div>
 </template>

-<script lang="ts" setup>
-const { t } = useI18n({
-  useScope: 'local'
-})
-</script>
-
 <i18n lang="json">
 {
  "en": {
--- a/app/components/content/Stats.vue
+++ b/app/components/content/Stats.vue
@@ -1,10 +1,15 @@
 <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'
+  useScope: 'local',
 })
+
+const formatDate = (date: Date, format: string) => useDateFormat(date, format, { locales: currentLocale.value?.code ?? 'en' }).value
 </script>

 <template>
@@ -15,12 +20,12 @@ const { t } = useI18n({
      tag="p"
    >
      <template #time>
-        {{ useTimeAgo(new Date(stats.coding.data.range.start)).value }}
+        {{ useTimeAgo(new Date(stats.coding.data.range.start)).value.split(' ')[0] }}
      </template>
      <template #date>
        <HoverText
          :hover="t('tooltip.date')"
-          :text="useDateFormat(new Date(stats.coding.data.range.start), 'Do MMMM YYYY').value"
+          :text="formatDate(new Date(stats.coding.data.range.start), 'DD MMMM YYYY')"
        />
      </template>
      <template #hours>
@@ -29,6 +34,9 @@ const { t } = useI18n({
          :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(' and ') }}
+      </template>
      <template
        v-if="stats.os.data[0]"
        #os
@@ -47,7 +55,7 @@ const { t } = useI18n({
 <i18n lang="json">
 {
  "en": {
-    "stats": "I collect some data for {time}, 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}.",
+    "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 🫣",
@@ -55,7 +63,7 @@ const { t } = useI18n({
    }
  },
  "fr": {
-    "stats": "Je collecte des données depuis {time}, 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}.",
+    "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 🫣",