fix(icons,branding): swap twitter to X (CorentinTh#1369)

gitmotion · web-flow · commit ea8c4ed077bd · 2024-10-25T20:17:08.000+02:00
diff --git a/locales/de.yml b/locales/de.yml
@@ -21,13 +21,13 @@ home:
     p1: Gib uns einen Stern auf
     githubRepository: IT-Tools GitHub-Repository
     p2: oder folge uns auf
-    twitterAccount: IT-Tools Twitter-Konto
+    twitterXAccount: IT-Tools X-Konto
     thankYou: Vielen Dank!
   nav:
     github: GitHub-Repository
     githubRepository: IT-Tools GitHub-Repository
-    twitter: Twitter-Konto
-    twitterAccount: IT-Tools Twitter-Konto
+    twitterX: X-Konto
+    twitterXAccount: IT-Tools X-Konto
     about: Über IT-Tools
     aboutLabel: Über
     darkMode: Dunkelmodus
diff --git a/locales/en.yml b/locales/en.yml
@@ -14,13 +14,13 @@ home:
     p1: 'Give us a star on'
     githubRepository: 'IT-Tools GitHub repository'
     p2: 'or follow us on'
-    twitterAccount: 'IT-Tools Twitter account'
+    twitterXAccount: 'IT-Tools X account'
     thankYou: 'Thank you!'
   nav:
     github: 'GitHub repository'
     githubRepository: 'IT-Tools GitHub repository'
-    twitter: 'Twitter account'
-    twitterAccount: 'IT Tools Twitter account'
+    twitterX: 'X account'
+    twitterXAccount: 'IT Tools X account'
     about: 'About  IT-Tools'
     aboutLabel: 'About'
     darkMode: 'Dark mode'
diff --git a/locales/es.yml b/locales/es.yml
@@ -14,13 +14,13 @@ home:
     p1: 'Danos una estrella en'
     githubRepository: 'Repositorio de IT-Tools en GitHub'
     p2: 'o síguenos en'
-    twitterAccount: 'Cuenta de twitter de IT-Tools'
+    twitterXAccount: 'Cuenta de X de IT-Tools'
     thankYou: 'Muchas gracias!'
   nav:
     github: 'Repositorio en github'
     githubRepository: 'IT-Tools GitHub repository'
-    twitter: 'Cuenta de Twitter'
-    twitterAccount: 'Cuenta de twitter de IT Tools'
+    twitterX: 'Cuenta de X'
+    twitterXAccount: 'Cuenta de X de IT Tools'
     about: 'Sobre  IT-Tools'
     aboutLabel: 'Sobre'
     darkMode: 'Modo obscuro'
diff --git a/locales/fr.yml b/locales/fr.yml
@@ -13,13 +13,13 @@ home:
     p1: 'Soutenez-nous avec une star sur'
     githubRepository: "le dépôt GitHub d'IT-Tools"
     p2: 'ou suivez-nous sur'
-    twitterAccount: "le compte Twitter d'IT-Tools"
+    twitterXAccount: "le compte X d'IT-Tools"
     thankYou: 'Merci !'
   nav:
     github: 'Dépôt GitHub'
     githubRepository: "Dépôt GitHub d'IT-Tools"
-    twitter: 'Compte Twitter'
-    twitterAccount: "Compte Twitter d'IT-Tools"
+    twitterX: 'Compte X'
+    twitterXAccount: "Compte X d'IT-Tools"
     about: "À propos d'IT-Tools"
     aboutLabel: 'À propos'
     darkMode: 'Mode sombre'
diff --git a/locales/no.yml b/locales/no.yml
@@ -14,13 +14,13 @@ home:
     p1: 'Gi oss en stjerne på'
     githubRepository: 'IT-Tools GitHub-depotet'
     p2: 'eller følg oss på'
-    twitterAccount: 'IT-Tools sin twitter konto'
+    twitterXAccount: 'IT-Tools sin X konto'
     thankYou: 'Tusen takk!'
   nav:
     github: 'GitHub-depot'
     githubRepository: 'IT-Tools GitHub-depot'
-    twitter: 'Twitter konto'
-    twitterAccount: 'IT Tools Twitter konto'
+    twitterX: 'X konto'
+    twitterXAccount: 'IT Tools X konto'
     about: 'Om  IT-Tools'
     aboutLabel: 'Om'
     darkMode: 'Mørk modus'
diff --git a/locales/pt.yml b/locales/pt.yml
@@ -14,13 +14,13 @@ home:
     p1: 'Dê uma estrela no'
     githubRepository: 'repositório do IT-Tools no GitHub'
     p2: 'ou siga nossa'
-    twitterAccount: 'conta IT-Tools no Twitter'
+    twitterXAccount: 'conta IT-Tools no X'
     thankYou: 'Obrigado !'
   nav:
     github: 'Repositório no GitHub'
     githubRepository: 'repositório do IT-Tools no GitHub'
-    twitter: 'Conta no Twitter'
-    twitterAccount: 'conta do IT Tools no Twitter'
+    twitterX: 'Conta no X'
+    twitterXAccount: 'conta do IT Tools no X'
     about: 'Sobre o IT-Tools'
     aboutLabel: 'Sobre'
     darkMode: 'Modo Escuro'
diff --git a/locales/uk.yml b/locales/uk.yml
@@ -14,13 +14,13 @@ home:
     p1: 'Додайте нам зірку на'
     githubRepository: 'GitHub-репозиторій IT-Tools'
     p2: 'або слідкуйте за нами на'
-    twitterAccount: 'Твіттер-акаунт IT-Tools'
+    twitterXAccount: 'X-акаунт IT-Tools'
     thankYou: 'Дякуємо!'
   nav:
     github: 'GitHub-репозиторій'
     githubRepository: 'GitHub-репозиторій IT-Tools'
-    twitter: 'Твіттер'
-    twitterAccount: 'Твіттер-акаунт IT-Tools'
+    twitterX: 'X'
+    twitterXAccount: 'X-акаунт IT-Tools'
     about: 'Про IT-Tools'
     aboutLabel: 'Про нас'
     darkMode: 'Темний режим'
diff --git a/locales/vi.yml b/locales/vi.yml
@@ -14,13 +14,13 @@ home:
     p1: 'Hãy cho chúng tôi một ngôi sao trên'
     githubRepository: 'Kho GitHub IT-Tools'
     p2: 'hoặc theo dõi chúng tôi trên'
-    twitterAccount: 'Tài khoản Twitter IT-Tools'
+    twitterXAccount: 'Tài khoản X IT-Tools'
     thankYou: 'Cảm ơn bạn!'
   nav:
     github: 'Kho GitHub'
     githubRepository: 'Kho GitHub IT-Tools'
-    twitter: 'Tài khoản Twitter'
-    twitterAccount: 'Tài khoản Twitter IT Tools'
+    twitterX: 'Tài khoản X'
+    twitterXAccount: 'Tài khoản X IT Tools'
     about: 'Về IT-Tools'
     aboutLabel: 'Giới thiệu'
     darkMode: 'Chế độ tối'
diff --git a/locales/zh.yml b/locales/zh.yml
@@ -14,13 +14,13 @@ home:
     p1: '给我们 Star'
     githubRepository: 'GitHub 仓库'
     p2: '关注我们的'
-    twitterAccount: 'Twitter'
+    twitterXAccount: 'IT-Tools X 账号'
     thankYou: '感谢您的支持！'
   nav:
     github: 'GitHub 仓库'
     githubRepository: 'GitHub 仓库'
-    twitter: 'Twitter 账号'
-    twitterAccount: 'Twitter 账号'
+    twitterX: 'Twitter 账号'
+    twitterXAccount: 'IT-Tools X 账号'
     about: '关于 IT-Tools'
     aboutLabel: '关于'
     darkMode: '深色模式'
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "@it-tools/oggen": "^1.3.0",
     "@regexper/render": "^1.0.0",
     "@sindresorhus/slugify": "^2.2.1",
+    "@tabler/icons-vue": "^3.20.0",
     "@tiptap/pm": "2.1.6",
     "@tiptap/starter-kit": "2.1.6",
     "@tiptap/vue-3": "2.0.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/NavbarButtons.vue b/src/components/NavbarButtons.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BrandGithub, BrandTwitter, InfoCircle, Moon, Sun } from '@vicons/tabler';
+import { IconBrandGithub, IconBrandX, IconInfoCircle, IconMoon, IconSun } from '@tabler/icons-vue';
 import { useStyleStore } from '@/stores/style.store';
 
 const styleStore = useStyleStore();
@@ -16,32 +16,32 @@ const { isDarkTheme } = toRefs(styleStore);
       rel="noopener noreferrer"
       :aria-label="$t('home.nav.githubRepository')"
     >
-      <n-icon size="25" :component="BrandGithub" />
+      <n-icon size="25" :component="IconBrandGithub" />
     </c-button>
   </c-tooltip>
 
-  <c-tooltip :tooltip="$t('home.nav.twitter')" position="bottom">
+  <c-tooltip :tooltip="$t('home.nav.twitterX')" position="bottom">
     <c-button
       circle
       variant="text"
-      href="https://twitter.com/ittoolsdottech"
+      href="https://x.com/ittoolsdottech"
       rel="noopener"
       target="_blank"
-      :aria-label="$t('home.nav.twitterAccount')"
+      :aria-label="$t('home.nav.twitterXAccount')"
     >
-      <n-icon size="25" :component="BrandTwitter" />
+      <n-icon size="25" :component="IconBrandX" />
     </c-button>
   </c-tooltip>
 
   <c-tooltip :tooltip="$t('home.nav.about')" position="bottom">
     <c-button circle variant="text" to="/about" :aria-label="$t('home.nav.aboutLabel')">
-      <n-icon size="25" :component="InfoCircle" />
+      <n-icon size="25" :component="IconInfoCircle" />
     </c-button>
   </c-tooltip>
   <c-tooltip :tooltip="isDarkTheme ? $t('home.nav.lightMode') : $t('home.nav.darkMode')" position="bottom">
     <c-button circle variant="text" :aria-label="$t('home.nav.mode')" @click="() => styleStore.toggleDark()">
-      <n-icon v-if="isDarkTheme" size="25" :component="Sun" />
-      <n-icon v-else size="25" :component="Moon" />
+      <n-icon v-if="isDarkTheme" size="25" :component="IconSun" />
+      <n-icon v-else size="25" :component="IconMoon" />
     </c-button>
   </c-tooltip>
 </template>
diff --git a/src/pages/Home.page.vue b/src/pages/Home.page.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Heart } from '@vicons/tabler';
+import { IconHeart } from '@tabler/icons-vue';
 import { useHead } from '@vueuse/head';
 import ColoredCard from '../components/ColoredCard.vue';
 import ToolCard from '../components/ToolCard.vue';
