remix blog

Author: bradwestfall

package-lock.json

@@ -12,12 +12,14 @@
     "@reduxjs/toolkit": "^1.9.3",
     "classnames": "^2.3.1",
     "dayjs": "^1.10.7",
+    "esbuild": "^0.17.18",
     "eslint": "^8.24.0",
     "firebase": "^9.6.1",
     "formik": "^2.2.9",
     "json-server": "^0.17.1",
     "lodash.debounce": "^4.0.8",
     "markdown-it": "^12.2.0",
+    "mdx-bundler": "^9.2.1",
     "mobx": "^6.3.13",
     "mobx-react": "^7.2.1",
     "mobx-react-lite": "^3.2.3",

package.json

@@ -0,0 +1,18 @@
+---
+title: Welcome
+date: 2023-05-13T00:00:00.000-0800
+---
+
+import { Icon } from '../components/Icon'
+
+Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus a eius neque molestiae natus, nostrum pariatur debitis sint, aperiam voluptate amet eveniet, fugit quaerat non sed. Harum dolores omnis ea.
+
+<hr />
+
+[External Anchor](https://google.com)
+
+[SPA Anchor](/products)
+
+<button className="button">
+  <Icon name="cart" /> Components In Markdown
+</button>

remix/app/blog-posts/welcome.mdx

@@ -0,0 +1,39 @@
+import { getMDXComponent } from 'mdx-bundler/client'
+import { useMemo } from 'react'
+import { Link } from 'react-router-dom'
+
+export function MDXContent({ code }: { code: string }) {
+  const Component = useMemo(() => getMDXComponent(code), [code])
+  return (
+    <Component
+      components={{
+        a: Anchor,
+      }}
+    />
+  )
+}
+
+/****************************************
+  Substitutions
+*****************************************/
+
+type AnchorProps = {
+  children: React.ReactNode
+  href: string
+} & React.HTMLAttributes<HTMLAnchorElement>
+
+function Anchor({ href, children, ...props }: AnchorProps) {
+  if (href.toLowerCase().startsWith('http')) {
+    return (
+      <a href={href} {...props}>
+        {children}
+      </a>
+    )
+  } else {
+    return (
+      <Link to={href} {...props}>
+        {children}
+      </Link>
+    )
+  }
+}

remix/app/components/MDXContent.tsx

@@ -0,0 +1,29 @@
+import { json } from '@remix-run/node'
+import { useLoaderData } from '@remix-run/react'
+import { MDXContent } from '~/components/MDXContent'
+import { getPost } from '~/utils/blog.server'
+import type { LoaderArgs } from '@remix-run/node'
+import { Heading } from '~/components/Heading'
+
+export const loader = async ({ params }: LoaderArgs) => {
+  const slug = params.slug
+  if (!slug) throw new Response('Not found', { status: 404 })
+
+  try {
+    const { frontmatter, code } = await getPost(slug)
+    return json({ frontmatter, code })
+  } catch (err) {
+    throw new Response('Not found', { status: 404 })
+  }
+}
+
+export default function () {
+  const { frontmatter, code } = useLoaderData<typeof loader>()
+
+  return (
+    <article className="space-y-3">
+      <Heading>{frontmatter.title}</Heading>
+      <MDXContent code={code} />
+    </article>
+  )
+}

remix/app/routes/blog.$slug.tsx

@@ -0,0 +1,48 @@
+import { json } from '@remix-run/node'
+import { Link, useLoaderData } from '@remix-run/react'
+import { getAllPosts } from '~/utils/blog.server'
+import { Heading } from '~/components/Heading'
+
+// export const loader = async ({ params }: LoaderArgs) => {
+//   const slug = params.slug
+//   if (!slug) throw new Response('Not found', { status: 404 })
+
+//   try {
+//     const { frontmatter, code } = await getPost(slug)
+//     return json({ frontmatter, code })
+//   } catch (err) {
+//     throw new Response('Not found', { status: 404 })
+//   }
+// }
+
+export async function loader() {
+  try {
+    const posts = await getAllPosts()
+    return json({ posts })
+  } catch (error) {
+    console.error(error)
+    throw new Response('Not found', { status: 404 })
+  }
+}
+
+export default function () {
+  const { posts } = useLoaderData<typeof loader>()
+
+  return (
+    <article className="space-y-3">
+      <Heading>Blog</Heading>
+
+      {posts.map((post) => {
+        const path = `/blog/${post.slug}`
+        return (
+          <div key={path} className="bg-white rounded p-3 space-y-2">
+            <Heading as="h2" size={3}>
+              {post.title}
+            </Heading>
+            <Link to={path}>{path}</Link>
+          </div>
+        )
+      })}
+    </article>
+  )
+}

remix/app/routes/blog._index.tsx

@@ -53,6 +53,34 @@ body {
   }
 }
 
