(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[405],{6562:function(e,t,r){(window.__NEXT_P=window.__NEXT_P||[]).push(["/",function(){return r(7919)}])},7141:function(e,t,r){"use strict";r.d(t,{y:function(){return CoverImage}});var s=r(216),l=r(3292),a=r.n(l),n=r(4068),i=r.n(n);let CoverImage=e=>{let{title:t,src:r,slug:l,priority:n=!1}=e,o=(0,s.jsx)("div",{className:"relative pt-[52.5%]",children:(0,s.jsx)(a(),{src:r,alt:"Cover Image for ".concat(t),className:"w-full rounded-md border object-cover hover:opacity-90 dark:border-neutral-800",fill:!0,unoptimized:!0,priority:n})});return(0,s.jsx)("div",{className:"sm:mx-0",children:l?(0,s.jsx)(i(),{href:"/".concat(l),"aria-label":t,children:o}):o})}},9259:function(e,t,r){"use strict";r.d(t,{C:function(){return DateFormatter}});var s=r(216),l=r(9276),a=r(9611);let DateFormatter=e=>{let{dateString:t}=e;if(!t)return(0,s.jsx)(s.Fragment,{});let r=(0,a.Z)(t);return(0,s.jsx)(s.Fragment,{children:(0,s.jsx)("time",{dateTime:t,children:(0,l.Z)(r,"LLL d, yyyy")})})}},6218:function(e,t,r){"use strict";r.d(t,{B:function(){return MorePosts}});var s=r(216),l=r(5201),a=r(4068),n=r.n(a),i=r(8684),o=r(7141),c=r(9259);let PostPreview=e=>{let{title:t,coverImage:r,date:a,excerpt:d,slug:u}=e,x="/".concat(u);return(0,s.jsxs)("div",{className:"grid grid-cols-1 gap-5",children:[(0,s.jsx)("div",{className:"col-span-1",children:(0,s.jsx)(o.y,{slug:u,title:t,src:(0,l.t)(r,{w:400,h:210,c:"thumb"},i.G)})}),(0,s.jsxs)("div",{className:"col-span-1 flex flex-col gap-2",children:[(0,s.jsx)("h1",{className:"text-lg font-semibold leading-tight text-slate-800 dark:text-neutral-50",children:(0,s.jsx)(n(),{href:x,className:"hover:text-primary-600 dark:hover:text-primary-500 hover:underline",children:t})}),(0,s.jsx)(n(),{href:x,children:(0,s.jsx)("p",{className:"text-md leading-snug text-slate-500 dark:text-neutral-400",children:d.length>140?d.substring(0,140)+"…":d})}),(0,s.jsx)("div",{className:"text-sm font-semibold text-slate-500 dark:text-neutral-300",children:(0,s.jsx)(n(),{href:x,children:(0,s.jsx)(c.C,{dateString:a})})})]})]})},MorePosts=e=>{let{posts:t,context:r}=e;return(0,s.jsxs)("section",{className:"mb-10 flex flex-col items-start gap-10",children:["home"===r&&(0,s.jsx)("h2",{className:"text-xl font-bold leading-tight tracking-tight text-slate-900 dark:text-neutral-50 lg:text-3xl",children:"More Posts"}),(0,s.jsx)("div",{className:"grid items-start gap-5 md:grid-cols-2 xl:grid-cols-3",children:t.map(e=>{var t;return(0,s.jsx)(PostPreview,{title:e.title,coverImage:null===(t=e.coverImage)||void 0===t?void 0:t.url,date:e.publishedAt,author:{name:e.author.name,profilePicture:e.author.profilePicture},slug:e.slug,excerpt:e.brief},e.slug)})})]})}},7919:function(e,t,r){"use strict";r.r(t),r.d(t,{__N_SSG:function(){return F},default:function(){return Index}});var s=r(216);let addPublicationJsonLd=e=>{var t;let r={"@context":"https://schema.org/","@type":"Blog","@id":e.url,mainEntityOfPage:e.url,name:e.title,description:e.descriptionSEO,publisher:{"@type":e.isTeam?"Organization":"Person","@id":e.url,name:e.title,image:{"@type":"ImageObject",url:null===(t=e.preferences)||void 0===t?void 0:t.logo}}};return r};var l=r(8529),a=r(890),n=r(9845),i=r.n(n),o=r(7138),c=r.n(o),d=r(9405),u=r(8065),x=r(3830),g=r(9872),m=r(7026),h=r(5945),p=r(8169),f=r(5201),j=r(4068),v=r.n(j),b=r(8684),N=r(7141),y=r(9259);let HeroPost=e=>{let{title:t,coverImage:r,date:l,excerpt:a,slug:n}=e,i="/".concat(n);return(0,s.jsxs)("section",{className:"grid grid-cols-1 gap-5",children:[(0,s.jsx)("div",{className:"col-span-1",children:(0,s.jsx)(N.y,{title:t,src:(0,f.t)(r,{w:1600,h:840,c:"thumb"})||b.G,slug:n,priority:!0})}),(0,s.jsxs)("div",{className:"col-span-1 flex flex-col gap-2",children:[(0,s.jsx)("h1",{className:"text-xl font-bold leading-snug text-slate-800 dark:text-neutral-50 lg:text-3xl",children:(0,s.jsx)(v(),{href:i,className:"hover:text-primary-600 dark:hover:text-primary-500 leading-tight tracking-tight hover:underline",children:t})}),(0,s.jsx)(v(),{href:i,children:(0,s.jsx)("p",{className:"text-md leading-snug text-slate-500 dark:text-neutral-400",children:a})}),(0,s.jsx)("div",{className:"text-sm font-semibold text-slate-500 dark:text-neutral-300",children:(0,s.jsx)(v(),{href:i,children:(0,s.jsx)(y.C,{dateString:l})})})]})]})};var k=r(4837),w=r(1414),P=r(6218),S=r(7051);let Search=()=>{let{publication:e}=(0,m.b)(),t=(0,d.useRef)(null),r=(0,d.useRef)(null),[l,n]=(0,d.useState)(""),[i,o]=(0,d.useState)([]),[c,u]=(0,d.useState)(!1),resetInput=()=>{t.current&&(t.current.value="",n(""))},search=async t=>{if(r.current&&clearTimeout(r.current),!t){o([]),u(!1);return}r.current=setTimeout(async()=>{u(!0);let r=await (0,a.ZP)("https://gql.hashnode.com",S._3,{first:5,filter:{query:t,publicationId:e.id}}),s=r.searchPostsOfPublication.edges.map(e=>e.node);o(s),u(!1)},500)};(0,d.useEffect)(()=>{search(l)},[l]);let x=i.map(e=>{var t;let r="/".concat(e.slug);return(0,s.jsxs)(v(),{href:r,className:"flex flex-row items-center gap-5 px-4 py-2 hover:bg-slate-50 focus:outline-1 dark:hover:bg-neutral-800",children:[(0,s.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,s.jsx)("strong",{className:"text-base",children:e.title}),(0,s.jsx)("span",{className:"text-slate-600 dark:text-neutral-300",children:e.brief.length>140?e.brief.substring(0,140)+"…":e.brief})]}),(0,s.jsx)("div",{className:"w-56",children:(0,s.jsx)(N.y,{title:e.title,src:(0,f.t)(null===(t=e.coverImage)||void 0===t?void 0:t.url,{w:400,h:210,c:"thumb"},b.G)})})]},e.id)});return(0,s.jsxs)("div",{className:"relative col-span-1",children:[(0,s.jsx)("input",{type:"text",ref:t,onKeyUp:e=>{"Escape"===e.key&&resetInput()},onChange:()=>{var e;n((null===(e=t.current)||void 0===e?void 0:e.value)||"")},placeholder:"Search blog posts…",className:"w-full rounded-full border border-slate-200 bg-slate-50 px-4 py-2 text-base focus:bg-transparent dark:border-neutral-800 dark:bg-neutral-800 dark:text-neutral-50 dark:placeholder:text-neutral-400 dark:hover:bg-neutral-950"}),l&&(0,s.jsxs)(s.Fragment,{children:[c&&(0,s.jsxs)("div",{className:"top-100 absolute left-0 z-10 mt-1 flex w-full flex-col items-stretch overflow-hidden rounded-lg border bg-white p-1 text-left text-slate-900 shadow-2xl dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-50",children:[(0,s.jsxs)("div",{className:"flex animate-pulse flex-col gap-1 p-4",children:[(0,s.jsx)("div",{className:"h-8 w-full rounded-lg bg-slate-100 dark:bg-neutral-800"}),(0,s.jsx)("div",{className:"h-4 w-full rounded-lg bg-slate-100 dark:bg-neutral-800"}),(0,s.jsx)("div",{className:"h-4 w-2/3 rounded-lg bg-slate-100 dark:bg-neutral-800"})]}),(0,s.jsxs)("div",{className:"flex animate-pulse flex-col gap-1 p-4",children:[(0,s.jsx)("div",{className:"h-8 w-full rounded-lg bg-slate-100 dark:bg-neutral-800"}),(0,s.jsx)("div",{className:"h-4 w-full rounded-lg bg-slate-100 dark:bg-neutral-800"}),(0,s.jsx)("div",{className:"h-4 w-2/3 rounded-lg bg-slate-100 dark:bg-neutral-800"})]}),(0,s.jsxs)("div",{className:"flex animate-pulse flex-col gap-1 p-4",children:[(0,s.jsx)("div",{className:"h-8 w-full rounded-lg bg-slate-100 dark:bg-neutral-800"}),(0,s.jsx)("div",{className:"h-4 w-full rounded-lg bg-slate-100 dark:bg-neutral-800"}),(0,s.jsx)("div",{className:"h-4 w-2/3 rounded-lg bg-slate-100 dark:bg-neutral-800"})]})]}),i.length>0&&!c&&(0,s.jsxs)("div",{className:"top-100 absolute left-0 z-10 mt-1 flex w-full flex-col items-stretch overflow-hidden rounded-lg border bg-white p-1 text-left text-slate-900 shadow-2xl dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-50",children:[(0,s.jsxs)("h3",{className:"px-4 py-2 font-medium text-slate-500 dark:text-neutral-400",children:["Found ",i.length," results"]}),(0,s.jsx)("hr",{className:"dark:border-neutral-800"}),x]})]})]})};var C=r(3332);let Navbar=()=>(0,s.jsxs)("div",{className:"grid grid-cols-1 items-center gap-5 pt-5 text-sm md:grid-cols-2",children:[(0,s.jsx)(Search,{}),(0,s.jsx)(C.W,{})]}),SecondaryPost=e=>{let{title:t,coverImage:r,date:l,excerpt:a,slug:n}=e,i="/".concat(n);return(0,s.jsxs)("section",{className:"grid items-start gap-5 md:grid-cols-2",children:[(0,s.jsx)("div",{className:"col-span-1",children:(0,s.jsx)(N.y,{title:t,src:(0,f.t)(r,{w:1600,h:840,c:"thumb"},b.G),slug:n})}),(0,s.jsxs)("div",{className:"col-span-1 flex flex-col gap-2",children:[(0,s.jsx)("h1",{className:"text-lg font-semibold leading-tight text-slate-800 dark:text-neutral-50",children:(0,s.jsx)(v(),{href:i,className:"hover:text-primary-600 dark:hover:text-primary-500 hover:underline",children:t})}),(0,s.jsx)(v(),{href:i,children:(0,s.jsx)("p",{className:"text-md leading-snug text-slate-500 dark:text-neutral-400",children:a.length>100?a.substring(0,100)+"…":a})}),(0,s.jsx)("div",{className:"text-sm font-semibold text-slate-500 dark:text-neutral-300",children:(0,s.jsx)(v(),{href:i,children:(0,s.jsx)(y.C,{dateString:l})})})]})]})},I=i()(()=>r.e(337).then(r.bind(r,9593)).then(e=>e.SubscribeForm),{loadableGenerated:{webpack:()=>[9593]}});var F=!0;function Index(e){var t;let{publication:r,initialAllPosts:n,initialPageInfo:i}=e,[o,f]=(0,d.useState)(n),[j,v]=(0,d.useState)(i),[N,y]=(0,d.useState)(!1),loadMore=async()=>{let e=await (0,a.ZP)("https://gql.hashnode.com",S.hb,{first:10,host:"quicksilicon-team.hashnode.dev",after:j.endCursor});if(!e.publication)return;let t=e.publication.posts.edges.map(e=>e.node);f([...o,...t]),v(e.publication.posts.pageInfo),y(!0)},C=o[0],F=o.slice(1,4).map(e=>{var t;return(0,s.jsx)(SecondaryPost,{title:e.title,coverImage:(null===(t=e.coverImage)||void 0===t?void 0:t.url)||b.G,date:e.publishedAt,slug:e.slug,excerpt:e.brief},e.id)}),_=o.slice(4);return(0,s.jsx)(m.w,{publication:r,children:(0,s.jsxs)(w.A,{children:[(0,s.jsxs)(c(),{children:[(0,s.jsx)("title",{children:r.displayTitle||r.title||"Hashnode Blog Starter Kit"}),(0,s.jsx)("meta",{name:"description",content:r.descriptionSEO||r.title||"".concat(r.author.name,"'s Blog")}),(0,s.jsx)("meta",{property:"twitter:card",content:"summary_large_image"}),(0,s.jsx)("meta",{property:"twitter:title",content:r.displayTitle||r.title||"Hashnode Blog Starter Kit"}),(0,s.jsx)("meta",{property:"twitter:description",content:r.descriptionSEO||r.title||"".concat(r.author.name,"'s Blog")}),(0,s.jsx)("meta",{property:"og:image",content:r.ogMetaData.image||(0,l.t)(r)}),(0,s.jsx)("meta",{property:"twitter:image",content:r.ogMetaData.image||(0,l.t)(r)}),(0,s.jsx)("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:JSON.stringify(addPublicationJsonLd(r))}})]}),(0,s.jsx)(p.h,{}),(0,s.jsxs)(g.W,{className:"flex flex-col items-stretch gap-10 px-5 pb-10",children:[(0,s.jsx)(Navbar,{}),0===o.length&&(0,s.jsx)("div",{className:"grid grid-cols-1 py-20 lg:grid-cols-3",children:(0,s.jsxs)("div",{className:"col-span-1 flex flex-col items-center gap-5 text-center text-slate-700 dark:text-neutral-400 lg:col-start-2",children:[(0,s.jsx)("div",{className:"w-20",children:(0,s.jsx)(k.Ii,{clasName:"stroke-current"})}),(0,s.jsx)("p",{className:"text-xl font-semibold ",children:"Hang tight! We're drafting the first article."})]})}),(0,s.jsxs)("div",{className:"grid items-start gap-6 xl:grid-cols-2",children:[(0,s.jsx)("div",{className:"col-span-1",children:C&&(0,s.jsx)(HeroPost,{title:C.title,coverImage:(null===(t=C.coverImage)||void 0===t?void 0:t.url)||b.G,date:C.publishedAt,slug:C.slug,excerpt:C.brief})}),(0,s.jsx)("div",{className:"col-span-1 flex flex-col gap-6",children:F})]}),o.length>0&&(0,s.jsx)("div",{className:"bg-primary-50 grid grid-cols-4 rounded-lg px-5 py-5 dark:bg-neutral-900 md:py-10",children:(0,s.jsxs)("div",{className:"col-span-full md:col-span-2 md:col-start-2",children:[(0,s.jsx)("h2",{className:"text-primary-600 dark:text-primary-500 mb-5 text-center text-lg font-semibold",children:"Subscribe to our newsletter for updates and changelog."}),(0,s.jsx)(I,{})]})}),_.length>0&&(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(P.B,{context:"home",posts:_}),!N&&j.hasNextPage&&j.endCursor&&(0,s.jsx)("div",{className:"flex w-full flex-row items-center justify-center",children:(0,s.jsx)(x.z,{onClick:loadMore,type:"outline",icon:(0,s.jsx)(k.Ug,{className:"h-5 w-5 stroke-current"}),label:"Load more posts"})}),N&&j.hasNextPage&&j.endCursor&&(0,s.jsx)(u.h,{onEnter:loadMore,bottomOffset:"10%"})]})]}),(0,s.jsx)(h.$,{})]})})}},8684:function(e,t,r){"use strict";r.d(t,{G:function(){return l},t:function(){return s}});let s="https://cdn.hashnode.com/res/hashnode/image/upload/v1659089761812/fsOct5gl6.png",l="https://cdn.hashnode.com/res/hashnode/image/upload/v1683525272978/MB5H_kgOC.png?auto=format"},8529:function(e,t,r){"use strict";r.d(t,{E:function(){return getAutogeneratedPostOG},t:function(){return getAutogeneratedPublicationOG}});var s=r(917);let stripEmojis=e=>e.replace(/([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,"").replace(/\s+/g," ").trim(),getAutogeneratedPostOG=(e,t)=>{let{author:r}=t,{title:l,readTimeInMinutes:a,reactionCount:n=0,responseCount:i=0}=e,o="".concat(t.url,"/api/og/post"),c={};try{c.title=encodeURIComponent(stripEmojis(l)),c.author=encodeURIComponent(r.name),c.domain=new URL(t.url).hostname,r.profilePicture&&(c.photo=r.profilePicture),a&&(c.readTime=a),n>0&&(c.reactions=n),i>0&&(c.comments=i)}catch(e){console.log(e)}return"".concat(o,"?og=").concat(s.DS.encode(JSON.stringify(c)))},getAutogeneratedPublicationOG=e=>{let{title:t,isTeam:r,favicon:l,author:a,followersCount:n,descriptionSEO:i}=e,o=e.posts.totalDocuments,c=e.preferences.logo,d="".concat(e.url,"/api/og/home"),u={};try{u.title=t?encodeURIComponent(stripEmojis(t)):"".concat(a.name,"'s ").concat(r?"team":""," blog"),u.domain=new URL(e.url).hostname,u.followers=r?n:a.followersCount,a.profilePicture&&!r&&(u.photo=a.profilePicture),c&&(u.logo=c),r&&(u.isTeam=r),i&&(u.meta=encodeURIComponent(stripEmojis(i))),l&&(u.favicon=l),o&&o>0&&(u.articles=o)}catch(e){console.log(e)}return"".concat(d,"?og=").concat(s.DS.encode(JSON.stringify(u)))}}},function(e){e.O(0,[43,283,304,890,339,65,500,51,774,888,179],function(){return e(e.s=6562)}),_N_E=e.O()}]);