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-24 10:52:10 +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/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -1,28 +1,29 @@
 <script setup lang="ts">
 const socials = [
  {
-    icon: 'i-ph-x-logo-duotone',
+    icon: 'x-logo-duotone',
    label: 'Twitter',
-    link: 'https://twitter.com/ArthurDanj'
+    link: 'https://twitter.com/ArthurDanj',
  },
  {
-    icon: 'i-ph-github-logo-duotone',
+    icon: 'github-logo-duotone',
    label: 'GitHub',
-    link: 'https://github.com/ArthurDanjou'
+    link: 'https://github.com/ArthurDanjou',
  },
  {
-    icon: 'i-ph-linkedin-logo-duotone',
+    icon: 'linkedin-logo-duotone',
    label: 'LinkedIn',
-    link: 'https://www.linkedin.com/in/arthurdanjou/'
-  }, {
-    icon: 'i-ph-discord-logo-duotone',
+    link: 'https://www.linkedin.com/in/arthurdanjou/',
+  },
+  {
+    icon: 'discord-logo-duotone',
    label: 'Discord',
-    link: 'https://discordapp.com/users/179635349100691456'
-  }
+    link: 'https://discordapp.com/users/179635349100691456',
+  },
 ]

 const { t } = useI18n({
-  useScope: 'local'
+  useScope: 'local',
 })
 </script>