@@ -16,7 +16,7 @@ const { t } = useI18n();
   <div class="pt-50px">
     <div class="grid-wrapper">
       <div class="grid grid-cols-1 gap-12px lg:grid-cols-3 md:grid-cols-3 sm:grid-cols-2 xl:grid-cols-4">
-        <ColoredCard v-if="config.showBanner" :title="$t('home.follow.title')" :icon="Heart">
+        <ColoredCard v-if="config.showBanner" :title="$t('home.follow.title')" :icon="IconHeart">
           {{ $t('home.follow.p1') }}
           <a
             href="https://github.com/CorentinTh/it-tools"
@@ -26,13 +26,13 @@ const { t } = useI18n();
           >GitHub</a>
           {{ $t('home.follow.p2') }}
           <a
-            href="https://twitter.com/ittoolsdottech"
+            href="https://x.com/ittoolsdottech"
             rel="noopener"
             target="_blank"
-            :aria-label="$t('home.follow.twitterAccount')"
-          >Twitter</a>.
+            :aria-label="$t('home.follow.twitterXAccount')"
+          >X</a>.
           {{ $t('home.follow.thankYou') }}
-          <n-icon :component="Heart" />
+          <n-icon :component="IconHeart" />
         </ColoredCard>
 
         <a href="https://bit.ly/3zBl7DG" target="_blank" rel="noopener" class="text-current decoration-none">