+/****************************************
+  Lists
+*****************************************/
+
+@layer base {
+  /* Go back to User Agent Defaults (not the tailwind reset) */
+  ul {
+    display: block;
+    list-style-type: disc;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    padding-inline-start: 40px;
+  }
+
+  /* Go back to User Agent Defaults (not the tailwind reset) */
+  ol {
+    display: block;
+    list-style-type: disc;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    padding-inline-start: 40px;
+  }
+}
+
 /****************************************
   Buttons
 *****************************************/

remix/app/styles/app.css

@@ -0,0 +1,102 @@
+import { readdir } from 'fs/promises'
+import path from 'path'
+import { bundleMDX } from 'mdx-bundler'
+
+const blogPostsPath = path.join(`${__dirname}/../app/blog-posts`)
+
+export type FrontmatterType = {
+  title: string
+  date: Date
+  draft?: true // either `true` not not supplied
+}
+
+export type Post = FrontmatterType & {
+  slug: string
+  markdown: string
+}
+
+function fixFrontmatter(f: any) {
+  return {
+    ...f,
+    date: new Date(f.date as string),
+  } as FrontmatterType
+}
+
+export async function getPost(slug: string) {
+  const parsed = await parseMDX(path.join(blogPostsPath, slug + '.mdx'))
+  const frontmatter = fixFrontmatter(parsed.frontmatter)
+  const code = parsed.code
+  return { frontmatter, code }
+}
+
+export async function getAllPosts(): Promise<Post[]> {
+  const postsPath = await readdir(blogPostsPath, {
+    withFileTypes: true,
+  })
+
+  let posts = await Promise.all(
+    postsPath.map(async (pathInfo) => {
+      // Only get .mdx files
+      if (!pathInfo.name.includes('.mdx')) return
+
+      const parsed = await parseMDX(path.join(blogPostsPath, pathInfo.name))
+      const frontmatter = fixFrontmatter(parsed.frontmatter)
+
+      // Don't show draft posts in production
+      if (process.env.NODE_ENV === 'production' && frontmatter.draft) return
+
+      return {
+        slug: pathInfo.name.replace(/\.mdx/, ''),
+        ...frontmatter,
+      }
+    })
+  )
+
+  posts = posts.filter(Boolean).sort((a, b) => b.date.getTime() - a.date.getTime())
+  return posts as Post[]
+}
+
+/****************************************
+  Parse MDX
+*****************************************/
+
+// https://github.com/kentcdodds/mdx-bundler/blob/main/README.md#nextjs-esbuild-enoent
+
+if (process.platform === 'win32') {
+  process.env.ESBUILD_BINARY_PATH = path.join(
+    process.cwd(),
+    'node_modules',
+    'esbuild',
+    'esbuild.exe'
+  )
+} else {
+  process.env.ESBUILD_BINARY_PATH = path.join(
+    process.cwd(),
+    'node_modules',
+    'esbuild',
+    'bin',
+    'esbuild'
+  )
+}
+
+export async function parseMDX(file: string) {
+  const { frontmatter, code } = await bundleMDX({
+    file,
+    // mdxOptions(options, frontmatter) {
+    //   // this is the recommended way to add custom remark/rehype plugins:
+    //   // The syntax might look weird, but it protects you in case we add/remove
+    //   // plugins in the future.
+    //   options.remarkPlugins = [...(options.remarkPlugins ?? []), myRemarkPlugin]
+    //   options.rehypePlugins = [...(options.rehypePlugins ?? []), myRehypePlugin]
+
+    //   return options
+    // },
+    // esbuildOptions(options, frontmatter) {
+    //   options.minify = false
+    //   options.target = ['es2020', 'chrome58', 'firefox57', 'safari11', 'edge16', 'node12']
+
+    //   return options
+    // },
+  })
+  return { frontmatter, code }
+}