@@ -43,7 +44,7 @@ const { t } = useI18n({
            v-for="social in socials.sort((a, b) => a.label.localeCompare(b.label))"
            :key="social.label"
            :href="social.link"
-            :icon="social.icon"
+            :icon="`i-ph:${social.icon}`"
            :label="social.label"
            target="_blank"
          />
@@ -63,7 +64,7 @@ const { t } = useI18n({
    <div class="mt-8 w-full flex justify-center text-xs">
      {{
        t('copyright', {
-          date: new Date().getFullYear()
+          date: new Date().getFullYear(),
        })
      }}
    </div>
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -14,7 +14,7 @@ const navs = [
      es: 'inicio'
    },
    to: '/',
-    icon: 'i-ph-house-line-duotone',
+    icon: 'house-line-duotone',
    shortcut: {
      en: 'H',
      fr: 'A',
@@ -28,7 +28,7 @@ const navs = [
      es: 'usos'
    },
    to: '/uses',
-    icon: 'i-ph-backpack-duotone',
+    icon: 'backpack-duotone',
    shortcut: {
      en: 'U',
      fr: 'U',
@@ -37,12 +37,12 @@ const navs = [
  },
  {
    label: {
-      en: 'writings',
-      fr: 'écrits',
+      en: 'portfolio',
+      fr: 'portfolio',
      es: 'escritos'
    },
-    to: '/writings',
-    icon: 'i-ph-books-duotone',
+    to: '/portfolio',
+    icon: 'books-duotone',
    shortcut: {
      en: 'W',
      fr: 'E',
@@ -55,9 +55,8 @@ const navs = [
      fr: 'cv',
      es: 'currículum'
    },
-    to: config.public.cloud.resume,
+    to: '/Resume2024.pdf',
    target: '_blank',
-    icon: 'i-ph-address-book-duotone',
    shortcut: {
      en: 'R',
      fr: 'C',
@@ -78,6 +77,7 @@ async function toggleTheme() {
 }

 const { locale, setLocale, locales, t, availableLocales } = useI18n()
+const currentLocale = computed(() => locales.value.filter(l => l.code === locale.value)[0])

 async function changeLocale(newLocale?: string) {
  document.body.style.animation = 'switch-on .2s'
@@ -103,16 +103,9 @@ watch(lang, () => changeLocale(lang.value))

 const router = useRouter()
 defineShortcuts({
-  h: () => router.push('/'),
-  a: () => router.push('/'),
-  u: () => router.push('/uses'),
-  w: () => router.push('/writings'),
-  e: () => router.push('/writings'),
-  r: () => window.open(config.public.cloud.resume, '_blank'),
-  c: () => window.open(config.public.cloud.resume, '_blank'),
  t: () => toggleTheme(),
  l: () => changeLocale(),
-  backspace: () => router.back()
+  backspace: () => router.back(),
 })
 </script>

@@ -128,11 +121,10 @@ defineShortcuts({
      <UTooltip
        v-for="nav in navs"
        :key="nav.label.en"
-        :shortcuts="[nav.shortcut[locale]]"
        :text="nav.label[locale]!"
      >
        <UButton
-          :icon="nav.icon"
+          :icon="`i-ph:${nav.icon}`"
          :target="nav.target ? nav.target : '_self'"
          :to="nav.to"
          :aria-label="nav.label"
--- a/app/components/AppTitle.vue
+++ b/app/components/AppTitle.vue
@@ -2,12 +2,12 @@
 defineProps({
  title: {
    type: String,
-    required: true
+    required: true,
  },
  description: {
    type: String,
-    required: true
-  }
+    required: true,
+  },
 })
 </script>

--- 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 🫣",
--- a/app/components/home/Link.vue
+++ b/app/components/home/Link.vue
@@ -2,19 +2,19 @@
 defineProps({
  label: {
    type: String,
-    required: true
+    required: true,
  },
  href: {
    type: String,
-    required: true
+    required: true,
  },
  icon: {
-    type: String
+    type: String,
  },
  blanked: {
    type: Boolean,
-    default: false
-  }
+    default: false,
+  },
 })
 </script>

--- a/app/components/home/Map.vue
+++ b/app/components/home/Map.vue
@@ -21,7 +21,7 @@ function adjustZoom(amount: number) {
 }

 const { t } = useI18n({
-  useScope: 'local'
+  useScope: 'local',
 })

 const config = useRuntimeConfig()
@@ -36,7 +36,7 @@ const config = useRuntimeConfig()
          style: isDark ? config.public.mapbox.style.dark : config.public.mapbox.style.light,
          center: coordinates,
          zoom,
-          projection: 'globe'
+          projection: 'globe',
        }"
        class="relative z-10"
        map-id="map"
@@ -45,7 +45,7 @@ const config = useRuntimeConfig()
          :lnglat="coordinates"
          :options="{
            color: '#808080',
-            size: 1.5
+            size: 1.5,
          }"
          marker-id="marker"
        />
@@ -87,7 +87,7 @@ const config = useRuntimeConfig()

 <style lang="scss">
 .map-button {
-  @apply z-30 absolute bottom-2 dark:bg-gray-800 dark:hover:bg-gray-900 bg-gray-200 hover:bg-gray-100 duration-300 border border-neutral-300 dark:border-neutral-700 cursor-pointer flex items-center justify-center rounded-full p-2
+  @apply z-30 absolute bottom-2 dark:bg-gray-900 dark:hover:bg-gray-900 bg-gray-200 hover:bg-gray-100 duration-300 border border-neutral-300 dark:border-neutral-700 cursor-pointer flex items-center justify-center rounded-full p-2
 }

 .mapboxgl-control-container {
--- a/app/components/uses/Item.vue
+++ b/app/components/uses/Item.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import type { PropType } from 'vue'
 import type { UsesItem } from '#components'
+import type { PropType } from 'vue'

 defineProps({
  item: {
    type: Object as PropType<typeof UsesItem>,
-    required: true
-  }
+    required: true,
+  },
 })

 const { locale } = useI18n()
--- a/app/components/uses/List.vue
+++ b/app/components/uses/List.vue
@@ -1,3 +1,12 @@
+<script lang="ts" setup>
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+})
+</script>
+
 <template>
  <div class="space-y-8">
    <UDivider
@@ -9,12 +18,3 @@
    </ul>
  </div>
 </template>
-
-<script lang="ts" setup>
-defineProps({
-  title: {
-    type: String,
-    required: true
-  }
-})
-</script>