feat: input and history pages

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;
+}