feat: input and history pages

bun.lock

@@ -1,6 +1,5 @@
 {
   "lockfileVersion": 1,
-  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "vue-boilerplate",
@@ -8,6 +7,7 @@
         "@tailwindcss/vite": "^4.3.1",
         "daisyui": "^5.5.23",
         "vue": "^3.5.38",
+        "vue-i18n": "11",
       },
       "devDependencies": {
         "@tsconfig/node24": "^24.0.4",
@@ -171,6 +171,14 @@
 
     "@humanwhocodes/retry": ["@humanwhocodes/retry@0.4.3", "", {}, "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ=="],
 
+    "@intlify/core-base": ["@intlify/core-base@11.4.5", "", { "dependencies": { "@intlify/devtools-types": "11.4.5", "@intlify/message-compiler": "11.4.5", "@intlify/shared": "11.4.5" } }, "sha512-lja3F/iKVIvTa48mIwmrIeDcQUFZ0F0drvFvT8AwINOvbwnAzl/S/p8p2DxILZpWEUHRi1qewfWNIkMvhD3kKA=="],
+
+    "@intlify/devtools-types": ["@intlify/devtools-types@11.4.5", "", { "dependencies": { "@intlify/core-base": "11.4.5", "@intlify/shared": "11.4.5" } }, "sha512-W5vydP9Yq3t82IyWqCM6aR0BTWCZrN5RAwjZEPpH8I2OQWp2RLy03Evh2ANZlSMhcvGAoyDg25k0so85Kwncpw=="],
+
+    "@intlify/message-compiler": ["@intlify/message-compiler@11.4.5", "", { "dependencies": { "@intlify/shared": "11.4.5", "source-map-js": "^1.0.2" } }, "sha512-IEOZiHtbQopyPc/Dz2M869lOlZYX1SdcniNJwphATDYHhovvIneEKf1EFF37DE7NAABZtza1FNtnwwqZWInfpw=="],
+
+    "@intlify/shared": ["@intlify/shared@11.4.5", "", {}, "sha512-g/i5mtdUa9ia/8BaJ4w6ZRHgAXYQd9XyCaQPRMvsd8d5qmZwkjoTmHrNsI28Q/7I8h+2ijUkI4uEnnMCziKupQ=="],
+
     "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
 
     "@jridgewell/remapping": ["@jridgewell/remapping@2.3.5", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ=="],
@@ -383,6 +391,8 @@
 
     "@vue/compiler-ssr": ["@vue/compiler-ssr@3.5.38", "", { "dependencies": { "@vue/compiler-dom": "3.5.38", "@vue/shared": "3.5.38" } }, "sha512-7s+W5Gc42FGxZMcuwl8H5B29T8BJPMdBT7KHFE+BbAuZ/iTEdTtv7z2XiMjiaUUw4w3ZcCEdHs36RuYJ2VA7bA=="],
 
+    "@vue/devtools-api": ["@vue/devtools-api@6.6.4", "", {}, "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g=="],
+
     "@vue/devtools-core": ["@vue/devtools-core@8.1.3", "", { "dependencies": { "@vue/devtools-kit": "^8.1.3", "@vue/devtools-shared": "^8.1.3" }, "peerDependencies": { "vue": "^3.0.0" } }, "sha512-xezkv5/CPH/o5C8PE2Len9MnTJMsctYYQbKbbUiNOJpKd+fRHj27nKDb/sbtYI8NSQduegeQhCJGKRgAiOV6Uw=="],
 
     "@vue/devtools-kit": ["@vue/devtools-kit@8.1.3", "", { "dependencies": { "@vue/devtools-shared": "^8.1.3", "birpc": "^2.6.1", "hookable": "^5.5.3", "perfect-debounce": "^2.0.0" } }, "sha512-cRn7GXiCQkMYU2Z3h3pM4YO/ndbx9FY1yLDAqIqPLcmIq4H6zAOJHein6tvZU3AfPwgrodqLiPBEF+YQaS8AxA=="],
@@ -833,6 +843,8 @@
 
     "vue-eslint-parser": ["vue-eslint-parser@10.4.0", "", { "dependencies": { "debug": "^4.4.0", "eslint-scope": "^8.2.0 || ^9.0.0", "eslint-visitor-keys": "^4.2.0 || ^5.0.0", "espree": "^10.3.0 || ^11.0.0", "esquery": "^1.6.0", "semver": "^7.6.3" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0" } }, "sha512-Vxi9pJdbN3ZnVGLODVtZ7y4Y2kzAAE2Cm0CZ3ZDRvydVYxZ6VrnBhLikBsRS+dpwj4Jv4UCv21PTEwF5rQ9WXg=="],
 
+    "vue-i18n": ["vue-i18n@11.4.5", "", { "dependencies": { "@intlify/core-base": "11.4.5", "@intlify/devtools-types": "11.4.5", "@intlify/shared": "11.4.5", "@vue/devtools-api": "^6.5.0" }, "peerDependencies": { "vue": "^3.0.0" } }, "sha512-rm8YJ6RpjOrkcgS2GLrZwLvs/VbhxbTSuEspbyXDo233+fPK0OMFNLOj3fdQYVKdOgcpSfLW91JhbqgpkkcBWA=="],
+
     "vue-tsc": ["vue-tsc@3.3.5", "", { "dependencies": { "@volar/typescript": "2.4.28", "@vue/language-core": "3.3.5" }, "peerDependencies": { "typescript": ">=5.0.0" }, "bin": { "vue-tsc": "bin/vue-tsc.js" } }, "sha512-Rzh/G2MmNlMSAMTiQEjDrsb4dgB/jbtEM47rVN2NtidF1dfb/q4w4QvpQBtW5+y3y5H27Hjh7deVwk+YB02fNg=="],
 
     "which": ["which@5.0.0", "", { "dependencies": { "isexe": "^3.1.1" }, "bin": { "node-which": "bin/which.js" } }, "sha512-JEdGzHwwkrbWoGOlIHqQ5gtprKGOenpDHpxE9zVR1bWbOtYRyPPHMe9FaP6x61CmNaTThSkb0DAJte5jD+DmzQ=="],

package.json

@@ -22,7 +22,8 @@
   "dependencies": {
     "@tailwindcss/vite": "^4.3.1",
     "daisyui": "^5.5.23",
-    "vue": "^3.5.38"
+    "vue": "^3.5.38",
+    "vue-i18n": "11"
   },
   "devDependencies": {
     "@tsconfig/node24": "^24.0.4",

src/App.vue

@@ -1,15 +1,11 @@
 <script setup lang="ts">
 import { ref, onMounted, onBeforeMount } from "vue";
 import PageRandom from "@/components/PageRandom.vue";
-// import PageInput from "@/components/PageInput.vue";
+import PageInput from "@/components/PageInput.vue";
 import { DomainFactory } from "@/lib/factory";
-
-function getLang() {
-  return document.location.hash === "#french" ? "french" : "english";
-}
+import PageHistory from "./components/PageHistory.vue";
 
 const visible = ref<boolean>(false);
-const lang = ref<string>(getLang());
 const factory = ref<DomainFactory>(new DomainFactory());
 
 onBeforeMount(() => {
@@ -20,12 +16,6 @@ onMounted(() => {
   setTimeout(() => {
     visible.value = true;
   });
-  setInterval(() => {
-    const newLang = getLang();
-    if (newLang !== lang.value) {
-      lang.value = newLang;
-    }
-  }, 100);
 });
 </script>
 
@@ -36,27 +26,40 @@ onMounted(() => {
         type="radio"
         name="app_tabs"
         class="tab"
-        :aria-label="lang === 'french' ? 'Aléatoire' : 'Random'"
+        :aria-label="$t('tab.random')"
         checked
       />
       <div
         class="tab-content bg-base-100 border-base-300 shadow-2xl p-6 overflow-hidden"
       >
-        <PageRandom :lang="lang" :factory="factory" />
+        <PageRandom :factory="factory" />
       </div>
 
-      <!-- <input
+      <input
         type="radio"
         name="app_tabs"
         class="tab"
-        :aria-label="lang === 'french' ? 'Saisie' : 'Input'"
+        :aria-label="$t('tab.input')"
         checked
       />
       <div
         class="tab-content bg-base-100 border-base-300 shadow-2xl p-6 overflow-hidden"
       >
-        <PageInput :lang="lang" :factory="factory" />
-      </div> -->
+        <PageInput :factory="factory" />
+      </div>
+
+      <input
+        type="radio"
+        name="app_tabs"
+        class="tab"
+        :aria-label="$t('tab.history')"
+        checked
+      />
+      <div
+        class="tab-content bg-base-100 border-base-300 shadow-2xl p-6 overflow-x-hidden overflow-y-scroll max-h-96"
+      >
+        <PageHistory :factory="factory" />
+      </div>
     </div>
   </div>
 </template>

src/components/CoolDomain.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
+import type { Domain } from "@/types";
+
 defineProps<{
-  domain: string;
-  available: boolean;
-  searching: boolean;
+  domain: Domain;
   size: string;
 }>();
 </script>
 
 <template>
   <div class="inline-block align-text-top">
-    <div v-if="searching" class="status" :class="`status-${size}`"></div>
-    <div v-else-if="available" class="inline-grid *:[grid-area:1/1]">
+    <div v-if="domain.searching" class="status" :class="`status-${size}`"></div>
+    <div v-else-if="domain.available" class="inline-grid *:[grid-area:1/1]">
       <div
         class="status status-success animate-ping"
         :class="`status-${size}`"
@@ -25,5 +25,5 @@ defineProps<{
       <div class="status status-error" :class="`status-${size}`"></div>
     </div>
   </div>
-  {{ domain }}
+  {{ domain.name }}
 </template>

src/components/PageHistory.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { DomainFactory } from "@/lib/factory";
+import CoolDomain from "./CoolDomain.vue";
+
+defineProps<{ factory: DomainFactory }>();
+</script>
+
+<template>
+  <div>
+    <p v-for="(domain, i) in factory.history" :key="`domain-${i}`" class="pt-3">
+      <CoolDomain
+        :id="domain.name + domain.searching + domain.available"
+        :domain="domain"
+        size="md"
+      ></CoolDomain>
+      <span v-if="domain.searching"
+        >&nbsp;<span class="loading loading-dots loading-xs"></span
+      ></span>
+      <span v-else-if="domain.available"
+        >&nbsp;{{ $t("seems") }}
+        <a
+          :href="`https://tld-list.com/${$i18n.locale}/tld/${domain.name?.split('.')[1]}`"
+          target="_blank"
+          class="underline"
+          >{{ $t("available") }}</a
+        ></span
+      ><span v-else>&nbsp;{{ $t("is_unavailable") }}</span>
+    </p>
+  </div>
+</template>

src/components/PageInput.vue

@@ -2,15 +2,19 @@
 import { ref } from "vue";
 import type { DomainFactory } from "@/lib/factory";
 import CoolDomain from "./CoolDomain.vue";
+import type { Domain } from "@/types";
+import { isDomainAvailable } from "@/lib/whois";
 
-const props = defineProps<{ lang: string; factory: DomainFactory }>();
+const props = defineProps<{ factory: DomainFactory }>();
 
 const input = ref<string>("");
-const domains = ref<string[]>([]);
+const domains = ref<Domain[]>([]);
+const noDomain = ref<boolean>(false);
 
 function start() {
+  noDomain.value = false;
+  domains.value.splice(0, domains.value.length);
   if (input.value.length) {
-    domains.value.splice(0, domains.value.length);
     newDomain();
   }
 }
@@ -18,15 +22,17 @@ function start() {
 function newDomain() {
   const startInput = input.value;
   props.factory
-    .nextFromWord(input.value)
-    .then((domain) => {
+    .allFromWord(input.value)
+    .then((newDomains: Domain[]) => {
       if (input.value === startInput) {
-        domains.value.push(domain);
-        newDomain();
+        domains.value.push(...newDomains);
+        domains.value.forEach((domain) => void isDomainAvailable(domain));
       }
     })
     .catch(() => {
-      // TODO handle 0 domains
+      if (input.value === startInput && !domains.value.length) {
+        noDomain.value = true;
+      }
     });
 }
 </script>
@@ -37,25 +43,34 @@ function newDomain() {
       <input
         v-model.trim="input"
         type="text"
-        :placeholder="
-          lang === 'french'
-            ? 'Écrit un mot ou une phrase'
-            : 'Type a word or a phrase'
-        "
+        :placeholder="$t('page_input.placeholder')"
         class="input input-xl w-full"
       />
     </div>
     <button class="btn btn-primary" :disabled="!input" @click="start">
-      <span v-if="lang === 'french'">Génerer</span>
-      <span v-else>Generate</span>
+      {{ $t("button.generate") }}
     </button>
-    <p v-for="(domain, i) in domains" :key="`domain-${i}`" class="pt-6">
+    <p v-for="(domain, i) in domains" :key="`domain-${i}`" class="pt-3">
       <CoolDomain
+        :id="domain.name + domain.searching + domain.available"
         :domain="domain"
-        :available="false"
-        :searching="false"
         size="md"
       ></CoolDomain>
+      <span v-if="domain.searching"
+        >&nbsp;<span class="loading loading-dots loading-xs"></span
+      ></span>
+      <span v-else-if="domain.available"
+        >&nbsp;{{ $t("seems") }}
+        <a
+          :href="`https://tld-list.com/${$i18n.locale}/tld/${domain.name?.split('.')[1]}`"
+          target="_blank"
+          class="underline"
+          >{{ $t("available") }}</a
+        ></span
+      ><span v-else>&nbsp;{{ $t("is_unavailable") }}</span>
+    </p>
+    <p v-if="noDomain" class="pt-6">
+      {{ $t("page_input.not_found") }}
     </p>
   </div>
 </template>

src/components/PageRandom.vue

@@ -3,6 +3,8 @@ import { ref, onBeforeMount, watch } from "vue";
 import { isDomainAvailable } from "@/lib/whois";
 import type { DomainFactory } from "@/lib/factory";
 import CoolDomain from "./CoolDomain.vue";
+import type { Domain } from "@/types";
+import { useI18n } from "vue-i18n";
 
 enum State {
   Loading,
@@ -12,19 +14,20 @@ enum State {
   Error,
 }
 
-const props = defineProps<{ lang: string; factory: DomainFactory }>();
+const props = defineProps<{ factory: DomainFactory }>();
 
-const domain = ref<string | null>(null);
-const domainAvailable = ref<boolean>(false);
+const domain = ref<Domain | null>(null);
 const state = ref<State>(State.Loading);
 
+const i18n = useI18n();
+
 function newDomain() {
   if (!props.factory.error) {
     state.value = State.Generating;
     props.factory
-      .next(props.lang)
-      .then((value: string) => {
-        domain.value = value;
+      .next(i18n.locale.value)
+      .then((newDomain: Domain) => {
+        domain.value = newDomain;
         checkAvailability();
       })
       .catch((err: unknown) => {
@@ -37,13 +40,13 @@ function newDomain() {
 function checkAvailability() {
   if (domain.value) {
     const promiseDomain = domain.value;
+    domain.value.searching = true;
     state.value = State.Fetching;
-    isDomainAvailable(promiseDomain)
+    isDomainAvailable(domain.value)
       .then((available: boolean) => {
-        if (domain.value !== promiseDomain) {
+        if (domain.value?.name !== promiseDomain.name) {
           return; // domain changed
         }
-        domainAvailable.value = available;
         if (!available) {
           newDomain();
         } else {
@@ -58,86 +61,58 @@ function checkAvailability() {
 }
 
 function getTextClass() {
-  if (!domain.value || domain.value.length < 15) {
+  if (!domain.value || domain.value.name.length < 15) {
     return "text-5xl";
   }
-  if (domain.value.length < 20) {
+  if (domain.value.name.length < 20) {
     return "text-4xl";
   }
-  if (domain.value.length < 25) {
+  if (domain.value.name.length < 25) {
     return "text-3xl";
   }
-  if (domain.value.length < 30) {
+  if (domain.value.name.length < 30) {
     return "text-2xl";
   }
   return "text-xl";
 }
 
-onBeforeMount(() => {
-  newDomain();
-});
-watch(() => props.lang, newDomain);
+onBeforeMount(newDomain);
+watch(i18n.locale, newDomain);
 </script>
 
 <template>
   <div>
     <h1 class="font-bold" :class="getTextClass()">
       <span v-if="!domain" class="loading loading-spinner loading-xl"></span>
-      <span v-else
-        ><CoolDomain
-          :domain="domain"
-          :available="domainAvailable"
-          :searching="state === State.Fetching"
-          size="xl"
-      /></span>
+      <span v-else><CoolDomain :domain="domain" size="xl" /></span>
     </h1>
     <p v-if="state === State.Loading" class="py-6">
-      <span v-if="lang === 'french'"
-        >Chargement de la Cool Domain Factory™</span
-      >
-      <span v-else>Loading the Cool Domain Factory™</span>
+      {{ $t("page_random.state.loading") }}
       <span class="loading loading-dots loading-xs"></span>
     </p>
     <p v-else-if="state === State.Generating" class="py-6">
-      <span v-if="lang === 'french'">Création d'un domaine cool</span>
-      <span v-else>Generating a new cool domain</span>
+      {{ $t("page_random.state.generating") }}
       <span class="loading loading-dots loading-xs"></span>
     </p>
     <p v-else-if="state === State.Fetching" class="py-6">
-      <span v-if="lang === 'french'">Vérification de la disponibilité</span>
-      <span v-else>Checking domain availability</span>
+      {{ $t("page_random.state.fetching") }}
       <span class="loading loading-dots loading-xs"></span>
     </p>
-    <div v-else-if="state === State.Ready && domainAvailable" class="py-6">
-      <span v-if="lang === 'french'"
-        >Ce domaine semble
-        <a
-          :href="`https://tld-list.com/fr/tld/${domain?.split('.')[1]}`"
-          target="_blank"
-          class="underline"
-          >disponible</a
-        >
-        !</span
-      >
-      <span v-else
-        >This domain seems
-        <a
-          :href="`https://tld-list.com/tld/${domain?.split('.')[1]}`"
-          target="_blank"
-          class="underline"
-          >available</a
-        >!</span
+    <div v-else-if="state === State.Ready && domain?.available" class="py-6">
+      {{ $t("this_domain") }} {{ $t("seems") }}
+      <a
+        :href="`https://tld-list.com/${i18n.locale}/tld/${domain.name?.split('.')[1]}`"
+        target="_blank"
+        class="underline"
+        >{{ $t("available") }}</a
       >
+      !
     </div>
-    <div v-else-if="state === State.Ready && !domainAvailable" class="py-6">
-      <span v-if="lang === 'french'">Ce domaine n'est pas disponible.</span>
-      <span v-else>This domain is not available.</span>
+    <div v-else-if="state === State.Ready && !domain?.available" class="py-6">
+      {{ $t("this_domain") }} {{ $t("is_unavailable") }}
     </div>
     <div v-else-if="state === State.Error" class="py-6">
-      <span v-if="lang === 'french'"
-        >Une erreur est survenue, merci de recharger la page.</span
-      >
-      <span v-else>An error has occured, please reload the page.</span>
+      {{ $t("error") }}
     </div>
     <button
       :disabled="
@@ -148,8 +123,7 @@ watch(() => props.lang, newDomain);
       class="btn btn-primary"
       @click="newDomain"
     >
-      <span v-if="lang === 'french'">Nouveau domaine</span>
-      <span v-else>New domain</span>
+      {{ $t("button.new_domain") }}
     </button>
   </div>
 </template>

src/i18n/en.json

@@ -0,0 +1,27 @@
+{
+  "tab": {
+    "random": "Random",
+    "input": "Input",
+    "history": "History"
+  },
+  "this_domain": "This domain",
+  "is_unavailable": "is not available.",
+  "seems": "seems",
+  "available": "available",
+  "error": "An error has occured, please reload the page.",
+  "page_random": {
+    "state": {
+      "loading": "Loading the Cool Domain Factory™",
+      "generating": "Generating a new cool domain",
+      "fetching": "Checking domain availability"
+    }
+  },
+  "page_input": {
+    "not_found": "No matching domain found.",
+    "placeholder": "Type a word or a phrase"
+  },
+  "button": {
+    "new_domain": "New domain",
+    "generate": "Generate"
+  }
+}

src/i18n/fr.json

@@ -0,0 +1,27 @@
+{
+  "tab": {
+    "random": "Aléatoire",
+    "input": "Saisie",
+    "history": "Historique"
+  },
+  "this_domain": "Ce domaine",
+  "is_unavailable": "n'est pas disponible.",
+  "seems": "semble être",
+  "available": "disponible",
+  "error": "Une erreur est survenue, merci de recharger la page.",
+  "page_random": {
+    "state": {
+      "loading": "Chargement de la Cool Domain Factory™",
+      "generating": "Création d'un domaine cool",
+      "fetching": "Vérification de la disponibilité"
+    }
+  },
+  "page_input": {
+    "not_found": "Aucun domaine correspondant.",
+    "placeholder": "Écrit un mot ou une phrase."
+  },
+  "button": {
+    "new_domain": "Nouveau domaine",
+    "generate": "Génerer"
+  }
+}

src/lib/factory.ts

@@ -2,6 +2,7 @@ import rawTldList from "@/data/tld.txt?raw";
 import englishWords from "@/data/english.txt?raw";
 import frenchWords from "@/data/french.txt?raw";
 import { randomElement, shuffled } from "./random";
+import type { Domain } from "@/types";
 
 const TLD_LIST: string[] = rawTldList.trim().split("\n");
 
@@ -9,10 +10,11 @@ export class DomainFactory {
   error: string | null = null;
   words: Record<string, string[]> = {};
   generated: string[] = [];
+  history: Domain[] = [];
 
   init() {
-    this.words.french = this.initWords(frenchWords);
-    this.words.english = this.initWords(englishWords);
+    this.words.fr = this.initWords(frenchWords);
+    this.words.en = this.initWords(englishWords);
   }
 
   escapeWord(word: string): string {
@@ -58,7 +60,7 @@ export class DomainFactory {
     return null;
   }
 
-  next(lang: string): Promise<string> {
+  next(lang: string): Promise<Domain> {
     return new Promise((resolve, reject) => {
       let k = 10000;
       while (k > 0) {
@@ -66,7 +68,9 @@ export class DomainFactory {
         const word = this.randomWord(lang);
         const domain = this.randomDomain(word);
         if (domain) {
-          resolve(domain);
+          const output = { name: domain, searching: false, available: false };
+          this.history.push(output);
+          resolve(output);
           return;
         }
       }
@@ -75,18 +79,27 @@ export class DomainFactory {
     });
   }
 
-  nextFromWord(word: string): Promise<string> {
+  allFromWord(word: string): Promise<Domain[]> {
     const escapedWord = this.escapeWord(word.replace(/ /gm, "-"));
     return new Promise((resolve, reject) => {
-      let k = 10000;
-      while (k > 0) {
-        k--;
-        const domain = this.randomDomain(escapedWord);
-        if (domain) {
-          resolve(domain);
-          return;
+      const domains = [];
+      for (const tld of shuffled(TLD_LIST.slice())) {
+        const tldEscaped: string = tld.replace(".", "");
+        if (
+          escapedWord.endsWith(tldEscaped) &&
+          escapedWord.length >= tldEscaped.length + 2
+        ) {
+          const domain = `${escapedWord.substring(0, escapedWord.length - tldEscaped.length)}.${tld}`;
+          if (!domain.includes("-.")) {
+            const output = { name: domain, searching: false, available: false };
+            this.history.push(output);
+            domains.push(output);
+          }
         }
       }
+      if (domains.length) {
+        resolve(domains);
+      }
       reject(new Error("Could not generate a valid domain"));
     });
   }

src/lib/whois.ts

@@ -3,6 +3,7 @@ import type {
   WhoIsData,
   WhoIsEvent,
   WhoIsIpAddresses,
+  Domain,
 } from "@/types";
 
 function checkEvents(events: WhoIsEvent[]): boolean {
@@ -26,14 +27,17 @@ function checkWhoIsData(data: WhoIsData): boolean {
   );
 }
 
-export async function isDomainAvailable(domain: string): Promise<boolean> {
+export async function isDomainAvailable(domain: Domain): Promise<boolean> {
+  domain.searching = true;
   try {
     const response = await fetch(
-      `https://whois.klemek.fr/api/lookup/${domain}`,
+      `https://whois.klemek.fr/api/lookup/${domain.name}`,
     );
     const content: WhoIsResponse = await response.json();
-    return checkWhoIsData(content.data);
+    domain.available = checkWhoIsData(content.data);
   } catch {
-    return false;
+    domain.available = false;
   }
+  domain.searching = false;
+  return domain.available;
 }

src/main.ts

@@ -1,4 +1,27 @@
 import { createApp } from "vue";
+import { createI18n } from "vue-i18n";
 import App from "./App.vue";
+import en from "./i18n/en.json";
+import fr from "./i18n/fr.json";
 
-createApp(App).mount("#app");
+function getLang() {
+  return document.location.hash === "#french" ? "fr" : "en";
+}
+
+const i18n = createI18n({
+  locale: getLang(),
+  fallbackLocale: "en",
+  messages: {
+    en: en,
+    fr: fr,
+  },
+});
+
+setInterval(() => {
+  const newLang = getLang();
+  if (newLang !== i18n.global.locale) {
+    i18n.global.locale = newLang;
+  }
+}, 100);
+
+createApp(App).use(i18n).mount("#app");

src/types.ts

@@ -31,3 +31,9 @@ export interface WhoIsEntity {
   roles: string[];
   vcardArray: [string, [string, object, string, string][]];
 }
+
+export interface Domain {
+  name: string;
+  available: boolean;
+  searching: boolean;
+}