feat: save ignored tlds in cookies

src/App.vue

@@ -1,15 +1,20 @@
 <script setup lang="ts">
-import { ref, onMounted, onBeforeMount } from "vue";
-import PageRandom from "@/components/PageRandom.vue";
-import PageInput from "@/components/PageInput.vue";
+import { ref, onMounted, defineAsyncComponent, onBeforeMount } from "vue";
+const PageRandom = defineAsyncComponent(() => import("@/components/PageRandom.vue"));
+const PageInput = defineAsyncComponent(() => import("@/components/PageInput.vue"));
+const PageHistory = defineAsyncComponent(() => import("./components/PageHistory.vue"));
 import { DomainFactory } from "@/lib/factory";
-import PageHistory from "./components/PageHistory.vue";
+import { getCookie, IGNORED_TLDS_COOKIE } from "@/lib/cookies";
 
 const visible = ref<boolean>(false);
 const factory = ref<DomainFactory>(new DomainFactory());
 
 onBeforeMount(() => {
-  factory.value.init();
+  factory.value.ignoreTlds(
+    ...getCookie(IGNORED_TLDS_COOKIE)
+      .split(".")
+      .filter((tld: string) => tld.length),
+  );
 });
 
 onMounted(() => {
@@ -22,37 +27,17 @@ onMounted(() => {
 <template>
   <div :style="{ display: visible ? 'inherit' : 'none' }">
     <div class="tabs tabs-xs tabs-bottom w-xl max-w-svw shrink-0">
-      <input
-        type="radio"
-        name="app_tabs"
-        class="tab"
-        :aria-label="$t('tab.random')"
-        checked
-      />
-      <div
-        class="tab-content bg-base-100 border-base-300 shadow-2xl p-6 overflow-hidden"
-      >
+      <input type="radio" name="app_tabs" class="tab" :aria-label="$t('tab.random')" checked />
+      <div class="tab-content bg-base-100 border-base-300 shadow-2xl p-6 overflow-hidden">
         <PageRandom :factory="factory" />
       </div>
 
-      <input
-        type="radio"
-        name="app_tabs"
-        class="tab"
-        :aria-label="$t('tab.input')"
-      />
-      <div
-        class="tab-content bg-base-100 border-base-300 shadow-2xl p-6 overflow-hidden"
-      >
+      <input type="radio" name="app_tabs" class="tab" :aria-label="$t('tab.input')" />
+      <div class="tab-content bg-base-100 border-base-300 shadow-2xl p-6 overflow-hidden">
         <PageInput :factory="factory" />
       </div>
 
-      <input
-        type="radio"
-        name="app_tabs"
-        class="tab"
-        :aria-label="$t('tab.history')"
-      />
+      <input type="radio" name="app_tabs" class="tab" :aria-label="$t('tab.history')" />
       <div
         class="tab-content bg-base-100 border-base-300 shadow-2xl p-6 overflow-x-hidden overflow-y-scroll max-h-96"
       >

src/components/PageHistory.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { DomainFactory } from "@/lib/factory";
-import CoolDomain from "./CoolDomain.vue";
+import { defineAsyncComponent } from "vue";
+const CoolDomain = defineAsyncComponent(() => import("./CoolDomain.vue"));
 
 defineProps<{ factory: DomainFactory }>();
 </script>

src/components/PageInput.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { defineAsyncComponent, ref } from "vue";
 import type { DomainFactory } from "@/lib/factory";
-import CoolDomain from "./CoolDomain.vue";
+const CoolDomain = defineAsyncComponent(() => import("./CoolDomain.vue"));
 import type { Domain } from "@/types";
 import { isDomainAvailable } from "@/lib/whois";
 
@@ -62,7 +62,7 @@ function newDomain() {
       <span v-else-if="domain.available"
         >&nbsp;{{ $t("seems") }}
         <a
-          :href="`https://tld-list.com/${$i18n.locale}/tld/${domain.name?.split('.')[1]}`"
+          :href="`https://tld-list.com/${$i18n.locale}/tld/${domain.tld}`"
           target="_blank"
           class="underline"
           >{{ $t("available") }}</a

src/components/PageRandom.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { ref, onBeforeMount, watch } from "vue";
+import { ref, onBeforeMount, watch, defineAsyncComponent } from "vue";
 import { isDomainAvailable } from "@/lib/whois";
 import type { DomainFactory } from "@/lib/factory";
-import CoolDomain from "./CoolDomain.vue";
+const CoolDomain = defineAsyncComponent(() => import("./CoolDomain.vue"));
 import type { Domain } from "@/types";
 import { useI18n } from "vue-i18n";
+import { IGNORED_TLDS_COOKIE, setCookie } from "@/lib/cookies";
 
 enum State {
   Loading,
@@ -60,9 +61,10 @@ function checkAvailability() {
   }
 }
 
-function removeExt() {
+function removeTld() {
   if (domain.value) {
-    props.factory.removeExt(domain.value.extension);
+    props.factory.ignoreTlds(domain.value.tld);
+    setCookie(IGNORED_TLDS_COOKIE, props.factory.ignoredTldList.join(","));
     newDomain();
   }
 }
@@ -108,7 +110,7 @@ watch(i18n.locale, newDomain);
     <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]}`"
+        :href="`https://tld-list.com/${$i18n.locale}/tld/${domain.tld}`"
         target="_blank"
         class="underline"
         >{{ $t("available") }}</a
@@ -129,10 +131,10 @@ watch(i18n.locale, newDomain);
       {{ $t("button.new_domain") }}
     </button>
     <br />
-    <p v-if="domain && state === State.Ready">
+    <p v-if="domain">
       <small
-        ><a class="underline" href="#" @click.prevent="removeExt">{{
-          $t("page_random.dont_suggest", { ext: `.${domain.extension}` })
+        ><a class="underline" href="#" @click.prevent="removeTld">{{
+          $t("page_random.dont_suggest", { ext: `.${domain.tld}` })
         }}</a></small
       >
     </p>

src/lib/cookies.ts

@@ -0,0 +1,20 @@
+export function setCookie(name: string, value: string, days = 400) {
+  const date = new Date();
+  date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+  const expires = `expires=${date.toUTCString()}`;
+  document.cookie = `${name}=${value}; path=/; ${expires}`;
+}
+
+export function getCookie(name: string, defaultValue = ""): string {
+  const prefix = `${name}=`;
+  const decodedCookie = decodeURIComponent(document.cookie);
+  const cookies = decodedCookie.split(";");
+  for (const cookie of cookies) {
+    if (cookie.trim().startsWith(prefix)) {
+      return cookie.trim().substring(prefix.length, cookie.length);
+    }
+  }
+  return defaultValue;
+}
+
+export const IGNORED_TLDS_COOKIE = "ignored_tlds";

src/lib/factory.ts

@@ -1,22 +1,31 @@
-import rawTldList from "@/data/tld.txt?raw";
-import englishWords from "@/data/english.txt?raw";
-import frenchWords from "@/data/french.txt?raw";
+const rawTldList = () => import("@/data/tld.txt?raw");
+const englishWords = () => import("@/data/english.txt?raw");
+const frenchWords = () => import("@/data/french.txt?raw");
 import { randomElement, shuffled } from "./random";
 import type { Domain } from "@/types";
 
-const TLD_LIST: string[] = rawTldList.trim().split("\n");
-
 export class DomainFactory {
   error: string | null = null;
   words: Record<string, string[]> = {};
   generated: string[] = [];
   history: Domain[] = [];
   tldList: string[] = [];
+  ignoredTldList: string[] = [];
 
-  init() {
-    this.words.fr = this.initWords(frenchWords);
-    this.words.en = this.initWords(englishWords);
-    this.tldList = TLD_LIST;
+  async init(lang: string | null = null) {
+    if (lang && !this.words[lang]) {
+      switch (lang) {
+        case "en":
+          this.words.en = this.initWords((await englishWords()).default);
+          break;
+        case "fr":
+          this.words.fr = this.initWords((await frenchWords()).default);
+          break;
+      }
+    }
+    if (this.tldList.length == 0) {
+      this.tldList = (await rawTldList()).default.trim().split("\n");
+    }
   }
 
   escapeWord(word: string): string {
@@ -50,6 +59,9 @@ export class DomainFactory {
 
   randomDomain(word: string): string | null {
     for (const tld of shuffled(this.tldList.slice())) {
+      if (this.ignoredTld(tld)) {
+        continue;
+      }
       const tldEscaped: string = tld.replace(".", "");
       if (word.endsWith(tldEscaped) && word.length > tldEscaped.length + 2) {
         const domain = `${word.substring(0, word.length - tldEscaped.length)}.${tld}`;
@@ -64,6 +76,8 @@ export class DomainFactory {
 
   next(lang: string): Promise<Domain> {
     return new Promise((resolve, reject) => {
+      this.init(lang)
+        .then(() => {
           let k = 10000;
           while (k > 0) {
             k--;
@@ -78,27 +92,38 @@ export class DomainFactory {
           }
           this.error = "Could not generate a valid domain";
           reject(new Error(this.error));
+        })
+        .catch(reject);
     });
   }
 
-  removeExt(ext: string): void {
-    this.tldList = this.tldList.filter((tld: string) => tld !== ext && !tld.endsWith(ext));
+  ignoreTlds(...tlds: string[]): void {
+    this.ignoredTldList.push(...tlds);
   }
 
   newDomain(domain: string): Domain {
     return {
       name: domain,
-      extension: domain.split(".", 1)[1] ?? "",
+      tld: domain.split(".").slice(1).join("."),
       searching: false,
       available: true,
     };
   }
 
+  ignoredTld(tld: string): boolean {
+    return this.ignoredTldList.some((ignoredTld: string) => tld.endsWith(ignoredTld));
+  }
+
   allFromWord(word: string): Promise<Domain[]> {
     const escapedWord = this.escapeWord(word.replace(/ /gm, "-"));
     return new Promise((resolve, reject) => {
+      this.init()
+        .then(() => {
           const domains = [];
           for (const tld of shuffled(this.tldList.slice())) {
+            if (this.ignoredTld(tld)) {
+              continue;
+            }
             const tldEscaped: string = tld.replace(".", "");
             if (escapedWord.endsWith(tldEscaped) && escapedWord.length >= tldEscaped.length + 2) {
               const domain = `${escapedWord.substring(0, escapedWord.length - tldEscaped.length)}.${tld}`;
@@ -113,6 +138,8 @@ export class DomainFactory {
             resolve(domains);
           }
           reject(new Error("Could not generate a valid domain"));
+        })
+        .catch(reject);
     });
   }
 }

src/lib/whois.ts

@@ -1,10 +1,4 @@
-import type {
-  WhoIsResponse,
-  WhoIsData,
-  WhoIsEvent,
-  WhoIsIpAddresses,
-  Domain,
-} from "@/types";
+import type { WhoIsResponse, WhoIsData, WhoIsEvent, WhoIsIpAddresses, Domain } from "@/types";
 
 function checkEvents(events: WhoIsEvent[]): boolean {
   for (const event of events) {
@@ -21,18 +15,16 @@ function checkIpAddresses(ipAddresses: WhoIsIpAddresses): boolean {
 
 function checkWhoIsData(data: WhoIsData): boolean {
   return (
-    checkEvents(data.events) &&
-    checkIpAddresses(data.ipAddresses) &&
-    data.nameservers.length === 0
+    checkEvents(data.events) && checkIpAddresses(data.ipAddresses) && data.nameservers.length === 0
   );
 }
 
 export async function isDomainAvailable(domain: Domain): Promise<boolean> {
   domain.searching = true;
   try {
-    const response = await fetch(
-      `https://whois.klemek.fr/api/lookup/${domain.name}`,
-    );
+    const response = await fetch(`https://whois.klemek.fr/api/lookup/${domain.name}`, {
+      signal: AbortSignal.timeout(5000),
+    });
     const content: WhoIsResponse = await response.json();
     domain.available = checkWhoIsData(content.data);
   } catch {

src/main.ts

@@ -1,8 +1,8 @@
-import { createApp } from "vue";
+import { createApp, defineAsyncComponent } from "vue";
 import { createI18n } from "vue-i18n";
-import App from "./App.vue";
-import en from "./i18n/en.json";
-import fr from "./i18n/fr.json";
+const App = defineAsyncComponent(() => import("./App.vue"));
+const en = await import("./i18n/en.json");
+const fr = await import("./i18n/fr.json");
 
 function getLang() {
   return document.location.hash === "#french" ? "fr" : "en";

src/types.ts

@@ -34,7 +34,7 @@ export interface WhoIsEntity {
 
 export interface Domain {
   name: string;
-  extension: string;
+  tld: string;
   available: boolean;
   searching: boolean;
 }