I\u2019m an H1!

I\u2019m an H2!

This is a paragraph.

hello!

`})}),` `,(0,o.jsx)(e.p,{children:"Which renders into this:"}),` `,(0,o.jsx)("br",{}),` `,(0,o.jsx)(e.h1,{children:"I\u2019m an H1!"}),` `,(0,o.jsx)(e.h2,{children:"I\u2019m an H2!"}),` `,(0,o.jsx)(e.p,{children:"This is a paragraph."}),` `,(0,o.jsx)(Sn,{}),` `,(0,o.jsxs)(e.p,{children:["(shoutout to ",(0,o.jsx)(e.a,{href:"https://twitter.com/pokecoder",children:"@pokecoder"}),` for the `,(0,o.jsx)(e.a,{href:"https://twitter.com/pokecoder/status/1466582413476200449",children:"CSS tip!"}),")"]}),` `,(0,o.jsx)(Ke,{}),` `,(0,o.jsxs)(e.p,{children:[`In his blog, Josh describes a few libraries for using MDX with Next.js, and mentions he would be using `,(0,o.jsx)(e.a,{href:"https://kentcdodds.com/",children:"Kent C. Dodds\u2019"}),` `,(0,o.jsx)(e.a,{href:"https://github.com/kentcdodds/mdx-bundler",children:(0,o.jsx)(e.code,{children:"mdx-bundler"})}),` moving forward. It seems like a pretty popular library, so I took the liberty to use it as well.`]}),` `,(0,o.jsxs)(e.blockquote,{children:[` `,(0,o.jsxs)(e.p,{children:["INFO: The content between ",(0,o.jsx)(e.code,{children:"---"}),` is the post metadata and is managed by `,(0,o.jsx)(e.a,{href:"https://mdxjs.com/guides/frontmatter/",children:(0,o.jsx)(e.code,{children:"frontmatter"})}),`, an MDX plugin that works right out the box with `,(0,o.jsx)(e.code,{children:"mdx-bundler"}),"."]}),` `]}),` `,(0,o.jsx)(e.h3,{children:"Tailwind CSS"}),` `,(0,o.jsxs)(e.p,{children:[`Yet another shiny new framework that\u2019s been generating a lot of hype. I usually use `,(0,o.jsx)(e.a,{href:"https://styled-components.com/",children:(0,o.jsx)(e.code,{children:"styled-components"})}),` when developing React apps, but I still wanted to scratch that `,(0,o.jsx)(e.em,{children:`\u201Clet's learn something new and trendy\u201D`})," itch."]}),` `,(0,o.jsx)(e.p,{children:`Tailwind CSS poses an interesting new way of managing your styles as a "utility-first" CSS framework. After working with it for the blog, I realized it doesn\u2019t really fit my use case. Tailwind is built to scale design systems.`}),` `,(0,o.jsx)(e.p,{children:`My blog is trying to do the opposite - I want the flexibility to customize every component and post I create. It\u2019s not going to scale to a team of any size, so it will probably never take full advantage of Tailwind\u2019s full feature set, but it was fun to tinker with.`}),` `,(0,o.jsx)(e.p,{children:`Tailwind did come in handy when structuring the layout of my pages, especially when it came to making it responsive and mobile-friendly. I also found myself taking advantage of Tailwind\u2019s configuration to manage color themes and other properties that are intended to be used throughout the entire app.`}),` `,(0,o.jsxs)(e.p,{children:["I use ",(0,o.jsx)(e.a,{href:"https://github.com/pacocoursey/next-themes",children:"next-themes"}),` to detect the user\u2019s current them preference and Tailwind to detect and apply the appropriate color theme. One limiting thing about Tailwind is that it looks like it only supports two themes - a `,(0,o.jsx)(e.code,{children:"light"})," mode and a ",(0,o.jsx)(e.code,{children:"dark"})," mode."]}),` `,(0,o.jsxs)(e.p,{children:["I\u2019ve always thought about creating more themes (more than just ",(0,o.jsx)(e.code,{children:"light"}),` and `,(0,o.jsx)(e.code,{children:"dark"}),`) for the blog as a creative outlet. When that time comes, I might switch over to a different CSS framework to better manage multiple themes.`]}),` `,(0,o.jsx)(e.h3,{children:"Styled Components"}),` `,(0,o.jsxs)(e.p,{children:[`I\u2019ve configured Tailwind to extend more class styles, but I figured it\u2019d be limiting in the future if I wanted to fully customize my styles. At first, I used `,(0,o.jsx)(e.a,{href:"https://github.com/css-modules/css-modules",children:"modular SCSS"}),` since it came with Next.js out of the box, but ran into troubles when trying to use it with `,(0,o.jsx)(e.code,{children:"mdx-bundler"}),"."]}),` `,(0,o.jsxs)(e.p,{children:[`Apparently, I\u2019m not the only one - I found `,(0,o.jsx)(e.a,{href:"https://github.com/kentcdodds/mdx-bundler/issues/101",children:"a"}),` `,(0,o.jsx)(e.a,{href:"https://github.com/kentcdodds/mdx-bundler/issues/53",children:"few"}),` `,(0,o.jsx)(e.a,{href:"https://www.gbasil.dev/blog/mdx-w-scss",children:"other"}),` `,(0,o.jsx)(e.a,{href:"https://amitd.co/colophon",children:"developers"})," who\u2019ve had the same experience."]}),` `,(0,o.jsxs)(e.p,{children:["So, I ended up choosing ",(0,o.jsx)(e.a,{href:"https://styled-components.com/",children:(0,o.jsx)(e.code,{children:"styled-components"})}),` and will be using it going forward for the rest of this blog. `,(0,o.jsx)(e.code,{children:"styled-components"}),` are great because, as its name suggests, I can easily apply custom styles to my components, which means I can create custom components for blog posts that may need it.`]}),` `,(0,o.jsx)(e.h3,{children:"Vercel"}),` `,(0,o.jsxs)(e.p,{children:[`The stack started with Next.js, so it seems appropriate that it ends with `,(0,o.jsx)(e.a,{href:"https://vercel.com/",children:"Vercel"}),`. The two names are practically analogous to each other - Next.js is developed by Vercel, and Vercel is a Platform-as-a-Service (PaaS) focused on the developer experience.`]}),` `,(0,o.jsxs)(e.p,{children:[`Vercel makes it super easy to deploy Next.js apps on their platform. It\u2019s just a couple of clicks to sign up and connect your GitHub repo, and a few more steps to configure your domain. From there, every new commit to your `,(0,o.jsx)(e.code,{children:"main"}),` branch is automatically deployed \u{1F680} I haven\u2019t tried any other frameworks (like Angular or Vue), but I\u2019m sure the experience is the same.`]}),` `,(0,o.jsx)(e.h2,{children:"Using MDX to Render Blog Posts"}),` `,(0,o.jsxs)(e.p,{children:[`I\u2019ve opted for static site generation (SSG) in Next.js for my blog posts, which means those pages are generated `,(0,o.jsx)(e.em,{children:"at build time"}),` and deployed as static HTML files. Because generated static site pages are built in advance, they provided a slightly better performance, due to the faster load time from not having to fetch and render content on the client side.`]}),` `,(0,o.jsxs)(e.blockquote,{children:[` `,(0,o.jsxs)(e.p,{children:[`INFO: For more info on static site generation, check out `,(0,o.jsx)(e.a,{href:"https://www.cloudflare.com/learning/performance/static-site-generator",children:"this Cloudflare blog"}),` on the topic.`]}),` `]}),` `,(0,o.jsxs)(e.p,{children:["The ",(0,o.jsx)(e.code,{children:"mdx-bundler"}),` library fit in well with SSG in Next.js - it\u2019s used to first convert my markdown content into HTML, then Next.js uses that HTML to create a React component and generate the final static page that you viewing right now.`]}),` `,(0,o.jsxs)(e.p,{children:[`SSG is enabled in Next.js if at least one of the following functions are defined and exported in a `,(0,o.jsx)(e.a,{href:"https://nextjs.org/learn/basics/navigate-between-pages/pages-in-nextjs",children:(0,o.jsx)(e.code,{children:"Page"})}),` file: `,(0,o.jsx)(e.a,{href:"https://nextjs.org/docs/basic-features/data-fetching/get-static-props#getstaticprops",children:(0,o.jsx)(e.code,{children:"getStaticProps"})}),`, `,(0,o.jsx)(e.a,{href:"https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props",children:(0,o.jsx)(e.code,{children:"getServerSideProps"})}),`, or `,(0,o.jsx)(e.a,{href:"https://nextjs.org/docs/basic-features/data-fetching/get-static-paths#getstaticpaths",children:(0,o.jsx)(e.code,{children:"getStaticPaths"})}),` (see more on `,(0,o.jsx)(e.a,{href:"https://nextjs.org/learn/basics/dynamic-routes",children:"Dynamic Routes"}),"). Here\u2019s how I\u2019ve defined it for my blog post pages:"]}),` `,(0,o.jsx)(e.h3,{children:"Rendering an MDX React Component"}),` `,(0,o.jsxs)(e.p,{children:[`First, I define routes to each available blog post. Each post is identifiable by it's post ID (`,(0,o.jsx)(e.code,{children:"pid"}),`), which is the same as the name of the file it's saved under.`]}),` `,(0,o.jsxs)(e.p,{children:["I load up all the file names of all the posts saved under my ",(0,o.jsx)(e.code,{children:"_posts/"}),` directory in `,(0,o.jsx)(e.code,{children:"getStaticPaths"})," to configure Next.js with these routes:"]}),` `,(0,o.jsxs)(e.p,{children:["As you can see with ",(0,o.jsx)(e.a,{href:"/blog/how-i-built-my-blog",children:"this post"}),", the ",(0,o.jsx)(e.strong,{children:"route"}),` is `,(0,o.jsx)(e.code,{children:"/blog/how-i-built-my-blog"})," and the ",(0,o.jsx)(e.code,{children:"pid"})," is ",(0,o.jsx)(e.code,{children:"how-i-built-my-blog"}),"."]}),` `,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-ts",children:`// pages/blog/[pid].tsx export const getStaticPaths = async () => { const posts = await getAllPosts(); return { paths: posts.map((post) => { return { params: { pid: post.pid, }, } }), fallback: false, } }; `})}),` `,(0,o.jsxs)(e.p,{children:["A new statically generated ",(0,o.jsx)(e.code,{children:"Page"}),` needs to be built for every new route we just defined. Next.js `,(0,o.jsx)(e.code,{children:"Page"}),`s are React components, andlLearning how to use `,(0,o.jsx)(e.code,{children:"mdx-bundler"}),` to render MDX as a React component comes straight `,(0,o.jsx)(e.a,{href:"https://github.com/kentcdodds/mdx-bundler/tree/v8.0.0#component-substitution",children:"from the docs"}),"."]}),` `,(0,o.jsxs)(e.p,{children:["For every ",(0,o.jsx)(e.code,{children:"pid"})," (for each of the routes we just created), ",(0,o.jsx)(e.code,{children:"getStaticProps"}),` is called to load a post's MDX code:`]}),` `,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-ts",children:`// pages/blog/[pid].tsx export const getStaticProps = async ({ params }: Params) => { const {pid} = params; const {code, frontmatter} = await getPost(pid); if (!frontmatter.published) { return { notFound: true, } } return { props: { code, frontmatter, }, }; }; `})}),` `,(0,o.jsxs)(e.p,{children:["Which gets passed into the ",(0,o.jsx)(e.code,{children:"Page"}),"'s component as props:"]}),` `,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-tsx",children:`// pages/blog/[pid].tsx export default function BlogPost({code, frontmatter}: MarkdownPost) { const Component = React.useMemo(() => getMDXComponent(code), [code]); return ( <> {/* < ... > */} {/* < ... > */} ); } `})}),` `,(0,o.jsx)(e.p,{children:`You might notice that I'm defining every HTML element I expect to be rendered out by the MDX component. I did this because each HTML element was rendering with no styles.`}),` `,(0,o.jsxs)(e.p,{children:[`This resulted with articles rendering as a huge slew of words with no formatting. Even things like lists (`,(0,o.jsx)(e.code,{children:"

