things are looking cool 😎

app/components.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react'
+import {Link} from 'react-router-dom'
+import * as Types from 'types'
+
+function Header() {
+  return (
+    <div>
+      <header className="max-w-md m-auto text-center">
+        <h1 className="text-6xl">Elaborate</h1>
+        <div>
+          <blockquote>
+            {`If you don't want to forget what you learned, write it down.`}
+          </blockquote>
+          <div className="text-right">- Kent</div>
+        </div>
+      </header>
+      <nav className="p-8 text-lg">
+        <ul className="flex justify-between max-w-md m-auto">
+          <li>
+            <Link to="/posts" className="underline">
+              Posts
+            </Link>
+          </li>
+          <li>
+            <a href="/posts/random" className="underline">
+              Random Post
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  )
+}
+
+const formatDate = (date: Date) =>
+  new Intl.DateTimeFormat('en-US', {
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric',
+  }).format(date)
+
+function Article({article}: {article: Types.Article}) {
+  return (
+    <article className="p-4 transition duration-200 ease-in-out transform bg-gray-200 shadow-md dark:shadow-lg dark:bg-gray-700 hover:scale-105">
+      <section>
+        <h1 className="pt-2 pb-6 text-3xl font-bold underline">
+          {article.title}
+        </h1>
+        <div className="" dangerouslySetInnerHTML={{__html: article.content}} />
+        <footer className="pt-3 text-right">
+          <div>{article.author}</div>
+          <time>{formatDate(new Date(article.createdDate))}</time>
+        </footer>
+      </section>
+      <aside>
+        <ul className="flex justify-between pt-3">
+          <li>
+            <Link
+              to={`/posts/category/${article.category}`}
+              className="underline"
+            >
+              {article.category}
+            </Link>
+          </li>
+          <li>
+            <Link to={`/posts/${article.id}`} className="underline">
+              Permalink
+            </Link>
+          </li>
+          <li>
+            <span role="img" aria-label="favorite">
+              ❤️
+            </span>
+          </li>
+        </ul>
+      </aside>
+    </article>
+  )
+}
+
+export {Header, Article}

app/routes/404.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react'
+
+export default function FourOhFour() {
+  return null
+}

app/routes/500.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react'
+
+export default function FiveHundred() {
+  return null
+}

