feat: input page (wip)
This commit is contained in:
+30
-163
@@ -1,86 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onBeforeMount } from "vue";
|
||||
import { isDomainAvailable } from "./lib/whois";
|
||||
import { DomainFactory } from "./lib/factory";
|
||||
|
||||
enum State {
|
||||
Loading,
|
||||
Ready,
|
||||
Generating,
|
||||
Fetching,
|
||||
Error,
|
||||
}
|
||||
import PageRandom from "@/components/PageRandom.vue";
|
||||
// import PageInput from "@/components/PageInput.vue";
|
||||
import { DomainFactory } from "@/lib/factory";
|
||||
|
||||
function getLang() {
|
||||
return document.location.hash === "#french" ? "french" : "english";
|
||||
}
|
||||
|
||||
const visible = ref<boolean>(false);
|
||||
const factory = ref<DomainFactory>(new DomainFactory());
|
||||
const domain = 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) {
|
||||
state.value = State.Generating;
|
||||
factory.value
|
||||
.next(lang.value)
|
||||
.then((value) => {
|
||||
domain.value = value;
|
||||
checkAvailability();
|
||||
})
|
||||
.catch((err: unknown) => {
|
||||
state.value = State.Error;
|
||||
throw err;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function checkAvailability() {
|
||||
if (domain.value) {
|
||||
const promiseDomain = domain.value;
|
||||
state.value = State.Fetching;
|
||||
isDomainAvailable(promiseDomain)
|
||||
.then((available) => {
|
||||
if (domain.value !== promiseDomain) {
|
||||
return; // domain changed
|
||||
}
|
||||
domainAvailable.value = available;
|
||||
if (!available) {
|
||||
newDomain();
|
||||
} else {
|
||||
state.value = State.Ready;
|
||||
}
|
||||
})
|
||||
.catch((err: unknown) => {
|
||||
state.value = State.Error;
|
||||
throw err;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function getTextClass() {
|
||||
if (!domain.value || domain.value.length < 15) {
|
||||
return "text-5xl";
|
||||
}
|
||||
if (domain.value.length < 20) {
|
||||
return "text-4xl";
|
||||
}
|
||||
if (domain.value.length < 25) {
|
||||
return "text-3xl";
|
||||
}
|
||||
if (domain.value.length < 30) {
|
||||
return "text-2xl";
|
||||
}
|
||||
return "text-xl";
|
||||
}
|
||||
const factory = ref<DomainFactory>(new DomainFactory());
|
||||
|
||||
onBeforeMount(() => {
|
||||
factory.value.init();
|
||||
newDomain();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
visible.value = true;
|
||||
@@ -89,7 +24,6 @@ onMounted(() => {
|
||||
const newLang = getLang();
|
||||
if (newLang !== lang.value) {
|
||||
lang.value = newLang;
|
||||
newDomain();
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
@@ -97,99 +31,32 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<div :style="{ display: visible ? 'inherit' : 'none' }">
|
||||
<div class="card bg-base-100 w-xl max-w-svw shrink-0 shadow-2xl">
|
||||
<div class="card-body overflow-hidden">
|
||||
<h1 class="font-bold" :class="getTextClass()">
|
||||
<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
|
||||
<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>
|
||||
<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 class="tabs tabs-xs tabs-bottom w-xl max-w-svw shrink-0">
|
||||
<input
|
||||
type="radio"
|
||||
name="app_tabs"
|
||||
class="tab"
|
||||
:aria-label="lang === 'french' ? 'Aléatoire' : 'Random'"
|
||||
checked
|
||||
/>
|
||||
<div
|
||||
class="tab-content bg-base-100 border-base-300 shadow-2xl p-6 overflow-hidden"
|
||||
>
|
||||
<PageRandom :lang="lang" :factory="factory" />
|
||||
</div>
|
||||
|
||||
<!-- <input
|
||||
type="radio"
|
||||
name="app_tabs"
|
||||
class="tab"
|
||||
:aria-label="lang === 'french' ? 'Saisie' : 'Input'"
|
||||
checked
|
||||
/>
|
||||
<div
|
||||
class="tab-content bg-base-100 border-base-300 shadow-2xl p-6 overflow-hidden"
|
||||
>
|
||||
<PageInput :lang="lang" :factory="factory" />
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.footer {
|
||||
opacity: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
domain: string;
|
||||
available: boolean;
|
||||
searching: boolean;
|
||||
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
|
||||
class="status status-success animate-ping"
|
||||
:class="`status-${size}`"
|
||||
></div>
|
||||
<div class="status status-success" :class="`status-${size}`"></div>
|
||||
</div>
|
||||
<div v-else class="inline-grid *:[grid-area:1/1]">
|
||||
<div
|
||||
class="status status-error animate-ping"
|
||||
:class="`status-${size}`"
|
||||
></div>
|
||||
<div class="status status-error" :class="`status-${size}`"></div>
|
||||
</div>
|
||||
</div>
|
||||
{{ domain }}
|
||||
</template>
|
||||
@@ -0,0 +1,61 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import type { DomainFactory } from "@/lib/factory";
|
||||
import CoolDomain from "./CoolDomain.vue";
|
||||
|
||||
const props = defineProps<{ lang: string; factory: DomainFactory }>();
|
||||
|
||||
const input = ref<string>("");
|
||||
const domains = ref<string[]>([]);
|
||||
|
||||
function start() {
|
||||
if (input.value.length) {
|
||||
domains.value.splice(0, domains.value.length);
|
||||
newDomain();
|
||||
}
|
||||
}
|
||||
|
||||
function newDomain() {
|
||||
const startInput = input.value;
|
||||
props.factory
|
||||
.nextFromWord(input.value)
|
||||
.then((domain) => {
|
||||
if (input.value === startInput) {
|
||||
domains.value.push(domain);
|
||||
newDomain();
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// TODO handle 0 domains
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="pb-6">
|
||||
<input
|
||||
v-model.trim="input"
|
||||
type="text"
|
||||
:placeholder="
|
||||
lang === 'french'
|
||||
? 'Écrit un mot ou une phrase'
|
||||
: 'Type a word or a phrase'
|
||||
"
|
||||
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>
|
||||
</button>
|
||||
<p v-for="(domain, i) in domains" :key="`domain-${i}`" class="pt-6">
|
||||
<CoolDomain
|
||||
:domain="domain"
|
||||
:available="false"
|
||||
:searching="false"
|
||||
size="md"
|
||||
></CoolDomain>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,155 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onBeforeMount, watch } from "vue";
|
||||
import { isDomainAvailable } from "@/lib/whois";
|
||||
import type { DomainFactory } from "@/lib/factory";
|
||||
import CoolDomain from "./CoolDomain.vue";
|
||||
|
||||
enum State {
|
||||
Loading,
|
||||
Ready,
|
||||
Generating,
|
||||
Fetching,
|
||||
Error,
|
||||
}
|
||||
|
||||
const props = defineProps<{ lang: string; factory: DomainFactory }>();
|
||||
|
||||
const domain = ref<string | null>(null);
|
||||
const domainAvailable = ref<boolean>(false);
|
||||
const state = ref<State>(State.Loading);
|
||||
|
||||
function newDomain() {
|
||||
if (!props.factory.error) {
|
||||
state.value = State.Generating;
|
||||
props.factory
|
||||
.next(props.lang)
|
||||
.then((value: string) => {
|
||||
domain.value = value;
|
||||
checkAvailability();
|
||||
})
|
||||
.catch((err: unknown) => {
|
||||
state.value = State.Error;
|
||||
throw err;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function checkAvailability() {
|
||||
if (domain.value) {
|
||||
const promiseDomain = domain.value;
|
||||
state.value = State.Fetching;
|
||||
isDomainAvailable(promiseDomain)
|
||||
.then((available: boolean) => {
|
||||
if (domain.value !== promiseDomain) {
|
||||
return; // domain changed
|
||||
}
|
||||
domainAvailable.value = available;
|
||||
if (!available) {
|
||||
newDomain();
|
||||
} else {
|
||||
state.value = State.Ready;
|
||||
}
|
||||
})
|
||||
.catch((err: unknown) => {
|
||||
state.value = State.Error;
|
||||
throw err;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function getTextClass() {
|
||||
if (!domain.value || domain.value.length < 15) {
|
||||
return "text-5xl";
|
||||
}
|
||||
if (domain.value.length < 20) {
|
||||
return "text-4xl";
|
||||
}
|
||||
if (domain.value.length < 25) {
|
||||
return "text-3xl";
|
||||
}
|
||||
if (domain.value.length < 30) {
|
||||
return "text-2xl";
|
||||
}
|
||||
return "text-xl";
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
newDomain();
|
||||
});
|
||||
watch(() => props.lang, 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>
|
||||
</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
|
||||
<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>
|
||||
<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>
|
||||
</template>
|
||||
+29
-9
@@ -15,15 +15,19 @@ export class DomainFactory {
|
||||
this.words.english = this.initWords(englishWords);
|
||||
}
|
||||
|
||||
escapeWord(word: string): string {
|
||||
return word
|
||||
.normalize("NFD")
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9-]/g, "")
|
||||
.trim();
|
||||
}
|
||||
|
||||
initWords(raw: string): string[] {
|
||||
return raw
|
||||
.split("\n")
|
||||
.map((word) => {
|
||||
word = word
|
||||
.normalize("NFD")
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9-]/g, "")
|
||||
.trim();
|
||||
word = this.escapeWord(word);
|
||||
if (word.length == 0) {
|
||||
return null;
|
||||
}
|
||||
@@ -40,13 +44,12 @@ export class DomainFactory {
|
||||
return randomElement(this.words[lang]);
|
||||
}
|
||||
|
||||
randomDomain(lang: string): string | null {
|
||||
const word = this.randomWord(lang);
|
||||
randomDomain(word: string): string | null {
|
||||
for (const tld of shuffled(TLD_LIST.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}`;
|
||||
if (!domain.includes("-.")) {
|
||||
if (!domain.includes("-.") && !this.generated.includes(domain)) {
|
||||
this.generated.push(domain);
|
||||
return domain;
|
||||
}
|
||||
@@ -60,7 +63,8 @@ export class DomainFactory {
|
||||
let k = 10000;
|
||||
while (k > 0) {
|
||||
k--;
|
||||
const domain = this.randomDomain(lang);
|
||||
const word = this.randomWord(lang);
|
||||
const domain = this.randomDomain(word);
|
||||
if (domain) {
|
||||
resolve(domain);
|
||||
return;
|
||||
@@ -70,4 +74,20 @@ export class DomainFactory {
|
||||
reject(new Error(this.error));
|
||||
});
|
||||
}
|
||||
|
||||
nextFromWord(word: string): Promise<string> {
|
||||
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;
|
||||
}
|
||||
}
|
||||
reject(new Error("Could not generate a valid domain"));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user