wip

src/App.vue

@@ -1,53 +1,95 @@
 <script setup lang="ts">
-import { ref, onMounted, onUpdated, nextTick } from 'vue'
-import { createIcons, icons } from 'lucide'
+import { ref, onMounted, onUpdated, nextTick, onBeforeMount } from "vue";
+import { createIcons, icons } from "lucide";
+import { WhoIs } from "./lib/whois";
+import { DomainFactory } from "./lib/factory";
 
-const visible = ref<boolean>(false)
+const visible = ref<boolean>(false);
+const whois = ref<WhoIs>(new WhoIs());
+const factory = ref<DomainFactory>(new DomainFactory());
+const domain = ref<string | null>(null);
+const domainAvailable = ref<boolean | null>(null);
+const lang = ref<string>("english");
+const loading = ref<boolean>(true);
+const fetching = ref<boolean>(false);
+const error = ref<string | null>(null);
 
+function newDomain() {
+  if (!factory.value.error) {
+    fetching.value = true;
+    factory.value
+      .next(lang.value)
+      .then((value) => {
+        domain.value = value;
+        checkAvailability();
+      })
+      .catch((err: unknown) => {
+        throw err;
+      });
+  }
+}
+
+function checkAvailability() {
+  domainAvailable.value = null;
+  if (!whois.value.error && domain.value) {
+    whois.value
+      .isDomainAvailable(domain.value)
+      .then((available) => {
+        domainAvailable.value = available;
+        fetching.value = false;
+        if (!available) {
+          newDomain();
+        }
+      })
+      .catch((err: unknown) => {
+        throw err;
+      });
+  }
+}
+
+onBeforeMount(async () => {
+  await whois.value.init();
+  await factory.value.init();
+  newDomain();
+  loading.value = false;
+});
 onMounted(() => {
   setTimeout(() => {
-    visible.value = true
-  })
-})
+    visible.value = true;
+  });
+});
 onUpdated(async () => {
-  await nextTick()
+  await nextTick();
   createIcons({
     icons,
-    nameAttr: 'icon',
+    nameAttr: "icon",
     attrs: {
-      width: '1.1em',
-      height: '1.1em',
+      width: "1.1em",
+      height: "1.1em",
     },
-  })
-})
+  });
+});
 </script>
 
 <template>
   <main :style="{ display: visible ? 'inherit' : 'none' }">
-    <!-- TODO: 1. rename app -->
     <h1>
-      <i icon="package"></i>
-      Vue-Boilerplate
+      <span v-show="fetching || loading"><i icon="cog"></i></span>
+      {{ domain }}
+      <span v-show="!loading"
+        >({{
+          domainAvailable === null
+            ? "?"
+            : domainAvailable
+              ? "available"
+              : "unavailable"
+        }})</span
+      >
     </h1>
-    <br />
-    <p>
-      Fill this page with <i>whatever</i> you're going to develop.
-      <br />
-      <b>Then enjoy!</b>
-    </p>
-    <div class="button green-400">
-      <i icon="square-arrow-right"></i> This is a sample button yay
-    </div>
-    <br />
-    <hr />
-    <small class="footer">
-      <i icon="at-sign"></i>&nbsp;
-      <a href="https://git.klemek.fr/klemek" target="_blank">Kleπek</a>&nbsp; |&nbsp;
-      <!-- TODO: 1. rename app -->
-      <i icon="git-branch"></i>&nbsp;
-      <a href="https://git.klemek.fr/klemek/template" target="_blank">Repository</a>&nbsp; |&nbsp;
-      <i icon="copyright"></i>&nbsp;2026
-    </small>
+    <button v-show="!loading && !fetching" @click="newDomain">
+      New domain
+    </button>
+    <span v-if="error">Error: {{ error }}</span>
   </main>
 </template>
 

src/data/english.txt

@@ -0,0 +1 @@
+../../english/words_alpha.txt

src/data/french.txt

@@ -0,0 +1 @@
+../../french/francais.txt

src/lib/factory.ts

