PageSourceSearch

https://shipixen.com/boilerplate-documentation/using-the-shipixen-blog

html shipixen.com collected 2026-10-02 10:18:58 UTC 291,802 bytes, 147 lines download raw bytes

1<!DOCTYPE html><html lang="en-us" class="__variable_f367f3 __variable_f367f3 scroll-smooth" data-sentry-component="RootLayout" data-sentry-source-file="layout.tsx"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/e4af272ccee01ff0-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" as="image" href="/static/images/blog/docs/shipixen-blog-default-layout.webp"/><link rel="preload" as="image" href="/static/images/blog/docs/shipixen-blog-simple-layout.webp"/><link rel="preload" as="image" href="/static/images/blog/docs/shipixen-blog-banner-layout.webp"/><link rel="preload" as="image" href="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"/><link rel="preload" as="image" href="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=424261&amp;theme=light&amp;period=daily"/><link rel="preload" as="image" href="https://api.producthunt.com/widgets/embed-image/v1/top-post-topic-badge.svg?post_id=424261&amp;theme=light&amp;period=weekly&amp;topic_id=267"/><link rel="stylesheet" href="/_next/static/css/b87ffae1b2e942cb.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/6fd49269e7517e8e.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-a2d53e8a4c65fa79.js"/>
1<script src="/_next/static/chunks/fd9d1056-e659f8ae8775e82f.js" async=""></script>
1<script src="/_next/static/chunks/4a7b0c69-0c319e3c64c2970c.js" async=""></script>
1<script src="/_next/static/chunks/5d015edf-84f716ea7ac0ba86.js" async=""></script>
1<script src="/_next/static/chunks/8435-85a08e1774ad26d0.js" async=""></script>
1<script src="/_next/static/chunks/main-app-e1227825d89cb374.js" async=""></script>
1<script src="/_next/static/chunks/app/global-error-4236cd1fa8567019.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd" async=""></script>
1<script src="/_next/static/chunks/4724-196f890948bffc72.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd" async=""></script>
1<script src="/_next/static/chunks/5109-c88f58cf5610f377.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd" async=""></script>
1<script src="/_next/static/chunks/9744-9fb3876655c4bd80.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd" async=""></script>
1<script src="/_next/static/chunks/6610-d251da2e8cf38ffe.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd" async=""></script>
1<script src="/_next/static/chunks/app/layout-954ed7d94efe4f3c.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd" async=""></script>
1<script src="/_next/static/chunks/4729-b471914be5da664b.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd" async=""></script>
1<script src="/_next/static/chunks/5805-241c296fee5d7c2a.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd" async=""></script>
1<script src="/_next/static/chunks/5194-565f2643edb6ccf5.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd" async=""></script>
1<script src="/_next/static/chunks/9604-1690df0fe94e420f.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd" async=""></script>
1<script src="/_next/static/chunks/914-c9099f70f5c48350.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd" async=""></script>
1<script src="/_next/static/chunks/8841-52f4732195445660.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd" async=""></script>
1<script src="/_next/static/chunks/4613-a07613917c5cd54c.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd" async=""></script>
1<script src="/_next/static/chunks/7421-dd5038d875cffb4a.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd" async=""></script>
1<script src="/_next/static/chunks/1733-c51e7f4337b226ca.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd" async=""></script>
1<script src="/_next/static/chunks/5104-c5b912bb80de91a7.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd" async=""></script>
1<script src="/_next/static/chunks/2283-780194222d0560db.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd" async=""></script>
1<script src="/_next/static/chunks/7608-9ebc1039fb39c615.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd" async=""></script>
1<script src="/_next/static/chunks/app/%5B...slug%5D/page-b1265d1e8bc7b969.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd" async=""></script>
1<script src="/_next/static/chunks/2204-1551bab0a5654d27.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd" async=""></script>
1<script src="/_next/static/chunks/4596-f7e4ccba5e65b03e.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd" async=""></script>
1<script src="/_next/static/chunks/app/page-e0a7b5dc3515a892.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd" async=""></script>
1<title>Writing blog posts: Shipixen blog crash course &amp; Markdown cheatsheet | Beautiful &amp; performant Next.js apps deployed in minutes</title><meta name="description" content="Learn how to use the blog. Write blog posts by example plus get a markdown cheatsheet - headers, lists, images, tables 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://shipixen.com/boilerplate-documentation/using-the-shipixen-blog"/><meta property="og:title" content="Writing blog posts: Shipixen blog crash course &amp; Markdown cheatsheet"/><meta property="og:description" content="Learn how to use the blog. Write blog posts by example plus get a markdown cheatsheet - headers, lists, images, tables and more!"/><meta property="og:url" content="https://shipixen.com/boilerplate-documentation/using-the-shipixen-blog"/><meta property="og:site_name" content="Beautiful &amp; performant Next.js apps deployed in minutes"/><meta property="og:locale" content="en_US"/><meta property="og:image" content="https://shipixen.com/static/images/shipixen-product.webp"/><meta property="og:type" content="article"/><meta property="article:published_time" content="2023-10-11T00:00:00.000Z"/><meta property="article:modified_time" content="2025-05-14T00:00:00.000Z"/><meta property="article:author" content="Shipixen"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="Writing blog posts: Shipixen blog crash course &amp; Markdown cheatsheet"/><meta name="twitter:description" content="Learn how to use the blog. Write blog posts by example plus get a markdown cheatsheet - headers, lists, images, tables and more!"/><meta name="twitter:image" content="https://shipixen.com/static/images/shipixen-product.webp"/><meta name="next-size-adjust"/><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/manifest.webmanifest"/><link rel="mask-icon" href="/static/favicons/safari-pinned-tab.svg" color="#5bbad5"/><meta name="msapplication-TileColor" content="#000000" data-sentry-element="meta" data-sentry-source-file="layout.tsx"/><meta name="theme-color" media="(prefers-color-scheme: light)" content="#fff" data-sentry-element="meta" data-sentry-source-file="layout.tsx"/><meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000" data-sentry-element="meta" data-sentry-source-file="layout.tsx"/><link rel="alternate" type="application/rss+xml" href="/feed.xml"/><style>
2          :root, :before, :after {
3            --primary-lighter-hex: #f0abfc;--primary-lighter: 240, 171, 252;--primary-light-hex: #e879f9;--primary-light: 232, 121, 249;--primary-main-hex: #d946ef;--primary-main: 217, 70, 239;--primary-dark-hex: #c026d3;--primary-dark: 192, 38, 211;--primary-darker-hex: #701a75;--primary-darker: 112, 26, 117;--secondary-lighter-hex: #7dd3fc;--secondary-lighter: 125, 211, 252;--secondary-light-hex: #38bdf8;--secondary-light: 56, 189, 248;--secondary-main-hex: #0ea5e9;--secondary-main: 14, 165, 233;--secondary-dark-hex: #0284c7;--secondary-dark: 2, 132, 199;--secondary-darker-hex: #0369a1;--secondary-darker: 3, 105, 161
4          }
5        </style>
5<script src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js" noModule=""></script>
5</head><body class="bg-white text-black antialiased dark:bg-gray-950 dark:text-white min-h-screen">
5<script>!function(){try{var d=document.documentElement,c=d.classList;c.remove('light','dark');var e=localStorage.getItem('theme');if('system'===e||(!e&&true)){var t='(prefers-color-scheme: dark)',m=window.matchMedia(t);if(m.media!==t||m.matches){c.add('dark')}else{c.add('light')}}else if(e){c.add(e|| '')}}catch(e){}}()</script>
5<div class="w-full flex flex-col justify-between items-center font-sans"><main class="w-full flex flex-col items-center mb-auto">
5<script type="application/ld+json">{"@context":"https://schema.org","@type":"BlogPosting","headline":"Writing blog posts: Shipixen blog crash course & Markdown cheatsheet","datePublished":"2023-10-11T00:00:00.000Z","dateModified":"2025-05-14T00:00:00.000Z","description":"Learn how to use the blog. Write blog posts by example plus get a markdown cheatsheet - headers, lists, images, tables and more!","image":"/static/images/shipixen-product.webp","url":"https://shipixen.com/boilerplate-documentation/using-the-shipixen-blog","author":[{"@type":"Person","name":"Shipixen"}]}</script>
5<header class="flex items-center py-10 flex-wrap w-full pt-6 wide-container gap-2 mb-0 lg:mb-0"><div><a aria-label="" data-sentry-element="Link" data-sentry-source-file="Header.tsx" href="/"><div class="flex items-center gap-3 justify-between"><img alt="Shipixen Logo" data-sentry-element="Image" data-sentry-source-file="Logo.tsx" loading="lazy" width="100" height="100" decoding="async" data-nimg="1" class="dark:hidden h-12 min-w-[140px]" style="color:transparent" srcSet="/_next/image?url=%2Fstatic%2Fimages%2Ficon-logo.webp&amp;w=128&amp;q=75 1x, /_next/image?url=%2Fstatic%2Fimages%2Ficon-logo.webp&amp;w=256&amp;q=75 2x" src="/_next/image?url=%2Fstatic%2Fimages%2Ficon-logo.webp&amp;w=256&amp;q=75"/><img alt="Shipixen Logo" data-sentry-element="Image" data-sentry-source-file="Logo.tsx" loading="lazy" width="100" height="100" decoding="async" data-nimg="1" class="hidden dark:inline-block h-12 min-w-[140px]" style="color:transparent" srcSet="/_next/image?url=%2Fstatic%2Fimages%2Ficon-logo-dark.webp&amp;w=128&amp;q=75 1x, /_next/image?url=%2Fstatic%2Fimages%2Ficon-logo-dark.webp&amp;w=256&amp;q=75 2x" src="/_next/image?url=%2Fstatic%2Fimages%2Ficon-logo-dark.webp&amp;w=256&amp;q=75"/><div class="hidden text-2xl font-semibold sm:flex h-full"></div></div></a></div><div class="hidden sm:inline-block mx-4 w-0.5 h-8 bg-primary-500/10"></div><div class="flex justify-center gap-5 md:gap-6"><a class="nav-link hidden sm:block" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/features"><span>Features</span></a><a class="nav-link hidden sm:block" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation"><span>Docs</span></a><a href="/download/macos" class="nav-link hidden sm:block" data-ph-capture-attribute-name="try-text-button" id="try-text-button" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-:R16qmml9la:" data-state="closed" data-sentry-element="DialogTrigger" data-sentry-source-file="tryButton.tsx"><span class="">Download App</span></a><a class="nav-link hidden sm:block" data-ph-capture-attribute-name="pricing-button" id="pricing-button" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/pricing"><span>Pricing</span></a></div><div class="ml-auto flex items-center leading-5 gap-4 sm:gap-6"><nav aria-label="Main" data-orientation="horizontal" dir="ltr" class="relative max-w-max flex-1 items-center justify-center z-20 hidden lg:inline-flex" data-sentry-element="NavigationMenu" data-sentry-component="ToolsDropdownMenu" data-sentry-source-file="ToolsDropdownMenu.tsx"><div style="position:relative"><ul data-orientation="horizontal" class="group flex flex-1 list-none items-center justify-center space-x-1" data-sentry-element="NavigationMenuList" data-sentry-source-file="ToolsDropdownMenu.tsx" dir="ltr"><li data-sentry-element="NavigationMenuItem" data-sentry-source-file="ToolsDropdownMenu.tsx"><button id="radix-:Roqmml9la:-trigger-radix-:R1coqmml9la:" data-state="closed" aria-expanded="false" aria-controls="radix-:Roqmml9la:-content-radix-:R1coqmml9la:" class="group inline-flex h-10 w-max items-center justify-center rounded-md transition-colors hover:text-accent-foreground focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 group p-0 text-base font-normal bg-transparent hover:bg-transparent focus:bg-transparent data-[state=open]:bg-transparent" data-sentry-element="NavigationMenuTrigger" data-sentry-source-file="ToolsDropdownMenu.tsx" data-radix-collection-item="">Free tools<!-- --> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></li> </ul></div><div class="absolute left-0 top-full flex justify-center"></div></nav><a class="hidden md:inline-flex items-center justify-center gap-2" href="https://pageui.dev" target="_blank" rel="noopener noreferrer"><span class="hidden lg:inline-block">Page UI</span><img alt="Page UI Landing page components Logo" data-sentry-element="Image" data-sentry-source-file="Header.tsx" loading="lazy" width="100" height="100" decoding="async" data-nimg="1" class="w-8 h-8" style="color:transparent" srcSet="/_next/image?url=%2Fstatic%2Fimages%2Fpage-ui-log.
5webp&amp;w=128&amp;q=75 1x, /_next/image?url=%2Fstatic%2Fimages%2Fpage-ui-log.webp&amp;w=256&amp;q=75 2x" src="/_next/image?url=%2Fstatic%2Fimages%2Fpage-ui-log.webp&amp;w=256&amp;q=75"/></a><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="text-gray-900 dark:text-gray-100 h-6 w-6"><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="w-6 h-6"></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="text-gray-900 dark:text-gray-100 h-8 w-8" data-sentry-element="svg" data-sentry-source-file="MobileNav.tsx"><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" data-sentry-element="path" data-sentry-source-file="MobileNav.tsx"></path></svg></button><div class="fixed left-0 top-0 z-20 h-full w-full transform opacity-95 dark:opacity-[0.98] bg-white duration-300 ease-in-out dark:bg-gray-950 translate-x-full"><div class="flex justify-end"><button class="mr-8 mt-11 h-8 w-8" aria-label="Toggle Menu"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="text-gray-900 dark:text-gray-100" data-sentry-element="svg" data-sentry-source-file="MobileNav.tsx"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" data-sentry-element="path" data-sentry-source-file="MobileNav.tsx"></path></svg></button></div><nav class="fixed mt-8 h-full w-full"><div class="px-12 py-4"><a class="text-2xl font-bold tracking-widest text-gray-900 dark:text-gray-100" data-sentry-element="Link" data-sentry-source-file="MobileNav.tsx" href="/pricing"><span class="bg-clip-text bg-gradient-to-r text-transparent from-primary-400 to-secondary-300">Get Shipixen</span></a></div><div class="px-12 py-4"><a class="text-2xl font-bold tracking-widest text-gray-900 dark:text-gray-100" href="/features">Features</a></div><div class="px-12 py-4"><a class="text-2xl font-bold tracking-widest text-gray-900 dark:text-gray-100" href="/boilerplate-documentation">Docs</a></div><hr class="w-full"/><div class="px-12 py-4"><a class="inline-flex items-center justify-center gap-2 text-2xl font-bold tracking-widest text-gray-900 dark:text-gray-100" href="https://pageui.dev" target="_blank" rel="noopener noreferrer"><span>Page UI</span><img alt="Page UI Landing page components Logo" data-sentry-element="Image" data-sentry-source-file="MobileNav.tsx" loading="lazy" width="100" height="100" decoding="async" data-nimg="1" class="w-8 h-8" style="color:transparent" srcSet="/_next/image?url=%2Fstatic%2Fimages%2Fpage-ui-log.webp&amp;w=128&amp;q=75 1x, /_next/image?url=%2Fstatic%2Fimages%2Fpage-ui-log.webp&amp;w=256&amp;q=75 2x" src="/_next/image?url=%2Fstatic%2Fimages%2Fpage-ui-log.webp&amp;w=256&amp;q=75"/></a></div></nav></div></div></header><div class="w-full fancy-overlay fancy-overlay--muted flex flex-col flex-wrap lg:flex-row justify-center"><aside class="order-3 lg:order-1 lg:sticky lg:max-h-screen top-0 p-6 w-full lg:w-[14rem] 2xl:w-full xl:max-w-[12rem] 2xl:max-w-[16rem] lg:overflow-auto pb-12" id="navigation"><h2 class="mt-4 font-semibold mb-4 md:hidden">Read more</h2><ul class="toc-list"><li><a class="toc-link fancy-link fancy-link--no-underline" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation#main"><span>Overview</span></a></li><li><a class="toc-link fancy-link fancy-link--no-underline" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/what-is-shipixen#main"><span>What is Shipixen</span></a></li><li class="toc-separator"></li><li class="toc-title"><h3>Using the app</h3></li><li><a class="toc-link fancy-link fancy-link--no-underline" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/generating-boilerplates#main"><span>
5Generating codebases</span></a></li><li class="toc-separator"></li><li class="toc-title"><h3>Blog &amp; landing</h3></li><li><a class="toc-link fancy-link fancy-link--no-underline" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/customizing-landing-page#main"><span>Customizing landing page</span></a></li><li><a class="toc-link fancy-link fancy-link--no-underline" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/using-the-shipixen-blog#main"><span>Writing blog posts</span></a></li><li><a class="toc-link fancy-link fancy-link--no-underline" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/creating-a-blog-mdx-component#main"><span>Adding a new blog component</span></a></li><li class="toc-separator"></li><li class="toc-title"><h3>Components</h3></li><li><a class="toc-link fancy-link fancy-link--no-underline" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components#main"><span>Landing Page Components<span class="ml-2 px-1.5 py-0.5 rounded-md text-[0.6rem] font-semibold bg-primary-500 text-white">New</span></span></a><ul class="flex flex-col text-[13px] ml-3 mt-2" data-sentry-component="LandingPageComponentsNav" data-sentry-source-file="LandingPageComponentsNav.tsx"><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/about#main"><span class="flex items-center">About</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/appstore-button#main"><span class="flex items-center">App Store Button<span class="ml-2 px-1.5 py-0.5 rounded-md text-[0.6rem] font-semibold bg-primary-500 text-white">New</span></span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/band#main"><span class="flex items-center">Band</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/bento-grid#main"><span class="flex items-center">Bento Grid</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/blog-list#main"><span class="flex items-center">Blog List</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/blog-post#main"><span class="flex items-center">Blog Post</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/primary-cta-effects#main"><span class="flex items-center">Cta Background Effects</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/primary-cta-text-effects#main"><span class="flex items-center">Cta Text Effects</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/discount#main"><span class="flex items-center">Discount</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/faq#main"><span class="flex items-center">Faq</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/faq-collapsible#main"><span class="flex items-center">Faq Collapsible</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/feature-key-points#main"><span class="flex items-center">Feature Key Points</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/feature-list#main"><span class="flex items-center">Feature List</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/feature#main"><span class="flex items-center">Feature</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/footer#main"><span class="flex items-center">Footer</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/leading-pill#main"><span class="flex items-center">Leading Pills<span class="ml-2 px-1.5 py-0.5 rounded-md text-[0.6rem] font-semibold bg-primary-500 text-white">New</span></span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/marquee#main"><span class="flex items-center">Marquee</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/navigation#main"><span class="flex items-center">Navigation / Header</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/newsletter#main"><span class="flex items-center">Newsletter</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/pricing#main"><span class="flex items-center">Pricing</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/pricing-plan#main"><span class="flex items-center">Pricing Plan</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/pricing-comparison#main"><span class="flex items-center">Pricing Comparison</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/primary-image-cta#main"><span class="flex items-center">Primary Image Cta</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/primary-video-cta#main"><span class="flex items-center">Primary Video Cta</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/primary-text-cta#main"><span class="flex items-center">Primary Text Cta</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/problem-agitator#main"><span class="flex items-center">Problem Agitator</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/problem-solution#main"><span class="flex items-center">Problem Solution</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/product-card#main"><span class="flex items-center">Product Card<span class="ml-2 px-1.5 py-0.5 rounded-md text-[0.6rem] font-semibold bg-primary-500 text-white">New</span></span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/product-feature#main"><span class="flex items-center">Product Feature</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/product-steps#main"><span class="flex items-center">Product Steps<span class="ml-2 px-1.5 py-0.5 rounded-md text-[0.6rem] font-semibold bg-primary-500 text-white">New</span></span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/product-video-feature#main"><span class="flex items-center">Product Video Feature</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/product-features-grid#main"><span class="flex items-center">Product Features Grid</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/product-tour#main"><span class="flex items-center">Product Tour</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/product-hunt-award#main"><span class="flex items-center">Product Hunt Award</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/rating#main"><span class="flex items-center">Rating</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/sale-cta#main"><span class="flex items-center">
5Sale Cta</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/showcase#main"><span class="flex items-center">Showcase</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/social-proof#main"><span class="flex items-center">Social Proof</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/social-proof-band#main"><span class="flex items-center">Social Proof Band</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/social-proof-band-item#main"><span class="flex items-center">Social Proof Band Item</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/stats#main"><span class="flex items-center">Stats</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/team#main"><span class="flex items-center">Team</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/testimonial-grid#main"><span class="flex items-center">Testimonial Grid</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/testimonial-inline#main"><span class="flex items-center">Testimonial Inline</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/testimonial-inline-item#main"><span class="flex items-center">Testimonial Inline Item</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/testimonial-list#main"><span class="flex items-center">Testimonial List</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/landing-page-components/testimonial#main"><span class="flex items-center">Testimonial</span></a></li></ul></li><li><a class="toc-link fancy-link fancy-link--no-underline" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/ui-library#main"><span>UI Library</span></a></li><li><a class="toc-link fancy-link fancy-link--no-underline" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/icon-library#main"><span>Icon Library</span></a></li><li class="toc-separator"></li><li class="toc-title"><h3>Codebase &amp; config</h3></li><li><a class="toc-link fancy-link fancy-link--no-underline" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/running-locally#main"><span>Setting up locally</span></a></li><li><a class="toc-link fancy-link fancy-link--no-underline" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/command-overview#main"><span>Command overview</span></a></li><li><a class="toc-link fancy-link fancy-link--no-underline" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/tour-of-the-codebase#main"><span>Tour of the codebase</span></a><ul class="flex flex-col text-[13px] ml-3 mt-2" data-sentry-component="CodebaseFilelistNav" data-sentry-source-file="CodebaseFilelistNav.tsx"><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/tour-of-the-codebase/contentlayer"><span>📁 .contentlayer/</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/tour-of-the-codebase/husky"><span>📁 .husky/</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/tour-of-the-codebase/next"><span>📁 .next/</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/tour-of-the-codebase/vscode"><span>📁 .vscode/</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/tour-of-the-codebase/app"><span>📁 app/</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/tour-of-the-codebase/components"><span>📁 components/</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/tour-of-the-codebase/css"><span>📁 css/</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/tour-of-the-codebase/data"><span>📁 data/</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/tour-of-the-codebase/demo"><span>📁 demo/</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/tour-of-the-codebase/layouts"><span>📁 layouts/</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/tour-of-the-codebase/lib"><span>📁 lib/</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/tour-of-the-codebase/node-modules"><span>📁 node_modules/</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/tour-of-the-codebase/public"><span>📁 public/</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/tour-of-the-codebase/scripts"><span>📁 scripts/</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/tour-of-the-codebase/env-example"><span>📄 .env.example</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/tour-of-the-codebase/eslintignore"><span>📄 .eslintignore</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/tour-of-the-codebase/eslintrc"><span>📄 .eslintrc.js</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/tour-of-the-codebase/gitignore"><span>📄 .gitignore</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/tour-of-the-codebase/prettierrc"><span>📄 .prettierrc</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/tour-of-the-codebase/contentlayer-config"><span>📄 contentlayer.config.ts</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/tour-of-the-codebase/jsonconfig"><span>📄 jsconfig.json</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/tour-of-the-codebase/next-env"><span>📄 next-env.d.ts</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/tour-of-the-codebase/nextconfig"><span>📄 next.config.js</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/tour-of-the-codebase/package-json"><span>📄 package.json</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/tour-of-the-codebase/postcssconfig"><span>📄 postcss.config.js</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/tour-of-the-codebase/tailwindconfig"><span>📄 tailwind.config.js</span></a></li><li><a data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/tour-of-the-codebase/tsconfig"><span>📄 tsconfig.json</span></a></li></ul></li><li><a class="toc-link fancy-link fancy-link--no-underline" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/configuration#main"><span>Configuration</span></a></li><li><a class="toc-link fancy-link fancy-link--no-underline" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/adding-metas-to-a-page#main"><span>Adding meta tags</span></a></li><li><a class="toc-link fancy-link fancy-link--no-underline" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/changing-blog-all-articles-path#main"><span>Changing article path</span></a></li><li><a class="toc-link fancy-link fancy-link--no-underline" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/shipixen-cursor-rules-explained#main"><span>Cursor rules</span></a></li><li class="toc-separator"></li><li class="toc-title"><h3>Deployment</h3></li><li><a class="toc-link fancy-link fancy-link--no-underline" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/vercel-deploy-integration#main"><span>Deploying to Vercel</span></a></li><li><a class="toc-link fancy-link fancy-link--no-underline" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/netlify-deploy-integration#main"><span>Deploying to Netlify</span></a></li><li><a class="toc-link fancy-link fancy-link--no-underline" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/coolify-cloud-nextjs-deploy-integration#main"><span>Deploying to Coolify Cloud</span></a></li><li><a class="toc-link fancy-link fancy-link--no-underline" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/other-deployment-options#main"><span>Other deployment options</span></a></li><li class="toc-separator"></li><li class="toc-title"><h3>Troubleshooting</h3></li><li><a class="toc-link fancy-link fancy-link--no-underline" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/troubleshooting#main"><span>Fixing common issues</span></a></li><li class="toc-separator"></li><li class="toc-title"><h3>Analytics</h3></li><li><a class="toc-link fancy-link fancy-link--no-underline" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/analytics/setting-up-vercel-analytics#main"><span>Install Vercel Analytics</span></a></li><li><a class="toc-link fancy-link fancy-link--no-underline" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/analytics/setting-up-posthog-analytics#main"><span>Install Posthog Analytics</span></a></li><li class="toc-separator"></li><li class="toc-title"><h3>Advanced</h3></li><li><a class="toc-link fancy-link fancy-link--no-underline" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/building-a-knowledge-base-documentation-hub#main"><span>Building a knowledge base/documentation hub</span></a></li><li><a class="toc-link fancy-link fancy-link--no-underline" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/creating-a-layout#main"><span>Adding a layout</span></a></li><li><a class="toc-link fancy-link fancy-link--no-underline" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/adding-blog-components-and-pages#main"><span>Setting up blog later</span></a></li><li><a class="toc-link fancy-link fancy-link--no-underline" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/import-data/import-blog-posts-from-ghost#main"><span>Migrate/import Ghost blog</span></a></li><li><a class="toc-link fancy-link fancy-link--no-underline" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/import-data/blog-post-json-format#main"><span>Migrate/import any blog</span></a></li><li><a class="toc-link fancy-link fancy-link--no-underline" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/helpful-tools-and-services#main"><span>Other tools</span></a></li></ul></aside><article class="order-2 lg:order-2 w-full lg:max-w-3xl 2xl:max-w-4xl 3xl:max-w-5xl !p-0 !m-0 shadow-lg"><div class="bg-white dark:bg-slate-900 lg:px-10 lg:py-4 divide-y divide-gray-200 dark:divide-gray-700 xl:col-span-3 xl:row-span-2 xl:pb-0"><header class="px-6 pt-6 pb-6 lg:px-0" id="main"><div class="space-y-1"><div><h1 class="text-3xl font-semibold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-5xl md:leading-14" data-sentry-component="PageTitle" data-sentry-source-file="PageTitle.tsx">Writing blog posts: Shipixen blog crash course &amp; Markdown cheatsheet</h1></div><dl class="space-y-10"><div><dt class="sr-only">Updated on</dt><dd class="text-base font-medium leading-6 text-gray-500 dark:text-gray-400"><time dateTime="2025-05-14T00:00:00.000Z"><span class="font-light">Last updated</span> <!-- -->Wednesday, May 14, 2025</time></dd></div></dl></div></header>
5<div class="prose max-w-none px-6 pb-8 pt-10 lg:px-0 dark:prose-invert overflow-hidden"><h2 id="basics"><a href="#basics" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Basics</h2><p>Posts on the Shipixen blog are written in Markdown and stored in the <code>/data</code> directory. The blog is generated using <a target="_blank" rel="noopener noreferrer" href="https://nextjs.org/" data-sentry-component="CustomLink" data-sentry-source-file="Link.tsx">Next.js</a> and <a target="_blank" rel="noopener noreferrer" href="https://mdxjs.com/docs/" data-sentry-component="CustomLink" data-sentry-source-file="Link.tsx">MDX</a>.</p><p>To add a new post, create a new <code>.mdx</code> file in the <code>/data</code> directory.</p><p>MDX lets you use JSX in your markdown content. You can import components, such as interactive charts or alerts, and embed them within your content. This makes writing long-form content with components a blast.</p><h3 id="creating-a-post"><a href="#creating-a-post" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Creating a post</h3><p>Adding an article to a blog generated with Shipixen is as simple as creating a Markdown (.mdx) file in the <code>data</code> directory. The file name is used as the slug for the article.</p><p>After you created the article, you should set the Frontmatter and then you&#x27;re off to the races.</p><p>The Frontmatter of the file is used to populate the article&#x27;s metadata, such as title, summary or images. Let&#x27;s look at some Frontmatter examples.</p><h4 id="blog-post-example"><a href="#blog-post-example" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Blog post example</h4><p>Here is an example of a blog post with Frontmatter:</p><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>
6</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">title</span><span class="token punctuation">:</span> <span class="token string">&#x27;Release Notes&#x27;</span>
7</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">date</span><span class="token punctuation">:</span> <span class="token string">&#x27;2024-11-12&#x27;</span>
8</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">tags</span><span class="token punctuation">:</span>
9</span></span></span><span class="code-line"><span class="token front-matter-block"><span class="token language-yaml front-matter yaml">  <span class="token punctuation">-</span> <span class="token string">&#x27;release-notes&#x27;</span>
10</span></span></span><span class="code-line"><span class="token front-matter-block"><span class="token language-yaml front-matter yaml">  <span class="token punctuation">-</span> <span class="token string">&#x27;updates&#x27;</span>
11</span></span></span><span class="code-line"><span class="token front-matter-block"><span class="token language-yaml front-matter yaml">  <span class="token punctuation">-</span> <span class="token string">&#x27;changelog&#x27;</span>
12</span></span></span><span class="code-line"><span class="token front-matter-block"><span class="token language-yaml front-matter yaml">
13</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">images</span><span class="token punctuation">:</span>
14</span></span></span><span class="code-line"><span class="token front-matter-block"><span class="token language-yaml front-matter yaml">  <span class="token punctuation">-</span> <span class="token string">&#x27;/static/images/release.webp&#x27;</span>
15</span></span></span><span class="code-line"><span class="token front-matter-block"><span class="token language-yaml front-matter yaml">  <span class="token punctuation">-</span> <span class="token string">&#x27;/static/images/release-2.webp&#x27;</span>
16</span></span></span><span class="code-line"><span class="token front-matter-block"><span class="token language-yaml front-matter yaml">
17</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">summary</span><span class="token punctuation">:</span> <span class="token string">&#x27;See what is new in the product&#x27;</span>
18</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">layout</span><span class="token punctuation">:</span> PostSimple</span>
19</span></span><span class="code-line"><span class="token front-matter-block"><span class="token punctuation">---</span></span>
20</span><span class="code-line">
21</span><span class="code-line"><span class="token important title"><span class="token punctuation">##</span> Release Notes</span>
22</span><span class="code-line">This page contains the release notes for the product.
23</span><span class="code-line">
24</span><span class="code-line"><span class="token important title"><span class="token punctuation">
24###</span> Version 1.0.0</span>
25</span><span class="code-line"><span class="token punctuation list">-</span> Added new feature
26</span><span class="code-line"><span class="token punctuation list">-</span> Fixed bug
27</span></code></pre></div><div class="relative overflow-hidden flex flex-col text-sm p-6 bg-primary-100/30 dark:bg-purple-900/30 rounded-md" data-sentry-component="Protip" data-sentry-source-file="Protip.tsx"><p class="flex gap-1 my-2 relative z-10"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles absolute opacity-20 -right-4 -top-9 -z-10 flex-shrink-0 inline-block w-8 h-8 rotate-12 text-primary-500 dark:text-primary-400"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path><path d="M20 3v4"></path><path d="M22 5h-4"></path><path d="M4 17v2"></path><path d="M5 18H3"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles absolute opacity-20 right-0 -bottom-10 -z-10 flex-shrink-0 inline-block w-14 h-14 rotate-12 text-primary-500 dark:text-primary-400"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path><path d="M20 3v4"></path><path d="M22 5h-4"></path><path d="M4 17v2"></path><path d="M5 18H3"></path></svg><span class="relative z-10">Out of inspiration? You can use the <a target="_blank" rel="noopener noreferrer" href="https://founderpal.ai/blog-ideas-generator" data-sentry-component="CustomLink" data-sentry-source-file="Link.tsx">Blog Post Generator</a> to generate blog posts or outlines quickly!</span></p></div><h4 id="frontmatter"><a href="#frontmatter" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Frontmatter</h4><p>So what is frontmatter? <br/>Frontmatter is a block of metadata at the top of a file that is used to populate the article&#x27;s metadata. It is written in YAML format. Here&#x27;s an example of frontmatter:</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;Blog post title&#x27;</span>
28</span><span class="code-line"><span class="token atrule key">summary</span><span class="token punctuation">:</span> <span class="token string">&#x27;A short summary of the article&#x27;</span>
29</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>
30</span><span class="code-line"><span class="token atrule key">tags</span><span class="token punctuation">:</span>
31</span><span class="code-line">  <span class="token punctuation">-</span> <span class="token string">&#x27;next-js&#x27;</span>
32</span><span class="code-line">  <span class="token punctuation">-</span> <span class="token string">&#x27;tailwind&#x27;</span>
33</span><span class="code-line">  <span class="token punctuation">-</span> <span class="token string">&#x27;guide&#x27;</span>
34</span></code></pre></div><p>That&#x27;s just the basics, but there are more fields available. Here&#x27;s a full list of all the fields that can be used in the frontmatter:</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;Blog post title&#x27;</span>
35</span><span class="code-line"><span class="token atrule key">summary</span><span class="token punctuation">:</span> <span class="token string">&#x27;A short summary of the article&#x27;</span>
36</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>
37</span><span class="code-line"><span class="token atrule key">tags</span><span class="token punctuation">:</span>
38</span><span class="code-line">  <span class="token punctuation">-</span> <span class="token string">&#x27;next-js&#x27;</span>
39</span><span class="code-line">  <span class="token punctuation">-</span> <span class="token string">&#x27;tailwind&#x27;</span>
40</span><span class="code-line">  <span class="token punctuation">-</span> <span class="token string">&#x27;guide&#x27;</span>
41</span><span class="code-line">
42</span><span class="code-line"><span class="token comment"># Optional fields</span>
43</span><span class="code-line"><span class="token atrule key">lastmod</span><span class="token punctuation">:</span> <span class="token string">&#x27;2021-02-01&#x27;</span>
44</span><span class="code-line"><span class="token atrule key">images</span><span class="token punctuation">:</span>
45</span><span class="code-line">  <span class="token punctuation">-</span> <span class="token string">&#x27;/static/images/backdrop-1.jpg&#x27;</span>
46</span><span class="code-line">  <span class="token punctuation">-</span> <span class="token string">&#x27;/static/images/backdrop-2.jpg&#x27;</span>
47</span><span class="code-line">
48</span><span class="code-line"><span class="token atrule key">authors</span><span class="token punctuation">:</span>
49</span><span class="code-line">  <span class="token punctuation">-</span> <span class="token string">&#x27;josh&#x27;</span>
50</span><span class="code-line">  <span class="token punctuation">-</span> <span class="token string">&#x27;jane&#x27;</span> <span class="token comment"># more authors can be defined under data/authors by creating a new .md file</span>
51</span><span class="code-line">
52</span><span class="code-line"><span class="token atrule key">layout</span><span class="token punctuation">:</span> <span class="token string">&#x27;PostLayout&#x27;</span> <span class="token comment"># 3 layouts are available: PostLayout (default) or PostBanner or PostSimple</span>
53</span><span class="code-line"><span class="token atrule key">draft</span><span class="token punctuation">:</span> <span class="token important boolean">
53false</span> <span class="token comment"># Set to true to hide the article from the blog</span>
54</span></code></pre></div><h4 id="more-about-frontmatter"><a href="#more-about-frontmatter" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>More about Frontmatter</h4><p>Frontmatter follows <a target="_blank" rel="noopener noreferrer" href="https://gohugo.io/content-management/front-matter/" data-sentry-component="CustomLink" data-sentry-source-file="Link.tsx">Hugo&#x27;s standards</a>.</p><p>Please refer to <code>contentlayer.config.ts</code> for an up to date list of supported fields. The following fields are supported:</p><div class="relative"><pre><code class="language-js code-highlight"><span class="code-line"><span class="token function">title</span> <span class="token punctuation">(</span>required<span class="token punctuation">)</span>
55</span><span class="code-line"><span class="token function">date</span> <span class="token punctuation">(</span>required<span class="token punctuation">)</span>
56</span><span class="code-line"><span class="token function">tags</span> <span class="token punctuation">(</span>optional<span class="token punctuation">)</span>
57</span><span class="code-line"><span class="token function">lastmod</span> <span class="token punctuation">(</span>optional<span class="token punctuation">)</span>
58</span><span class="code-line"><span class="token function">draft</span> <span class="token punctuation">(</span>optional<span class="token punctuation">)</span>
59</span><span class="code-line"><span class="token function">summary</span> <span class="token punctuation">(</span>optional<span class="token punctuation">)</span>
60</span><span class="code-line"><span class="token function">images</span> <span class="token punctuation">(</span>optional<span class="token punctuation">)</span>
61</span><span class="code-line"><span class="token function">authors</span> <span class="token punctuation">(</span>optional list which should correspond to the file names <span class="token keyword">in</span> <span class="token template-string"><span class="token string template-punctuation">`</span><span class="token string">data/authors</span><span class="token string template-punctuation">`</span></span><span class="token punctuation">.</span> <span class="token property-access"><span class="token maybe-class-name">Uses</span></span> <span class="token template-string"><span class="token string template-punctuation">`</span><span class="token string">default</span><span class="token string template-punctuation">`</span></span> <span class="token keyword control-flow">if</span> none is specified<span class="token punctuation">)</span>
62</span><span class="code-line"><span class="token function">layout</span> <span class="token punctuation">(</span>optional list which should correspond to the file names <span class="token keyword">in</span> <span class="token template-string"><span class="token string template-punctuation">`</span><span class="token string">data/layouts</span><span class="token string template-punctuation">`</span></span><span class="token punctuation">)</span>
63</span><span class="code-line"><span class="token function">canonicalUrl</span> <span class="token punctuation">(</span>optional<span class="token punctuation">,</span> canonical url <span class="token keyword control-flow">for</span> the post <span class="token keyword control-flow">for</span> <span class="token constant">SEO</span><span class="token punctuation">)</span>
64</span></code></pre></div><h3 id="layouts"><a href="#layouts" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Layouts</h3><p>There are currently 4 post layouts available: <code>PostLayout</code>, <code>PostLayoutWithToc</code>, <code>PostSimple</code> and <code>PostBanner</code>.</p><ul><li><code>PostLayout</code> is the default 2 column layout with meta and author information.</li><li><code>PostLayoutWithToc</code> is a layout that displays a blog post with a table of contents.</li><li><code>PostSimple</code> is a simplified version of <code>PostLayout</code></li><li><code>PostBanner</code> features a banner image.</li></ul><div class="grid md:grid-cols-2 gap-4"><div class="flex flex-col gap-1"><p class="m-0 font-semibold">Post layout (default)</p><div class="rounded-md shadow-md border border-gray-500/10 overflow-hidden relative"><img src="/static/images/blog/docs/shipixen-blog-default-layout.webp" alt="Shipixen Default Post Layout" class="m-0"/></div><a class="text-sm m-0" href="https://dataharborpro.vercel.app/using-the-blog"><span>Live example of default layout ↗</span></a></div><div><p class="m-0 font-semibold">Simple layout</p><div class="rounded-md shadow-md border border-gray-500/10 overflow-hidden"><img src="/static/images/blog/docs/shipixen-blog-simple-layout.webp" alt="Shipixen Simple Post Layout" class="m-0"/></div><a class="text-sm m-0" href="https://dataharborpro.vercel.app/pictures"><span>Live example of simple layout ↗</span></a></div><div><p class="m-0 font-semibold">Banner layout</p><div class="rounded-md shadow-md border border-gray-500/10 overflow-hidden"><img src="/static/images/blog/docs/shipixen-blog-banner-layout.webp" alt="Shipixen Banner Post Layout" class="m-0"/></div><a class="text-sm m-0" href="https://dataharborpro.vercel.app/code"><span>Live example of banner layout ↗</span></a></div></div><p>It&#x27;s possible to create multiple layouts and turn the blog into anything you want: from a minimalistic image gallery to a documentation site.</p><p>Read more about <a href="/boilerplate-documentation/creating-a-layout">creating custom layouts</a>.</p><h2 id="introduction-to-mdx"><a href="#introduction-to-mdx" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Introduction to MDX</h2><p>Markdown and Mdx parsing is supported via <code>unified</code>, and other remark and rehype packages. <code>next-mdx-remote</code> allows us to parse <code>.mdx</code> and <code>.md</code> files in a more flexible manner without touching webpack.</p><p>GitHub flavored markdown is used. <code>mdx-prism</code>
64 provides syntax highlighting capabilities for code blocks.</p><p>The following markdown cheatsheet is adapted from: <a target="_blank" rel="noopener noreferrer" href="https://guides.github.com/features/mastering-markdown/" data-sentry-component="CustomLink" data-sentry-source-file="Link.tsx">https://guides.github.com/features/mastering-markdown/</a></p><h3 id="what-is-markdown"><a href="#what-is-markdown" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>What is Markdown?</h3><p>Markdown is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown. Mostly, Markdown is just regular text with a few non-alphabetic characters thrown in, like <code>#</code> or <code>*</code>.</p><p>See the <a href="#syntax-guide">Syntax guide</a> for a complete reference.</p><h3 id="nested-routes"><a href="#nested-routes" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Nested Routes</h3><p>The blog template supports posts in nested sub-folders. This helps in organisation and can be used to group posts of similar content e.g. a multi-part series.</p><p>For example, if you create a file at <code>/data/nested-route/my-post.mdx</code>, the post will be available at <code>/nested-route/my-post</code>.</p><h3 id="table-of-contents"><a href="#table-of-contents" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Table of Contents</h3><p>The <code>TOCInline</code> component can be dropped into any post to generate a table of contents.</p><p>
64For 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>
65</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>
66</span></code></pre></div><details open=""><summary class="ml-6 pt-2 pb-2 text-xl font-bold">Table of Contents</summary><div class="ml-6"><ul><li class="false"><a href="#basics">Basics</a></li><li class="false"><a href="#introduction-to-mdx">Introduction to MDX</a></li><li class="false"><a href="#next-steps">Next steps</a></li></ul></div></details><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 attr-name">collapse</span> <span class="token punctuation">/&gt;</span></span>
67</span></code></pre></div><details><summary class="ml-6 pt-2 pb-2 text-xl font-bold">Table of Contents</summary><div class="ml-6"><ul><li class="false"><a href="#basics">Basics</a></li><li class="ml-6"><a href="#creating-a-post">Creating a post</a></li><li class="ml-6"><a href="#blog-post-example">Blog post example</a></li><li class="ml-6"><a href="#frontmatter">Frontmatter</a></li><li class="ml-6"><a href="#more-about-frontmatter">More about Frontmatter</a></li><li class="ml-6"><a href="#layouts">Layouts</a></li><li class="false"><a href="#introduction-to-mdx">Introduction to MDX</a></li><li class="ml-6"><a href="#what-is-markdown">What is Markdown?</a></li><li class="ml-6"><a href="#nested-routes">Nested Routes</a></li><li class="ml-6"><a href="#table-of-contents">Table of Contents</a></li><li class="ml-6"><a href="#how">How</a></li><li class="ml-6"><a href="#syntax-guide">
67Syntax guide</a></li><li class="ml-6"><a href="#headers">Headers</a></li><li class="ml-6"><a href="#emphasis">Emphasis</a></li><li class="ml-6"><a href="#lists">Lists</a></li><li class="ml-6"><a href="#unordered">Unordered</a></li><li class="ml-6"><a href="#ordered">Ordered</a></li><li class="ml-6"><a href="#images">Images</a></li><li class="ml-6"><a href="#links">Links</a></li><li class="ml-6"><a href="#blockquotes">Blockquotes</a></li><li class="ml-6"><a href="#inline-code">Inline code</a></li><li class="ml-6"><a href="#syntax-highlighting">Syntax highlighting</a></li><li class="ml-6"><a href="#line-diffing-and-highlighting">Line diffing and highlighting</a></li><li class="ml-6"><a href="#footnotes">Footnotes</a></li><li class="ml-6"><a href="#task-lists">Task Lists</a></li><li class="ml-6"><a href="#tables">Tables</a></li><li class="ml-6"><a href="#strikethrough">Strikethrough</a></li><li class="false"><a href="#next-steps">Next steps</a></li></ul></div></details><h4 id="how"><a href="#how" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>How</h4><p>Simplify create multiple folders inside the main <code>/data</code> folder and add your <code>.md</code>/<code>.mdx</code> files to them. You can even create something like <code>/data/nested-route/deeply-nested-route/my-post.md</code></p><h3 id="syntax-guide"><a href="#syntax-guide" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Syntax guide</h3><p>Here’s an overview of Markdown syntax that you can use anywhere on GitHub.com or in your own text files.</p><h4 id="headers"><a href="#headers" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Headers</h4><div class="relative"><pre><code class="language-js code-highlight"><span class="code-line">
68</span><span class="code-line"># <span class="token maybe-class-name">This</span> is a h1 tag
69</span><span class="code-line">
70</span><span class="code-line">## <span class="token maybe-class-name">This</span> is a h2 tag
71</span><span class="code-line">
72</span><span class="code-line">#### <span class="token maybe-class-name">This</span> is a h4 tag
73</span><span class="code-line">
74</span></code></pre></div><h4 id="emphasis"><a href="#emphasis" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Emphasis</h4><div class="relative"><pre><code class="language-js code-highlight"><span class="code-line">
75</span><span class="code-line">_This text will be italic_
76</span><span class="code-line">
77</span><span class="code-line"><span class="token operator">**</span><span class="token maybe-class-name">This</span> text will be bold<span class="token operator">**</span>
78</span><span class="code-line">
79</span><span class="code-line">_You <span class="token operator">**</span>can<span class="token operator">**</span> combine them_
80</span><span class="code-line">
81</span></code></pre></div><p><em>This text will be italic</em></p><p><strong>This text will be bold</strong></p><p><em>You <strong>can</strong> combine them</em></p><h4 id="lists"><a href="#lists" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Lists</h4><h5 id="unordered"><a href="#unordered" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Unordered</h5><div class="relative"><pre><code class="language-js code-highlight"><span class="code-line">
82</span><span class="code-line"><span class="token operator">-</span> <span class="token maybe-class-name">Item</span> <span class="token number">1</span>
83</span><span class="code-line"><span class="token operator">-</span> <span class="token maybe-class-name">Item</span> <span class="token number">2</span>
84</span><span class="code-line">  <span class="token operator">-</span> <span class="token maybe-class-name">Item</span> 2a
85</span><span class="code-line">  <span class="token operator">-</span> <span class="token maybe-class-name">Item</span> 2b
86</span><span class="code-line">
87</span></code></pre></div><ul><li>Item 1</li><li>Item 2<ul><li>Item 2a</li><li>Item 2b</li></ul></li></ul><h5 id="ordered"><a href="#ordered" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Ordered</h5><div class="relative"><pre><code class="language-js code-highlight"><span class="code-line">
88</span><span class="code-line"><span class="token number">1.</span> <span class="token maybe-class-name">Item</span> <span class="token number">1</span>
89</span><span class="code-line"><span class="token number">1.</span> <span class="token maybe-class-name">Item</span> <span class="token number">2</span>
90</span><span class="code-line"><span class="token number">1.</span> <span class="token maybe-class-name">Item</span> <span class="token number">3</span>
91</span><span class="code-line">   <span class="token number">1.</span> <span class="token maybe-class-name">Item</span> 3a
92</span><span class="code-line">   <span class="token number">1.</span> <span class="token maybe-class-name">Item</span> 3b
93</span><span class="code-line">
94</span></code></pre></div><ol><li>Item 1</li><li>Item 2</li><li>Item 3<ol><li>Item 3a</li><li>Item 3b</li></ol></li></ol><h4 id="images"><a href="#images" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Images</h4><div class="relative"><pre><code class="language-js code-highlight"><span class="code-line">
95</span><span class="code-line"><span class="token operator">!</span><span class="token punctuation">[</span><span class="token maybe-class-name">GitHub</span> <span class="token maybe-class-name">Logo</span><span class="token punctuation">]</span><span class="token punctuation">(</span>https<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span>github<span class="token punctuation">.</span><span class="token property-access">githubassets</span><span class="token punctuation">.</span><span class="token property-access">
95com</span><span class="token operator">/</span>images<span class="token operator">/</span>modules<span class="token operator">/</span>logos_page<span class="token operator">/</span><span class="token maybe-class-name">GitHub</span><span class="token operator">-</span><span class="token maybe-class-name">Mark</span><span class="token punctuation">.</span><span class="token property-access">png</span><span class="token punctuation">)</span>
96</span><span class="code-line"><span class="token literal-property property">Format</span><span class="token operator">:</span> <span class="token operator">!</span><span class="token punctuation">[</span><span class="token maybe-class-name">Alt</span> <span class="token maybe-class-name">Text</span><span class="token punctuation">]</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span>
97</span><span class="code-line">
98</span></code></pre></div><p><img alt="GitHub Logo" src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"/></p><h4 id="links"><a href="#links" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Links</h4><div class="relative"><pre><code class="language-js code-highlight"><span class="code-line">
99</span><span class="code-line"><span class="token literal-property property">http</span><span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span>github<span class="token punctuation">.</span><span class="token property-access">com</span> <span class="token operator">-</span> automatic<span class="token operator">!</span>
100</span><span class="code-line"><span class="token punctuation">[</span><span class="token maybe-class-name">GitHub</span><span class="token punctuation">]</span><span class="token punctuation">(</span>http<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span>github<span class="token punctuation">.</span><span class="token property-access">com</span><span class="token punctuation">)</span>
101</span><span class="code-line">
102</span></code></pre></div><p><a target="_blank" rel="noopener noreferrer" href="http://github.com" data-sentry-component="CustomLink" data-sentry-source-file="Link.tsx">http://github.com</a> - automatic! <a target="_blank" rel="noopener noreferrer" href="http://github.com" data-sentry-component="CustomLink" data-sentry-source-file="Link.tsx">GitHub</a></p><h4 id="blockquotes"><a href="#blockquotes" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Blockquotes</h4><div class="relative"><pre><code class="language-js code-highlight"><span class="code-line">
103</span><span class="code-line"><span class="token maybe-class-name">As</span> <span class="token maybe-class-name">Kanye</span> <span class="token maybe-class-name">West</span> said<span class="token operator">:</span>
104</span><span class="code-line">
105</span><span class="code-line"><span class="token operator">&gt;</span> <span class="token maybe-class-name">We</span>&#x27;re living the future so
106</span><span class="code-line"><span class="token operator">&gt;</span> the present is our past<span class="token punctuation">.</span>
107</span><span class="code-line">
108</span></code></pre></div><p>As Kanye West said:</p><blockquote><p>We&#x27;re living the future so the present is our past.</p></blockquote><h4 id="inline-code"><a href="#inline-code" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Inline code</h4><div class="relative"><pre><code class="language-js code-highlight"><span class="code-line">
109</span><span class="code-line"><span class="token constant">I</span> think you should use an
110</span><span class="code-line"><span class="token template-string"><span class="token string template-punctuation">`</span><span class="token string">&lt;addr&gt;</span><span class="token string template-punctuation">`</span></span> element here instead<span class="token punctuation">.</span>
111</span><span class="code-line">
112</span></code></pre></div><p>I think you should use an <code>&lt;addr&gt;</code> element here instead.</p><h3 id="syntax-highlighting"><a href="#syntax-highlighting" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Syntax highlighting</h3><p>Here’s an example of how you can use syntax highlighting with <a target="_blank" rel="noopener noreferrer" href="https://help.github.com/articles/basic-writing-and-formatting-syntax/" data-sentry-component="CustomLink" data-sentry-source-file="Link.tsx">GitHub Flavored Markdown</a>:</p><div class="relative"><pre><code class="language-js code-highlight"><span class="code-line">
113</span><span class="code-line"><span class="token template-string"><span class="token string template-punctuation">`</span><span class="token string template-punctuation">`</span></span>`js<span class="token operator">:</span>fancyAlert<span class="token punctuation">.</span><span class="token property-access">js</span>
114</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">fancyAlert</span><span class="token punctuation">(</span><span class="token parameter">arg</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
115</span><span class="code-line">  <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>arg<span class="token punctuation">)</span> <span class="token punctuation">{</span>
116</span><span class="code-line">    $<span class="token punctuation">.</span><span class="token function property-access method">facebox</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">div</span><span class="token operator">:</span> <span class="token string">&#x27;#foo&#x27;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
117</span><span class="code-line">  <span class="token punctuation">}</span>
118</span><span class="code-line"><span class="token punctuation">}</span>
119</span></code></pre></div><p>And here&#x27;s how it looks - nicely colored with styled code titles!</p><div class="remark-code-title">fancyAlert.js</div><div class="relative"><pre><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function">fancyAlert</span><span class="token punctuation">(</span><span class="token parameter">arg</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
120</span><span class="code-line">  <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>arg<span class="token punctuation">)</span> <span class="token punctuation">{</span>
121</span><span class="code-line">    $<span class="token punctuation">.</span><span class="token function property-access method">facebox</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">div</span><span class="token operator">:</span> <span class="token string">&#x27;#foo&#x27;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
122</span><span class="code-line">  <span class="token punctuation">}</span>
123</span><span class="code-line"><span class="token punctuation">}</span>
124</span></code></pre></div><h3 id="line-diffing-and-highlighting"><a href="#line-diffing-and-highlighting" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Line diffing and highlighting</h3><p>It is possible to show added/removed lines by using the <code>diff</code> language tag. For example &#x27;diff-js&#x27;, &#x27;diff-jsx&#x27;, &#x27;diff-html&#x27;, &#x27;diff-css&#x27;, &#x27;diff-scss&#x27;, &#x27;diff-md&#x27; etc.</p><p>The, add a plus for added lines and a minus for removed lines.</p><div class="relative"><pre><code class="language-js code-highlight"><span class="code-line">
125</span><span class="code-line"><span class="token template-string"><span class="token string template-punctuation">`</span><span class="token string template-punctuation">`</span></span>`diff<span class="token operator">-</span>js<span class="token operator">:</span>fancyAlert<span class="token punctuation">.</span><span class="token property-access">js</span>
126</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">fancyAlert</span><span class="token punctuation">(</span><span class="token parameter">arg</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
127</span><span class="code-line">  <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>arg<span class="token punctuation">)</span> <span class="token punctuation">{</span>
128</span><span class="code-line">    $<span class="token punctuation">.</span><span class="token function property-access method">facebox</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">div</span><span class="token operator">:</span> <span class="token string">&#x27;#foo&#x27;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
129</span><span class="code-line">  <span class="token punctuation">}</span>
130</span><span class="code-line"><span class="token punctuation">}</span>
131</span></code></pre></div><p>And here&#x27;s how it looks - nicely colored with styled code titles!</p><div class="remark-code-title">fancyAlert.js</div><div class="relative"><pre><code class="code-highlight language-diff-js"><span class="code-line"><span class="token keyword">function</span> <span class="token function">fancyAlert</span><span class="token punctuation">(</span><span class="token parameter">arg</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
132</span><span class="code-line">  <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>arg<span class="token punctuation">)</span> <span class="token punctuation">{</span>
133</span><span class="code-line deleted"><span class="token operator">-</span>   $<span class="token punctuation">.</span><span class="token function property-access method">facebox</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">div</span><span class="token operator">:</span> <span class="token string">&#x27;#foo&#x27;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
134</span><span class="code-line inserted"><span class="token operator">+</span>   $<span class="token punctuation">.</span><span class="token function property-access method">facebox</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">div</span><span class="token operator">:</span> <span class="token string">&#x27;#bar&#x27;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
135</span><span class="code-line">  <span class="token punctuation">}</span>
136</span><span class="code-line"><span class="token punctuation">}</span>
137</span></code></pre></div><h4 id="footnotes"><a href="#footnotes" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Footnotes</h4><div class="relative"><pre><code class="language-js code-highlight"><span class="code-line"><span class="token maybe-class-name">Here</span> is a simple footnote<span class="token punctuation">[</span><span class="token operator">^</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span> <span class="token property-access"><span class="token maybe-class-name">With</span></span> some additional text after it<span class="token punctuation">.</span>
138</span><span class="code-line">
139</span><span class="code-line"><span class="token punctuation">[</span><span class="token operator">^</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token maybe-class-name">My</span> reference<span class="token punctuation">.</span>
140</span></code></pre></div><p>Here is a simple footnote<sup><a href="#user-content-fn-1" aria-describedby="footnote-label" data-footnote-ref="true" id="user-content-fnref-1">1</a></sup>. With some additional text after it.</p><h4 id="task-lists"><a href="#task-lists" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Task Lists</h4><div class="relative"><pre><code class="language-js code-highlight"><span class="code-line"><span class="token operator">-</span> <span class="token punctuation">[</span>
140x<span class="token punctuation">]</span> list syntax <span class="token function">required</span> <span class="token punctuation">(</span>any unordered or ordered list supported<span class="token punctuation">)</span>
141</span><span class="code-line"><span class="token operator">-</span> <span class="token punctuation">[</span>x<span class="token punctuation">]</span> <span class="token keyword">this</span> is a complete item
142</span><span class="code-line"><span class="token operator">-</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token keyword">this</span> is an incomplete item
143</span></code></pre></div><ul class="contains-task-list"><li class="task-list-item"><input disabled="" type="checkbox" checked=""/> <!-- -->list syntax required (any unordered or ordered list supported)</li><li class="task-list-item"><input disabled="" type="checkbox" checked=""/> <!-- -->this is a complete item</li><li class="task-list-item"><input disabled="" type="checkbox"/> <!-- -->this is an incomplete item</li></ul><h4 id="tables"><a href="#tables" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Tables</h4><p>You can create tables by assembling a list of words and dividing them with hyphens <code>-</code> (for the first row), and then separating each column with a pipe <code>|</code>:</p><div class="relative"><pre><code class="language-js code-highlight"><span class="code-line"><span class="token operator">|</span> <span class="token maybe-class-name">First</span> <span class="token maybe-class-name">Header</span>                <span class="token operator">|</span> <span class="token maybe-class-name">Second</span> <span class="token maybe-class-name">Header</span>                <span class="token operator">|</span>
144</span><span class="code-line"><span class="token operator">|</span> <span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">-</span> <span class="token operator">|</span> <span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span> <span class="token operator">|</span>
145</span><span class="code-line"><span class="token operator">|</span> <span class="token maybe-class-name">Content</span> <span class="token keyword module">from</span> cell <span class="token number">1</span>         <span class="token operator">|</span> <span class="token maybe-class-name">Content</span> <span class="token keyword module">from</span> cell <span class="token number">2</span>          <span class="token operator">|</span>
146</span><span class="code-line"><span class="token operator">|</span> <span class="token maybe-class-name">Content</span> <span class="token keyword">in</span> the first column <span class="token operator">|</span> <span class="token maybe-class-name">Content</span> <span class="token keyword">in</span> the second column <span class="token operator">|</span>
147</span></code></pre></div><table><thead><tr><th>First Header</th><th>Second Header</th></tr></thead><tbody><tr><td>Content from cell 1</td><td>Content from cell 2</td></tr><tr><td>Content in the first column</td><td>Content in the second column</td></tr></tbody></table><h4 id="strikethrough"><a href="#strikethrough" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Strikethrough</h4><p>Any word wrapped with two tildes (like <code>~~this~~</code>) will appear <del>crossed out</del>
147.</p><h2 id="next-steps"><a href="#next-steps" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Next steps</h2><p>Ready to dive deeper? Check out these guides:</p><ul><li><a href="/boilerplate-documentation/extending-the-blog">Extending the blog</a></li><li><a href="/boilerplate-documentation/tour-of-the-codebase">Take a tour of the codebase</a></li><li><a href="/boilerplate-documentation/customizing-landing-page">Customize the landing page</a></li></ul><section class="footnotes" data-footnotes="true"><h2 id="footnote-label" class="sr-only"><a href="#footnote-label" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Footnotes</h2><ol><li id="user-content-fn-1"><p>My reference. <a href="#user-content-fnref-1" aria-label="Back to content" class="data-footnote-backref" data-footnote-backref="true">↩</a></p></li></ol></section></div></div><footer class="p-6"><div class="divide-gray-200 text-sm font-medium leading-5 dark:divide-gray-700 xl:col-start-1 xl:row-start-2 xl:divide-y"><div class="py-4 xl:py-8"><h2 class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">Tags</h2><div class="flex flex-wrap"><a class="mr-3 text-sm font-medium lowercase text-primary-500 hover:text-primary-700 dark:hover:text-primary-400" data-sentry-element="Link" data-sentry-component="Tag" data-sentry-source-file="Tag.tsx" href="/tags/blog">blog</a><a class="mr-3 text-sm font-medium lowercase text-primary-500 hover:text-primary-700 dark:hover:text-primary-400" data-sentry-element="Link" data-sentry-component="Tag" data-sentry-source-file="Tag.tsx" href="/tags/guide">guide</a><a class="mr-3 text-sm font-medium lowercase text-primary-500 hover:text-primary-700 dark:hover:text-primary-400" data-sentry-element="Link" data-sentry-component="Tag" data-sentry-source-file="Tag.tsx" href="/tags/mdx">mdx</a><a class="mr-3 text-sm font-medium lowercase text-primary-500 hover:text-primary-700 dark:hover:text-primary-400" data-sentry-element="Link" data-sentry-component="Tag" data-sentry-source-file="Tag.tsx" href="/tags/markdown">markdown</a><a class="mr-3 text-sm font-medium lowercase text-primary-500 hover:text-primary-700 dark:hover:text-primary-400" data-sentry-element="Link" data-sentry-component="Tag" data-sentry-source-file="Tag.tsx" href="/tags/documentation">documentation</a></div><a href="/tags" class="inline-block mt-2 text-xs capitalize font-medium text-primary-500 hover:text-primary-700 dark:hover:text-primary-400" target="_blank" rel="noopener noreferrer">All tags<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link ml-1 inline-block w-3 h-3"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div><div class="flex justify-between py-4 xl:block xl:space-y-8 xl:py-8"><div><h2 class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">Previous Article</h2><div class="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"><a href="/boilerplate-documentation/configuration">Generated codebase configuration</a></div></div><div><h2 class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">Next Article</h2><div class="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"><a href="/boilerplate-documentation/vercel-deploy-integration">Using the Shipixen ↔️ Vercel Deploy Integration</a></div></div></div><div class="flex pt-4 xl:pt-8"><a class="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400" aria-label="More articles" data-sentry-element="Link" data-sentry-source-file="PostHub.tsx" href="/all-articles">More articles →</a></div></div></footer></article><aside class="order-1 lg:order-2 relative xl:sticky top-0 pt-0 pb-6 px-6 lg:pt-6 w-full xl:max-w-[15rem] xl:max-h-screen flex flex-col items-start justify-normal overflow-auto lg:max-w-xl"><h2 class="mt-4 font-semibold text-sm">Jump to section</h2><ul class="toc-list wide-container !p-0 mt-4"><li class="toc-link fancy-link fancy-link--no-underline"><a href="#basics">Basics</a></li><li class="ml-6 toc-link fancy-link fancy-link--no-underline"><a href="#creating-a-post">Creating a post</a></li><li class="ml-6 toc-link fancy-link fancy-link--no-underline"><a href="#blog-post-example">Blog post example</a></li><li class="ml-6 toc-link fancy-link fancy-link--no-underline"><a href="#frontmatter">Frontmatter</a></li><li class="ml-6 toc-link fancy-link fancy-link--no-underline"><a href="#more-about-frontmatter">More about Frontmatter</a></li><li class="ml-6 toc-link fancy-link fancy-link--no-underline"><a href="#layouts">Layouts</a></li><li class="toc-link fancy-link fancy-link--no-underline"><a href="#introduction-to-mdx">Introduction to MDX</a></li><li class="ml-6 toc-link fancy-link fancy-link--no-underline"><a href="#what-is-markdown">What is Markdown?</a></li><li class="ml-6 toc-link fancy-link fancy-link--no-underline"><a href="#nested-routes">Nested Routes</a></li><li class="ml-6 toc-link fancy-link fancy-link--no-underline"><a href="#table-of-contents">Table of Contents</a></li><li class="ml-6 toc-link fancy-link fancy-link--no-underline"><a href="#how">How</a></li><li class="ml-6 toc-link fancy-link fancy-link--no-underline"><a href="#syntax-guide">
147Syntax guide</a></li><li class="ml-6 toc-link fancy-link fancy-link--no-underline"><a href="#headers">Headers</a></li><li class="ml-6 toc-link fancy-link fancy-link--no-underline"><a href="#emphasis">Emphasis</a></li><li class="ml-6 toc-link fancy-link fancy-link--no-underline"><a href="#lists">Lists</a></li><li class="ml-6 toc-link fancy-link fancy-link--no-underline"><a href="#unordered">Unordered</a></li><li class="ml-6 toc-link fancy-link fancy-link--no-underline"><a href="#ordered">Ordered</a></li><li class="ml-6 toc-link fancy-link fancy-link--no-underline"><a href="#images">Images</a></li><li class="ml-6 toc-link fancy-link fancy-link--no-underline"><a href="#links">Links</a></li><li class="ml-6 toc-link fancy-link fancy-link--no-underline"><a href="#blockquotes">Blockquotes</a></li><li class="ml-6 toc-link fancy-link fancy-link--no-underline"><a href="#inline-code">Inline code</a></li><li class="ml-6 toc-link fancy-link fancy-link--no-underline"><a href="#syntax-highlighting">Syntax highlighting</a></li><li class="ml-6 toc-link fancy-link fancy-link--no-underline"><a href="#line-diffing-and-highlighting">Line diffing and highlighting</a></li><li class="ml-6 toc-link fancy-link fancy-link--no-underline"><a href="#footnotes">Footnotes</a></li><li class="ml-6 toc-link fancy-link fancy-link--no-underline"><a href="#task-lists">Task Lists</a></li><li class="ml-6 toc-link fancy-link fancy-link--no-underline"><a href="#tables">Tables</a></li><li class="ml-6 toc-link fancy-link fancy-link--no-underline"><a href="#strikethrough">Strikethrough</a></li><li class="toc-link fancy-link fancy-link--no-underline"><a href="#next-steps">Next steps</a></li></ul><div class="z-20 bottom-8 right-8 hidden flex-col gap-3 md:hidden static mt-auto" data-sentry-component="ScrollTop" data-sentry-source-file="ScrollTop.tsx"><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" data-sentry-element="svg" data-sentry-source-file="ScrollTop.tsx"><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" data-sentry-element="path" data-sentry-source-file="ScrollTop.tsx"></path></svg></button></div></aside></div></main></div><footer class="w-full bg-gradient-to-r from-white/5 via-white/60 to-white/5 backdrop-blur-sm dark:from-slate-700/5 dark:via-slate-700/60 dark:to-slate-700/5" data-sentry-component="Footer" data-sentry-source-file="Footer.tsx"><div class="flex flex-col gap-4 justify-between items-center w-full md:py-10 p-6"><div class="w-full flex flex-col md:flex-row justify-between gap-6 mt-12 wide-container"><div class="w-full flex flex-col gap-4 md:max-w-xs lg:max-w-[310px]"><a aria-label="" data-sentry-element="Link" data-sentry-source-file="Footer.tsx" href="/"><div class="flex items-center gap-3"><img alt="Shipixen Logo" data-sentry-element="Image" data-sentry-source-file="Logo.tsx" loading="lazy" width="100" height="100" decoding="async" data-nimg="1" class="dark:hidden h-14 w-auto" style="color:transparent" srcSet="/_next/image?url=%2Fstatic%2Fimages%2Ficon-logo.webp&amp;w=128&amp;q=75 1x, /_next/image?url=%2Fstatic%2Fimages%2Ficon-logo.webp&amp;w=256&amp;q=75 2x" src="/_next/image?url=%2Fstatic%2Fimages%2Ficon-logo.webp&amp;w=256&amp;q=75"/><img alt="Shipixen Logo" data-sentry-element="Image" data-sentry-source-file="Logo.tsx" loading="lazy" width="100" height="100" decoding="async" data-nimg="1" class="hidden dark:inline-block h-14 w-auto" style="color:transparent" srcSet="/_next/image?url=%2Fstatic%2Fimages%2Ficon-logo-dark.webp&amp;w=128&amp;q=75 1x, /_next/image?url=%2Fstatic%2Fimages%2Ficon-logo-dark.webp&amp;w=256&amp;q=75 2x" src="/_next/image?url=%2Fstatic%2Fimages%2Ficon-logo-dark.webp&amp;w=256&amp;q=75"/></div></a><div class="text-lg font-semibold"></div><p class="text-sm opacity-70">Ship Next.js 15 apps with an MDX blog in minutes. TypeScript, Shadcn UI and all components you need to build for your app, website, product or blog. SEO optimized, responsive and performant.</p><p class="text-xs">Copyright © <!-- -->Shipixen</p></div><div class="grid md:grid-cols-2 gap-12 items-start mt-6 md:mt-0 lg:grid-cols-4"><ul class="flex flex-col flex-wrap gap-4 justify-center w-full text-xs">
147<li><p class="text-slate-900 dark:text-slate-100 font-light text-base">Help</p></li><li><a class="nav-link nav-link--footer" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation"><span>Documentation</span></a></li><li><a class="nav-link nav-link--footer" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/generating-boilerplates"><span>Generating boilerplates</span></a></li><li><a class="nav-link nav-link--footer" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/using-the-shipixen-blog"><span>Writing posts with mdx</span></a></li><li><a class="nav-link nav-link--footer" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/boilerplate-documentation/vercel-deploy-integration#main"><span>Deploy to Vercel</span></a></li><li><a class="nav-link nav-link--footer" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/migrate/ghost-blog"><span>Migrate blog from Ghost</span></a></li><li><a class="nav-link nav-link--footer" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/free-for-open-source"><span>Free for Open Source</span></a></li></ul><ul class="flex flex-col flex-wrap gap-4 justify-center w-full text-xs"><li><p class="text-slate-900 dark:text-slate-100 font-light text-base">Support</p></li><li><a class="nav-link nav-link--footer" href="/#faq">FAQ</a></li><li><a class="nav-link nav-link--footer" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/terms"><span>Terms of Service</span></a></li><li><a class="nav-link nav-link--footer" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/privacy"><span>Privacy Policy</span></a></li><li><a class="nav-link nav-link--footer" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/about"><span>About Shipixen</span></a></li><li><a href="#" class="nav-link !text-xs" data-sentry-component="FooterSupportButton" data-sentry-source-file="FooterSupportButton.tsx">Contact Support</a></li><li><a class="nav-link nav-link--footer" href="https://shipixen.lemonsqueezy.com/affiliates" target="_blank" rel="noopener noreferrer" data-sentry-component="LinkWithTracking" data-sentry-source-file="LinkWithTracking.tsx">Become an affiliate</a></li></ul><ul class="flex flex-col flex-wrap gap-4 justify-center w-full text-xs"><li><p class="text-slate-900 dark:text-slate-100 font-light text-base">Product</p></li><li><a href="/download/macos" class="nav-link hidden sm:block !text-xs" data-ph-capture-attribute-name="try-text-button" id="try-text-button" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-:Rjjpla:" data-state="closed" data-sentry-element="DialogTrigger" data-sentry-source-file="tryButton.tsx"><span class="bg-clip-text bg-gradient-to-r text-transparent from-primary-400 to-secondary-300">Try app</span></a></li><li><a class="nav-link nav-link--footer" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/pricing"><span>Pricing</span></a></li><li><a class="nav-link nav-link--footer" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/release-notes"><span>Release Notes</span></a></li><li><a class="nav-link nav-link--footer" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/all-articles"><span>Blog</span></a></li><li><a class="nav-link nav-link--footer" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/features"><span>All Features</span></a></li><li><a href="https://pageai.pro" class="nav-link nav-link--footer" target="_blank" rel="noopener noreferrer">Generate websites with AI</a></li></ul><ul class="flex flex-col flex-wrap gap-4 justify-center w-full text-xs"><li><p class="text-slate-900 dark:text-slate-100 font-light text-base">Tools</p></li><li><a href="https://pageui.dev" class="nav-link nav-link--footer" target="_blank" rel="noopener noreferrer">Landing Page Components</a></li><li><a class="nav-link nav-link--footer" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/component-explorer-shadcn"><span>Component Explorer</span></a></li><li><a class="nav-link nav-link--footer" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/shadcn-pricing-page"><span>Pricing Page Generator</span></a></li><li><a class="nav-link nav-link--footer" href="https://tool.crontap.com/cronjob-debugger" target="_blank" rel="noopener noreferrer" data-sentry-component="LinkWithTracking" data-sentry-source-file="LinkWithTracking.tsx">Cron Expression Viewer</a></li><li><a href="https://folge.me" class="nav-link nav-link--footer" target="_blank" rel="noopener noreferrer">Create step-by-step guides</a></li><li><a class="nav-link nav-link--footer" data-sentry-element="Link" data-sentry-source-file="ActiveLink.tsx" href="/partners"><span>Partners</span></a></li></ul></div></div></div><div><hr class="w-full my-4 border-0 bg-gradient-to-r from-white/5 via-black/10 to-white/5 dark:from-black/5 dark:via-white/30 darK:to-black/5" style="height:1px"/><div class="py-8 px-2 flex flex-col items-center"><div class="mb-3 flex space-x-4"></div><div class="flex gap-1 px-4 items-center"><a href="https://www.producthunt.com/posts/shipixen?utm_source=badge-top-post-badge&amp;utm_medium=badge&amp;utm_souce=badge-shipixen" target="_blank" rel="noopener noreferrer" data-sentry-component="ProductHuntBadge" data-sentry-source-file="ProductHuntBadge.tsx"><img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=424261&amp;theme=light&amp;period=daily" alt="shipixen | Product Hunt" class="w-52 h-auto" width="250" height="54"/></a><a href="https://www.producthunt.com/posts/shipixen?utm_source=badge-top-post-badge&amp;utm_medium=badge&amp;utm_souce=badge-shipixen" target="_blank" rel="noopener noreferrer" data-sentry-component="ProductHuntBadge" data-sentry-source-file="ProductHuntBadge.tsx"><img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-topic-badge.svg?post_id=424261&amp;theme=light&amp;period=weekly&amp;
147topic_id=267" alt="shipixen | Product Hunt" class="w-52 h-auto" width="250" height="54"/></a></div><div class="mt-6 mb-2 flex flex-wrap space-x-2 text-sm text-gray-500 dark:text-gray-400"><div class="w-full flex-shrink-0">This website was built with Shipixen<!-- --> <span class="grayscale">🔄</span></div></div><div class="mb-2 flex space-x-2 text-sm text-gray-500 dark:text-gray-400"><div>© 2026</div><div> • </div><a data-sentry-element="Link" data-sentry-source-file="Footer.tsx" href="/">Shipixen</a></div></div></div></footer><!--$!--><template data-dgst="NEXT_DYNAMIC_NO_SSR_CODE"></template><!--/$--><!--$!--><template data-dgst="NEXT_DYNAMIC_NO_SSR_CODE"></template><!--/$-->
147<script src="/_next/static/chunks/webpack-a2d53e8a4c65fa79.js" async=""></script>
147<script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script>
147<script>self.__next_f.push([1,"1:HL[\"/_next/static/media/e4af272ccee01ff0-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n2:HL[\"/_next/static/css/b87ffae1b2e942cb.css\",\"style\"]\n0:\"$L3\"\n"])</script>
147<script>self.__next_f.push([1,"4:HL[\"/_next/static/css/6fd49269e7517e8e.css\",\"style\"]\n"])</script>
147<script>self.__next_f.push([1,"5:I[76054,[],\"\"]\n7:I[6361,[\"6470\",\"static/chunks/app/global-error-4236cd1fa8567019.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\"],\"\"]\n8:I[30087,[\"4724\",\"static/chunks/4724-196f890948bffc72.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5109\",\"static/chunks/5109-c88f58cf5610f377.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"9744\",\"static/chunks/9744-9fb3876655c4bd80.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"6610\",\"static/chunks/6610-d251da2e8cf38ffe.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"3185\",\"static/chunks/app/layout"])</script>
147<script>self.__next_f.push([1,"-954ed7d94efe4f3c.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\"],\"PHProvider\"]\n9:I[60453,[\"4724\",\"static/chunks/4724-196f890948bffc72.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5109\",\"static/chunks/5109-c88f58cf5610f377.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"9744\",\"static/chunks/9744-9fb3876655c4bd80.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"6610\",\"static/chunks/6610-d251da2e8cf38ffe.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"3185\",\"static/chunks/app/layout-954ed7d94efe4f3c.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGc"])</script>
147<script>self.__next_f.push([1,"Fd\"],\"ThemeProviders\"]\na:I[83861,[\"4724\",\"static/chunks/4724-196f890948bffc72.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5109\",\"static/chunks/5109-c88f58cf5610f377.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"9744\",\"static/chunks/9744-9fb3876655c4bd80.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"6610\",\"static/chunks/6610-d251da2e8cf38ffe.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"3185\",\"static/chunks/app/layout-954ed7d94efe4f3c.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\"],\"Analytics\"]\nb:I[93157,[\"4724\",\"static/chunks/"])</script>
147<script>self.__next_f.push([1,"4724-196f890948bffc72.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5109\",\"static/chunks/5109-c88f58cf5610f377.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"9744\",\"static/chunks/9744-9fb3876655c4bd80.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"6610\",\"static/chunks/6610-d251da2e8cf38ffe.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"3185\",\"static/chunks/app/layout-954ed7d94efe4f3c.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\"],\"SearchProvider\"]\nc:I[81443,[],\"\"]\nd:I[18639,[],\"\"]\n"])</script>
147<script>self.__next_f.push([1,"e:I[34724,[\"4724\",\"static/chunks/4724-196f890948bffc72.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5109\",\"static/chunks/5109-c88f58cf5610f377.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"4729\",\"static/chunks/4729-b471914be5da664b.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"9744\",\"static/chunks/9744-9fb3876655c4bd80.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5805\",\"static/chunks/5805-241c296fee5d7c2a.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5194\",\"static/chunks/5194-565f2643edb6ccf5.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"9604\",\"static/chunks/9604-1690df0fe94e420f.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"914\",\"static/chunks/914-c9099f70f5c48350.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"8841\",\"static/chunks/8841-52f4732195445660.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"4613\",\"static/chunks/4613-a07613917c5cd54c.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"7421\",\"static/chunks/7421-dd5038d875cffb4a.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"1733\",\"static/chunks/1733-c51e7f4337b226ca.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"6610\",\"static/chunks/6610-d251da2e8cf38ffe.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5104\",\"static/chunks/5104-c5b912bb80de91a7.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"2283\",\"static/chunks/2283-780194222d0560db.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"7608\",\"static/chunks/7608-9ebc1039fb39c615.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"8877\",\"static/chunks/app/%5B...slug%5D/page-b1265d1e8bc7b969.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\"],\"\"]\n"])</script>
147<script>self.__next_f.push([1,"11:I[96964,[\"4724\",\"static/chunks/4724-196f890948bffc72.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5109\",\"static/chunks/5109-c88f58cf5610f377.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"4729\",\"static/chunks/4729-b471914be5da664b.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"9744\",\"static/chunks/9744-9fb3876655c4bd80.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5805\",\"static/chunks/5805-241c296fee5d7c2a.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5194\",\"static/chunks/5194-565f2643edb6ccf5.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"9604\",\"static/chunks/9604-1690df0fe94e420f.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"914\",\"static/chunks/914-c9099f70f5c48350.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"8841\",\"static/chunks/8841-52f4732195445660.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"4613\",\"static/chunks/4613-a07613917c5cd54c.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"7421\",\"static/chunks/7421-dd5038d875cffb4a.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"1733\",\"static/chunks/1733-c51e7f4337b226ca.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"6610\",\"static/chunks/6610-d251da2e8cf38ffe.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5104\",\"static/chunks/5104-c5b912bb80de91a7.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"2283\",\"static/chunks/2283-780194222d0560db.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"7608\",\"static/chunks/7608-9ebc1039fb39c615.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"8877\",\"static/chunks/app/%5B...slug%5D/page-b1265d1e8bc7b969.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\"],\"Image\"]\n"])</script>
147<script>self.__next_f.push([1,"12:I[18094,[\"4724\",\"static/chunks/4724-196f890948bffc72.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5109\",\"static/chunks/5109-c88f58cf5610f377.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"4729\",\"static/chunks/4729-b471914be5da664b.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"9744\",\"static/chunks/9744-9fb3876655c4bd80.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5805\",\"static/chunks/5805-241c296fee5d7c2a.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5194\",\"static/chunks/5194-565f2643edb6ccf5.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"9604\",\"static/chunks/9604-1690df0fe94e420f.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"914\",\"static/chunks/914-c9099f70f5c48350.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"8841\",\"static/chunks/8841-52f4732195445660.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"4613\",\"static/chunks/4613-a07613917c5cd54c.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"7421\",\"static/chunks/7421-dd5038d875cffb4a.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"1733\",\"static/chunks/1733-c51e7f4337b226ca.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"6610\",\"static/chunks/6610-d251da2e8cf38ffe.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5104\",\"static/chunks/5104-c5b912bb80de91a7.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"2283\",\"static/chunks/2283-780194222d0560db.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"7608\",\"static/chunks/7608-9ebc1039fb39c615.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"8877\",\"static/chunks/app/%5B...slug%5D/page-b1265d1e8bc7b969.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\"],\"\"]\n"])</script>
147<script>self.__next_f.push([1,"13:I[52902,[\"4724\",\"static/chunks/4724-196f890948bffc72.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5109\",\"static/chunks/5109-c88f58cf5610f377.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"9744\",\"static/chunks/9744-9fb3876655c4bd80.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"6610\",\"static/chunks/6610-d251da2e8cf38ffe.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"3185\",\"static/chunks/app/layout-954ed7d94efe4f3c.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\"],\"FooterSupportButton\"]\n"])</script>
147<script>self.__next_f.push([1,"14:I[32829,[\"4724\",\"static/chunks/4724-196f890948bffc72.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5109\",\"static/chunks/5109-c88f58cf5610f377.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"4729\",\"static/chunks/4729-b471914be5da664b.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"9744\",\"static/chunks/9744-9fb3876655c4bd80.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5805\",\"static/chunks/5805-241c296fee5d7c2a.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5194\",\"static/chunks/5194-565f2643edb6ccf5.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"2204\",\"static/chunks/2204-1551bab0a5654d27.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"1733\",\"static/chunks/1733-c51e7f4337b226ca.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"6610\",\"static/chunks/6610-d251da2e8cf38ffe.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"7608\",\"static/chunks/7608-9ebc1039fb39c615.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"4596\",\"static/chunks/4596-f7e4ccba5e65b03e.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"1931\",\"static/chunks/app/page-e0a7b5dc3515a892.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\"],\"LinkWithTracking\"]\n"])</script>
147<script>self.__next_f.push([1,"15:I[16610,[\"4724\",\"static/chunks/4724-196f890948bffc72.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5109\",\"static/chunks/5109-c88f58cf5610f377.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"4729\",\"static/chunks/4729-b471914be5da664b.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"9744\",\"static/chunks/9744-9fb3876655c4bd80.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5805\",\"static/chunks/5805-241c296fee5d7c2a.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5194\",\"static/chunks/5194-565f2643edb6ccf5.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"9604\",\"static/chunks/9604-1690df0fe94e420f.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"914\",\"static/chunks/914-c9099f70f5c48350.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"8841\",\"static/chunks/8841-52f4732195445660.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"4613\",\"static/chunks/4613-a07613917c5cd54c.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"7421\",\"static/chunks/7421-dd5038d875cffb4a.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"1733\",\"static/chunks/1733-c51e7f4337b226ca.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"6610\",\"static/chunks/6610-d251da2e8cf38ffe.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5104\",\"static/chunks/5104-c5b912bb80de91a7.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"2283\",\"static/chunks/2283-780194222d0560db.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"7608\",\"static/chunks/7608-9ebc1039fb39c615.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"8877\",\"static/chunks/app/%5B...slug%5D/page-b1265d1e8bc7b969.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\"],\"TryButton\"]\n"])</script>
147<script>self.__next_f.push([1,"16:I[8735,[\"4724\",\"static/chunks/4724-196f890948bffc72.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5109\",\"static/chunks/5109-c88f58cf5610f377.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"4729\",\"static/chunks/4729-b471914be5da664b.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"9744\",\"static/chunks/9744-9fb3876655c4bd80.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5805\",\"static/chunks/5805-241c296fee5d7c2a.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5194\",\"static/chunks/5194-565f2643edb6ccf5.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"2204\",\"static/chunks/2204-1551bab0a5654d27.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"1733\",\"static/chunks/1733-c51e7f4337b226ca.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"6610\",\"static/chunks/6610-d251da2e8cf38ffe.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"7608\",\"static/chunks/7608-9ebc1039fb39c615.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"4596\",\"static/chunks/4596-f7e4ccba5e65b03e.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"1931\",\"static/chunks/app/page-e0a7b5dc3515a892.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\"],\"ProductHuntBadge\"]\n"])</script>
147<script>self.__next_f.push([1,"17:\"$Sreact.suspense\"\n18:I[46085,[\"4724\",\"static/chunks/4724-196f890948bffc72.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5109\",\"static/chunks/5109-c88f58cf5610f377.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"9744\",\"static/chunks/9744-9fb3876655c4bd80.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"6610\",\"static/chunks/6610-d251da2e8cf38ffe.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"3185\",\"static/chunks/app/layout-954ed7d94efe4f3c.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\"],\"\"]\n19:I[76123,[\"4724\",\"static/chunks/4724-196"])</script>
147<script>self.__next_f.push([1,"f890948bffc72.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5109\",\"static/chunks/5109-c88f58cf5610f377.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"9744\",\"static/chunks/9744-9fb3876655c4bd80.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"6610\",\"static/chunks/6610-d251da2e8cf38ffe.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"3185\",\"static/chunks/app/layout-954ed7d94efe4f3c.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\"],\"GtmAnalytics\"]\n"])</script>
147<script>self.__next_f.push([1,"3:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/b87ffae1b2e942cb.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L5\",null,{\"buildId\":\"k0-vbrdFV21HYeXEFobgN\",\"assetPrefix\":\"\",\"initialCanonicalUrl\":\"/boilerplate-documentation/using-the-shipixen-blog\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"boilerplate-documentation/using-the-shipixen-blog\",\"c\"],{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialHead\":[false,\"$L6\"],\"globalErrorComponent\":\"$7\",\"children\":[null,[\"$\",\"html\",null,{\"lang\":\"en-us\",\"className\":\"__variable_f367f3 __variable_f367f3 scroll-smooth\",\"suppressHydrationWarning\":true,\"data-sentry-component\":\"RootLayout\",\"data-sentry-source-file\":\"layout.tsx\",\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"style\",null,{\"children\":\"\\n          :root, :before, :after {\\n            --primary-lighter-hex: #f0abfc;--primary-lighter: 240, 171, 252;--primary-light-hex: #e879f9;--primary-light: 232, 121, 249;--primary-main-hex: #d946ef;--primary-main: 217, 70, 239;--primary-dark-hex: #c026d3;--primary-dark: 192, 38, 211;--primary-darker-hex: #701a75;--primary-darker: 112, 26, 117;--secondary-lighter-hex: #7dd3fc;--secondary-lighter: 125, 211, 252;--secondary-light-hex: #38bdf8;--secondary-light: 56, 189, 248;--secondary-main-hex: #0ea5e9;--secondary-main: 14, 165, 233;--secondary-dark-hex: #0284c7;--secondary-dark: 2, 132, 199;--secondary-darker-hex: #0369a1;--secondary-darker: 3, 105, 161\\n          }\\n        \"}],[\"$\",\"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/manifest.webmanifest\"}],[\"$\",\"link\",null,{\"rel\":\"mask-icon\",\"href\":\"/static/favicons/safari-pinned-tab.svg\",\"color\":\"#5bbad5\"}],[\"$\",\"meta\",null,{\"name\":\"msapplication-TileColor\",\"content\":\"#000000\",\"data-sentry-element\":\"meta\",\"data-sentry-source-file\":\"layout.tsx\"}],[\"$\",\"meta\",null,{\"name\":\"theme-color\",\"media\":\"(prefers-color-scheme: light)\",\"content\":\"#fff\",\"data-sentry-element\":\"meta\",\"data-sentry-source-file\":\"layout.tsx\"}],[\"$\",\"meta\",null,{\"name\":\"theme-color\",\"media\":\"(prefers-color-scheme: dark)\",\"content\":\"#000\",\"data-sentry-element\":\"meta\",\"data-sentry-source-file\":\"layout.tsx\"}],[\"$\",\"link\",null,{\"rel\":\"alternate\",\"type\":\"application/rss+xml\",\"href\":\"/feed.xml\"}]]}],[\"$\",\"$L8\",null,{\"data-sentry-element\":\"PHProvider\",\"data-sentry-source-file\":\"layout.tsx\",\"children\":[\"$\",\"body\",null,{\"className\":\"bg-white text-black antialiased dark:bg-gray-950 dark:text-white min-h-screen\",\"children\":[[\"$\",\"$L9\",null,{\"data-sentry-element\":\"ThemeProviders\",\"data-sentry-source-file\":\"layout.tsx\",\"children\":[[\"$\",\"$La\",null,{}],[\"$\",\"div\",null,{\"className\":\"w-full flex flex-col justify-between items-center font-sans\",\"children\":[\"$\",\"$Lb\",null,{\"data-sentry-element\":\"SearchProvider\",\"data-sentry-source-file\":\"layout.tsx\",\"children\":[\"$\",\"main\",null,{\"className\":\"w-full flex flex-col items-center mb-auto\",\"children\":[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"loading\":\"$undefined\",\"loadingStyles\":\"$undefined\",\"hasLoading\":false,\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"template\":[\"$\",\"$Ld\",null,{}],\"templateStyles\":\"$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\",\"data-sentry-component\":\"NotFound\",\"data-sentry-source-file\":\"not-found.tsx\",\"children\":[[\"$\",\"div\",null,{\"className\":\"space-x-2 pb-8 pt-6 md:space-y-5\",\"children\":[\"$\",\"h1\",null,{\"className\":\"text-6xl font-semibold leading-9 tracking-tight text-gray-900 dark:text-gray-100 md:border-r-2 md:px-6 md:text-8xl md:leading-14\",\"children\":\"404\"}]}],[\"$\",\"div\",null,{\"className\":\"max-w-md\",\"children\":[[\"$\",\"p\",null,{\"className\":\"mb-4 text-xl font-bold leading-normal md:text-2xl\",\"children\":\"Sorry, we couldn't find this page.\"}],[\"$\",\"p\",null,{\"className\":\"mb-8\",\"children\":\"Please head back to the homepage or contact us if you think this is an error.\"}],[\"$\",\"$Le\",null,{\"prefetch\":false,\"href\":\"/\",\"className\":\"focus:shadow-outline-blue inline rounded-lg border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium leading-5 text-white shadow transition-colors duration-150 hover:bg-blue-700 focus:outline-none dark:hover:bg-blue-500\",\"data-sentry-element\":\"Link\",\"data-sentry-source-file\":\"not-found.tsx\",\"children\":\"Back to homepage\"}]]}]]}],\"notFoundStyles\":[],\"childProp\":{\"current\":[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",[\"slug\",\"boilerplate-documentation/using-the-shipixen-blog\",\"c\"],\"children\"],\"loading\":\"$undefined\",\"loadingStyles\":\"$undefined\",\"hasLoading\":false,\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"template\":[\"$\",\"$Ld\",null,{}],\"templateStyles\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"childProp\":{\"current\":[\"$Lf\",\"$L10\",null],\"segment\":\"__PAGE__\"},\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/6fd49269e7517e8e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],\"segment\":[\"slug\",\"boilerplate-documentation/using-the-shipixen-blog\",\"c\"]},\"styles\":[]}]}]}]}],[\"$\",\"footer\",null,{\"className\":\"w-full bg-gradient-to-r from-white/5 via-white/60 to-white/5 backdrop-blur-sm dark:from-slate-700/5 dark:via-slate-700/60 dark:to-slate-700/5\",\"data-sentry-component\":\"Footer\",\"data-sentry-source-file\":\"Footer.tsx\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-4 justify-between items-center w-full md:py-10 p-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full flex flex-col md:flex-row justify-between gap-6 mt-12 wide-container\",\"children\":[[\"$\",\"div\",null,{\"className\":\"w-full flex flex-col gap-4 md:max-w-xs lg:max-w-[310px]\",\"children\":[[\"$\",\"$Le\",null,{\"prefetch\":false,\"href\":\"/\",\"aria-label\":\"\",\"data-sentry-element\":\"Link\",\"data-sentry-source-file\":\"Footer.tsx\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex items-center gap-3\",\"children\":[[\"$\",\"$L11\",null,{\"className\":\"dark:hidden h-14 w-auto\",\"src\":\"/static/images/icon-logo.webp\",\"width\":100,\"height\"
147:100,\"alt\":\"Shipixen Logo\",\"data-sentry-element\":\"Image\",\"data-sentry-source-file\":\"Logo.tsx\"}],[\"$\",\"$L11\",null,{\"className\":\"hidden dark:inline-block h-14 w-auto\",\"src\":\"/static/images/icon-logo-dark.webp\",\"width\":100,\"height\":100,\"alt\":\"Shipixen Logo\",\"data-sentry-element\":\"Image\",\"data-sentry-source-file\":\"Logo.tsx\"}]]}]}],[\"$\",\"div\",null,{\"className\":\"text-lg font-semibold\",\"children\":\"\"}],[\"$\",\"p\",null,{\"className\":\"text-sm opacity-70\",\"children\":\"Ship Next.js 15 apps with an MDX blog in minutes. TypeScript, Shadcn UI and all components you need to build for your app, website, product or blog. SEO optimized, responsive and performant.\"}],[\"$\",\"p\",null,{\"className\":\"text-xs\",\"children\":[\"Copyright © \",\"Shipixen\"]}]]}],[\"$\",\"div\",null,{\"className\":\"grid md:grid-cols-2 gap-12 items-start mt-6 md:mt-0 lg:grid-cols-4\",\"children\":[[\"$\",\"ul\",\"0\",{\"className\":\"flex flex-col flex-wrap gap-4 justify-center w-full text-xs\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"p\",null,{\"className\":\"text-slate-900 dark:text-slate-100 font-light text-base\",\"children\":\"Help\"}]}],null,[[\"$\",\"li\",\"0\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/boilerplate-documentation\",\"className\":\"nav-link nav-link--footer\",\"activeClassName\":\"nav-link-active\",\"children\":[\"$\",\"span\",null,{\"children\":\"Documentation\"}]}]}],[\"$\",\"li\",\"1\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/boilerplate-documentation/generating-boilerplates\",\"className\":\"nav-link nav-link--footer\",\"activeClassName\":\"nav-link-active\",\"children\":[\"$\",\"span\",null,{\"children\":\"Generating boilerplates\"}]}]}],[\"$\",\"li\",\"2\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/boilerplate-documentation/using-the-shipixen-blog\",\"className\":\"nav-link nav-link--footer\",\"activeClassName\":\"nav-link-active\",\"children\":[\"$\",\"span\",null,{\"children\":\"Writing posts with mdx\"}]}]}],[\"$\",\"li\",\"3\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/boilerplate-documentation/vercel-deploy-integration#main\",\"className\":\"nav-link nav-link--footer\",\"activeClassName\":\"nav-link-active\",\"children\":[\"$\",\"span\",null,{\"children\":\"Deploy to Vercel\"}]}]}],[\"$\",\"li\",\"4\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/migrate/ghost-blog\",\"className\":\"nav-link nav-link--footer\",\"activeClassName\":\"nav-link-active\",\"children\":[\"$\",\"span\",null,{\"children\":\"Migrate blog from Ghost\"}]}]}],[\"$\",\"li\",\"5\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/free-for-open-source\",\"className\":\"nav-link nav-link--footer\",\"activeClassName\":\"nav-link-active\",\"children\":[\"$\",\"span\",null,{\"children\":\"Free for Open Source\"}]}]}]]]}],[\"$\",\"ul\",\"1\",{\"className\":\"flex flex-col flex-wrap gap-4 justify-center w-full text-xs\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"p\",null,{\"className\":\"text-slate-900 dark:text-slate-100 font-light text-base\",\"children\":\"Support\"}]}],null,[[\"$\",\"li\",\"0\",{\"children\":[\"$\",\"$Le\",null,{\"prefetch\":false,\"href\":\"/#faq\",\"className\":\"nav-link nav-link--footer\",\"children\":\"FAQ\"}]}],[\"$\",\"li\",\"1\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/terms\",\"className\":\"nav-link nav-link--footer\",\"activeClassName\":\"nav-link-active\",\"children\":[\"$\",\"span\",null,{\"children\":\"Terms of Service\"}]}]}],[\"$\",\"li\",\"2\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/privacy\",\"className\":\"nav-link nav-link--footer\",\"activeClassName\":\"nav-link-active\",\"children\":[\"$\",\"span\",null,{\"children\":\"Privacy Policy\"}]}]}],[\"$\",\"li\",\"3\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/about\",\"className\":\"nav-link nav-link--footer\",\"activeClassName\":\"nav-link-active\",\"children\":[\"$\",\"span\",null,{\"children\":\"About Shipixen\"}]}]}],[\"$\",\"li\",\"4\",{\"children\":[\"$\",\"$L13\",null,{\"className\":\"!text-xs\"}]}],[\"$\",\"li\",\"5\",{\"children\":[\"$\",\"$L14\",null,{\"href\":\"https://shipixen.lemonsqueezy.com/affiliates\",\"className\":\"nav-link nav-link--footer\",\"event\":\"Link_Click\",\"eventName\":\"Become an affiliate\",\"children\":\"Become an affiliate\"}]}]]]}],[\"$\",\"ul\",\"2\",{\"className\":\"flex flex-col flex-wrap gap-4 justify-center w-full text-xs\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"p\",null,{\"className\":\"text-slate-900 dark:text-slate-100 font-light text-base\",\"children\":\"Product\"}]}],[\"$\",\"li\",\"2\",{\"children\":[\"$\",\"$L15\",null,{\"type\":\"text\",\"className\":\"!text-xs\"}]}],[[\"$\",\"li\",\"0\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/pricing\",\"className\":\"nav-link nav-link--footer\",\"activeClassName\":\"nav-link-active\",\"children\":[\"$\",\"span\",null,{\"children\":\"Pricing\"}]}]}],[\"$\",\"li\",\"1\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/release-notes\",\"className\":\"nav-link nav-link--footer\",\"activeClassName\":\"nav-link-active\",\"children\":[\"$\",\"span\",null,{\"children\":\"Release Notes\"}]}]}],[\"$\",\"li\",\"2\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/all-articles\",\"className\":\"nav-link nav-link--footer\",\"activeClassName\":\"nav-link-active\",\"children\":[\"$\",\"span\",null,{\"children\":\"Blog\"}]}]}],[\"$\",\"li\",\"3\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/features\",\"className\":\"nav-link nav-link--footer\",\"activeClassName\":\"nav-link-active\",\"children\":[\"$\",\"span\",null,{\"children\":\"All Features\"}]}]}],[\"$\",\"li\",\"4\",{\"children\":[\"$\",\"a\",null,{\"href\":\"https://pageai.pro\",\"className\":\"nav-link nav-link--footer\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":\"Generate websites with AI\"}]}]]]}],[\"$\",\"ul\",\"3\",{\"className\":\"flex flex-col flex-wrap gap-4 justify-center w-full text-xs\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"p\",null,{\"className\":\"text-slate-900 dark:text-slate-100 font-light text-base\",\"children\":\"Tools\"}]}],null,[[\"$\",\"li\",\"0\",{\"children\":[\"$\",\"a\",null,{\"href\":\"https://pageui.dev\",\"className\":\"nav-link nav-link--footer\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":\"Landing Page Components\"}]}],[\"$\",\"li\",\"1\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/component-explorer-shadcn\",\"className\":\"nav-link nav-link--footer\",\"activeClassName\":\"nav-link-active\",\"children\":[\"$\",\"span\",null,{\"children\":\"Component Explorer\"}]}]}],[\"$\",\"li\",\"2\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/shadcn-pricing-page\",\"className\":\"nav-link nav-link--footer\",\"activeClassName\":\"nav-link-active\",\"children\":[\"$\",\"span\",null,{\"children\":\"Pricing Page Generator\"}]}]}],[\"$\",\"li\",\"3\",{\"children\":[\"$\",\"$L14\",null,{\"href\":\"https://tool.crontap.com/cronjob-debugger\",\"className\":\"nav-link nav-link--footer\",\"event\":\"Link_Click\",\"eventName\":\"Cron Expression Viewer\",\"children\":\"Cron Expression Viewer\"}]}],[\"$\",\"li\",\"4\",{\"children\":[\"$\",\"a\",null,{\"href\":\"https://folge.me\",\"className\":\"nav-link nav-link--footer\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":\"Create step-by-step guides\"}]}],[\"$\",\"li\",\"5\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/partners\",\"className\":\"nav-link nav-link--footer\",\"activeClassName\":\"nav-link-active\",\"children\":[\"$\",\"span\",null,{\"children\":\"Partners\"}]}]}]]]}]]}]]}]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"hr\",null,{\"className\":\"w-full my-4 border-0 bg-gradient-to-r from-white/5 via-black/10 to-white/5 dark:from-black/5 dark:via-white/30 darK:to-black/5\",\"style\":{\"height\"
147:\"1px\"}}],[\"$\",\"div\",null,{\"className\":\"py-8 px-2 flex flex-col items-center\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-3 flex space-x-4\",\"children\":[\"\",\"\",\"\",\"\",\"\",\"\"]}],[\"$\",\"div\",null,{\"className\":\"flex gap-1 px-4 items-center\",\"children\":[[\"$\",\"$L16\",null,{\"postName\":\"shipixen\",\"postId\":\"424261\",\"data-sentry-element\":\"ProductHuntBadge\",\"data-sentry-source-file\":\"Footer.tsx\"}],[\"$\",\"$L16\",null,{\"postName\":\"shipixen\",\"postId\":\"424261\",\"topic\":\"topic-dev-tools\",\"data-sentry-element\":\"ProductHuntBadge\",\"data-sentry-source-file\":\"Footer.tsx\"}]]}],[\"$\",\"div\",null,{\"className\":\"mt-6 mb-2 flex flex-wrap space-x-2 text-sm text-gray-500 dark:text-gray-400\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full flex-shrink-0\",\"children\":[\"This website was built with Shipixen\",\" \",[\"$\",\"span\",null,{\"className\":\"grayscale\",\"children\":\"🔄\"}]]}]}],[\"$\",\"div\",null,{\"className\":\"mb-2 flex space-x-2 text-sm text-gray-500 dark:text-gray-400\",\"children\":[[\"$\",\"div\",null,{\"children\":\"© 2026\"}],[\"$\",\"div\",null,{\"children\":\" • \"}],[\"$\",\"$Le\",null,{\"prefetch\":false,\"href\":\"/\",\"data-sentry-element\":\"Link\",\"data-sentry-source-file\":\"Footer.tsx\",\"children\":\"Shipixen\"}]]}]]}]]}]]}]]}],[\"$\",\"$17\",null,{\"data-sentry-element\":\"Suspense\",\"data-sentry-source-file\":\"layout.tsx\",\"children\":[\"$\",\"$L18\",null,{\"data-sentry-element\":\"PostHogPageView\",\"data-sentry-source-file\":\"layout.tsx\"}]}],[\"$\",\"$17\",null,{\"data-sentry-element\":\"Suspense\",\"data-sentry-source-file\":\"layout.tsx\",\"children\":[\"$\",\"$L19\",null,{\"data-sentry-element\":\"GtmAnalytics\",\"data-sentry-source-file\":\"layout.tsx\"}]}]]}]}]]}],null]}]]\n"])</script>
147<script>self.__next_f.push([1,"1a:I[5616,[\"4724\",\"static/chunks/4724-196f890948bffc72.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5109\",\"static/chunks/5109-c88f58cf5610f377.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"4729\",\"static/chunks/4729-b471914be5da664b.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"9744\",\"static/chunks/9744-9fb3876655c4bd80.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5805\",\"static/chunks/5805-241c296fee5d7c2a.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5194\",\"static/chunks/5194-565f2643edb6ccf5.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"9604\",\"static/chunks/9604-1690df0fe94e420f.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"914\",\"static/chunks/914-c9099f70f5c48350.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"8841\",\"static/chunks/8841-52f4732195445660.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"4613\",\"static/chunks/4613-a07613917c5cd54c.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"7421\",\"static/chunks/7421-dd5038d875cffb4a.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"1733\",\"static/chunks/1733-c51e7f4337b226ca.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"6610\",\"static/chunks/6610-d251da2e8cf38ffe.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5104\",\"static/chunks/5104-c5b912bb80de91a7.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"2283\",\"static/chunks/2283-780194222d0560db.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"7608\",\"static/chunks/7608-9ebc1039fb39c615.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"8877\",\"static/chunks/app/%5B...slug%5D/page-b1265d1e8bc7b969.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\"],\"TooltipProvider\"]\n"])</script>
147<script>self.__next_f.push([1,"1b:I[62639,[\"4724\",\"static/chunks/4724-196f890948bffc72.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5109\",\"static/chunks/5109-c88f58cf5610f377.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"4729\",\"static/chunks/4729-b471914be5da664b.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"9744\",\"static/chunks/9744-9fb3876655c4bd80.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5805\",\"static/chunks/5805-241c296fee5d7c2a.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5194\",\"static/chunks/5194-565f2643edb6ccf5.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"9604\",\"static/chunks/9604-1690df0fe94e420f.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"914\",\"static/chunks/914-c9099f70f5c48350.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"8841\",\"static/chunks/8841-52f4732195445660.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"4613\",\"static/chunks/4613-a07613917c5cd54c.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"7421\",\"static/chunks/7421-dd5038d875cffb4a.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"1733\",\"static/chunks/1733-c51e7f4337b226ca.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"6610\",\"static/chunks/6610-d251da2e8cf38ffe.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5104\",\"static/chunks/5104-c5b912bb80de91a7.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"2283\",\"static/chunks/2283-780194222d0560db.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"7608\",\"static/chunks/7608-9ebc1039fb39c615.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"8877\",\"static/chunks/app/%5B...slug%5D/page-b1265d1e8bc7b969.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\"],\"ToolsDropdownMenu\"]\n"])</script>
147<script>self.__next_f.push([1,"1c:I[19021,[\"4724\",\"static/chunks/4724-196f890948bffc72.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5109\",\"static/chunks/5109-c88f58cf5610f377.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"4729\",\"static/chunks/4729-b471914be5da664b.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"9744\",\"static/chunks/9744-9fb3876655c4bd80.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5805\",\"static/chunks/5805-241c296fee5d7c2a.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5194\",\"static/chunks/5194-565f2643edb6ccf5.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"9604\",\"static/chunks/9604-1690df0fe94e420f.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"914\",\"static/chunks/914-c9099f70f5c48350.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"8841\",\"static/chunks/8841-52f4732195445660.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"4613\",\"static/chunks/4613-a07613917c5cd54c.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"7421\",\"static/chunks/7421-dd5038d875cffb4a.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"1733\",\"static/chunks/1733-c51e7f4337b226ca.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"6610\",\"static/chunks/6610-d251da2e8cf38ffe.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5104\",\"static/chunks/5104-c5b912bb80de91a7.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"2283\",\"static/chunks/2283-780194222d0560db.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"7608\",\"static/chunks/7608-9ebc1039fb39c615.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"8877\",\"static/chunks/app/%5B...slug%5D/page-b1265d1e8bc7b969.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\"],\"KBarButton\"]\n"])</script>
147<script>self.__next_f.push([1,"1d:I[84266,[\"4724\",\"static/chunks/4724-196f890948bffc72.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5109\",\"static/chunks/5109-c88f58cf5610f377.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"4729\",\"static/chunks/4729-b471914be5da664b.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"9744\",\"static/chunks/9744-9fb3876655c4bd80.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5805\",\"static/chunks/5805-241c296fee5d7c2a.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5194\",\"static/chunks/5194-565f2643edb6ccf5.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"9604\",\"static/chunks/9604-1690df0fe94e420f.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"914\",\"static/chunks/914-c9099f70f5c48350.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"8841\",\"static/chunks/8841-52f4732195445660.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"4613\",\"static/chunks/4613-a07613917c5cd54c.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"7421\",\"static/chunks/7421-dd5038d875cffb4a.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"1733\",\"static/chunks/1733-c51e7f4337b226ca.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"6610\",\"static/chunks/6610-d251da2e8cf38ffe.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5104\",\"static/chunks/5104-c5b912bb80de91a7.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"2283\",\"static/chunks/2283-780194222d0560db.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"7608\",\"static/chunks/7608-9ebc1039fb39c615.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"8877\",\"static/chunks/app/%5B...slug%5D/page-b1265d1e8bc7b969.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\"],\"\"]\n"])</script>
147<script>self.__next_f.push([1,"1e:I[22897,[\"4724\",\"static/chunks/4724-196f890948bffc72.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5109\",\"static/chunks/5109-c88f58cf5610f377.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"4729\",\"static/chunks/4729-b471914be5da664b.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"9744\",\"static/chunks/9744-9fb3876655c4bd80.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5805\",\"static/chunks/5805-241c296fee5d7c2a.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5194\",\"static/chunks/5194-565f2643edb6ccf5.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"9604\",\"static/chunks/9604-1690df0fe94e420f.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"914\",\"static/chunks/914-c9099f70f5c48350.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"8841\",\"static/chunks/8841-52f4732195445660.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"4613\",\"static/chunks/4613-a07613917c5cd54c.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"7421\",\"static/chunks/7421-dd5038d875cffb4a.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"1733\",\"static/chunks/1733-c51e7f4337b226ca.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"6610\",\"static/chunks/6610-d251da2e8cf38ffe.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5104\",\"static/chunks/5104-c5b912bb80de91a7.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"2283\",\"static/chunks/2283-780194222d0560db.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"7608\",\"static/chunks/7608-9ebc1039fb39c615.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"8877\",\"static/chunks/app/%5B...slug%5D/page-b1265d1e8bc7b969.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\"],\"\"]\n"])</script>
147<script>self.__next_f.push([1,"1f:I[66246,[\"4724\",\"static/chunks/4724-196f890948bffc72.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5109\",\"static/chunks/5109-c88f58cf5610f377.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"4729\",\"static/chunks/4729-b471914be5da664b.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"9744\",\"static/chunks/9744-9fb3876655c4bd80.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5805\",\"static/chunks/5805-241c296fee5d7c2a.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5194\",\"static/chunks/5194-565f2643edb6ccf5.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"9604\",\"static/chunks/9604-1690df0fe94e420f.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"914\",\"static/chunks/914-c9099f70f5c48350.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"8841\",\"static/chunks/8841-52f4732195445660.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"4613\",\"static/chunks/4613-a07613917c5cd54c.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"7421\",\"static/chunks/7421-dd5038d875cffb4a.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"1733\",\"static/chunks/1733-c51e7f4337b226ca.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"6610\",\"static/chunks/6610-d251da2e8cf38ffe.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5104\",\"static/chunks/5104-c5b912bb80de91a7.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"2283\",\"static/chunks/2283-780194222d0560db.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"7608\",\"static/chunks/7608-9ebc1039fb39c615.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"8877\",\"static/chunks/app/%5B...slug%5D/page-b1265d1e8bc7b969.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\"],\"\"]\n"])</script>
147<script>self.__next_f.push([1,"20:I[83552,[\"4724\",\"static/chunks/4724-196f890948bffc72.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5109\",\"static/chunks/5109-c88f58cf5610f377.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"4729\",\"static/chunks/4729-b471914be5da664b.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"9744\",\"static/chunks/9744-9fb3876655c4bd80.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5805\",\"static/chunks/5805-241c296fee5d7c2a.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5194\",\"static/chunks/5194-565f2643edb6ccf5.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"9604\",\"static/chunks/9604-1690df0fe94e420f.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"914\",\"static/chunks/914-c9099f70f5c48350.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"8841\",\"static/chunks/8841-52f4732195445660.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"4613\",\"static/chunks/4613-a07613917c5cd54c.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"7421\",\"static/chunks/7421-dd5038d875cffb4a.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"1733\",\"static/chunks/1733-c51e7f4337b226ca.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"6610\",\"static/chunks/6610-d251da2e8cf38ffe.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5104\",\"static/chunks/5104-c5b912bb80de91a7.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"2283\",\"static/chunks/2283-780194222d0560db.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"7608\",\"static/chunks/7608-9ebc1039fb39c615.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"8877\",\"static/chunks/app/%5B...slug%5D/page-b1265d1e8bc7b969.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\"],\"TOC\"]\n"])</script>
147<script>self.__next_f.push([1,"21:I[15934,[\"4724\",\"static/chunks/4724-196f890948bffc72.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5109\",\"static/chunks/5109-c88f58cf5610f377.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"4729\",\"static/chunks/4729-b471914be5da664b.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"9744\",\"static/chunks/9744-9fb3876655c4bd80.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5805\",\"static/chunks/5805-241c296fee5d7c2a.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5194\",\"static/chunks/5194-565f2643edb6ccf5.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"9604\",\"static/chunks/9604-1690df0fe94e420f.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"914\",\"static/chunks/914-c9099f70f5c48350.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"8841\",\"static/chunks/8841-52f4732195445660.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"4613\",\"static/chunks/4613-a07613917c5cd54c.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"7421\",\"static/chunks/7421-dd5038d875cffb4a.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"1733\",\"static/chunks/1733-c51e7f4337b226ca.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"6610\",\"static/chunks/6610-d251da2e8cf38ffe.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5104\",\"static/chunks/5104-c5b912bb80de91a7.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"2283\",\"static/chunks/2283-780194222d0560db.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"7608\",\"static/chunks/7608-9ebc1039fb39c615.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"8877\",\"static/chunks/app/%5B...slug%5D/page-b1265d1e8bc7b969.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\"],\"\"]\n"])</script>
147<script>self.__next_f.push([1,"22:I[1254,[\"4724\",\"static/chunks/4724-196f890948bffc72.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5109\",\"static/chunks/5109-c88f58cf5610f377.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"4729\",\"static/chunks/4729-b471914be5da664b.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"9744\",\"static/chunks/9744-9fb3876655c4bd80.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5805\",\"static/chunks/5805-241c296fee5d7c2a.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5194\",\"static/chunks/5194-565f2643edb6ccf5.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"9604\",\"static/chunks/9604-1690df0fe94e420f.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"914\",\"static/chunks/914-c9099f70f5c48350.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"8841\",\"static/chunks/8841-52f4732195445660.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"4613\",\"static/chunks/4613-a07613917c5cd54c.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"7421\",\"static/chunks/7421-dd5038d875cffb4a.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"1733\",\"static/chunks/1733-c51e7f4337b226ca.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"6610\",\"static/chunks/6610-d251da2e8cf38ffe.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"5104\",\"static/chunks/5104-c5b912bb80de91a7.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"2283\",\"static/chunks/2283-780194222d0560db.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"7608\",\"static/chunks/7608-9ebc1039fb39c615.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\",\"8877\",\"static/chunks/app/%5B...slug%5D/page-b1265d1e8bc7b969.js?dpl=dpl_5m8ALdwFRa3Z5rZ9zdsWVEvBGcFd\"],\"ScrollRestoration\"]\n"])</script>
147<script>self.__next_f.push([1,"10:[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"BlogPosting\\\",\\\"headline\\\":\\\"Writing blog posts: Shipixen blog crash course \u0026 Markdown cheatsheet\\\",\\\"datePublished\\\":\\\"2023-10-11T00:00:00.000Z\\\",\\\"dateModified\\\":\\\"2025-05-14T00:00:00.000Z\\\",\\\"description\\\":\\\"Learn how to use the blog. Write blog posts by example plus get a markdown cheatsheet - headers, lists, images, tables and more!\\\",\\\"image\\\":\\\"/static/images/shipixen-product.webp\\\",\\\"url\\\":\\\"https://shipixen.com/boilerplate-documentation/using-the-shipixen-blog\\\",\\\"author\\\":[{\\\"@type\\\":\\\"Person\\\",\\\"name\\\":\\\"Shipixen\\\"}]}\"}}],[\"$\",\"$L1a\",null,{\"data-sentry-element\":\"TooltipProvider\",\"data-sentry-component\":\"PostHubLayout\",\"data-sentry-source-file\":\"PostHub.tsx\",\"children\":[[\"$\",\"header\",null,{\"className\":\"flex items-center py-10 flex-wrap w-full pt-6 wide-container gap-2 mb-0 lg:mb-0\",\"children\":[[\"$\",\"div\",null,{\"children\":[\"$\",\"$Le\",null,{\"prefetch\":false,\"href\":\"/\",\"aria-label\":\"\",\"data-sentry-element\":\"Link\",\"data-sentry-source-file\":\"Header.tsx\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex items-center gap-3 justify-between\",\"children\":[[[\"$\",\"$L11\",null,{\"className\":\"dark:hidden h-12 min-w-[140px]\",\"src\":\"/static/images/icon-logo.webp\",\"width\":100,\"height\":100,\"alt\":\"Shipixen Logo\",\"data-sentry-element\":\"Image\",\"data-sentry-source-file\":\"Logo.tsx\"}],[\"$\",\"$L11\",null,{\"className\":\"hidden dark:inline-block h-12 min-w-[140px]\",\"src\":\"/static/images/icon-logo-dark.webp\",\"width\":100,\"height\":100,\"alt\":\"Shipixen Logo\",\"data-sentry-element\":\"Image\",\"data-sentry-source-file\":\"Logo.tsx\"}]],[\"$\",\"div\",null,{\"className\":\"hidden text-2xl font-semibold sm:flex h-full\",\"children\":\"\"}]]}]}]}],[\"$\",\"div\",null,{\"className\":\"hidden sm:inline-block mx-4 w-0.5 h-8 bg-primary-500/10\"}],[\"$\",\"div\",null,{\"className\":\"flex justify-center gap-5 md:gap-6\",\"children\":[[[\"$\",\"$L12\",\"Features\",{\"href\":\"/features\",\"className\":\"nav-link hidden sm:block\",\"activeClassName\":\"nav-link-active\",\"children\":[\"$\",\"span\",null,{\"children\":\"Features\"}]}],[\"$\",\"$L12\",\"Docs\",{\"href\":\"/boilerplate-documentation\",\"className\":\"nav-link hidden sm:block\",\"activeClassName\":\"nav-link-active\",\"children\":[\"$\",\"span\",null,{\"children\":\"Docs\"}]}]],[\"$\",\"$L15\",null,{\"type\":\"text\",\"text\":\"Download App\",\"fancyText\":false,\"data-sentry-element\":\"TryButton\",\"data-sentry-source-file\":\"Header.tsx\"}],[\"$\",\"$L12\",null,{\"href\":\"/pricing\",\"className\":\"nav-link hidden sm:block\",\"activeClassName\":\"nav-link-active\",\"data-ph-capture-attribute-name\":\"pricing-button\",\"id\":\"pricing-button\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"Header.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"Pricing\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"ml-auto flex items-center leading-5 gap-4 sm:gap-6\",\"children\":[[\"$\",\"$L1b\",null,{\"className\":\"hidden lg:inline-flex\",\"data-sentry-element\":\"ToolsDropdownMenu\",\"data-sentry-source-file\":\"Header.tsx\"}],[\"$\",\"a\",null,{\"className\":\"hidden md:inline-flex items-center justify-center gap-2\",\"href\":\"https://pageui.dev\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[[\"$\",\"span\",null,{\"className\":\"hidden lg:inline-block\",\"children\":\"Page UI\"}],[\"$\",\"$L11\",null,{\"src\":\"/static/images/page-ui-log.webp\",\"width\":100,\"height\":100,\"className\":\"w-8 h-8\",\"alt\":\"Page UI Landing page components Logo\",\"data-sentry-element\":\"Image\",\"data-sentry-source-file\":\"Header.tsx\"}]]}],[\"$\",\"$L1c\",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\":\"text-gray-900 dark:text-gray-100 h-6 w-6\",\"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\"}]}]}],[\"$\",\"$L1d\",null,{\"data-sentry-element\":\"ThemeSwitch\",\"data-sentry-source-file\":\"Header.tsx\"}],[\"$\",\"$L1e\",null,{\"data-sentry-element\":\"MobileNav\",\"data-sentry-source-file\":\"Header.tsx\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"w-full fancy-overlay fancy-overlay--muted flex flex-col flex-wrap lg:flex-row justify-center\",\"children\":[[\"$\",\"aside\",null,{\"className\":\"order-3 lg:order-1 lg:sticky lg:max-h-screen top-0 p-6 w-full lg:w-[14rem] 2xl:w-full xl:max-w-[12rem] 2xl:max-w-[16rem] lg:overflow-auto pb-12\",\"
147id\":\"navigation\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"mt-4 font-semibold mb-4 md:hidden\",\"children\":\"Read more\"}],[\"$\",\"ul\",null,{\"className\":\"toc-list\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/boilerplate-documentation#main\",\"className\":\"toc-link fancy-link fancy-link--no-underline\",\"activeClassName\":\"toc-active-link\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"PostHub.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"Overview\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/boilerplate-documentation/what-is-shipixen#main\",\"className\":\"toc-link fancy-link fancy-link--no-underline\",\"activeClassName\":\"toc-active-link\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"PostHub.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"What is Shipixen\"}]}]}],[\"$\",\"li\",null,{\"className\":\"toc-separator\"}],[\"$\",\"li\",null,{\"className\":\"toc-title\",\"children\":[\"$\",\"h3\",null,{\"children\":\"Using the app\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/boilerplate-documentation/generating-boilerplates#main\",\"className\":\"toc-link fancy-link fancy-link--no-underline\",\"activeClassName\":\"toc-active-link\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"PostHub.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"Generating codebases\"}]}]}],[\"$\",\"li\",null,{\"className\":\"toc-separator\"}],[\"$\",\"li\",null,{\"className\":\"toc-title\",\"children\":[\"$\",\"h3\",null,{\"children\":\"Blog \u0026 landing\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/boilerplate-documentation/customizing-landing-page#main\",\"className\":\"toc-link fancy-link fancy-link--no-underline\",\"activeClassName\":\"toc-active-link\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"PostHub.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"Customizing landing page\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/boilerplate-documentation/using-the-shipixen-blog#main\",\"className\":\"toc-link fancy-link fancy-link--no-underline\",\"activeClassName\":\"toc-active-link\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"PostHub.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"Writing blog posts\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/boilerplate-documentation/creating-a-blog-mdx-component#main\",\"className\":\"toc-link fancy-link fancy-link--no-underline\",\"activeClassName\":\"toc-active-link\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"PostHub.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"Adding a new blog component\"}]}]}],[\"$\",\"li\",null,{\"className\":\"toc-separator\"}],[\"$\",\"li\",null,{\"className\":\"toc-title\",\"children\":[\"$\",\"h3\",null,{\"children\":\"Components\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/boilerplate-documentation/landing-page-components#main\",\"className\":\"toc-link fancy-link fancy-link--no-underline\",\"activeClassName\":\"toc-active-link\",\"activeChildren\":[\"$\",\"ul\",null,{\"className\":\"flex flex-col text-[13px] ml-3 mt-2\",\"data-sentry-component\":\"LandingPageComponentsNav\",\"data-sentry-source-file\":\"LandingPageComponentsNav.tsx\",\"children\":[[\"$\",\"li\",\"About\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/about#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"About\",null]}]}]}],[\"$\",\"li\",\"App Store Button\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/appstore-button#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"App Store Button\",[\"$\",\"span\",null,{\"className\":\"ml-2 px-1.5 py-0.5 rounded-md text-[0.6rem] font-semibold bg-primary-500 text-white\",\"children\":\"New\"}]]}]}]}],[\"$\",\"li\",\"Band\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/band#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Band\",null]}]}]}],[\"$\",\"li\",\"Bento Grid\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/bento-grid#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Bento Grid\",null]}]}]}],[\"$\",\"li\",\"Blog List\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/blog-list#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Blog List\",null]}]}]}],[\"$\",\"li\",\"Blog Post\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/blog-post#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Blog Post\",null]}]}]}
147],[\"$\",\"li\",\"Cta Background Effects\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/primary-cta-effects#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Cta Background Effects\",null]}]}]}],[\"$\",\"li\",\"Cta Text Effects\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/primary-cta-text-effects#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Cta Text Effects\",null]}]}]}],[\"$\",\"li\",\"Discount\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/discount#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Discount\",null]}]}]}],[\"$\",\"li\",\"Faq\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/faq#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Faq\",null]}]}]}],[\"$\",\"li\",\"Faq Collapsible\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/faq-collapsible#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Faq Collapsible\",null]}]}]}],[\"$\",\"li\",\"Feature Key Points\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/feature-key-points#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Feature Key Points\",null]}]}]}],[\"$\",\"li\",\"Feature List\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/feature-list#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Feature List\",null]}]}]}],[\"$\",\"li\",\"Feature\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/feature#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Feature\",null]}]}]}],[\"$\",\"li\",\"Footer\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/footer#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Footer\",null]}]}]}],[\"$\",\"li\",\"Leading Pills\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/leading-pill#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Leading Pills\",[\"$\",\"span\",null,{\"className\":\"ml-2 px-1.5 py-0.5 rounded-md text-[0.6rem] font-semibold bg-primary-500 text-white\",\"children\":\"New\"}]]}]}]}],[\"$\",\"li\",\"Marquee\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/marquee#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Marquee\",null]}]}]}],[\"$\",\"li\",\"Navigation / Header\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/navigation#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Navigation / Header\",null]}]}]}],[\"$\",\"li\",\"Newsletter\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/newsletter#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Newsletter\",null]}]}]}],[\"$\",\"li\",\"Pricing\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/pricing#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Pricing\",null]}]}]}],[\"$\",\"li\",\"Pricing Plan\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/pricing-plan#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Pricing Plan\",null]}]}]}],[\"$\",\"li\",\"Pricing Comparison\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/pricing-comparison#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Pricing Comparison\",null]}]}]}],[\"$\",\"li\",\"Primary Image Cta\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/primary-image-cta#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Primary Image Cta\",null]}]}]}],[\"$\",\"li\",\"Primary Video Cta\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/primary-video-cta#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Primary Video Cta\",null]}]}]}],[\"$\",\"li\",\"Primary Text Cta\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/primary-text-cta#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Primary Text Cta\",null]}]}]}],[\"$\",\"li\",\"Problem Agitator\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/problem-agitator#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Problem Agitator\",null]}]}]}],[\"$\",\"li\",\"Problem Solution\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/problem-solution#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Problem Solution\",null]}]}]}],[\"$\",\"li\",\"Product Card\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/product-card#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Product Card\",[\"$\",\"span\",null,{\"className\":\"ml-2 px-1.5 py-0.5 rounded-md text-[0.6rem] font-semibold bg-primary-500 text-white\",\"children\":\"New\"}]]}]}]}],[\"$\",\"li\",\"Product Feature\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/product-feature#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Product Feature\",null]}]}]}],[\"$\",\"li\",\"Product Steps\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/product-steps#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Product Steps\",[\"$\",\"span\",null,{\"className\":\"ml-2 px-1.5 py-0.5 rounded-md text-[0.6rem] font-semibold bg-primary-500 text-white\",\"children\":\"New\"}]]}]}]}],[\"$\",\"li\",\"Product Video Feature\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/product-video-feature#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Product Video Feature\",null]}]}]}],[\"$\",\"li\",\"Product Features Grid\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/product-features-grid#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Product Features Grid\",null]}]}]}],[\"$\",\"li\",\"Product Tour\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/product-tour#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Product Tour\",null]}]}]}],[\"$\",\"li\",\"Product Hunt Award\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/product-hunt-award#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Product Hunt Award\",null]}]}]}],[\"$\",\"li\",\"Rating\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/rating#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Rating\",null]}]}]}],[\"$\",\"li\",\"Sale Cta\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/sale-cta#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Sale Cta\",null]}]}]}],[\"$\",\"li\",\"Showcase\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/showcase#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Showcase\",null]}]}]}],[\"$\",\"li\",\"Social Proof\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/social-proof#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Social Proof\",null]}]}]}],[\"$\",\"li\",\"Social Proof Band\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/social-proof-band#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Social Proof Band\",null]}]}]}],[\"$\",\"li\",\"Social Proof Band Item\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/social-proof-band-item#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Social Proof Band Item\",null]}]}]}],[\"$\",\"li\",\"Stats\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/stats#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Stats\",null]}]}]}],[\"$\",\"li\",\"Team\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/team#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Team\",null]}]}]}],[\"$\",\"li\",\"Testimonial Grid\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/testimonial-grid#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Testimonial Grid\",null]}]}]}],[\"$\",\"li\",\"Testimonial Inline\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/testimonial-inline#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Testimonial Inline\",null]}]}]}],[\"$\",\"li\",\"Testimonial Inline Item\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/testimonial-inline-item#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Testimonial Inline Item\",null]}]}]}],[\"$\",\"li\",\"Testimonial List\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/testimonial-list#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Testimonial List\",null]}]}]}],[\"$\",\"li\",\"Testimonial\",{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/landing-page-components/testimonial#main\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center\",\"children\":[\"Testimonial\",null]}]}]}]]}],\"exact\":false,\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"PostHub.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":[\"Landing Page Components\",[\"$\",\"span\",null,{\"className\":\"ml-2 px-1.5 py-0.5 rounded-md text-[0.6rem] font-semibold bg-primary-500 text-white\",\"children\":\"New\"}]]}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/boilerplate-documentation/ui-l
147ibrary#main\",\"className\":\"toc-link fancy-link fancy-link--no-underline\",\"activeClassName\":\"toc-active-link\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"PostHub.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"UI Library\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/boilerplate-documentation/icon-library#main\",\"className\":\"toc-link fancy-link fancy-link--no-underline\",\"activeClassName\":\"toc-active-link\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"PostHub.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"Icon Library\"}]}]}],[\"$\",\"li\",null,{\"className\":\"toc-separator\"}],[\"$\",\"li\",null,{\"className\":\"toc-title\",\"children\":[\"$\",\"h3\",null,{\"children\":\"Codebase \u0026 config\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/boilerplate-documentation/running-locally#main\",\"className\":\"toc-link fancy-link fancy-link--no-underline\",\"activeClassName\":\"toc-active-link\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"PostHub.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"Setting up locally\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/boilerplate-documentation/command-overview#main\",\"className\":\"toc-link fancy-link fancy-link--no-underline\",\"activeClassName\":\"toc-active-link\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"PostHub.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"Command overview\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/boilerplate-documentation/tour-of-the-codebase#main\",\"className\":\"toc-link fancy-link fancy-link--no-underline\",\"activeClassName\":\"toc-active-link\",\"activeChildren\":[\"$\",\"ul\",null,{\"className\":\"flex flex-col text-[13px] ml-3 mt-2\",\"data-sentry-component\":\"CodebaseFilelistNav\",\"data-sentry-source-file\":\"CodebaseFilelistNav.tsx\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/tour-of-the-codebase/contentlayer\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"CodebaseFilelistNav.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"📁 .contentlayer/\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/tour-of-the-codebase/husky\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"CodebaseFilelistNav.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"📁 .husky/\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/tour-of-the-codebase/next\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"CodebaseFilelistNav.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"📁 .next/\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/tour-of-the-codebase/vscode\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"CodebaseFilelistNav.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"📁 .vscode/\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/tour-of-the-codebase/app\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"CodebaseFilelistNav.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"📁 app/\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/tour-of-the-codebase/components\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"CodebaseFilelistNav.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"📁 components/\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/tour-of-the-codebase/css\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"CodebaseFilelistNav.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"📁 css/\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/tour-of-the-codebase/data\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"CodebaseFilelistNav.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"📁 data/\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/tour-of-the-codebase/demo\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"CodebaseFilelistNav.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"📁 demo/\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/tour-of-the-codebase/layouts\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"CodebaseFilelistNav.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"📁 layouts/\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/tour-of-the-codebase/lib\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"CodebaseFilelistNav.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"📁 lib/\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/tour-of-the-codebase/node-modules\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"CodebaseFilelistNav.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"📁 node_modules/\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/tour-of-the-codebase/public\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"CodebaseFilelistNav.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"📁 public/\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/tour-of-the-codebase/scripts\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"CodebaseFilelistNav.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"📁 scripts/\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/tour-of-the-codebase/env-example\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"CodebaseFilelistNav.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"📄 .env.example\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/tour-of-the-codebase/eslintignore\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"CodebaseFilelistNav.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"📄 .eslintignore\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/tour-of-the-codebase/eslintrc\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"CodebaseFilelistNav.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"📄 .eslintrc.js\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/tour-of-the-codebase/gitignore\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"CodebaseFilelistNav.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"📄 .gitignore\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/tour-of-the-codebase/prettierrc\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"CodebaseFilelistNav.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"📄 .prettierrc\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/tour-of-the-codebase/contentlayer-config\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"CodebaseFilelistNav.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"📄 contentlayer.config.ts\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/tour-of-the-codebase/jsonconfig\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"CodebaseFilelistNav.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"📄 jsconfig.json\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/tour-of-the-codebase/next-env\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"CodebaseFilelistNav.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"📄 next-env.d.ts\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/tour-of-the-codebase/nextconfig\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"CodebaseFilelistNav.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"📄 next.config.js\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/tour-of-the-codebase/package-json\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"CodebaseFilelistNav.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"📄 package.json\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/tour-of-the-codebase/postcssconfig\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"CodebaseFilelistNav.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"📄 postcss.config.js\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/tour-of-the-codebase/tailwindconfig\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"CodebaseFilelistNav.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"📄 tailwind.config.js\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"activeClassName\":\"text-primary-500\",\"href\":\"/boilerplate-documentation/tour-of-the-codebase/tsconfig\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"CodebaseFilelistNav.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"📄 tsconfig.json\"}]}]}]]}],\"exact\":false,\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"PostHub.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"Tour of the codebase\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/boilerplate-documentation/configuration#main\",\"className\":\"toc-link fancy-link fancy-link--no-underline\",\"activeClassName\":\"toc-active-link\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"PostHub.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"Configuration\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/boilerplate-documentation/adding-metas-to-a-page#main\",\"className\":\"toc-link fancy-link fancy-link--no-underline\",\"activeClassName\":\"toc-active-link\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"PostHub.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"Adding meta tags\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/boilerplate-documentation/changing-blog-all-articles-path#main\",\"className\":\"toc-link fancy-link fancy-link--no-underline\",\"activeClassName\":\"toc-active-link\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"PostHub.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"Changing article path\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/boilerplate-documentation/shipixen-cursor-rules-explained#main\",\"className\":\"toc-link fancy-link fancy-link--no-underline\",\"activeClassName\":\"toc-active-link\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"PostHub.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"Cursor rules\"}]}]}],[\"$\",\"li\",null,{\"className\":\"toc-separator\"}],[\"$\",\"li\",null,{\"className\":\"toc-title\",\"children\":[\"$\",\"h3\",null,{\"children\":\"Deployment\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/boilerplate-documentation/vercel-deploy-integration#main\",\"className\":\"toc-link fancy-link fancy-link--no-underline\",\"activeClassName\":\"toc-active-link\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"PostHub.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"Deploying to Vercel\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/boilerplate-documentation/netlify-deploy-integration#main\",\"className\":\"toc-link fancy-link fancy-link--no-underline\",\"activeClassName\":\"toc-active-link\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"PostHub.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"Deploying to Netlify\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/boilerplate-documentation/coolify-cloud-nextjs-deploy-integration#main\",\"className\":\"toc-link fancy-link fancy-link--no-underline\",\"activeClassName\":\"toc-active-link\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"PostHub.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"Deploying to Coolify Cloud\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/boilerplate-documentation/other-deployment-options#main\",\"className\":\"toc-link fancy-link fancy-link--no-underline\",\"activeClassName\":\"toc-active-link\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"PostHub.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"Other deployment options\"}]}]}],[\"$\",\"li\",null,{\"className\":\"toc-separator\"}],[\"$\",\"li\",null,{\"className\":\"toc-title\",\"children\":[\"$\",\"h3\",null,{\"children\":\"Troubleshooting\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/boilerplate-documentation/troubleshooting#main\",\"className\":\"toc-link fancy-link fancy-link--no-underline\",\"activeClassName\":\"toc-active-link\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"PostHub.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"Fixing common issues\"}]}]}],[\"$\",\"li\",null,{\"className\":\"toc-separator\"}],[\"$\",\"li\",null,{\"className\":\"toc-title\",\"children\":[\"$\",\"h3\",null,{\"children\":\"Analytics\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/boilerplate-documentation/analytics/setting-up-vercel-analytics#main\",\"className\":\"toc-link fancy-link fancy-link--no-underline\",\"activeClassName\":\"toc-active-link\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"PostHub.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"Install Vercel Analytics\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/boilerplate-documentation/analytics/setting-up-posthog-analytics#main\",\"className\":\"toc-link fancy-link fancy-link--no-underline\",\"activeClassName\":\"toc-active-link\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"PostHub.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"Install Posthog Analytics\"}]}]}],[\"$\",\"li\",null,{\"className\":\"toc-separator\"}],[\"$\",\"li\",null,{\"className\":\"toc-title\",\"children\":[\"$\",\"h3\",null,{\"children\":\"Advanced\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/boilerplate-documentation/building-a-knowledge-base-do
147cumentation-hub#main\",\"className\":\"toc-link fancy-link fancy-link--no-underline\",\"activeClassName\":\"toc-active-link\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"PostHub.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"Building a knowledge base/documentation hub\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/boilerplate-documentation/creating-a-layout#main\",\"className\":\"toc-link fancy-link fancy-link--no-underline\",\"activeClassName\":\"toc-active-link\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"PostHub.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"Adding a layout\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/boilerplate-documentation/adding-blog-components-and-pages#main\",\"className\":\"toc-link fancy-link fancy-link--no-underline\",\"activeClassName\":\"toc-active-link\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"PostHub.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"Setting up blog later\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/boilerplate-documentation/import-data/import-blog-posts-from-ghost#main\",\"className\":\"toc-link fancy-link fancy-link--no-underline\",\"activeClassName\":\"toc-active-link\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"PostHub.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"Migrate/import Ghost blog\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/boilerplate-documentation/import-data/blog-post-json-format#main\",\"className\":\"toc-link fancy-link fancy-link--no-underline\",\"activeClassName\":\"toc-active-link\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"PostHub.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"Migrate/import any blog\"}]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/boilerplate-documentation/helpful-tools-and-services#main\",\"className\":\"toc-link fancy-link fancy-link--no-underline\",\"activeClassName\":\"toc-active-link\",\"data-sentry-element\":\"ActiveLink\",\"data-sentry-source-file\":\"PostHub.tsx\",\"children\":[\"$\",\"span\",null,{\"children\":\"Other tools\"}]}]}]]}]]}],[\"$\",\"article\",null,{\"className\":\"order-2 lg:order-2 w-full lg:max-w-3xl 2xl:max-w-4xl 3xl:max-w-5xl !p-0 !m-0 shadow-lg\",\"children\":[[\"$\",\"div\",null,{\"className\":\"bg-white dark:bg-slate-900 lg:px-10 lg:py-4 divide-y divide-gray-200 dark:divide-gray-700 xl:col-span-3 xl:row-span-2 xl:pb-0\",\"children\":[[\"$\",\"header\",null,{\"className\":\"px-6 pt-6 pb-6 lg:px-0\",\"id\":\"main\",\"children\":[\"$\",\"div\",null,{\"className\":\"space-y-1\",\"children\":[[\"$\",\"div\",null,{\"children\":[\"$\",\"h1\",null,{\"className\":\"text-3xl font-semibold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-5xl md:leading-14\",\"data-sentry-component\":\"PageTitle\",\"data-sentry-source-file\":\"PageTitle.tsx\",\"children\":\"Writing blog posts: Shipixen blog crash course \u0026 Markdown cheatsheet\"}]}],[\"$\",\"dl\",null,{\"className\":\"space-y-10\",\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"dt\",null,{\"className\":\"sr-only\",\"children\":\"Updated on\"}],[\"$\",\"dd\",null,{\"className\":\"text-base font-medium leading-6 text-gray-500 dark:text-gray-400\",\"children\":[\"$\",\"time\",null,{\"dateTime\":\"2025-05-14T00:00:00.000Z\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-light\",\"children\":\"Last updated\"}],\" \",\"Wednesday, May 14, 2025\"]}]}]]}]}]]}]}],[\"$\",\"div\",null,{\"className\":\"prose max-w-none px-6 pb-8 pt-10 lg:px-0 dark:prose-invert overflow-hidden\",\"children\":[[\"$\",\"h2\",null,{\"id\":\"basics\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#basics\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"icon icon-link\"}]}],\"Basics\"]}],[\"$\",\"p\",null,{\"children\":[\"Posts on the Shipixen blog are written in Markdown and stored in the \",[\"$\",\"code\",null,{\"children\":\"/data\"}],\" directory. The blog is generated using \",[\"$\",\"a\",null,{\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://nextjs.org/\",\"children\":\"Next.js\",\"data-sentry-component\":\"CustomLink\",\"data-sentry-source-file\":\"Link.tsx\"}],\" and \",[\"$\",\"a\",null,{\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://mdxjs.com/docs/\",\"children\":\"MDX\",\"data-sentry-component\":\"CustomLink\",\"data-sentry-source-file\":\"Link.tsx\"}],\".\"]}],[\"$\",\"p\",null,{\"children\":[\"To add a new post, create a new \",[\"$\",\"code\",null,{\"children\":\".mdx\"}],\" file in the \",[\"$\",\"code\",null,{\"children\":\"/data\"}],\" directory.\"]}],[\"$\",\"p\",null,{\"children\":\"MDX lets you use JSX in your markdown content. You can import components, such as interactive charts or alerts, and embed them within your content. This makes writing long-form content with components a blast.\"}],[\"$\",\"h3\",null,{\"id\":\"creating-a-post\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#creating-a-post\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"icon icon-link\"}]}],\"Creating a post\"]}],[\"$\",\"p\",null,{\"children\":[\"Adding an article to a blog generated 
147with Shipixen is as simple as creating a Markdown (.mdx) file in the \",[\"$\",\"code\",null,{\"children\":\"data\"}],\" directory. The file name is used as the slug for the article.\"]}],[\"$\",\"p\",null,{\"children\":\"After you created the article, you should set the Frontmatter and then you're off to the races.\"}],[\"$\",\"p\",null,{\"children\":\"The Frontmatter of the file is used to populate the article's metadata, such as title, summary or images. Let's look at some Frontmatter examples.\"}],[\"$\",\"h4\",null,{\"id\":\"blog-post-example\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#blog-post-example\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"icon icon-link\"}]}],\"Blog post example\"]}],[\"$\",\"p\",null,{\"children\":\"Here is an example of a blog post with Frontmatter:\"}],[\"$\",\"$L1f\",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\":\"title\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'Release Notes'\"}],\"\\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\":\"date\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'2024-11-12'\"}],\"\\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\":\"tags\"}],[\"$\",\"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 punctuation\",\"children\":\"-\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'release-notes'\"}],\"\\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 punctuation\",\"children\":\"-\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'updates'\"}],\"\\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 punctuation\",\"children\":\"-\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'changelog'\"}],\"\\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\":\"\\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\":\"images\"}],[\"$\",\"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 punctuation\",\"children\":\"-\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'/static/images/release.webp'\"}],\"\\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 punctuation\",\"children\":\"-\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'/static/images/release-2.webp'\"}],\"\\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\":\"\\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\":\"summary\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'See what is new in the product'\"}],\"\\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\":\"layout\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\":\"}],\" PostSimple\"]}],\"\\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\":[[\"$\",\"span\",null,{\"className\":\"token important title\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"##\"}],\" Release Notes\"]}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"This page contains the release notes for the product.\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token important title\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"###\"}
147],\" Version 1.0.0\"]}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation list\",\"children\":\"-\"}],\" Added new feature\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation list\",\"children\":\"-\"}],\" Fixed bug\\n\"]}]]}]}],[\"$\",\"div\",null,{\"className\":\"relative overflow-hidden flex flex-col text-sm p-6 bg-primary-100/30 dark:bg-purple-900/30 rounded-md\",\"data-sentry-component\":\"Protip\",\"data-sentry-source-file\":\"Protip.tsx\",\"children\":[null,[\"$\",\"p\",null,{\"className\":\"flex gap-1 my-2 relative z-10\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-sparkles absolute opacity-20 -right-4 -top-9 -z-10 flex-shrink-0 inline-block w-8 h-8 rotate-12 text-primary-500 dark:text-primary-400\",\"children\":[[\"$\",\"path\",\"4pj2yx\",{\"d\":\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\"}],[\"$\",\"path\",\"1olli1\",{\"d\":\"M20 3v4\"}],[\"$\",\"path\",\"1gvqau\",{\"d\":\"M22 5h-4\"}],[\"$\",\"path\",\"vumght\",{\"d\":\"M4 17v2\"}],[\"$\",\"path\",\"zchphs\",{\"d\":\"M5 18H3\"}],\"$undefined\"]}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-sparkles absolute opacity-20 right-0 -bottom-10 -z-10 flex-shrink-0 inline-block w-14 h-14 rotate-12 text-primary-500 dark:text-primary-400\",\"children\":[[\"$\",\"path\",\"4pj2yx\",{\"d\":\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\"}],[\"$\",\"path\",\"1olli1\",{\"d\":\"M20 3v4\"}],[\"$\",\"path\",\"1gvqau\",{\"d\":\"M22 5h-4\"}],[\"$\",\"path\",\"vumght\",{\"d\":\"M4 17v2\"}],[\"$\",\"path\",\"zchphs\",{\"d\":\"M5 18H3\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"className\":\"relative z-10\",\"children\":[\"Out of inspiration? You can use the \",[\"$\",\"a\",null,{\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://founderpal.ai/blog-ideas-generator\",\"children\":\"Blog Post Generator\",\"data-sentry-component\":\"CustomLink\",\"data-sentry-source-file\":\"Link.tsx\"}],\" to generate blog posts or outlines quickly!\"]}]]}],null]}],[\"$\",\"h4\",null,{\"id\":\"frontmatter\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#frontmatter\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"icon icon-link\"}]}],\"Frontmatter\"]}],[\"$\",\"p\",null,{\"children\":[\"So what is frontmatter? \",[\"$\",\"br\",null,{}],\"Frontmatter is a block of metadata at the top of a file that is used to populate the article's metadata. It is written in YAML format. Here's an example of frontmatter:\"]}],[\"$\",\"$L1f\",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\":\"'Blog post title'\"}],\"\\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\":\"'A short summary of the article'\"}],\"\\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\":\"tags\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\":\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\"  \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"-\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'next-js'\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\"  \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"-\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'tailwind'\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\"  \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"-\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'guide'\"}],\"\\n\"]}]]}]}],[\"$\",\"p\",null,{\"children\":\"That's just the basics, but there are more fields available. Here's a full list of all the fields that can be used in the frontmatter:\"}],[\"$\",\"$L1f\",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\":\"'Blog post title'\"}],\"\\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\":\"'A short summary of the article'\"}],\"\\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\":\"tags\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\":\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\"  \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"-\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'next-js'\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\"  \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"-\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'tailwind'\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\"  \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"-\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'guide'\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"# Optional fields\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token atrule key\",\"children\":\"lastmod\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'2021-02-01'\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token atrule key\",\"children\":\"images\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\":\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\"  \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"-\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'/static/images/backdrop-1.jpg'\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\"  \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"-\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'/static/images/backdrop-2.jpg'\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token atrule key\",\"children\":\"authors\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\":\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\"  \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"-\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'josh'\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\"  \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"-\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'jane'\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"# more authors can be defined under data/authors by creating a new .md file\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token atrule key\",\"children\":\"layout\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'PostLayout'\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"# 3 layouts are available: PostLayout (default) or PostBanner or PostSimple\"}],\"\\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 important boolean\",\"children\":\"false\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"# Set to true to hide the article from the blog\"}],\"\\n\"]}]]}]}],[\"$\",\"h4\",null,{\"id\":\"more-about-frontmatter\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#more-about-frontmatter\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"icon icon-link\"}]}],\"More about Frontmatter\"]}
147],[\"$\",\"p\",null,{\"children\":[\"Frontmatter follows \",[\"$\",\"a\",null,{\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://gohugo.io/content-management/front-matter/\",\"children\":\"Hugo's standards\",\"data-sentry-component\":\"CustomLink\",\"data-sentry-source-file\":\"Link.tsx\"}],\".\"]}],[\"$\",\"p\",null,{\"children\":[\"Please refer to \",[\"$\",\"code\",null,{\"children\":\"contentlayer.config.ts\"}],\" for an up to date list of supported fields. The following fields are supported:\"]}],[\"$\",\"$L1f\",null,{\"className\":\"language-js\",\"children\":[\"$\",\"code\",null,{\"className\":\"language-js code-highlight\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"title\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"required\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"date\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"required\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"tags\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"optional\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"lastmod\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"optional\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"draft\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"optional\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"summary\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"optional\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"images\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"optional\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"authors\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"optional list which should correspond to the file names \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"in\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token template-string\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token string template-punctuation\",\"children\":\"`\"}],[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"data/authors\"}],[\"$\",\"span\",null,{\"className\":\"token string template-punctuation\",\"children\":\"`\"}]]}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token property-access\",\"children\":[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"Uses\"}]}],\" \",[\"$\",\"span\",null,{\"className\":\"token template-string\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token string template-punctuation\",\"children\":\"`\"}],[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"default\"}],[\"$\",\"span\",null,{\"className\":\"token string template-punctuation\",\"children\":\"`\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword control-flow\",\"children\":\"if\"}],\" none is specified\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"layout\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"optional list which should correspond to the file names \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"in\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token template-string\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token string template-punctuation\",\"children\":\"`\"}],[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"data/layouts\"}],[\"$\",\"span\",null,{\"className\":\"token string template-punctuation\",\"children\":\"`\"}]]}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"canonicalUrl\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"optional\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" canonical url \",[\"$\",\"span\",null,{\"className\":\"token keyword control-flow\",\"children\":\"for\"}],\" the post \",[\"$\",\"span\",null,{\"className\":\"token keyword control-flow\",\"children\":\"for\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token constant\",\"children\":\"SEO\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\"\\n\"]}]]}]}],[\"$\",\"h3\",null,{\"id\":\"layouts\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#layouts\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"icon icon-link\"}]}],\"Layouts\"]}],[\"$\",\"p\",null,{\"children\":[\"There are currently 4 post layouts available: \",[\"$\",\"code\",null,{\"children\":\"PostLayout\"}],\", \",[\"$\",\"code\",null,{\"children\":\"PostLayoutWithToc\"}],\", \",[\"$\",\"code\",null,{\"children\":\"PostSimple\"}],\" and \",[\"$\",\"code\",null,{\"children\":\"PostBanner\"}],\".\"]}],[\"$\",\"ul\",null,{\"children\":[[\"$\",\"li\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"PostLayout\"}],\" is the default 2 column layout with meta and author information.\"]}],[\"$\",\"li\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"PostLayoutWithToc\"}],\" is a layout that displays a blog post with a table of contents.\"]}],[\"$\",\"li\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"PostSimple\"}],\" is a simplified version of \",[\"$\",\"code\",null,{\"children\":\"PostLayout\"}]]}],[\"$\",\"li\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"PostBanner\"}],\" features a banner image.\"]}]]}],[\"$\",\"div\",null,{\"className\":\"grid md:grid-cols-2 gap-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-1\",\"children\":[[\"$\",\"p\",null,{\"className\":\"m-0 font-semibold\",\"children\":\"Post layout (default)\"}],[\"$\",\"div\",null,{\"className\":\"rounded-md shadow-md border border-gray-500/10 overflow-hidden relative\",\"children\":[\"$\",\"img\",null,{\"src\":\"/static/images/blog/docs/shipixen-blog-default-layout.webp\",\"alt\":\"Shipixen Default Post Layout\",\"className\":\"m-0\"}]}],[\"$\",\"a\",null,{\"className\":\"text-sm m-0\",\"href\":\"https://dataharborpro.vercel.app/using-the-blog\",\"children\":[\"$\",\"span\",null,{\"children\":\"Live example of default layout ↗\"}]}]]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"p\",null,{\"className\":\"m-0 font-semibold\",\"children\":\"Simple layout\"}],[\"$\",\"div\",null,{\"className\":\"rounded-md shadow-md border border-gray-500/10 overflow-hidden\",\"children\":[\"$\",\"img\",null,{\"src\":\"/static/images/blog/docs/shipixen-blog-simple-layout.webp\",\"alt\":\"Shipixen Simple Post Layout\",\"className\":\"m-0\"}]}],[\"$\",\"a\",null,{\"className\":\"text-sm m-0\",\"href\":\"https://dataharborpro.vercel.app/pictures\",\"children\":[\"$\",\"span\",null,{\"children\":\"Live example of simple layout ↗\"}]}]]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"p\",null,{\"className\":\"m-0 font-semibold\",\"children\":\"Banner layout\"}],[\"$\",\"div\",null,{\"className\":\"rounded-md shadow-md border border-gray-500/10 overflow-hidden\",\"children\":[\"$\",\"img\",null,{\"src\":\"/static/images/blog/docs/shipixen-blog-banner-layout.webp\",\"alt\":\"Shipixen Banner Post Layout\",\"className\":\"m-0\"}]}],[\"$\",\"a\",null,{\"className\":\"text-sm m-0\",\"href\":\"https://dataharborpro.vercel.app/code\",\"children\":[\"$\",\"span\",null,{\"children\":\"Live example of banner layout ↗\"}]}]]}]]}],[\"$\",\"p\",null,{\"children\":\"It's possible to create multiple layouts and turn the blog into anything you want: from a minimalistic image gallery to a documentation site.\"}],[\"$\",\"p\",null,{\"children\":[\"Read more about \",[\"$\",\"$Le\",null,{\"prefetch\":false,\"href\":\"/boilerplate-documentation/creating-a-layout\",\"children\":\"creating custom layouts\"}],\".\"]}],[\"$\",\"h2\",null,{\"id\":\"introduction-to-mdx\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#introduction-to-mdx\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"icon icon-link\"}]}],\"Introduction to MDX\"]}],[\"$\",\"p\",null,{\"children\":[\"Markdown and Mdx parsing is supported via \",[\"$\",\"code\",null,{\"children\":\"unified\"}],\", and other remark and rehype packages. \",[\"$\",\"code\",null,{\"children\":\"next-mdx-remote\"}],\" allows us to parse \",[\"$\",\"code\",null,{\"children\":\".mdx\"}],\" and \",[\"$\",\"code\",null,{\"children\":\".md\"}],\" files in a more flexible manner without touching webpack.\"]}],[\"$\",\"p\",null,{\"children\":[\"GitHub flavored markdown is used. \",[\"$\",\"code\",null,{\"children\":\"mdx-prism\"}],\" provides syntax highlighting capabilities for code blocks.\"]}],[\"$\",\"p\",null,{\"children\":[\"The following markdown cheatsheet is adapted from: \",[\"$\",\"a\",null,{\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://guides.github.com/features/mastering-markdown/\",\"children\":\"https://guides.github.com/features/mastering-markdown/\",\"data-sentry-component\":\"CustomLink\",\"data-sentry-source-file\":\"Link.tsx\"}]]}],[\"$\",\"h3\",null,{\"id\":\"what-is-markdown\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#what-is-markdown\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"icon icon-link\"}]}],\"What is Markdown?\"]}],[\"$\",\"p\",null,{\"children\":[\"Markdown is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown. Mostly, Markdown is just regular text with a few non-alphabetic characters thrown in, like \",[\"$\",\"code\",null,{\"children\":\"#\"}],\" or \",[\"$\",\"code\",null,{\"children\":\"*\"}],\".\"]}],[\"$\",\"p\",null,{\"children\":[\"See the \",[\"$\",\"a\",null,{\"href\":\"#syntax-guide\",\"children\":\"Syntax guide\"}],\" for a complete reference.\"]}],[\"$\",\"h3\",null,{\"id\":\"nested-routes\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#nested-routes\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"icon icon-link\"}]}],\"Nested Routes\"]}],[\"$\",\"p\",null,{\"children\":\"The blog template supports posts in nested sub-folders. This helps in organisation and can be used to group posts of similar content e.g. a multi-part series.\"}],[\"$\",\"p\",null,{\"children\":[\"For example, if you create a file at \",[\"$\",\"code\",null,{\"children\":\"/data/nested-route/my-post.mdx\"}],\", the post will be available at \",[\"$\",\"code\",null,{\"children\":\"/nested-route/my-post\"}],\".\"]}],[\"$\",\"h3\",null,{\"id\":\"table-of-contents\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#table-of-contents\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"icon icon-link\"}]}],\"Table of Contents\"]}],[\"$\",\"p\",null,{\"children\":[\"The \",[\"$\",\"code\",null,{\"children\":\"TOCInline\"}],\" component can be dropped into any post to generate a table of contents.\"]}],[\"$\",\"p\",null,{\"children\":\"For example, the TOC in this post was generated 
147with the following code:\"}],[\"$\",\"$L1f\",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.\"}],[\"$\",\"$L1f\",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 pt-2 pb-2 text-xl font-bold\",\"children\":\"Table of Contents\"}],[\"$\",\"div\",null,{\"className\":\"ml-6\",\"children\":[\"$\",\"ul\",null,{\"children\":[[\"$\",\"li\",\"Basics\",{\"className\":\"false\",\"children\":[\"$\",\"a\",null,{\"href\":\"#basics\",\"children\":\"Basics\"}]}],[\"$\",\"li\",\"Introduction to MDX\",{\"className\":\"false\",\"children\":[\"$\",\"a\",null,{\"href\":\"#introduction-to-mdx\",\"children\":\"Introduction to MDX\"}]}],[\"$\",\"li\",\"Next steps\",{\"className\":\"false\",\"children\":[\"$\",\"a\",null,{\"href\":\"#next-steps\",\"children\":\"Next steps\"}]}]]}]}]]}],[\"$\",\"$L1f\",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 attr-name\",\"children\":\"collapse\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],\"\\n\"]}]}]}],[\"$\",\"details\",null,{\"open\":false,\"children\":[[\"$\",\"summary\",null,{\"className\":\"ml-6 pt-2 pb-2 text-xl font-bold\",\"children\":\"Table of Contents\"}],[\"$\",\"div\",null,{\"className\":\"ml-6\",\"children\":[\"$\",\"ul\",null,{\"children\":[[\"$\",\"li\",\"Basics\",{\"className\":\"false\",\"children\":[\"$\",\"a\",null,{\"href\":\"#basics\",\"children\":\"Basics\"}]}],[\"$\",\"li\",\"Creating a post\",{\"className\":\"ml-6\",\"children\":[\"$\",\"a\",null,{\"href\":\"#creating-a-post\",\"children\":\"Creating a post\"}]}],[\"$\",\"li\",\"Blog post example\",{\"className\":\"ml-6\",\"children\":[\"$\",\"a\",null,{\"href\":\"#blog-post-example\",\"children\":\"Blog post example\"}]}],[\"$\",\"li\",\"Frontmatter\",{\"className\":\"ml-6\",\"children\":[\"$\",\"a\",null,{\"href\":\"#frontmatter\",\"children\":\"Frontmatter\"}]}],[\"$\",\"li\",\"More about Frontmatter\",{\"className\":\"ml-6\",\"children\":[\"$\",\"a\",null,{\"href\":\"#more-about-frontmatter\",\"children\":\"More about Frontmatter\"}]}],[\"$\",\"li\",\"Layouts\",{\"className\":\"ml-6\",\"children\":[\"$\",\"a\",null,{\"href\":\"#layouts\",\"children\":\"Layouts\"}]}],[\"$\",\"li\",\"Introduction to MDX\",{\"className\":\"false\",\"children\":[\"$\",\"a\",null,{\"href\":\"#introduction-to-mdx\",\"children\":\"Introduction to MDX\"}]}],[\"$\",\"li\",\"What is Markdown?\",{\"className\":\"ml-6\",\"children\":[\"$\",\"a\",null,{\"href\":\"#what-is-markdown\",\"children\":\"What is Markdown?\"}]}],[\"$\",\"li\",\"Nested Routes\",{\"className\":\"ml-6\",\"children\":[\"$\",\"a\",null,{\"href\":\"#nested-routes\",\"children\":\"Nested Routes\"}]}],[\"$\",\"li\",\"Table of Contents\",{\"className\":\"ml-6\",\"children\":[\"$\",\"a\",null,{\"href\":\"#table-of-contents\",\"children\":\"Table of Contents\"}]}],[\"$\",\"li\",\"How\",{\"className\":\"ml-6\",\"children\":[\"$\",\"a\",null,{\"href\":\"#how\",\"children\":\"How\"}]}],[\"$\",\"li\",\"Syntax guide\",{\"className\":\"ml-6\",\"children\":[\"$\",\"a\",null,{\"href\":\"#syntax-guide\",\"children\":\"Syntax guide\"}]}],[\"$\",\"li\",\"Headers\",{\"className\":\"ml-6\",\"children\":[\"$\",\"a\",null,{\"href\":\"#headers\",\"children\":\"Headers\"}]}],[\"$\",\"li\",\"Emphasis\",{\"className\":\"ml-6\",\"children\":[\"$\",\"a\",null,{\"href\":\"#emphasis\",\"children\":\"Emphasis\"}]}],[\"$\",\"li\",\"Lists\",{\"className\":\"ml-6\",\"children\":[\"$\",\"a\",null,{\"href\":\"#lists\",\"children\":\"Lists\"}]}],[\"$\",\"li\",\"Unordered\",{\"className\":\"ml-6\",\"children\":[\"$\",\"a\",null,{\"href\":\"#unordered\",\"children\":\"Unordered\"}]}],[\"$\",\"li\",\"Ordered\",{\"className\":\"ml-6\",\"children\":[\"$\",\"a\",null,{\"href\":\"#ordered\",\"children\":\"Ordered\"}]}],[\"$\",\"li\",\"Images\",{\"className\":\"ml-6\",\"children\":[\"$\",\"a\",null,{\"href\":\"#images\",\"children\":\"Images\"}]}],[\"$\",\"li\",\"Links\",{\"className\":\"ml-6\",\"children\":[\"$\",\"a\",null,{\"href\":\"#links\",\"children\":\"Links\"}]}],[\"$\",\"li\",\"Blockquotes\",{\"className\":\"ml-6\",\"children\":[\"$\",\"a\",null,{\"href\":\"#blockquotes\",\"children\":\"Blockquotes\"}]}],[\"$\",\"li\",\"Inline code\",{\"className\":\"ml-6\",\"children\":[\"$\",\"a\",null,{\"href\":\"#inline-code\",\"children\":\"Inline code\"}]}],[\"$\",\"li\",\"Syntax highlighting\",{\"className\":\"ml-6\",\"children\":[\"$\",\"a\",null,{\"href\":\"#syntax-highlighting\",\"children\":\"Syntax highlighting\"}]}],[\"$\",\"li\",\"Line diffing and highlighting\",{\"className\":\"ml-6\",\"children\":[\"$\",\"a\",null,{\"href\":\"#line-diffing-and-highlighting\",\"children\":\"Line diffing and highlighting\"}]}],[\"$\",\"li\",\"Footnotes\",{\"className\":\"ml-6\",\"children\":[\"$\",\"a\",null,{\"href\":\"#footnotes\",\"children\":\"Footnotes\"}]}],[\"$\",\"li\",\"Task Lists\",{\"className\":\"ml-6\",\"children\":[\"$\",\"a\",null,{\"href\":\"#task-lists\",\"children\":\"Task Lists\"}]}],[\"$\",\"li\",\"Tables\",{\"className\":\"ml-6\",\"children\":[\"$\",\"a\",null,{\"href\":\"#tables\",\"children\":\"Tables\"}]}],[\"$\",\"li\",\"Strikethrough\",{\"className\":\"ml-6\",\"children\":[\"$\",\"a\",null,{\"href\":\"#strikethrough\",\"children\":\"Strikethrough\"}]}],[\"$\",\"li\",\"Next steps\",{\"className\":\"false\",\"children\":[\"$\",\"a\",null,{\"href\":\"#next-steps\",\"children\":\"Next steps\"}]}]]}]}]]}],[\"$\",\"h4\",null,{\"id\":\"how\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#how\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"icon icon-link\"}]}],\"How\"]}],[\"$\",\"p\",null,{\"children\":[\"Simplify create multiple folders inside the main \",[\"$\",\"code\",null,{\"children\":\"/data\"}],\" folder and add your \",[\"$\",\"code\",null,{\"children\":\".md\"}],\"/\",[\"$\",\"code\",null,{\"children\":\".mdx\"}],\" files to them. You can even create something like \",[\"$\",\"code\",null,{\"children\":\"/data/nested-route/deeply-nested-route/my-post.md\"}]]}],[\"$\",\"h3\",null,{\"id\":\"syntax-guide\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#syntax-guide\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"icon icon-link\"}]}],\"Syntax guide\"]}],[\"$\",\"p\",null,{\"children\":\"Here’s an overview of Markdown syntax that you can use anywhere on GitHub.com or in your own text files.\"}],[\"$\",\"h4\",null,{\"id\":\"headers\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#headers\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"icon icon-link\"}]}],\"Headers\"]}],[\"$\",\"$L1f\",null,{\"className\":\"language-js\",\"children\":[\"$\",\"code\",null,{\"className\":\"language-js code-highlight\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\"# \",[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"This\"}],\" is a h1 tag\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\"## \",[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"This\"}],\" is a h2 tag\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\"#### \",[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"This\"}],\" is a h4 tag\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}]]}]}],[\"$\",\"h4\",null,{\"id\":\"emphasis\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#emphasis\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"icon icon-link\"}]}],\"Emphasis\"]}],[\"$\",\"$L1f\",null,{\"className\":\"language-js\",\"children\":[\"$\",\"code\",null,{\"className\":\"language-js code-highlight\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"_This text will be italic_\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"**\"}],[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"This\"}],\" text will be bold\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"**\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\"_You \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"**\"}],\"can\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"**\"}],\" combine them_\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}]]}]}],[\"$\",\"p\",null,{\"children\":[\"$\",\"em\",null,{\"children\":\"This text will be italic\"}]}],[\"$\",\"p\",null,{\"children\":[\"$\",\"strong\",null,{\"children\":\"This text will be bold\"}]}],[\"$\",\"p\",null,{\"children\":[\"$\",\"em\",null,{\"children\":[\"You \",[\"$\",\"strong\",null,{\"children\":\"can\"}],\" combine them\"]}]}],[\"$\",\"h4\",null,{\"id\":\"lists\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#lists\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"icon icon-link\"}]}],\"Lists\"]}],[\"$\",\"h5\",null,{\"id\":\"unordered\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#unordered\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"icon icon-link\"}]}],\"Unordered\"]}],[\"$\",\"$L1f\",null,{\"className\":\"language-js\",\"children\":[\"$\",\"code\",null,{\"className\":\"language-js code-highlight\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"-\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"Item\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"1\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"-\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"Item\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"2\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\"  \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"-\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"Item\"}],\" 2a\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\"  \",[\"$\",\"s
147pan\",null,{\"className\":\"token operator\",\"children\":\"-\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"Item\"}],\" 2b\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}]]}]}],[\"$\",\"ul\",null,{\"children\":[[\"$\",\"li\",null,{\"children\":\"Item 1\"}],[\"$\",\"li\",null,{\"children\":[\"Item 2\",[\"$\",\"ul\",null,{\"children\":[[\"$\",\"li\",null,{\"children\":\"Item 2a\"}],[\"$\",\"li\",null,{\"children\":\"Item 2b\"}]]}]]}]]}],[\"$\",\"h5\",null,{\"id\":\"ordered\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#ordered\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"icon icon-link\"}]}],\"Ordered\"]}],[\"$\",\"$L1f\",null,{\"className\":\"language-js\",\"children\":[\"$\",\"code\",null,{\"className\":\"language-js code-highlight\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"1.\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"Item\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"1\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"1.\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"Item\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"2\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"1.\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"Item\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"3\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\"   \",[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"1.\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"Item\"}],\" 3a\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\"   \",[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"1.\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"Item\"}],\" 3b\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}]]}]}],[\"$\",\"ol\",null,{\"children\":[[\"$\",\"li\",null,{\"children\":\"Item 1\"}],[\"$\",\"li\",null,{\"children\":\"Item 2\"}],[\"$\",\"li\",null,{\"children\":[\"Item 3\",[\"$\",\"ol\",null,{\"children\":[[\"$\",\"li\",null,{\"children\":\"Item 3a\"}],[\"$\",\"li\",null,{\"children\":\"Item 3b\"}]]}]]}]]}],[\"$\",\"h4\",null,{\"id\":\"images\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#images\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"icon icon-link\"}]}],\"Images\"]}],[\"$\",\"$L1f\",null,{\"className\":\"language-js\",\"children\":[\"$\",\"code\",null,{\"className\":\"language-js code-highlight\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"!\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"[\"}],[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"GitHub\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"Logo\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"]\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"https\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"/\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"/\"}],\"github\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token property-access\",\"children\":\"githubassets\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token property-access\",\"children\":\"com\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"/\"}],\"images\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"/\"}],\"modules\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"/\"}],\"logos_page\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"/\"}],[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"GitHub\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"-\"}],[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"Mark\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token property-access\",\"children\":\"png\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token literal-property property\",\"children\":\"Format\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"!\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"[\"}],[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"Alt\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"Text\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"]\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"url\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}]]}]}],[\"$\",\"p\",null,{\"children\":[\"$\",\"img\",null,{\"alt\":\"GitHub Logo\",\"src\":\"https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png\"}]}],[\"$\",\"h4\",null,{\"id\":\"links\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#links\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"icon icon-link\"}]}],\"Links\"]}],[\"$\",\"$L1f\",null,{\"className\":\"language-js\",\"children\":[\"$\",\"code\",null,{\"className\":\"language-js code-highlight\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token literal-property property\",\"children\":\"http\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"/\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"/\"}],\"github\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token property-access\",\"children\":\"com\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"-\"}],\" automatic\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"!\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"[\"}],[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"GitHub\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"]\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"http\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"/\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"/\"}],\"github\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token property-access\",\"children\":\"com\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}]]}]}],[\"$\",\"p\",null,{\"children\":[[\"$\",\"a\",null,{\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"http://github.com\",\"children\":\"http://github.com\",\"data-sentry-component\":\"CustomLink\",\"data-sentry-source-file\":\"Link.tsx\"}],\" - automatic! \",[\"$\",\"a\",null,{\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"http://github.com\",\"children\":\"GitHub\",\"data-sentry-component\":\"CustomLink\",\"data-sentry-source-file\":\"Link.tsx\"}]]}],[\"$\",\"h4\",null,{\"id\":\"blockquotes\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#blockquotes\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"icon icon-link\"}]}],\"Blockquotes\"]}],[\"$\",\"$L1f\",null,{\"className\":\"language-js\",\"children\":[\"$\",\"code\",null,{\"className\":\"language-js code-highlight\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"As\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"Kanye\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"West\"}],\" said\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"\u003e\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"We\"}],\"'re living the future so\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"\u003e\"}],\" the present is our past\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}]]}]}],[\"$\",\"p\",null,{\"children\":\"As Kanye West said:\"}],[\"$\",\"blockquote\",null,{\"children\":[\"$\",\"p\",null,{\"children\":\"We're living the future so the present is our past.\"}]}],[\"$\",\"h4\",null,{\"id\":\"inline-code\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#inline-code\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"icon icon-link\"}]}],\"Inline code\"]}],[\"$\",\"$L1f\",null,{\"className\":\"language-js\",\"children\":[\"$\",\"code\",null,{\"className\":\"language-js code-highlight\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token constant\",\"children\":\"I\"}],\" think you should use an\\n\"]}],[\"$\",\"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\",\"children\":\"\u003caddr\u003e\"}],[\"$\",\"span\",null,{\"className\":\"token string template-punctuation\",\"children\":\"`\"}]]}],\" element here instead\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}]]}]}],[\"$\",\"p\",null,{\"children\":[\"I think you should use an \",[\"$\",\"code\",null,{\"children\":\"\u003caddr\u003e\"}],\" element here instead.\"]}],[\"$\",\"h3\",null,{\"id\":\"syntax-highlighting\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#syntax-highlighting\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"icon icon-link\"}]}],\"Syntax highlighting\"]}],[\"$\",\"p\",null,{\"children\":[\"Here’s an example of how you can use syntax highlighting with \",[\"$\",\"a\",null,{\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://help.github.com/articles/basic-writing-and-formatting-syntax/\",\"children\":\"GitHub Flavored Markdown\",\"data-sentry-component\":\"CustomLink\",\"data-sentry-source-file\":\"Link.tsx\"}],\":\"]}],[\"$\",\"$L1f\",null,{\"className\":\"language-js\",\"children\":[\"$\",\"code\",null,{\"className\":\"language-js code-highlight\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}],[\"$\",\"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\":\"`\"}]]}],\"`js\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\"fancyAlert\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token property-access\",\"children\":\"js\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"function\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"fancyAlert\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token parameter\",\"children\":\"arg\"}],[\"$\",\"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\":\"if\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"arg\",[\"$\",\"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 function property-access method\",\"children\":\"facebox\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token literal-property property\",\"children\":\"div\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'#foo'\"}],\" \",[\"$\",\"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\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\"\\n\"]}]]}]}],[\"$\",\"p\",null,{\"children\":\"And here's how it looks - nicely colored with styled code titles!\"}],[\"$\",\"div\",null,{\"className\":\"remark-code-title\",\"children\":\"fancyAlert.js\"}],[\"$\",\"$L1f\",null,{\"className\":\"language-js\",\"children\":[\"$\",\"code\",null,{\"className\":\"language-js code-highlight\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"function\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"fancyAlert\"}],[\"$\",\
147"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token parameter\",\"children\":\"arg\"}],[\"$\",\"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\":\"if\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"arg\",[\"$\",\"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 function property-access method\",\"children\":\"facebox\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token literal-property property\",\"children\":\"div\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'#foo'\"}],\" \",[\"$\",\"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\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\"\\n\"]}]]}]}],[\"$\",\"h3\",null,{\"id\":\"line-diffing-and-highlighting\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#line-diffing-and-highlighting\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"icon icon-link\"}]}],\"Line diffing and highlighting\"]}],[\"$\",\"p\",null,{\"children\":[\"It is possible to show added/removed lines by using the \",[\"$\",\"code\",null,{\"children\":\"diff\"}],\" language tag. For example 'diff-js', 'diff-jsx', 'diff-html', 'diff-css', 'diff-scss', 'diff-md' etc.\"]}],[\"$\",\"p\",null,{\"children\":\"The, add a plus for added lines and a minus for removed lines.\"}],[\"$\",\"$L1f\",null,{\"className\":\"language-js\",\"children\":[\"$\",\"code\",null,{\"className\":\"language-js code-highlight\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}],[\"$\",\"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\":\"`\"}]]}],\"`diff\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"-\"}],\"js\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\"fancyAlert\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token property-access\",\"children\":\"js\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"function\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"fancyAlert\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token parameter\",\"children\":\"arg\"}],[\"$\",\"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\":\"if\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"arg\",[\"$\",\"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 function property-access method\",\"children\":\"facebox\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token literal-property property\",\"children\":\"div\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'#foo'\"}],\" \",[\"$\",\"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\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\"\\n\"]}]]}]}],[\"$\",\"p\",null,{\"children\":\"And here's how it looks - nicely colored with styled code titles!\"}],[\"$\",\"div\",null,{\"className\":\"remark-code-title\",\"children\":\"fancyAlert.js\"}],[\"$\",\"$L1f\",null,{\"className\":\"language-js\",\"children\":[\"$\",\"code\",null,{\"className\":\"code-highlight language-diff-js\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"function\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"fancyAlert\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token parameter\",\"children\":\"arg\"}],[\"$\",\"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\":\"if\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"arg\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line deleted\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"-\"}],\"   $\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token function property-access method\",\"children\":\"facebox\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token literal-property property\",\"children\":\"div\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'#foo'\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line inserted\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"+\"}],\"   $\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token function property-access method\",\"children\":\"facebox\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token literal-property property\",\"children\":\"div\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'#bar'\"}],\" \",[\"$\",\"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\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\"\\n\"]}]]}]}],[\"$\",\"h4\",null,{\"id\":\"footnotes\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#footnotes\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"icon icon-link\"}]}],\"Footnotes\"]}],[\"$\",\"$L1f\",null,{\"className\":\"language-js\",\"children\":[\"$\",\"code\",null,{\"className\":\"language-js code-highlight\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"Here\"}],\" is a simple footnote\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"[\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"^\"}],[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"1\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"]\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token property-access\",\"children\":[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"With\"}]}],\" some additional text after it\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"[\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"^\"}],[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"1\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"]\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"My\"}],\" reference\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],\"\\n\"]}]]}]}],[\"$\",\"p\",null,{\"children\":[\"Here is a simple footnote\",[\"$\",\"sup\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#user-content-fn-1\",\"aria-describedby\":\"footnote-label\",\"data-footnote-ref\":true,\"id\":\"user-content-fnref-1\",\"children\":\"1\"}]}],\". With some additional text after it.\"]}],[\"$\",\"h4\",null,{\"id\":\"task-lists\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#task-lists\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"icon icon-link\"}]}],\"Task Lists\"]}],[\"$\",\"$L1f\",null,{\"className\":\"language-js\",\"children\":[\"$\",\"code\",null,{\"className\":\"language-js code-highlight\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"-\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"[\"}],\"x\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"]\"}],\" list syntax \",[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"required\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"any unordered or ordered list supported\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"-\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"[\"}],\"x\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"]\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"this\"}],\" is a complete item\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"-\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"[\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"]\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"this\"}],\" is an incomplete item\\n\"]}]]}]}],[\"$\",\"ul\",null,{\"className\":\"contains-task-list\",\"children\":[[\"$\",\"li\",null,{\"className\":\"task-list-item\",\"children\":[[\"$\",\"input\",null,{\"checked\":true,\"disabled\":true,\"type\":\"checkbox\"}],\" \",\"list syntax required (any unordered or ordered list supported)\"]}],[\"$\",\"li\",null,{\"className\":\"task-list-item\",\"children\":[[\"$\",\"input\",null,{\"checked\":true,\"disabled\":true,\"type\":\"checkbox\"}],\" \",\"this is a complete item\"]}],[\"$\",\"li\",null,{\"className\":\"task-list-item\",\"children\":[[\"$\",\"input\",null,{\"disabled\":true,\"type\":\"checkbox\"}],\" \",\"this is an incomplete item\"]}]]}],[\"$\",\"h4\",null,{\"id\":\"tables\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#tables\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"icon icon-link\"}]}],\"Tables\"]}],[\"$\",\"p\",null,{\"children\":[\"You can create tables by assembling a list of words and divi
147ding them with hyphens \",[\"$\",\"code\",null,{\"children\":\"-\"}],\" (for the first row), and then separating each column with a pipe \",[\"$\",\"code\",null,{\"children\":\"|\"}],\":\"]}],[\"$\",\"$L1f\",null,{\"className\":\"language-js\",\"children\":[\"$\",\"code\",null,{\"className\":\"language-js code-highlight\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"|\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"First\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"Header\"}],\"                \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"|\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"Second\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"Header\"}],\"                \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"|\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"|\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"--\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"--\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"--\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"--\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"--\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"--\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"--\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"--\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"--\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"--\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"--\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"--\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"--\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"-\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"|\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"--\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"--\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"--\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"--\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"--\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"--\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"--\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"--\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"--\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"--\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"--\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"--\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"--\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"--\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"|\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"|\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"Content\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword module\",\"children\":\"from\"}],\" cell \",[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"1\"}],\"         \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"|\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"Content\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword module\",\"children\":\"from\"}],\" cell \",[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"2\"}],\"          \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"|\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"|\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"Content\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"in\"}],\" the first column \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"|\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"Content\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"in\"}],\" the second column \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"|\"}],\"\\n\"]}]]}]}],[\"$\",\"table\",null,{\"children\":[[\"$\",\"thead\",null,{\"children\":[\"$\",\"tr\",null,{\"children\":[[\"$\",\"th\",null,{\"children\":\"First Header\"}],[\"$\",\"th\",null,{\"children\":\"Second Header\"}]]}]}],[\"$\",\"tbody\",null,{\"children\":[[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"children\":\"Content from cell 1\"}],[\"$\",\"td\",null,{\"children\":\"Content from cell 2\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"children\":\"Content in the first column\"}],[\"$\",\"td\",null,{\"children\":\"Content in the second column\"}]]}]]}]]}],[\"$\",\"h4\",null,{\"id\":\"strikethrough\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#strikethrough\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"icon icon-link\"}]}],\"Strikethrough\"]}],[\"$\",\"p\",null,{\"children\":[\"Any word wrapped with two tildes (like \",[\"$\",\"code\",null,{\"children\":\"~~this~~\"}],\") will appear \",[\"$\",\"del\",null,{\"children\":\"crossed out\"}],\".\"]}],[\"$\",\"h2\",null,{\"id\":\"next-steps\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#next-steps\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"icon icon-link\"}]}],\"Next steps\"]}],[\"$\",\"p\",null,{\"children\":\"Ready to dive deeper? Check out these guides:\"}],[\"$\",\"ul\",null,{\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$Le\",null,{\"prefetch\":false,\"href\":\"/boilerplate-documentation/extending-the-blog\",\"children\":\"Extending the blog\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$Le\",null,{\"prefetch\":false,\"href\":\"/boilerplate-documentation/tour-of-the-codebase\",\"children\":\"Take a tour of the codebase\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$Le\",null,{\"prefetch\":false,\"href\":\"/boilerplate-documentation/customizing-landing-page\",\"children\":\"Customize the landing page\"}]}]]}],[\"$\",\"section\",null,{\"className\":\"footnotes\",\"data-footnotes\":true,\"children\":[[\"$\",\"h2\",null,{\"id\":\"footnote-label\",\"className\":\"sr-only\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#footnote-label\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"icon icon-link\"}]}],\"Footnotes\"]}],[\"$\",\"ol\",null,{\"children\":[\"$\",\"li\",null,{\"id\":\"user-content-fn-1\",\"children\":[\"$\",\"p\",null,{\"children\":[\"My reference. \",[\"$\",\"a\",null,{\"href\":\"#user-content-fnref-1\",\"aria-label\":\"Back to content\",\"className\":\"data-footnote-backref\",\"data-footnote-backref\":true,\"children\":\"↩\"}]]}]}]}]]}]]}]]}],[\"$\",\"footer\",null,{\"className\":\"p-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"divide-gray-200 text-sm font-medium leading-5 dark:divide-gray-700 xl:col-start-1 xl:row-start-2 xl:divide-y\",\"children\":[[\"$\",\"div\",null,{\"className\":\"py-4 xl:py-8\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400\",\"children\":\"Tags\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap\",\"children\":[[\"$\",\"$Le\",null,{\"href\":\"/tags/blog\",\"className\":\"mr-3 text-sm font-medium lowercase text-primary-500 hover:text-primary-700 dark:hover:text-primary-400\",\"data-sentry-element\":\"Link\",\"data-sentry-component\":\"Tag\",\"data-sentry-source-file\":\"Tag.tsx\",\"children\":\"blog\"}],[\"$\",\"$Le\",null,{\"href\":\"/tags/guide\",\"className\":\"mr-3 text-sm font-medium lowercase text-primary-500 hover:text-primary-700 dark:hover:text-primary-400\",\"data-sentry-element\":\"Link\",\"data-sentry-component\":\"Tag\",\"data-sentry-source-file\":\"Tag.tsx\",\"children\":\"guide\"}],[\"$\",\"$Le\",null,{\"href\":\"/tags/mdx\",\"className\":\"mr-3 text-sm font-medium lowercase text-primary-500 hover:text-primary-700 dark:hover:text-primary-400\",\"data-sentry-element\":\"Link\",\"data-sentry-component\":\"Tag\",\"data-sentry-source-file\":\"Tag.tsx\",\"children\":\"mdx\"}],[\"$\",\"$Le\",null,{\"href\":\"/tags/markdown\",\"className\":\"mr-3 text-sm font-medium lowercase text-primary-500 hover:text-primary-700 dark:hover:text-primary-400\",\"data-sentry-element\":\"Link\",\"data-sentry-component\":\"Tag\",\"data-sentry-source-file\":\"Tag.tsx\",\"children\":\"markdown\"}],[\"$\",\"$Le\",null,{\"href\":\"/tags/documentation\",\"className\":\"mr-3 text-sm font-medium lowercase text-primary-500 hover:text-primary-700 dark:hover:text-primary-400\",\"data-sentry-element\":\"Link\",\"data-sentry-component\":\"Tag\",\"data-sentry-source-file\":\"Tag.tsx\",\"children\":\"documentation\"}]]}],[\"$\",\"a\",null,{\"href\":\"/tags\",\"className\":\"inline-block mt-2 text-xs capitalize font-medium text-primary-500 hover:text-primary-700 dark:hover:text-primary-400\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[\"All tags\",[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\"
147:24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-external-link ml-1 inline-block w-3 h-3\",\"children\":[[\"$\",\"path\",\"1q9fwt\",{\"d\":\"M15 3h6v6\"}],[\"$\",\"path\",\"gplh6r\",{\"d\":\"M10 14 21 3\"}],[\"$\",\"path\",\"a6xqqp\",{\"d\":\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"}],\"$undefined\"]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex justify-between py-4 xl:block xl:space-y-8 xl:py-8\",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400\",\"children\":\"Previous Article\"}],[\"$\",\"div\",null,{\"className\":\"text-primary-500 hover:text-primary-600 dark:hover:text-primary-400\",\"children\":[\"$\",\"$Le\",null,{\"prefetch\":false,\"href\":\"/boilerplate-documentation/configuration\",\"children\":\"Generated codebase configuration\"}]}]]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400\",\"children\":\"Next Article\"}],[\"$\",\"div\",null,{\"className\":\"text-primary-500 hover:text-primary-600 dark:hover:text-primary-400\",\"children\":[\"$\",\"$Le\",null,{\"prefetch\":false,\"href\":\"/boilerplate-documentation/vercel-deploy-integration\",\"children\":\"Using the Shipixen ↔️ Vercel Deploy Integration\"}]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex pt-4 xl:pt-8\",\"children\":[\"$\",\"$Le\",null,{\"prefetch\":false,\"href\":\"/all-articles\",\"className\":\"text-primary-500 hover:text-primary-600 dark:hover:text-primary-400\",\"aria-label\":\"More articles\",\"data-sentry-element\":\"Link\",\"data-sentry-source-file\":\"PostHub.tsx\",\"children\":\"More articles →\"}]}]]}]}]]}],[\"$\",\"aside\",null,{\"className\":\"order-1 lg:order-2 relative xl:sticky top-0 pt-0 pb-6 px-6 lg:pt-6 w-full xl:max-w-[15rem] xl:max-h-screen flex flex-col items-start justify-normal overflow-auto lg:max-w-xl\",\"children\":[null,[\"$\",\"h2\",null,{\"className\":\"mt-4 font-semibold text-sm\",\"children\":\"Jump to section\"}],[\"$\",\"$L20\",null,{\"toc\":[{\"value\":\"Basics\",\"url\":\"#basics\",\"depth\":2},{\"value\":\"Creating a post\",\"url\":\"#creating-a-post\",\"depth\":3},{\"value\":\"Blog post example\",\"url\":\"#blog-post-example\",\"depth\":4},{\"value\":\"Frontmatter\",\"url\":\"#frontmatter\",\"depth\":4},{\"value\":\"More about Frontmatter\",\"url\":\"#more-about-frontmatter\",\"depth\":4},{\"value\":\"Layouts\",\"url\":\"#layouts\",\"depth\":3},{\"value\":\"Introduction to MDX\",\"url\":\"#introduction-to-mdx\",\"depth\":2},{\"value\":\"What is Markdown?\",\"url\":\"#what-is-markdown\",\"depth\":3},{\"value\":\"Nested Routes\",\"url\":\"#nested-routes\",\"depth\":3},{\"value\":\"Table of Contents\",\"url\":\"#table-of-contents\",\"depth\":3},{\"value\":\"How\",\"url\":\"#how\",\"depth\":4},{\"value\":\"Syntax guide\",\"url\":\"#syntax-guide\",\"depth\":3},{\"value\":\"Headers\",\"url\":\"#headers\",\"depth\":4},{\"value\":\"Emphasis\",\"url\":\"#emphasis\",\"depth\":4},{\"value\":\"Lists\",\"url\":\"#lists\",\"depth\":4},{\"value\":\"Unordered\",\"url\":\"#unordered\",\"depth\":5},{\"value\":\"Ordered\",\"url\":\"#ordered\",\"depth\":5},{\"value\":\"Images\",\"url\":\"#images\",\"depth\":4},{\"value\":\"Links\",\"url\":\"#links\",\"depth\":4},{\"value\":\"Blockquotes\",\"url\":\"#blockquotes\",\"depth\":4},{\"value\":\"Inline code\",\"url\":\"#inline-code\",\"depth\":4},{\"value\":\"Syntax highlighting\",\"url\":\"#syntax-highlighting\",\"depth\":3},{\"value\":\"Line diffing and highlighting\",\"url\":\"#line-diffing-and-highlighting\",\"depth\":3},{\"value\":\"Footnotes\",\"url\":\"#footnotes\",\"depth\":4},{\"value\":\"Task Lists\",\"url\":\"#task-lists\",\"depth\":4},{\"value\":\"Tables\",\"url\":\"#tables\",\"depth\":4},{\"value\":\"Strikethrough\",\"url\":\"#strikethrough\",\"depth\":4},{\"value\":\"Next steps\",\"url\":\"#next-steps\",\"depth\":2}],\"className\":\"toc-list wide-container !p-0 mt-4\",\"data-sentry-element\":\"TOC\",\"data-sentry-source-file\":\"PostHub.tsx\"}],null,[\"$\",\"$L21\",null,{\"className\":\"static mt-auto\",\"data-sentry-element\":\"ScrollTop\",\"data-sentry-source-file\":\"PostHub.tsx\"}]]}],[\"$\",\"$L22\",null,{\"elementId\":\"navigation\",\"data-sentry-element\":\"ScrollRestoration\",\"data-sentry-source-file\":\"PostHub.tsx\"}]]}]]}]]\n"])</script>
147<script>self.__next_f.push([1,"6:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"1\",{\"children\":\"Writing blog posts: Shipixen blog crash course \u0026 Markdown cheatsheet | Beautiful \u0026 performant Next.js apps deployed in minutes\"}],[\"$\",\"meta\",\"2\",{\"name\":\"description\",\"content\":\"Learn how to use the blog. Write blog posts by example plus get a markdown cheatsheet - headers, lists, images, tables and more!\"}],[\"$\",\"meta\",\"3\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"4\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"5\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"link\",\"6\",{\"rel\":\"canonical\",\"href\":\"https://shipixen.com/boilerplate-documentation/using-the-shipixen-blog\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:title\",\"content\":\"Writing blog posts: Shipixen blog crash course \u0026 Markdown cheatsheet\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:description\",\"content\":\"Learn how to use the blog. Write blog posts by example plus get a markdown cheatsheet - headers, lists, images, tables and more!\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:url\",\"content\":\"https://shipixen.com/boilerplate-documentation/using-the-shipixen-blog\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:site_name\",\"content\":\"Beautiful \u0026 performant Next.js apps deployed in minutes\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:image\",\"content\":\"https://shipixen.com/static/images/shipixen-product.webp\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"14\",{\"property\":\"article:published_time\",\"content\":\"2023-10-11T00:00:00.000Z\"}],[\"$\",\"meta\",\"15\",{\"property\":\"article:modified_time\",\"content\":\"2025-05-14T00:00:00.000Z\"}],[\"$\",\"meta\",\"16\",{\"property\":\"article:author\",\"content\":\"Shipixen\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:title\",\"content\":\"Writing blog posts: Shipixen blog crash course \u0026 Markdown cheatsheet\"}],[\"$\",\"meta\",\"19\",{\"name\":\"twitter:description\",\"content\":\"Learn how to use the blog. Write blog posts by example plus get a markdown cheatsheet - headers, lists, images, tables and more!\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:image\",\"content\":\"https://shipixen.com/static/images/shipixen-product.webp\"}],[\"$\",\"meta\",\"21\",{\"name\":\"next-size-adjust\"}]]\n"])</script>
147<script>self.__next_f.push([1,"f:null\n"])</script>
147</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.