Working and fixing some bugs

2026-01-20 15:01:47 +01:00 · 2021-07-02 19:33:05 +02:00
parent 85f8043a62
commit 693d08fe97
22 changed files with 10851 additions and 62 deletions
--- a/src/components/ContactForm.vue
+++ b/src/components/ContactForm.vue
@@ -79,7 +79,7 @@ export default defineComponent({
    const {$axios, $sentry} = useContext()
    const form = ref<Form>({} as Form)
    const handleForm = async () => {
-      const {data} = await $axios.post('form',
+      const response = await $axios.post('form',
        {
          email: form.value.email,
          name: form.value.name,
@@ -90,7 +90,7 @@ export default defineComponent({
            'Authorization': `Bearer ${process.env.API_TOKEN}`
          }
        })
-      if (data && data.status === 200) {
+      if (response.status === 200) {
        success.value = true
        setTimeout(() => {
          success.value = false
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -6,26 +6,23 @@
          <p class="inline">{{ $t('footer.find_me') }}
            <br class="md:hidden"/>
            <a class="font-semibold" href="https://twitch.com/ArthurDanjou" target="_blank" rel="noopener noreferrer">
-              <img class="inline" src="~/assets/images/socials/twitch.svg" alt="Twitch logo" height="20" width="20" />
+              <TwitchIcon />
              <span class="link">Twitch</span>
            </a>,
            <a class="font-semibold" href="https://github.com/ArthurDanjou" target="_blank" rel="noopener noreferrer">
-              <img v-if="!isDarkMode" class="inline" src="~/assets/images/socials/github-black.svg" alt="Github logo" height="20" width="20" />
-              <img v-else class="inline" src="~/assets/images/socials/github-white.svg" alt="Github logo" height="20" width="20" />
+              <GithubIcon />
              <span class="link">Github</span>
            </a> &
            <a class="font-semibold" href="https://twitter.com/ArthurDanj" target="_blank" rel="noopener noreferrer">
-              <img class="inline" src="/socials/twitter.svg" alt="Twitter logo" height="" width="20" height="20"/>
+              <TwitterIcon />
              <span class="link">Twitter</span>
            </a>
            <br class="md:hidden"/>
            {{ $t('footer.separator') }}
            <a class="font-semibold" href="mailto:contact@arthurdanjou.fr" target="_blank" rel="noopener noreferrer">
-              <svg class="inline" width="20" height="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-              </svg>
+              <MailIcon />
              <span class="link">Mail</span>
-              </a>
+            </a>
          </p>
          <br class="md:hidden"/>
          <span class="inline dark:text-dark-200 text-gray-600 text-xs">
@@ -35,9 +32,14 @@
        <p>
          {{ $t('footer.credits') }}
          <a class="font-semibold" target="_blank" href="https://nuxtjs.org" rel="noopener noreferrer">
-            <img class="inline" src="~/assets/images/socials/nuxtjs.svg" alt="NuxtJs logo" width="20" />
+            <NuxtIcon />
            <span class="link">NuxtJs</span>
          </a>
+          {{ $t('footer.credits_separator_and') }}
+          <a class="font-semibold" target="_blank" href="https://adonisjs.com" rel="noopener noreferrer">
+            <AdonisIcon />
+            <span class="link">AdonisJS</span>
+          </a>
          {{ $t('footer.credits_separator') }} <span>Arthur DANJOU</span>
        </p>
        <p>{{ $t('footer.copyrights', { date: getDate }) }}</p>
--- a/src/components/icons/AdonisIcon.vue
+++ b/src/components/icons/AdonisIcon.vue
@@ -0,0 +1,26 @@
+<template>
+  <svg class="inline" width="1.25em" height="1.25em" viewBox="0 0 512 512" focusable="false">
+    <path
+      d="M0 256c0 206.466 49.534 256 256 256s256-49.534 256-256S462.466 0 256 0S0 49.534 0 256zm173.626 160.582c-58.99.278-91.98-54.306-70.393-107.414l80.305-182.475c19.73-56.102 111.542-71.358 144.938 0l80.29 182.475c21.716 52.478-11.158 108.055-70.392 107.414c-19.592 1.368-58.414-17.567-82.434-16.068c-32.51-.363-54.67 16.891-82.314 16.068zm160.582-78.725L256 158.499l-79.257 179.358c47.532-20.986 108-22.252 157.465 0z"
+      :class="isDarkMode ? 'fill-adonis-dark' : 'fill-adonis-light'"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+import {computed, defineComponent, useContext} from "@nuxtjs/composition-api";
+
+export default defineComponent({
+  name: "GithubIcon",
+  setup() {
+    const {$colorMode} = useContext()
+    const isDarkMode = computed(() => {
+      return $colorMode.preference === 'dark'
+    })
+
+    return {
+      isDarkMode
+    }
+  }
+})
+</script>
--- a/src/components/icons/GithubIcon.vue
+++ b/src/components/icons/GithubIcon.vue
@@ -0,0 +1,26 @@
+<template>
+  <svg class="inline" width="1.5em" height="1.5em" viewBox="0 0 24 24" focusable="false">
+    <path
+      d="M10.07 20.503a1 1 0 0 0-1.18-.983c-1.31.24-2.963.276-3.402-.958a5.708 5.708 0 0 0-1.837-2.415a1.452 1.2 0 0 1-.167-.11a1 1 0 0 0-.93-.6h-.005a1 1 0 0 0-1 .995c-.004.815.81 1.338 1.141 1.514a4.44 4.44 0 0 1 .924 1.36c.365 1.023 1.423 2.576 4.466 2.376l.003.098l.004.268a1 1 0 0 0 2 0l-.005-.318c-.005-.19-.012-.464-.012-1.182zM20.737 5.377c.032-.125.063-.264.09-.42a6.278 6.278 0 0 0-.408-3.293a1.002 1.002 0 0 0-.615-.58c-.356-.12-1.67-.357-4.184 1.25a13.87 13.87 0 0 0-6.354 0C6.762.75 5.455.966 5.102 1.079a.997.997 0 0 0-.631.584a6.3 6.3 0 0 0-.404 3.357c.025.127.051.246.079.354a6.27 6.27 0 0 0-1.256 3.83a8.422 8.422 0 0 0 .043.921c.334 4.603 3.334 5.984 5.424 6.459a4.591 4.591 0 0 0-.118.4a1 1 0 0 0 1.942.479a1.678 1.678 0 0 1 .468-.878a1 1 0 0 0-.546-1.745c-3.454-.395-4.954-1.802-5.18-4.899a6.61 6.61 0 0 1-.033-.738a4.258 4.258 0 0 1 .92-2.713a3.022 3.022 0 0 1 .195-.231a1 1 0 0 0 .188-1.025a3.388 3.388 0 0 1-.155-.555a4.094 4.094 0 0 1 .079-1.616a7.543 7.543 0 0 1 2.415 1.18a1.009 1.009 0 0 0 .827.133a11.777 11.777 0 0 1 6.173.001a1.005 1.005 0 0 0 .83-.138a7.572 7.572 0 0 1 2.406-1.19a4.04 4.04 0 0 1 .087 1.578a3.205 3.205 0 0 1-.169.607a1 1 0 0 0 .188 1.025c.078.087.155.18.224.268A4.122 4.122 0 0 1 20 9.203a7.039 7.039 0 0 1-.038.777c-.22 3.056-1.725 4.464-5.195 4.86a1 1 0 0 0-.546 1.746a1.63 1.63 0 0 1 .466.908a3.06 3.06 0 0 1 .093.82v2.333c-.01.648-.01 1.133-.01 1.356a1 1 0 1 0 2 0c0-.217 0-.692.01-1.34v-2.35a4.881 4.881 0 0 0-.155-1.311a4.256 4.256 0 0 0-.116-.416a6.513 6.513 0 0 0 5.445-6.424A8.697 8.697 0 0 0 22 9.203a6.13 6.13 0 0 0-1.263-3.826z"
+      :fill="isDarkMode ? 'white' : 'black'"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+import {computed, defineComponent, useContext} from "@nuxtjs/composition-api";
+
+export default defineComponent({
+  name: "GithubIcon",
+  setup() {
+    const {$colorMode} = useContext()
+    const isDarkMode = computed(() => {
+      return $colorMode.preference === 'dark'
+    })
+
+    return {
+      isDarkMode
+    }
+  }
+})
+</script>
--- a/src/components/icons/MailIcon.vue
+++ b/src/components/icons/MailIcon.vue
@@ -0,0 +1,26 @@
+<template>
+  <svg class="inline" width="1.5em" height="1.5em" viewBox="0 0 24 24" focusable="false">
+    <path
+      d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6m-2 0l-8 5l-8-5h16m0 12H4V8l8 5l8-5v10z"
+      :fill="isDarkMode ? 'white' : 'black'"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+import {computed, defineComponent, useContext} from "@nuxtjs/composition-api";
+
+export default defineComponent({
+  name: "GithubIcon",
+  setup() {
+    const {$colorMode} = useContext()
+    const isDarkMode = computed(() => {
+      return $colorMode.preference === 'dark'
+    })
+
+    return {
+      isDarkMode
+    }
+  }
+})
+</script>
--- a/src/components/icons/NuxtIcon.vue
+++ b/src/components/icons/NuxtIcon.vue
@@ -0,0 +1,21 @@
+<template>
+  <svg class="inline" width="1.5em" height="1.5em" viewBox="0 0 32 32" focusable="false">
+    <path
+      d="M10.648 25.734a1.465 1.465 0 0 1-.157-.942H3.847l9.869-17.375l4.159 7.41l1.308-.976l-4.107-7.384A1.752 1.752 0 0 0 13.7 5.56a1.531 1.531 0 0 0-1.343.924l-10 17.593a1.729 1.729 0 0 0-.087 1.656a1.526 1.526 0 0 0 1.456.706H12.1a1.523 1.523 0 0 1-1.456-.7z"
+      fill="#00c58e"
+    />
+    <path
+      d="M29.636 24.112L21.589 9.823a1.692 1.692 0 0 0-1.351-.907a1.489 1.489 0 0 0-1.308.907l-1.064 1.7v3.3l2.371-4.071l7.951 14.071h-3.025a1.377 1.377 0 0 1-.122.837l-.026.052a1.729 1.729 0 0 1-1.456.732h4.734a1.72 1.72 0 0 0 1.456-.732a1.548 1.548 0 0 0-.122-1.6z"
+      fill="#108775"
+    />
+    <path
+      d="M25.233 25.7l.026-.052l.07-.139a1.278 1.278 0 0 0 .061-.7a2.11 2.11 0 0 0-.27-.724l-6.286-10.9l-.95-1.656h-.017l-.959 1.648l-6.277 10.9a2.18 2.18 0 0 0-.244.715a1.438 1.438 0 0 0 .148.942a1.563 1.563 0 0 0 1.482.7h11.708a1.79 1.79 0 0 0 1.508-.741zm-7.367-10.864L23.62 24.8H12.112z"
+      fill="#2f495e"/>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "NuxtIcon"
+}
+</script>
--- a/src/components/icons/TwitchIcon.vue
+++ b/src/components/icons/TwitchIcon.vue
@@ -0,0 +1,34 @@
+<template>
+  <svg class="inline" width="1.5em" height="1.5em" viewBox="0 0 256 256" focusable="false">
+    <path
+      d="M71.998 252A12 12 0 0 1 60 240v-28H48a20.022 20.022 0 0 1-20-20V48a20.022 20.022 0 0 1 20-20h160a20.022 20.022 0 0 1 20 20v108.253a19.946 19.946 0 0 1-7.197 15.365l-42.896 35.746A20.036 20.036 0 0 1 165.104 212h-40.759l-44.663 37.219A11.994 11.994 0 0 1 71.998 252zM52 188h20a12 12 0 0 1 12 12v14.38l26.093-21.744A20.036 20.036 0 0 1 122.896 188h40.759L204 154.379V52H52z"
+      :fill="isDarkMode ? 'white' : 'black'"
+    />
+    <path
+      d="M168 148a12 12 0 0 1-12-12V88a12 12 0 0 1 24 0v48a12 12 0 0 1-12 12z"
+      :fill="isDarkMode ? 'white' : 'black'"
+    />
+    <path
+      d="M120 148a12 12 0 0 1-12-12V88a12 12 0 0 1 24 0v48a12 12 0 0 1-12 12z"
+      :fill="isDarkMode ? 'white' : 'black'"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+import {computed, defineComponent, useContext} from "@nuxtjs/composition-api";
+
+export default defineComponent({
+  name: "TwitterIcon",
+  setup() {
+    const {$colorMode} = useContext()
+    const isDarkMode = computed(() => {
+      return $colorMode.preference === 'dark'
+    })
+
+    return {
+      isDarkMode
+    }
+  }
+})
+</script>
--- a/src/components/icons/TwitterIcon.vue
+++ b/src/components/icons/TwitterIcon.vue
@@ -0,0 +1,26 @@
+<template>
+  <svg class="inline" width="1.5em" height="1.5em" viewBox="0 0 24 24" focusable="false">
+    <path
+      d="M15.3 5.55a2.9 2.9 0 0 0-2.9 2.847l-.028 1.575a.6.6 0 0 1-.68.583l-1.561-.212c-2.054-.28-4.022-1.226-5.91-2.799c-.598 3.31.57 5.603 3.383 7.372l1.747 1.098a.6.6 0 0 1 .034.993L7.793 18.17c.947.059 1.846.017 2.592-.131c4.718-.942 7.855-4.492 7.855-10.348c0-.478-1.012-2.141-2.94-2.141zm-4.9 2.81a4.9 4.9 0 0 1 8.385-3.355c.711-.005 1.316.175 2.669-.645c-.335 1.64-.5 2.352-1.214 3.331c0 7.642-4.697 11.358-9.463 12.309c-3.268.652-8.02-.419-9.382-1.841c.694-.054 3.514-.357 5.144-1.55C5.16 15.7-.329 12.47 3.278 3.786c1.693 1.977 3.41 3.323 5.15 4.037c1.158.475 1.442.465 1.973.538z"
+      :fill="isDarkMode ? 'white' : 'black'"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+import {computed, defineComponent, useContext} from "@nuxtjs/composition-api";
+
+export default defineComponent({
+  name: "TwitterIcon",
+  setup() {
+    const {$colorMode} = useContext()
+    const isDarkMode = computed(() => {
+      return $colorMode.preference === 'dark'
+    })
+
+    return {
+      isDarkMode
+    }
+  }
+})
+</script>