e2hang/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
website/blog-static-build/.next/server/app/blog/new-features-in-v1.html
e2hang 725fa183db New Website
2026-01-18 20:39:34 +08:00

170 lines
237 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html><html lang="en-us" class="__variable_dd5b2f scroll-smooth"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/36966cca54120369-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="stylesheet" href="/_next/static/css/51ff4ab09cd9a322.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/ec75326fdf363785.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/7abc17aba6a0edf4.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-af24fb31267d6e11.js"/><script src="/_next/static/chunks/4bd1b696-5100ffb4d6775e5e.js" async=""></script><script src="/_next/static/chunks/684-c6a4ac930a941d3c.js" async=""></script><script src="/_next/static/chunks/main-app-8e08feffda26a933.js" async=""></script><script src="/_next/static/chunks/c16f53c3-5b47b7f1ae12d8f6.js" async=""></script><script src="/_next/static/chunks/874-7cca39d2e0ddd8b8.js" async=""></script><script src="/_next/static/chunks/430-f83175351bcd3192.js" async=""></script><script src="/_next/static/chunks/app/layout-6cdc32e6ffe9019a.js" async=""></script><script src="/_next/static/chunks/63-ef4ffe428c84fbc3.js" async=""></script><script src="/_next/static/chunks/app/blog/%5B...slug%5D/page-55fdf120c49a8b1e.js" async=""></script><link rel="preload" href="https://analytics.umami.is/script.js" as="script"/><meta name="next-size-adjust" content=""/><link rel="apple-touch-icon" sizes="76x76" href="/static/favicons/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="/static/favicons/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/static/favicons/favicon-16x16.png"/><link rel="manifest" href="/static/favicons/site.webmanifest"/><link rel="mask-icon" href="/static/favicons/safari-pinned-tab.svg" color="#5bbad5"/><meta name="msapplication-TileColor" content="#000000"/><meta name="theme-color" media="(prefers-color-scheme: light)" content="#fff"/><meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000"/><link rel="alternate" type="application/rss+xml" href="/feed.xml"/><title>New features in v1 | Next.js Starter Blog</title><meta name="description" content="An overview of the new features released in v1 - code block copy, multiple authors, frontmatter layout and more"/><meta name="robots" content="index, follow"/><meta name="googlebot" content="index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"/><link rel="canonical" href="https://tailwind-nextjs-starter-blog.vercel.app/blog/new-features-in-v1"/><link rel="alternate" type="application/rss+xml" href="https://tailwind-nextjs-starter-blog.vercel.app/feed.xml"/><meta property="og:title" content="New features in v1"/><meta property="og:description" content="An overview of the new features released in v1 - code block copy, multiple authors, frontmatter layout and more"/><meta property="og:url" content="https://tailwind-nextjs-starter-blog.vercel.app/blog/new-features-in-v1"/><meta property="og:site_name" content="Next.js Starter Blog"/><meta property="og:locale" content="en_US"/><meta property="og:image" content="https://tailwind-nextjs-starter-blog.vercel.app/static/images/twitter-card.png"/><meta property="og:type" content="article"/><meta property="article:published_time" content="2021-08-07T15:32:14.000Z"/><meta property="article:modified_time" content="2021-02-01T00:00:00.000Z"/><meta property="article:author" content="Tails Azimuth"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="New features in v1"/><meta name="twitter:description" content="An overview of the new features released in v1 - code block copy, multiple authors, frontmatter layout and more"/><meta name="twitter:image" content="https://tailwind-nextjs-starter-blog.vercel.app/static/images/twitter-card.png"/><script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script></head><body class="bg-white pl-[calc(100vw-100%)] text-black antialiased dark:bg-gray-950 dark:text-white"><script>((e,t,r,n,o,i,a,l)=>{let u=document.documentElement,s=["light","dark"];function c(t){var r;(Array.isArray(e)?e:[e]).forEach(e=>{let r="class"===e,n=r&&i?o.map(e=>i[e]||e):o;r?(u.classList.remove(...n),u.classList.add(i&&i[t]?i[t]:t)):u.setAttribute(e,t)}),r=t,l&&s.includes(r)&&(u.style.colorScheme=r)}if(n)c(n);else try{let e=localStorage.getItem(t)||r,n=a&&"system"===e?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":e;c(n)}catch(e){}})("class","theme","system",null,["light","dark"],null,true,true)</script><section class="mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-5xl xl:px-0"><header class="flex items-center w-full bg-white dark:bg-gray-950 justify-between py-10"><a class="break-words" aria-label="TailwindBlog" href="/"><div class="flex items-center justify-between"><div class="mr-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="53.87" height="43.61" viewBox="344.564 330.278 111.737 91.218"><defs><linearGradient id="logo_svg__b" x1="420.97" x2="420.97" y1="331.28" y2="418.5" gradientUnits="userSpaceOnUse"><stop offset="0%" style="stop-color:#06b6d4;stop-opacity:1"></stop><stop offset="100%" style="stop-color:#67e8f9;stop-opacity:1"></stop></linearGradient><linearGradient id="logo_svg__d" x1="377.89" x2="377.89" y1="331.28" y2="418.5" gradientUnits="userSpaceOnUse"><stop offset="0%" style="stop-color:#06b6d4;stop-opacity:1"></stop><stop offset="100%" style="stop-color:#67e8f9;stop-opacity:1"></stop></linearGradient><path id="logo_svg__a" d="M453.3 331.28v28.57l-64.66 58.65v-30.08z"></path><path id="logo_svg__c" d="M410.23 331.28v28.57l-64.67 58.65v-30.08z"></path></defs><use xlink:href="#logo_svg__a" fill="url(#logo_svg__b)"></use><use xlink:href="#logo_svg__c" fill="url(#logo_svg__d)"></use></svg></div><div class="hidden h-6 text-2xl font-semibold sm:block">TailwindBlog</div></div></a><div class="flex items-center space-x-4 leading-5 sm:-mr-6 sm:space-x-6"><div class="no-scrollbar hidden max-w-40 items-center gap-x-4 overflow-x-auto sm:flex md:max-w-72 lg:max-w-96"><a class="hover:text-primary-500 dark:hover:text-primary-400 m-1 font-medium text-gray-900 dark:text-gray-100" href="/blog">Blog</a><a class="hover:text-primary-500 dark:hover:text-primary-400 m-1 font-medium text-gray-900 dark:text-gray-100" href="/tags">Tags</a><a class="hover:text-primary-500 dark:hover:text-primary-400 m-1 font-medium text-gray-900 dark:text-gray-100" href="/projects">Projects</a><a class="hover:text-primary-500 dark:hover:text-primary-400 m-1 font-medium text-gray-900 dark:text-gray-100" href="/about">About</a></div><button aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hover:text-primary-500 dark:hover:text-primary-400 h-6 w-6 text-gray-900 dark:text-gray-100"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"></path></svg></button><div class="flex items-center"><div class="relative inline-block text-left" data-headlessui-state=""><div class="hover:text-primary-500 dark:hover:text-primary-400 flex items-center justify-center"><button aria-label="Theme switcher" id="headlessui-menu-button-«Rtpkqlb»" type="button" aria-haspopup="menu" aria-expanded="false" data-headlessui-state=""><svg class="h-6 w-6"></svg></button></div></div></div><button aria-label="Toggle Menu" class="sm:hidden"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="hover:text-primary-500 dark:hover:text-primary-400 h-8 w-8 text-gray-900 dark:text-gray-100"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg></button><span hidden="" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none"></span></div></header><main class="mb-auto"><script type="application/ld+json">{"@context":"https://schema.org","@type":"BlogPosting","headline":"New features in v1","datePublished":"2021-08-07T15:32:14.000Z","dateModified":"2021-02-01T00:00:00.000Z","description":"An overview of the new features released in v1 - code block copy, multiple authors, frontmatter layout and more","image":"/static/images/twitter-card.png","url":"https://tailwind-nextjs-starter-blog.vercel.app/blog/new-features-in-v1","author":[{"@type":"Person","name":"Tails Azimuth"}]}</script><section class="mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-5xl xl:px-0"><div class="fixed right-8 bottom-8 hidden flex-col gap-3 md:hidden"><button aria-label="Scroll To Comment" class="rounded-full bg-gray-200 p-2 text-gray-500 transition-all hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600"><svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clip-rule="evenodd"></path></svg></button><button aria-label="Scroll To Top" class="rounded-full bg-gray-200 p-2 text-gray-500 transition-all hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600"><svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg></button></div><article><div><header><div class="space-y-1 border-b border-gray-200 pb-10 text-center dark:border-gray-700"><dl><div><dt class="sr-only">Published on</dt><dd class="text-base leading-6 font-medium text-gray-500 dark:text-gray-400"><time dateTime="2021-08-07T15:32:14.000Z">August 7, 2021</time></dd></div></dl><div><h1 class="text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10 md:text-5xl md:leading-14 dark:text-gray-100">New features in v1</h1></div></div></header><div class="grid-rows-[auto_1fr] divide-y divide-gray-200 pb-8 xl:divide-y-0 dark:divide-gray-700"><div class="divide-y divide-gray-200 xl:col-span-3 xl:row-span-2 xl:pb-0 dark:divide-gray-700"><div class="prose dark:prose-invert max-w-none pt-10 pb-8"><h2 class="content-header" id="overview"><a class="break-words" href="#overview" aria-hidden="true" tabindex="-1"><span class="content-header-link"><svg class="h-5 linkicon w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"></path><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"></path></svg></span></a>Overview</h2><p>A post on the new features introduced in v1.0. New features:</p><ul class=""><li class=""><a href="#theme-colors">Theme colors</a></li><li class=""><a href="#xdm-mdx-compiler">Xdm MDX compiler</a></li><li class=""><a href="#table-of-contents-component">Table of contents component</a></li><li class=""><a href="#layouts">Layouts</a></li><li class=""><a href="#analytics">Analytics</a></li><li class=""><a href="#blog-comments-system">Blog comments system</a></li><li class=""><a href="#multiple-authors">Multiple authors</a></li><li class=""><a href="#copy-button-for-code-blocks">Copy button for code blocks</a></li><li class=""><a href="#line-highlighting-and-line-numbers">Line highlighting and line numbers</a></li><li class=""><a href="#newletter-component-v113">Newletter component (v1.1.3)</a></li><li class=""><a href="#bibliography-and-citations-v121">Bibliography and Citations (v1.2.1)</a></li><li class=""><a href="#self-hosted-font-v150">Self-hosted font (v1.5.0)</a></li><li class=""><a href="#upgrade-guide">Upgrade guide</a></li></ul><p>First load JS decreased from 43kB to 39kB despite all the new features added! <sup><a class="break-words" href="#user-content-fn-1" aria-describedby="footnote-label" data-footnote-ref="true" id="user-content-fnref-1">1</a></sup></p><p>See <a class="break-words" href="#upgrade-guide">upgrade guide</a> below if you are migrating from v0 version of the template.</p><h2 class="content-header" id="theme-colors"><a class="break-words" href="#theme-colors" aria-hidden="true" tabindex="-1"><span class="content-header-link"><svg class="h-5 linkicon w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"></path><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"></path></svg></span></a>Theme colors</h2><p>You can easily modify the theme color by changing the primary attribute in the tailwind config file:</p><div class="remark-code-title">tailwind.config.js</div><div class="relative"><pre><code class="code-highlight language-js"><span class="code-line"><span class="token property literal-property">theme</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token property literal-property">colors</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token property literal-property">primary</span><span class="token operator">:</span> colors<span class="token punctuation">.</span><span class="token property-access">teal</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property literal-property">gray</span><span class="token operator">:</span> colors<span class="token punctuation">.</span><span class="token property-access">neutral</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token operator spread">...</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token operator spread">...</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre></div><p>The primary color attribute should be assigned an object with keys from 50, 100, 200 ... 900 and the corresponding color code values.</p><p>Tailwind includes great default color palettes that can be used for theming your own website. Check out <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://tailwindcss.com/docs/customizing-colors">customizing colors documentation page</a> for the full range of options.</p><p>Migrating from v1? You can revert to the previous theme by setting <code>primary</code> to <code>colors.sky</code> (Tailwind 2.2.2 and above, otherwise <code>colors.lightBlue</code>) and changing gray to <code>colors.gray</code>.</p><p>From v1.1.2+, you can also customize the style of your code blocks easily by modifying the <code>css/prism.css</code> stylesheet. Token classnames are compatible with prismjs so you can copy and adapt token styles from a prismjs stylesheet e.g. <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://github.com/PrismJS/prism-themes">prism themes</a>.</p><h2 class="content-header" id="xdm-mdx-compiler"><a class="break-words" href="#xdm-mdx-compiler" aria-hidden="true" tabindex="-1"><span class="content-header-link"><svg class="h-5 linkicon w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"></path><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"></path></svg></span></a>Xdm MDX compiler</h2><p>We switched the MDX bundler from <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://github.com/hashicorp/next-mdx-remote">next-mdx-remote</a> to <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://github.com/kentcdodds/mdx-bundler">mdx-bundler</a>. This uses <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://github.com/wooorm/xdm">xdm</a> under the hood, the latest micromark 3 and remark, rehype libraries.</p><p><strong>Warning:</strong> If you were using custom remark or rehype libraries, please upgrade to micromark 3 compatible ones. If you are upgrading, please delete <code>node_modules</code> and <code>package-lock.json</code> to avoid having past dependencies related issues.</p><p><a class="break-words" target="_blank" rel="noopener noreferrer" href="https://github.com/wooorm/xdm">xdm</a> contains multiple improvements over <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://github.com/mdx-js/mdx">@mdx-js/mdx</a>, the compiler used internally by next-mdx-remote, but there might be some breaking behaviour changes. Please check your markdown output to verify.</p><p>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.</p><p>For example, the following jsx snippet can be used directly in an MDX file to render the page title component:</p><div class="relative"><pre><code class="code-highlight language-jsx"><span class="code-line"><span class="token comment">// Or import PageTitle from &#x27;./components/PageTitle.js&#x27; if you are using js</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">PageTitle</span></span> <span class="token keyword module">from</span> <span class="token string">&#x27;./components/PageTitle.tsx&#x27;</span>
</span><span class="code-line"><span class="token punctuation">;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">PageTitle</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"> Using JSX components in MDX </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">PageTitle</span></span><span class="token punctuation">&gt;</span></span>
</span></code></pre></div><p>The default configuration resolves all components relative to the <code>components</code> directory.</p><p><strong>Note</strong>: Components which require external image loaders also require additional esbuild configuration. Components which are dependent on global application state on lifecycle like the Nextjs <code>Link</code> component would also not work with this setup as each mdx file is built independently. For such cases, it is better to use component substitution.</p><h2 class="content-header" id="table-of-contents-component"><a class="break-words" href="#table-of-contents-component" aria-hidden="true" tabindex="-1"><span class="content-header-link"><svg class="h-5 linkicon w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"></path><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"></path></svg></span></a>Table of contents component</h2><p>Inspired by <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://docusaurus.io/docs/next/markdown-features/inline-toc">Docusaurus</a> and Gatsby&#x27;s <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://www.gatsbyjs.com/plugins/gatsby-remark-table-of-contents/">gatsby-remark-table-of-contents</a>, the <code>toc</code> variable containing all the top level headings of the document is passed to the MDX file and can be styled accordingly. To make generating a table of contents (TOC) simple, you can use the existing <code>TOCInline</code> component.</p><p>For example, the TOC in this post was generated with the following code:</p><div class="relative"><pre><code class="code-highlight language-jsx"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">TOCInline</span></span> <span class="token attr-name">toc</span><span class="token language-javascript script"><span class="token punctuation script-punctuation">=</span><span class="token punctuation">{</span>props<span class="token punctuation">.</span><span class="token property-access">toc</span><span class="token punctuation">}</span></span> <span class="token attr-name">exclude</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Overview<span class="token punctuation">&quot;</span></span> <span class="token attr-name">toHeading</span><span class="token language-javascript script"><span class="token punctuation script-punctuation">=</span><span class="token punctuation">{</span><span class="token number">2</span><span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span>
</span></code></pre></div><p>You can customise the headings that are displayed by configuring the <code>fromHeading</code> and <code>toHeading</code> props, or exclude particular headings by passing a string or a string array to the <code>exclude</code> prop. By default, all headings that are of depth 3 or smaller are indented. This can be configured by changing the <code>indentDepth</code> property. A <code>asDisclosure</code> prop can be used to render the TOC within an expandable disclosure element.</p><p>Here&#x27;s the full TOC rendered in a disclosure element.</p><div class="relative"><pre><code class="code-highlight language-jsx"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">TOCInline</span></span> <span class="token attr-name">toc</span><span class="token language-javascript script"><span class="token punctuation script-punctuation">=</span><span class="token punctuation">{</span>props<span class="token punctuation">.</span><span class="token property-access">toc</span><span class="token punctuation">}</span></span> <span class="token attr-name">asDisclosure</span> <span class="token punctuation">/&gt;</span></span>
</span></code></pre></div><details open=""><summary class="ml-6 pb-2 pt-2 text-xl font-bold">Table of Contents</summary><div class="ml-6"><ul class=""><li class=""><a href="#overview">Overview</a></li><li class=""><a href="#theme-colors">Theme colors</a></li><li class=""><a href="#xdm-mdx-compiler">Xdm MDX compiler</a></li><li class=""><a href="#table-of-contents-component">Table of contents component</a></li><li class=""><a href="#layouts">Layouts</a><ul class=""><li class=""><a href="#adding-new-templates">Adding new templates</a></li><li class=""><a href="#configuring-a-blog-post-frontmatter">Configuring a blog post frontmatter</a></li><li class=""><a href="#extend">Extend</a></li></ul></li><li class=""><a href="#analytics">Analytics</a></li><li class=""><a href="#blog-comments-system">Blog comments system</a></li><li class=""><a href="#multiple-authors">Multiple authors</a><ul class=""><li class=""><a href="#multiple-authors-in-blog-post">Multiple authors in blog post</a></li></ul></li><li class=""><a href="#copy-button-for-code-blocks">Copy button for code blocks</a></li><li class=""><a href="#line-highlighting-and-line-numbers">Line highlighting and line numbers</a></li><li class=""><a href="#newletter-component-v113">Newletter component (v1.1.3)</a></li><li class=""><a href="#bibliography-and-citations-v121">Bibliography and Citations (v1.2.1)</a></li><li class=""><a href="#self-hosted-font-v150">Self-hosted font (v1.5.0)</a></li><li class=""><a href="#upgrade-guide">Upgrade guide</a></li></ul></div></details><h2 class="content-header" id="layouts"><a class="break-words" href="#layouts" aria-hidden="true" tabindex="-1"><span class="content-header-link"><svg class="h-5 linkicon w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"></path><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"></path></svg></span></a>Layouts</h2><p>You can map mdx blog content to layout components by configuring the frontmatter field. For example, this post is written with the new <code>PostSimple</code> layout!</p><h3 class="content-header" id="adding-new-templates"><a class="break-words" href="#adding-new-templates" aria-hidden="true" tabindex="-1"><span class="content-header-link"><svg class="h-5 linkicon w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"></path><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"></path></svg></span></a>Adding new templates</h3><p>layout templates are stored in the <code>./layouts</code> folder. You can add your React components that you want to map to markdown content in this folder. The component file name must match that specified in the markdown frontmatter <code>layout</code> field.</p><p>The only required field is <code>children</code> which contains the rendered MDX content, though you would probably want to pass in the frontMatter contents and render it in the template.</p><p>You can configure the template to take in other fields - see <code>PostLayout</code> component for an example.</p><p>Here&#x27;s an example layout which you can further customise:</p><div class="relative"><pre><code class="code-highlight language-jsx"><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">ExampleLayout</span></span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> frontMatter<span class="token punctuation">,</span> children <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token punctuation">{</span> date<span class="token punctuation">,</span> title <span class="token punctuation">}</span> <span class="token operator">=</span> frontMatter
</span><span class="code-line">
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SectionContainer</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">{</span>date<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">{</span>title<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">{</span>children<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SectionContainer</span></span><span class="token punctuation">&gt;</span></span>
</span><span class="code-line"> <span class="token punctuation">)</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre></div><h3 class="content-header" id="configuring-a-blog-post-frontmatter"><a class="break-words" href="#configuring-a-blog-post-frontmatter" aria-hidden="true" tabindex="-1"><span class="content-header-link"><svg class="h-5 linkicon w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"></path><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"></path></svg></span></a>Configuring a blog post frontmatter</h3><p>Use the <code>layout</code> frontmatter field to specify the template you want to map the markdown post to. Here&#x27;s how the frontmatter of this post looks like:</p><div class="relative"><pre><code class="code-highlight language-js"><span class="code-line"><span class="token operator">--</span><span class="token operator">-</span>
</span><span class="code-line"><span class="token property literal-property">title</span><span class="token operator">:</span> <span class="token string">&#x27;New features in v1&#x27;</span>
</span><span class="code-line"><span class="token property literal-property">date</span><span class="token operator">:</span> <span class="token string">&#x27;2021-05-26 &#x27;</span>
</span><span class="code-line"><span class="token property literal-property">tags</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#x27;next-js&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;tailwind&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;guide&#x27;</span><span class="token punctuation">]</span>
</span><span class="code-line"><span class="token property literal-property">draft</span><span class="token operator">:</span> <span class="token boolean">false</span>
</span><span class="code-line"><span class="token property literal-property">summary</span><span class="token operator">:</span> <span class="token string">&#x27;Introducing the new layout features - you can map mdx blog content to layout components by configuring the frontmatter field&#x27;</span>
</span><span class="code-line"><span class="token property literal-property">layout</span><span class="token operator">:</span> <span class="token maybe-class-name">PostSimple</span>
</span><span class="code-line"><span class="token operator">--</span><span class="token operator">-</span>
</span></code></pre></div><p>You can configure the default layout in the respective page section by modifying the <code>DEFAULT_LAYOUT</code> variable. The <code>DEFAULT_LAYOUT</code> for blog posts page is set to <code>PostLayout</code>.</p><h3 class="content-header" id="extend"><a class="break-words" href="#extend" aria-hidden="true" tabindex="-1"><span class="content-header-link"><svg class="h-5 linkicon w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"></path><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"></path></svg></span></a>Extend</h3><p><code>layout</code> is mapped to wrapper which wraps the entire MDX content.</p><div class="relative"><pre><code class="code-highlight language-jsx"><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token maybe-class-name">MDXComponents</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token maybe-class-name">Image</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property literal-property">a</span><span class="token operator">:</span> <span class="token maybe-class-name">CustomLink</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property literal-property">pre</span><span class="token operator">:</span> <span class="token maybe-class-name">Pre</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token function function-variable">wrapper</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> components<span class="token punctuation">,</span> layout<span class="token punctuation">,</span> <span class="token operator spread">...</span>rest <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator arrow">=&gt;</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token maybe-class-name">Layout</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string template-punctuation">`</span><span class="token string">../layouts/</span><span class="token interpolation"><span class="token punctuation interpolation-punctuation">${</span>layout<span class="token punctuation interpolation-punctuation">}</span></span><span class="token string template-punctuation">`</span></span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token keyword module">default</span>
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Layout</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token operator spread">...</span>rest<span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token function function-variable"><span class="token maybe-class-name">MDXLayoutRenderer</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> layout<span class="token punctuation">,</span> mdxSource<span class="token punctuation">,</span> <span class="token operator spread">...</span>rest <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator arrow">=&gt;</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token maybe-class-name">MDXLayout</span> <span class="token operator">=</span> <span class="token function">useMemo</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator arrow">=&gt;</span> <span class="token function">getMDXComponent</span><span class="token punctuation">(</span>mdxSource<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>mdxSource<span class="token punctuation">]</span><span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MDXLayout</span></span> <span class="token attr-name">layout</span><span class="token language-javascript script"><span class="token punctuation script-punctuation">=</span><span class="token punctuation">{</span>layout<span class="token punctuation">}</span></span> <span class="token attr-name">components</span><span class="token language-javascript script"><span class="token punctuation script-punctuation">=</span><span class="token punctuation">{</span><span class="token maybe-class-name">MDXComponents</span><span class="token punctuation">}</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token operator spread">...</span>rest<span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre></div><p>Use the <code>MDXLayoutRenderer</code> component on a page where you want to accept a layout name to map to the desired layout. You need to pass the layout name from the layout folder (it has to be an exact match).</p><h2 class="content-header" id="analytics"><a class="break-words" href="#analytics" aria-hidden="true" tabindex="-1"><span class="content-header-link"><svg class="h-5 linkicon w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"></path><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"></path></svg></span></a>Analytics</h2><p>The template now supports <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://plausible.io/">plausible</a>, <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://simpleanalytics.com/">simple analytics</a> and google analytics. Configure <code>siteMetadata.js</code> with the settings that correspond with the desired analytics provider.</p><div class="relative"><pre><code class="code-highlight language-js"><span class="code-line"><span class="token property literal-property">analytics</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token comment">// supports plausible, simpleAnalytics or googleAnalytics</span>
</span><span class="code-line"> <span class="token property literal-property">plausibleDataDomain</span><span class="token operator">:</span> <span class="token string">&#x27;&#x27;</span><span class="token punctuation">,</span> <span class="token comment">// e.g. tailwind-nextjs-starter-blog.vercel.app</span>
</span><span class="code-line"> <span class="token property literal-property">simpleAnalytics</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// true or false</span>
</span><span class="code-line"> <span class="token property literal-property">googleAnalyticsId</span><span class="token operator">:</span> <span class="token string">&#x27;&#x27;</span><span class="token punctuation">,</span> <span class="token comment">// e.g. UA-000000-2 or G-XXXXXXX</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span></code></pre></div><p>Custom events are also supported. You can import the <code>logEvent</code> function from <code>@components/analytics/[ANALYTICS-PROVIDER]</code> file and call it when triggering certain events of interest. <em>Note</em>: Additional configuration might be required depending on the analytics provider, please check their official documentation for more information.</p><h2 class="content-header" id="blog-comments-system"><a class="break-words" href="#blog-comments-system" aria-hidden="true" tabindex="-1"><span class="content-header-link"><svg class="h-5 linkicon w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"></path><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"></path></svg></span></a>Blog comments system</h2><p>We have also added support for <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://github.com/laymonage/giscus">giscus</a>, <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://github.com/utterance/utterances">utterances</a> or disqus. To enable, simply configure <code>siteMetadata.js</code> comments property with the desired provider and settings as specified in the config file.</p><div class="relative"><pre><code class="code-highlight language-js"><span class="code-line"><span class="token property literal-property">comment</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token comment">// Select a provider and use the environment variables associated to it</span>
</span><span class="code-line"> <span class="token comment">// https://vercel.com/docs/environment-variables</span>
</span><span class="code-line"> <span class="token property literal-property">provider</span><span class="token operator">:</span> <span class="token string">&#x27;giscus&#x27;</span><span class="token punctuation">,</span> <span class="token comment">// supported providers: giscus, utterances, disqus</span>
</span><span class="code-line"> <span class="token property literal-property">giscusConfig</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token comment">// Visit the link below, and follow the steps in the &#x27;configuration&#x27; section</span>
</span><span class="code-line"> <span class="token comment">// https://giscus.app/</span>
</span><span class="code-line"> <span class="token property literal-property">repo</span><span class="token operator">:</span> process<span class="token punctuation">.</span><span class="token property-access">env</span><span class="token punctuation">.</span><span class="token constant">NEXT_PUBLIC_GISCUS_REPO</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property literal-property">repositoryId</span><span class="token operator">:</span> process<span class="token punctuation">.</span><span class="token property-access">env</span><span class="token punctuation">.</span><span class="token constant">NEXT_PUBLIC_GISCUS_REPOSITORY_ID</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property literal-property">category</span><span class="token operator">:</span> process<span class="token punctuation">.</span><span class="token property-access">env</span><span class="token punctuation">.</span><span class="token constant">NEXT_PUBLIC_GISCUS_CATEGORY</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property literal-property">categoryId</span><span class="token operator">:</span> process<span class="token punctuation">.</span><span class="token property-access">env</span><span class="token punctuation">.</span><span class="token constant">NEXT_PUBLIC_GISCUS_CATEGORY_ID</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property literal-property">mapping</span><span class="token operator">:</span> <span class="token string">&#x27;pathname&#x27;</span><span class="token punctuation">,</span> <span class="token comment">// supported options: pathname, url, title</span>
</span><span class="code-line"> <span class="token property literal-property">reactions</span><span class="token operator">:</span> <span class="token string">&#x27;1&#x27;</span><span class="token punctuation">,</span> <span class="token comment">// Emoji reactions: 1 = enable / 0 = disable</span>
</span><span class="code-line"> <span class="token comment">// Send discussion metadata periodically to the parent window: 1 = enable / 0 = disable</span>
</span><span class="code-line"> <span class="token property literal-property">metadata</span><span class="token operator">:</span> <span class="token string">&#x27;0&#x27;</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token comment">// theme example: light, dark, dark_dimmed, dark_high_contrast</span>
</span><span class="code-line"> <span class="token comment">// transparent_dark, preferred_color_scheme, custom</span>
</span><span class="code-line"> <span class="token property literal-property">theme</span><span class="token operator">:</span> <span class="token string">&#x27;light&#x27;</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token comment">// theme when dark mode</span>
</span><span class="code-line"> <span class="token property literal-property">darkTheme</span><span class="token operator">:</span> <span class="token string">&#x27;transparent_dark&#x27;</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token comment">// If the theme option above is set to &#x27;custom`</span>
</span><span class="code-line"> <span class="token comment">// please provide a link below to your custom theme css file.</span>
</span><span class="code-line"> <span class="token comment">// example: https://giscus.app/themes/custom_example.css</span>
</span><span class="code-line"> <span class="token property literal-property">themeURL</span><span class="token operator">:</span> <span class="token string">&#x27;&#x27;</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property literal-property">utterancesConfig</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token comment">// Visit the link below, and follow the steps in the &#x27;configuration&#x27; section</span>
</span><span class="code-line"> <span class="token comment">// https://utteranc.es/</span>
</span><span class="code-line"> <span class="token property literal-property">repo</span><span class="token operator">:</span> process<span class="token punctuation">.</span><span class="token property-access">env</span><span class="token punctuation">.</span><span class="token constant">NEXT_PUBLIC_UTTERANCES_REPO</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property literal-property">issueTerm</span><span class="token operator">:</span> <span class="token string">&#x27;&#x27;</span><span class="token punctuation">,</span> <span class="token comment">// supported options: pathname, url, title</span>
</span><span class="code-line"> <span class="token property literal-property">label</span><span class="token operator">:</span> <span class="token string">&#x27;&#x27;</span><span class="token punctuation">,</span> <span class="token comment">// label (optional): Comment 💬</span>
</span><span class="code-line"> <span class="token comment">// theme example: github-light, github-dark, preferred-color-scheme</span>
</span><span class="code-line"> <span class="token comment">// github-dark-orange, icy-dark, dark-blue, photon-dark, boxy-light</span>
</span><span class="code-line"> <span class="token property literal-property">theme</span><span class="token operator">:</span> <span class="token string">&#x27;&#x27;</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token comment">// theme when dark mode</span>
</span><span class="code-line"> <span class="token property literal-property">darkTheme</span><span class="token operator">:</span> <span class="token string">&#x27;&#x27;</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property literal-property">disqus</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token comment">// https://help.disqus.com/en/articles/1717111-what-s-a-shortname</span>
</span><span class="code-line"> <span class="token property literal-property">shortname</span><span class="token operator">:</span> process<span class="token punctuation">.</span><span class="token property-access">env</span><span class="token punctuation">.</span><span class="token constant">NEXT_PUBLIC_DISQUS_SHORTNAME</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span></code></pre></div><h2 class="content-header" id="multiple-authors"><a class="break-words" href="#multiple-authors" aria-hidden="true" tabindex="-1"><span class="content-header-link"><svg class="h-5 linkicon w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"></path><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"></path></svg></span></a>Multiple authors</h2><p>Information on authors is now split from <code>siteMetadata.js</code> and stored in its own <code>data/authors</code> folder as a markdown file. Minimally, you will need to have a <code>default.md</code> file with authorship information. You can create additional files as required and the file name will be used as the reference to the author.</p><p>Here&#x27;s how an author markdown file might look like:</p><div class="remark-code-title">default.md</div><div class="relative"><pre><code class="code-highlight language-md"><span class="code-line"><span class="token front-matter-block"><span class="token punctuation">---</span>
</span></span><span class="code-line"><span class="token front-matter-block"><span class="token language-yaml front-matter yaml"><span class="token atrule key">name</span><span class="token punctuation">:</span> Tails Azimuth
</span></span></span><span class="code-line"><span class="token front-matter-block"><span class="token language-yaml front-matter yaml"><span class="token atrule key">avatar</span><span class="token punctuation">:</span> /static/images/avatar.png
</span></span></span><span class="code-line"><span class="token front-matter-block"><span class="token language-yaml front-matter yaml"><span class="token atrule key">occupation</span><span class="token punctuation">:</span> Professor of Atmospheric Science
</span></span></span><span class="code-line"><span class="token front-matter-block"><span class="token language-yaml front-matter yaml"><span class="token atrule key">company</span><span class="token punctuation">:</span> Stanford University
</span></span></span><span class="code-line"><span class="token front-matter-block"><span class="token language-yaml front-matter yaml"><span class="token atrule key">email</span><span class="token punctuation">:</span> address@yoursite.com
</span></span></span><span class="code-line"><span class="token front-matter-block"><span class="token language-yaml front-matter yaml"><span class="token atrule key">twitter</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//twitter.com/Twitter
</span></span></span><span class="code-line"><span class="token front-matter-block"><span class="token language-yaml front-matter yaml"><span class="token atrule key">linkedin</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//www.linkedin.com
</span></span></span><span class="code-line"><span class="token front-matter-block"><span class="token language-yaml front-matter yaml"><span class="token atrule key">github</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//github.com</span>
</span></span><span class="code-line"><span class="token front-matter-block"><span class="token punctuation">---</span></span>
</span><span class="code-line">
</span><span class="code-line">A long description of yourself...
</span></code></pre></div><p>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:</p><div class="relative"><pre><code class="code-highlight language-js"><span class="code-line"><span class="token keyword">const</span> authorDetails <span class="token operator">=</span> <span class="token keyword control-flow">await</span> <span class="token function">getFileBySlug</span><span class="token punctuation">(</span><span class="token string">&#x27;authors&#x27;</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">&#x27;default&#x27;</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
</span></code></pre></div><p>This is rendered in the <code>AuthorLayout</code> template.</p><h3 class="content-header" id="multiple-authors-in-blog-post"><a class="break-words" href="#multiple-authors-in-blog-post" aria-hidden="true" tabindex="-1"><span class="content-header-link"><svg class="h-5 linkicon w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"></path><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"></path></svg></span></a>Multiple authors in blog post</h3><p>The frontmatter of a blog post accepts an optional <code>authors</code> array 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 a post.</p><p>For example, the following frontmatter will display the authors given by <code>data/authors/default.md</code> and <code>data/authors/sparrowhawk.md</code></p><div class="relative"><pre><code class="code-highlight language-yaml"><span class="code-line"><span class="token atrule key">title</span><span class="token punctuation">:</span> <span class="token string">&#x27;My first post&#x27;</span>
</span><span class="code-line"><span class="token atrule key">date</span><span class="token punctuation">:</span> <span class="token string">&#x27;2021-01-12&#x27;</span>
</span><span class="code-line"><span class="token atrule key">draft</span><span class="token punctuation">:</span> <span class="token boolean important">false</span>
</span><span class="code-line"><span class="token atrule key">summary</span><span class="token punctuation">:</span> <span class="token string">&#x27;My first post&#x27;</span>
</span><span class="code-line"><span class="token atrule key">authors</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">&#x27;default&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;sparrowhawk&#x27;</span><span class="token punctuation">]</span>
</span></code></pre></div><p>A demo of a multiple authors post is shown in <a class="break-words" href="/blog/introducing-tailwind-nextjs-starter-blog">Introducing Tailwind Nextjs Starter Blog post</a>.</p><h2 class="content-header" id="copy-button-for-code-blocks"><a class="break-words" href="#copy-button-for-code-blocks" aria-hidden="true" tabindex="-1"><span class="content-header-link"><svg class="h-5 linkicon w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"></path><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"></path></svg></span></a>Copy button for code blocks</h2><p>Hover over a code block and you will notice a GitHub-inspired copy button! You can modify <code>./components/Pre.js</code> to further customise it. The component is passed to <code>MDXComponents</code> and modifies all <code>&lt;pre&gt;</code> blocks.</p><h2 class="content-header" id="line-highlighting-and-line-numbers"><a class="break-words" href="#line-highlighting-and-line-numbers" aria-hidden="true" tabindex="-1"><span class="content-header-link"><svg class="h-5 linkicon w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"></path><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"></path></svg></span></a>Line highlighting and line numbers</h2><p>Line highlighting and line numbers are now supported out of the box thanks to the new <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://github.com/timlrx/rehype-prism-plus">rehype-prism-plus plugin</a></p><p>The following javascript code block:</p><div class="relative"><pre><code class="code-highlight language-js"><span class="code-line"><span class="token template-string"><span class="token string template-punctuation">`</span><span class="token string template-punctuation">`</span></span><span class="token template-string"><span class="token string template-punctuation">`</span><span class="token string">js {1, 3-4} showLineNumbers
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string">var num1, num2, sum
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string">num1 = prompt(&#x27;Enter first number&#x27;)
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string">num2 = prompt(&#x27;Enter second number&#x27;)
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string">sum = parseInt(num1) + parseInt(num2) // &quot;+&quot; means &quot;add&quot;
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string">alert(&#x27;Sum = &#x27; + sum) // &quot;+&quot; means combine into a string
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"></span><span class="token string template-punctuation">`</span></span><span class="token template-string"><span class="token string template-punctuation">`</span><span class="token string template-punctuation">`</span></span>
</span></code></pre></div><p>will appear as:</p><div class="relative"><pre><code class="code-highlight language-js"><span class="code-line line-number highlight-line" line="1"><span class="token keyword">var</span> num1<span class="token punctuation">,</span> num2<span class="token punctuation">,</span> sum
</span><span class="code-line line-number" line="2">num1 <span class="token operator">=</span> <span class="token function">prompt</span><span class="token punctuation">(</span><span class="token string">&#x27;Enter first number&#x27;</span><span class="token punctuation">)</span>
</span><span class="code-line line-number highlight-line" line="3">num2 <span class="token operator">=</span> <span class="token function">prompt</span><span class="token punctuation">(</span><span class="token string">&#x27;Enter second number&#x27;</span><span class="token punctuation">)</span>
</span><span class="code-line line-number highlight-line" line="4">sum <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>num1<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>num2<span class="token punctuation">)</span> <span class="token comment">// &quot;+&quot; means &quot;add&quot;</span>
</span><span class="code-line line-number" line="5"><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&#x27;Sum = &#x27;</span> <span class="token operator">+</span> sum<span class="token punctuation">)</span> <span class="token comment">// &quot;+&quot; means combine into a string</span>
</span></code></pre></div><p>To modify the styles, change the following class selectors in the <code>prism.css</code> file:</p><div class="relative"><pre><code class="code-highlight language-css"><span class="code-line"><span class="token selector"><span class="token class">.code-highlight</span></span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token atrule"><span class="token rule">@apply</span> float-left min-w-full<span class="token punctuation">;</span></span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token selector"><span class="token class">.code-line</span></span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token atrule"><span class="token rule">@apply</span> -mx-4 block border-l-4 border-opacity-0 pl-4 pr-4<span class="token punctuation">;</span></span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token selector"><span class="token class">.code-line</span><span class="token class">.inserted</span></span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token atrule"><span class="token rule">@apply</span> bg-green-500 bg-opacity-20<span class="token punctuation">;</span></span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token selector"><span class="token class">.code-line</span><span class="token class">.deleted</span></span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token atrule"><span class="token rule">@apply</span> bg-red-500 bg-opacity-20<span class="token punctuation">;</span></span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token selector"><span class="token class">.highlight-line</span></span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token atrule"><span class="token rule">@apply</span> -mx-4 border-l-4 border-primary-500 bg-gray-700 bg-opacity-50<span class="token punctuation">;</span></span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token selector"><span class="token class">.line-number</span><span class="token pseudo-element">::before</span></span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token atrule"><span class="token rule">@apply</span> -ml-2 mr-4 inline-block w-4 text-right text-gray-400<span class="token punctuation">;</span></span>
</span><span class="code-line"> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token function">attr</span><span class="token punctuation">(</span>line<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre></div><h2 class="content-header" id="newletter-component-v113"><a class="break-words" href="#newletter-component-v113" aria-hidden="true" tabindex="-1"><span class="content-header-link"><svg class="h-5 linkicon w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"></path><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"></path></svg></span></a>Newletter component (v1.1.3)</h2><p>Introduced in v1.1.3, the newsletter component gives you an easy way to build an audience. It integrates with the following providers:</p><ul><li><a class="break-words" target="_blank" rel="noopener noreferrer" href="https://mailchimp.com/">Mailchimp</a></li><li><a class="break-words" target="_blank" rel="noopener noreferrer" href="https://buttondown.email/">Buttondown</a></li><li><a class="break-words" target="_blank" rel="noopener noreferrer" href="https://convertkit.com/">Convertkit</a></li></ul><p>To use it, specify the provider which you are using in the config file and add the necessary environment variables to the <code>.env</code> file. For more information on the required variables, check out <code>.env.sample.</code></p><p>Two components are exported, a default <code>NewsletterForm</code> and a <code>BlogNewsletterForm</code> component, which is also passed in as an MDX component and can be used in a blog post:</p><div class="relative"><pre><code class="code-highlight language-jsx"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">BlogNewsletterForm</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Like what you are reading?<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
</span></code></pre></div><div class="flex items-center justify-center"><div class="bg-gray-100 p-6 dark:bg-gray-800 sm:px-14 sm:py-8"><div><div class="pb-1 text-lg font-semibold text-gray-800 dark:text-gray-100">Like what you are reading?</div><form class="flex flex-col sm:flex-row"><div><label for="email-input"><span class="sr-only">Email address</span><input autoComplete="email" class="focus:ring-primary-600 w-72 rounded-md px-4 focus:border-transparent focus:outline-none focus:ring-2 dark:bg-black" id="email-input" placeholder="Enter your email" required="" type="email" name="email"/></label></div><div class="mt-2 flex w-full rounded-md shadow-sm sm:mt-0 sm:ml-3"><button class="bg-primary-500 w-full rounded-md py-2 px-4 font-medium text-white sm:py-0 hover:bg-primary-700 dark:hover:bg-primary-400 focus:ring-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-black" type="submit">Sign up</button></div></form></div></div></div><p>The component relies on nextjs&#x27;s <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://nextjs.org/docs/api-routes/introduction">API routes</a> which requires a server-side instance of nextjs to be setup and 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.</p><p>A static site compatible alternative is to substitute the route in the newsletter component with a form API endpoint provider.</p><h2 class="content-header" id="bibliography-and-citations-v121"><a class="break-words" href="#bibliography-and-citations-v121" aria-hidden="true" tabindex="-1"><span class="content-header-link"><svg class="h-5 linkicon w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"></path><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"></path></svg></span></a>Bibliography and Citations (v1.2.1)</h2><p><code>rehype-citation</code> plugin is added to the xdm processing pipeline in v1.2.1. This allows you to easily format citations and insert bibliography from an existing bibtex or CSL-json file.</p><p>For example, the following markdown code sample:</p><div class="relative"><pre><code class="code-highlight language-md"><span class="code-line">Standard citation [@Nash1950]
</span><span class="code-line">In-text citations e.g. @Nash1951
</span><span class="code-line">Multiple citations [see @Nash1950; @Nash1951, page 50]
</span><span class="code-line">
</span><span class="code-line"><span class="token bold"><span class="token punctuation">**</span><span class="token content">References:</span><span class="token punctuation">**</span></span>
</span><span class="code-line">
</span><span class="code-line">[^ref]
</span></code></pre></div><p>is rendered to the following:</p><p>Standard citation <span id="citation--nash1950--1">(Nash, 1950)</span><br/>In-text citations e.g. <span id="citation--nash1951--2">Nash (1951)</span><br/>Multiple citations <span id="citation--nash1950--nash1951--3">(see Nash, 1950, 1951, p. 50)</span></p><p><strong>References:</strong></p><div class="csl-bib-body references" id="refs"><div class="csl-entry" id="bib-nash1950">Nash, J. (1950). Equilibrium points in n-person games. <i>Proceedings of the National Academy of Sciences</i>, <i>36</i>(1), 48–49.</div><div class="csl-entry" id="bib-nash1951">Nash, J. (1951). Non-cooperative games. <i>Annals of Mathematics</i>, 286–295.</div></div><p>A bibliography will be inserted at the end of the document, but this can be overwritten by specifying a <code>[^Ref]</code> tag at the intended location. The plugin uses APA citation formation, but also supports the following CSLs, &#x27;apa&#x27;, &#x27;vancouver&#x27;, &#x27;harvard1&#x27;, &#x27;chicago&#x27;, &#x27;mla&#x27;, or a path to a user-specified CSL file.</p><p>See <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://github.com/timlrx/rehype-citation">rehype-citation readme</a> for more information on the configuration options.</p><h2 class="content-header" id="self-hosted-font-v150"><a class="break-words" href="#self-hosted-font-v150" aria-hidden="true" tabindex="-1"><span class="content-header-link"><svg class="h-5 linkicon w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"></path><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"></path></svg></span></a>Self-hosted font (v1.5.0)</h2><p>Google font has been replaced with self-hosted font from <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://fontsource.org/">Fontsource</a>. This gives the following <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://fontsource.org/docs/introduction">advantages</a>:</p><blockquote><p>Self-hosting brings significant performance gains as loading fonts from hosted services, such as Google Fonts, lead to an extra (render blocking) network request. To provide perspective, for simple websites it has been seen to double visual load times.</p><p>Fonts remain version locked. Google often pushes updates to their fonts without notice, which may interfere with your live production projects. Manage your fonts like any other NPM dependency.</p><p>Commit to privacy. Google does track the usage of their fonts and for those who are extremely privacy concerned, self-hosting is an alternative.</p></blockquote><p>This leads to a smaller font bundle and a 0.1s faster load time (<a class="break-words" target="_blank" rel="noopener noreferrer" href="https://www.webpagetest.org/video/compare.php?tests=220201_AiDcFH_f68a69b758454dd52d8e67493fdef7da,220201_BiDcMC_bf2d53f14483814ba61e794311dfa771">webpagetest comparison</a>).</p><p>To change the default Inter font:</p><ol><li>Install the preferred <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://fontsource.org/fonts">font</a> - <code>npm install -save @fontsource/&lt;font-name&gt;</code></li><li>Update the import at <code>pages/_app.js</code>- <code>import &#x27;@fontsource/&lt;font-name&gt;.css&#x27;</code></li><li>Update the <code>fontfamily</code> property in the tailwind css config file</li></ol><h2 class="content-header" id="upgrade-guide"><a class="break-words" href="#upgrade-guide" aria-hidden="true" tabindex="-1"><span class="content-header-link"><svg class="h-5 linkicon w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"></path><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"></path></svg></span></a>Upgrade guide</h2><p>There are significant portions of the code that has been changed from v0 to v1 including support for layouts and a new mdx engine.</p><p>There&#x27;s also no real reason to change if the previous one serves your needs and it might be easier to copy the component changes you are interested in to your existing blog rather than migrating everything over.</p><p>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.</p><p>Another alternative would be to pull the latest template version with the following code:</p><div class="relative"><pre><code class="code-highlight language-bash"><span class="code-line"><span class="token function">git</span> remote <span class="token function">add</span> template git@github.com:timlrx/tailwind-nextjs-starter-blog.git
</span><span class="code-line"><span class="token function">git</span> pull template v1 --allow-unrelated-histories
</span><span class="code-line"><span class="token function">rm</span> <span class="token parameter variable">-rf</span> node_modules
</span></code></pre></div><p>You can see an example of such a migration in this <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://github.com/timlrx/timlrx.com/commit/bba1c185384fd6d5cdaac15abf802fdcff027286">commit</a> for my personal blog.</p><p>v1 also uses <code>feed.xml</code> rather than <code>index.xml</code>, to avoid some build issues with Vercel. If you are migrating you should add a redirect to <code>next.config.js</code> like so:</p><div class="relative"><pre><code class="code-highlight language-js"><span class="code-line"><span class="token keyword">async</span> <span class="token function">redirects</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">[</span>
</span><span class="code-line"> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token property literal-property">source</span><span class="token operator">:</span> <span class="token string">&#x27;/:path/index.xml&#x27;</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property literal-property">destination</span><span class="token operator">:</span> <span class="token string">&#x27;/:path/feed.xml&#x27;</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property literal-property">permanent</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token punctuation">]</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre></div><section class="footnotes" data-footnotes="true"><h2 class="content-header" id="footnote-label"><a class="break-words" href="#footnote-label" aria-hidden="true" tabindex="-1"><span class="content-header-link"><svg class="h-5 linkicon w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"></path><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"></path></svg></span></a>Footnotes</h2><ol><li id="user-content-fn-1"><p>With the new changes in Nextjs 12, first load JS increase to 45kB. <a class="data-footnote-backref" href="#user-content-fnref-1" aria-label="Back to reference 1" data-footnote-backref="">↩</a></p></li></ol></section></div></div><div class="pt-6 pb-6 text-center text-gray-700 dark:text-gray-300" id="comment"><button>Load Comments</button></div><footer><div class="flex flex-col text-sm font-medium sm:flex-row sm:justify-between sm:text-base"><div class="pt-4 xl:pt-8"><a class="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400" aria-label="Previous post: Introducing Multi-part Posts with Nested Routing" href="/blog/nested-route/introducing-multi-part-posts-with-nested-routing">← <!-- -->Introducing Multi-part Posts with Nested Routing</a></div><div class="pt-4 xl:pt-8"><a class="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400" aria-label="Next post: Release of Tailwind Nextjs Starter Blog v2.0" href="/blog/release-of-tailwind-nextjs-starter-blog-v2.0">Release of Tailwind Nextjs Starter Blog v2.0<!-- --> →</a></div></div></footer></div></div></article></section></main><footer><div class="mt-16 flex flex-col items-center"><div class="mb-3 flex space-x-4"><a class="text-sm text-gray-500 transition hover:text-gray-600" target="_blank" rel="noopener noreferrer" href="mailto:address@yoursite.com"><span class="sr-only">mail</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6"><title>Mail</title><path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path><path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path></svg></a><a class="text-sm text-gray-500 transition hover:text-gray-600" target="_blank" rel="noopener noreferrer" href="https://github.com"><span class="sr-only">github</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></a><a class="text-sm text-gray-500 transition hover:text-gray-600" target="_blank" rel="noopener noreferrer" href="https://facebook.com"><span class="sr-only">facebook</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6"><title>Facebook</title><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"></path></svg></a><a class="text-sm text-gray-500 transition hover:text-gray-600" target="_blank" rel="noopener noreferrer" href="https://youtube.com"><span class="sr-only">youtube</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6"><title>Youtube</title><path d="M23.499 6.203a3.008 3.008 0 00-2.089-2.089c-1.87-.501-9.4-.501-9.4-.501s-7.509-.01-9.399.501a3.008 3.008 0 00-2.088 2.09A31.258 31.26 0 000 12.01a31.258 31.26 0 00.523 5.785 3.008 3.008 0 002.088 2.089c1.869.502 9.4.502 9.4.502s7.508 0 9.399-.502a3.008 3.008 0 002.089-2.09 31.258 31.26 0 00.5-5.784 31.258 31.26 0 00-.5-5.808zm-13.891 9.4V8.407l6.266 3.604z"></path></svg></a><a class="text-sm text-gray-500 transition hover:text-gray-600" target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com"><span class="sr-only">linkedin</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6"><title>Linkedin</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path></svg></a><a class="text-sm text-gray-500 transition hover:text-gray-600" target="_blank" rel="noopener noreferrer" href="https://bsky.app/"><span class="sr-only">bluesky</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6"><title>Bluesky</title><path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565C.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479c.815 2.736 3.713 3.66 6.383 3.364q.204-.03.415-.056q-.207.033-.415.056c-3.912.58-7.387 2.005-2.83 7.078c5.013 5.19 6.87-1.113 7.823-4.308c.953 3.195 2.05 9.271 7.733 4.308c4.267-4.308 1.172-6.498-2.74-7.078a9 9 0 0 1-.415-.056q.21.026.415.056c2.67.297 5.568-.628 6.383-3.364c.246-.828.624-5.79.624-6.478c0-.69-.139-1.861-.902-2.206c-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8"></path></svg></a><a class="text-sm text-gray-500 transition hover:text-gray-600" target="_blank" rel="noopener noreferrer" href="https://twitter.com/x"><span class="sr-only">x</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6"><title>X</title><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"></path></svg></a><a class="text-sm text-gray-500 transition hover:text-gray-600" target="_blank" rel="noopener noreferrer" href="https://www.instagram.com"><span class="sr-only">instagram</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6"><title>Instagram</title><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"></path></svg></a><a class="text-sm text-gray-500 transition hover:text-gray-600" target="_blank" rel="noopener noreferrer" href="https://www.threads.net"><span class="sr-only">threads</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6"><title>Threads</title><path d="M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.964-.065-1.19.408-2.285 1.33-3.082.88-.76 2.119-1.207 3.583-1.291a13.853 13.853 0 0 1 3.02.142c-.126-.742-.375-1.332-.75-1.757-.513-.586-1.308-.883-2.359-.89h-.029c-.844 0-1.992.232-2.721 1.32L7.734 7.847c.98-1.454 2.568-2.256 4.478-2.256h.044c3.194.02 5.097 1.975 5.287 5.388.108.046.216.094.321.142 1.49.7 2.58 1.761 3.154 3.07.797 1.82.871 4.79-1.548 7.158-1.85 1.81-4.094 2.628-7.277 2.65Zm1.003-11.69c-.242 0-.487.007-.739.021-1.836.103-2.98.946-2.916 2.143.067 1.256 1.452 1.839 2.784 1.767 1.224-.065 2.818-.543 3.086-3.71a10.5 10.5 0 0 0-2.215-.221z"></path></svg></a><a class="text-sm text-gray-500 transition hover:text-gray-600" target="_blank" rel="noopener noreferrer" href="https://medium.com"><span class="sr-only">medium</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6"><title>Medium</title><path d="M13.54 12a6.8 6.8 0 01-6.77 6.82A6.8 6.8 0 010 12a6.8 6.8 0 016.77-6.82A6.8 6.8 0 0113.54 12zM20.96 12c0 3.54-1.51 6.42-3.38 6.42-1.87 0-3.39-2.88-3.39-6.42s1.52-6.42 3.39-6.42 3.38 2.88 3.38 6.42M24 12c0 3.17-.53 5.75-1.19 5.75-.66 0-1.19-2.58-1.19-5.75s.53-5.75 1.19-5.75C23.47 6.25 24 8.83 24 12z"></path></svg></a></div><div class="mb-2 flex space-x-2 text-sm text-gray-500 dark:text-gray-400"><div>Tails Azimuth</div><div> • </div><div>© 2026</div><div> • </div><a class="break-words" href="/">Next.js Starter Blog</a></div><div class="mb-8 text-sm text-gray-500 dark:text-gray-400"><a class="break-words" target="_blank" rel="noopener noreferrer" href="https://github.com/timlrx/tailwind-nextjs-starter-blog">Tailwind Nextjs Theme</a></div></div></footer></section><script src="/_next/static/chunks/webpack-af24fb31267d6e11.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[1478,[\"545\",\"static/chunks/c16f53c3-5b47b7f1ae12d8f6.js\",\"874\",\"static/chunks/874-7cca39d2e0ddd8b8.js\",\"430\",\"static/chunks/430-f83175351bcd3192.js\",\"177\",\"static/chunks/app/layout-6cdc32e6ffe9019a.js\"],\"ThemeProviders\"]\n3:I[9243,[\"545\",\"static/chunks/c16f53c3-5b47b7f1ae12d8f6.js\",\"874\",\"static/chunks/874-7cca39d2e0ddd8b8.js\",\"430\",\"static/chunks/430-f83175351bcd3192.js\",\"177\",\"static/chunks/app/layout-6cdc32e6ffe9019a.js\"],\"\"]\n4:I[7392,[\"545\",\"static/chunks/c16f53c3-5b47b7f1ae12d8f6.js\",\"874\",\"static/chunks/874-7cca39d2e0ddd8b8.js\",\"430\",\"static/chunks/430-f83175351bcd3192.js\",\"177\",\"static/chunks/app/layout-6cdc32e6ffe9019a.js\"],\"KBarSearchProvider\"]\n5:I[6874,[\"874\",\"static/chunks/874-7cca39d2e0ddd8b8.js\",\"63\",\"static/chunks/63-ef4ffe428c84fbc3.js\",\"909\",\"static/chunks/app/blog/%5B...slug%5D/page-55fdf120c49a8b1e.js\"],\"\"]\n6:I[4159,[\"545\",\"static/chunks/c16f53c3-5b47b7f1ae12d8f6.js\",\"874\",\"static/chunks/874-7cca39d2e0ddd8b8.js\",\"430\",\"static/chunks/430-f83175351bcd3192.js\",\"177\",\"static/chunks/app/layout-6cdc32e6ffe9019a.js\"],\"KBarButton\"]\n7:I[1762,[\"545\",\"static/chunks/c16f53c3-5b47b7f1ae12d8f6.js\",\"874\",\"static/chunks/874-7cca39d2e0ddd8b8.js\",\"430\",\"static/chunks/430-f83175351bcd3192.js\",\"177\",\"static/chunks/app/layout-6cdc32e6ffe9019a.js\"],\"default\"]\n8:I[7298,[\"545\",\"static/chunks/c16f53c3-5b47b7f1ae12d8f6.js\",\"874\",\"static/chunks/874-7cca39d2e0ddd8b8.js\",\"430\",\"static/chunks/430-f83175351bcd3192.js\",\"177\",\"static/chunks/app/layout-6cdc32e6ffe9019a.js\"],\"default\"]\n9:I[7555,[],\"\"]\na:I[1295,[],\"\"]\ne:I[9665,[],\"OutletBoundary\"]\n11:I[9665,[],\"ViewportBoundary\"]\n13:I[9665,[],\"MetadataBoundary\"]\n15:I[6614,[],\"\"]\n:HL[\"/_next/static/media/36966cca54120369-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/51ff4ab09cd9a322.css\",\"style\"]\n:HL[\"/_next/static/css/ec75326fdf363785.css\",\"style\"]\n:HL[\"/_next/static/css/7abc17aba6a0edf4.css\",\"style\"]\nb:T69f,M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 "])</script><script>self.__next_f.push([1,"4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439zc:T498,M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798"])</script><script>self.__next_f.push([1,"-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.964-.065-1.19.408-2.285 1.33-3.082.88-.76 2.119-1.207 3.583-1.291a13.853 13.853 0 0 1 3.02.142c-.126-.742-.375-1.332-.75-1.757-.513-.586-1.308-.883-2.359-.89h-.029c-.844 0-1.992.232-2.721 1.32L7.734 7.847c.98-1.454 2.568-2.256 4.478-2.256h.044c3.194.02 5.097 1.975 5.287 5.388.108.046.216.094.321.142 1.49.7 2.58 1.761 3.154 3.07.797 1.82.871 4.79-1.548 7.158-1.85 1.81-4.094 2.628-7.277 2.65Zm1.003-11.69c-.242 0-.487.007-.739.021-1.836.103-2.98.946-2.916 2.143.067 1.256 1.452 1.839 2.784 1.767 1.224-.065 2.818-.543 3.086-3.71a10.5 10.5 0 0 0-2.215-.221z"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"sCS18nH11lqaRF2xVLwHp\",\"p\":\"\",\"c\":[\"\",\"blog\",\"new-features-in-v1\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"blog\",{\"children\":[[\"slug\",\"new-features-in-v1\",\"c\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/51ff4ab09cd9a322.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/ec75326fdf363785.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en-us\",\"className\":\"__variable_dd5b2f scroll-smooth\",\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"link\",null,{\"rel\":\"apple-touch-icon\",\"sizes\":\"76x76\",\"href\":\"/static/favicons/apple-touch-icon.png\"}],[\"$\",\"link\",null,{\"rel\":\"icon\",\"type\":\"image/png\",\"sizes\":\"32x32\",\"href\":\"/static/favicons/favicon-32x32.png\"}],[\"$\",\"link\",null,{\"rel\":\"icon\",\"type\":\"image/png\",\"sizes\":\"16x16\",\"href\":\"/static/favicons/favicon-16x16.png\"}],[\"$\",\"link\",null,{\"rel\":\"manifest\",\"href\":\"/static/favicons/site.webmanifest\"}],[\"$\",\"link\",null,{\"rel\":\"mask-icon\",\"href\":\"/static/favicons/safari-pinned-tab.svg\",\"color\":\"#5bbad5\"}],[\"$\",\"meta\",null,{\"name\":\"msapplication-TileColor\",\"content\":\"#000000\"}],[\"$\",\"meta\",null,{\"name\":\"theme-color\",\"media\":\"(prefers-color-scheme: light)\",\"content\":\"#fff\"}],[\"$\",\"meta\",null,{\"name\":\"theme-color\",\"media\":\"(prefers-color-scheme: dark)\",\"content\":\"#000\"}],[\"$\",\"link\",null,{\"rel\":\"alternate\",\"type\":\"application/rss+xml\",\"href\":\"/feed.xml\"}],[\"$\",\"body\",null,{\"className\":\"bg-white pl-[calc(100vw-100%)] text-black antialiased dark:bg-gray-950 dark:text-white\",\"children\":[\"$\",\"$L2\",null,{\"children\":[[\"$undefined\",\"$undefined\",\"$undefined\",[\"$\",\"$L3\",null,{\"async\":true,\"defer\":true,\"src\":\"https://analytics.umami.is/script.js\"}],\"$undefined\",\"$undefined\"],[\"$\",\"section\",null,{\"className\":\"mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-5xl xl:px-0\",\"children\":[[\"$\",\"$L4\",null,{\"kbarConfig\":{\"searchDocumentsPath\":\"/search.json\"},\"children\":[[\"$\",\"header\",null,{\"className\":\"flex items-center w-full bg-white dark:bg-gray-950 justify-between py-10\",\"children\":[[\"$\",\"$L5\",null,{\"className\":\"break-words\",\"href\":\"/\",\"aria-label\":\"TailwindBlog\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mr-3\",\"children\":[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"xmlnsXlink\":\"http://www.w3.org/1999/xlink\",\"width\":53.87,\"height\":43.61,\"viewBox\":\"344.564 330.278 111.737 91.218\",\"children\":[[\"$\",\"defs\",null,{\"children\":[[\"$\",\"linearGradient\",null,{\"id\":\"logo_svg__b\",\"x1\":420.97,\"x2\":420.97,\"y1\":331.28,\"y2\":418.5,\"gradientUnits\":\"userSpaceOnUse\",\"children\":[[\"$\",\"stop\",null,{\"offset\":\"0%\",\"style\":{\"stopColor\":\"#06b6d4\",\"stopOpacity\":1}}],[\"$\",\"stop\",null,{\"offset\":\"100%\",\"style\":{\"stopColor\":\"#67e8f9\",\"stopOpacity\":1}}]]}],[\"$\",\"linearGradient\",null,{\"id\":\"logo_svg__d\",\"x1\":377.89,\"x2\":377.89,\"y1\":331.28,\"y2\":418.5,\"gradientUnits\":\"userSpaceOnUse\",\"children\":[[\"$\",\"stop\",null,{\"offset\":\"0%\",\"style\":{\"stopColor\":\"#06b6d4\",\"stopOpacity\":1}}],[\"$\",\"stop\",null,{\"offset\":\"100%\",\"style\":{\"stopColor\":\"#67e8f9\",\"stopOpacity\":1}}]]}],[\"$\",\"path\",null,{\"id\":\"logo_svg__a\",\"d\":\"M453.3 331.28v28.57l-64.66 58.65v-30.08z\"}],[\"$\",\"path\",null,{\"id\":\"logo_svg__c\",\"d\":\"M410.23 331.28v28.57l-64.67 58.65v-30.08z\"}]]}],[\"$\",\"use\",null,{\"xlinkHref\":\"#logo_svg__a\",\"fill\":\"url(#logo_svg__b)\"}],[\"$\",\"use\",null,{\"xlinkHref\":\"#logo_svg__c\",\"fill\":\"url(#logo_svg__d)\"}]]}]}],[\"$\",\"div\",null,{\"className\":\"hidden h-6 text-2xl font-semibold sm:block\",\"children\":\"TailwindBlog\"}]]}]}],[\"$\",\"div\",null,{\"className\":\"flex items-center space-x-4 leading-5 sm:-mr-6 sm:space-x-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"no-scrollbar hidden max-w-40 items-center gap-x-4 overflow-x-auto sm:flex md:max-w-72 lg:max-w-96\",\"children\":[[\"$\",\"$L5\",\"Blog\",{\"className\":\"hover:text-primary-500 dark:hover:text-primary-400 m-1 font-medium text-gray-900 dark:text-gray-100\",\"href\":\"/blog\",\"children\":\"Blog\"}],[\"$\",\"$L5\",\"Tags\",{\"className\":\"hover:text-primary-500 dark:hover:text-primary-400 m-1 font-medium text-gray-900 dark:text-gray-100\",\"href\":\"/tags\",\"children\":\"Tags\"}],[\"$\",\"$L5\",\"Projects\",{\"className\":\"hover:text-primary-500 dark:hover:text-primary-400 m-1 font-medium text-gray-900 dark:text-gray-100\",\"href\":\"/projects\",\"children\":\"Projects\"}],[\"$\",\"$L5\",\"About\",{\"className\":\"hover:text-primary-500 dark:hover:text-primary-400 m-1 font-medium text-gray-900 dark:text-gray-100\",\"href\":\"/about\",\"children\":\"About\"}]]}],[\"$\",\"$L6\",null,{\"aria-label\":\"Search\",\"children\":[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"strokeWidth\":1.5,\"stroke\":\"currentColor\",\"className\":\"hover:text-primary-500 dark:hover:text-primary-400 h-6 w-6 text-gray-900 dark:text-gray-100\",\"children\":[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"d\":\"M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z\"}]}]}],[\"$\",\"$L7\",null,{}],[\"$\",\"$L8\",null,{}]]}]]}],[\"$\",\"main\",null,{\"className\":\"mb-auto\",\"children\":[\"$\",\"$L9\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$La\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col items-start justify-start md:mt-24 md:flex-row md:items-center md:justify-center md:space-x-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"space-x-2 pt-6 pb-8 md:space-y-5\",\"children\":[\"$\",\"h1\",null,{\"className\":\"text-6xl leading-9 font-extrabold tracking-tight text-gray-900 md:border-r-2 md:px-6 md:text-8xl md:leading-14 dark:text-gray-100\",\"children\":\"404\"}]}],[\"$\",\"div\",null,{\"className\":\"max-w-md\",\"children\":[[\"$\",\"p\",null,{\"className\":\"mb-4 text-xl leading-normal font-bold md:text-2xl\",\"children\":\"Sorry we couldn't find this page.\"}],[\"$\",\"p\",null,{\"className\":\"mb-8\",\"children\":\"But dont worry, you can find plenty of other things on our homepage.\"}],[\"$\",\"$L5\",null,{\"className\":\"focus:shadow-outline-blue inline rounded-lg border border-transparent bg-blue-600 px-4 py-2 text-sm leading-5 font-medium text-white shadow-xs transition-colors duration-150 hover:bg-blue-700 focus:outline-hidden dark:hover:bg-blue-500\",\"href\":\"/\",\"children\":\"Back to homepage\"}]]}]]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]]}],[\"$\",\"footer\",null,{\"children\":[\"$\",\"div\",null,{\"className\":\"mt-16 flex flex-col items-center\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-3 flex space-x-4\",\"children\":[[\"$\",\"a\",null,{\"className\":\"text-sm text-gray-500 transition hover:text-gray-600\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"mailto:address@yoursite.com\",\"children\":[[\"$\",\"span\",null,{\"className\":\"sr-only\",\"children\":\"mail\"}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 20 20\",\"className\":\"hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6\",\"children\":[[\"$\",\"title\",null,{\"children\":\"Mail\"}],[\"$\",\"path\",null,{\"d\":\"M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z\"}],[\"$\",\"path\",null,{\"d\":\"M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z\"}]]}]]}],[\"$\",\"a\",null,{\"className\":\"text-sm text-gray-500 transition hover:text-gray-600\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://github.com\",\"children\":[[\"$\",\"span\",null,{\"className\":\"sr-only\",\"children\":\"github\"}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"className\":\"hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6\",\"children\":[[\"$\",\"title\",null,{\"children\":\"GitHub\"}],[\"$\",\"path\",null,{\"d\":\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"}]]}]]}],[\"$\",\"a\",null,{\"className\":\"text-sm text-gray-500 transition hover:text-gray-600\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://facebook.com\",\"children\":[[\"$\",\"span\",null,{\"className\":\"sr-only\",\"children\":\"facebook\"}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"className\":\"hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6\",\"children\":[[\"$\",\"title\",null,{\"children\":\"Facebook\"}],[\"$\",\"path\",null,{\"d\":\"M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z\"}]]}]]}],[\"$\",\"a\",null,{\"className\":\"text-sm text-gray-500 transition hover:text-gray-600\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://youtube.com\",\"children\":[[\"$\",\"span\",null,{\"className\":\"sr-only\",\"children\":\"youtube\"}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"className\":\"hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6\",\"children\":[[\"$\",\"title\",null,{\"children\":\"Youtube\"}],[\"$\",\"path\",null,{\"d\":\"M23.499 6.203a3.008 3.008 0 00-2.089-2.089c-1.87-.501-9.4-.501-9.4-.501s-7.509-.01-9.399.501a3.008 3.008 0 00-2.088 2.09A31.258 31.26 0 000 12.01a31.258 31.26 0 00.523 5.785 3.008 3.008 0 002.088 2.089c1.869.502 9.4.502 9.4.502s7.508 0 9.399-.502a3.008 3.008 0 002.089-2.09 31.258 31.26 0 00.5-5.784 31.258 31.26 0 00-.5-5.808zm-13.891 9.4V8.407l6.266 3.604z\"}]]}]]}],[\"$\",\"a\",null,{\"className\":\"text-sm text-gray-500 transition hover:text-gray-600\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://www.linkedin.com\",\"children\":[[\"$\",\"span\",null,{\"className\":\"sr-only\",\"children\":\"linkedin\"}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"className\":\"hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6\",\"children\":[[\"$\",\"title\",null,{\"children\":\"Linkedin\"}],[\"$\",\"path\",null,{\"d\":\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\"}]]}]]}],null,[\"$\",\"a\",null,{\"className\":\"text-sm text-gray-500 transition hover:text-gray-600\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://bsky.app/\",\"children\":[[\"$\",\"span\",null,{\"className\":\"sr-only\",\"children\":\"bluesky\"}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"className\":\"hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6\",\"children\":[[\"$\",\"title\",null,{\"children\":\"Bluesky\"}],[\"$\",\"path\",null,{\"d\":\"M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565C.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479c.815 2.736 3.713 3.66 6.383 3.364q.204-.03.415-.056q-.207.033-.415.056c-3.912.58-7.387 2.005-2.83 7.078c5.013 5.19 6.87-1.113 7.823-4.308c.953 3.195 2.05 9.271 7.733 4.308c4.267-4.308 1.172-6.498-2.74-7.078a9 9 0 0 1-.415-.056q.21.026.415.056c2.67.297 5.568-.628 6.383-3.364c.246-.828.624-5.79.624-6.478c0-.69-.139-1.861-.902-2.206c-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8\"}]]}]]}],[\"$\",\"a\",null,{\"className\":\"text-sm text-gray-500 transition hover:text-gray-600\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://twitter.com/x\",\"children\":[[\"$\",\"span\",null,{\"className\":\"sr-only\",\"children\":\"x\"}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"className\":\"hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6\",\"children\":[[\"$\",\"title\",null,{\"children\":\"X\"}],[\"$\",\"path\",null,{\"d\":\"M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z\"}]]}]]}],[\"$\",\"a\",null,{\"className\":\"text-sm text-gray-500 transition hover:text-gray-600\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://www.instagram.com\",\"children\":[[\"$\",\"span\",null,{\"className\":\"sr-only\",\"children\":\"instagram\"}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"className\":\"hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6\",\"children\":[[\"$\",\"title\",null,{\"children\":\"Instagram\"}],[\"$\",\"path\",null,{\"d\":\"$b\"}]]}]]}],[\"$\",\"a\",null,{\"className\":\"text-sm text-gray-500 transition hover:text-gray-600\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://www.threads.net\",\"children\":[[\"$\",\"span\",null,{\"className\":\"sr-only\",\"children\":\"threads\"}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"className\":\"hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6\",\"children\":[[\"$\",\"title\",null,{\"children\":\"Threads\"}],[\"$\",\"path\",null,{\"d\":\"$c\"}]]}]]}],[\"$\",\"a\",null,{\"className\":\"text-sm text-gray-500 transition hover:text-gray-600\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://medium.com\",\"children\":[[\"$\",\"span\",null,{\"className\":\"sr-only\",\"children\":\"medium\"}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"className\":\"hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6\",\"children\":[[\"$\",\"title\",null,{\"children\":\"Medium\"}],[\"$\",\"path\",null,{\"d\":\"M13.54 12a6.8 6.8 0 01-6.77 6.82A6.8 6.8 0 010 12a6.8 6.8 0 016.77-6.82A6.8 6.8 0 0113.54 12zM20.96 12c0 3.54-1.51 6.42-3.38 6.42-1.87 0-3.39-2.88-3.39-6.42s1.52-6.42 3.39-6.42 3.38 2.88 3.38 6.42M24 12c0 3.17-.53 5.75-1.19 5.75-.66 0-1.19-2.58-1.19-5.75s.53-5.75 1.19-5.75C23.47 6.25 24 8.83 24 12z\"}]]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"mb-2 flex space-x-2 text-sm text-gray-500 dark:text-gray-400\",\"children\":[[\"$\",\"div\",null,{\"children\":\"Tails Azimuth\"}],[\"$\",\"div\",null,{\"children\":\" • \"}],[\"$\",\"div\",null,{\"children\":\"© 2026\"}],[\"$\",\"div\",null,{\"children\":\" • \"}],[\"$\",\"$L5\",null,{\"className\":\"break-words\",\"href\":\"/\",\"children\":\"Next.js Starter Blog\"}]]}],[\"$\",\"div\",null,{\"className\":\"mb-8 text-sm text-gray-500 dark:text-gray-400\",\"children\":[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://github.com/timlrx/tailwind-nextjs-starter-blog\",\"children\":\"Tailwind Nextjs Theme\"}]}]]}]}]]}]]}]}]]}]]}],{\"children\":[\"blog\",[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L9\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$La\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"slug\",\"new-features-in-v1\",\"c\"],[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L9\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$La\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[\"$Ld\",\"$undefined\",[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/7abc17aba6a0edf4.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"$Le\",null,{\"children\":[\"$Lf\",\"$L10\",null]}]]}],{},null,false]},null,false]},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$1\",\"ZcZnz-pjxL42vHiptPuD8\",{\"children\":[[\"$\",\"$L11\",null,{\"children\":\"$L12\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],[\"$\",\"$L13\",null,{\"children\":\"$L14\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$15\",\"$undefined\"],\"s\":false,\"S\":true}\n"])</script><script>self.__next_f.push([1,"16:I[1839,[\"874\",\"static/chunks/874-7cca39d2e0ddd8b8.js\",\"63\",\"static/chunks/63-ef4ffe428c84fbc3.js\",\"909\",\"static/chunks/app/blog/%5B...slug%5D/page-55fdf120c49a8b1e.js\"],\"default\"]\n17:I[2100,[\"874\",\"static/chunks/874-7cca39d2e0ddd8b8.js\",\"63\",\"static/chunks/63-ef4ffe428c84fbc3.js\",\"909\",\"static/chunks/app/blog/%5B...slug%5D/page-55fdf120c49a8b1e.js\"],\"default\"]\n18:I[8194,[\"874\",\"static/chunks/874-7cca39d2e0ddd8b8.js\",\"63\",\"static/chunks/63-ef4ffe428c84fbc3.js\",\"909\",\"static/chunks/app/blog/%5B...slug%5D/page-55fdf120c49a8b1e.js\"],\"default\"]\n19:I[1449,[\"874\",\"static/chunks/874-7cca39d2e0ddd8b8.js\",\"63\",\"static/chunks/63-ef4ffe428c84fbc3.js\",\"909\",\"static/chunks/app/blog/%5B...slug%5D/page-55fdf120c49a8b1e.js\"],\"default\"]\n"])</script><script>self.__next_f.push([1,"d:[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"BlogPosting\\\",\\\"headline\\\":\\\"New features in v1\\\",\\\"datePublished\\\":\\\"2021-08-07T15:32:14.000Z\\\",\\\"dateModified\\\":\\\"2021-02-01T00:00:00.000Z\\\",\\\"description\\\":\\\"An overview of the new features released in v1 - code block copy, multiple authors, frontmatter layout and more\\\",\\\"image\\\":\\\"/static/images/twitter-card.png\\\",\\\"url\\\":\\\"https://tailwind-nextjs-starter-blog.vercel.app/blog/new-features-in-v1\\\",\\\"author\\\":[{\\\"@type\\\":\\\"Person\\\",\\\"name\\\":\\\"Tails Azimuth\\\"}]}\"}}],[\"$\",\"section\",null,{\"className\":\"mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-5xl xl:px-0\",\"children\":[[\"$\",\"$L16\",null,{}],[\"$\",\"article\",null,{\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"header\",null,{\"children\":[\"$\",\"div\",null,{\"className\":\"space-y-1 border-b border-gray-200 pb-10 text-center dark:border-gray-700\",\"children\":[[\"$\",\"dl\",null,{\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"dt\",null,{\"className\":\"sr-only\",\"children\":\"Published on\"}],[\"$\",\"dd\",null,{\"className\":\"text-base leading-6 font-medium text-gray-500 dark:text-gray-400\",\"children\":[\"$\",\"time\",null,{\"dateTime\":\"2021-08-07T15:32:14.000Z\",\"children\":\"August 7, 2021\"}]}]]}]}],[\"$\",\"div\",null,{\"children\":[\"$\",\"h1\",null,{\"className\":\"text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10 md:text-5xl md:leading-14 dark:text-gray-100\",\"children\":\"New features in v1\"}]}]]}]}],[\"$\",\"div\",null,{\"className\":\"grid-rows-[auto_1fr] divide-y divide-gray-200 pb-8 xl:divide-y-0 dark:divide-gray-700\",\"children\":[[\"$\",\"div\",null,{\"className\":\"divide-y divide-gray-200 xl:col-span-3 xl:row-span-2 xl:pb-0 dark:divide-gray-700\",\"children\":[\"$\",\"div\",null,{\"className\":\"prose dark:prose-invert max-w-none pt-10 pb-8\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"content-header\",\"id\":\"overview\",\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"href\":\"#overview\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"content-header-link\",\"children\":[\"$\",\"svg\",null,{\"className\":\"h-5 linkicon w-5\",\"fill\":\"currentColor\",\"viewBox\":\"0 0 20 20\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}],[\"$\",\"path\",null,{\"d\":\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"}]]}]}]}],\"Overview\"]}],[\"$\",\"p\",null,{\"children\":\"A post on the new features introduced in v1.0. New features:\"}],[\"$\",\"ul\",null,{\"className\":\"\",\"children\":[[\"$\",\"li\",\"0\",{\"className\":\"\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#theme-colors\",\"children\":\"Theme colors\"}],null]}],[\"$\",\"li\",\"1\",{\"className\":\"\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#xdm-mdx-compiler\",\"children\":\"Xdm MDX compiler\"}],null]}],[\"$\",\"li\",\"2\",{\"className\":\"\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#table-of-contents-component\",\"children\":\"Table of contents component\"}],null]}],[\"$\",\"li\",\"3\",{\"className\":\"\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#layouts\",\"children\":\"Layouts\"}],null]}],[\"$\",\"li\",\"4\",{\"className\":\"\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#analytics\",\"children\":\"Analytics\"}],null]}],[\"$\",\"li\",\"5\",{\"className\":\"\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#blog-comments-system\",\"children\":\"Blog comments system\"}],null]}],[\"$\",\"li\",\"6\",{\"className\":\"\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#multiple-authors\",\"children\":\"Multiple authors\"}],null]}],[\"$\",\"li\",\"7\",{\"className\":\"\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#copy-button-for-code-blocks\",\"children\":\"Copy button for code blocks\"}],null]}],[\"$\",\"li\",\"8\",{\"className\":\"\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#line-highlighting-and-line-numbers\",\"children\":\"Line highlighting and line numbers\"}],null]}],[\"$\",\"li\",\"9\",{\"className\":\"\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#newletter-component-v113\",\"children\":\"Newletter component (v1.1.3)\"}],null]}],[\"$\",\"li\",\"10\",{\"className\":\"\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#bibliography-and-citations-v121\",\"children\":\"Bibliography and Citations (v1.2.1)\"}],null]}],[\"$\",\"li\",\"11\",{\"className\":\"\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#self-hosted-font-v150\",\"children\":\"Self-hosted font (v1.5.0)\"}],null]}],[\"$\",\"li\",\"12\",{\"className\":\"\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#upgrade-guide\",\"children\":\"Upgrade guide\"}],null]}]]}],[\"$\",\"p\",null,{\"children\":[\"First load JS decreased from 43kB to 39kB despite all the new features added! \",[\"$\",\"sup\",null,{\"children\":[\"$\",\"a\",null,{\"className\":\"break-words\",\"href\":\"#user-content-fn-1\",\"aria-describedby\":\"footnote-label\",\"data-footnote-ref\":true,\"id\":\"user-content-fnref-1\",\"children\":\"1\"}]}]]}],[\"$\",\"p\",null,{\"children\":[\"See \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"href\":\"#upgrade-guide\",\"children\":\"upgrade guide\"}],\" below if you are migrating from v0 version of the template.\"]}],[\"$\",\"h2\",null,{\"className\":\"content-header\",\"id\":\"theme-colors\",\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"href\":\"#theme-colors\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"content-header-link\",\"children\":[\"$\",\"svg\",null,{\"className\":\"h-5 linkicon w-5\",\"fill\":\"currentColor\",\"viewBox\":\"0 0 20 20\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}],[\"$\",\"path\",null,{\"d\":\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"}]]}]}]}],\"Theme colors\"]}],[\"$\",\"p\",null,{\"children\":\"You can easily modify the theme color by changing the primary attribute in the tailwind config file:\"}],[\"$\",\"div\",null,{\"className\":\"remark-code-title\",\"children\":\"tailwind.config.js\"}],[\"$\",\"$L17\",null,{\"className\":\"language-js\",\"children\":[\"$\",\"code\",null,{\"className\":\"code-highlight language-js\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"theme\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"colors\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"primary\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" colors\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token property-access\",\"children\":\"teal\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"gray\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" colors\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token property-access\",\"children\":\"neutral\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token operator spread\",\"children\":\"...\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token operator spread\",\"children\":\"...\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\"\\n\"]}]]}]}],[\"$\",\"p\",null,{\"children\":\"The primary color attribute should be assigned an object with keys from 50, 100, 200 ... 900 and the corresponding color code values.\"}],[\"$\",\"p\",null,{\"children\":[\"Tailwind includes great default color palettes that can be used for theming your own website. Check out \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://tailwindcss.com/docs/customizing-colors\",\"children\":\"customizing colors documentation page\"}],\" for the full range of options.\"]}],[\"$\",\"p\",null,{\"children\":[\"Migrating from v1? You can revert to the previous theme by setting \",[\"$\",\"code\",null,{\"children\":\"primary\"}],\" to \",[\"$\",\"code\",null,{\"children\":\"colors.sky\"}],\" (Tailwind 2.2.2 and above, otherwise \",[\"$\",\"code\",null,{\"children\":\"colors.lightBlue\"}],\") and changing gray to \",[\"$\",\"code\",null,{\"children\":\"colors.gray\"}],\".\"]}],[\"$\",\"p\",null,{\"children\":[\"From v1.1.2+, you can also customize the style of your code blocks easily by modifying the \",[\"$\",\"code\",null,{\"children\":\"css/prism.css\"}],\" stylesheet. Token classnames are compatible with prismjs so you can copy and adapt token styles from a prismjs stylesheet e.g. \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://github.com/PrismJS/prism-themes\",\"children\":\"prism themes\"}],\".\"]}],[\"$\",\"h2\",null,{\"className\":\"content-header\",\"id\":\"xdm-mdx-compiler\",\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"href\":\"#xdm-mdx-compiler\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"content-header-link\",\"children\":[\"$\",\"svg\",null,{\"className\":\"h-5 linkicon w-5\",\"fill\":\"currentColor\",\"viewBox\":\"0 0 20 20\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}],[\"$\",\"path\",null,{\"d\":\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"}]]}]}]}],\"Xdm MDX compiler\"]}],[\"$\",\"p\",null,{\"children\":[\"We switched the MDX bundler from \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://github.com/hashicorp/next-mdx-remote\",\"children\":\"next-mdx-remote\"}],\" to \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://github.com/kentcdodds/mdx-bundler\",\"children\":\"mdx-bundler\"}],\". This uses \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://github.com/wooorm/xdm\",\"children\":\"xdm\"}],\" under the hood, the latest micromark 3 and remark, rehype libraries.\"]}],[\"$\",\"p\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Warning:\"}],\" If you were using custom remark or rehype libraries, please upgrade to micromark 3 compatible ones. If you are upgrading, please delete \",[\"$\",\"code\",null,{\"children\":\"node_modules\"}],\" and \",[\"$\",\"code\",null,{\"children\":\"package-lock.json\"}],\" to avoid having past dependencies related issues.\"]}],[\"$\",\"p\",null,{\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://github.com/wooorm/xdm\",\"children\":\"xdm\"}],\" contains multiple improvements over \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"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. Please check your markdown output to verify.\"]}],[\"$\",\"p\",null,{\"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.\"}],[\"$\",\"p\",null,{\"children\":\"For example, the following jsx snippet can be used directly in an MDX file to render the page title component:\"}],[\"$\",\"$L17\",null,{\"className\":\"language-jsx\",\"children\":[\"$\",\"code\",null,{\"className\":\"code-highlight language-jsx\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// Or import PageTitle from './components/PageTitle.js' if you are using js\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token keyword module\",\"children\":\"import\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token imports\",\"children\":[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"PageTitle\"}]}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword module\",\"children\":\"from\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'./components/PageTitle.tsx'\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"PageTitle\"}]]}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003e\"}]]}],[\"$\",\"span\",null,{\"className\":\"token plain-text\",\"children\":\" Using JSX components in MDX \"}],[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c/\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"PageTitle\"}]]}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003e\"}]]}],\"\\n\"]}]]}]}],[\"$\",\"p\",null,{\"children\":[\"The default configuration resolves all components relative to the \",[\"$\",\"code\",null,{\"children\":\"components\"}],\" directory.\"]}],[\"$\",\"p\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Note\"}],\": Components which require external image loaders also require additional esbuild configuration. Components which are dependent on global application state on lifecycle like the Nextjs \",[\"$\",\"code\",null,{\"children\":\"Link\"}],\" component would also not work with this setup as each mdx file is built independently. For such cases, it is better to use component substitution.\"]}],[\"$\",\"h2\",null,{\"className\":\"content-header\",\"id\":\"table-of-contents-component\",\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"href\":\"#table-of-contents-component\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"content-header-link\",\"children\":[\"$\",\"svg\",null,{\"className\":\"h-5 linkicon w-5\",\"fill\":\"currentColor\",\"viewBox\":\"0 0 20 20\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}],[\"$\",\"path\",null,{\"d\":\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"}]]}]}]}],\"Table of contents component\"]}],[\"$\",\"p\",null,{\"children\":[\"Inspired by \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://docusaurus.io/docs/next/markdown-features/inline-toc\",\"children\":\"Docusaurus\"}],\" and Gatsby's \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://www.gatsbyjs.com/plugins/gatsby-remark-table-of-contents/\",\"children\":\"gatsby-remark-table-of-contents\"}],\", the \",[\"$\",\"code\",null,{\"children\":\"toc\"}],\" variable containing all the top level headings of the document is passed to the MDX file and can be styled accordingly. To make generating a table of contents (TOC) simple, you can use the existing \",[\"$\",\"code\",null,{\"children\":\"TOCInline\"}],\" component.\"]}],[\"$\",\"p\",null,{\"children\":\"For example, the TOC in this post was generated with the following code:\"}],[\"$\",\"$L17\",null,{\"className\":\"language-jsx\",\"children\":[\"$\",\"code\",null,{\"className\":\"code-highlight language-jsx\",\"children\":[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"TOCInline\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"toc\"}],[\"$\",\"span\",null,{\"className\":\"token language-javascript script\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation script-punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"props\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token property-access\",\"children\":\"toc\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"exclude\"}],[\"$\",\"span\",null,{\"className\":\"token attr-value\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation attr-equals\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\\\"\"}],\"Overview\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\\\"\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"toHeading\"}],[\"$\",\"span\",null,{\"className\":\"token language-javascript script\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation script-punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"2\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],\"\\n\"]}]}]}],[\"$\",\"p\",null,{\"children\":[\"You can customise the headings that are displayed by configuring the \",[\"$\",\"code\",null,{\"children\":\"fromHeading\"}],\" and \",[\"$\",\"code\",null,{\"children\":\"toHeading\"}],\" props, or exclude particular headings by passing a string or a string array to the \",[\"$\",\"code\",null,{\"children\":\"exclude\"}],\" prop. By default, all headings that are of depth 3 or smaller are indented. This can be configured by changing the \",[\"$\",\"code\",null,{\"children\":\"indentDepth\"}],\" property. A \",[\"$\",\"code\",null,{\"children\":\"asDisclosure\"}],\" prop can be used to render the TOC within an expandable disclosure element.\"]}],[\"$\",\"p\",null,{\"children\":\"Here's the full TOC rendered in a disclosure element.\"}],[\"$\",\"$L17\",null,{\"className\":\"language-jsx\",\"children\":[\"$\",\"code\",null,{\"className\":\"code-highlight language-jsx\",\"children\":[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"TOCInline\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"toc\"}],[\"$\",\"span\",null,{\"className\":\"token language-javascript script\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation script-punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"props\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token property-access\",\"children\":\"toc\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"asDisclosure\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],\"\\n\"]}]}]}],[\"$\",\"details\",null,{\"open\":true,\"children\":[[\"$\",\"summary\",null,{\"className\":\"ml-6 pb-2 pt-2 text-xl font-bold\",\"children\":\"Table of Contents\"}],[\"$\",\"div\",null,{\"className\":\"ml-6\",\"children\":[\"$\",\"ul\",null,{\"className\":\"\",\"children\":[[\"$\",\"li\",\"0\",{\"className\":\"\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#overview\",\"children\":\"Overview\"}],null]}],[\"$\",\"li\",\"1\",{\"className\":\"\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#theme-colors\",\"children\":\"Theme colors\"}],null]}],[\"$\",\"li\",\"2\",{\"className\":\"\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#xdm-mdx-compiler\",\"children\":\"Xdm MDX compiler\"}],null]}],[\"$\",\"li\",\"3\",{\"className\":\"\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#table-of-contents-component\",\"children\":\"Table of contents component\"}],null]}],[\"$\",\"li\",\"4\",{\"className\":\"\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#layouts\",\"children\":\"Layouts\"}],[\"$\",\"ul\",null,{\"className\":\"\",\"children\":[[\"$\",\"li\",\"0\",{\"className\":\"\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#adding-new-templates\",\"children\":\"Adding new templates\"}],null]}],[\"$\",\"li\",\"1\",{\"className\":\"\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#configuring-a-blog-post-frontmatter\",\"children\":\"Configuring a blog post frontmatter\"}],null]}],[\"$\",\"li\",\"2\",{\"className\":\"\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#extend\",\"children\":\"Extend\"}],null]}]]}]]}],[\"$\",\"li\",\"5\",{\"className\":\"\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#analytics\",\"children\":\"Analytics\"}],null]}],[\"$\",\"li\",\"6\",{\"className\":\"\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#blog-comments-system\",\"children\":\"Blog comments system\"}],null]}],[\"$\",\"li\",\"7\",{\"className\":\"\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#multiple-authors\",\"children\":\"Multiple authors\"}],[\"$\",\"ul\",null,{\"className\":\"\",\"children\":[[\"$\",\"li\",\"0\",{\"className\":\"\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#multiple-authors-in-blog-post\",\"children\":\"Multiple authors in blog post\"}],null]}]]}]]}],[\"$\",\"li\",\"8\",{\"className\":\"\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#copy-button-for-code-blocks\",\"children\":\"Copy button for code blocks\"}],null]}],[\"$\",\"li\",\"9\",{\"className\":\"\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#line-highlighting-and-line-numbers\",\"children\":\"Line highlighting and line numbers\"}],null]}],[\"$\",\"li\",\"10\",{\"className\":\"\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#newletter-component-v113\",\"children\":\"Newletter component (v1.1.3)\"}],null]}],[\"$\",\"li\",\"11\",{\"className\":\"\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#bibliography-and-citations-v121\",\"children\":\"Bibliography and Citations (v1.2.1)\"}],null]}],[\"$\",\"li\",\"12\",{\"className\":\"\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#self-hosted-font-v150\",\"children\":\"Self-hosted font (v1.5.0)\"}],null]}],[\"$\",\"li\",\"13\",{\"className\":\"\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#upgrade-guide\",\"children\":\"Upgrade guide\"}],null]}]]}]}]]}],[\"$\",\"h2\",null,{\"className\":\"content-header\",\"id\":\"layouts\",\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"href\":\"#layouts\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"content-header-link\",\"children\":[\"$\",\"svg\",null,{\"className\":\"h-5 linkicon w-5\",\"fill\":\"currentColor\",\"viewBox\":\"0 0 20 20\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}],[\"$\",\"path\",null,{\"d\":\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"}]]}]}]}],\"Layouts\"]}],[\"$\",\"p\",null,{\"children\":[\"You can map mdx blog content to layout components by configuring the frontmatter field. For example, this post is written with the new \",[\"$\",\"code\",null,{\"children\":\"PostSimple\"}],\" layout!\"]}],[\"$\",\"h3\",null,{\"className\":\"content-header\",\"id\":\"adding-new-templates\",\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"href\":\"#adding-new-templates\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"content-header-link\",\"children\":[\"$\",\"svg\",null,{\"className\":\"h-5 linkicon w-5\",\"fill\":\"currentColor\",\"viewBox\":\"0 0 20 20\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}],[\"$\",\"path\",null,{\"d\":\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"}]]}]}]}],\"Adding new templates\"]}],[\"$\",\"p\",null,{\"children\":[\"layout templates are stored in the \",[\"$\",\"code\",null,{\"children\":\"./layouts\"}],\" folder. You can add your React components that you want to map to markdown content in this folder. The component file name must match that specified in the markdown frontmatter \",[\"$\",\"code\",null,{\"children\":\"layout\"}],\" field.\"]}],[\"$\",\"p\",null,{\"children\":[\"The only required field is \",[\"$\",\"code\",null,{\"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.\"]}],[\"$\",\"p\",null,{\"children\":[\"You can configure the template to take in other fields - see \",[\"$\",\"code\",null,{\"children\":\"PostLayout\"}],\" component for an example.\"]}],[\"$\",\"p\",null,{\"children\":\"Here's an example layout which you can further customise:\"}],[\"$\",\"$L17\",null,{\"className\":\"language-jsx\",\"children\":[\"$\",\"code\",null,{\"className\":\"code-highlight language-jsx\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token keyword module\",\"children\":\"export\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword module\",\"children\":\"default\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"function\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"ExampleLayout\"}]}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token parameter\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\" frontMatter\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" children \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"const\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\" date\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" title \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\"}],\" frontMatter\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token keyword control-flow\",\"children\":\"return\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"SectionContainer\"}]]}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003e\"}]]}],[\"$\",\"span\",null,{\"className\":\"token plain-text\",\"children\":\"\\n\"}]]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token plain-text\",\"children\":\" \"}],[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],\"div\"]}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003e\"}]]}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"date\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c/\"}],\"div\"]}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003e\"}]]}],[\"$\",\"span\",null,{\"className\":\"token plain-text\",\"children\":\"\\n\"}]]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token plain-text\",\"children\":\" \"}],[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],\"h1\"]}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003e\"}]]}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"title\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c/\"}],\"h1\"]}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003e\"}]]}],[\"$\",\"span\",null,{\"className\":\"token plain-text\",\"children\":\"\\n\"}]]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token plain-text\",\"children\":\" \"}],[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],\"div\"]}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003e\"}]]}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"children\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c/\"}],\"div\"]}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003e\"}]]}],[\"$\",\"span\",null,{\"className\":\"token plain-text\",\"children\":\"\\n\"}]]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token plain-text\",\"children\":\" \"}],[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c/\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"SectionContainer\"}]]}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003e\"}]]}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\"\\n\"]}]]}]}],[\"$\",\"h3\",null,{\"className\":\"content-header\",\"id\":\"configuring-a-blog-post-frontmatter\",\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"href\":\"#configuring-a-blog-post-frontmatter\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"content-header-link\",\"children\":[\"$\",\"svg\",null,{\"className\":\"h-5 linkicon w-5\",\"fill\":\"currentColor\",\"viewBox\":\"0 0 20 20\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}],[\"$\",\"path\",null,{\"d\":\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"}]]}]}]}],\"Configuring a blog post frontmatter\"]}],[\"$\",\"p\",null,{\"children\":[\"Use the \",[\"$\",\"code\",null,{\"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:\"]}],[\"$\",\"$L17\",null,{\"className\":\"language-js\",\"children\":[\"$\",\"code\",null,{\"className\":\"code-highlight language-js\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"--\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"-\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"title\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'New features in v1'\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"date\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'2021-05-26 '\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"tags\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"[\"}],[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'next-js'\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'tailwind'\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'guide'\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"]\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"draft\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token boolean\",\"children\":\"false\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"summary\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'Introducing the new layout features - you can map mdx blog content to layout components by configuring the frontmatter field'\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"layout\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"PostSimple\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"--\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"-\"}],\"\\n\"]}]]}]}],[\"$\",\"p\",null,{\"children\":[\"You can configure the default layout in the respective page section by modifying the \",[\"$\",\"code\",null,{\"children\":\"DEFAULT_LAYOUT\"}],\" variable. The \",[\"$\",\"code\",null,{\"children\":\"DEFAULT_LAYOUT\"}],\" for blog posts page is set to \",[\"$\",\"code\",null,{\"children\":\"PostLayout\"}],\".\"]}],[\"$\",\"h3\",null,{\"className\":\"content-header\",\"id\":\"extend\",\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"href\":\"#extend\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"content-header-link\",\"children\":[\"$\",\"svg\",null,{\"className\":\"h-5 linkicon w-5\",\"fill\":\"currentColor\",\"viewBox\":\"0 0 20 20\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}],[\"$\",\"path\",null,{\"d\":\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"}]]}]}]}],\"Extend\"]}],[\"$\",\"p\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"layout\"}],\" is mapped to wrapper which wraps the entire MDX content.\"]}],[\"$\",\"$L17\",null,{\"className\":\"language-jsx\",\"children\":[\"$\",\"code\",null,{\"className\":\"code-highlight language-jsx\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token keyword module\",\"children\":\"export\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"const\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"MDXComponents\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"Image\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"a\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"CustomLink\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"pre\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"Pre\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token function function-variable\",\"children\":\"wrapper\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token parameter\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\" components\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" layout\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator spread\",\"children\":\"...\"}],\"rest \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator arrow\",\"children\":\"=\u003e\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"const\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"Layout\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"require\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token template-string\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token string template-punctuation\",\"children\":\"`\"}],[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"../layouts/\"}],[\"$\",\"span\",null,{\"className\":\"token interpolation\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation interpolation-punctuation\",\"children\":\"$${\"}],\"layout\",[\"$\",\"span\",null,{\"className\":\"token punctuation interpolation-punctuation\",\"children\":\"}\"}]]}],[\"$\",\"span\",null,{\"className\":\"token string template-punctuation\",\"children\":\"`\"}]]}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token keyword module\",\"children\":\"default\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token keyword control-flow\",\"children\":\"return\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"Layout\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token spread\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token operator spread\",\"children\":\"...\"}],\"rest\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token keyword module\",\"children\":\"export\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"const\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token function function-variable\",\"children\":[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"MDXLayoutRenderer\"}]}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token parameter\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\" layout\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" mdxSource\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator spread\",\"children\":\"...\"}],\"rest \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator arrow\",\"children\":\"=\u003e\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"const\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"MDXLayout\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"useMemo\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator arrow\",\"children\":\"=\u003e\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"getMDXComponent\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"mdxSource\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"[\"}],\"mdxSource\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"]\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token keyword control-flow\",\"children\":\"return\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"MDXLayout\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"layout\"}],[\"$\",\"span\",null,{\"className\":\"token language-javascript script\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation script-punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"layout\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"components\"}],[\"$\",\"span\",null,{\"className\":\"token language-javascript script\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation script-punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"MDXComponents\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token spread\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token operator spread\",\"children\":\"...\"}],\"rest\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\"\\n\"]}]]}]}],[\"$\",\"p\",null,{\"children\":[\"Use the \",[\"$\",\"code\",null,{\"children\":\"MDXLayoutRenderer\"}],\" component on a page where you want to accept a layout name to map to the desired layout. You need to pass the layout name from the layout folder (it has to be an exact match).\"]}],[\"$\",\"h2\",null,{\"className\":\"content-header\",\"id\":\"analytics\",\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"href\":\"#analytics\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"content-header-link\",\"children\":[\"$\",\"svg\",null,{\"className\":\"h-5 linkicon w-5\",\"fill\":\"currentColor\",\"viewBox\":\"0 0 20 20\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}],[\"$\",\"path\",null,{\"d\":\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"}]]}]}]}],\"Analytics\"]}],[\"$\",\"p\",null,{\"children\":[\"The template now supports \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://plausible.io/\",\"children\":\"plausible\"}],\", \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://simpleanalytics.com/\",\"children\":\"simple analytics\"}],\" and google analytics. Configure \",[\"$\",\"code\",null,{\"children\":\"siteMetadata.js\"}],\" with the settings that correspond with the desired analytics provider.\"]}],[\"$\",\"$L17\",null,{\"className\":\"language-js\",\"children\":[\"$\",\"code\",null,{\"className\":\"code-highlight language-js\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"analytics\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// supports plausible, simpleAnalytics or googleAnalytics\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"plausibleDataDomain\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"''\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// e.g. tailwind-nextjs-starter-blog.vercel.app\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"simpleAnalytics\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token boolean\",\"children\":\"false\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// true or false\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"googleAnalyticsId\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"''\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// e.g. UA-000000-2 or G-XXXXXXX\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n\"]}]]}]}],[\"$\",\"p\",null,{\"children\":[\"Custom events are also supported. You can import the \",[\"$\",\"code\",null,{\"children\":\"logEvent\"}],\" function from \",[\"$\",\"code\",null,{\"children\":\"@components/analytics/[ANALYTICS-PROVIDER]\"}],\" file and call it when triggering certain events of interest. \",[\"$\",\"em\",null,{\"children\":\"Note\"}],\": Additional configuration might be required depending on the analytics provider, please check their official documentation for more information.\"]}],[\"$\",\"h2\",null,{\"className\":\"content-header\",\"id\":\"blog-comments-system\",\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"href\":\"#blog-comments-system\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"content-header-link\",\"children\":[\"$\",\"svg\",null,{\"className\":\"h-5 linkicon w-5\",\"fill\":\"currentColor\",\"viewBox\":\"0 0 20 20\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}],[\"$\",\"path\",null,{\"d\":\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"}]]}]}]}],\"Blog comments system\"]}],[\"$\",\"p\",null,{\"children\":[\"We have also added support for \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://github.com/laymonage/giscus\",\"children\":\"giscus\"}],\", \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://github.com/utterance/utterances\",\"children\":\"utterances\"}],\" or disqus. To enable, simply configure \",[\"$\",\"code\",null,{\"children\":\"siteMetadata.js\"}],\" comments property with the desired provider and settings as specified in the config file.\"]}],[\"$\",\"$L17\",null,{\"className\":\"language-js\",\"children\":[\"$\",\"code\",null,{\"className\":\"code-highlight language-js\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"comment\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// Select a provider and use the environment variables associated to it\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// https://vercel.com/docs/environment-variables\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"provider\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'giscus'\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// supported providers: giscus, utterances, disqus\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"giscusConfig\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// Visit the link below, and follow the steps in the 'configuration' section\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// https://giscus.app/\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"repo\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" process\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token property-access\",\"children\":\"env\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token constant\",\"children\":\"NEXT_PUBLIC_GISCUS_REPO\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"repositoryId\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" process\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token property-access\",\"children\":\"env\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token constant\",\"children\":\"NEXT_PUBLIC_GISCUS_REPOSITORY_ID\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"category\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" process\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token property-access\",\"children\":\"env\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token constant\",\"children\":\"NEXT_PUBLIC_GISCUS_CATEGORY\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"categoryId\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" process\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token property-access\",\"children\":\"env\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token constant\",\"children\":\"NEXT_PUBLIC_GISCUS_CATEGORY_ID\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"mapping\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'pathname'\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// supported options: pathname, url, title\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"reactions\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'1'\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// Emoji reactions: 1 = enable / 0 = disable\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// Send discussion metadata periodically to the parent window: 1 = enable / 0 = disable\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"metadata\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'0'\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// theme example: light, dark, dark_dimmed, dark_high_contrast\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// transparent_dark, preferred_color_scheme, custom\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"theme\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'light'\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// theme when dark mode\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"darkTheme\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'transparent_dark'\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// If the theme option above is set to 'custom`\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// please provide a link below to your custom theme css file.\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// example: https://giscus.app/themes/custom_example.css\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"themeURL\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"''\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"utterancesConfig\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// Visit the link below, and follow the steps in the 'configuration' section\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// https://utteranc.es/\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"repo\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" process\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token property-access\",\"children\":\"env\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token constant\",\"children\":\"NEXT_PUBLIC_UTTERANCES_REPO\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"issueTerm\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"''\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// supported options: pathname, url, title\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"label\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"''\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// label (optional): Comment 💬\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// theme example: github-light, github-dark, preferred-color-scheme\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// github-dark-orange, icy-dark, dark-blue, photon-dark, boxy-light\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"theme\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"''\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// theme when dark mode\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"darkTheme\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"''\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"disqus\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// https://help.disqus.com/en/articles/1717111-what-s-a-shortname\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"shortname\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" process\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token property-access\",\"children\":\"env\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token constant\",\"children\":\"NEXT_PUBLIC_DISQUS_SHORTNAME\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n\"]}]]}]}],[\"$\",\"h2\",null,{\"className\":\"content-header\",\"id\":\"multiple-authors\",\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"href\":\"#multiple-authors\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"content-header-link\",\"children\":[\"$\",\"svg\",null,{\"className\":\"h-5 linkicon w-5\",\"fill\":\"currentColor\",\"viewBox\":\"0 0 20 20\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}],[\"$\",\"path\",null,{\"d\":\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"}]]}]}]}],\"Multiple authors\"]}],[\"$\",\"p\",null,{\"children\":[\"Information on authors is now split from \",[\"$\",\"code\",null,{\"children\":\"siteMetadata.js\"}],\" and stored in its own \",[\"$\",\"code\",null,{\"children\":\"data/authors\"}],\" folder as a markdown file. Minimally, you will need to have a \",[\"$\",\"code\",null,{\"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.\"]}],[\"$\",\"p\",null,{\"children\":\"Here's how an author markdown file might look like:\"}],[\"$\",\"div\",null,{\"className\":\"remark-code-title\",\"children\":\"default.md\"}],[\"$\",\"$L17\",null,{\"className\":\"language-md\",\"children\":[\"$\",\"code\",null,{\"className\":\"code-highlight language-md\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\"$\",\"span\",null,{\"className\":\"token front-matter-block\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"---\"}],\"\\n\"]}]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\"$\",\"span\",null,{\"className\":\"token front-matter-block\",\"children\":[\"$\",\"span\",null,{\"className\":\"token language-yaml front-matter yaml\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token atrule key\",\"children\":\"name\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\":\"}],\" Tails Azimuth\\n\"]}]}]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\"$\",\"span\",null,{\"className\":\"token front-matter-block\",\"children\":[\"$\",\"span\",null,{\"className\":\"token language-yaml front-matter yaml\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token atrule key\",\"children\":\"avatar\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\":\"}],\" /static/images/avatar.png\\n\"]}]}]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\"$\",\"span\",null,{\"className\":\"token front-matter-block\",\"children\":[\"$\",\"span\",null,{\"className\":\"token language-yaml front-matter yaml\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token atrule key\",\"children\":\"occupation\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\":\"}],\" Professor of Atmospheric Science\\n\"]}]}]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\"$\",\"span\",null,{\"className\":\"token front-matter-block\",\"children\":[\"$\",\"span\",null,{\"className\":\"token language-yaml front-matter yaml\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token atrule key\",\"children\":\"company\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\":\"}],\" Stanford University\\n\"]}]}]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\"$\",\"span\",null,{\"className\":\"token front-matter-block\",\"children\":[\"$\",\"span\",null,{\"className\":\"token language-yaml front-matter yaml\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token atrule key\",\"children\":\"email\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\":\"}],\" address@yoursite.com\\n\"]}]}]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\"$\",\"span\",null,{\"className\":\"token front-matter-block\",\"children\":[\"$\",\"span\",null,{\"className\":\"token language-yaml front-matter yaml\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token atrule key\",\"children\":\"twitter\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\":\"}],\" https\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\":\"}],\"//twitter.com/Twitter\\n\"]}]}]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\"$\",\"span\",null,{\"className\":\"token front-matter-block\",\"children\":[\"$\",\"span\",null,{\"className\":\"token language-yaml front-matter yaml\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token atrule key\",\"children\":\"linkedin\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\":\"}],\" https\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\":\"}],\"//www.linkedin.com\\n\"]}]}]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\"$\",\"span\",null,{\"className\":\"token front-matter-block\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token language-yaml front-matter yaml\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token atrule key\",\"children\":\"github\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\":\"}],\" https\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\":\"}],\"//github.com\"]}],\"\\n\"]}]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token front-matter-block\",\"children\":[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"---\"}]}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"A long description of yourself...\\n\"}]]}]}],[\"$\",\"p\",null,{\"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:\"}],[\"$\",\"$L17\",null,{\"className\":\"language-js\",\"children\":[\"$\",\"code\",null,{\"className\":\"code-highlight language-js\",\"children\":[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"const\"}],\" authorDetails \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword control-flow\",\"children\":\"await\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"getFileBySlug\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'authors'\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"[\"}],[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'default'\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"]\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\"\\n\"]}]}]}],[\"$\",\"p\",null,{\"children\":[\"This is rendered in the \",[\"$\",\"code\",null,{\"children\":\"AuthorLayout\"}],\" template.\"]}],[\"$\",\"h3\",null,{\"className\":\"content-header\",\"id\":\"multiple-authors-in-blog-post\",\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"href\":\"#multiple-authors-in-blog-post\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"content-header-link\",\"children\":[\"$\",\"svg\",null,{\"className\":\"h-5 linkicon w-5\",\"fill\":\"currentColor\",\"viewBox\":\"0 0 20 20\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}],[\"$\",\"path\",null,{\"d\":\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"}]]}]}]}],\"Multiple authors in blog post\"]}],[\"$\",\"p\",null,{\"children\":[\"The frontmatter of a blog post accepts an optional \",[\"$\",\"code\",null,{\"children\":\"authors\"}],\" array 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 a post.\"]}],[\"$\",\"p\",null,{\"children\":[\"For example, the following frontmatter will display the authors given by \",[\"$\",\"code\",null,{\"children\":\"data/authors/default.md\"}],\" and \",[\"$\",\"code\",null,{\"children\":\"data/authors/sparrowhawk.md\"}]]}],[\"$\",\"$L17\",null,{\"className\":\"language-yaml\",\"children\":[\"$\",\"code\",null,{\"className\":\"code-highlight language-yaml\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token atrule key\",\"children\":\"title\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'My first post'\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token atrule key\",\"children\":\"date\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'2021-01-12'\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token atrule key\",\"children\":\"draft\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token boolean important\",\"children\":\"false\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token atrule key\",\"children\":\"summary\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'My first post'\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token atrule key\",\"children\":\"authors\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"[\"}],[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'default'\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'sparrowhawk'\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"]\"}],\"\\n\"]}]]}]}],[\"$\",\"p\",null,{\"children\":[\"A demo of a multiple authors post is shown in \",[\"$\",\"$L5\",null,{\"className\":\"break-words\",\"href\":\"/blog/introducing-tailwind-nextjs-starter-blog\",\"children\":\"Introducing Tailwind Nextjs Starter Blog post\"}],\".\"]}],[\"$\",\"h2\",null,{\"className\":\"content-header\",\"id\":\"copy-button-for-code-blocks\",\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"href\":\"#copy-button-for-code-blocks\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"content-header-link\",\"children\":[\"$\",\"svg\",null,{\"className\":\"h-5 linkicon w-5\",\"fill\":\"currentColor\",\"viewBox\":\"0 0 20 20\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}],[\"$\",\"path\",null,{\"d\":\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"}]]}]}]}],\"Copy button for code blocks\"]}],[\"$\",\"p\",null,{\"children\":[\"Hover over a code block and you will notice a GitHub-inspired copy button! You can modify \",[\"$\",\"code\",null,{\"children\":\"./components/Pre.js\"}],\" to further customise it. The component is passed to \",[\"$\",\"code\",null,{\"children\":\"MDXComponents\"}],\" and modifies all \",[\"$\",\"code\",null,{\"children\":\"\u003cpre\u003e\"}],\" blocks.\"]}],[\"$\",\"h2\",null,{\"className\":\"content-header\",\"id\":\"line-highlighting-and-line-numbers\",\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"href\":\"#line-highlighting-and-line-numbers\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"content-header-link\",\"children\":[\"$\",\"svg\",null,{\"className\":\"h-5 linkicon w-5\",\"fill\":\"currentColor\",\"viewBox\":\"0 0 20 20\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}],[\"$\",\"path\",null,{\"d\":\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"}]]}]}]}],\"Line highlighting and line numbers\"]}],[\"$\",\"p\",null,{\"children\":[\"Line highlighting and line numbers are now supported out of the box thanks to the new \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://github.com/timlrx/rehype-prism-plus\",\"children\":\"rehype-prism-plus plugin\"}]]}],[\"$\",\"p\",null,{\"children\":\"The following javascript code block:\"}],[\"$\",\"$L17\",null,{\"className\":\"language-js\",\"children\":[\"$\",\"code\",null,{\"className\":\"code-highlight language-js\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token template-string\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token string template-punctuation\",\"children\":\"`\"}],[\"$\",\"span\",null,{\"className\":\"token string template-punctuation\",\"children\":\"`\"}]]}],[\"$\",\"span\",null,{\"className\":\"token template-string\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token string template-punctuation\",\"children\":\"`\"}],[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"js {1, 3-4} showLineNumbers\\n\"}]]}]]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\"$\",\"span\",null,{\"className\":\"token template-string\",\"children\":[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"var num1, num2, sum\\n\"}]}]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\"$\",\"span\",null,{\"className\":\"token template-string\",\"children\":[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"num1 = prompt('Enter first number')\\n\"}]}]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\"$\",\"span\",null,{\"className\":\"token template-string\",\"children\":[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"num2 = prompt('Enter second number')\\n\"}]}]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\"$\",\"span\",null,{\"className\":\"token template-string\",\"children\":[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"sum = parseInt(num1) + parseInt(num2) // \\\"+\\\" means \\\"add\\\"\\n\"}]}]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\"$\",\"span\",null,{\"className\":\"token template-string\",\"children\":[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"alert('Sum = ' + sum) // \\\"+\\\" means combine into a string\\n\"}]}]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token template-string\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token string\"}],[\"$\",\"span\",null,{\"className\":\"token string template-punctuation\",\"children\":\"`\"}]]}],[\"$\",\"span\",null,{\"className\":\"token template-string\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token string template-punctuation\",\"children\":\"`\"}],[\"$\",\"span\",null,{\"className\":\"token string template-punctuation\",\"children\":\"`\"}]]}],\"\\n\"]}]]}]}],[\"$\",\"p\",null,{\"children\":\"will appear as:\"}],[\"$\",\"$L17\",null,{\"className\":\"language-js\",\"children\":[\"$\",\"code\",null,{\"className\":\"code-highlight language-js\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line line-number highlight-line\",\"line\":\"1\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"var\"}],\" num1\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" num2\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" sum\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line line-number\",\"line\":\"2\",\"children\":[\"num1 \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"prompt\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'Enter first number'\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line line-number highlight-line\",\"line\":\"3\",\"children\":[\"num2 \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"prompt\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'Enter second number'\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line line-number highlight-line\",\"line\":\"4\",\"children\":[\"sum \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"parseInt\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"num1\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"+\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"parseInt\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"num2\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// \\\"+\\\" means \\\"add\\\"\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line line-number\",\"line\":\"5\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"alert\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'Sum = '\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"+\"}],\" sum\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// \\\"+\\\" means combine into a string\"}],\"\\n\"]}]]}]}],[\"$\",\"p\",null,{\"children\":[\"To modify the styles, change the following class selectors in the \",[\"$\",\"code\",null,{\"children\":\"prism.css\"}],\" file:\"]}],[\"$\",\"$L17\",null,{\"className\":\"language-css\",\"children\":[\"$\",\"code\",null,{\"className\":\"code-highlight language-css\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token selector\",\"children\":[\"$\",\"span\",null,{\"className\":\"token class\",\"children\":\".code-highlight\"}]}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token atrule\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token rule\",\"children\":\"@apply\"}],\" float-left min-w-full\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}]]}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token selector\",\"children\":[\"$\",\"span\",null,{\"className\":\"token class\",\"children\":\".code-line\"}]}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token atrule\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token rule\",\"children\":\"@apply\"}],\" -mx-4 block border-l-4 border-opacity-0 pl-4 pr-4\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}]]}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token selector\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token class\",\"children\":\".code-line\"}],[\"$\",\"span\",null,{\"className\":\"token class\",\"children\":\".inserted\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token atrule\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token rule\",\"children\":\"@apply\"}],\" bg-green-500 bg-opacity-20\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}]]}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token selector\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token class\",\"children\":\".code-line\"}],[\"$\",\"span\",null,{\"className\":\"token class\",\"children\":\".deleted\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token atrule\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token rule\",\"children\":\"@apply\"}],\" bg-red-500 bg-opacity-20\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}]]}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token selector\",\"children\":[\"$\",\"span\",null,{\"className\":\"token class\",\"children\":\".highlight-line\"}]}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token atrule\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token rule\",\"children\":\"@apply\"}],\" -mx-4 border-l-4 border-primary-500 bg-gray-700 bg-opacity-50\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}]]}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token selector\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token class\",\"children\":\".line-number\"}],[\"$\",\"span\",null,{\"className\":\"token pseudo-element\",\"children\":\"::before\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token atrule\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token rule\",\"children\":\"@apply\"}],\" -ml-2 mr-4 inline-block w-4 text-right text-gray-400\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}]]}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token property\",\"children\":\"content\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"attr\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"line\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\"\\n\"]}]]}]}],[\"$\",\"h2\",null,{\"className\":\"content-header\",\"id\":\"newletter-component-v113\",\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"href\":\"#newletter-component-v113\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"content-header-link\",\"children\":[\"$\",\"svg\",null,{\"className\":\"h-5 linkicon w-5\",\"fill\":\"currentColor\",\"viewBox\":\"0 0 20 20\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}],[\"$\",\"path\",null,{\"d\":\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"}]]}]}]}],\"Newletter component (v1.1.3)\"]}],[\"$\",\"p\",null,{\"children\":\"Introduced in v1.1.3, the newsletter component gives you an easy way to build an audience. It integrates with the following providers:\"}],[\"$\",\"ul\",null,{\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://mailchimp.com/\",\"children\":\"Mailchimp\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://buttondown.email/\",\"children\":\"Buttondown\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://convertkit.com/\",\"children\":\"Convertkit\"}]}]]}],[\"$\",\"p\",null,{\"children\":[\"To use it, specify the provider which you are using in the config file and add the necessary environment variables to the \",[\"$\",\"code\",null,{\"children\":\".env\"}],\" file. For more information on the required variables, check out \",[\"$\",\"code\",null,{\"children\":\".env.sample.\"}]]}],[\"$\",\"p\",null,{\"children\":[\"Two components are exported, a default \",[\"$\",\"code\",null,{\"children\":\"NewsletterForm\"}],\" and a \",[\"$\",\"code\",null,{\"children\":\"BlogNewsletterForm\"}],\" component, which is also passed in as an MDX component and can be used in a blog post:\"]}],[\"$\",\"$L17\",null,{\"className\":\"language-jsx\",\"children\":[\"$\",\"code\",null,{\"className\":\"code-highlight language-jsx\",\"children\":[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"BlogNewsletterForm\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"title\"}],[\"$\",\"span\",null,{\"className\":\"token attr-value\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation attr-equals\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\\\"\"}],\"Like what you are reading?\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\\\"\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],\"\\n\"]}]}]}],[\"$\",\"$L18\",null,{\"title\":\"Like what you are reading?\"}],[\"$\",\"p\",null,{\"children\":[\"The component relies on nextjs's \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://nextjs.org/docs/api-routes/introduction\",\"children\":\"API routes\"}],\" which requires a server-side instance of nextjs to be setup and 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.\"]}],[\"$\",\"p\",null,{\"children\":\"A static site compatible alternative is to substitute the route in the newsletter component with a form API endpoint provider.\"}],[\"$\",\"h2\",null,{\"className\":\"content-header\",\"id\":\"bibliography-and-citations-v121\",\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"href\":\"#bibliography-and-citations-v121\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"content-header-link\",\"children\":[\"$\",\"svg\",null,{\"className\":\"h-5 linkicon w-5\",\"fill\":\"currentColor\",\"viewBox\":\"0 0 20 20\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}],[\"$\",\"path\",null,{\"d\":\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"}]]}]}]}],\"Bibliography and Citations (v1.2.1)\"]}],[\"$\",\"p\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"rehype-citation\"}],\" plugin is added to the xdm processing pipeline in v1.2.1. This allows you to easily format citations and insert bibliography from an existing bibtex or CSL-json file.\"]}],[\"$\",\"p\",null,{\"children\":\"For example, the following markdown code sample:\"}],[\"$\",\"$L17\",null,{\"className\":\"language-md\",\"children\":[\"$\",\"code\",null,{\"className\":\"code-highlight language-md\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"Standard citation [@Nash1950]\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"In-text citations e.g. @Nash1951\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"Multiple citations [see @Nash1950; @Nash1951, page 50]\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token bold\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"**\"}],[\"$\",\"span\",null,{\"className\":\"token content\",\"children\":\"References:\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"**\"}]]}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"[^ref]\\n\"}]]}]}],[\"$\",\"p\",null,{\"children\":\"is rendered to the following:\"}],[\"$\",\"p\",null,{\"children\":[\"Standard citation \",[\"$\",\"span\",null,{\"id\":\"citation--nash1950--1\",\"children\":\"(Nash, 1950)\"}],[\"$\",\"br\",null,{}],\"In-text citations e.g. \",[\"$\",\"span\",null,{\"id\":\"citation--nash1951--2\",\"children\":\"Nash (1951)\"}],[\"$\",\"br\",null,{}],\"Multiple citations \",[\"$\",\"span\",null,{\"id\":\"citation--nash1950--nash1951--3\",\"children\":\"(see Nash, 1950, 1951, p. 50)\"}]]}],[\"$\",\"p\",null,{\"children\":[\"$\",\"strong\",null,{\"children\":\"References:\"}]}],[\"$\",\"div\",null,{\"className\":\"csl-bib-body references\",\"id\":\"refs\",\"children\":[[\"$\",\"div\",null,{\"className\":\"csl-entry\",\"id\":\"bib-nash1950\",\"children\":[\"Nash, J. (1950). Equilibrium points in n-person games. \",[\"$\",\"i\",null,{\"children\":\"Proceedings of the National Academy of Sciences\"}],\", \",[\"$\",\"i\",null,{\"children\":\"36\"}],\"(1), 48–49.\"]}],[\"$\",\"div\",null,{\"className\":\"csl-entry\",\"id\":\"bib-nash1951\",\"children\":[\"Nash, J. (1951). Non-cooperative games. \",[\"$\",\"i\",null,{\"children\":\"Annals of Mathematics\"}],\", 286–295.\"]}]]}],[\"$\",\"p\",null,{\"children\":[\"A bibliography will be inserted at the end of the document, but this can be overwritten by specifying a \",[\"$\",\"code\",null,{\"children\":\"[^Ref]\"}],\" tag at the intended location. The plugin uses APA citation formation, but also supports the following CSLs, 'apa', 'vancouver', 'harvard1', 'chicago', 'mla', or a path to a user-specified CSL file.\"]}],[\"$\",\"p\",null,{\"children\":[\"See \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://github.com/timlrx/rehype-citation\",\"children\":\"rehype-citation readme\"}],\" for more information on the configuration options.\"]}],[\"$\",\"h2\",null,{\"className\":\"content-header\",\"id\":\"self-hosted-font-v150\",\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"href\":\"#self-hosted-font-v150\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"content-header-link\",\"children\":[\"$\",\"svg\",null,{\"className\":\"h-5 linkicon w-5\",\"fill\":\"currentColor\",\"viewBox\":\"0 0 20 20\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}],[\"$\",\"path\",null,{\"d\":\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"}]]}]}]}],\"Self-hosted font (v1.5.0)\"]}],[\"$\",\"p\",null,{\"children\":[\"Google font has been replaced with self-hosted font from \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://fontsource.org/\",\"children\":\"Fontsource\"}],\". This gives the following \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://fontsource.org/docs/introduction\",\"children\":\"advantages\"}],\":\"]}],[\"$\",\"blockquote\",null,{\"children\":[[\"$\",\"p\",null,{\"children\":\"Self-hosting brings significant performance gains as loading fonts from hosted services, such as Google Fonts, lead to an extra (render blocking) network request. To provide perspective, for simple websites it has been seen to double visual load times.\"}],[\"$\",\"p\",null,{\"children\":\"Fonts remain version locked. Google often pushes updates to their fonts without notice, which may interfere with your live production projects. Manage your fonts like any other NPM dependency.\"}],[\"$\",\"p\",null,{\"children\":\"Commit to privacy. Google does track the usage of their fonts and for those who are extremely privacy concerned, self-hosting is an alternative.\"}]]}],[\"$\",\"p\",null,{\"children\":[\"This leads to a smaller font bundle and a 0.1s faster load time (\",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://www.webpagetest.org/video/compare.php?tests=220201_AiDcFH_f68a69b758454dd52d8e67493fdef7da,220201_BiDcMC_bf2d53f14483814ba61e794311dfa771\",\"children\":\"webpagetest comparison\"}],\").\"]}],[\"$\",\"p\",null,{\"children\":\"To change the default Inter font:\"}],[\"$\",\"ol\",null,{\"children\":[[\"$\",\"li\",null,{\"children\":[\"Install the preferred \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://fontsource.org/fonts\",\"children\":\"font\"}],\" - \",[\"$\",\"code\",null,{\"children\":\"npm install -save @fontsource/\u003cfont-name\u003e\"}]]}],[\"$\",\"li\",null,{\"children\":[\"Update the import at \",[\"$\",\"code\",null,{\"children\":\"pages/_app.js\"}],\"- \",[\"$\",\"code\",null,{\"children\":\"import '@fontsource/\u003cfont-name\u003e.css'\"}]]}],[\"$\",\"li\",null,{\"children\":[\"Update the \",[\"$\",\"code\",null,{\"children\":\"fontfamily\"}],\" property in the tailwind css config file\"]}]]}],[\"$\",\"h2\",null,{\"className\":\"content-header\",\"id\":\"upgrade-guide\",\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"href\":\"#upgrade-guide\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"content-header-link\",\"children\":[\"$\",\"svg\",null,{\"className\":\"h-5 linkicon w-5\",\"fill\":\"currentColor\",\"viewBox\":\"0 0 20 20\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}],[\"$\",\"path\",null,{\"d\":\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"}]]}]}]}],\"Upgrade guide\"]}],[\"$\",\"p\",null,{\"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.\"}],[\"$\",\"p\",null,{\"children\":\"There's also no real reason to change if the previous one serves your needs and it might be easier to copy the component changes you are interested in to your existing blog rather than migrating everything over.\"}],[\"$\",\"p\",null,{\"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.\"}],[\"$\",\"p\",null,{\"children\":\"Another alternative would be to pull the latest template version with the following code:\"}],[\"$\",\"$L17\",null,{\"className\":\"language-bash\",\"children\":[\"$\",\"code\",null,{\"className\":\"code-highlight language-bash\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"git\"}],\" remote \",[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"add\"}],\" template git@github.com:timlrx/tailwind-nextjs-starter-blog.git\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"git\"}],\" pull template v1 --allow-unrelated-histories\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"rm\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token parameter variable\",\"children\":\"-rf\"}],\" node_modules\\n\"]}]]}]}],[\"$\",\"p\",null,{\"children\":[\"You can see an example of such a migration in this \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://github.com/timlrx/timlrx.com/commit/bba1c185384fd6d5cdaac15abf802fdcff027286\",\"children\":\"commit\"}],\" for my personal blog.\"]}],[\"$\",\"p\",null,{\"children\":[\"v1 also uses \",[\"$\",\"code\",null,{\"children\":\"feed.xml\"}],\" rather than \",[\"$\",\"code\",null,{\"children\":\"index.xml\"}],\", to avoid some build issues with Vercel. If you are migrating you should add a redirect to \",[\"$\",\"code\",null,{\"children\":\"next.config.js\"}],\" like so:\"]}],[\"$\",\"$L17\",null,{\"className\":\"language-js\",\"children\":[\"$\",\"code\",null,{\"className\":\"code-highlight language-js\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"async\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"redirects\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token keyword control-flow\",\"children\":\"return\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"[\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"source\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'/:path/index.xml'\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"destination\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'/:path/feed.xml'\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token property literal-property\",\"children\":\"permanent\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token boolean\",\"children\":\"true\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"]\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\"\\n\"]}]]}]}],[\"$\",\"section\",null,{\"className\":\"footnotes\",\"data-footnotes\":true,\"children\":[[\"$\",\"h2\",null,{\"className\":\"content-header\",\"id\":\"footnote-label\",\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"href\":\"#footnote-label\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"content-header-link\",\"children\":[\"$\",\"svg\",null,{\"className\":\"h-5 linkicon w-5\",\"fill\":\"currentColor\",\"viewBox\":\"0 0 20 20\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}],[\"$\",\"path\",null,{\"d\":\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"}]]}]}]}],\"Footnotes\"]}],[\"$\",\"ol\",null,{\"children\":[\"$\",\"li\",null,{\"id\":\"user-content-fn-1\",\"children\":[\"$\",\"p\",null,{\"children\":[\"With the new changes in Nextjs 12, first load JS increase to 45kB. \",[\"$\",\"a\",null,{\"className\":\"data-footnote-backref\",\"href\":\"#user-content-fnref-1\",\"aria-label\":\"Back to reference 1\",\"data-footnote-backref\":\"\",\"children\":\"↩\"}]]}]}]}]]}]]}]}],[\"$\",\"div\",null,{\"className\":\"pt-6 pb-6 text-center text-gray-700 dark:text-gray-300\",\"id\":\"comment\",\"children\":[\"$\",\"$L19\",null,{\"slug\":\"new-features-in-v1\"}]}],[\"$\",\"footer\",null,{\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-col text-sm font-medium sm:flex-row sm:justify-between sm:text-base\",\"children\":[[\"$\",\"div\",null,{\"className\":\"pt-4 xl:pt-8\",\"children\":[\"$\",\"$L5\",null,{\"className\":\"text-primary-500 hover:text-primary-600 dark:hover:text-primary-400\",\"href\":\"/blog/nested-route/introducing-multi-part-posts-with-nested-routing\",\"aria-label\":\"Previous post: Introducing Multi-part Posts with Nested Routing\",\"children\":[\"← \",\"Introducing Multi-part Posts with Nested Routing\"]}]}],[\"$\",\"div\",null,{\"className\":\"pt-4 xl:pt-8\",\"children\":[\"$\",\"$L5\",null,{\"className\":\"text-primary-500 hover:text-primary-600 dark:hover:text-primary-400\",\"href\":\"/blog/release-of-tailwind-nextjs-starter-blog-v2.0\",\"aria-label\":\"Next post: Release of Tailwind Nextjs Starter Blog v2.0\",\"children\":[\"Release of Tailwind Nextjs Starter Blog v2.0\",\" →\"]}]}]]}]}]]}]]}]}]]}]]\n"])</script><script>self.__next_f.push([1,"12:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\nf:null\n"])</script><script>self.__next_f.push([1,"10:null\n"])</script><script>self.__next_f.push([1,"14:[[\"$\",\"title\",\"0\",{\"children\":\"New features in v1 | Next.js Starter Blog\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"An overview of the new features released in v1 - code block copy, multiple authors, frontmatter layout and more\"}],[\"$\",\"meta\",\"2\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"3\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"link\",\"4\",{\"rel\":\"canonical\",\"href\":\"https://tailwind-nextjs-starter-blog.vercel.app/blog/new-features-in-v1\"}],[\"$\",\"link\",\"5\",{\"rel\":\"alternate\",\"type\":\"application/rss+xml\",\"href\":\"https://tailwind-nextjs-starter-blog.vercel.app/feed.xml\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:title\",\"content\":\"New features in v1\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:description\",\"content\":\"An overview of the new features released in v1 - code block copy, multiple authors, frontmatter layout and more\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:url\",\"content\":\"https://tailwind-nextjs-starter-blog.vercel.app/blog/new-features-in-v1\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:site_name\",\"content\":\"Next.js Starter Blog\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:image\",\"content\":\"https://tailwind-nextjs-starter-blog.vercel.app/static/images/twitter-card.png\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"13\",{\"property\":\"article:published_time\",\"content\":\"2021-08-07T15:32:14.000Z\"}],[\"$\",\"meta\",\"14\",{\"property\":\"article:modified_time\",\"content\":\"2021-02-01T00:00:00.000Z\"}],[\"$\",\"meta\",\"15\",{\"property\":\"article:author\",\"content\":\"Tails Azimuth\"}],[\"$\",\"meta\",\"16\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:title\",\"content\":\"New features in v1\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:description\",\"content\":\"An overview of the new features released in v1 - code block copy, multiple authors, frontmatter layout and more\"}],[\"$\",\"meta\",\"19\",{\"name\":\"twitter:image\",\"content\":\"https://tailwind-nextjs-starter-blog.vercel.app/static/images/twitter-card.png\"}]]\n"])</script></body></html>
Reference in New Issue View Git Blame Copy Permalink