"})," and ",(0,o.jsx)(e.code,{children:"

"}),`) would be rendered without numbers, bullet points, or indentation.`]}),` `,(0,o.jsx)(e.p,{children:`I suspect that it might have something to do with how Tailwind hijacks and strips all styles from elements before applying them through class names. This is find for me, though, since I think the amount of elements I'd have to style is decently manageable.`}),` `,(0,o.jsx)(Ke,{}),` `,(0,o.jsx)(e.h3,{children:"Loading MDX Files"}),` `,(0,o.jsxs)(e.p,{children:["I currently have all my markdown articles saved into a ",(0,o.jsx)(e.code,{children:"_posts/"}),` directory, where each file name is the `,(0,o.jsx)(e.code,{children:"pid"}),` (post ID) of that post. Since Next.js builds runes in a Node.js environment, we can use native APIs to read MDX files directly on the filesystem.`]}),` `,(0,o.jsx)(e.p,{children:`Here are the utility functions I created for conveniently reading my MDX-formatted articles:`}),` `,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-javascript",children:`// lib/utils.ts import fs from 'fs'; import path from 'path'; import { bundleMDX } from 'mdx-bundler'; const POSTS_DIR = path.join(process.cwd(), '_posts'); export interface MarkdownPost { pid: string; code: string; frontmatter: {[key: string]: any}; }; export function getAllPostIds(): string[] { return fs.readdirSync(POSTS_DIR) .filter(p => p.endsWith('.mdx')) .map(p => p.replace(/\\.mdx$/, '')); } export function getPostMarkdown(pid: string): string { const filepath = path.join(POSTS_DIR, \`\${pid}.mdx\`); return fs.readFileSync(filepath, 'utf-8').trim(); } export async function getAllPosts(publishedOnly = true): Promise { const posts = await Promise.all(getAllPostIds().map(pid => getPost(pid))); // Sorted by most recent first posts.sort((post1, post2) => post1.frontmatter.publishDate > post2.frontmatter.publishDate ? -1 : 1); if (!publishedOnly) return posts; return posts.filter(post => post.frontmatter.published); } export async function getPost(pid: string): Promise { const md = getPostMarkdown(pid); const {code, frontmatter} = await bundleMDX(md, { cwd: process.cwd(), esbuildOptions: options => ({ ...options, target: 'es2020', platform: 'node', }), }); return {pid, code, frontmatter}; } `})}),` `,(0,o.jsx)(Ke,{}),` `,(0,o.jsx)(e.p,{children:`Now, every time I build my blog, it converts every blog post I've written as a Markdown document into a static HTML page! When deployed, users will be able to read my content immediately without having to wait for additional content rendered by JavaScript and fetched from a separate source.`}),` `,(0,o.jsxs)(e.p,{children:["Actually, since this ",(0,o.jsx)(e.a,{href:"https://github.com/jstncno/jstncno.github.io",children:"GitHub"}),` project is connected to Vercel, I don't have to run any builds myself! Vercel is like magic with Next.js apps - as soon as I publish to my `,(0,o.jsx)(e.code,{children:"main"}),` branch, Vercel kicks off a build and automatically deploys my site to production \u{1F389}`]}),` `,(0,o.jsx)(e.h2,{children:"Future"}),` `,(0,o.jsxs)(e.p,{children:["Since the ",(0,o.jsx)(e.a,{href:"https://www.notion.so/blog-hello-world-3d29bc43e2c44762a64fef3662f13b37",children:"launch of my blog"}),`, I\u2019m determined on making it an `,(0,o.jsx)(e.strong,{children:"active"}),` project of mine, meaning I intend to develop more features in the future as I continue blogging and adding content.`]}),` `,(0,o.jsx)(e.p,{children:`It was actually in writing this post that I realized I needed to style more components, like the blockquotes and code snippets you see here. I'm sure I'll come up with new ideas as I move along.`}),` `,(0,o.jsx)(e.p,{children:"Thanks for reading!"})]})}function Cn(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(xn,{...t})}):xn(t)}return Rr;})(); /** * @license React * react-is.production.min.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ ;return Component;