var Component=(()=>{var d=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var k=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),g=(a,e)=>{for(var s in e)c(a,s,{get:e[s],enumerable:!0})},i=(a,e,s,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of h(e))!N.call(a,l)&&l!==s&&c(a,l,{get:()=>e[l],enumerable:!(t=m(e,l))||t.enumerable});return a};var b=(a,e,s)=>(s=a!=null?d(u(a)):{},i(e||!a||!a.__esModule?c(s,"default",{value:a,enumerable:!0}):s,a)),y=a=>i(c({},"__esModule",{value:!0}),a);var r=k((P,o)=>{o.exports=_jsx_runtime});var q={};g(q,{default:()=>f,frontmatter:()=>x});var n=b(r()),x={title:"Using Content layer with Next Js",publishedAt:"Jun 10, 2024",summary:"Streamline the process of handling Markdown (MDX) and other content formats, making it easier and more efficient to build dynamic websites."};function p(a){let e=Object.assign({p:"p",ul:"ul",li:"li",h3:"h3",strong:"strong",em:"em",pre:"pre",code:"code",span:"span",blockquote:"blockquote",a:"a",ol:"ol"},a.components),{Weather:s}=e;return s||v("Weather",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:"This blog post will have topics in"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Introduction to MDX with Next.js?"}),` `,(0,n.jsx)(e.li,{children:"Introduction to Contentlayer"}),` `,(0,n.jsx)(e.li,{children:"How to implement ContentLayer in Next Js"}),` `,(0,n.jsx)(e.li,{children:"And build a simple mdx file with custom Weather component and render it"}),` `,(0,n.jsx)(e.li,{children:"Resources"}),` `]}),` `,(0,n.jsx)(e.h3,{id:"what-is-mdx",children:"What is MDX"}),` `,(0,n.jsx)(e.p,{children:"MDX is like to a unique notebook where you may write code and narrative simultaneously. Assume you have a standard notebook in which you jot down thoughts and sketches. Imagine for a moment a magical notebook where you can jot down notes, draw images, and even add little machines (JSX) that may perform various tasks within the notebook, such as displaying buttons, playing games, or watching films!"}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.em,{children:"How Does It Work?"})})}),` `,(0,n.jsx)(e.p,{children:"In a regular Markdown file, where you can write texts like this:"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsxs)(e.code,{className:"code-highlight",children:[(0,n.jsx)(e.span,{className:"code-line",children:`# My Story `}),(0,n.jsx)(e.span,{className:"code-line",children:`This is a paragraph in my story. `})]})}),` `,(0,n.jsx)(e.p,{children:"But with MDX, you can do that and also add JSX."}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsxs)(e.code,{className:"code-highlight",children:[(0,n.jsx)(e.span,{className:"code-line",children:`# My Story `}),(0,n.jsx)(e.span,{className:"code-line",children:`This is a paragraph in my story. `}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsx)(e.span,{className:"code-line",children:` `})]})}),` `,(0,n.jsxs)(e.blockquote,{children:[` `,(0,n.jsx)(e.p,{children:"So, MDX lets you mix normal writing and special code together to make your website pages more exciting and interactive."}),` `]}),` `,(0,n.jsx)(e.h3,{id:"introduction-to-contentlayer",children:"Introduction to Contentlayer"}),` `,(0,n.jsxs)(e.p,{children:["It is a powerful content management tool designed to work seamlessly with Next.js applications. It was created by the ",(0,n.jsx)(e.a,{href:"https://x.com/schickling",children:"@schickling"})," & a community with MIT Licenced - A project by ",(0,n.jsx)(e.a,{href:"https://www.stackbit.com/",children:"Stackbit"})]}),` `,(0,n.jsx)(e.p,{children:"It simplifies the process of managing and accessing your content, especially when working with Markdown (MDX) and other content formats. Contentlayer makes your life easier because it has:"}),` `,(0,n.jsxs)(e.ol,{children:[` `,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.em,{children:"Automatic Content Processing:"})})}),` `]}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"reads your content files (like MDX, Markdown, JSON) from a specified directory."}),` `,(0,n.jsx)(e.li,{children:"automatically processes these files and transforms them into structured data that your Next.js application can easily use."}),` `]}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsxs)(e.ol,{start:"2",children:[` `,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.em,{children:"Enhanced Developer Workflow:"})})}),` `]}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"You don't need to write complex scripts to parse and load your content. It handles the heavy lifting, allowing you to focus on building your website."}),` `]}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsxs)(e.ol,{start:"3",children:[` `,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.em,{children:"Unified Data Access:"})})}),` `]}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"provides a unified API to access all your content. This means you can fetch and use your data consistently across your application, whether it's for blog posts, documentation, or other content types."}),` `]}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsxs)(e.ol,{start:"4",children:[` `,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.em,{children:"Improved Performance:"})})}),` `]}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"By pre-processing your content at build time, Contentlayer helps improve the performance of your Next.js application. It enables static site generation (SSG), ensuring your pages load quickly for users."}),` `,(0,n.jsx)(e.li,{children:"This also enhances your site's SEO, as pre-rendered content is more easily indexed by search engines."}),` `]}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsxs)(e.ol,{start:"5",children:[` `,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.em,{children:"Flexible Content Modeling:"})})}),` `]}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Contentlayer allows you to define custom content models, so you can organize your content in a way that best suits your project's needs."}),` `,(0,n.jsx)(e.li,{children:"Whether you're building a blog, a documentation site, or a portfolio, you can tailor the content structure to match your requirements."}),` `]}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsxs)(e.ol,{start:"6",children:[` `,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.em,{children:"Support for MDX:"})})}),` `]}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"you include React components in your markdown content."}),` `]}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)(e.h3,{id:"setting-up-the-project",children:"Setting up the Project"}),` `,(0,n.jsxs)(e.ol,{children:[` `,(0,n.jsx)(e.li,{children:"Creating a New Next.js Project"}),` `]}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Use create-next-app to set up a new Next.js project."}),` `,(0,n.jsx)(e.li,{children:"Provide the command: npx create-next-app my-mdx-blog."}),` `]}),` `,(0,n.jsxs)(e.ol,{start:"2",children:[` `,(0,n.jsx)(e.li,{children:"Installing Necessary Packages"}),` `]}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsx)(e.p,{children:"Install next js:"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"code-highlight",children:(0,n.jsx)(e.span,{className:"code-line",children:` npx create-next-app@latest --typescript --tailwind --experimental-app --eslint example-app `})})}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsx)(e.p,{children:"Provide the installation command:"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"code-highlight",children:(0,n.jsx)(e.span,{className:"code-line",children:` npm install contentlayer next-contentlayer date-fns. `})})}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsx)(e.p,{children:"Configure The Next.config.js file"}),` `,(0,n.jsx)(e.pre,{className:"language-tsx",children:(0,n.jsxs)(e.code,{className:"language-tsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," withContentlayer ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"require"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'next-contentlayer'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"2",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"3",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"\\",(0,n.jsx)(e.span,{className:"token operator",children:"*"}),"_ @",(0,n.jsx)(e.span,{className:"token keyword",children:"type"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token keyword",children:"import"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'next'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"NextConfig"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," _",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"4",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," nextConfig ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," reactStrictMode",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token boolean",children:"true"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," swcMinify",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token boolean",children:"true"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"5",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"6",children:[" module",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"exports"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"withContentlayer"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"nextConfig",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"7",children:[" ",(0,n.jsx)(e.span,{className:"token comment",children:"// ^^^^^^^^^^^^ add this to your next.config.js file"}),` `]})]})}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsx)(e.p,{children:"Configure tsconfig.json file (if your using typescript)"}),` `,(0,n.jsx)(e.pre,{className:"language-tsx",children:(0,n.jsxs)(e.code,{className:"language-tsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:[(0,n.jsx)(e.span,{className:"token comment",children:"// tsconfig.json"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"2",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"3",children:[" ",(0,n.jsx)(e.span,{className:"token string-property property",children:'"compilerOptions"'}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"4",children:[" ",(0,n.jsx)(e.span,{className:"token string-property property",children:'"baseUrl"'}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"."'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"5",children:[" ",(0,n.jsx)(e.span,{className:"token comment",children:"// ^^^^^^^^^^^"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"6",children:[" ",(0,n.jsx)(e.span,{className:"token string-property property",children:'"paths"'}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number highlight-line",line:"7",children:[" ",(0,n.jsx)(e.span,{className:"token string-property property",children:'"contentlayer/generated"'}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token string",children:'"./.contentlayer/generated"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number highlight-line",line:"8",children:[" ",(0,n.jsx)(e.span,{className:"token comment",children:"// ^^^^^^ location of compiled mdx file going to be stored^^^^^^"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"9",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"10",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"11",children:[" ",(0,n.jsx)(e.span,{className:"token string-property property",children:'"include"'}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"12",children:[" ",(0,n.jsx)(e.span,{className:"token string",children:'"next-env.d.ts"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"13",children:[" ",(0,n.jsx)(e.span,{className:"token string",children:'"**/*.ts"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"14",children:[" ",(0,n.jsx)(e.span,{className:"token string",children:'"**/*.tsx"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"15",children:[" ",(0,n.jsx)(e.span,{className:"token string",children:'".next/types/**/*.ts"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"16",children:[" ",(0,n.jsx)(e.span,{className:"token string",children:'".contentlayer/generated"'}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"17",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"18",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)("div",{className:"w-full h-full overflow-clip",children:(0,n.jsx)("img",{width:1e3,height:700,src:"/blog/contentlayer/location-generated.png",alt:"csp",priority:!0,reset:!0,className:"object-cover",layout:"responsive",loading:"lazy"})}),` `,(0,n.jsxs)(e.blockquote,{children:[` `,(0,n.jsx)(e.p,{children:"To know where to look for generated files, so its easy to import them later on"}),` `]}),` `,(0,n.jsx)("br",{}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsx)(e.p,{children:"Create contentlayer.config.ts in the root of your project and add the following content."}),` `,(0,n.jsx)(e.pre,{className:"language-tsx",children:(0,n.jsxs)(e.code,{className:"language-tsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]})]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"2",children:(0,n.jsxs)(e.span,{className:"token imports",children:[" defineDocumentType",(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"3",children:(0,n.jsxs)(e.span,{className:"token imports",children:[" makeSource",(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"4",children:(0,n.jsxs)(e.span,{className:"token imports",children:[" ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"ComputedFields"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]})}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"5",children:[(0,n.jsxs)(e.span,{className:"token imports",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"contentlayer/source-files"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"})," ",(0,n.jsx)(e.span,{className:"token comment",children:"// eslint-disable-line"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"6",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:"rehypePrism"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"rehype-prism-plus"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"7",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:"rehypeSlug"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"rehype-slug"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"8",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"9",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token function-variable function",children:"getSlug"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"doc",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"any"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," doc",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"_raw"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"sourceFileName"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"replace"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsxs)(e.span,{className:"token regex",children:[(0,n.jsx)(e.span,{className:"token regex-delimiter",children:"/"}),(0,n.jsxs)(e.span,{className:"token regex-source language-regex",children:[(0,n.jsx)(e.span,{className:"token special-escape escape",children:"\\."}),"mdx",(0,n.jsx)(e.span,{className:"token anchor function",children:"$"})]}),(0,n.jsx)(e.span,{className:"token regex-delimiter",children:"/"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token string",children:'""'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"10",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"11",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," postComputedFields",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"ComputedFields"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"12",children:[" slug",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"13",children:[" type",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"string"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"14",children:[" ",(0,n.jsx)(e.span,{className:"token function-variable function",children:"resolve"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"doc",(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token function",children:"getSlug"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"doc",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"15",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"16",children:[" image",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"17",children:[" type",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"string"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"18",children:[" ",(0,n.jsx)(e.span,{className:"token function-variable function",children:"resolve"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"doc",(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsxs)(e.span,{className:"token template-string",children:[(0,n.jsx)(e.span,{className:"token template-punctuation string",children:"`"}),(0,n.jsx)(e.span,{className:"token string",children:"/blog/"}),(0,n.jsxs)(e.span,{className:"token interpolation",children:[(0,n.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"${"}),(0,n.jsx)(e.span,{className:"token function",children:"getSlug"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"doc",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token string",children:"/image.png"}),(0,n.jsx)(e.span,{className:"token template-punctuation string",children:"`"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"19",children:[" ",(0,n.jsx)(e.span,{className:"token comment",children:"// ^^^^^^ This is where we have all our images, inside the public/blog folder, each mdx file has its own folder"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"20",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"21",children:[" og",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"22",children:[" type",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"string"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"23",children:[" ",(0,n.jsx)(e.span,{className:"token function-variable function",children:"resolve"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"doc",(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsxs)(e.span,{className:"token template-string",children:[(0,n.jsx)(e.span,{className:"token template-punctuation string",children:"`"}),(0,n.jsx)(e.span,{className:"token string",children:"/blog/"}),(0,n.jsxs)(e.span,{className:"token interpolation",children:[(0,n.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"${"}),(0,n.jsx)(e.span,{className:"token function",children:"getSlug"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"doc",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token string",children:"/image.png"}),(0,n.jsx)(e.span,{className:"token template-punctuation string",children:"`"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"24",children:[" ",(0,n.jsx)(e.span,{className:"token comment",children:"// ^^^^^^ This is where we have all our og images, inside the public/blog folder"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"25",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"26",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"27",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"28",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"29",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Post"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"defineDocumentType"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"30",children:[" name",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"Post"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"31",children:[" filePathPattern",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsxs)(e.span,{className:"token template-string",children:[(0,n.jsx)(e.span,{className:"token template-punctuation string",children:"`"}),(0,n.jsx)(e.span,{className:"token string",children:"blog/**/*.mdx"}),(0,n.jsx)(e.span,{className:"token template-punctuation string",children:"`"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"32",children:[" contentType",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"mdx"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"33",children:[" fields",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"34",children:[" title",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," type",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"string"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," required",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token boolean",children:"true"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"35",children:[" summary",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," type",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"string"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," required",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token boolean",children:"true"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"36",children:[" publishedAt",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," type",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"string"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," required",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token boolean",children:"true"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"37",children:[" updatedAt",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," type",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"string"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," required",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token boolean",children:"false"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"38",children:[" tags",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," type",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"json"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," required",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token boolean",children:"false"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"39",children:[" featured",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," type",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"boolean"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," required",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token boolean",children:"false"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"40",children:[" shortTitle",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," type",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"string"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," required",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token boolean",children:"false"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"default"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'""'})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"41",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"42",children:[" computedFields",(0,n.jsx)(e.span,{className:"token operator",children:":"})," postComputedFields",(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"43",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"44",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"45",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"default"})," ",(0,n.jsx)(e.span,{className:"token function",children:"makeSource"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"46",children:[" contentDirPath",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"content"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"47",children:[" ",(0,n.jsx)(e.span,{className:"token comment",children:"// ^^^^^ this is where the mdx files will be stored that will be compiled on build time"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"48",children:[" documentTypes",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Post"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"49",children:[" mdx",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"50",children:[" rehypePlugins",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),"rehypePrism",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," rehypeSlug",(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"51",children:[" ",(0,n.jsx)(e.span,{className:"token comment",children:"// ^^^^ plugins to transpile it to JSX. This can be used in react/Vue etc..."}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"52",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"53",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)("br",{}),` `]}),` `]}),` `,(0,n.jsxs)(e.ol,{start:"3",children:[` `,(0,n.jsx)(e.li,{children:"Creating Content Files"}),` `]}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"create a folder called content/blog inside the root project and name it content.mdx"}),` `]}),` `,(0,n.jsx)(e.pre,{className:"language-tsx",children:(0,n.jsxs)(e.code,{className:"language-tsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"--"}),(0,n.jsx)(e.span,{className:"token operator",children:"-"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"2",children:[" title",(0,n.jsx)(e.span,{className:"token operator",children:":"})," title ",(0,n.jsx)(e.span,{className:"token keyword",children:"of"}),` the topic you want to be `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"3",children:[" publishedAt",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"Month Date, Year"'}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"4",children:[" summary",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Summary"})," or description ",(0,n.jsx)(e.span,{className:"token keyword",children:"of"})," the topic you want it to be",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"5",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"--"}),(0,n.jsx)(e.span,{className:"token operator",children:"-"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"6",children:` `}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"7",children:` `}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"8",children:` `}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"9",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"10",children:[" ",(0,n.jsx)(e.span,{className:"token comment",children:"// mdx content here..."}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"11",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"12",children:[" ",(0,n.jsx)(e.span,{className:"token comment",children:"// you can write html elements like this"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"13",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number highlight-line",line:"14",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"w-full h-full overflow-clip",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number highlight-line",line:"15",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"Image"})]}),` `]})]}),(0,n.jsx)(e.span,{className:"code-line line-number highlight-line",line:"16",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"width"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token number",children:"3000"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number highlight-line",line:"17",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"height"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token number",children:"1000"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number highlight-line",line:"18",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"src"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"/blog/blogfile/image.png",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number highlight-line",line:"19",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"alt"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"csp",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number highlight-line",line:"20",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"priority"}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number highlight-line",line:"21",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"reset"}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number highlight-line",line:"22",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"object-cover",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number highlight-line",line:"23",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"layout"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"responsive",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number highlight-line",line:"24",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"sizes"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 700px",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"25",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"loading"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"lazy",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"26",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"27",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"28",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"29",children:[" ",(0,n.jsx)(e.span,{className:"token comment",children:"// Notice am not importing the Image component from next/image"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"30",children:` `})]})}),` `,(0,n.jsxs)(e.ol,{start:"4",children:[` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsx)(e.p,{children:"Creating a Custom MDX Component"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"create a folder components/ui.tsx"}),` `]}),` `,(0,n.jsx)(e.pre,{className:"language-tsx",children:(0,n.jsxs)(e.code,{className:"language-tsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token string",children:'"use client"'}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," useState ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"react"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token function-variable function",children:"ComponentWrapper"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),"theme",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," setTheme",(0,n.jsx)(e.span,{className:"token punctuation",children:"]"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"useState"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:'"dark"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token comment",children:"// function to change the theme"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token function-variable function",children:"changeTheme"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"if"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"theme ",(0,n.jsx)(e.span,{className:"token operator",children:"==="})," ",(0,n.jsx)(e.span,{className:"token string",children:'"dark"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"setTheme"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:'"light"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"else"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"setTheme"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:'"dark"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsxs)(e.span,{className:"token template-string",children:[(0,n.jsx)(e.span,{className:"token template-punctuation string",children:"`"}),(0,n.jsx)(e.span,{className:"token string",children:"w-full h-full mx-auto "}),(0,n.jsxs)(e.span,{className:"token interpolation",children:[(0,n.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"${"}),"theme ",(0,n.jsx)(e.span,{className:"token operator",children:"==="})," ",(0,n.jsx)(e.span,{className:"token string",children:'"dark"'}),(0,n.jsx)(e.span,{className:"token operator",children:"?"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"from-gray-900 to-gray-600"'})," ",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"from-blue-600 to-sky-400"'}),(0,n.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token template-punctuation string",children:"`"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"onClick"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"changeTheme",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"h2"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"text-2xl text-center",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:"Component Header"}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"flex justify-between items-center",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"p"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"m-0",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:"Addis Ababa"}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"p"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"text-5xl m-0",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:"21\xB0"}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"text-right text-sm md:text-base",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"svg"]}),` `]})]}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"xmlns"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"http://www.w3 .org/2000/svg",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"viewBox"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"0 0 20 20",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"fill"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"currentColor",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"w-5 h-5 ml-auto",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"path"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"d"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"M1 12.5A4.5 4.5 0 005.5 17H15a4 4 0 001.866-7.539 3.504 3.504 0 00-4.504-4.272A4.5 4.5 0 004.06 8.235 4.502 4.502 0 001 12.5z",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"p"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"m-0 mt-2 leading-tight font-medium",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:"mostly sunny"}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"p"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"m-0 leading-tight font-medium",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:"H:22\xB0 L:19\xB0"}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"flex justify-between w-full mt-2 md:mt-6",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token number",children:"1"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"2"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"3"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"4"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"5"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"6"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"map"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token builtin",children:"number"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," i",(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"key"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"i",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"flex flex-col gap-1 m-0 items-center",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"p"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"text-xs md:text-sm mb-0 opacity-75",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token builtin",children:"number"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token plain-text",children:"PM"}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token builtin",children:"number"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"<"})," ",(0,n.jsx)(e.span,{className:"token number",children:"4"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"?"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"svg"]}),` `]})]}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"xmlns"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"http://www.w3.org/2000/svg",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"viewBox"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"0 0 20 20",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"fill"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"currentColor",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"w-5 h-5",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"path"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"d"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"M1 12.5A4.5 4.5 0 005.5 17H15a4 4 0 001.866-7.539 3.504 3.504 0 00-4.504-4.272A4.5 4.5 0 004.06 8.235 4.502 4.502 0 001 12.5z",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"svg"]}),` `]})]}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"xmlns"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"http://www.w3.org/2000/svg",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"viewBox"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"0 0 20 20",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"fill"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"currentColor",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"w-5 h-5 text-yellow-400",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"path"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"d"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"M10 2a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 2zM10 15a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 15zM10 7a3 3 0 100 6 3 3 0 000-6zM15.657 5.404a.75.75 0 10-1.06-1.06l-1.061 1.06a.75.75 0 001.06 1.06l1.06-1.06zM6.464 14.596a.75.75 0 10-1.06-1.06l-1.06 1.06a.75.75 0 001.06 1.06l1.06-1.06zM18 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 0118 10zM5 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 015 10zM14.596 15.657a.75.75 0 001.06-1.06l-1.06-1.061a.75.75 0 10-1.06 1.06l1.06 1.06zM5.404 6.464a.75.75 0 001.06-1.06l-1.06-1.06a.75.75 0 10-1.061 1.06l1.06 1.06z",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"p"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"text-sm md:text-base m-0 font-medium",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:"67\xB0"}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `})]})}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)("figcaption",{children:(0,n.jsx)(e.p,{children:"You get a component that looks like this"})}),` `,(0,n.jsx)(s,{}),` `]}),` `]}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsxs)(e.ol,{start:"5",children:[` `,(0,n.jsx)(e.li,{children:"Finally Add Site Code"}),` `]}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"In your root project under blog folder create a page.tsx file and copy this code snippet"}),` `]}),` `,(0,n.jsx)(e.pre,{className:"language-tsx",children:(0,n.jsxs)(e.code,{className:"language-tsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Metadata"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"next"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"2",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," allPosts ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'".contentlayer/generated"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"3",children:[" ",(0,n.jsx)(e.span,{className:"token comment",children:"//^^^^^^^^ Don't worry about this, will be generated on build"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"4",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"5",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"PostList"})})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"./components/ui/PostList"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"6",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"BlogSection"})})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"@/sections/blog-section/blog-section"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"7",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"8",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," metadata",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Metadata"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"9",children:[" title",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"Blog"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"10",children:[" description",(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"11",children:[" ",(0,n.jsx)(e.span,{className:"token string",children:'"This is an awesome blog page!!"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"12",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"13",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"14",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"default"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"function"})," ",(0,n.jsx)(e.span,{className:"token function",children:"Blog"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"15",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," posts ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," allPosts",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"sort"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"16",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"a",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," b",(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"17",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"new"})," ",(0,n.jsx)(e.span,{className:"token class-name",children:"Date"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"b",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"publishedAt"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"getTime"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"new"})," ",(0,n.jsx)(e.span,{className:"token class-name",children:"Date"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"a",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"publishedAt"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"getTime"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"18",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"19",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"20",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"21",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token tag",children:(0,n.jsx)(e.span,{className:"token punctuation",children:"<"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"22",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"px-6 md:px-6 pt-16 pb-10 md:pt-20 md:pb-14 max-w-[1100px] mx-auto relative",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"23",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"BlogSection"})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"posts"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"posts",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"24",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"Footer"})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"25",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"26",children:(0,n.jsx)(e.span,{className:"token plain-text",children:` ); `})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"27",children:(0,n.jsx)(e.span,{className:"token plain-text",children:` } `})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"28",children:(0,n.jsx)(e.span,{className:"token plain-text",children:` `})})]})}),` `,(0,n.jsxs)(e.blockquote,{children:[` `,(0,n.jsx)(e.p,{children:"We use the parent and child component because we are going to separate the server logic and client logic"}),` `]}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"In your root project create a section folder and name it a blogSection.tsx file and copy this code snippet"}),` `]}),` `,(0,n.jsx)(e.pre,{className:"language-tsx",children:(0,n.jsxs)(e.code,{className:"language-tsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:[" ",(0,n.jsx)(e.span,{className:"token string",children:'"use client"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"2",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"3",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"PostList"})})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"@/app/blog/components/ui/PostList"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"4",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"type"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Post"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"as"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"PostType"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'".contentlayer/generated"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"5",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," useEffect",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," useRef",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," useState ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"react"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"6",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"7",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"type"})," ",(0,n.jsx)(e.span,{className:"token class-name",children:"PostListProps"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"8",children:[" posts",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"PostType"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"9",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"10",children:` `}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"11",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"12",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"default"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"function"})," ",(0,n.jsx)(e.span,{className:"token function",children:"PostList"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," posts ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"PostListProps"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"13",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"14",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"ul"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"flex flex-col justify-between md:flex-row flex-wrap w-full animated-list overflow-hidden",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"15",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"posts",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"length"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"==="})," ",(0,n.jsx)(e.span,{className:"token number",children:"0"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"&&"})," ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"p"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:"No posts found"}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"16",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"posts",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"map"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"post",(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"17",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"Post"})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"key"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"post",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"slug"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"post"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"post",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"18",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"19",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"20",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"21",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"22",children:` `}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"23",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"24",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token function-variable function",children:"BlogSection"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," posts ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"PostListProps"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"25",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),"isLoading",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," setIsLoading",(0,n.jsx)(e.span,{className:"token punctuation",children:"]"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"useState"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token boolean",children:"true"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"26",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," blogRef ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"useRef"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token keyword",children:"null"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"27",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"28",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"useEffect"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"29",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token keyword",children:"async"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"30",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"setTimeout"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"31",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"setIsLoading"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token boolean",children:"false"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"32",children:[" ",(0,n.jsx)(e.span,{className:"token dom variable",children:"window"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"scrollTo"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token number",children:"0"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"0"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"33",children:[" ",(0,n.jsx)(e.span,{className:"token comment",children:"// ^^ scrolls to top of the page on page reload (This is optional)"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"34",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"1000"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"35",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"36",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"37",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"38",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"39",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"flex flex-col gap-16 md:gap-14",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"ref"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"blogRef",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"40",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"flex flex-col gap-8",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"41",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"42",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"h1"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"animate-in text-4xl md:text-5xl font-bold tracking-tight py-4",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"43",children:(0,n.jsx)(e.span,{className:"token plain-text",children:` Blog `})}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"44",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"45",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"p"]}),` `]})]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"46",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"animate-in text-secondary",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"47",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"style"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token string-property property",children:'"--index"'}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"1"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"as"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"React"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"CSSProperties"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"48",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"49",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"posts",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"length"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token plain-text",children:` blog posts about full stack, designs, 3d modeling & `})]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"50",children:(0,n.jsx)(e.span,{className:"token plain-text",children:` animations and more... `})}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"51",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"52",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"53",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"54",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]}),` `]})]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"55",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"animate-in py-4",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"56",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"style"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token string-property property",children:'"--index"'}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"2"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"as"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"React"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"CSSProperties"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"57",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"58",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"PostList"})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"posts"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"posts",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"59",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"60",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"61",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"62",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"63",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"64",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"default"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"BlogSection"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"65",children:` `}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"66",children:` `})]})}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Render the Post component which is going to be under blog/ui/post.tsx"}),` `]}),` `,(0,n.jsx)(e.pre,{className:"language-tsx",children:(0,n.jsxs)(e.code,{className:"language-tsx code-highlight",children:[(0,n.jsx)(e.span,{className:"code-line line-number",line:"1",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"2",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," formatDate ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"@/lib/formatdate"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"3",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"type"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Post"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'".contentlayer/generated"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"4",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Link"})})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"@/components/ui/Link"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"5",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Image"})})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"next/image"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"6",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"7",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"type"})," ",(0,n.jsx)(e.span,{className:"token class-name",children:"PostProps"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"8",children:[" post",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Post"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"9",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"10",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"11",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"default"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"function"})," ",(0,n.jsx)(e.span,{className:"token function",children:"Post"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," post ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"PostProps"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"12",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," publishedAt",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," slug",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," title",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," image ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," post",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"13",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," publishDate ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"new"})," ",(0,n.jsx)(e.span,{className:"token class-name",children:"Date"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"publishedAt",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"14",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"15",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"li"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"py-3 group transition-opacity md:h-96 w-full md:w-1/2 md:p-2 overflow-hidden",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"16",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"transition-opacity flex",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"17",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"flex md:flex-col md:justify-between gap-6 w-full h-full",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"18",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"Link"})]}),` `]})]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"19",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"href"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsxs)(e.span,{className:"token template-string",children:[(0,n.jsx)(e.span,{className:"token template-punctuation string",children:"`"}),(0,n.jsx)(e.span,{className:"token string",children:"/blog/"}),(0,n.jsxs)(e.span,{className:"token interpolation",children:[(0,n.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"${"}),"slug",(0,n.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token template-punctuation string",children:"`"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"20",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"min-w-28 w-36 h-28 md:w-full md:h-60 relative drop-shadow-sm",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"21",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"22",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"Image"})]}),` `]})]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"23",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"src"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"image",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"24",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"alt"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"title",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"25",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"fill"}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"26",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"object-cover rounded",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"27",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"28",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"29",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"section"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"heading"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token function",children:"formatDate"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"publishedAt",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"30",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"Link"})]}),` `]})]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"31",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"href"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsxs)(e.span,{className:"token template-string",children:[(0,n.jsx)(e.span,{className:"token template-punctuation string",children:"`"}),(0,n.jsx)(e.span,{className:"token string",children:"/blog/"}),(0,n.jsxs)(e.span,{className:"token interpolation",children:[(0,n.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"${"}),"slug",(0,n.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token template-punctuation string",children:"`"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"32",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"font-semibold leading-tight text-xl md:text-md",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"33",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"34",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"title",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"35",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"36",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"37",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"38",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"39",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"40",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"41",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"42",children:` `})]})}),` `,(0,n.jsxs)(e.blockquote,{children:[` `,(0,n.jsx)(e.p,{children:`You may have noticed that you'll get an error when trying to import from contentlayer/generated, its completely Normal. It will work once after running the development server. Since we have just`}),` `]}),` `,(0,n.jsx)(e.h3,{id:"finally-render-the-blog-content-dynamically",children:"Finally Render the blog content dynamically"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["Under the blog folder create a dynamic folder ",(0,n.jsx)(e.em,{children:(0,n.jsx)(e.strong,{children:"blog/[slug]/page.tsx"})})]}),` `]}),` `,(0,n.jsx)(e.pre,{className:"language-tsx",children:(0,n.jsxs)(e.code,{className:"language-tsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Suspense"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"react"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"2",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"type"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Metadata"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"ResolvingMetadata"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"next"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"3",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," allPosts",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Post"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"as"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"PostType"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"contentlayer/generated"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"4",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"5",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"SingleBlog"})})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"./components/slug"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"6",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Navigation"})})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"@/components/Navigation"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"7",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Footer"})})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"@/components/Footer"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"8",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Link"})})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"next/link"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"9",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"10",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"type"})," ",(0,n.jsx)(e.span,{className:"token class-name",children:"Props"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"11",children:[" params",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"12",children:[" slug",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"string"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"13",children:[" id",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"string"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"14",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"15",children:[" searchParams",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),"key",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"string"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"string"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"|"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"string"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"|"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"undefined"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"16",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"17",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"18",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"async"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"function"})," ",(0,n.jsx)(e.span,{className:"token function",children:"generateMetadata"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"19",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," params",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," searchParams ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Props"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"20",children:[" parent",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"ResolvingMetadata"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"21",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token known-class-name class-name",children:"Promise"}),(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Metadata"}),(0,n.jsx)(e.span,{className:"token operator",children:">"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"22",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," post ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," allPosts",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"find"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"post",(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," post",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"slug"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"==="})," params",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"slug"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"23",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"24",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"if"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token operator",children:"!"}),"post",(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"25",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"throw"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"new"})," ",(0,n.jsx)(e.span,{className:"token class-name",children:"Error"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:'"Post not found"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"26",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"27",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"28",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"29",children:[" title",(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"30",children:[" publishedAt",(0,n.jsx)(e.span,{className:"token operator",children:":"})," publishedTime",(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"31",children:[" summary",(0,n.jsx)(e.span,{className:"token operator",children:":"})," description",(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"32",children:[" image",(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"33",children:[" slug",(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"34",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," post",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"35",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"36",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," metadata",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Metadata"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"37",children:[" title",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsxs)(e.span,{className:"token template-string",children:[(0,n.jsx)(e.span,{className:"token template-punctuation string",children:"`"}),(0,n.jsxs)(e.span,{className:"token interpolation",children:[(0,n.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"${"}),"title",(0,n.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token template-punctuation string",children:"`"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"38",children:[" description",(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"39",children:[" openGraph",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"40",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"41",children:[" description",(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"42",children:[" type",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"article"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"43",children:[" publishedTime",(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"44",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"45",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"46",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"return"})," metadata",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"47",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"48",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"49",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"default"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"async"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"function"})," ",(0,n.jsx)(e.span,{className:"token function",children:"Post"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," params ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," params",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"any"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"50",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," post ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," allPosts",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"find"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"post",(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," post",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"slug"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"==="})," params",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"slug"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"51",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"52",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"53",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"Suspense"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"54",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"flex flex-col gap-10 max-w-[700px] lg:max-w-[1000px] mx-auto md:gap-14",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"55",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"SingleBlog"})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"post"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"post",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"56",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token comment",children:"/* ^^^ child component to pass post props */"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"57",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"58",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"59",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"60",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"61",children:` `}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"62",children:` `})]})}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["Under the blog folder create a dynamic folder ",(0,n.jsx)(e.em,{children:(0,n.jsx)(e.strong,{children:"blog/[slug]/components/slug.tsx"})})]}),` `]}),` `,(0,n.jsx)(e.pre,{className:"language-tsx",children:(0,n.jsxs)(e.code,{className:"language-tsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:[" ",(0,n.jsx)(e.span,{className:"token string",children:'"use client"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"2",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"3",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Image"})})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"next/image"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"4",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," formatDate ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"lib/formatdate"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"5",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"6",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Mdx"})})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"@/app/blog/components/ui/MdxWrapper"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"7",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," useEffect",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," useState ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"react"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"8",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"9",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," notFound ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"next/navigation"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"10",children:` `}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"11",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"12",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token function-variable function",children:"SingleBlog"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," post ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"any"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"13",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),"isLoading",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," setIsLoading",(0,n.jsx)(e.span,{className:"token punctuation",children:"]"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"useState"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token boolean",children:"true"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"14",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),"mounted",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," setMounted",(0,n.jsx)(e.span,{className:"token punctuation",children:"]"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"useState"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token boolean",children:"false"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"15",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"16",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"useEffect"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"17",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token keyword",children:"async"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"18",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"19",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"setTimeout"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"20",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"setIsLoading"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token boolean",children:"false"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"21",children:[" ",(0,n.jsx)(e.span,{className:"token dom variable",children:"window"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"scrollTo"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token number",children:"0"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"0"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"22",children:[" ",(0,n.jsx)(e.span,{className:"token comment",children:"//^^ scroll to top position(optional)"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"23",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"1000"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"24",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"25",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"26",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"27",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"28",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"useEffect"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"29",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"setMounted"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token boolean",children:"true"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"30",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"31",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"32",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"if"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token operator",children:"!"}),"mounted",(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"33",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"return"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"null"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"34",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"35",children:[" ",(0,n.jsx)(e.span,{className:"token comment",children:"// ^^ for hydration purposes"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"36",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"37",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"if"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token operator",children:"!"}),"post",(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"38",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"notFound"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"39",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"40",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"41",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"42",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"article"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"mt-10 w-full h-full px-2 md:px-10",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"43",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]}),` `]})]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"44",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"flex animate-in flex-col gap-8",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"45",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"style"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token string-property property",children:'"--index"'}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"1"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"as"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"React"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"CSSProperties"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"46",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"47",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"space-y-4",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"48",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"h1"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"text-3xl lg:text-4xl font-bold leading-tight tracking-tight text-primary",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"49",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"post",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"title"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"50",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"51",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"p"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"text-lg leading-tight text-secondary md:text-xl",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"52",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"post",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"summary"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"53",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"54",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"55",children:(0,n.jsx)(e.span,{className:"token plain-text",children:` `})}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"56",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"flex max-w-full items-center gap-4 justify-between",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"57",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"leading-tight",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"58",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"p"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"font-medium text-primary",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:"Milkias Hailu"}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"59",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"p"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"text-secondary",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"60",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"time"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"dateTime"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"post",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"publishedAt"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"61",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token function",children:"formatDate"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"post",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"publishedAt"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"62",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"63",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"post",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"updatedAt"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"?"})," ",(0,n.jsxs)(e.span,{className:"token template-string",children:[(0,n.jsx)(e.span,{className:"token template-punctuation string",children:"`"}),(0,n.jsx)(e.span,{className:"token string",children:"(Updated "}),(0,n.jsxs)(e.span,{className:"token interpolation",children:[(0,n.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"${"}),(0,n.jsx)(e.span,{className:"token function",children:"formatDate"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"post",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),"updatedAt",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token string",children:")"}),(0,n.jsx)(e.span,{className:"token template-punctuation string",children:"`"})]})," ",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'""'}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"64",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token string",children:'" \xB7 "'}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"65",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"66",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"67",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"68",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"69",children:(0,n.jsx)(e.span,{className:"token plain-text",children:` `})}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"70",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"post",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"image"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"&&"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"71",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token tag",children:(0,n.jsx)(e.span,{className:"token punctuation",children:"<"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"72",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"h-8",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"73",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"Image"})]}),` `]})]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"74",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"src"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"post",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"image"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"75",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"alt"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsxs)(e.span,{className:"token template-string",children:[(0,n.jsx)(e.span,{className:"token template-punctuation string",children:"`"}),(0,n.jsxs)(e.span,{className:"token interpolation",children:[(0,n.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"${"}),"post",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),"title",(0,n.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token string",children:" post image"}),(0,n.jsx)(e.span,{className:"token template-punctuation string",children:"`"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"76",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"width"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token number",children:"700"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"77",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"height"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token number",children:"350"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"78",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"max-w-full h-full animate-in mx-auto",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"79",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"style"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token string-property property",children:'"--index"'}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"2"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"as"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"React"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"CSSProperties"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"80",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"priority"}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"81",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"quality"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token number",children:"100"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"82",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"layout"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"responsive",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(e.span,{className:"token comment",children:"// Ensure the image scales with the size of the container"}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"83",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"sizes"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 700px",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(e.span,{className:"token comment",children:"//"}),` `]})}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"84",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"85",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token tag",children:(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"86",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"87",children:(0,n.jsx)(e.span,{className:"token plain-text",children:` `})}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"88",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"h-16",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"89",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]}),` `]})]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"90",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"prose prose-neutral animate-in max-w-full",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"91",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"style"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token string-property property",children:'"--index"'}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"3"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"as"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"React"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"CSSProperties"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"92",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"93",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"Mdx"})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"code"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"post",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"body"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"code"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"94",children:(0,n.jsx)(e.span,{className:"token plain-text",children:` //^^ Mdc component to render `})}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"95",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"96",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"97",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"98",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"99",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"100",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"101",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"default"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"SingleBlog"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"102",children:` `})]})}),` `,(0,n.jsxs)(e.blockquote,{children:[` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.em,{children:(0,n.jsx)(e.strong,{children:"And with that You have successfully Rendered Your First Blog page, Way to go!"})})}),` `]}),` `,(0,n.jsx)(e.h3,{id:"resources",children:"Resources"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:"https://contentlayer.dev/",children:"Contentlayer website"})}),` `,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:"https://nextjs.org/docs/getting-started/installation",children:"Next Js docs"})}),` `,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:"https://mdxjs.com/",children:"MDX"})}),` `]})]})}function w(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,Object.assign({},a,{children:(0,n.jsx)(p,a)})):p(a)}var f=w;function v(a,e){throw new Error("Expected "+(e?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return y(q);})(); ;return Component;

Milkias Portfolio

Socials