app/routes/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
-import {useRouteData} from '@remix-run/react'
+import {Outlet} from 'react-router-dom'
+import {Header} from '../components'
 
 export function meta() {
   return {
@@ -8,66 +9,11 @@ export function meta() {
   }
 }
 
-type ArticleType = {
-  id: string
-  title: string
-  content: string
-  author: string
-  createdDate: number
-  category: string
-}
-
-const formatDate = (date: Date) =>
-  new Intl.DateTimeFormat('en-US', {
-    day: 'numeric',
-    month: 'short',
-    year: 'numeric',
-  }).format(date)
-
-function Article({article}: {article: ArticleType}) {
-  return (
-    <article className="p-2 transition duration-200 ease-in-out transform bg-gray-200 shadow-md dark:shadow-lg dark:bg-gray-700 hover:scale-105">
-      <section>
-        <h1 className="text-3xl font-bold underline">{article.title}</h1>
-        <div dangerouslySetInnerHTML={{__html: article.content}} />
-        <footer>
-          <div>{article.author}</div>
-          <time>{formatDate(new Date(article.createdDate))}</time>
-        </footer>
-      </section>
-      <aside>
-        <ul>
-          <li>{article.category}</li>
-          <li>Permalink</li>
-          <li>
-            <span role="img" aria-label="favorite">
-              ❤️
-            </span>
-          </li>
-        </ul>
-      </aside>
-    </article>
-  )
-}
-
 function Index() {
-  const articles = useRouteData<Array<ArticleType>>()
   return (
     <div>
-      <header className="max-w-md m-auto text-center">
-        <h1 className="text-6xl">Elaborate</h1>
-        <div>
-          <blockquote>
-            {`If you don't want to forget what you learned, write it down.`}
-          </blockquote>
-          <div className="text-right">- Kent</div>
-        </div>
-      </header>
-      <main className="grid max-w-lg gap-12 pt-12 m-auto">
-        {articles.map(a => (
-          <Article key={a.id} article={a} />
-        ))}
-      </main>
+      <Header />
+      <Outlet />
     </div>
   )
 }

app/routes/posts.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import {Outlet} from 'react-router-dom'
+import {Header} from '../components'
+
+export function meta() {
+  return {
+    title: 'Elaborate',
+    description: 'Alright stop. Elaborate and listen...',
+  }
+}
+
+function Posts() {
+  return (
+    <div>
+      <Header />
+      <Outlet />
+    </div>
+  )
+}
+
+export default Posts

app/routes/posts/$postId.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import {useRouteData} from '@remix-run/react'
+import {Article} from '../../components'
+
+function PostScreen() {
+  const article = useRouteData()
+  if (!article) {
+    return (
+      <main className="grid max-w-lg gap-12 pt-12 m-auto">
+        Oh no... No article found. Super sad.
+      </main>
+    )
+  }
+  return (
+    <main className="grid max-w-lg gap-12 pt-12 m-auto">
+      <Article article={article} />
+    </main>
+  )
+}
+
+export default PostScreen

app/routes/posts/category.$categoryId.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import {useParams} from 'react-router-dom'
+import {useRouteData} from '@remix-run/react'
+import * as Types from 'types'
+import {Article} from '../../components'
+
+function Category() {
+  const {categoryId} = useParams()
+  const articles = useRouteData<Types.Article[] | null>()
+  return (
+    <div>
+      <strong>{categoryId} posts</strong>
+      <main className="grid max-w-lg gap-12 pt-12 m-auto">
+        {articles?.map(a => <Article key={a.id} article={a} />) ??
+          'Oh no... there are no matching articles'}
+      </main>
+    </div>
+  )
+}
+
+export default Category

app/routes/posts/index.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react'
+import {useRouteData} from '@remix-run/react'
+import * as Types from 'types'
+import {Article} from '../../components'
+
+export function meta() {
+  return {
+    title: 'Elaborate',
+    description: 'Alright stop. Elaborate and listen...',
+  }
+}
+
+function Posts() {
+  const articles = useRouteData<Types.Article[]>()
+  return (
+    <main className="grid max-w-lg gap-12 pt-12 m-auto">
+      {articles.map(a => (
+        <Article key={a.id} article={a} />
+      ))}
+    </main>
+  )
+}
+
+export default Posts

app/types.ts

@@ -0,0 +1 @@
+export * from '../types'

config/jest.config.server.js

@@ -6,7 +6,7 @@ const fromRoot = d => path.join(__dirname, '..', d)
 module.exports = {
   ...config,
   displayName: 'server',
-  roots: [fromRoot('loaders')],
+  roots: [fromRoot('server')],
   testEnvironment: 'node',
-  moduleDirectories: ['node_modules', fromRoot('loaders'), fromRoot('tests')],
+  moduleDirectories: ['node_modules', fromRoot('server'), fromRoot('tests')],
 }

data/posts.d.ts

@@ -0,0 +1,4 @@
+import * as Types from '../types'
+
+const articles: Array<Types.Article> = []
+export default articles

data/posts.js

@@ -0,0 +1,60 @@
+const unified = require('unified')
+const markdown = require('remark-parse')
+const remark2rehype = require('remark-rehype')
+const html = require('rehype-stringify')
+
+module.exports = [
+  {
+    id: '12321209',
+    title: 'Build CSS before Remix',
+    content: `
+When you have some custom CSS you are building, make sure to build it _before_
+you build remix. Otherwise, it may not be in place in time for remix to grab it.
+    `.trim(),
+    author: 'Kent C. Dodds',
+    createdDate: 1604702700000,
+    category: 'remix',
+  },
+  {
+    id: '123212093432',
+    title: 'DateTimeFormat options',
+    content: `
+To format these elaborations, I used the following code:
+
+\`\`\`javascript
+const formatDate = (date: Date) =>
+new Intl.DateTimeFormat('en-US', {
+day: 'numeric',
+month: 'short',
+year: 'numeric',
+}).format(date)
+\`\`\`
+    `.trim(),
+    author: 'Kent C. Dodds',
+    createdDate: 1604809560963,
+    category: 'dates',
+  },
+  {
+    id: '1232120342349',
+    title: 'Mock modules with Storybook',
+    content: `
+You customize the webpack config with the
+\`webpack.NormalModuleReplacementPlugin\`. It works surprisingly well. The
+biggest trick is figuring out which story is being referenced which you can
+sortof parse from the URL query params.
+    `.trim(),
+    author: 'Kent C. Dodds',
+    createdDate: 1604702700000,
+    category: 'remix',
+  },
+].map(({content, ...article}) => {
+  return {
+    ...article,
+    content: unified()
+      .use(markdown)
+      .use(remark2rehype)
+      .use(html)
+      .processSync(content)
+      .contents.toString(),
+  }
+})