{"pageProps":{"post":{"mdxSource":"var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var r=a=>t(a,\"__esModule\",{value:!0});var g=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),f=(a,e)=>{r(a);for(var s in e)t(a,s,{get:e[s],enumerable:!0})},y=(a,e,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of u(e))!k.call(a,c)&&c!==\"default\"&&t(a,c,{get:()=>e[c],enumerable:!(s=m(e,c))||s.enumerable});return a},b=a=>y(r(t(a!=null?h(N(a)):{},\"default\",a&&a.__esModule&&\"default\"in a?{get:()=>a.default,enumerable:!0}:{value:a,enumerable:!0})),a);var p=g((I,d)=>{d.exports=_jsx_runtime});var j={};f(j,{default:()=>v,frontmatter:()=>w});var n=b(p());function l({children:a}){return React.createElement(\"h1\",{className:\"text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-5xl md:leading-14\"},a)}var w={title:\"New features in v1\",date:new Date(1628350334e3),lastmod:\"2021-10-27\",tags:[\"next-js\",\"tailwind\",\"guide\"],draft:!1,summary:\"An overview of the new features released in v1 - code block copy, multiple authors, frontmatter layout and more\",layout:\"PostSimple\"};function x(a){let e=Object.assign({h2:\"h2\",a:\"a\",span:\"span\",p:\"p\",sup:\"sup\",pre:\"pre\",code:\"code\",strong:\"strong\",h3:\"h3\",em:\"em\",ul:\"ul\",li:\"li\",section:\"section\",hr:\"hr\",ol:\"ol\"},a.components),{TOCInline:s,BlogNewsletterForm:c,wrapper:i}=e,o=(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.h2,{id:\"overview\",children:[(0,n.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#overview\",children:(0,n.jsx)(e.span,{className:\"icon icon-link\"})}),\"Overview\"]}),`\n`,(0,n.jsx)(e.p,{children:\"A post on the new features introduced in v1.0. New features:\"}),`\n`,(0,n.jsx)(s,{toc:a.toc,exclude:\"Overview\",toHeading:2}),`\n`,(0,n.jsxs)(e.p,{children:[\"First load JS decreased from 43kB to 39kB despite all the new features added!\",(0,n.jsx)(e.a,{href:\"#fn1\",className:\"footnote-ref\",id:\"fnref1\",role:\"doc-noteref\",children:(0,n.jsx)(e.sup,{children:\"1\"})})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"See \",(0,n.jsx)(e.a,{href:\"#upgrade-guide\",children:\"upgrade guide\"}),\" below if you are migrating from v0 version of the template.\"]}),`\n`,(0,n.jsxs)(e.h2,{id:\"theme-colors\",children:[(0,n.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#theme-colors\",children:(0,n.jsx)(e.span,{className:\"icon icon-link\"})}),\"Theme colors\"]}),`\n`,(0,n.jsx)(e.p,{children:\"You can easily modify the theme color by changing the primary attribute in the tailwind config file:\"}),`\n`,(0,n.jsx)(\"div\",{className:\"remark-code-title\",children:\"tailwind.config.js\"}),`\n`,(0,n.jsx)(e.pre,{className:\"language-js\",children:(0,n.jsxs)(e.code,{className:\"language-js code-highlight\",children:[(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"theme\",(0,n.jsx)(e.span,{className:\"token operator\",children:\":\"}),\" \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"{\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"    colors\",(0,n.jsx)(e.span,{className:\"token operator\",children:\":\"}),\" \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"{\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      primary\",(0,n.jsx)(e.span,{className:\"token operator\",children:\":\"}),\" colors\",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\".\"}),(0,n.jsx)(e.span,{className:\"token property-access\",children:\"teal\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      gray\",(0,n.jsx)(e.span,{className:\"token operator\",children:\":\"}),\" colors\",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\".\"}),(0,n.jsx)(e.span,{className:\"token property-access\",children:\"trueGray\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      \",(0,n.jsx)(e.span,{className:\"token spread operator\",children:\"...\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"    \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"  \",(0,n.jsx)(e.span,{className:\"token spread operator\",children:\"...\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"}),`\n`]})]})}),`\n`,(0,n.jsx)(e.p,{children:\"The primary color attribute should be assigned an object with keys from 50, 100, 200 ... 900 and the corresponding color code values.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Tailwind includes great default color palettes that can be used for theming your own website. Check out \",(0,n.jsx)(e.a,{href:\"https://tailwindcss.com/docs/customizing-colors\",children:\"customizing colors documentation page\"}),\" for the full range of options.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Migrating from v1? You can revert to the previous theme by setting \",(0,n.jsx)(e.code,{children:\"primary\"}),\" to \",(0,n.jsx)(e.code,{children:\"colors.sky\"}),\" (Tailwind 2.2.2 and above, otherwise \",(0,n.jsx)(e.code,{children:\"colors.lightBlue\"}),\") and changing gray to \",(0,n.jsx)(e.code,{children:\"colors.coolGray\"}),\".\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"From v1.1.2+, you can also customize the style of your code blocks easily by modifying the \",(0,n.jsx)(e.code,{children:\"css/prism.css\"}),` stylesheet. Token classnames are compatible with prismjs\nso you can copy and adapt token styles from a prismjs stylesheet e.g. `,(0,n.jsx)(e.a,{href:\"https://github.com/PrismJS/prism-themes\",children:\"prism themes\"}),\".\"]}),`\n`,(0,n.jsxs)(e.h2,{id:\"xdm-mdx-compiler\",children:[(0,n.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#xdm-mdx-compiler\",children:(0,n.jsx)(e.span,{className:\"icon icon-link\"})}),\"Xdm MDX compiler\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"We switched the MDX bundler from \",(0,n.jsx)(e.a,{href:\"https://github.com/hashicorp/next-mdx-remote\",children:\"next-mdx-remote\"}),\" to \",(0,n.jsx)(e.a,{href:\"https://github.com/kentcdodds/mdx-bundler\",children:\"mdx-bundler\"}),`.\nThis uses `,(0,n.jsx)(e.a,{href:\"https://github.com/wooorm/xdm\",children:\"xdm\"}),\" under the hood, the latest micromark 3 and remark, rehype libraries.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Warning:\"}),\" If you were using custom remark or rehype libraries, please upgrade to micromark 3 compatible ones. If you are upgrading, please delete \",(0,n.jsx)(e.code,{children:\"node_modules\"}),\" and \",(0,n.jsx)(e.code,{children:\"package-lock.json\"}),\" to avoid having past dependencies related issues.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.a,{href:\"https://github.com/wooorm/xdm\",children:\"xdm\"}),\" contains multiple improvements over \",(0,n.jsx)(e.a,{href:\"https://github.com/mdx-js/mdx\",children:\"@mdx-js/mdx\"}),`, the compiler used internally by next-mdx-remote, but there might be some breaking behaviour changes.\nPlease check your markdown output to verify.`]}),`\n`,(0,n.jsx)(e.p,{children:\"Some new possibilities include loading components directly in the mdx file using the import syntax and including js code which could be compiled and bundled at the build step.\"}),`\n`,(0,n.jsx)(e.p,{children:\"For example, the following jsx snippet can be used directly in an MDX file to render the page title component:\"}),`\n`,(0,n.jsx)(e.pre,{className:\"language-jsx\",children:(0,n.jsxs)(e.code,{className:\"language-jsx code-highlight\",children:[(0,n.jsxs)(e.span,{className:\"code-line\",children:[(0,n.jsx)(e.span,{className:\"token keyword module\",children:\"import\"}),\" \",(0,n.jsx)(e.span,{className:\"token imports\",children:(0,n.jsx)(e.span,{className:\"token maybe-class-name\",children:\"PageTitle\"})}),\" \",(0,n.jsx)(e.span,{className:\"token keyword module\",children:\"from\"}),\" \",(0,n.jsx)(e.span,{className:\"token string\",children:\"'./PageTitle.js'\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\";\"}),(0,n.jsxs)(e.span,{className:\"token tag\",children:[(0,n.jsxs)(e.span,{className:\"token tag\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"<\"}),(0,n.jsx)(e.span,{className:\"token class-name\",children:\"PageTitle\"})]}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\">\"})]}),(0,n.jsx)(e.span,{className:\"token plain-text\",children:\" Using JSX components in MDX \"}),(0,n.jsxs)(e.span,{className:\"token tag\",children:[(0,n.jsxs)(e.span,{className:\"token tag\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"</\"}),(0,n.jsx)(e.span,{className:\"token class-name\",children:\"PageTitle\"})]}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\">\"})]}),`\n`]})]})}),`\n`,`\n`,(0,n.jsx)(l,{children:\" Using JSX components in MDX \"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The default configuration resolves all components relative to the \",(0,n.jsx)(e.code,{children:\"components\"}),\" directory.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Note\"}),`:\nComponents which require external image loaders also require additional esbuild configuration.\nComponents which are dependent on global application state on lifecycle like the Nextjs `,(0,n.jsx)(e.code,{children:\"Link\"}),` component would also not work with this setup as each mdx file is built indepedently.\nFor such cases, it is better to use component substitution.`]}),`\n`,(0,n.jsxs)(e.h2,{id:\"table-of-contents-component\",children:[(0,n.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#table-of-contents-component\",children:(0,n.jsx)(e.span,{className:\"icon icon-link\"})}),\"Table of contents component\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Inspired by \",(0,n.jsx)(e.a,{href:\"https://docusaurus.io/docs/next/markdown-features/inline-toc\",children:\"Docusaurus\"}),\" and Gatsby's \",(0,n.jsx)(e.a,{href:\"https://www.gatsbyjs.com/plugins/gatsby-remark-table-of-contents/\",children:\"gatsby-remark-table-of-contents\"}),`,\nthe `,(0,n.jsx)(e.code,{children:\"toc\"}),` variable containing all the top level headings of the document is passed to the MDX file and can be styled accordingly.\nTo make generating a table of contents (TOC) simple, you can use the existing `,(0,n.jsx)(e.code,{children:\"TOCInline\"}),\" component.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"For example, the TOC in this post was generated with the following code:\"}),`\n`,(0,n.jsx)(e.pre,{className:\"language-jsx\",children:(0,n.jsx)(e.code,{className:\"language-jsx code-highlight\",children:(0,n.jsxs)(e.span,{className:\"code-line\",children:[(0,n.jsxs)(e.span,{className:\"token tag\",children:[(0,n.jsxs)(e.span,{className:\"token tag\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"<\"}),(0,n.jsx)(e.span,{className:\"token class-name\",children:\"TOCInline\"})]}),\" \",(0,n.jsx)(e.span,{className:\"token attr-name\",children:\"toc\"}),(0,n.jsxs)(e.span,{className:\"token script language-javascript\",children:[(0,n.jsx)(e.span,{className:\"token script-punctuation punctuation\",children:\"=\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"{\"}),\"props\",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\".\"}),(0,n.jsx)(e.span,{className:\"token property-access\",children:\"toc\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"})]}),\" \",(0,n.jsx)(e.span,{className:\"token attr-name\",children:\"exclude\"}),(0,n.jsxs)(e.span,{className:\"token attr-value\",children:[(0,n.jsx)(e.span,{className:\"token punctuation attr-equals\",children:\"=\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:'\"'}),\"Overview\",(0,n.jsx)(e.span,{className:\"token punctuation\",children:'\"'})]}),\" \",(0,n.jsx)(e.span,{className:\"token attr-name\",children:\"toHeading\"}),(0,n.jsxs)(e.span,{className:\"token script language-javascript\",children:[(0,n.jsx)(e.span,{className:\"token script-punctuation punctuation\",children:\"=\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"{\"}),(0,n.jsx)(e.span,{className:\"token number\",children:\"2\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"})]}),\" \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"/>\"})]}),`\n`]})})}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can customise the headings that are displayed by configuring the \",(0,n.jsx)(e.code,{children:\"fromHeading\"}),\" and \",(0,n.jsx)(e.code,{children:\"toHeading\"}),` props, or exclude particular headings\nby passing a string or a string array to the `,(0,n.jsx)(e.code,{children:\"exclude\"}),\" prop. By default, all headings that are of depth 3 or smaller are indented. This can be configured by changing the \",(0,n.jsx)(e.code,{children:\"indentDepth\"}),` property.\nA `,(0,n.jsx)(e.code,{children:\"asDisclosure\"}),\" prop can be used to render the TOC within an expandable disclosure element.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Here's the full TOC rendered in a disclosure element.\"}),`\n`,(0,n.jsx)(e.pre,{className:\"language-jsx\",children:(0,n.jsx)(e.code,{className:\"language-jsx code-highlight\",children:(0,n.jsxs)(e.span,{className:\"code-line\",children:[(0,n.jsxs)(e.span,{className:\"token tag\",children:[(0,n.jsxs)(e.span,{className:\"token tag\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"<\"}),(0,n.jsx)(e.span,{className:\"token class-name\",children:\"TOCInline\"})]}),\" \",(0,n.jsx)(e.span,{className:\"token attr-name\",children:\"toc\"}),(0,n.jsxs)(e.span,{className:\"token script language-javascript\",children:[(0,n.jsx)(e.span,{className:\"token script-punctuation punctuation\",children:\"=\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"{\"}),\"props\",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\".\"}),(0,n.jsx)(e.span,{className:\"token property-access\",children:\"toc\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"})]}),\" \",(0,n.jsx)(e.span,{className:\"token attr-name\",children:\"asDisclosure\"}),\" \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"/>\"})]}),`\n`]})})}),`\n`,(0,n.jsx)(s,{toc:a.toc,asDisclosure:!0}),`\n`,(0,n.jsxs)(e.h2,{id:\"layouts\",children:[(0,n.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#layouts\",children:(0,n.jsx)(e.span,{className:\"icon icon-link\"})}),\"Layouts\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can map mdx blog content to layout components by configuring the frontmatter field. For example, this post is written with the new \",(0,n.jsx)(e.code,{children:\"PostSimple\"}),\" layout!\"]}),`\n`,(0,n.jsxs)(e.h3,{id:\"adding-new-templates\",children:[(0,n.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#adding-new-templates\",children:(0,n.jsx)(e.span,{className:\"icon icon-link\"})}),\"Adding new templates\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"layout templates are stored in the \",(0,n.jsx)(e.code,{children:\"./layouts\"}),` folder. You can add your React components that you want to map to markdown content in this folder.\nThe component file name must match that specified in the markdown frontmatter `,(0,n.jsx)(e.code,{children:\"layout\"}),\" field.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The only required field is \",(0,n.jsx)(e.code,{children:\"children\"}),\" which contains the rendered MDX content, though you would probably want to pass in the frontMatter contents and render it in the template.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can configure the template to take in other fields - see \",(0,n.jsx)(e.code,{children:\"PostLayout\"}),\" component for an example.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Here's an example layout which you can further customise:\"}),`\n`,(0,n.jsx)(e.pre,{className:\"language-jsx\",children:(0,n.jsxs)(e.code,{className:\"language-jsx code-highlight\",children:[(0,n.jsxs)(e.span,{className:\"code-line\",children:[(0,n.jsx)(e.span,{className:\"token keyword module\",children:\"export\"}),\" \",(0,n.jsx)(e.span,{className:\"token keyword module\",children:\"default\"}),\" \",(0,n.jsx)(e.span,{className:\"token keyword\",children:\"function\"}),\" \",(0,n.jsx)(e.span,{className:\"token function\",children:(0,n.jsx)(e.span,{className:\"token maybe-class-name\",children:\"ExampleLayout\"})}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"(\"}),(0,n.jsxs)(e.span,{className:\"token parameter\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"{\"}),\" frontMatter\",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),\" children \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"})]}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\")\"}),\" \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"{\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"  \",(0,n.jsx)(e.span,{className:\"token keyword\",children:\"const\"}),\" \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"{\"}),\" date\",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),\" title \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"}),\" \",(0,n.jsx)(e.span,{className:\"token operator\",children:\"=\"}),` frontMatter\n`]}),(0,n.jsx)(e.span,{className:\"code-line\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"  \",(0,n.jsx)(e.span,{className:\"token keyword control-flow\",children:\"return\"}),\" \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"(\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"    \",(0,n.jsxs)(e.span,{className:\"token tag\",children:[(0,n.jsxs)(e.span,{className:\"token tag\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"<\"}),(0,n.jsx)(e.span,{className:\"token class-name\",children:\"SectionContainer\"})]}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\">\"})]}),(0,n.jsx)(e.span,{className:\"token plain-text\",children:`\n`})]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[(0,n.jsx)(e.span,{className:\"token plain-text\",children:\"      \"}),(0,n.jsxs)(e.span,{className:\"token tag\",children:[(0,n.jsxs)(e.span,{className:\"token tag\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"<\"}),\"div\"]}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\">\"})]}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"{\"}),\"date\",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"}),(0,n.jsxs)(e.span,{className:\"token tag\",children:[(0,n.jsxs)(e.span,{className:\"token tag\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"</\"}),\"div\"]}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\">\"})]}),(0,n.jsx)(e.span,{className:\"token plain-text\",children:`\n`})]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[(0,n.jsx)(e.span,{className:\"token plain-text\",children:\"      \"}),(0,n.jsxs)(e.span,{className:\"token tag\",children:[(0,n.jsxs)(e.span,{className:\"token tag\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"<\"}),\"h1\"]}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\">\"})]}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"{\"}),\"title\",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"}),(0,n.jsxs)(e.span,{className:\"token tag\",children:[(0,n.jsxs)(e.span,{className:\"token tag\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"</\"}),\"h1\"]}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\">\"})]}),(0,n.jsx)(e.span,{className:\"token plain-text\",children:`\n`})]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[(0,n.jsx)(e.span,{className:\"token plain-text\",children:\"      \"}),(0,n.jsxs)(e.span,{className:\"token tag\",children:[(0,n.jsxs)(e.span,{className:\"token tag\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"<\"}),\"div\"]}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\">\"})]}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"{\"}),\"children\",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"}),(0,n.jsxs)(e.span,{className:\"token tag\",children:[(0,n.jsxs)(e.span,{className:\"token tag\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"</\"}),\"div\"]}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\">\"})]}),(0,n.jsx)(e.span,{className:\"token plain-text\",children:`\n`})]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[(0,n.jsx)(e.span,{className:\"token plain-text\",children:\"    \"}),(0,n.jsxs)(e.span,{className:\"token tag\",children:[(0,n.jsxs)(e.span,{className:\"token tag\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"</\"}),(0,n.jsx)(e.span,{className:\"token class-name\",children:\"SectionContainer\"})]}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\">\"})]}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"  \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\")\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"}),`\n`]})]})}),`\n`,(0,n.jsxs)(e.h3,{id:\"configuring-a-blog-post-frontmatter\",children:[(0,n.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#configuring-a-blog-post-frontmatter\",children:(0,n.jsx)(e.span,{className:\"icon icon-link\"})}),\"Configuring a blog post frontmatter\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Use the \",(0,n.jsx)(e.code,{children:\"layout\"}),\" frontmatter field to specify the template you want to map the markdown post to. Here's how the frontmatter of this post looks like:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsxs)(e.code,{className:\"code-highlight\",children:[(0,n.jsx)(e.span,{className:\"code-line\",children:`---\n`}),(0,n.jsx)(e.span,{className:\"code-line\",children:`title: 'New features in v1'\n`}),(0,n.jsx)(e.span,{className:\"code-line\",children:`date: '2021-05-26   '\n`}),(0,n.jsx)(e.span,{className:\"code-line\",children:`tags: ['next-js', 'tailwind', 'guide']\n`}),(0,n.jsx)(e.span,{className:\"code-line\",children:`draft: false\n`}),(0,n.jsx)(e.span,{className:\"code-line\",children:`summary: 'Introducing the new layout features - you can map mdx blog content to layout components by configuring the frontmatter field'\n`}),(0,n.jsx)(e.span,{className:\"code-line\",children:`layout: PostSimple\n`}),(0,n.jsx)(e.span,{className:\"code-line\",children:`---\n`})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can configure the default layout in the respective page section by modifying the \",(0,n.jsx)(e.code,{children:\"DEFAULT_LAYOUT\"}),` variable.\nThe `,(0,n.jsx)(e.code,{children:\"DEFAULT_LAYOUT\"}),\" for blog posts page is set to \",(0,n.jsx)(e.code,{children:\"PostLayout\"}),\".\"]}),`\n`,(0,n.jsxs)(e.h3,{id:\"extend\",children:[(0,n.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#extend\",children:(0,n.jsx)(e.span,{className:\"icon icon-link\"})}),\"Extend\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"layout\"}),\" is mapped to wrapper which wraps the entire MDX content.\"]}),`\n`,(0,n.jsx)(e.pre,{className:\"language-jsx\",children:(0,n.jsxs)(e.code,{className:\"language-jsx code-highlight\",children:[(0,n.jsxs)(e.span,{className:\"code-line\",children:[(0,n.jsx)(e.span,{className:\"token keyword module\",children:\"export\"}),\" \",(0,n.jsx)(e.span,{className:\"token keyword\",children:\"const\"}),\" \",(0,n.jsx)(e.span,{className:\"token maybe-class-name\",children:\"MDXComponents\"}),\" \",(0,n.jsx)(e.span,{className:\"token operator\",children:\"=\"}),\" \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"{\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"  \",(0,n.jsx)(e.span,{className:\"token maybe-class-name\",children:\"Image\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"  a\",(0,n.jsx)(e.span,{className:\"token operator\",children:\":\"}),\" \",(0,n.jsx)(e.span,{className:\"token maybe-class-name\",children:\"CustomLink\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"  pre\",(0,n.jsx)(e.span,{className:\"token operator\",children:\":\"}),\" \",(0,n.jsx)(e.span,{className:\"token maybe-class-name\",children:\"Pre\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"  \",(0,n.jsx)(e.span,{className:\"token function-variable function\",children:\"wrapper\"}),(0,n.jsx)(e.span,{className:\"token operator\",children:\":\"}),\" \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"(\"}),(0,n.jsxs)(e.span,{className:\"token parameter\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"{\"}),\" components\",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),\" layout\",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),\" \",(0,n.jsx)(e.span,{className:\"token spread operator\",children:\"...\"}),\"rest \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"})]}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\")\"}),\" \",(0,n.jsx)(e.span,{className:\"token arrow operator\",children:\"=>\"}),\" \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"{\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"    \",(0,n.jsx)(e.span,{className:\"token keyword\",children:\"const\"}),\" \",(0,n.jsx)(e.span,{className:\"token maybe-class-name\",children:\"Layout\"}),\" \",(0,n.jsx)(e.span,{className:\"token operator\",children:\"=\"}),\" \",(0,n.jsx)(e.span,{className:\"token function\",children:\"require\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"(\"}),(0,n.jsxs)(e.span,{className:\"token template-string\",children:[(0,n.jsx)(e.span,{className:\"token template-punctuation string\",children:\"`\"}),(0,n.jsx)(e.span,{className:\"token string\",children:\"../layouts/\"}),(0,n.jsxs)(e.span,{className:\"token interpolation\",children:[(0,n.jsx)(e.span,{className:\"token interpolation-punctuation punctuation\",children:\"${\"}),\"layout\",(0,n.jsx)(e.span,{className:\"token interpolation-punctuation punctuation\",children:\"}\"})]}),(0,n.jsx)(e.span,{className:\"token template-punctuation string\",children:\"`\"})]}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\")\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\".\"}),(0,n.jsx)(e.span,{className:\"token keyword module\",children:\"default\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"    \",(0,n.jsx)(e.span,{className:\"token keyword control-flow\",children:\"return\"}),\" \",(0,n.jsxs)(e.span,{className:\"token tag\",children:[(0,n.jsxs)(e.span,{className:\"token tag\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"<\"}),(0,n.jsx)(e.span,{className:\"token class-name\",children:\"Layout\"})]}),\" \",(0,n.jsxs)(e.span,{className:\"token spread\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"{\"}),(0,n.jsx)(e.span,{className:\"token spread operator\",children:\"...\"}),\"rest\",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"})]}),\" \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"/>\"})]}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"  \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"}),`\n`]}),(0,n.jsx)(e.span,{className:\"code-line\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[(0,n.jsx)(e.span,{className:\"token keyword module\",children:\"export\"}),\" \",(0,n.jsx)(e.span,{className:\"token keyword\",children:\"const\"}),\" \",(0,n.jsx)(e.span,{className:\"token function-variable function\",children:(0,n.jsx)(e.span,{className:\"token maybe-class-name\",children:\"MDXLayoutRenderer\"})}),\" \",(0,n.jsx)(e.span,{className:\"token operator\",children:\"=\"}),\" \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"(\"}),(0,n.jsxs)(e.span,{className:\"token parameter\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"{\"}),\" layout\",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),\" mdxSource\",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),\" \",(0,n.jsx)(e.span,{className:\"token spread operator\",children:\"...\"}),\"rest \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"})]}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\")\"}),\" \",(0,n.jsx)(e.span,{className:\"token arrow operator\",children:\"=>\"}),\" \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"{\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"  \",(0,n.jsx)(e.span,{className:\"token keyword\",children:\"const\"}),\" \",(0,n.jsx)(e.span,{className:\"token maybe-class-name\",children:\"MDXLayout\"}),\" \",(0,n.jsx)(e.span,{className:\"token operator\",children:\"=\"}),\" \",(0,n.jsx)(e.span,{className:\"token function\",children:\"useMemo\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"(\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"(\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\")\"}),\" \",(0,n.jsx)(e.span,{className:\"token arrow operator\",children:\"=>\"}),\" \",(0,n.jsx)(e.span,{className:\"token function\",children:\"getMDXComponent\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"(\"}),\"mdxSource\",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\")\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),\" \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"[\"}),\"mdxSource\",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"]\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\")\"}),`\n`]}),(0,n.jsx)(e.span,{className:\"code-line\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"  \",(0,n.jsx)(e.span,{className:\"token keyword control-flow\",children:\"return\"}),\" \",(0,n.jsxs)(e.span,{className:\"token tag\",children:[(0,n.jsxs)(e.span,{className:\"token tag\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"<\"}),(0,n.jsx)(e.span,{className:\"token class-name\",children:\"MDXLayout\"})]}),\" \",(0,n.jsx)(e.span,{className:\"token attr-name\",children:\"layout\"}),(0,n.jsxs)(e.span,{className:\"token script language-javascript\",children:[(0,n.jsx)(e.span,{className:\"token script-punctuation punctuation\",children:\"=\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"{\"}),\"layout\",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"})]}),\" \",(0,n.jsx)(e.span,{className:\"token attr-name\",children:\"components\"}),(0,n.jsxs)(e.span,{className:\"token script language-javascript\",children:[(0,n.jsx)(e.span,{className:\"token script-punctuation punctuation\",children:\"=\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"{\"}),(0,n.jsx)(e.span,{className:\"token maybe-class-name\",children:\"MDXComponents\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"})]}),\" \",(0,n.jsxs)(e.span,{className:\"token spread\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"{\"}),(0,n.jsx)(e.span,{className:\"token spread operator\",children:\"...\"}),\"rest\",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"})]}),\" \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"/>\"})]}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"}),`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Use the \",(0,n.jsx)(e.code,{children:\"MDXLayoutRenderer\"}),` component in a page where you want to accept a layout name to map to the desired layout.\nYou need to pass the layout name from the layout folder (it has to be an exact match).`]}),`\n`,(0,n.jsxs)(e.h2,{id:\"analytics\",children:[(0,n.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#analytics\",children:(0,n.jsx)(e.span,{className:\"icon icon-link\"})}),\"Analytics\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The template now supports \",(0,n.jsx)(e.a,{href:\"https://plausible.io/\",children:\"plausible\"}),\", \",(0,n.jsx)(e.a,{href:\"https://simpleanalytics.com/\",children:\"simple analytics\"}),` and google analytics.\nConfigure `,(0,n.jsx)(e.code,{children:\"siteMetadata.js\"}),\" with the settings that correpond with the desired analytics provider.\"]}),`\n`,(0,n.jsx)(e.pre,{className:\"language-js\",children:(0,n.jsxs)(e.code,{className:\"language-js code-highlight\",children:[(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"analytics\",(0,n.jsx)(e.span,{className:\"token operator\",children:\":\"}),\" \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"{\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"    \",(0,n.jsx)(e.span,{className:\"token comment\",children:\"// supports plausible, simpleAnalytics or googleAnalytics\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"    plausibleDataDomain\",(0,n.jsx)(e.span,{className:\"token operator\",children:\":\"}),\" \",(0,n.jsx)(e.span,{className:\"token string\",children:\"''\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),\" \",(0,n.jsx)(e.span,{className:\"token comment\",children:\"// e.g. tailwind-nextjs-starter-blog.vercel.app\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"    simpleAnalytics\",(0,n.jsx)(e.span,{className:\"token operator\",children:\":\"}),\" \",(0,n.jsx)(e.span,{className:\"token boolean\",children:\"false\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),\" \",(0,n.jsx)(e.span,{className:\"token comment\",children:\"// true or false\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"    googleAnalyticsId\",(0,n.jsx)(e.span,{className:\"token operator\",children:\":\"}),\" \",(0,n.jsx)(e.span,{className:\"token string\",children:\"''\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),\" \",(0,n.jsx)(e.span,{className:\"token comment\",children:\"// e.g. UA-000000-2 or G-XXXXXXX\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"  \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Custom events are also supported. You can import the \",(0,n.jsx)(e.code,{children:\"logEvent\"}),\" function from \",(0,n.jsx)(e.code,{children:\"@components/analytics/[ANALYTICS-PROVIDER]\"}),` file and call it when\ntriggering certain events of interest. `,(0,n.jsx)(e.em,{children:\"Note\"}),`: Additional configuration might be required depending on the analytics provider, please check their official\ndocumentation for more information.`]}),`\n`,(0,n.jsxs)(e.h2,{id:\"blog-comments-system\",children:[(0,n.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#blog-comments-system\",children:(0,n.jsx)(e.span,{className:\"icon icon-link\"})}),\"Blog comments system\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"We have also added support for \",(0,n.jsx)(e.a,{href:\"https://github.com/laymonage/giscus\",children:\"giscus\"}),\", \",(0,n.jsx)(e.a,{href:\"https://github.com/utterance/utterances\",children:\"utterances\"}),` or disqus.\nTo enable, simply configure `,(0,n.jsx)(e.code,{children:\"siteMetadata.js\"}),\" comments property with the desired provider and settings as specified in the config file.\"]}),`\n`,(0,n.jsx)(e.pre,{className:\"language-js\",children:(0,n.jsxs)(e.code,{className:\"language-js code-highlight\",children:[(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"comment\",(0,n.jsx)(e.span,{className:\"token operator\",children:\":\"}),\" \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"{\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"    \",(0,n.jsx)(e.span,{className:\"token comment\",children:\"// Select a provider and use the environment variables associated to it\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"    \",(0,n.jsx)(e.span,{className:\"token comment\",children:\"// https://vercel.com/docs/environment-variables\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"    provider\",(0,n.jsx)(e.span,{className:\"token operator\",children:\":\"}),\" \",(0,n.jsx)(e.span,{className:\"token string\",children:\"'giscus'\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),\" \",(0,n.jsx)(e.span,{className:\"token comment\",children:\"// supported providers: giscus, utterances, disqus\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"    giscusConfig\",(0,n.jsx)(e.span,{className:\"token operator\",children:\":\"}),\" \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"{\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      \",(0,n.jsx)(e.span,{className:\"token comment\",children:\"// Visit the link below, and follow the steps in the 'configuration' section\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      \",(0,n.jsx)(e.span,{className:\"token comment\",children:\"// https://giscus.app/\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      repo\",(0,n.jsx)(e.span,{className:\"token operator\",children:\":\"}),\" process\",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\".\"}),(0,n.jsx)(e.span,{className:\"token property-access\",children:\"env\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\".\"}),(0,n.jsx)(e.span,{className:\"token constant\",children:\"NEXT_PUBLIC_GISCUS_REPO\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      repositoryId\",(0,n.jsx)(e.span,{className:\"token operator\",children:\":\"}),\" process\",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\".\"}),(0,n.jsx)(e.span,{className:\"token property-access\",children:\"env\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\".\"}),(0,n.jsx)(e.span,{className:\"token constant\",children:\"NEXT_PUBLIC_GISCUS_REPOSITORY_ID\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      category\",(0,n.jsx)(e.span,{className:\"token operator\",children:\":\"}),\" process\",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\".\"}),(0,n.jsx)(e.span,{className:\"token property-access\",children:\"env\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\".\"}),(0,n.jsx)(e.span,{className:\"token constant\",children:\"NEXT_PUBLIC_GISCUS_CATEGORY\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      categoryId\",(0,n.jsx)(e.span,{className:\"token operator\",children:\":\"}),\" process\",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\".\"}),(0,n.jsx)(e.span,{className:\"token property-access\",children:\"env\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\".\"}),(0,n.jsx)(e.span,{className:\"token constant\",children:\"NEXT_PUBLIC_GISCUS_CATEGORY_ID\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      mapping\",(0,n.jsx)(e.span,{className:\"token operator\",children:\":\"}),\" \",(0,n.jsx)(e.span,{className:\"token string\",children:\"'pathname'\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),\" \",(0,n.jsx)(e.span,{className:\"token comment\",children:\"// supported options: pathname, url, title\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      reactions\",(0,n.jsx)(e.span,{className:\"token operator\",children:\":\"}),\" \",(0,n.jsx)(e.span,{className:\"token string\",children:\"'1'\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),\" \",(0,n.jsx)(e.span,{className:\"token comment\",children:\"// Emoji reactions: 1 = enable / 0 = disable\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      \",(0,n.jsx)(e.span,{className:\"token comment\",children:\"// Send discussion metadata periodically to the parent window: 1 = enable / 0 = disable\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      metadata\",(0,n.jsx)(e.span,{className:\"token operator\",children:\":\"}),\" \",(0,n.jsx)(e.span,{className:\"token string\",children:\"'0'\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      \",(0,n.jsx)(e.span,{className:\"token comment\",children:\"// theme example: light, dark, dark_dimmed, dark_high_contrast\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      \",(0,n.jsx)(e.span,{className:\"token comment\",children:\"// transparent_dark, preferred_color_scheme, custom\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      theme\",(0,n.jsx)(e.span,{className:\"token operator\",children:\":\"}),\" \",(0,n.jsx)(e.span,{className:\"token string\",children:\"'light'\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      \",(0,n.jsx)(e.span,{className:\"token comment\",children:\"// theme when dark mode\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      darkTheme\",(0,n.jsx)(e.span,{className:\"token operator\",children:\":\"}),\" \",(0,n.jsx)(e.span,{className:\"token string\",children:\"'transparent_dark'\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      \",(0,n.jsx)(e.span,{className:\"token comment\",children:\"// If the theme option above is set to 'custom`\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      \",(0,n.jsx)(e.span,{className:\"token comment\",children:\"// please provide a link below to your custom theme css file.\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      \",(0,n.jsx)(e.span,{className:\"token comment\",children:\"// example: https://giscus.app/themes/custom_example.css\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      themeURL\",(0,n.jsx)(e.span,{className:\"token operator\",children:\":\"}),\" \",(0,n.jsx)(e.span,{className:\"token string\",children:\"''\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"    \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"    utterancesConfig\",(0,n.jsx)(e.span,{className:\"token operator\",children:\":\"}),\" \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"{\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      \",(0,n.jsx)(e.span,{className:\"token comment\",children:\"// Visit the link below, and follow the steps in the 'configuration' section\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      \",(0,n.jsx)(e.span,{className:\"token comment\",children:\"// https://utteranc.es/\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      repo\",(0,n.jsx)(e.span,{className:\"token operator\",children:\":\"}),\" process\",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\".\"}),(0,n.jsx)(e.span,{className:\"token property-access\",children:\"env\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\".\"}),(0,n.jsx)(e.span,{className:\"token constant\",children:\"NEXT_PUBLIC_UTTERANCES_REPO\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      issueTerm\",(0,n.jsx)(e.span,{className:\"token operator\",children:\":\"}),\" \",(0,n.jsx)(e.span,{className:\"token string\",children:\"''\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),\" \",(0,n.jsx)(e.span,{className:\"token comment\",children:\"// supported options: pathname, url, title\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      label\",(0,n.jsx)(e.span,{className:\"token operator\",children:\":\"}),\" \",(0,n.jsx)(e.span,{className:\"token string\",children:\"''\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),\" \",(0,n.jsx)(e.span,{className:\"token comment\",children:\"// label (optional): Comment \\u{1F4AC}\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      \",(0,n.jsx)(e.span,{className:\"token comment\",children:\"// theme example: github-light, github-dark, preferred-color-scheme\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      \",(0,n.jsx)(e.span,{className:\"token comment\",children:\"// github-dark-orange, icy-dark, dark-blue, photon-dark, boxy-light\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      theme\",(0,n.jsx)(e.span,{className:\"token operator\",children:\":\"}),\" \",(0,n.jsx)(e.span,{className:\"token string\",children:\"''\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      \",(0,n.jsx)(e.span,{className:\"token comment\",children:\"// theme when dark mode\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      darkTheme\",(0,n.jsx)(e.span,{className:\"token operator\",children:\":\"}),\" \",(0,n.jsx)(e.span,{className:\"token string\",children:\"''\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"    \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"    disqus\",(0,n.jsx)(e.span,{className:\"token operator\",children:\":\"}),\" \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"{\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      \",(0,n.jsx)(e.span,{className:\"token comment\",children:\"// https://help.disqus.com/en/articles/1717111-what-s-a-shortname\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      shortname\",(0,n.jsx)(e.span,{className:\"token operator\",children:\":\"}),\" process\",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\".\"}),(0,n.jsx)(e.span,{className:\"token property-access\",children:\"env\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\".\"}),(0,n.jsx)(e.span,{className:\"token constant\",children:\"NEXT_PUBLIC_DISQUS_SHORTNAME\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"    \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"  \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),`\n`]})]})}),`\n`,(0,n.jsxs)(e.h2,{id:\"multiple-authors\",children:[(0,n.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#multiple-authors\",children:(0,n.jsx)(e.span,{className:\"icon icon-link\"})}),\"Multiple authors\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Information on authors is now split from \",(0,n.jsx)(e.code,{children:\"siteMetadata.js\"}),\" and stored in its own \",(0,n.jsx)(e.code,{children:\"data/authors\"}),\" folder as a markdown file. Minimally, you will need to have a \",(0,n.jsx)(e.code,{children:\"default.md\"}),\" file with authorship information. You can create additional files as required and the file name will be used as the reference to the author.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Here's how an author markdown file might looks like:\"}),`\n`,(0,n.jsx)(\"div\",{className:\"remark-code-title\",children:\"default.md\"}),`\n`,(0,n.jsx)(e.pre,{className:\"language-md\",children:(0,n.jsxs)(e.code,{className:\"language-md code-highlight\",children:[(0,n.jsx)(e.span,{className:\"code-line\",children:(0,n.jsxs)(e.span,{className:\"token front-matter-block\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"---\"}),`\n`]})}),(0,n.jsx)(e.span,{className:\"code-line\",children:(0,n.jsx)(e.span,{className:\"token front-matter-block\",children:(0,n.jsxs)(e.span,{className:\"token font-matter yaml language-yaml\",children:[(0,n.jsx)(e.span,{className:\"token key atrule\",children:\"name\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\":\"}),` Tails Azimuth\n`]})})}),(0,n.jsx)(e.span,{className:\"code-line\",children:(0,n.jsx)(e.span,{className:\"token front-matter-block\",children:(0,n.jsxs)(e.span,{className:\"token font-matter yaml language-yaml\",children:[(0,n.jsx)(e.span,{className:\"token key atrule\",children:\"avatar\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\":\"}),` /static/images/avatar.png\n`]})})}),(0,n.jsx)(e.span,{className:\"code-line\",children:(0,n.jsx)(e.span,{className:\"token front-matter-block\",children:(0,n.jsxs)(e.span,{className:\"token font-matter yaml language-yaml\",children:[(0,n.jsx)(e.span,{className:\"token key atrule\",children:\"occupation\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\":\"}),` Professor of Atmospheric Science\n`]})})}),(0,n.jsx)(e.span,{className:\"code-line\",children:(0,n.jsx)(e.span,{className:\"token front-matter-block\",children:(0,n.jsxs)(e.span,{className:\"token font-matter yaml language-yaml\",children:[(0,n.jsx)(e.span,{className:\"token key atrule\",children:\"company\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\":\"}),` Stanford University\n`]})})}),(0,n.jsx)(e.span,{className:\"code-line\",children:(0,n.jsx)(e.span,{className:\"token front-matter-block\",children:(0,n.jsxs)(e.span,{className:\"token font-matter yaml language-yaml\",children:[(0,n.jsx)(e.span,{className:\"token key atrule\",children:\"email\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\":\"}),` address@yoursite.com\n`]})})}),(0,n.jsx)(e.span,{className:\"code-line\",children:(0,n.jsx)(e.span,{className:\"token front-matter-block\",children:(0,n.jsxs)(e.span,{className:\"token font-matter yaml language-yaml\",children:[(0,n.jsx)(e.span,{className:\"token key atrule\",children:\"twitter\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\":\"}),\" https\",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\":\"}),`//twitter.com/Twitter\n`]})})}),(0,n.jsx)(e.span,{className:\"code-line\",children:(0,n.jsx)(e.span,{className:\"token front-matter-block\",children:(0,n.jsxs)(e.span,{className:\"token font-matter yaml language-yaml\",children:[(0,n.jsx)(e.span,{className:\"token key atrule\",children:\"linkedin\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\":\"}),\" https\",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\":\"}),`//www.linkedin.com\n`]})})}),(0,n.jsx)(e.span,{className:\"code-line\",children:(0,n.jsxs)(e.span,{className:\"token front-matter-block\",children:[(0,n.jsxs)(e.span,{className:\"token font-matter yaml language-yaml\",children:[(0,n.jsx)(e.span,{className:\"token key atrule\",children:\"github\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\":\"}),\" https\",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\":\"}),\"//github.com\"]}),`\n`]})}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[(0,n.jsx)(e.span,{className:\"token front-matter-block\",children:(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"---\"})}),`\n`]}),(0,n.jsx)(e.span,{className:\"code-line\",children:`\n`}),(0,n.jsx)(e.span,{className:\"code-line\",children:`A long description of yourself...\n`})]})}),`\n`,(0,n.jsx)(e.p,{children:\"You can use this information in multiple places across the template. For example in the about section of the page, we grab the default author information with this line of code:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"code-highlight\",children:(0,n.jsx)(e.span,{className:\"code-line\",children:`const authorDetails = await getFileBySlug('authors', ['default'])\n`})})}),`\n`,(0,n.jsxs)(e.p,{children:[\"This is rendered in the \",(0,n.jsx)(e.code,{children:\"AuthorLayout\"}),\" template.\"]}),`\n`,(0,n.jsxs)(e.h3,{id:\"multiple-authors-in-blog-post\",children:[(0,n.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#multiple-authors-in-blog-post\",children:(0,n.jsx)(e.span,{className:\"icon icon-link\"})}),\"Multiple authors in blog post\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The frontmatter of a blog post accepts an optional \",(0,n.jsx)(e.code,{children:\"authors\"}),\" arrray field. If no field is specified, it is assumed that the default author is used. Simply pass in an array of authors to render multiple authors associated with post.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"For example, the following frontmatter will display the authors given by \",(0,n.jsx)(e.code,{children:\"data/authors/default.md\"}),\" and \",(0,n.jsx)(e.code,{children:\"data/authors/sparrowhawk.md\"})]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsxs)(e.code,{className:\"code-highlight\",children:[(0,n.jsx)(e.span,{className:\"code-line\",children:`title: 'My first post'\n`}),(0,n.jsx)(e.span,{className:\"code-line\",children:`date: '2021-01-12'\n`}),(0,n.jsx)(e.span,{className:\"code-line\",children:`draft: false\n`}),(0,n.jsx)(e.span,{className:\"code-line\",children:`summary: 'My first post'\n`}),(0,n.jsx)(e.span,{className:\"code-line\",children:`authors: ['default', 'sparrowhawk']\n`})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"A demo of a multiple author post is shown in \",(0,n.jsx)(e.a,{href:\"/blog/introducing-tailwind-nextjs-starter-blog\",children:\"Introducing Tailwind Nextjs Starter Blog post\"}),\".\"]}),`\n`,(0,n.jsxs)(e.h2,{id:\"copy-button-for-code-blocks\",children:[(0,n.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#copy-button-for-code-blocks\",children:(0,n.jsx)(e.span,{className:\"icon icon-link\"})}),\"Copy button for code blocks\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Hover over a code block and you will notice a Github inspired copy button! You can modify \",(0,n.jsx)(e.code,{children:\"./components/Pre.js\"}),` to further customise it.\nThe component is passed to `,(0,n.jsx)(e.code,{children:\"MDXComponents\"}),\" and modifies all \",(0,n.jsx)(e.code,{children:\"<pre>\"}),\" blocks.\"]}),`\n`,(0,n.jsxs)(e.h2,{id:\"line-highlighting-and-line-numbers\",children:[(0,n.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#line-highlighting-and-line-numbers\",children:(0,n.jsx)(e.span,{className:\"icon icon-link\"})}),\"Line highlighting and line numbers\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Line highlighting and line numbers is now supported out of the box thanks to the new \",(0,n.jsx)(e.a,{href:\"https://github.com/timlrx/rehype-prism-plus\",children:\"rehype-prism-plus plugin\"})]}),`\n`,(0,n.jsx)(e.p,{children:\"The following javascript code block:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsxs)(e.code,{className:\"code-highlight\",children:[(0,n.jsx)(e.span,{className:\"code-line\",children:\"```js {1, 3-4} showLineNumbers\\n\"}),(0,n.jsx)(e.span,{className:\"code-line\",children:`var num1, num2, sum\n`}),(0,n.jsx)(e.span,{className:\"code-line\",children:`num1 = prompt('Enter first number')\n`}),(0,n.jsx)(e.span,{className:\"code-line\",children:`num2 = prompt('Enter second number')\n`}),(0,n.jsx)(e.span,{className:\"code-line\",children:`sum = parseInt(num1) + parseInt(num2) // \"+\" means \"add\"\n`}),(0,n.jsx)(e.span,{className:\"code-line\",children:`alert('Sum = ' + sum) // \"+\" means combine into a string\n`}),(0,n.jsx)(e.span,{className:\"code-line\",children:\"```\\n\"})]})}),`\n`,(0,n.jsx)(e.p,{children:\"will appear as:\"}),`\n`,(0,n.jsx)(e.pre,{className:\"language-js\",children:(0,n.jsxs)(e.code,{className:\"language-js code-highlight\",children:[(0,n.jsxs)(e.span,{className:\"code-line line-number highlight-line\",line:\"1\",children:[(0,n.jsx)(e.span,{className:\"token keyword\",children:\"var\"}),\" num1\",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),\" num2\",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),` sum\n`]}),(0,n.jsxs)(e.span,{className:\"code-line line-number\",line:\"2\",children:[\"num1 \",(0,n.jsx)(e.span,{className:\"token operator\",children:\"=\"}),\" \",(0,n.jsx)(e.span,{className:\"token function\",children:\"prompt\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"(\"}),(0,n.jsx)(e.span,{className:\"token string\",children:\"'Enter first number'\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\")\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line line-number highlight-line\",line:\"3\",children:[\"num2 \",(0,n.jsx)(e.span,{className:\"token operator\",children:\"=\"}),\" \",(0,n.jsx)(e.span,{className:\"token function\",children:\"prompt\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"(\"}),(0,n.jsx)(e.span,{className:\"token string\",children:\"'Enter second number'\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\")\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line line-number highlight-line\",line:\"4\",children:[\"sum \",(0,n.jsx)(e.span,{className:\"token operator\",children:\"=\"}),\" \",(0,n.jsx)(e.span,{className:\"token function\",children:\"parseInt\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"(\"}),\"num1\",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\")\"}),\" \",(0,n.jsx)(e.span,{className:\"token operator\",children:\"+\"}),\" \",(0,n.jsx)(e.span,{className:\"token function\",children:\"parseInt\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"(\"}),\"num2\",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\")\"}),\" \",(0,n.jsx)(e.span,{className:\"token comment\",children:'// \"+\" means \"add\"'}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line line-number\",line:\"5\",children:[(0,n.jsx)(e.span,{className:\"token function\",children:\"alert\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"(\"}),(0,n.jsx)(e.span,{className:\"token string\",children:\"'Sum = '\"}),\" \",(0,n.jsx)(e.span,{className:\"token operator\",children:\"+\"}),\" sum\",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\")\"}),\" \",(0,n.jsx)(e.span,{className:\"token comment\",children:'// \"+\" means combine into a string'}),`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"To modify the styles, change the following class selectors in the \",(0,n.jsx)(e.code,{children:\"tailwind.css\"}),\" file:\"]}),`\n`,(0,n.jsx)(e.pre,{className:\"language-css\",children:(0,n.jsxs)(e.code,{className:\"language-css code-highlight\",children:[(0,n.jsxs)(e.span,{className:\"code-line\",children:[(0,n.jsx)(e.span,{className:\"token selector\",children:(0,n.jsx)(e.span,{className:\"token class\",children:\".code-line\"})}),\" \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"{\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"  \",(0,n.jsxs)(e.span,{className:\"token atrule\",children:[(0,n.jsx)(e.span,{className:\"token rule\",children:\"@apply\"}),\" pl-4 -mx-4 border-l-4 border-\",(0,n.jsx)(e.span,{className:\"token color\",children:\"gray\"}),(0,n.jsx)(e.span,{className:\"token number\",children:\"-800\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\";\"})]}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"}),`\n`]}),(0,n.jsx)(e.span,{className:\"code-line\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[(0,n.jsx)(e.span,{className:\"token selector\",children:(0,n.jsx)(e.span,{className:\"token class\",children:\".highlight-line\"})}),\" \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"{\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"  \",(0,n.jsxs)(e.span,{className:\"token atrule\",children:[(0,n.jsx)(e.span,{className:\"token rule\",children:\"@apply\"}),\" -mx-4 bg-\",(0,n.jsx)(e.span,{className:\"token color\",children:\"gray\"}),(0,n.jsx)(e.span,{className:\"token number\",children:\"-700\"}),\" bg-opacity-50 border-l-4 border-primary-500\",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\";\"})]}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"}),`\n`]}),(0,n.jsx)(e.span,{className:\"code-line\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[(0,n.jsxs)(e.span,{className:\"token selector\",children:[(0,n.jsx)(e.span,{className:\"token class\",children:\".line-number\"}),(0,n.jsx)(e.span,{className:\"token pseudo-element\",children:\"::before\"})]}),\" \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"{\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"  \",(0,n.jsxs)(e.span,{className:\"token atrule\",children:[(0,n.jsx)(e.span,{className:\"token rule\",children:\"@apply\"}),\" pr-4 -ml-2 text-\",(0,n.jsx)(e.span,{className:\"token color\",children:\"gray\"}),(0,n.jsx)(e.span,{className:\"token number\",children:\"-400\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\";\"})]}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"  \",(0,n.jsx)(e.span,{className:\"token property\",children:\"content\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\":\"}),\" \",(0,n.jsx)(e.span,{className:\"token function\",children:\"attr\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"(\"}),\"line\",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\")\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\";\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"}),`\n`]})]})}),`\n`,(0,n.jsxs)(e.h2,{id:\"newletter-component\",children:[(0,n.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#newletter-component\",children:(0,n.jsx)(e.span,{className:\"icon icon-link\"})}),\"Newletter component\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Introduced in v1.1.3, the newsletter component gives you a easy way to build an audience. It integrates with the following providers:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://mailchimp.com/\",children:\"Mailchimp\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://buttondown.email/\",children:\"Buttondown\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://convertkit.com/\",children:\"Convertkit\"})}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"To use it, specify the provider which you are using in the config file and add the necessary environmental variables to the \",(0,n.jsx)(e.code,{children:\".env\"}),` file.\nFor more information on the required variables, check out `,(0,n.jsx)(e.code,{children:\".env.sample.\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Two components are exported, a default \",(0,n.jsx)(e.code,{children:\"NewsletterForm\"}),\" and a \",(0,n.jsx)(e.code,{children:\"BlogNewsletterForm\"}),` component, which is also passed in as an MDX component\nand can be used in a blog post:`]}),`\n`,(0,n.jsx)(e.pre,{className:\"language-jsx\",children:(0,n.jsx)(e.code,{className:\"language-jsx code-highlight\",children:(0,n.jsxs)(e.span,{className:\"code-line\",children:[(0,n.jsxs)(e.span,{className:\"token tag\",children:[(0,n.jsxs)(e.span,{className:\"token tag\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"<\"}),(0,n.jsx)(e.span,{className:\"token class-name\",children:\"BlogNewsletterForm\"})]}),\" \",(0,n.jsx)(e.span,{className:\"token attr-name\",children:\"title\"}),(0,n.jsxs)(e.span,{className:\"token attr-value\",children:[(0,n.jsx)(e.span,{className:\"token punctuation attr-equals\",children:\"=\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:'\"'}),\"Like what you are reading?\",(0,n.jsx)(e.span,{className:\"token punctuation\",children:'\"'})]}),\" \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"/>\"})]}),`\n`]})})}),`\n`,(0,n.jsx)(c,{title:\"Like what you are reading?\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The component relies on nextjs's \",(0,n.jsx)(e.a,{href:\"https://nextjs.org/docs/api-routes/introduction\",children:\"API routes\"}),` which requires a server-side instance of nextjs to be setup\nand is not compatible with a 100% static site export. Users should either self-host or use a compatible platform like Vercel or Netlify which supports this functionality.`]}),`\n`,(0,n.jsx)(e.p,{children:\"A static site compatible alternative is to substitute the route in the newsletter component with a form API endpoint provider.\"}),`\n`,(0,n.jsxs)(e.h2,{id:\"upgrade-guide\",children:[(0,n.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#upgrade-guide\",children:(0,n.jsx)(e.span,{className:\"icon icon-link\"})}),\"Upgrade guide\"]}),`\n`,(0,n.jsx)(e.p,{children:\"There are significant portions of the code that has been changed from v0 to v1 including support for layouts and a new mdx engine.\"}),`\n`,(0,n.jsx)(e.p,{children:`There's also no real reason to change if the previous one serves your needs and it might be easier to copy\nthe component changes you are interested to your existing blog rather than migrating everything over.`}),`\n`,(0,n.jsx)(e.p,{children:\"Nonetheless, if you want to do so and have not changed much of the template, you could clone the new version and copy over the blog post over to the new template.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Another alternative would be to pull the latest tempate version with the following code:\"}),`\n`,(0,n.jsx)(e.pre,{className:\"language-bash\",children:(0,n.jsxs)(e.code,{className:\"language-bash code-highlight\",children:[(0,n.jsxs)(e.span,{className:\"code-line\",children:[(0,n.jsx)(e.span,{className:\"token function\",children:\"git\"}),\" remote \",(0,n.jsx)(e.span,{className:\"token function\",children:\"add\"}),` template git@github.com:timlrx/tailwind-nextjs-starter-blog.git\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[(0,n.jsx)(e.span,{className:\"token function\",children:\"git\"}),` pull template v1 --allow-unrelated-histories\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[(0,n.jsx)(e.span,{className:\"token function\",children:\"rm\"}),` -rf node_modules\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can see an example of such a migration in this \",(0,n.jsx)(e.a,{href:\"https://github.com/timlrx/timlrx.com/commit/bba1c185384fd6d5cdaac15abf802fdcff027286\",children:\"commit\"}),\" for my personal blog.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"v1 also uses \",(0,n.jsx)(e.code,{children:\"feed.xml\"}),\" rather than \",(0,n.jsx)(e.code,{children:\"index.xml\"}),\", to avoid some build issues with vercel. If you are migrating you should add a redirect to \",(0,n.jsx)(e.code,{children:\"next.config.js\"}),\" like so:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsxs)(e.code,{className:\"code-highlight\",children:[(0,n.jsx)(e.span,{className:\"code-line\",children:`async redirects() {\n`}),(0,n.jsx)(e.span,{className:\"code-line\",children:`  return [\n`}),(0,n.jsx)(e.span,{className:\"code-line\",children:`    {\n`}),(0,n.jsx)(e.span,{className:\"code-line\",children:`      source: '/:path/index.xml',\n`}),(0,n.jsx)(e.span,{className:\"code-line\",children:`      destination: '/:path/feed.xml',\n`}),(0,n.jsx)(e.span,{className:\"code-line\",children:`      permanent: true,\n`}),(0,n.jsx)(e.span,{className:\"code-line\",children:`    }\n`}),(0,n.jsx)(e.span,{className:\"code-line\",children:`  ]\n`}),(0,n.jsx)(e.span,{className:\"code-line\",children:`}\n`})]})}),`\n`,(0,n.jsxs)(e.section,{className:\"footnotes\",role:\"doc-endnotes\",children:[`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{id:\"fn1\",role:\"doc-endnote\",children:[\"With the new changes in Nextjs 12, first load JS increase to 45kB.\",(0,n.jsx)(e.a,{href:\"#fnref1\",className:\"footnote-back\",role:\"doc-backlink\",children:\"\\u21A9\"})]}),`\n`]}),`\n`]})]});return i?(0,n.jsx)(i,Object.assign({},a,{children:o})):o}var v=x;return j;})();\n;return Component.default;","toc":[{"value":"Overview","url":"#overview","depth":2},{"value":"Theme colors","url":"#theme-colors","depth":2},{"value":"Xdm MDX compiler","url":"#xdm-mdx-compiler","depth":2},{"value":"Table of contents component","url":"#table-of-contents-component","depth":2},{"value":"Layouts","url":"#layouts","depth":2},{"value":"Adding new templates","url":"#adding-new-templates","depth":3},{"value":"Configuring a blog post frontmatter","url":"#configuring-a-blog-post-frontmatter","depth":3},{"value":"Extend","url":"#extend","depth":3},{"value":"Analytics","url":"#analytics","depth":2},{"value":"Blog comments system","url":"#blog-comments-system","depth":2},{"value":"Multiple authors","url":"#multiple-authors","depth":2},{"value":"Multiple authors in blog post","url":"#multiple-authors-in-blog-post","depth":3},{"value":"Copy button for code blocks","url":"#copy-button-for-code-blocks","depth":2},{"value":"Line highlighting and line numbers","url":"#line-highlighting-and-line-numbers","depth":2},{"value":"Newletter component","url":"#newletter-component","depth":2},{"value":"Upgrade guide","url":"#upgrade-guide","depth":2}],"frontMatter":{"readingTime":{"text":"14 min read","minutes":13.69,"time":821400,"words":2738},"slug":"new-features-in-v1","fileName":"new-features-in-v1.mdx","title":"New features in v1","date":"2021-08-07T15:32:14.000Z","lastmod":"2021-10-27","tags":["next-js","tailwind","guide"],"draft":false,"summary":"An overview of the new features released in v1 - code block copy, multiple authors, frontmatter layout and more","layout":"PostSimple"}},"authorDetails":[{"readingTime":{"text":"1 min read","minutes":0.615,"time":36900,"words":123},"slug":["default"],"fileName":"default.md","name":"Tails Azimuth","avatar":"/static/images/avatar.png","occupation":"Professor of Atmospheric Science","company":"Stanford University","email":"address@yoursite.com","twitter":"https://twitter.com/Twitter","linkedin":"https://www.linkedin.com","github":"https://github.com","date":null}],"prev":{"title":"Introducing Multi-part Posts with Nested Routing","date":"2021-05-02T00:00:00.000Z","tags":["multi-author","next-js","feature"],"draft":false,"summary":"The blog template supports posts in nested sub-folders. This can be used to group posts of similar content e.g. a multi-part course. This post is itself an example of a nested route!","slug":"nested-route/introducing-multi-part-posts-with-nested-routing"},"next":null},"__N_SSG":true}