From 26b539dbd0113b82002fb8f7dea0fb5e911ae967 Mon Sep 17 00:00:00 2001 From: Ben Vinegar <2153+benvinegar@users.noreply.github.com> Date: Mon, 29 Apr 2024 08:41:09 -0400 Subject: [PATCH] Add OpenGraph + Twitter card preview links (#74) --- app/root.test.tsx | 46 ++++++++++++++++++++++++++++++ app/root.tsx | 34 ++++++++++++++++++++-- public/counterscale-og-large.webp | Bin 0 -> 89384 bytes 3 files changed, 78 insertions(+), 2 deletions(-) create mode 100644 app/root.test.tsx create mode 100644 public/counterscale-og-large.webp diff --git a/app/root.test.tsx b/app/root.test.tsx new file mode 100644 index 0000000..f9ddd54 --- /dev/null +++ b/app/root.test.tsx @@ -0,0 +1,46 @@ +// @vitest-environment jsdom +import { json } from "@remix-run/node"; +import { beforeAll, describe, expect, test, vitest } from "vitest"; +import "vitest-dom/extend-expect"; +import { render, waitFor, screen } from "@testing-library/react"; +import { createRemixStub } from "@remix-run/testing"; + +import Root from "./root"; + +describe("Root", () => { + beforeAll(() => { + // not sure what calls scrollTo, but it does get + // called in this test - and if we don't mock it this + // will throw an exception/warning + + window.scrollTo = vitest.fn(() => {}); + }); + + test("renders without crashing", async () => { + function loader() { + return json({ + version: "ABC123", + origin: "http://example.com", + url: "http://example.com/path", + }); + } + + // note: this will render an element into a
dh)aB+MaTd|5}n$eGNHwV4Aluu4j`a>snvZ_B>%AFEwe<(Eli8ohpAN8 z6+5!;X;X)l>8PRSov~8aSEPl=aM4+WQR9@&o)Co|RbqF+r_uh*Z3qak9}*5)Nb^oG z<}0t^**CuUeZQ-FUEDch(a-XLnQ5VJRn8{J3@}92?5eEjbTF@UM{FKd6HwH?=QQ@l zbw1D~YPbS=Uu7H$OI~J`nrJX&pt0cv@+}qmcHl~gCXkJUSBpRv9KU4%1WBwaz*XU^ zW=fRM_nB2UGy4<{#qoN2ogD-})!{(Y1x1Zfqz)_te7W+@Pcn^CQgY-B5de03v(jij z?EHE^;U%x#D0Xt>gLzw9dbw=*VQa!tmQI0;Sj&ad=Mamy7o+(76-E}mZHRg;Whk%= z3d?Gqk2NVZbr`wY+>Bi^)ajyMtG-q7V@x6$nX$`bz(JMW$C7y3?6|WZqI9?- zkzRw<_d;eYr(zv_sYL^)36JhWoCBb>_-uMvgH8mQK&0&?{qR@cH^s-KW6Ph07Zn)N zW~G$#Arj(2u7eC#Q3!fF5$REK366t}zGn$ouB;Jvfw_#_c7|CL!aAZ9HFjEG+{)(= zerv_{#&tuIjN%A))=%0|cfb@nfuFpgVgg)BZ#4}BC*l;rK+~`QG|=1)^(L3SQ0r!( zYa-2= ^ih+PJ$#-#kCNVEtF9gd=hT=Zb@frm6pnTXV>@1eh8m&Gd zb<-?uQ8DTwyK6K#RkmMeXo+locHKIaYQ1RQOXzsaMDTdkJdq8cj=HcPxTkvSp9y`1 zbG;QI5AiN>Z=BktIy#2zkfqqqBZ(n%RQZtWY)9b9=MDBwV`4`Sh8XKeRwnw&s)853 zLeu@25}}m0M3Zk^@wsZAn7bed@@Q&c ^KR1V&_sBZeb@DRk35sAl`teb67Lsf9#eN7t_i=3&v=Ttz~7vYvEsW*<;-N=rh z3!g47K#7A$@@OLnvIWx@gyE{n;(?KN-~~pG%|BSe%;pdR6cova<>Id|LN0*=T z;q(@Qqz-okUeXJlhV`WoDTsyiuvz0Uc0Y58A)dU{2m9K9rQ1LjoAXaROEwjsCBtCo zo%t|y#y%;QnGQepOH}^Ij7wGwR0E1($hml4LPMy4j5b}-6+6MQ6e+L{?+HbF(SX(& zPy)3zo4+amo01}%MaZLaTW;5HR31)W_m$vM&!f-|Y$M~y>VBz%^_y-mt_xcY=6(Lm zo~3vkVBI%)>zUf(66MXbRE{yr%$+!3WVYdKu*<#g35LV6iIqMdHhDf!hKp8V4pe%N zXl->eeB6Q$z2$&DCKuL#(l@cen#qi;ko1%jQq0DVbH*I-;?sfoMym4JDaw3ZX6{RA z@wpQ@!dk3F8dTuNbn41Pa-}N(TTG<)Ry_M5e{8ACaaZ{~16}J2-7N$I9<@=~NK+fW z3O2j=irB>aMSM#yHWc^%WCuy2R;)$^FZ+q~CwOnP$h#Y3$hHXpyG#)cGKvq7aQBUr z8;3UOA;$L@uBrhOJc#z-s) 8?Mh18MYZ z%(poYt)mb9qKDSz%WYshJn4sCKlNF)oGYx%T$0(Ly#2l6B$dgt$73AHdIv#@;3aIa zALET_iKs?;Axv~w>bNbdSqCrhM$4g+&MxV))1`Q#aKhhS1`qg!wQQE1SQwAq;72Vo zTpeS%6r)R+o;4#MkNq#?%R9+;>fZx_cm3o0)Cmkd2u^A&7B5->&l8x4b3iNgTqc&e zj2&!SVwQSgl_xf-*o6wP^XDnU#3Xi!g%Gklw!P9UZ$ccHF8p PGUy46vVHDn%QRU2mhMZsZEjH8PZ8ZaZz zp`VGW+YvsucbA`n<%1!GG50~d!GEa@=ALjyai=~qbCDaT3aq!tszA-}@&l`(vlH7C z43+llh*KFjB(REERZ6^VNG2gL{Z{Ha*jRRCKr_|$OkgGZ8M3R}yi#w#3AzbK8KW7Z zxye^DGP2@3pIP@*v;0kQJ0^$*iITRcnJ8`j(EVJb8C!W|cpLX9fcvA*q8&>OzdgWe z@E}IK4{w)r%luXtvShU3h) Qmb%p`O%BH&eDCX&S0z$vI pgc|wK;dS* zo6V2)@ivGUqX!%xz}uUl0>P1yU}a@%Smq5@z*{WA@x@CNQIB~#$C6aEQS+}bygUo# zgI%!0?+v?LcS0Vd8kEeTp|l{Bz6?Pmj9hYFB^deY=T5+_P;IWNaTVb7NK+sCg0CX4 zf)E{Gbi>M0Ks)vz*H$=@e`i%Xn#f3jX^Lx9^#HG=Vafs};hnHy>#PLB`ncI8SMnrO z2pq~t&IM#M;R9hLa%pL81)upr4XNH3 sDcFLhpS@YON5d>pI2zzLY zUMPb{Vh;c}dY5}Pv)#2dCAq{6Kj@Q;XNKfR3}J@%efAUdEwY5KfuaEJU~Svk%w>Up z7b5tMzhhP5&`RQYpqdJ3zd5EkI`vRT5qtPCM7NL3OY2_q?2n@qmMq&D>=kv$miDIG zhfvR_4q2jPzPT~7g%a}+AD^b4z7;<-&ATZSW#bisPEV@>bsc%rV`yzq!1@*V8KI9- zzIt{TJj;s-Q2rZ>^7pfy%4R9mSIC`yxvz)CgqO_KS#Bfgk(M0qoccOw{a@~^KA*PB zZGGIE(s*4r1!m-h+?F$))X+F=33LYMO64_9r9SHei&6e2nQuT#YP(k$s{Ez)1O@)x z8dh~VR1AUgmeybRb}A~75egh9=?KYV%K1s=(hv-T+XSrC-j A3v zv;}$t%VTk#Zj+76qB4&XPI)?83Y!cFk~}b0-f)BtS6R#qXc`<>iuTgIgFUg;o2)1Q z g4u5Tbe(K!?qsH0jWOSF6#^9Eigq(XW)MqGXQhg=eMOuk z?eOv`>@ECULu3Ay*K~?r`|51%E!f!6eqPY^S&TrjZ# fznjI#Q65gKO(5wdt_q(3S@~g#{b56k_Jlj(jsnOmf!ev^QR9C^G-x$$qH |4<+@7@lp$4F~eX9WZV747wLiAqkDX4=o+OJPB}d07mMD|}1q#5uZ+#;(0CxO3G$ zbZC$F;pv+j%WD{M^l}Q@Va^@Z m73*t&1lk<-6e;TAdbm zZefVn;nvsSYJ2K#9^i)obR}+^tf7na0{4_WvJ;?A4Qk{Ai~F|TS7auY3M^R={fCSn ziklEXQ2d-4EiFj8@J^H+Q{ULBBx!4MhF#S)zP9%Hk+#p)pBqQj9hXFT8(~9j3jzV* z4@whUY*pqb7>y(69D+`Y<#&=IxJQZ{$u<)}o|L?lDm8Il25l0C_-$zaBLx*$Hx| zT6miz&@7nl&igYnrWXJeq+@buYCib-He3!!OjipIenyZ`&K>hgZ;rn_EDqL#=@{m= zHQkLmTX$mV5i@4^hFwAzH@yc$x_|dW7dFdV-Hn()^298W*KzHE5pNUzPH>pQy}a9S zK{sN*OQ2s6YIA|{`eVJ~!qCHyJcvnw)(z7mH20K0Rjmnhr~w64KICrTZFD5P1Dr@K z*62sy10OAL;B4hy1OIH!neb?VtU^>=KYpYP>fSOzk4#C^OjdyN)zdK<_-=NK!Nk6W z;eQR|s8e1bq?VwXsiU|}*>WM?eMT1;57P&%rwQQcdT+i=%Pp!PA@){`An-9iv#7$9 z4{W{7r#4jeQ RU;oXZHk z_^2=;FC80_c?hkW8+-7az+0JOyQ2Lk3uq|u$2=8h2+rOLcHu@n-8eAiz=^IK94Mx_ zmmCspyV#B_+kxpcu+gXMM!3E-2ijn4PN#-rOHA~)5s)y=71%o_;!sAcqu+BKattNV zxcGzK7R^R8o-_P~_{Fkp=tB9JQVr#GExVm+kC+|3 afMA9zv29YbNGO&zm2+W`~0t@saJL+v`4YuBYl@dr#Q$&tJ49XAJ4W18) zJ7f3`eRdzq(^(@DF5Qx5W8#zd9IKdJkvEe!lj+Gn3?0Kud+=ncFD2vx*+ntuJSR(# zjtAzjBNmyinc)IhutkOkt=}#+NS)jVZI}@h^+QrOoerr-ovTFE`oK`2TO9_fLOtAP z1f82I&A|3rNDll!AjJCD^Lo2x&0b@laO!H1g_#wv+5D{70cd*OsZAF-FgsUP524mn z-oLzp3qyT1^FE=y4TL?5zPggF#vwyG&>PFj{Z7O6!$X`X$UTrD5TTdi#(n2f$jZFn z@qY#fIVOyevbk6&^SFx#EFOz4YVK3S6_mSAT#8OkMqbcM93u!Yetsg+!GPBgD^m)X z?}cTwaI?yLx!*Ny6z-80Fgsd}RlD@A42YzR&V$n?U`J32000TMtNZ2p3oagWdNb#2 z804>Oib#9S+Pn+uO8q?&UHhHeZVnA(t|!z%koq4@aTIUnKflJ|-9A;5^F8T42@9C7 z%wdRoA0+W@2s{NdZ9G3)-u07o0qe&Vj3I5!uTNZd3eWw+E0KI26*?J`Qqv33lu`ty zLPX5??wq3);ouxf-x=9GAj?o%eL@ $g;oef zC^FROdTp=^+|}=svA_#0dh3Sa=Y#GVL|{WBzf3Tojemq%$J7sG^2-OtzM{ oWrudQ6r~CTnbNfa97TIN+MmfEz2%+D9;nf z;!s?oJm^0YG>iyYG51@rhs^B9?QNf$Zc(9Tji9 o6EE;yn8#?Dt%vB%~QLn0SkKuy1@O!4wMX(Pc6Z$=ZV z+}th^Ke;*ifm*xm`>5P%!f*565qrmxZ5{0Ej&k^H2OT#d<(fo=v^+4|!7h$G;^e`^ zHe!`A(8Sh&(@md@^WT~g^nDmw=Z<&FjXfzu)#U~K^ 7*@Zptql6lVt|W;h!n@1b!+t{NHypao@^yE^SwZ5 z z_JvU_OuDj&^%+b1jrsr`ZV%>bnX6~fzx#$B4h EH7LCT{7qKrZ z=*w%v%wTWI*4_%_6dKbBDBEm@d{^OU%s$)@+~F)^FaV3~6~M)Kkk3%90;ZMC33uva zfs`t76th~wr^)dPg*_+@e?adf+2dCaL6NGQ2O7vZ3*e#f0Sd@u!d)tYG9yn82k? zJt6Uqk|rBlZd#QbbmmV{5HYy|<(~$;VMRN5(laF9&z?#CzzhO7_?GPdC6l^f{75|u zoz3ro9J9~I@;YoaJsKxt7c=bJ=v1Jp!GAsf&kh}Gn#gevYsDFeZbBmCMeRu|4OO}t zI!Ro7`ir-i8w81%PAZKUAhTxdwwT45S5Vm=k0@Rl02u@Jq{FXF0J8HPvL5i>#q;-( zIga}k2=vK8CCc=gSHB5~f29Lqc!KDIx0d}JB#Td=ErsvBuemQRo7GdTb*=)E0w9Ta ziX5moFx{)Jvm+h9)bYo;)0btPQD|1K%ne$X;22e}?i!ge1|L<4S!uCllTlNm=uS?&_q? z8poxa#PrB24%M3wwW^NcImw63^&A`mp1Fu+Wl=^A9yW$C{3ayiYeh4nX!emw=oYFv zyi$WHn1t#!1cX0*OjiZtHQq>HIJgD(kVy8lo6;V50pLb$5#Wr#5!jI2z;97|eNicR zoM6$`70^emQY+Z>wcb@xYKHZ_{rdjaRieo*Tswky!*yr_K#kzKhimIbMEq&LM^*Bb zfmq>El<&Fbf27O;k{3^h>lYYMmlJ)Vx>6zi59Kk&wy^4dvh;Qx=X6A`=S-Ubr;nOm z=s!JvIM#bz4@o9eMk%~RkR*hyJSEt$V0@J#A#=<0xnmc++0LqaKFH%z@Wm| {CYLR@8noK*JywF)_*otTaV3O#` z{ygA+`!L>}7gQU9ZUkKy&~mlWw |Xz&AHYRi2NMSS8Bqp0yTsc{LGwz9WcQ9h zEeBtV%*j?)!BUxnLo(bDB?E&IG!5zO3SP4bwt59tgBMGvrKXdP{2==BWpa9~6&B-? zbStEY$-kIClNr~`GXOxi07c2cz%7-te4L$RtdKX)<`yK&ru&RMv5)iXaP9|1cBwWk znrr7KI0J)G!BgO?(dBi|4EM*bEP!o3!_u* oS-xHU*}y?Pd3XYt8?6CC6*fptU}%37>SNdx ztXx_;mlEO~nBF1jzg8-rA${inuyLKwiVl>}y;QjOld1{Vofm^P#IZaaOQ@TsK|w%H zcHsBSRTb;m+v7ajwug29B*VUR*YuuSA!F@c)3d(m%>om2Y0rA&vWJkC$N#mlJvn(I zC-AYo^;Im6n~F{g8+M_QOHH0eYGiIc-3L#o&1%OY&&Kh0)=4yd*3^s}@Cov!4wD|J zz%EmaLA=mbeU)8Qb6K~`OZt%pCMVE?n0@TEb4i5}wrPfVRa 2k*V!Re zMmWGBNcsqhj^V$;H2`^`9{HlLEII*o@1>bzWiBJhvujM)sD!$F*BkKZ?Fd(yDPq^{ zjA=O7k0O`9-Yr87L}ft+_1FYg#A>Nwo(F$(^yafZD{{KGFx4SAkzj=-{%BAiAklvi zx(IT1zR*1K$cWyL%~@XGr^gtL+>Qv8we8&$8U~* -sQ7UL|l0%O= O}5|MPRnM3Vw30JF7Pb%>7sU(9nSv)#&ZDqn0K _W@g-G&}m#c?uOB`$j$3i>|{AJ^avQ#j;_Aqku9Ptg` z+W54n?Fe1v!^hcy^)1Hi?8CMs`>hgn?>Cwv$b?_iWkh|2jl19xKuI;wooylJhj}U% zIR8U9aZMgumO?M$@;FWOboQ3ctQ7JFb#!wW!OAUvT>f6c9TvJGZJ%#O?8AriNpd=X z#wZ5C0005-+z@j6{XnRZ+nzs-_jfOop&^ZqAj(EI=`b&yW`yUZ@-b&Ov1-O8d4jYC z eTlF^JHoGEES-^(yw}s#6NM~1tJ6I||iONllwc_<(trGj>3c}ZZ zbOy@YSjo(WyffcaVoV_GvH2v@Qw-F~7_n7GyXMvB*jGq1E>M kZ_%bx3J3W?0w|c)nw%P zPqr&VyNPHyvdF>j6Qv&ItFYA+BwD39&!hn#l_YDrLYDD))K P7~^xqjam-D!P5{-jNiF07q>ai}p^c%51k#zC$OcQ g%o{nzowfN+K+8LWT{R7^v&Ti)L#XAlhqo-nfgzyqj6w_-9Z+00000 z0000000000000000000v-V}3U*7i91ugyBwFB$ydYzJkptkgFFMo7;JasLIBa4#wu zNejH(U$XIxqsWpiN2|_sFMiF85~{Rlg?Y48>+6f >t3p$VI7eZ|A 6B`FB;qhb+m$v`D?)@FnJXsHXl^_gkq6nBYM&&1UMRFzD_< z${HuN=b}fWCoMRXI{i|Qkv=X7+afE~(ESA&f&d0zSFzRcg+e+R+3bF;H6CNwen$A% z^{W5?0B$<0cOI?vd^Gid01`=PkONtd^K{{m)6DjpR^fQ2ij@)hx|YsM1&7pf^p-3F z L2_L0>a_NS)0(uLYh^!bZvw^jSzv}0D3#;8NgP!92-{MXS>_+pTp z)*6k7Q;XJ%pFF^O55)1IRPnp224!CD6zFrX5E?IG3E{A&1R-k%ND&TPYS9i^wtM9K^HTvq@fKR%0U}lXtPXxrHJz3NE_NcvJJW1*I z`TJ;CDv>Q_dbow)BtHH06&8 )ETOiMLON*R*dMXLckNB6^ny>>-{y7>kMdh cl2*8w?z(F@pW^c zi>sXkU0moQ>gPchS2_r~xzI(`&VnwkbP;uPpo^=W1YKO{BI@Ts7gst6y1CFr)y{%0 zu5=M~bD(GIA`w{TXNX%L<={F%00AFQ*jkc5O+EbJ_z3pfYLn$j-|~b7QoJUk<%S z4d>Qt0cjtYmwW(2+Qi-)+;4uhD7v0&@5!<(GQO0U&@I--;3wf3q|mtU#4=5%0C_d9 z(podl_1mHlkDcmSqB?1?ZAu5%y0@o{BhuX;DO($M*!e6;VA$5DG}Plz>&d<)6_j8U zOopT18?+gQgQJJQV3VpAZ3{z`yHDNPDz~75R$t7lPC!)ZDXLI(YxctC=z1VW)syd} zc`YD9R9aQ^oLty;j|k^?;IKn+6%xlj5CBxw{I&UqPCAxsV)tVJL>0MQf+AEQ)Ty}H zf~?OCyc|R}v`jD1nP6oL#2u!26s2S>g)il1<5xFyK(h6&b7SAx?@$e-6yewR-k0-W zO|0*(&90?Oir=BpBfR}Vh{Lvw{RV04fIEws4t%ykidFb}W-7K3I0(RsHX|Mzo(Vhy zR0K{{J^(B1J&9EcjCRdFKNI9bXM^ds=8H%iX$Vkv06+(U0>A%0ui y zSedP$tZ5wT00zbo@Bx V$;Lz4iI;4U8L~>H6`m|85yQ}eJGwN}Jf_B&9 zZgrVHCmQ;76C#JIK#)wq3}HcJK6q?+0(}uYc6=eB*IsQ}ip2xHkLyzh0=425^z;Q1 zGhx$ld#=@21>6yPpus{KB*{r%Y0}7Me2TV4&YmBfaOYA!HyE8_9@A!L{c(68Iajc< z4lGywN=Km}#inYKK}Dqx(ALaOJ|>RBTYCO7Ni#2bIXOZXgpSD;RKD_`_?90*30+24 zNkG)CU|@$hkk2+upPSD?MM1z^jO9K9ST#CT>B5+`p=*&tX`-5|FbyRHHK|_i5se|t zCkLOJGaT8mlac;8{$SJBhj~3RMqa|X2FknU>B@9kzFoIh6PKl1eVMiDLrrml30m!P2$n>*a3O~{F2U95L1eL_J{W8J& zfNTaMCkA|-Z-MVFW*|L&R;%qx{ KTYPunhMR?_BX z;rfdK7eeo-xgotVl z%b496R8SwkjUS#`+^M9A zBU2K ^M3&)mPK3|Wzoju%obxaU>#n~a|vC)ne(t$`KkCXp~sBrEl>eU;%I#rzaDkBW49 zjjOX~qkm_=BI*|u?g^jeP;BR)8Jo7hJjs86i|=rLO-G;R0b${_P!?fjio)ix7FmZg z@VAI7Y`EH8#Q;8s+inCFL7RJ2l&3M5C8(_N#EbZ|+qXuqPcwRsp{kUw*f19y-vPK5 zYsXn6(+p`9t^7LQ^!|$(`th4aC0*O6 ZZmJ000000{zb7uaQ9)nHNHpjYG9P$9ZXj-kd-7)K%v?C-3hx?dYR{ zF6Kth_U-lb@C%Ajjj4f(TL@xwXAZh5(iuDXB5c&L65D9(VfAX2U!~pg)h7lRtO`1i zRF6=}GnZsxecSVK)A