feat: let's goooo

src/App.vue

@@ -1,22 +1,31 @@
 <script setup lang="ts">
-import { ref, onMounted, onUpdated, nextTick, onBeforeMount } from "vue";
-import { createIcons, icons } from "lucide";
+import { ref, onMounted, onBeforeMount, watch } from "vue";
 import { WhoIs } from "./lib/whois";
 import { DomainFactory } from "./lib/factory";
 
+enum State {
+  Loading,
+  Ready,
+  Generating,
+  Fetching,
+  Error,
+}
+
+function getLang() {
+  return document.location.hash === "#french" ? "french" : "english";
+}
+
 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);
+const domainAvailable = ref<boolean>(false);
+const lang = ref<string>(getLang());
+const state = ref<State>(State.Loading);
 
 function newDomain() {
   if (!factory.value.error) {
-    fetching.value = true;
+    state.value = State.Generating;
     factory.value
       .next(lang.value)
       .then((value) => {
@@ -24,24 +33,31 @@ function newDomain() {
         checkAvailability();
       })
       .catch((err: unknown) => {
+        state.value = State.Error;
         throw err;
       });
   }
 }
 
 function checkAvailability() {
-  domainAvailable.value = null;
   if (!whois.value.error && domain.value) {
+    const promiseDomain = domain.value;
+    state.value = State.Fetching;
     whois.value
-      .isDomainAvailable(domain.value)
+      .isDomainAvailable(promiseDomain)
       .then((available) => {
+        if (domain.value !== promiseDomain) {
+          return; // domain changed
+        }
         domainAvailable.value = available;
-        fetching.value = false;
         if (!available) {
           newDomain();
+        } else {
+          state.value = State.Ready;
         }
       })
       .catch((err: unknown) => {
+        state.value = State.Error;
         throw err;
       });
   }
@@ -49,48 +65,101 @@ function checkAvailability() {
 
 onBeforeMount(async () => {
   await whois.value.init();
-  await factory.value.init();
+  await factory.value.init(whois.value);
   newDomain();
-  loading.value = false;
+  state.value = State.Ready;
 });
 onMounted(() => {
   setTimeout(() => {
     visible.value = true;
   });
 });
-onUpdated(async () => {
-  await nextTick();
-  createIcons({
-    icons,
-    nameAttr: "icon",
-    attrs: {
-      width: "1.1em",
-      height: "1.1em",
-    },
-  });
-});
+watch(
+  () => document.location.hash,
+  () => {
+    const newLang = getLang();
+    if (newLang !== lang.value) {
+      lang.value = newLang;
+      newDomain();
+    }
+  },
+);
 </script>
 
 <template>
-  <main :style="{ display: visible ? 'inherit' : 'none' }">
-    <h1>
-      <span v-show="fetching || loading"><i icon="cog"></i></span>
-      {{ domain }}
-      <span v-show="!loading"
-        >({{
-          domainAvailable === null
-            ? "?"
-            : domainAvailable
-              ? "available"
-              : "unavailable"
-        }})</span
-      >
-    </h1>
-    <button v-show="!loading && !fetching" @click="newDomain">
-      New domain
-    </button>
-    <span v-if="error">Error: {{ error }}</span>
-  </main>
+  <div :style="{ display: visible ? 'inherit' : 'none' }">
+    <div class="card bg-base-100 w-xl max-w-xl shrink-0 shadow-2xl">
+      <div class="card-body">
+        <h1 class="text-5xl font-bold font-doto">
+          <span
+            v-if="state !== State.Loading && domain"
+            class="inline-block me-2"
+          >
+            <div v-if="state === State.Fetching" class="status status-xl"></div>
+            <div
+              v-else-if="domainAvailable"
+              class="inline-grid *:[grid-area:1/1]"
+            >
+              <div class="status status-xl status-success animate-ping"></div>
+              <div class="status status-xl status-success"></div>
+            </div>
+            <div v-else class="inline-grid *:[grid-area:1/1]">
+              <div class="status status-xl status-error animate-ping"></div>
+              <div class="status status-xl status-error"></div>
+            </div>
+          </span>
+          <span
+            v-if="!domain"
+            class="loading loading-spinner loading-xl"
+          ></span>
+          <span v-else>{{ domain }}</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>
+          <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>
+          <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>
+          <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 disponible !</span>
+          <span v-else>This domain seems available!</span>
+        </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>
+        <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>
+        </div>
+        <button
+          :disabled="
+            state === State.Loading ||
+            state === State.Generating ||
+            state === State.Error
+          "
+          class="btn btn-primary"
+          @click="newDomain"
+        >
+          <span v-if="lang === 'french'">Nouveau domaine</span>
+          <span v-else>New domain</span>
+        </button>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped>

src/lib/factory.ts

@@ -2,6 +2,7 @@ import { getTLDList } from "./tld";
 import englishWords from "@/data/english.txt?raw";
 import frenchWords from "@/data/french.txt?raw";
 import { randomElement, shuffled } from "./random";
+import type { WhoIs } from "./whois";
 
 export class DomainFactory {
   tldList: string[] = [];
@@ -9,9 +10,9 @@ export class DomainFactory {
   words: Record<string, string[]> = {};
   generated: string[] = [];
 
-  async init() {
+  async init(whois: WhoIs) {
     try {
-      this.tldList = await getTLDList();
+      this.tldList = await getTLDList(whois);
     } catch (e) {
       this.error = "Could not load TLD list";
       throw e;

src/lib/tld.ts

@@ -1,20 +1,40 @@
-export async function getTLDList(): Promise<string[]> {
+import type { WhoIs } from "./whois";
+
+export async function getTLDList(whois: WhoIs): 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);
+  // @ts-expect-error - not empty string
+  content
+    .split("// ===END ICANN DOMAINS===")[0]
+    .split("\n")
+    .forEach((line) => {
+      line = line.trim();
+      if (
+        line.length &&
+        !line.startsWith("//") &&
+        !line.startsWith("*") &&
+        line.replace(/[^\x20-\x7F]/g, "") === line
+      ) {
+        tldList.forEach((other) => {
+          if (line.endsWith(`.${other}`)) {
+            tldList.splice(tldList.indexOf(other), 1);
+          }
+        });
+        tldList.push(line);
+      }
+    });
+  return tldList.filter((tld) => {
+    if (!whois.rdapEndpoints) {
+      return true;
     }
+    for (const rdap_tld of Object.keys(whois.rdapEndpoints)) {
+      if (rdap_tld == tld || tld.endsWith(`.${rdap_tld}`)) {
+        return true;
+      }
+    }
+    return false;
   });
-  return tldList;
 }

src/style.css

@@ -0,0 +1,19 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
+@import "tailwindcss";
+@plugin "daisyui" {
+  themes: cyberpunk --default;
+}
+
+html,
+body {
+  font-family: "Roboto", Verdana, serif;
+}
+
+.hero {
+  background-image: url(./background.jpg);
+
+  @supports (background-image: url(./background.webp)) {
+    background-image: url(./background.webp);
+  }
+}

src/style.scss

@@ -1,217 +0,0 @@
-@use './material-colors.css';
-
-/*
-=================================================
-https://www.joshwcomeau.com/css/custom-css-reset/
-=================================================
-*/
-
-/*
-  1. Use a more-intuitive box-sizing model.
-*/
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-/*
-    2. Remove default margin
-  */
-* {
-  margin: 0;
-}
-/*
-    3. Allow percentage-based heights in the application
-  */
-html,
-body,
-div#app {
-  height: 100%;
-}
-/*
-    Typographic tweaks!
-    4. Add accessible line-height
-    5. Improve text rendering
-  */
-body {
-  line-height: 1.5;
-  -webkit-font-smoothing: antialiased;
-}
-/*
-    6. Improve media defaults
-  */
-img,
-picture,
-video,
-canvas,
-svg {
-  display: block;
-  max-width: 100%;
-}
-/*
-    7. Remove built-in form typography styles
-  */
-input,
-button,
-textarea,
-select {
-  font: inherit;
-}
-/*
-    8. Avoid text overflows
-  */
-p,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  overflow-wrap: break-word;
-}
-/*
-    9. Create a root stacking context
-  */
-#root,
-#__next {
-  isolation: isolate;
-}
-
-/*
-=================================================
-CUSTOM STYLE
-=================================================
-*/
-
-@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
-
-:root {
-  /* https://materialui.co/colors/ */
-  /* TODO: 2. change hue and saturation */
-  --hue-primary: 65.52;
-  --sat-primary: 20%;
-  --background: hsl(var(--hue-primary), var(--sat-primary), 96.08%);
-  --background-primary: hsl(var(--hue-primary), var(--sat-primary), 93.33%);
-  --background-secondary: hsl(var(--hue-primary), var(--sat-primary), 90%);
-  --color-primary: hsl(var(--hue-primary), var(--sat-primary), 50%);
-  --text-primary: hsl(var(--hue-primary), var(--sat-primary), 25%);
-  --text-secondary: hsl(var(--hue-primary), var(--sat-primary), 30%);
-}
-
-/*
-=================================================
-https://blog.koley.in/2019/339-bytes-of-responsive-css
-https://www.swyx.io/css-100-bytes
-https://gist.github.com/JoeyBurzynski/617fb6201335779f8424ad9528b72c41
-=================================================
-*/
-
-html,
-body {
-  padding: 0;
-  max-width: 100%;
-  color: var(--text-primary);
-  font-family: 'Roboto', Verdana, serif;
-}
-
-body {
-  background-color: var(--background);
-}
-
-main {
-  padding: 1.5rem;
-  margin: auto;
-  background-color: var(--background-primary);
-  min-height: 100%;
-}
-
-table {
-  border-collapse: collapse;
-  width: 100%;
-  font-size: 0.9em;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin: 1em 0 0.5em;
-}
-
-p,
-ul,
-ol {
-  margin-bottom: 2em;
-  color: var(--text-secondary);
-}
-
-hr {
-  opacity: 25%;
-  border-bottom: 0;
-  margin-bottom: 0.5em;
-}
-
-textarea,
-input,
-select,
-.mono {
-  font-family: 'Roboto Mono', monospace;
-}
-
-textarea {
-  width: 100%;
-  min-width: 100%;
-  max-width: 100%;
-}
-
-a {
-  color: inherit;
-}
-
-.button {
-  display: block;
-  width: 100%;
-  text-decoration: none;
-  padding: 1em;
-  margin-bottom: 0.75em;
-  border: 1px solid var(--color-primary);
-  border-radius: 0.5em;
-  background-color: var(--background);
-  cursor: pointer;
-  font-size: 1.333em;
-}
-
-.button:hover {
-  background-color: var(--background-secondary);
-}
-
-@media only screen and (min-width: 768px) {
-  main {
-    max-width: 42rem;
-  }
-  table {
-    font-size: inherit;
-  }
-}
-
-/*
- * LUCIDE ICONS
- */
-
-svg.lucide {
-  display: inline-block;
-  vertical-align: text-top;
-}
-
-b .lucide,
-h1 .lucide,
-h2 .lucide,
-h3 .lucide,
-h4 .lucide,
-h5 .lucide,
-h6 .lucide {
-  stroke-width: 3;
-}