From ceb1f60605a9a88a2e79c6fab910f38718f7fe9b Mon Sep 17 00:00:00 2001 From: Felicio Mununga Date: Mon, 26 Jun 2023 18:55:16 +0100 Subject: [PATCH] [website] add blog page filter tags (#424) * add tag images * add visibility filter * add no-scrollbar tailwind utility * add filter tags * use tag filters * rm cosole.log --- .../public/images/tags/community-20x20.png | Bin 0 -> 2288 bytes .../public/images/tags/dapps-20x20.png | Bin 0 -> 1787 bytes .../public/images/tags/developers-20x20.png | Bin 0 -> 1810 bytes .../tags/news-and-announcements-20x20.png | Bin 0 -> 2216 bytes .../images/tags/privacy-security-20x20.png | Bin 0 -> 2095 bytes .../public/images/tags/product-20x20.png | Bin 0 -> 2060 bytes apps/website/src/lib/ghost.ts | 5 +- apps/website/src/pages/blog/index.tsx | 183 ++++++++++++++++-- apps/website/src/styles/global.css | 11 ++ 9 files changed, 176 insertions(+), 23 deletions(-) create mode 100644 apps/website/public/images/tags/community-20x20.png create mode 100644 apps/website/public/images/tags/dapps-20x20.png create mode 100644 apps/website/public/images/tags/developers-20x20.png create mode 100644 apps/website/public/images/tags/news-and-announcements-20x20.png create mode 100644 apps/website/public/images/tags/privacy-security-20x20.png create mode 100644 apps/website/public/images/tags/product-20x20.png diff --git a/apps/website/public/images/tags/community-20x20.png b/apps/website/public/images/tags/community-20x20.png new file mode 100644 index 0000000000000000000000000000000000000000..2deefa8ddd98a05ce2949990b5a8624e34c7c9de GIT binary patch literal 2288 zcmV1g4-^mDYBAv|6hUo!apar=z9XKeU4# zMQ50zww=y^<1iL0eGJtyJQR?JKuiJ&36O-mb~pRVX7}#Bd+++48yQn33BehsUvhTu zoO||s-}n3dzV961|8EAK=f7+=n=9}!SfHh)<=DP``*Ke`zVrQ=78vHS$ydMq_>Pdz z=X;5s13C3qMUi3Hq6O{}S@dFs9cSX1t-f)t1I+FN+`$w!}|sqMJ8wfRa*zqQ5K4mAh- z_=DTHbma=xEMM}(-3#vtsoN@g<7pMwf=MJ&@1eD|b?@;HKlJ2#JoO%rr?#vt;B>nS zj2y?wiXx{koIl%J=qXyctssBb;S{P0$_{zFE1h{r+Nfn_B8muM*3>=3@Dhqes)K;-{7ApiV zZ1ybno*aOj$>{SXPBX5D2ufgRx`R12KreSKEwMHGT_&`YI}kt+v6PJ4G5HQa`lsE@ zBc-U&h;RCbEjfj<#Moy1_-pNq-aQFvQyd8JaZ~iP!kyy4no3Afh;UAq0}itqeWaQ zipl~ro?H_^b#?VicPBkt01JMyIq>i!%L;X89^$trlt#yB3W}y-|G6mAoEa1ks}daz z79=xS)euf*XFRy)k14(02e z3Sx;Qd@dtg76CD_04w}9sB((l1Dzu&j3yL47>1OMC=!V;o?bT6x(EsL?T&G1sW?of zb!t!VjX&SiO3%u%rzk?>7Dn0E(_IL|Lb zS6>f4IW&T2A8<}#OdnZo3YC=$Y@`+7h*XNM?u#quq@d6yJoogP5?xeA!pH6PBRDz& zM|xD}_dxpuwlA?$2)X1zgh*5Cc>kD)NPRg3z7Z}|} zfz#)hb9R1=llaQrCS++nRV#kl<;)fpN2S>U5EgkX%dA9vKXLZjRocW_1-_Vvi`wa1 zopG4^y79errFusEf7HXOPo)o@=rRye4En6fvZhL)fY<~>Au1_w*uBHAA2@Vqwg8IU zc?K~iWpS!6fz$1ybc%KSS1de_<}xcOpVtM(`hVwWnskxDmb!esB3Lj?bgVHk3iHG% zI#}hf{$Mr2uK}-24`6x~1aCz$>evKDYBpd|p?Uf`XsU{DuJ$5Ghf>#A8b>;#BsPEq z3#VDo^}{GlC$`7J$M^B}ZhYl$_rEUfEuzfBT$99DJ-A>`?OB zM9MscAv)vF4j*HXdH^(OA`0R}evHPcv>)-r1Y5?i5mn#kf42rqeM)!5Q`T%PNK$D`QrI4E~hN zLFF8H=j=ba>6JQL0IG>Nt1h&_PZ_`68OD$PW_4pIs8Le90n|`b;ngLG;Nc z^!7yXpfgR*r|1&NA#=dl{0Qp)BtDFhsWn(DIx9FKN__H}}>I~4ukkcJoy#bu)8p2rK zBISd>pZgM%(`*{RnSqJJ^wVn@h3-vMjwO5oul5%rUDSZ)6^&S3o>Jo zUi`)WZ;*?=y91c%MpU)7!rrs9u@D}c02h_mIMsYU)%il|YD{DdVs-^%$1cm3aj()h zLoG#Bz^-g14eQYM^3mS#;EgjCH8tliUg`SP48CT(4@7Q9<&w_PNv_swDK%0_u&Wgd zLe_gckKS-vFG<#JC+S{h5!n@OiuWF>BHyYueC;=9ZeDJ0-za5sZ_sIZ4zt*d7ZRfJ zDAn$vk$7f;9Bv5Yn>cp=W0wshA+R9dgh9%Zb;VI?T#T;sgGucE%dnOxSrvcb&0~A7 zbaXsQ`-ES_+{WSFR==j)e&mT&-i1XrBMPVyW$9YRR6m?hls~qIm8)avlh=cp1CpwG zY5nhL#4%5sPXKppo!xBsj5kj#oRG7bU{dX;xr;O|&`98aw0{Ey9iQdZdq?U30000< KMNUMnLSTX*cu?>F literal 0 HcmV?d00001 diff --git a/apps/website/public/images/tags/dapps-20x20.png b/apps/website/public/images/tags/dapps-20x20.png new file mode 100644 index 0000000000000000000000000000000000000000..245b3cfa4d942e7cc69fb799534133d3ed23d166 GIT binary patch literal 1787 zcmVT!JB@*!kjW$$`RFfvg1h+sH8&MxLrkeDz(L^yM+9ry)fJRN) zsKp@Gtt4pOtD-22D2uEjBFLt<=S=wi3guVOho+O<{NHlFJ9E#RIdgxJ|JWR4;O2o5 ziV=Yk?da(E7S@96qV7>JfVBn`Ksd(t6DLmmdfvQwzA-T|GG@#e89H>RR903>RaKQd zdh|$gb93viT)FZm?)PB+?-;G}iRLnF*s!$q>({rGmzNtFc5FI3JB>Z#yEA9bn8k}1 z6Ok181PdBIe0cV)Ter;X*RM@SM~CUJy?OJ-JbwJx96Wf?V2$6fR)7r90!NP?omWs$ zU|zgtQ^)eD==#incn=k ze*L;xy?V7?CnqO&VeOa?Id@vLXi>$JCr=FF&&bFySy@@;)TvYE<;$0*q@+Z5W~G36 zj*E*k!NI|V*^C-BO7q^_+-yT<-MV$AwYAkWG&C3w50Ag#!`X7?*hc{Ih&bf<@#C^( z%N9Y-1s_UkYN{+)us{%;+`M^HoSmHofys;+Gi3bu@pA3jHMxKPzMMUKR)C!3<>l$O z7cX9v4I4HHg4U8H2+9dJu@e&#uDj=bFd3lMSpI>ETVAJOaUzZQHh~Gs`%SN(m0=1{@q5 z#Mjr?9RYCjrZ)%Lva_?xJv}`I;v)e80XF9}5K}-(nJ{63-XA`ESVoQX9$BNH-p>Qv|{deBBoU%?}?w%mv(^6K3S9$4jtW;igkA&J>Y+ zJ9qB1%^?c3uC6YDfQgHXiv|wZ1?4F~Se`w5R%Olas|vihcw1YWR99Eq9ugHUN=83; z@IcO;J10z4T3T9Bi4?g4f|l9~z<>Vy`EgE8PU7n7Dko2# zw7npdV7#KjJd&8`d_uCmYp5V~GHB2sCGLq6CnPE=O6NyJMCfy%(q=D!&rsLF5D?8- zU0t0%WH2NVZSdg15*QdL=o51K^l9mBW5{{=FF*tW9?!Tn(5Q0ld(FGV*{dUhooJ;d|9RX?%lfvh^g*V!YO7Plw(wf zId<%r3f9V%E19z|ENAvkME*;bEGgW+eY+p(Rd)?FR2K7|dcblc$t)v5S(ee!(Rv*c z64K*64Qk3$R1OIKmG#WoP5=>TE`DURx3@Q0D>G-#RQ)H3AgAht0g;5PZO%o|nkx2= z+qZ8E*3f{+0rCl|SO({b(hvLg(xpqCH*VZesM(h9+_|HN5q30oLTbHbSX5i^{{8z6 zf;5m@18x|w-T=ME*x1-Vz^PQM8!7#?gjus@8ECkH!kI&d4w>D%cdIkz7}BcOM~@!0 z1;GGO85+cn9Xm{7Vxn2KY883&-TNHbOMxdkor(vjTkL5P#ZF2$Q~ZA*uz;mTzq7 z20#)rAP!alPfk27K^u5BtjG61W5o8ykv({PASAzngt63o);!cr?%lg5I4ic}tY3m& z;fmJmKW*AHZ|)oc*8+u~@a>NnozhQxUw)i0lF>w>u)YfT>(2%| d+*|p-+26pCY|+8epX~qu002ovPDHLkV1f`7Rqg-) literal 0 HcmV?d00001 diff --git a/apps/website/public/images/tags/developers-20x20.png b/apps/website/public/images/tags/developers-20x20.png new file mode 100644 index 0000000000000000000000000000000000000000..216ba5908ed69e275928fb29a3afccbad95b8674 GIT binary patch literal 1810 zcmV+t2krQYP)1}AGRm4VZIec)!d9kkq8eT1TTCZfTg_( z`=1VOMzQ%pLWm56a7acyShLE4!z0H@!}nY7Y;JD;3vLC#!xcCrQ)m>iqI==YZu5z6ps~jI6Kg{lxaH9a*s_}|9l~?R4-iDa|Ww_t$N2%RH zO)D$O?t41uZ(i;p#(S1PCg+I2lG3S}!4EfWZ-}`34MRgi$Jr7g%tN0BxPAW$?0F{K z2FhZtv3h8MrG!+q+K6EwA(d%Lxl4CQM7uywuHKM=xIjI4@V*CXt$K5t!{In12!a#2 z0JIe2_eK?GJ*V%;UgtH2h(f1AD$3)@_1&`P{@Vx6QUIkv!;*5Afe*!zq7p_qFKX7> z3}0`&cdO4mWpKG%=h$#$J^-?x+i>93M3YW5-UT9)A#^?pS&ZJE-vd17KB7!HTe%oU*iC(H2o3*xt+Q0XB_ zNvIU1;M`&C+R;h(z49z6ZoMsQH=L3Z9cNNZqjAy}ICmmW>ZJ zR@>}uxBE7~-#^Bt1wR)ck3-W|GdBNE`zVBj59u_IczA+7v$rjA;83qZsMixsQC{Y0 zsWMN^Fes#i0Gg)Y)C$O1lPNgxGcgdk43km-qxk_8-@bTBp{Agz>%MP1H0|}hb(!ho z03X$XDlJxhAgI|>acpS2lac0#s3@WB|8 z%&?Rcpeocc04^Jrj4mYI@ZX`PwP~k$>C&2)SXcEm0b&voYVZ*F5F~zzZhyEYr81;t zhn#O@V;&xzh7e3(=7I--^OMY&2qDHJ{JxjLFraV(LO99(StulmRK`13AcSz7M8+KW zs>QhYxuOym(p8 z46Bp=C>0|~QdqkX;W2ME9~62`HZ6r%5|FupU*E#_q5+yzmXYP}zn*>C-o&!R zpa1=4H?DX$7l6D@d&S{(mD+|b^*A~Tqa^5X(ql6+B1CyQ+;`#!p?5~}mN-Vt8(9kQ zR7cc9Ct#2ZI4ITAgQs1aB9X}HtBcJ$1RJa+&v!JM9;ulgOy6mm-9-@*_}ws^Po2d# z*`*@`xzSd#<%3Xi@d|n9Zc(nQn^cz$9UB<^(UtMs)M7R5c>cQ$^oP59PA1{Cf{HZ$aHcx zq z(ZWt)WZyX)KNHFt58#UwBYm`5ho9jleG^{Qhb0ig!J`P|egFUf07*qoM6N<$f`QIj ALjV8( literal 0 HcmV?d00001 diff --git a/apps/website/public/images/tags/news-and-announcements-20x20.png b/apps/website/public/images/tags/news-and-announcements-20x20.png new file mode 100644 index 0000000000000000000000000000000000000000..1d87e2a915e2a994dee01680926480f3cb4c707c GIT binary patch literal 2216 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 ZuL1iTYAPqcYg_;T002ovPDHLkV1h9G=Y;?O literal 0 HcmV?d00001 diff --git a/apps/website/public/images/tags/product-20x20.png b/apps/website/public/images/tags/product-20x20.png new file mode 100644 index 0000000000000000000000000000000000000000..f59e74b66a3c3bec658098fa6710574a3ecec959 GIT binary patch literal 2060 zcmV+n2=n)eP)s5MPT zu@w|MmRxBirb?pGD9FtK3UXPwF0kyf3+w{RUcR^I+iiZ-i3t2jf8@-Z+5Nuneb0H` z=iFZ42l<{wFoiWr(#Pa-`Rd@{;8_ZVB1R&Ss7S>e$H8W^4QsX9R+Gup?r=En)7sml zO{Ak!u>D8?g4t@-xjnzhNMEaFP%$&4dJTlk>E7xg1q+&s5wSP)p229bD{$#nJ+7Bm zbT>BMEw@^2AJD>2NgXo<5S|(?>?&Tt2|R@WV}N!XP)GnTG0@Ndr(XeCQPMjIgfZa|GhylGGD7y-LavE4<2Fr+qKu(N| zQuG6fkuW(K3yDVI?C0@j-k<*1+uQp(Z(sBX|4(e+{@m_$YtEzK^%UraNARP?Bb-bM z!N>?8p;HRU!UzHJ_68Cj2QrA{VHE@?s1_PEKvIzVm|bH)u)~PO_I3#3pGmw_UQ2M% zIVl4wm8zh+@{O$#!LOmXSd7Ry4rr**ZkGhYyCE7Lat>ynK`eZs4asZVj)-lD2-LWh z*eC(c9|v9w0b(dL4$6;1_hsl-&d24-x^l)?;$#fWOG$a=QW{NcC}OA?&;+Zmv4zzLMBNYEI%I+;eg2mRDSLai^dmHA3GL4tH**k z4ncwL&3*lVzn>3mjs)lj{n6a&kJdIX)Rtbw9AhIA6l3VH07qL;*=ojS+S2i02(n*# zF*(#~*@-W|3dF$OM3@cL(DqVui33xIP_Ww5qf#!Bh|X#_k~26om4mQ{{#25oqU{CxPW!~X%0mX@}A?Nis`n6M)_h-$v` z7NVA1z=jkGsnfk?eAEM~x&5wMpA+dWIWNUh?D(}E$%FaWONrHn8QMYZyZe53FaJy>z$q2tD%S9b%6~~4jnoGuH_D#W*SnK zp&e{%w3s{hV>nVm!TCy1NA^yUKKT9sZa`hF zV0(6f?OqCYZ4KDr{owd_I_-9vebAEbAf<*pr6K2%Z~MTrnd#B<4(IEz{+F@P>0G7i zQhu5ZP|4n)s`=eUI5S(oUZl8w#Is?5fFDFM8RJ9pG1>VuX*FEKcp3o0!^7Xwne-@8 zWT9e~9|rX9QR_wBtC>da(LCVGT|kx}MEmbRu<#;kkF_AjKLF;M8Ui2{fv#%an1S#B z7G!2_c)U>=iwfT%B#T;+zKN2KQsqNB)1E9Kxq}7}v5BXzWYaH$Q z7ye7}Urr+bpQY$97-|IZ@d;|oMAolgUuD#-W-n(8Swl6LRs;6)G_X|xU@A|Ld;FGE z`mp^g5^=2ko|5I|?c?uza!gaiQBhIzeH0(#@IlTsbh4fYN=xBzFr26F{H>*bQUhXY zd=4|zY7sx)s0+BR { order: 'published_at DESC', limit, page, - ...(tag && { filter: `tag:${tag}` }), - filter: 'visibility:public', + ...(tag + ? { filter: `tag:${tag}+visibility:public` } + : { filter: 'visibility:public' }), }) return { posts: [...response], meta: response.meta } diff --git a/apps/website/src/pages/blog/index.tsx b/apps/website/src/pages/blog/index.tsx index aa3ce4c9..8e62af68 100644 --- a/apps/website/src/pages/blog/index.tsx +++ b/apps/website/src/pages/blog/index.tsx @@ -2,34 +2,135 @@ import { useMemo } from 'react' import { Avatar, Button, Shadow, Tag, Text } from '@status-im/components' import { useInfiniteQuery } from '@tanstack/react-query' +import Image from 'next/image' +import { useRouter } from 'next/router' -// import Image from 'next/image' import { formatDate } from '@/components/chart/utils/format-time' import { Link } from '@/components/link' import { AppLayout } from '@/layouts/app-layout' import { getPosts } from '@/lib/ghost' import type { PostOrPage, PostsOrPages } from '@tryghost/content-api' -import type { GetStaticProps, InferGetStaticPropsType, Page } from 'next' +import type { + GetServerSideProps, + InferGetServerSidePropsType, + Page, +} from 'next' -export const getStaticProps: GetStaticProps<{ +const FILTER_TAGS = [ + { + id: '63b48c62fc2070000104be8c', + slug: 'news-and-announcements', + name: 'News & Announcements', + icon: ( + Latest news on Products built by Status Network + ), + }, + { + id: '63b48c62fc2070000104bea2', + slug: 'product', + name: 'Product', + icon: ( + Latest news on Products built by Status Network + ), + }, + { + id: '63b48c62fc2070000104be61', + slug: 'developers', + name: 'Developers', + icon: ( + Latest news on Products built by Status Network + ), + }, + { + id: '63b48c62fc2070000104bea4', + slug: 'privacy-security', + name: 'Privacy & Security', + icon: ( + Latest news on Products built by Status Network + ), + }, + { + id: '63b48c62fc2070000104be60', + slug: 'dapps', + name: 'Dapps', + icon: ( + Latest news on Products built by Status Network + ), + }, + { + id: '63b48c62fc2070000104be64', + slug: 'community', + name: 'Community', + icon: ( + Latest news on Products built by Status Network + ), + }, +] + +export const getServerSideProps: GetServerSideProps<{ posts: PostOrPage[] meta: PostsOrPages['meta'] -}> = async () => { - const { posts, meta } = await getPosts() + tag?: string +}> = async ({ query }) => { + const tag = query?.tag as string | undefined + + const { posts, meta } = await getPosts({ tag }) return { props: { posts, meta, + ...(tag && { tag }), }, } } -type Props = InferGetStaticPropsType +type BlogPageProps = InferGetServerSidePropsType -const BlogPage: Page = props => { - const { posts, meta } = props +const BlogPage: Page = ({ + posts: initialPosts, + meta, + tag: initialTag, +}) => { + const router = useRouter() + const tag = (router.query.tag as string | undefined) ?? initialTag const { data, @@ -41,40 +142,80 @@ const BlogPage: Page = props => { // status, // isFetched, } = useInfiniteQuery({ - queryKey: ['posts'], - queryFn: async ({ pageParam: page }) => await getPosts({ page }), + refetchOnWindowFocus: false, + queryKey: ['posts', tag], + queryFn: async ({ pageParam: page, queryKey }) => { + const [, tag] = queryKey + + const response = await getPosts({ page, tag }) + + return response + }, getNextPageParam: ({ meta }) => meta.pagination.next, - initialData: { pages: [{ posts, meta }], pageParams: [1] }, - staleTime: Infinity, + initialData: { + pages: [ + { + posts: initialPosts, + meta, + }, + ], + pageParams: [1], + }, }) const { highlightedPost, visiblePosts } = useMemo(() => { - const [highlightedPost, ...posts] = data!.pages.flatMap(page => page.posts) - const maxLength = posts.length - (posts.length % 3) // the number of posts should be divisible by 3 - const visiblePosts = posts.slice(0, maxLength) + const [highlightedPost, ...restPosts] = + data?.pages.flatMap(page => page.posts) ?? [] + + const maxLength = restPosts.length - (restPosts.length % 3) // the number of posts should be divisible by 3 + const visiblePosts = restPosts.slice(0, maxLength) + return { highlightedPost, visiblePosts } }, [data]) + // loading/skeleton if not complete + return (
-
+
-
+

Blog.

Long form articles, thoughts, and ideas.
+
+ {FILTER_TAGS.map(filterTag => ( +
+ + + {filterTag.icon} + {filterTag.name} + + +
+ ))} +
+
- + {highlightedPost && ( + + )}
- {visiblePosts.map(post => ( - - ))} + {visiblePosts && + visiblePosts.map(post => ( + + ))}
diff --git a/apps/website/src/styles/global.css b/apps/website/src/styles/global.css index 58271d5b..302e972d 100644 --- a/apps/website/src/styles/global.css +++ b/apps/website/src/styles/global.css @@ -14,6 +14,17 @@ } } +@layer utilities { + .no-scrollbar::-webkit-scrollbar { + display: none; + } + + .no-scrollbar { + -ms-overflow-style: none; + scrollbar-width: none; + } +} + /* 1. Use a more-intuitive box-sizing model. */