3:I[9275,[],""] 5:I[1343,[],""] 6:I[9593,["830","static/chunks/830-627a194b447259d6.js","33","static/chunks/33-a6c7b783ac0dfb99.js","223","static/chunks/223-249ea663d267e0fa.js","309","static/chunks/309-78cff6d95ccd21ff.js","185","static/chunks/app/layout-4882b23ddbd2754a.js"],""] 7:I[2650,["830","static/chunks/830-627a194b447259d6.js","33","static/chunks/33-a6c7b783ac0dfb99.js","223","static/chunks/223-249ea663d267e0fa.js","309","static/chunks/309-78cff6d95ccd21ff.js","185","static/chunks/app/layout-4882b23ddbd2754a.js"],"Providers"] 8:I[946,["830","static/chunks/830-627a194b447259d6.js","33","static/chunks/33-a6c7b783ac0dfb99.js","223","static/chunks/223-249ea663d267e0fa.js","309","static/chunks/309-78cff6d95ccd21ff.js","185","static/chunks/app/layout-4882b23ddbd2754a.js"],"default"] 9:I[7561,["830","static/chunks/830-627a194b447259d6.js","33","static/chunks/33-a6c7b783ac0dfb99.js","223","static/chunks/223-249ea663d267e0fa.js","309","static/chunks/309-78cff6d95ccd21ff.js","185","static/chunks/app/layout-4882b23ddbd2754a.js"],"AnimationProvider"] a:I[9966,["830","static/chunks/830-627a194b447259d6.js","33","static/chunks/33-a6c7b783ac0dfb99.js","223","static/chunks/223-249ea663d267e0fa.js","309","static/chunks/309-78cff6d95ccd21ff.js","185","static/chunks/app/layout-4882b23ddbd2754a.js"],"default"] 4:["slug","adding-opengraph-image-with-output-static","c"] 0:["8po_tXwRw-5EfRkkPxZ0b",[[["",{"children":["posts",{"children":[["slug","adding-opengraph-image-with-output-static","c"],{"children":["__PAGE__?{\"slug\":[\"adding-opengraph-image-with-output-static\"]}",{}]}]}]},"$undefined","$undefined",true],["",{"children":["posts",{"children":[["slug","adding-opengraph-image-with-output-static","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","posts","children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","posts","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]},[["$","html",null,{"lang":"en","className":"__className_3297a9","children":[["$","head",null,{"children":[["$","meta",null,{"name":"darkreader-lock"}],["$","meta",null,{"name":"google-site-verification","content":"mL-IBObjCmbnzlVygjodNo_pc2LHtldJAFFXV3e7jBc"}]]}],["$","body",null,{"className":"flex min-h-screen flex-col","children":[["$","$L6",null,{"color":"#fef9c3","showSpinner":false}],["$","$L7",null,{"attribute":"class","defaultTheme":"system","enableColorScheme":true,"disableTransitionOnChange":false,"enableSystem":true,"children":[["$","$L8",null,{}],["$","main",null,{"className":"container flex-1","children":["$","$L9",null,{"children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}]}]}],["$","$La",null,{}]]}]]}]]}],null],null],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/70f30e3e1d3bc017.css","precedence":"next","crossOrigin":"$undefined"}]],"$Lb"]]]] c:I[231,["830","static/chunks/830-627a194b447259d6.js","173","static/chunks/173-066a7869efd98a83.js","49","static/chunks/app/posts/%5B...slug%5D/page-94e6fa4645197227.js"],""] d:I[4140,["830","static/chunks/830-627a194b447259d6.js","173","static/chunks/173-066a7869efd98a83.js","49","static/chunks/app/posts/%5B...slug%5D/page-94e6fa4645197227.js"],"BlogTableOfContents"] 2:["$","div",null,{"className":"lg:grid lg:gap-10 lg:grid-cols-[1fr_300px]","children":[["$","div",null,{"className":"space-y-2","children":[["$","h1",null,{"className":"max-w-none text-4xl font-bold","children":"Adding opengraph image with output: static"}],["$","div",null,{"className":"space-y-3","children":[["$","div",null,{"className":"flex flex-row space-x-2","children":[["$","$Lc","development",{"href":"/tags/development","children":["$","div",null,{"className":"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground hover:bg-primary/80","children":"development"}]}],["$","$Lc","seo",{"href":"/tags/seo","children":["$","div",null,{"className":"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground hover:bg-primary/80","children":"seo"}]}],["$","$Lc","nextjs",{"href":"/tags/nextjs","children":["$","div",null,{"className":"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground hover:bg-primary/80","children":"nextjs"}]}]]}],["$","time",null,{"className":"my-4 flex flex-row flex-wrap gap-x-4 gap-y-1 text-sm text-zinc-400 sm:flex-row sm:items-center sm:space-x-0","dateTime":"2024-01-28T00:00:00.000Z","children":[["$","div",null,{"className":"flex flex-row items-center space-x-1","children":[["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":16,"height":16,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"stroke-muted-foreground","children":[["$","rect","eu3xkr",{"width":"18","height":"18","x":"3","y":"4","rx":"2","ry":"2"}],["$","line","m3sa8f",{"x1":"16","x2":"16","y1":"2","y2":"6"}],["$","line","18kwsl",{"x1":"8","x2":"8","y1":"2","y2":"6"}],["$","line","xt86sb",{"x1":"3","x2":"21","y1":"10","y2":"10"}],"$undefined"]}]," ",["$","p",null,{"className":"text-muted-foreground","children":"January 28, 2024"}]]}],"$undefined",["$","div",null,{"className":"flex flex-row items-center space-x-1","children":[["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":16,"height":16,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"stroke-muted-foreground","children":[["$","circle","1mglay",{"cx":"12","cy":"12","r":"10"}],["$","polyline","68esgv",{"points":"12 6 12 12 16 14"}],"$undefined"]}],["$","p",null,{"className":"text-muted-foreground","children":[4," min read (",970," words)"]}]]}]]}]]}],["$","article",null,{"className":"prose prose-zinc max-w-none dark:prose-invert w-full","children":["$","div",null,{"className":"mdx","children":[["$","p",null,{"className":"leading-7 [&:not(:first-child)]:mt-6","children":["If you've been following this website for a while (or, most likely, I've sent you this blog and opengraph image before), you might've seen that I've added opengraph images. For example, this is the opengraph image for my previous post.\n",["$","div",null,{"className":"flex flex-col items-center mb-5","children":[["$","img",null,{"className":"rounded-md border mb-0","alt":"An opengraph image from my previous post","src":"/posts/adding-fancy-animations/og-normal.png"}],["$","p",null,{"className":"font-light","children":"An opengraph image from my previous post"}]]}],"\nAs you might've guessed, I need to generate this image for each post. This is a trivial task, right? Well, kinda. It is really easy to do if you don't export your site but instead run it on, say, vercel. But if you do, things get strange really, really quick."]}],"\n",["$","h1",null,{"className":"group group mt-2 scroll-m-20 text-3xl font-bold tracking-tight","id":"googling","children":["$","a",null,{"className":"font-medium underline underline-offset-4 transition-all duration-300 after:opacity-0 hover:after:opacity-100 decoration-muted-foreground/30 hover:decoration-foreground subheading-anchor","aria-label":"Link to section","href":"#googling","children":"Googling"}]}],"\n",["$","p",null,{"className":"leading-7 [&:not(:first-child)]:mt-6","children":["Well, as a good developer you firstly google your issue. You find several answers, including one on the ",["$","a",null,{"className":"font-medium underline underline-offset-4 transition-all duration-300 after:opacity-0 hover:after:opacity-100 decoration-muted-foreground/30 hover:decoration-foreground","href":"https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image#generate-images-using-code-js-ts-tsx","children":"nextjs page itself"}],". Task accomplished, right? No. A ",["$","strong",null,{"children":"big"}]," No.",["$","br",null,{}],"\n","You see, this post assumes you host your site, not statically export it. There was a ",["$","a",null,{"className":"font-medium underline underline-offset-4 transition-all duration-300 after:opacity-0 hover:after:opacity-100 decoration-muted-foreground/30 hover:decoration-foreground","href":"https://github.com/vercel/next.js/discussions/56829","children":"github issue"}]," regarding this, but it was unanswered. After that I've found a reddit post with quite not the thing i needed, but the source of ",["$","a",null,{"className":"font-medium underline underline-offset-4 transition-all duration-300 after:opacity-0 hover:after:opacity-100 decoration-muted-foreground/30 hover:decoration-foreground","href":"https://www.npmjs.com/package/next-static-og-images","children":"this package"}]," from the post got me an idea.",["$","br",null,{}],"\n","My idea was to generate images using an api route and then screenshot them with playwright. The same idea is used in ",["$","a",null,{"className":"font-medium underline underline-offset-4 transition-all duration-300 after:opacity-0 hover:after:opacity-100 decoration-muted-foreground/30 hover:decoration-foreground","href":"https://github.com/MaximeHeckel/blog.maximeheckel.com/blob/main/scripts/generate-opengraph-images.js","children":"Maxime Heckel's blog"}],", which would probably work, but i use NixOS, a declarative linux distro. The Playwright package wasn't working correctly. Not only this, but taking screenshots of pages meant that it would slow down the build process ",["$","em",null,{"children":"drastically"}],". So, i did more googling. And found a ",["$","a",null,{"className":"font-medium underline underline-offset-4 transition-all duration-300 after:opacity-0 hover:after:opacity-100 decoration-muted-foreground/30 hover:decoration-foreground","href":"https://github.com/vercel/next.js/issues/51147","children":"github issue"}],". This was exactly what i needed"]}],"\n",["$","h2",null,{"className":"mt-10 scroll-m-20 border-b pb-1 text-2xl font-semibold tracking-tight first:mt-0","id":"what-the-issue-suggests","children":["$","a",null,{"className":"font-medium underline underline-offset-4 transition-all duration-300 after:opacity-0 hover:after:opacity-100 decoration-muted-foreground/30 hover:decoration-foreground subheading-anchor","aria-label":"Link to section","href":"#what-the-issue-suggests","children":"What the issue suggests"}]}],"\n",["$","p",null,{"className":"leading-7 [&:not(:first-child)]:mt-6","children":["The issue mentions that you can do ",["$","code",null,{"className":"relative w-full overflow-x-auto rounded border px-[0.3rem] py-[0.2rem] font-mono text-sm border-none","children":"[...slug]/og.png"}]," route with ",["$","code",null,{"className":"relative w-full overflow-x-auto rounded border px-[0.3rem] py-[0.2rem] font-mono text-sm border-none","children":""}],". Surprisingly, this works. If not a one caveat... You ",["$","strong",null,{"children":"CAN'T"}]," use tailwind className in it. Well, I surely won't style the image with usual css, so i found ",["$","a",null,{"className":"font-medium underline underline-offset-4 transition-all duration-300 after:opacity-0 hover:after:opacity-100 decoration-muted-foreground/30 hover:decoration-foreground","href":"https://github.com/vinicoder/tw-to-css","children":"tw-to-css"}],"."]}],"\n",["$","div",null,{"role":"alert","className":"relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive","children":["$undefined",["$","h5",null,{"className":"mb-1 font-medium leading-none tracking-tight","children":"Attention"}],["$","div",null,{"className":"text-sm [&_p]:leading-relaxed","children":["$","p",null,{"className":"leading-7 [&:not(:first-child)]:mt-6","children":["While writing this article i discovered that you can use ",["$","code",null,{"className":"relative w-full overflow-x-auto rounded border px-[0.3rem] py-[0.2rem] font-mono text-sm border-none","children":"tw='your-tailwind'"}]," to use tailwind classes. While this works, it's a little buggy and you can't use it for SVGs, so the above is still valid."]}]}]]}],"\n",["$","p",null,{"className":"leading-7 [&:not(:first-child)]:mt-6","children":"With this in mind, I implemented the OG image."}],"\n",["$","h1",null,{"className":"group group mt-2 scroll-m-20 text-3xl font-bold tracking-tight","id":"implementation","children":["$","a",null,{"className":"font-medium underline underline-offset-4 transition-all duration-300 after:opacity-0 hover:after:opacity-100 decoration-muted-foreground/30 hover:decoration-foreground subheading-anchor","aria-label":"Link to section","href":"#implementation","children":"Implementation"}]}],"\n",["$","p",null,{"className":"leading-7 [&:not(:first-child)]:mt-6","children":["So, you create the route as I've written above. My structure looks like ",["$","code",null,{"className":"relative w-full overflow-x-auto rounded border px-[0.3rem] py-[0.2rem] font-mono text-sm border-none","children":"posts/[...slug]/og-normal.png"}],", as I plan to add another OG image for twitter soon. Then, It's just matter of styling. My code looks like this."]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","pre",null,{"data-theme":"github-dark github-light","className":"w-full mb-4 mt-6 overflow-x-auto rounded-lg border py-4 px-0 bg-muted border-none dark:[&[data-theme=dark]]:block dark:[&[data-theme=light]]:hidden text-[color:var(--shiki-light)]","tabIndex":"0","data-language":"typescript","children":["$","code",null,{"className":"relative w-full overflow-x-auto rounded border px-[0.3rem] py-[0.2rem] font-mono text-sm border-none","data-language":"typescript","data-theme":"github-dark github-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"import"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" { allPosts } "}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"from"}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":" 'contentlayer/generated'"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"import"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" { format, parseISO } "}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"from"}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":" 'date-fns'"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"import"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" { ImageResponse } "}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"from"}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":" 'next/server'"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"import"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" { twj } "}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"from"}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":" 'tw-to-css'"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"import"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" { Inter } "}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"from"}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":" 'next/font/google'"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"import"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" { notFound } "}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"from"}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":" 'next/navigation'"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"export"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" async"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" function"}],["$","span",null,{"style":{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},"children":" generateStaticParams"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"() {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" return"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" allPosts."}],["$","span",null,{"style":{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},"children":"map"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"(("}],["$","span",null,{"style":{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},"children":"post"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":") "}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"=>"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" ({"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" slug: post._raw.flattenedPath,"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" }))"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"const"}],["$","span",null,{"style":{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},"children":" inter"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" ="}],["$","span",null,{"style":{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},"children":" Inter"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"({ subsets: ["}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"'latin'"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"] })"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"const"}],["$","span",null,{"style":{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},"children":" getInterExtraBold"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" ="}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" async"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" () "}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"=>"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" return"}],["$","span",null,{"style":{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},"children":" fetch"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" new"}],["$","span",null,{"style":{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},"children":" URL"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"("}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"'fonts/Inter-ExtraBold.ttf'"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":", "}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"'https://banana.is-cool.dev/fonts'"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"),"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" )."}],["$","span",null,{"style":{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},"children":"then"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"(("}],["$","span",null,{"style":{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},"children":"res"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":") "}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"=>"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" res."}],["$","span",null,{"style":{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},"children":"arrayBuffer"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"())"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"const"}],["$","span",null,{"style":{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},"children":" getInterBold"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" ="}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" async"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" () "}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"=>"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" return"}],["$","span",null,{"style":{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},"children":" fetch"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" new"}],["$","span",null,{"style":{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},"children":" URL"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"("}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"'fonts/Inter-Bold.ttf'"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":", "}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"'https://banana.is-cool.dev/fonts'"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"),"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" )."}],["$","span",null,{"style":{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},"children":"then"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"(("}],["$","span",null,{"style":{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},"children":"res"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":") "}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"=>"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" res."}],["$","span",null,{"style":{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},"children":"arrayBuffer"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"())"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"export"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" async"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" function"}],["$","span",null,{"style":{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},"children":" GET"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},"children":" req"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":":"}],["$","span",null,{"style":{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},"children":" Request"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" { "}],["$","span",null,{"style":{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},"children":"params"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" }"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":":"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" { "}],["$","span",null,{"style":{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},"children":"params"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":":"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" { "}],["$","span",null,{"style":{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},"children":"slug"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":":"}],["$","span",null,{"style":{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},"children":" string"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" } },"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":") {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" const"}],["$","span",null,{"style":{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},"children":" post"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" ="}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" allPosts."}],["$","span",null,{"style":{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},"children":"find"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"(("}],["$","span",null,{"style":{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},"children":"post"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":") "}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"=>"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" post._raw.flattenedPath "}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"==="}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" params.slug)"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" if"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" ("}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"!"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"post) {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" return"}],["$","span",null,{"style":{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},"children":" notFound"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"()"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" return"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" new"}],["$","span",null,{"style":{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},"children":" ImageResponse"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"("}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" ("}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" <"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"div"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" style"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"="}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"{"}],["$","span",null,{"style":{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},"children":"twj"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"("}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"'h-full w-full flex bg-zinc-950 items-center justify-center flex-col'"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":")}"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" >"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" <"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"div tw"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"="}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"'flex flex-col'"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" <"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"h1"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" tw"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"="}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"'text-zinc-100 font-extrabold text-6xl font-sans max-w-2xl'"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" {post.title}"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" <"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"p tw"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"="}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"'text-zinc-500 text-2xl max-w-2xl mt-[-10] mb-5'"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" {post.description}"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" <"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"div style"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"="}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"{"}],["$","span",null,{"style":{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},"children":"twj"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"("}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"'flex items-start'"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":")}"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" <"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"time dateTime"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"="}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"{post.date}"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" <"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"div style"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"="}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"{"}],["$","span",null,{"style":{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},"children":"twj"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"("}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"'flex flex-row items-center mr-6'"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":")}"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" <"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"svg"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" style"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"="}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"{"}],["$","span",null,{"style":{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},"children":"twj"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"("}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"'text-zinc-600 mb-[5px] mr-2'"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":")}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" xmlns"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"="}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"\"http://www.w3.org/2000/svg\""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" width"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"="}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"\"20\""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" height"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"="}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"\"20\""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" viewBox"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"="}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"\"0 0 24 24\""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" fill"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"="}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"\"none\""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" stroke"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"="}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"\"currentColor\""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" stroke"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"-"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"width"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"="}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"\"2\""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" stroke"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"-"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"linecap"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"="}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"\"round\""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" stroke"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"-"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"linejoin"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"="}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"\"round\""}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" >"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" <"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"path d"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"="}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"\"M8 2v4\""}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" />"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" <"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"path d"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"="}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"\"M16 2v4\""}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" />"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" <"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"rect width"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"="}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"\"18\""}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" height"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"="}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"\"18\""}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" x"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"="}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"\"3\""}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" y"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"="}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"\"4\""}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" rx"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"="}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"\"2\""}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" />"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" <"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"path d"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"="}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"\"M3 10h18\""}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" />"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" "}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"{"}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"' '"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" <"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"p tw"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"="}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"'text-zinc-600 text-2xl'"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" {"}],["$","span",null,{"style":{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},"children":"format"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"("}],["$","span",null,{"style":{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},"children":"parseISO"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"(post.date), "}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"'LLLL d, yyyy'"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":")}"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"

"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" "}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" "}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"
"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" "}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" {"}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"' '"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" <"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"p tw"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"="}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"'text-zinc-600 text-2xl'"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" {post.readingTime} min read"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" ),"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" width: "}],["$","span",null,{"style":{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},"children":"1200"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" height: "}],["$","span",null,{"style":{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},"children":"630"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" fonts: ["}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" name: "}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"'Inter ExtraBold'"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" data: "}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"await"}],["$","span",null,{"style":{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},"children":" getInterExtraBold"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"(),"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" name: "}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"'Inter Bold'"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" data: "}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"await"}],["$","span",null,{"style":{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},"children":" getInterBold"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"(),"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" ],"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" )"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"}"}]}]]}]}]}],"\n",["$","h2",null,{"className":"mt-10 scroll-m-20 border-b pb-1 text-2xl font-semibold tracking-tight first:mt-0","id":"caveats","children":["$","a",null,{"className":"font-medium underline underline-offset-4 transition-all duration-300 after:opacity-0 hover:after:opacity-100 decoration-muted-foreground/30 hover:decoration-foreground subheading-anchor","aria-label":"Link to section","href":"#caveats","children":"Caveats"}]}],"\n",["$","p",null,{"className":"leading-7 [&:not(:first-child)]:mt-6","children":"Some important limitations to consider are:"}],"\n",["$","ul",null,{"className":"my-6 ml-6 list-disc","children":["\n",["$","li",null,{"className":"mt-2","children":"You can't use your usual font (or next/font for that matter), you have to host it yourself. I just put it in /public"}],"\n",["$","li",null,{"className":"mt-2","children":["You can't use ",["$","code",null,{"className":"relative w-full overflow-x-auto rounded border px-[0.3rem] py-[0.2rem] font-mono text-sm border-none","children":"className"}]]}],"\n",["$","li",null,{"className":"mt-2","children":"Debug is not easy"}],"\n",["$","li",null,{"className":"mt-2","children":"All classes that do calculations (i.e. space-x, space-y) won't work."}],"\n",["$","li",null,{"className":"mt-2","children":"Lucide icons won't show up, so you should use SVGs"}],"\n"]}],"\n",["$","h2",null,{"className":"mt-10 scroll-m-20 border-b pb-1 text-2xl font-semibold tracking-tight first:mt-0","id":"share-it","children":["$","a",null,{"className":"font-medium underline underline-offset-4 transition-all duration-300 after:opacity-0 hover:after:opacity-100 decoration-muted-foreground/30 hover:decoration-foreground subheading-anchor","aria-label":"Link to section","href":"#share-it","children":"Share it!"}]}],"\n",["$","p",null,{"className":"leading-7 [&:not(:first-child)]:mt-6","children":"As you can see, the Implementation is rather simple. The hardest part is that the information is hard to find online, so it would be nice if you've shared it with your developer friends."}],"\n",["$","h1",null,{"className":"group group mt-2 scroll-m-20 text-3xl font-bold tracking-tight","id":"a-short-off-topic-description-of-what-ive-added","children":["$","a",null,{"className":"font-medium underline underline-offset-4 transition-all duration-300 after:opacity-0 hover:after:opacity-100 decoration-muted-foreground/30 hover:decoration-foreground subheading-anchor","aria-label":"Link to section","href":"#a-short-off-topic-description-of-what-ive-added","children":"A short off-topic description of what I've added"}]}],"\n",["$","h2",null,{"className":"mt-10 scroll-m-20 border-b pb-1 text-2xl font-semibold tracking-tight first:mt-0","id":"changelog","children":["$","a",null,{"className":"font-medium underline underline-offset-4 transition-all duration-300 after:opacity-0 hover:after:opacity-100 decoration-muted-foreground/30 hover:decoration-foreground subheading-anchor","aria-label":"Link to section","href":"#changelog","children":"Changelog"}]}],"\n",["$","p",null,{"className":"leading-7 [&:not(:first-child)]:mt-6","children":"Those posts serve a purpose of being kind-of a devlog for now, so, I thought I'd list changes done"}],"\n",["$","ul",null,{"className":"my-6 ml-6 list-disc","children":["\n",["$","li",null,{"className":"mt-2","children":"As you can already imagine, opengraph image."}],"\n",["$","li",null,{"className":"mt-2","children":"I filled main page with actual info"}],"\n",["$","li",null,{"className":"mt-2","children":["I've added a ",["$","a",null,{"className":"font-medium underline underline-offset-4 transition-all duration-300 after:opacity-0 hover:after:opacity-100 decoration-muted-foreground/30 hover:decoration-foreground","href":"/posts","children":"posts page"}]," with search functionality"]}],"\n",["$","li",null,{"className":"mt-2","children":"Latest posts now show 3 latest posts, but I might show pinned ones aswell"}],"\n",["$","li",null,{"className":"mt-2","children":"I'm about to (hopefully) start indexing this site in google"}],"\n"]}],"\n",["$","h2",null,{"className":"mt-10 scroll-m-20 border-b pb-1 text-2xl font-semibold tracking-tight first:mt-0","id":"search-explained","children":["$","a",null,{"className":"font-medium underline underline-offset-4 transition-all duration-300 after:opacity-0 hover:after:opacity-100 decoration-muted-foreground/30 hover:decoration-foreground subheading-anchor","aria-label":"Link to section","href":"#search-explained","children":"Search explained"}]}],"\n",["$","p",null,{"className":"leading-7 [&:not(:first-child)]:mt-6","children":["For search I'm using ",["$","a",null,{"className":"font-medium underline underline-offset-4 transition-all duration-300 after:opacity-0 hover:after:opacity-100 decoration-muted-foreground/30 hover:decoration-foreground","href":"https://www.fusejs.io/","children":"Fuse"}],". It's super simple to setup search. It's just"]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","pre",null,{"data-theme":"github-dark github-light","className":"w-full mb-4 mt-6 overflow-x-auto rounded-lg border py-4 px-0 bg-muted border-none dark:[&[data-theme=dark]]:block dark:[&[data-theme=light]]:hidden text-[color:var(--shiki-light)]","tabIndex":"0","data-language":"typescript","children":["$","code",null,{"className":"relative w-full overflow-x-auto rounded border px-[0.3rem] py-[0.2rem] font-mono text-sm border-none","data-language":"typescript","data-theme":"github-dark github-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"const"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" ["}],["$","span",null,{"style":{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},"children":"input"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":", "}],["$","span",null,{"style":{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},"children":"setInput"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"] "}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"="}],["$","span",null,{"style":{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},"children":" useState"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"<"}],["$","span",null,{"style":{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},"children":"any"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":">(posts);"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" const"}],["$","span",null,{"style":{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},"children":" handleSearch"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" ="}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" ("}],["$","span",null,{"style":{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},"children":"event"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":":"}],["$","span",null,{"style":{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},"children":" any"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":") "}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"=>"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" const"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" { "}],["$","span",null,{"style":{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},"children":"value"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" } "}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"="}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" event.target;"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" if"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" (value."}],["$","span",null,{"style":{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},"children":"length"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" ==="}],["$","span",null,{"style":{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},"children":" 0"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":") {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},"children":" setInput"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"(posts);"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" return"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" const"}],["$","span",null,{"style":{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},"children":" fuse"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" ="}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" new"}],["$","span",null,{"style":{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},"children":" Fuse"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"(posts, {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" keys: ["}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"\"title\""}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":", "}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"\"description\""}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"],"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" });"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" const"}],["$","span",null,{"style":{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},"children":" results"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" ="}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" fuse."}],["$","span",null,{"style":{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},"children":"search"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"(value);"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" const"}],["$","span",null,{"style":{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},"children":" items"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":" ="}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" results."}],["$","span",null,{"style":{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},"children":"map"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"(("}],["$","span",null,{"style":{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},"children":"result"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":") "}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"=>"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" result.item);"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},"children":" setInput"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"(items);"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" };"}]}]]}]}]}],"\n",["$","p",null,{"className":"leading-7 [&:not(:first-child)]:mt-6","children":"And, in the input field"}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","pre",null,{"data-theme":"github-dark github-light","className":"w-full mb-4 mt-6 overflow-x-auto rounded-lg border py-4 px-0 bg-muted border-none dark:[&[data-theme=dark]]:block dark:[&[data-theme=light]]:hidden text-[color:var(--shiki-light)]","tabIndex":"0","data-language":"ts","children":["$","code",null,{"className":"relative w-full overflow-x-auto rounded border px-[0.3rem] py-[0.2rem] font-mono text-sm border-none","data-language":"ts","data-theme":"github-dark github-light","style":{"display":"grid"},"children":["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"<"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"Input placeholder"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"="}],["$","span",null,{"style":{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},"children":"'Search posts...'"}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":" onChange"}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"="}],["$","span",null,{"style":{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},"children":"{handleSearch} "}],["$","span",null,{"style":{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},"children":"/>"}]]}]}]}]}],"\n",["$","p",null,{"className":"leading-7 [&:not(:first-child)]:mt-6","children":["Then you just display your items iterating through ",["$","code",null,{"className":"relative w-full overflow-x-auto rounded border px-[0.3rem] py-[0.2rem] font-mono text-sm border-none","children":"input"}]," variable. It's that simple.\nNote that the search will be client-side."]}]]}]}]]}],["$","div",null,{"className":"hidden text-sm lg:block","children":["$","div",null,{"className":"sticky top-28 -mt-10 max-h-[calc(var(--vh)-4rem)] overflow-y-auto pt-10","children":["$","$Ld",null,{"toc":{"items":[{"url":"#googling","title":"Googling","items":[{"url":"#what-the-issue-suggests","title":"What the issue suggests"}]},{"url":"#implementation","title":"Implementation","items":[{"url":"#caveats","title":"Caveats"},{"url":"#share-it","title":"Share it!"}]},{"url":"#a-short-off-topic-description-of-what-ive-added","title":"A short off-topic description of what I've added","items":[{"url":"#changelog","title":"Changelog"},{"url":"#search-explained","title":"Search explained"}]}]}}]}]}]]}] b:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Adding opengraph image with output: static | BANana"}],["$","meta","3",{"name":"description","content":"A post about how I've added opengraph images in my static Next.js website."}],["$","link","4",{"rel":"author","href":"https://github.com/bananad3v"}],["$","meta","5",{"name":"author","content":"BANana"}],["$","meta","6",{"name":"keywords","content":"Blog,Developer,Software Engineer,Writing,Frontend,Engineering,Typescript,React,Nextjs,Python,Server,Docker,Next"}],["$","meta","7",{"name":"creator","content":"BANana"}],["$","link","8",{"rel":"canonical","href":"https://banana.is-cool.devposts/adding-opengraph-image-with-output-static/"}],["$","meta","9",{"property":"og:title","content":"Adding opengraph image with output: static"}],["$","meta","10",{"property":"og:description","content":"A post about how I've added opengraph images in my static Next.js website."}],["$","meta","11",{"property":"og:url","content":"https://banana.is-cool.devposts/adding-opengraph-image-with-output-static/"}],["$","meta","12",{"property":"og:image","content":"https://banana.is-cool.dev/og/adding-opengraph-image-with-output-static.png"}],["$","meta","13",{"property":"og:image:alt","content":"Adding opengraph image with output: static"}],["$","meta","14",{"property":"og:image:width","content":"1200"}],["$","meta","15",{"property":"og:image:height","content":"630"}],["$","meta","16",{"property":"og:type","content":"article"}],["$","meta","17",{"property":"article:published_time","content":"2024-01-28T00:00:00.000Z"}],["$","meta","18",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","19",{"name":"twitter:title","content":"Adding opengraph image with output: static"}],["$","meta","20",{"name":"twitter:description","content":"A post about how I've added opengraph images in my static Next.js website."}],["$","meta","21",{"name":"twitter:image","content":"https://banana.is-cool.dev/og/adding-opengraph-image-with-output-static.png"}],["$","meta","22",{"name":"twitter:image:alt","content":"Adding opengraph image with output: static"}],["$","meta","23",{"name":"twitter:image:width","content":"1200"}],["$","meta","24",{"name":"twitter:image:height","content":"630"}],["$","link","25",{"rel":"icon","href":"/favicon.ico","type":"image/x-icon","sizes":"64x64"}],["$","meta","26",{"name":"next-size-adjust"}]] 1:null