Add icon for color mode and for translation

2026-01-14 13:54:02 +01:00 · 2022-05-30 23:29:20 +02:00
parent b97fa13c1f
commit e6a096b76a
18 changed files with 200 additions and 39 deletions
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -38,7 +38,6 @@ declare global {
  const h: typeof import('vue')['h']
  const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
  const inject: typeof import('vue')['inject']
-  const isDark: typeof import('./src/composables/dark')['isDark']
  const isDefined: typeof import('@vueuse/core')['isDefined']
  const isProxy: typeof import('vue')['isProxy']
  const isReactive: typeof import('vue')['isReactive']
@@ -95,7 +94,6 @@ declare global {
  const toReactive: typeof import('@vueuse/core')['toReactive']
  const toRef: typeof import('vue')['toRef']
  const toRefs: typeof import('vue')['toRefs']
-  const toggleDark: typeof import('./src/composables/dark')['toggleDark']
  const triggerRef: typeof import('vue')['triggerRef']
  const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
  const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
@@ -286,7 +284,6 @@ declare module 'vue' {
    h: typeof import('vue')['h']
    ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
    inject: typeof import('vue')['inject']
-    isDark: typeof import('./src/composables/dark')['isDark']
    isDefined: typeof import('@vueuse/core')['isDefined']
    isProxy: typeof import('vue')['isProxy']
    isReactive: typeof import('vue')['isReactive']
@@ -343,7 +340,6 @@ declare module 'vue' {
    toReactive: typeof import('@vueuse/core')['toReactive']
    toRef: typeof import('vue')['toRef']
    toRefs: typeof import('vue')['toRefs']
-    toggleDark: typeof import('./src/composables/dark')['toggleDark']
    triggerRef: typeof import('vue')['triggerRef']
    tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
    tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
--- a/components.d.ts
+++ b/components.d.ts
@@ -5,8 +5,14 @@ import '@vue/runtime-core'

 declare module '@vue/runtime-core' {
  export interface GlobalComponents {
+    ColorModeButton: typeof import('./src/components/ColorModeButton.vue')['default']
+    FlagIcon: typeof import('./src/components/icons/FlagIcon.vue')['default']
+    Footer: typeof import('./src/components/Footer.vue')['default']
+    LanguageButton: typeof import('./src/components/LanguageButton.vue')['default']
+    MoonIcon: typeof import('./src/components/icons/MoonIcon.vue')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
+    SunIcon: typeof import('./src/components/icons/SunIcon.vue')['default']
  }
 }

--- a/locales/en.json
+++ b/locales/en.json
@@ -1,10 +1,10 @@
 {
-  "maintenance": "⚠️ Services under maintenance ⚠️",
-  "maintenance_reason": "We'll be back soon. Please check back later.",
+  "maintenance": "Services under maintenance ⚠️",
+  "maintenance_reason": "⚠️ We'll be back soon. Please check back later.",
  "maintenance_description": "Sorry for the inconvenience but we're performing some maintenance at the moment. We'll be back online shortly! If you need to you can always contact us.",
  "team": "- The ArtDanjProduction Team",

-  "error": "❌ Service not found ❌",
-  "error_reason": "The service you are looking for does not exist.",
+  "error": "Service not found ❌",
+  "error_reason": "❌ The service you are looking for does not exist.",
  "error_description": "Please check the URL or try again later. If you continue to experience issues, please contact us."
 }
--- a/locales/fr.json
+++ b/locales/fr.json
@@ -1,10 +1,10 @@
 {
-  "maintenance": "⚠️ Services en maintenance ⚠️",
-  "maintenance_reason": "Nous reviendrons bientôt. Veuillez revenir plus tard.",
+  "maintenance": "Services en maintenance ⚠️",
+  "maintenance_reason": "⚠️ Nous reviendrons bientôt. Veuillez revenir plus tard.",
  "maintenance_description": "Désolé pour la gêne occasionnée, mais nous effectuons actuellement une maintenance. Nous serons bientôt de retour en ligne ! Si vous en avez besoin, vous pouvez toujours nous contacter.",
-  "team": "- L'équipe ArtDanjProduction",
+  "team": "-- L'équipe ArtDanjProduction",

-  "error": "❌ Service introuvable ❌",
-  "error_reason": "Le service que vous recherchez n'existe pas.",
+  "error": "Service introuvable ❌",
+  "error_reason": "❌ Le service que vous recherchez n'existe pas.",
  "error_description": "Veuillez vérifier l'URL ou réessayer plus tard. Si vous continuez à rencontrer des problèmes, veuillez nous contacter."
 }
--- a/package.json
+++ b/package.json
@@ -2,9 +2,8 @@
  "private": true,
  "scripts": {
    "build": "vite build",
-    "dev": "vite --port 3333 --open",
+    "dev": "vite --port 3355 --open --host",
    "lint": "eslint .",
-    "typecheck": "vue-tsc --noEmit",
    "preview": "vite preview --port 3355 --host"
  },
  "dependencies": {
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,14 +1,6 @@
-<script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-
-const title = useTitle()
-title.value = t('title')
-</script>
-
 <template>
  <main class="h-full w-full flex items-center justify-center">
    <router-view />
+    <Footer />
  </main>
 </template>
--- a/src/components/ColorModeButton.vue
+++ b/src/components/ColorModeButton.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const isDark = useDark()
+const toggleDark = () => isDark.value = !isDark.value
+</script>
+
+<template>
+  <div
+    class="h-9 w-9 cursor-pointer flex items-center p-1.5 rounded-xl hover:bg-gray-300 dark:hover:bg-dark-400 duration-200"
+    @click.prevent="toggleDark"
+  >
+    <div v-if="isDark">
+      <SunIcon />
+    </div>
+    <div v-else>
+      <MoonIcon />
+    </div>
+  </div>
+</template>
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -0,0 +1,6 @@
+<template>
+  <footer class="fixed top-4 right-4 flex flex-col space-y-2">
+    <ColorModeButton />
+    <LanguageButton />
+  </footer>
+</template>
--- a/src/components/LanguageButton.vue
+++ b/src/components/LanguageButton.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+const { locale } = useI18n()
+const isFrench = computed(() => locale.value === 'fr')
+const changeLanguage = () => {
+  locale.value = locale.value === 'fr' ? 'en' : 'fr'
+}
+</script>
+
+<template>
+  <div
+    class="h-9 w-9 cursor-pointer flex items-center justify-center p-1.5 rounded-xl hover:bg-gray-300 duration-200 dark:hover:bg-dark-400"
+    @click="changeLanguage()"
+  >
+    <FlagIcon :french="isFrench" />
+  </div>
+</template>
--- a/src/components/icons/FlagIcon.vue
+++ b/src/components/icons/FlagIcon.vue
@@ -0,0 +1,60 @@
+<script>
+export default {
+  name: 'TranslateIcon',
+  props: {
+    french: {
+      type: Boolean,
+      default: true,
+    },
+  },
+}
+</script>
+
+<template>
+  <svg
+    v-if="french"
+    class="inline"
+    width="1.5em"
+    height="1.5em"
+    viewBox="0 0 36 36"
+    focusable="false"
+  >
+    <path
+      fill="#00247D"
+      d="M0 9.059V13h5.628zM4.664 31H13v-5.837zM23 25.164V31h8.335zM0 23v3.941L5.63 23zM31.337 5H23v5.837zM36 26.942V23h-5.631zM36 13V9.059L30.371 13zM13 5H4.664L13 10.837z"
+    />
+    <path
+      fill="#CF1B2B"
+      d="M25.14 23l9.712 6.801a3.977 3.977 0 0 0 .99-1.749L28.627 23H25.14zM13 23h-2.141l-9.711 6.8c.521.53 1.189.909 1.938 1.085L13 23.943V23zm10-10h2.141l9.711-6.8a3.988 3.988 0 0 0-1.937-1.085L23 12.057V13zm-12.141 0L1.148 6.2a3.994 3.994 0 0 0-.991 1.749L7.372 13h3.487z"
+    />
+    <path
+      fill="#EEE"
+      d="M36 21H21v10h2v-5.836L31.335 31H32a3.99 3.99 0 0 0 2.852-1.199L25.14 23h3.487l7.215 5.052c.093-.337.158-.686.158-1.052v-.058L30.369 23H36v-2zM0 21v2h5.63L0 26.941V27c0 1.091.439 2.078 1.148 2.8l9.711-6.8H13v.943l-9.914 6.941c.294.07.598.116.914.116h.664L13 25.163V31h2V21H0zM36 9a3.983 3.983 0 0 0-1.148-2.8L25.141 13H23v-.943l9.915-6.942A4.001 4.001 0 0 0 32 5h-.663L23 10.837V5h-2v10h15v-2h-5.629L36 9.059V9zM13 5v5.837L4.664 5H4a3.985 3.985 0 0 0-2.852 1.2l9.711 6.8H7.372L.157 7.949A3.968 3.968 0 0 0 0 9v.059L5.628 13H0v2h15V5h-2z"
+    />
+    <path
+      fill="#CF1B2B"
+      d="M21 15V5h-6v10H0v6h15v10h6V21h15v-6z"
+    />
+  </svg>
+  <svg
+    v-else
+    class="inline"
+    width="1.5em"
+    height="1.5em"
+    viewBox="0 0 36 36"
+    focusable="false"
+  >
+    <path
+      fill="#ED2939"
+      d="M36 27a4 4 0 0 1-4 4h-8V5h8a4 4 0 0 1 4 4v18z"
+    />
+    <path
+      fill="#002495"
+      d="M4 5a4 4 0 0 0-4 4v18a4 4 0 0 0 4 4h8V5H4z"
+    />
+    <path
+      fill="#EEE"
+      d="M12 5h12v26H12z"
+    />
+  </svg>
+</template>
--- a/src/components/icons/MoonIcon.vue
+++ b/src/components/icons/MoonIcon.vue
@@ -0,0 +1,21 @@
+<script>
+export default {
+  name: 'MoonIcon',
+}
+</script>
+
+<template>
+  <svg
+    class="inline"
+    width="1.5em"
+    height="1.5em"
+    viewBox="0 0 16 16"
+    focusable="false"
+  >
+    <g fill="currentColor">
+      <path
+        d="M6 .278a.768.768 0 0 1 .08.858a7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277c.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316a.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71C0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
+      />
+    </g>
+  </svg>
+</template>
--- a/src/components/icons/SunIcon.vue
+++ b/src/components/icons/SunIcon.vue
@@ -0,0 +1,52 @@
+<script>
+export default {
+  name: 'SunIcon',
+}
+</script>
+
+<template>
+  <svg
+    class="inline"
+    width="1.5em"
+    height="1.5em"
+    viewBox="0 0 512 512"
+    focusable="false"
+  >
+    <path
+      d="M256 118a22 22 0 0 1-22-22V48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22z"
+      fill="currentColor"
+    />
+    <path
+      d="M256 486a22 22 0 0 1-22-22v-48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22z"
+      fill="currentColor"
+    />
+    <path
+      d="M369.14 164.86a22 22 0 0 1-15.56-37.55l33.94-33.94a22 22 0 0 1 31.11 31.11l-33.94 33.94a21.93 21.93 0 0 1-15.55 6.44z"
+      fill="currentColor"
+    />
+    <path
+      d="M108.92 425.08a22 22 0 0 1-15.55-37.56l33.94-33.94a22 22 0 1 1 31.11 31.11l-33.94 33.94a21.94 21.94 0 0 1-15.56 6.45z"
+      fill="currentColor"
+    />
+    <path
+      d="M464 278h-48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44z"
+      fill="currentColor"
+    />
+    <path
+      d="M96 278H48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44z"
+      fill="currentColor"
+    />
+    <path
+      d="M403.08 425.08a21.94 21.94 0 0 1-15.56-6.45l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.55 37.56z"
+      fill="currentColor"
+    />
+    <path
+      d="M142.86 164.86a21.89 21.89 0 0 1-15.55-6.44l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.56 37.55z"
+      fill="currentColor"
+    />
+    <path
+      d="M256 358a102 102 0 1 1 102-102a102.12 102.12 0 0 1-102 102z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
--- a/src/composables/dark.ts
+++ b/src/composables/dark.ts
@@ -1,2 +0,0 @@
-export const isDark = useDark()
-export const toggleDark = useToggle(isDark)
--- a/src/composables/index.ts
+++ b/src/composables/index.ts
@@ -1 +0,0 @@
-export * from './dark'
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -4,18 +4,18 @@ import { useI18n } from 'vue-i18n'
 const { t } = useI18n()

 const title = useTitle()
-title.value = t('error')
+title.value = `Fallback - ${t('error')}`
 </script>

 <template>
  <section class="w-2/3 text-justify">
-    <h1 class="text-5xl font-black">
+    <h1 class="text-2xl lg:text-5xl font-black">
      {{ t('error_reason') }}
    </h1>
-    <h3 class="text-3xl my-4">
+    <h3 class="text-lg lg:text-3xl my-4">
      {{ t('error_description') }}
    </h3>
-    <p class="text-xl text-gray-300">
+    <p class="text-md lg:text-xl text-gray-600 dark:text-gray-300">
      {{ t('team') }}
    </p>
  </section>
--- a/src/pages/maintenance.vue
+++ b/src/pages/maintenance.vue
@@ -4,18 +4,18 @@ import { useI18n } from 'vue-i18n'
 const { t } = useI18n()

 const title = useTitle()
-title.value = t('maintenance')
+title.value = `Fallback - ${t('maintenance')}`
 </script>

 <template>
  <section class="w-2/3 text-justify">
-    <h1 class="text-5xl font-black">
+    <h1 class="text-2xl lg:text-5xl font-black">
      {{ t('maintenance_reason') }}
    </h1>
-    <h3 class="text-3xl my-4">
+    <h3 class="text-lg lg:text-3xl my-4">
      {{ t('maintenance_description') }}
    </h3>
-    <p class="text-xl text-gray-300">
+    <p class="text-md lg:text-xl text-gray-600 dark:text-gray-300">
      {{ t('team') }}
    </p>
  </section>
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -8,7 +8,3 @@ body,
  padding: 0;
  font-family: 'Raleway', sans-serif;
 }
-
-html.dark {
-  background: #121212;
-}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -39,6 +39,7 @@ export default defineConfig({
    // https://github.com/antfu/vite-plugin-components
    Components({
      dts: true,
+      deep: true,
    }),

    WindiCSS(),