var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var A=(e,l)=>()=>(l||e((l={exports:{}}).exports,l),l.exports),D=(e,l)=>{for(var r in l)o(e,r,{get:l[r],enumerable:!0})},a=(e,l,r,c)=>{if(l&&typeof l=="object"||typeof l=="function")for(let s of y(l))!C.call(e,s)&&s!==r&&o(e,s,{get:()=>l[s],enumerable:!(c=p(l,s))||c.enumerable});return e};var g=(e,l,r)=>(r=e!=null?h(B(e)):{},a(l||!e||!e.__esModule?o(r,"default",{value:e,enumerable:!0}):r,e)),m=e=>a(o({},"__esModule",{value:!0}),e);var i=A((w,t)=>{t.exports=_jsx_runtime});var x={};D(x,{default:()=>f,frontmatter:()=>u});var n=g(i()),u={title:"Creating a blog with Next.js and Markdown",date:new Date(17184096e5),description:"A guide on the process for creating a blog using Next.js, Contentlayer and mdx"};function d(e){let l=Object.assign({p:"p",h4:"h4",a:"a",span:"span",blockquote:"blockquote",h2:"h2",code:"code",h3:"h3",figure:"figure",pre:"pre",ul:"ul",li:"li",em:"em"},e.components),{Callout:r}=l;return r||b("Callout",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(r,{children:(0,n.jsx)(l.p,{children:`I\u2019m taking a very meta approach and making my first blog post about creating this very blog.`})}),` `,(0,n.jsxs)(l.h4,{id:"minor-backstory",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#minor-backstory",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Minor backstory"]}),` `,(0,n.jsxs)(l.blockquote,{children:[` `,(0,n.jsx)(l.p,{children:"I\u2019ve recently re-done my personal website as the previous version was built back in 2020, and as we know technology and preferences, especially around the JS ecosystem change very quickly so now felt like a great time to ditch the pages router and styled-components in favour of the app router and tailwind."}),` `]}),` `,(0,n.jsxs)(l.blockquote,{children:[` `,(0,n.jsxs)(l.p,{children:["In the past, I\u2019ve done the odd medium post or document at work but have never really had a platform to just speak my mind or ever had the want to do so, but at SoPost I\u2019ve been working much closer to the product side. We\u2019ve been adopting some of the ideas and processes from the team at ",(0,n.jsx)(l.a,{href:"https://37signals.com/",children:"37signals"})," which has been inspiring and has lead to me reading ",(0,n.jsx)(l.a,{href:"https://basecamp.com/gettingreal",children:"Getting Real"})," and wanting to do some more side projects and document my learnings as I attempt things like infrastructure as code, product design and marketing from the perspective of a Software Engineer."]}),` `]}),` `,(0,n.jsxs)(l.h2,{id:"getting-started",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#getting-started",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Getting started"]}),` `,(0,n.jsx)(r,{children:(0,n.jsxs)(l.p,{children:[`This guide assumes that you have basic knowledge of working with git, the command line and Next.js, if you aren\u2019t too familiar with Next.js, I\u2019d recommend going through `,(0,n.jsx)(l.a,{href:"https://nextjs.org/learn",children:"Next.js Learn"}),"."]})}),` `,(0,n.jsxs)(l.p,{children:["If you\u2019re starting from scratch you\u2019ll want to create a new app with ",(0,n.jsx)(l.a,{href:"https://nextjs.org/docs/app/api-reference/create-next-app",children:"create-next-app"})," making sure that you are using tailwind and typescript (accepting all the defaults is pretty safe), you can call this whatever you want i.e. ",(0,n.jsx)(l.code,{children:"danbillson.com"})," or ",(0,n.jsx)(l.code,{children:"blog"}),", etc. optionally, I\u2019d also recommend getting set up with ",(0,n.jsx)(l.a,{href:"https://ui.shadcn.com/docs/installation/next",children:"shadcn/ui"}),", now we can start setting up Contentlayer which will be a very similar guide to the one of ",(0,n.jsx)(l.a,{href:"https://contentlayer.dev/docs/getting-started-cddd76b7#install-dependencies",children:"their site"}),"."]}),` `,(0,n.jsxs)(l.h3,{id:"install-dependencies",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#install-dependencies",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Install dependencies"]}),` `,(0,n.jsxs)(l.p,{children:["Install contentlayer, the Next.js plugin, a set of date formatting utils, and ",(0,n.jsx)(l.a,{href:"https://contentlayer.dev/docs/getting-started-cddd76b7#install-dependencies",children:"tailwind typography"}),"."]}),` `,(0,n.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#FAFBFC",color:"#565869"},tabIndex:"0","data-language":"bash","data-theme":"snazzy-light",children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"snazzy-light",style:{display:"grid"},children:(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#09A1ED"},children:"npm"}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:" install"}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:" contentlayer"}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:" next-contentlayer"}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:" date-fns"}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:" @tailwindcss/typography"})]})})})}),` `,(0,n.jsxs)(l.h3,{id:"hook-up-contentlayer",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#hook-up-contentlayer",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Hook up Contentlayer"]}),` `,(0,n.jsxs)(l.p,{children:["This will allow us to have hot reloading when editing markdown files thanks to the ",(0,n.jsx)(l.code,{children:"withContentLayer"})," higher-order function."]}),` `,(0,n.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#FAFBFC",color:"#565869"},tabIndex:"0","data-language":"jsx","data-theme":"snazzy-light",children:(0,n.jsxs)(l.code,{"data-language":"jsx","data-theme":"snazzy-light",style:{display:"grid"},children:[(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"// next.config.mjs"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" withContentlayer "}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"next-contentlayer"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"/** @"}),(0,n.jsx)(l.span,{style:{color:"#9194A2"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#2DAE58"},children:"import('next').NextConfig"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"} */"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" nextConfig "}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" reactStrictMode"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#2DAE58"},children:" true"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"};"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" default"}),(0,n.jsx)(l.span,{style:{color:"#09A1ED"},children:" withContentlayer"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"nextConfig"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:");"})]})]})})}),` `,(0,n.jsxs)(l.h3,{id:"update-tsconfigjson",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#update-tsconfigjson",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Update tsconfig.json"]}),` `,(0,n.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#FAFBFC",color:"#565869"},tabIndex:"0","data-language":"json","data-theme":"snazzy-light",children:(0,n.jsxs)(l.code,{"data-language":"json","data-theme":"snazzy-light",style:{display:"grid"},children:[(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"// tsconfig.json"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"{"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#11658F"},children:"compilerOptions"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#11658F"},children:"baseUrl"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" // ^^^^^^^^^^^"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#11658F"},children:"paths"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#11658F"},children:"contentlayer/generated"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"./.contentlayer/generated"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"]"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" }"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" },"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#11658F"},children:"include"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" ["})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"next-env.d.ts"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"**/*.ts"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"**/*.tsx"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:".next/types/**/*.ts"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:".contentlayer/generated"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" // ^^^^^^^^^^^^^^^^^^^^^^"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" ]"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"}"})})]})})}),` `,(0,n.jsxs)(l.h3,{id:"ignore-the-built-files",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#ignore-the-built-files",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Ignore the built files"]}),` `,(0,n.jsx)(l.p,{children:"We need to make sure we aren\u2019t committing the cached build files to git."}),` `,(0,n.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#FAFBFC",color:"#565869"},tabIndex:"0","data-language":"bash","data-theme":"snazzy-light",children:(0,n.jsxs)(l.code,{"data-language":"bash","data-theme":"snazzy-light",style:{display:"grid"},children:[(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"# .gitignore"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"# ..."})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"# contentlayer"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#09A1ED"},children:".contentlayer"})})]})})}),` `,(0,n.jsxs)(l.h2,{id:"get-ready-for-some-content",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#get-ready-for-some-content",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Get ready for some content"]}),` `,(0,n.jsxs)(l.p,{children:["This is where we venture a little further away from the Contentlayer guide and more towards ",(0,n.jsx)(l.a,{href:"https://github.com/shadcn-ui/taxonomy",children:"shadcn/taxonomy"})," as we are going to put our blog posts on the ",(0,n.jsx)(l.code,{children:"/blog"})," path and allow nested directories to support categories, if you just want the whole site to be a blog on the root then you can follow along closer to the ",(0,n.jsx)(l.a,{href:"https://contentlayer.dev/docs/getting-started-cddd76b7#2-define-content-schema",children:"Contentlayer guide"}),"."]}),` `,(0,n.jsxs)(l.h3,{id:"add-contentlayer-config-file",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#add-contentlayer-config-file",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Add Contentlayer config file"]}),` `,(0,n.jsx)(l.p,{children:"This is where we\u2019re going to define the schema for our blog posts."}),` `,(0,n.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#FAFBFC",color:"#565869"},tabIndex:"0","data-language":"jsx","data-theme":"snazzy-light",children:(0,n.jsxs)(l.code,{"data-language":"jsx","data-theme":"snazzy-light",style:{display:"grid"},children:[(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"// contentlayer.config.js"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" defineDocumentType"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:","}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" makeSource "}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"contentlayer/source-files"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"/** @"}),(0,n.jsx)(l.span,{style:{color:"#9194A2"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#2DAE58"},children:"import('contentlayer/source-files').ComputedFields"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"} */"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" computedFields "}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" slug"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" type"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#09A1ED"},children:" resolve"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"doc"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" `"}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"/"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"doc"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"_raw"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"flattenedPath"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"}`"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" },"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" slugAsParams"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" type"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#09A1ED"},children:" resolve"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"doc"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" doc"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"_raw"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"flattenedPath"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#09A1ED"},children:"split"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"/"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:")."}),(0,n.jsx)(l.span,{style:{color:"#09A1ED"},children:"slice"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FF5C57"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:")."}),(0,n.jsx)(l.span,{style:{color:"#09A1ED"},children:"join"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"/"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"),"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" },"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"};"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" Post "}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#09A1ED"},children:" defineDocumentType"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"(()"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" ({"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" name"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"Post"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" filePathPattern"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" `"}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"blog/**/*.md"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" fields"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" title"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" type"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:","}),(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" required"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#2DAE58"},children:" true"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" },"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" description"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" type"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" },"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" date"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" type"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"date"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:","}),(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" required"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#2DAE58"},children:" true"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" },"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" published"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" type"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"boolean"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" default"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#2DAE58"},children:" true"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" },"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" },"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#565869"},children:" computedFields"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"}));"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" default"}),(0,n.jsx)(l.span,{style:{color:"#09A1ED"},children:" makeSource"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" contentDirPath"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"./content"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" documentTypes"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"Post"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"],"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"});"})})]})})}),` `,(0,n.jsxs)(l.p,{children:["This expects us to put all of our markdown files in the ",(0,n.jsx)(l.code,{children:"content/blog"})," directory."]}),` `,(0,n.jsxs)(l.h3,{id:"create-your-first-post",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#create-your-first-post",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Create your first post"]}),` `,(0,n.jsxs)(l.p,{children:["Create a new file at ",(0,n.jsx)(l.code,{children:"content/blog/post-01.md"})," and start writing your first post, an example of this file could look like this:"]}),` `,(0,n.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#FAFBFC",color:"#565869"},tabIndex:"0","data-language":"markdown","data-theme":"snazzy-light",children:(0,n.jsxs)(l.code,{"data-language":"markdown","data-theme":"snazzy-light",style:{display:"grid"},children:[(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#565869"},children:"---"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#11658F"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:" My First Post"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#11658F"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:" This is my first blog post"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#11658F"},children:"date"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#2DAE58"},children:" 2024-06-15"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#565869"},children:"---"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#565869"},children:"Mum, get the camera \u{1F4F7}"})})]})})}),` `,(0,n.jsxs)(l.h2,{id:"add-the-blog-routes",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#add-the-blog-routes",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Add the blog routes"]}),` `,(0,n.jsxs)(l.p,{children:["Spin up the development server with ",(0,n.jsx)(l.code,{children:"npm run dev"})," (or your package manager equivalent) which should generate the blog posts which can be imported."]}),` `,(0,n.jsxs)(l.h3,{id:"blog-listings",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#blog-listings",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Blog listings"]}),` `,(0,n.jsxs)(l.p,{children:["Create a new file at ",(0,n.jsx)(l.code,{children:"app/blog/page.tsx"})," which will be the page to list all of the blog posts, copy and edit the following as you see fit:"]}),` `,(0,n.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#FAFBFC",color:"#565869"},tabIndex:"0","data-language":"jsx","data-theme":"snazzy-light",children:(0,n.jsxs)(l.code,{"data-language":"jsx","data-theme":"snazzy-light",style:{display:"grid"},children:[(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"// app/blog/page.tsx"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" formatDate "}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"@/lib/utils"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" allPosts "}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"contentlayer/generated"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" compareDesc "}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"date-fns"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" type"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" Metadata "}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"next"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" Link "}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"next/link"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" metadata"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#2DAE58"},children:" Metadata"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" title"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"Blog"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"};"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" default"}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#09A1ED"},children:" Blog"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" posts "}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" allPosts"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#09A1ED"},children:"sort"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"a"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:","}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" b"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" =>"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#09A1ED"},children:" compareDesc"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:"new"}),(0,n.jsx)(l.span,{style:{color:"#09A1ED"},children:" Date"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"a"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"date"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"),"}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" new"}),(0,n.jsx)(l.span,{style:{color:"#09A1ED"},children:" Date"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"b"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"date"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:")),"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" );"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#13BBB7"},children:"section"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#13BBB7"},children:"h1"}),(0,n.jsx)(l.span,{style:{color:"#FF8380"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"font-medium text-2xl mt-14 mb-8 tracking-tighter"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#686968"},children:"blog"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:""})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"posts"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"?."}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"length"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" ?"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#13BBB7"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#FF8380"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"grid gap-10 sm:grid-cols-2"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"posts"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#09A1ED"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"post"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:","}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" index"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#13BBB7"},children:"article"}),(0,n.jsx)(l.span,{style:{color:"#FF8380"},children:" key"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"post"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"_id"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#FF8380"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"group relative flex flex-col"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#13BBB7"},children:"h2"}),(0,n.jsx)(l.span,{style:{color:"#FF8380"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"text-2xl font-medium"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:">{"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"post"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"post"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"date"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" &&"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#13BBB7"},children:"time"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF8380"},children:" dateTime"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"post"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"date"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF8380"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"text-sm text-muted-foreground"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" >"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#09A1ED"},children:"formatDate"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"post"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"date"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:")}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" )}"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"post"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" &&"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#13BBB7"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#FF8380"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"text-muted-foreground mt-4"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:">{"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"post"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"}"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" )}"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#13BBB7"},children:"Link"}),(0,n.jsx)(l.span,{style:{color:"#FF8380"},children:" href"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"post"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"slug"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#FF8380"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"absolute inset-0"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#13BBB7"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#FF8380"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"sr-only"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#686968"},children:"View Article"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:""})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" ))}"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" )"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" :"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#13BBB7"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#686968"},children:"No posts published."}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:""})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" )}"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" );"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"}"})})]})})}),` `,(0,n.jsxs)(l.p,{children:["Now if you go to ",(0,n.jsx)(l.a,{href:"http://localhost:3000/blog",children:(0,n.jsx)(l.code,{children:"localhost:3000/blog"})})," you should be greeted with a nice, fresh blog listings page."]}),` `,(0,n.jsxs)(l.h3,{id:"blog-posts",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#blog-posts",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Blog posts"]}),` `,(0,n.jsxs)(l.p,{children:["If you\u2019ve tried clicking through to your post, you may have noticed that you get a 404, now we\u2019ll add the route to handle blog posts. Create a new file at ",(0,n.jsx)(l.code,{children:"app/blog/[...slug]/page.tsx"})," and add the following:"]}),` `,(0,n.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#FAFBFC",color:"#565869"},tabIndex:"0","data-language":"jsx","data-theme":"snazzy-light",children:(0,n.jsxs)(l.code,{"data-language":"jsx","data-theme":"snazzy-light",style:{display:"grid"},children:[(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"// app/blog/[...slug]/page.tsx"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" formatDate "}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"@/lib/utils"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" allPosts "}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"contentlayer/generated"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" type"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" Metadata "}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"next"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" notFound "}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"next/navigation"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" BlogPostProps "}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#565869"},children:" params"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" slug"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#2DAE58"},children:" string"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"[]"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" };"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"};"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:"async"}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#09A1ED"},children:" getPostFromParams"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"params"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#2DAE58"},children:" BlogPostProps"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"params"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"])"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" slug "}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" params"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"?."}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"slug"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"?."}),(0,n.jsx)(l.span,{style:{color:"#09A1ED"},children:"join"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"/"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:");"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" post "}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" allPosts"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#09A1ED"},children:"find"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"post"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" post"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"slugAsParams "}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" slug"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:");"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" (!"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"post"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#2DAE58"},children:" null"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" }"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" post"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"}"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" async"}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#09A1ED"},children:" generateMetadata"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#565869"},children:" params"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"}:"}),(0,n.jsx)(l.span,{style:{color:"#2DAE58"},children:" BlogPostProps"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"):"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" Promise"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"Metadata"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" post "}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" await"}),(0,n.jsx)(l.span,{style:{color:"#09A1ED"},children:" getPostFromParams"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"params"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:");"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" (!"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"post"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {};"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" }"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" title"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" post"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:","}),(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" description"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" post"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"description "}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"};"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"}"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#09A1ED"},children:" generateStaticParams"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" async"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" ()"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" =>"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#565869"},children:" allPosts"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#09A1ED"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"post"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" ({"}),(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" slug"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" post"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"slugAsParams"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#09A1ED"},children:"split"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"/"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" }));"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" default"}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" async"}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#09A1ED"},children:" BlogPost"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"({"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" params "}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"}:"}),(0,n.jsx)(l.span,{style:{color:"#2DAE58"},children:" BlogPostProps"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" post "}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" await"}),(0,n.jsx)(l.span,{style:{color:"#09A1ED"},children:" getPostFromParams"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"params"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:");"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" (!"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"post"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#09A1ED"},children:" notFound"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"();"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" }"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#13BBB7"},children:"article"}),(0,n.jsx)(l.span,{style:{color:"#FF8380"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"py-8"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#13BBB7"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#FF8380"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"mb-8 text-center prose prose-neutral"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#13BBB7"},children:"time"}),(0,n.jsx)(l.span,{style:{color:"#FF8380"},children:" dateTime"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"post"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"date"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#FF8380"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"mb-1 text-xs text-gray-600"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#09A1ED"},children:"formatDate"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"post"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"date"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:")}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#13BBB7"},children:"h1"}),(0,n.jsx)(l.span,{style:{color:"#FF8380"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"text-3xl font-medium"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:">{"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"post"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#13BBB7"},children:"div"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF8380"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"[&>*]:mb-3 [&>*:last-child]:mb-0"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF8380"},children:" dangerouslySetInnerHTML"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"={{ "}),(0,n.jsx)(l.span,{style:{color:"#11658F"},children:"__html"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"post"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"body"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"html"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" }}"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" />"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" );"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"}"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "})]})})}),` `,(0,n.jsx)(r,{children:(0,n.jsxs)(l.p,{children:["If things aren\u2019t quite working as expected, you can check out this ",(0,n.jsx)(l.a,{href:"https://github.com/danbillson/danbillson.com/pull/1",children:`pull request`}),` to see all of the changes that were added whilst I was setting up this blog.`]})}),` `,(0,n.jsxs)(l.p,{children:["This should now be enough to get you up and running with a simple blog using markdown, you can now continue creating files in the ",(0,n.jsx)(l.code,{children:"content/blog"})," directory or we can keep going and add support for ",(0,n.jsx)(l.a,{href:"https://mdxjs.com/",children:"MDX"}),"."]}),` `,(0,n.jsxs)(l.h2,{id:"bonus-round-mdx",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#bonus-round-mdx",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Bonus round: MDX"]}),` `,(0,n.jsx)(l.p,{children:"If you\u2019re considering starting a blog that involves some sort of coding discipline then you may want to continue as we\u2019re going to look at how to get these super nice code snippets and be able to render custom React components in markdown."}),` `,(0,n.jsx)(r,{children:(0,n.jsxs)(l.p,{children:[`This section is a little more involved in the last section so here is a link to the `,(0,n.jsx)(l.a,{href:"https://github.com/danbillson/danbillson.com/pull/2",children:"pull request"}),` that added support for MDX as you\u2019ll probably want to copy and paste `,(0,n.jsx)(l.code,{children:"components/mdx-components.tsx"})," , ",(0,n.jsx)(l.code,{children:"content/blog/engineering/test-03.mdx"}),` , `,(0,n.jsx)(l.code,{children:"styles/mdx.css"})," and maybe a couple of others if you want."]})}),` `,(0,n.jsxs)(l.h3,{id:"install-more-dependencies",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#install-more-dependencies",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Install more dependencies"]}),` `,(0,n.jsxs)(l.p,{children:["We're going to grab a few packages from the team at\xA0",(0,n.jsx)(l.a,{href:"https://github.com/unifiedjs",children:"@unifiedjs"}),"\xA0such as\xA0",(0,n.jsx)(l.a,{href:"https://github.com/remarkjs/remark",children:"remark"}),"\xA0for MDX parsing and\xA0",(0,n.jsx)(l.a,{href:"https://github.com/rehypejs/rehype",children:"rehype"}),"\xA0for code highlighting."]}),` `,(0,n.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#FAFBFC",color:"#565869"},tabIndex:"0","data-language":"jsx","data-theme":"snazzy-light",children:(0,n.jsx)(l.code,{"data-language":"jsx","data-theme":"snazzy-light",style:{display:"grid"},children:(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#565869"},children:"npm install "}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"D rehype rehype"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"autolink"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"headings rehype"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"pretty"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"code rehype"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"slug remark remark"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"gfm@"}),(0,n.jsx)(l.span,{style:{color:"#FF5C57"},children:"3.0"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FF5C57"},children:"1"})]})})})}),` `,(0,n.jsxs)(l.h3,{id:"update-contentlayer-config",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#update-contentlayer-config",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Update Contentlayer config"]}),` `,(0,n.jsx)(l.p,{children:"This just shows some of the additions, not the whole file"}),` `,(0,n.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#FAFBFC",color:"#565869"},tabIndex:"0","data-language":"jsx","data-theme":"snazzy-light",children:(0,n.jsxs)(l.code,{"data-language":"jsx","data-theme":"snazzy-light",style:{display:"grid"},children:[(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"// contentlayer.config.js"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"// add new imports"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" rehypeAutolinkHeadings "}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"rehype-autolink-headings"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" rehypePrettyCode "}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"rehype-pretty-code"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" rehypeSlug "}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"rehype-slug"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" remarkGfm "}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"remark-gfm"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"// update our posts to use mdx"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" Post "}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#09A1ED"},children:" defineDocumentType"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"(()"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" ({"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" name"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"Post"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" filePathPattern"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" `"}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"blog/**/*.mdx"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" contentType"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"mdx"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" ..."})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"}));"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"// add remark and rehype plugins"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" default"}),(0,n.jsx)(l.span,{style:{color:"#09A1ED"},children:" makeSource"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" contentDirPath"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"./content"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" documentTypes"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"Post"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"],"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" mdx"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" remarkPlugins"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"remarkGfm"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"],"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" rehypePlugins"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" ["})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#565869"},children:" rehypeSlug"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" ["})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#565869"},children:" rehypePrettyCode"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" theme"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"snazzy-light"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#09A1ED"},children:" onVisitLine"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"node"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"node"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"length "}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#FF5C57"},children:" 0"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#565869"},children:" node"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"children "}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" [{"}),(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" type"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"text"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:","}),(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" value"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" }];"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" }"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" },"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" },"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" ],"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" ["})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#565869"},children:" rehypeAutolinkHeadings"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" properties"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"subheading-anchor"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"],"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#11658F"},children:" ariaLabel"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"Link to section"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" },"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" },"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" ],"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" ],"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" },"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"});"})})]})})}),` `,(0,n.jsxs)(l.h3,{id:"add-mdx-components",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#add-mdx-components",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Add MDX components"]}),` `,(0,n.jsxs)(l.p,{children:["Copy any new files from this ",(0,n.jsx)(l.a,{href:"https://github.com/danbillson/danbillson.com/pull/2/files#diff-18f8a46c0c7267228f09602da973c922e45bd61a872bb9dbfa8edf5145d4a292",children:"pull request"})]}),` `,(0,n.jsxs)(l.ul,{children:[` `,(0,n.jsx)(l.li,{children:(0,n.jsx)(l.code,{children:"components/mdx-components.tsx"})}),` `,(0,n.jsx)(l.li,{children:(0,n.jsx)(l.code,{children:"components/mdx-card.tsx"})}),` `,(0,n.jsx)(l.li,{children:(0,n.jsx)(l.code,{children:"components/callout.tsx"})}),` `,(0,n.jsx)(l.li,{children:(0,n.jsx)(l.code,{children:"styles/mdx.css"})}),` `]}),` `,(0,n.jsxs)(l.h3,{id:"update-the-blog-post-page",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#update-the-blog-post-page",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Update the blog post page"]}),` `,(0,n.jsxs)(l.p,{children:["Import and use the new ",(0,n.jsx)(l.code,{children:"Mdx"})," component"]}),` `,(0,n.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#FAFBFC",color:"#565869"},tabIndex:"0","data-language":"jsx","data-theme":"snazzy-light",children:(0,n.jsxs)(l.code,{"data-language":"jsx","data-theme":"snazzy-light",style:{display:"grid"},children:[(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"// app/blog/[...slug]/page.tsx"})}),` `,(0,n.jsxs)(l.span,{"data-line":"","data-highlighted-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"+"}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" import"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" Mdx "}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#F767BB"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"@/components/mdx-components"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"","data-highlighted-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"+."}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" import "}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"@/styles/mdx.css"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"div"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#CF9C00"},children:"[&>*]:mb-3 [&>*:last-child]:mb-0"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:'"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" dangerouslySetInnerHTML"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"={{"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" __html"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:" post"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"body"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"html "}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"}}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"","data-highlighted-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"+"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"Mdx code"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#565869"},children:"post.body.code"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#ADB1C2"},children:" />"})]})]})})}),` `,(0,n.jsxs)(l.p,{children:["With this, you should be able to test the ",(0,n.jsx)(l.a,{href:"https://github.com/danbillson/danbillson.com/pull/2/files#diff-f054cb896a220d4d935d783c788b4c366eec9cf000c2d4a347bcb5a485f117a4",children:"example .mdx"})," file to make sure everything is working properly, if not, double-check the changes made in the ",(0,n.jsx)(l.a,{href:"https://github.com/danbillson/danbillson.com/pull/2",children:"pull request"})," to see if anything has been missed."]}),` `,(0,n.jsxs)(l.h2,{id:"start-your-blog",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#start-your-blog",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Start your blog"]}),` `,(0,n.jsxs)(l.p,{children:["Now it\u2019s time to write your own blog post, since this is my first post I don't have too much valuable advice but, start with the things that you're passionate about or learning at the moment and don't be afraid to write about topics that you think are obvious or that people wouldn\u2019t get much value from; ",(0,n.jsx)(l.em,{children:"something that is obvious to you might be really interesting or inspiring to someone else"}),"."]}),` `,(0,n.jsxs)(l.p,{children:["For further advice on starting a blog, I\u2019d recommend going and watching ",(0,n.jsx)(l.a,{href:"https://youtu.be/vyVpRiqOvt4?feature=shared",children:"Ali Abdaal\u2019s video"})," on how he went about starting a blog and the lessons he has learned from doing so."]})]})}function F(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,Object.assign({},e,{children:(0,n.jsx)(d,e)})):d(e)}var f=F;function b(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return m(x);})(); ;return Component;

blog

AI vs Advent of Code

Top 10 bars/pubs in London

Top 10 Takeaways from Getting Real

Creating a blog with Next.js and Markdown