Render href on valid domaincheck-widget

1 files changed, 10 insertions, 4 deletions

diff --git a/templates/index.html b/templates/index.html
index 39963a4..360a8f0 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -34,12 +34,18 @@
   <div
     x-data="{
       get match() { return this.tlds.find(d => this.name.endsWith(d) && this.name !== d) },
+      get domain() { return this.name.substring(0, this.name.indexOf(this.match)) + '.' + this.match },
+      get href() { return 'http://' + this.domain },
       name: '',
       tlds: 'aaa,abb,abc,ac,aco,ad,ads,ae,aeg,af,afl,ag,ai,aig,al,am,anz,ao,aol,app,aq,ar,art,as,at,au,aw,aws,ax,axa,az,ba,bar,bb,bbc,bbt,bcg,bcn,bd,be,bet,bf,bg,bh,bi,bid,bio,biz,bj,bm,bms,bmw,bn,bo,bom,boo,bot,box,br,bs,bt,buy,bv,bw,by,bz,bzh,ca,cab,cal,cam,car,cat,cba,cbn,cbs,cc,cd,ceo,cf,cfa,cfd,cg,ch,ci,ck,cl,cm,cn,co,com,cpa,cr,crs,cu,cv,cw,cx,cy,cz,dad,day,dds,de,dev,dhl,diy,dj,dk,dm,dnp,do,dog,dot,dtv,dvr,dz,eat,ec,eco,edu,ee,eg,er,es,esq,et,eu,eus,fan,fi,fit,fj,fk,fly,fm,fo,foo,fox,fr,frl,ftr,fun,fyi,ga,gal,gap,gay,gb,gd,gdn,ge,gea,gf,gg,gh,gi,gl,gle,gm,gmo,gmx,gn,goo,gop,got,gov,gp,gq,gr,gs,gt,gu,gw,gy,hbo,hiv,hk,hkt,hm,hn,hot,how,hr,ht,hu,ibm,ice,icu,id,ie,ifm,il,im,in,inc,ing,ink,int,io,iq,ir,is,ist,it,itv,jcb,je,jio,jll,jm,jmp,jnj,jo,jot,joy,jp,ke,kfh,kg,kh,ki,kia,kim,km,kn,kp,kpn,kr,krd,kw,ky,kz,la,lat,law,lb,lc,lds,li,lk,llc,llp,lol,lpl,lr,ls,lt,ltd,lu,lv,ly,ma,man,map,mba,mc,md,me,med,men,mg,mh,mil,mit,mk,ml,mlb,mls,mm,mma,mn,mo,moe,moi,mom,mov,mp,mq,mr,ms,msd,mt,mtn,mtr,mu,mv,mw,mx,my,mz,na,nab,nba,nc,ne,nec,net,new,nf,nfl,ng,ngo,nhk,ni,nl,no,now,np,nr,nra,nrw,ntt,nu,nyc,nz,obi,om,one,ong,onl,ooo,org,ott,ovh,pa,pay,pe,pet,pf,pg,ph,phd,pid,pin,pk,pl,pm,pn,pnc,pr,pro,pru,ps,pt,pub,pw,pwc,py,qa,re,red,ren,ril,rio,rip,ro,rs,ru,run,rw,rwe,sa,sap,sas,sb,sbi,sbs,sc,sca,scb,sd,se,ses,sew,sex,sfr,sg,sh,si,sj,sk,ski,sky,sl,sm,sn,so,soy,spa,sr,srl,ss,st,stc,su,sv,sx,sy,sz,tab,tax,tc,tci,td,tdk,tel,tf,tg,th,thd,tj,tjx,tk,tl,tm,tn,to,top,tr,trv,tt,tui,tv,tvs,tw,tz,ua,ubs,ug,uk,uno,uol,ups,us,uy,uz,va,vc,ve,vet,vg,vi,vig,vin,vip,vn,vu,wed,wf,win,wme,wow,ws,wtc,wtf,xin,xxx,xyz,ye,you,yt,yun,za,zip,zm,zw'.split(',')}">
-    <input class="f3" x-model="name" placeholder="What's your name?" @input.debounce.1000ms="console.log($el.value)">
+    <input class="f3 pa1 br1 bn" x-model="name" placeholder="What's your name?"
+      @input.debounce.1000ms="console.log($el.value)">
     <div class="f3">
       <template x-if="match">
-        <div class="green"><span x-text="match"></span> is potentially a valid domain name!</div>
+        <div class=""><a class="link dim blue pointer:hover" x-bind:href="href" x-text="domain"></a> is potentially a
+          valid
+          domain
+          name!</div>
       </template>
       <template x-if="!match && name != ''">
         <div class="red"><span x-text="name"></span> does not have a known TLD</div>
@@ -52,7 +58,7 @@
   <ul class="list pl0">
     {% for name in names %}
     <li class="mb3">
-      <div class="f3">{{ name|render_link("link dim blue")|safe }}</div>
+      <div class="f3">{{ name|render_link("link dim blue pointer:hover")|safe }}</div>
       <div class="gray serif mt1">{{ name.title }}</div>
     </li>
     {% endfor %}
@@ -74,4 +80,4 @@
   </footer>
 </body>
 
-</html>
\ No newline at end of file
+</html>