@@ -0,0 +1,77 @@
+import { getTLDList } from "./tld";
+import englishWords from "@/data/english.txt?raw";
+import frenchWords from "@/data/french.txt?raw";
+import { randomElement, shuffled } from "./random";
+
+export class DomainFactory {
+  tldList: string[] = [];
+  error: string | null = null;
+  words: Record<string, string[]> = {};
+  generated: string[] = [];
+
+  async init() {
+    try {
+      this.tldList = await getTLDList();
+    } catch (e) {
+      this.error = "Could not load TLD list";
+      throw e;
+    }
+
+    this.words.french = this.initWords(frenchWords);
+    this.words.english = this.initWords(englishWords);
+  }
+
+  initWords(raw: string): string[] {
+    return raw
+      .split("\n")
+      .map((word) => {
+        word = word
+          .normalize("NFD")
+          .replace(/[\u0300-\u036f]/g, "")
+          .toLowerCase()
+          .trim();
+        if (word.includes(" ") || word.length == 0) {
+          return null;
+        }
+        return word;
+      })
+      .filter((word) => word !== null);
+  }
+
+  randomWord(lang: string): string {
+    if (!this.words[lang]) {
+      this.error = `No words for language: ${lang}`;
+      throw new Error(this.error);
+    }
+    return randomElement(this.words[lang]);
+  }
+
+  randomDomain(lang: string): string | null {
+    const word = this.randomWord(lang);
+    for (const tld of shuffled(this.tldList.slice())) {
+      const tldEscaped: string = tld.replace(".", "");
+      if (word.endsWith(tldEscaped) && word.length > tldEscaped.length + 2) {
+        const domain = `${word.substring(0, word.length - tldEscaped.length)}.${tld}`;
+        this.generated.push(domain);
+        return domain;
+      }
+    }
+    return null;
+  }
+
+  next(lang: string): Promise<string> {
+    return new Promise((resolve, reject) => {
+      let k = 10000;
+      while (k > 0) {
+        k--;
+        const domain = this.randomDomain(lang);
+        if (domain) {
+          resolve(domain);
+          return;
+        }
+      }
+      this.error = "Could not generate a valid domain";
+      reject(new Error(this.error));
+    });
+  }
+}

src/lib/random.ts

@@ -0,0 +1,31 @@
+export function randRange(min: number, max: number): number {
+  return Math.floor(Math.random() * (max - min) + min);
+}
+
+export function randomElement<T>(list: T[]): T {
+  if (list.length === 0) {
+    throw new Error("List is empty");
+  }
+  return list[randRange(0, list.length)] as T;
+}
+
+export function shuffled<T>(array: T[]): T[] {
+  let currentIndex = array.length,
+    randomIndex;
+
+  // While there remain elements to shuffle.
+  while (currentIndex != 0) {
+    // Pick a remaining element.
+    randomIndex = Math.floor(Math.random() * currentIndex);
+    currentIndex--;
+
+    // And swap it with the current element.
+    // @ts-expect-error - currentIndex/randomIndex are within array
+    [array[currentIndex], array[randomIndex]] = [
+      array[randomIndex],
+      array[currentIndex],
+    ];
+  }
+
+  return array;
+}

src/lib/tld.ts

@@ -0,0 +1,20 @@
+export async function getTLDList(): Promise<string[]> {
+  const response = await fetch(
+    "https://cors.klemek.fr/https://publicsuffix.org/list/public_suffix_list.dat",
+  );
+  const content = await response.text();
+  const tldList: string[] = [];
+  content.split("\n").forEach((line) => {
+    line = line.trim();
+    if (
+      line.length &&
+      !line.startsWith("//") &&
+      !line.startsWith("*") &&
+      line.replace(/[^\\x00-\\x7F]/g, "") === line &&
+      (!line.includes(".") || tldList.every((other) => !line.endsWith(other)))
+    ) {
+      tldList.push(line);
+    }
+  });
+  return tldList;
+}

src/lib/whois.ts

@@ -0,0 +1,55 @@
+export class WhoIs {
+  rdapEndpoints: Record<string, string> | null = null;
+  error: string | null = null;
+
+  async init() {
+    await this.loadRdapEndpoints();
+  }
+
+  async loadRdapEndpoints() {
+    try {
+      const response = await fetch(
+        `https://cors.klemek.fr/https://data.iana.org/rdap/dns.json`,
+      );
+      const content: { services: { 0: string[]; 1: string[] }[] } =
+        await response.json();
+      const rdapEndpoints: Record<string, string> = {};
+      content.services.forEach((item) => {
+        if (item[1][0]) {
+          const supplier: string = item[1][0];
+          item[0].forEach((domain: string) => {
+            rdapEndpoints[domain] = supplier;
+          });
+        }
+      });
+      this.rdapEndpoints = rdapEndpoints;
+    } catch (e) {
+      this.error = "Could not load RDAP endpoints";
+      throw e;
+    }
+  }
+
+  getRdapQuery(domain: string): string {
+    if (this.rdapEndpoints === null) {
+      throw Error("RDAP endpoints not loaded");
+    }
+    for (const tld of Object.keys(this.rdapEndpoints)) {
+      if (domain.endsWith(`.${tld}`) && this.rdapEndpoints[tld]) {
+        return `${this.rdapEndpoints[tld]}/domain/${domain}`;
+      }
+    }
+    throw Error(`RDAP supplier not found for ${domain}`);
+  }
+
+  async isDomainAvailable(domain: string): Promise<boolean> {
+    const url = this.getRdapQuery(domain);
+    try {
+      const response = await fetch(`https://cors.klemek.fr/${url}`, {
+        method: "HEAD",
+      });
+      return response.status === 404;
+    } catch {
+      return false;
+    }
+  }
+}

src/main.ts

@@ -1,4 +1,4 @@
-import { createApp } from 'vue'
-import App from './App.vue'
+import { createApp } from "vue";
+import App from "./App.vue";
 
-createApp(App).mount('#app')
+createApp(App).mount("#app");