diff --git a/app/routes/_site+/blog_.$slug.tsx b/app/routes/_site+/blog_.$slug.tsx
index 5323b65..5ecb1d3 100644
--- a/app/routes/_site+/blog_.$slug.tsx
+++ b/app/routes/_site+/blog_.$slug.tsx
@@ -7,6 +7,10 @@ import {
} from '@remix-run/node'
import { useLoaderData } from '@remix-run/react'
import { serverOnly$ } from 'vite-env-only/macros'
+import {
+ GeneralErrorBoundary,
+ generalNotFoundHandler,
+} from '#app/components/error-boundary.tsx'
import { getPostInfos, getPostMeta } from '#app/utils/mdx/blog.server'
import { bundleMDX } from '#app/utils/mdx/compile-mdx.server'
import { useMdxComponent } from '#app/utils/mdx/mdx'
@@ -44,8 +48,20 @@ export const loader = async ({ params }: LoaderFunctionArgs) => {
const slug = params.slug
const timing = new ServerTiming()
- timing.time('get post mdx bundle', 'Get post mdx bundle')
+ timing.time('get post mdx entry', 'Get post mdx entry')
const mdxEntry = getMdxEntry('blog', slug)
+ if (!mdxEntry) {
+ timing.timeEnd('get post mdx entry')
+ throw new Response('Not found', {
+ status: 404,
+ headers: {
+ 'Server-Timing': timing.toString(),
+ },
+ })
+ }
+ timing.timeEnd('get post mdx entry')
+
+ timing.time('get post mdx bundle', 'Get post mdx bundle')
const mdxBundle = await getMdxBundleSource(mdxEntry)
timing.timeEnd('get post mdx bundle')
@@ -83,3 +99,13 @@ export default function BlogPost() {
)
}
+
+export function ErrorBoundary() {
+ return (
+
+ )
+}
diff --git a/app/utils/mdx/blog.server.ts b/app/utils/mdx/blog.server.ts
index e7a649b..f6812ae 100644
--- a/app/utils/mdx/blog.server.ts
+++ b/app/utils/mdx/blog.server.ts
@@ -48,6 +48,11 @@ export async function getPostInfos(): Promise> {
try {
const entry = getMdxEntry('blog', slug)
+ if (!entry) {
+ throw new Error(
+ `No file named ${slug} with valid extension found in the blog directory`,
+ )
+ }
const file = await readFile(entry.mdxPath, 'utf-8')
const meta = getPostMeta(file)
diff --git a/app/utils/mdx/mdx.server.ts b/app/utils/mdx/mdx.server.ts
index d07eb8c..721b66c 100644
--- a/app/utils/mdx/mdx.server.ts
+++ b/app/utils/mdx/mdx.server.ts
@@ -19,15 +19,25 @@ type Entry = {
const mdxDirPath = resolve(rootPath, 'mdx')
const VALID_EXTENSION = ['md', 'mdx']
-export function getMdxEntry(category: string, name: string): Entry {
+export function getMdxEntry(category: string, name: string): Entry | null {
const maybeDirPath = resolve(mdxDirPath, category, name)
if (existsSync(maybeDirPath)) {
const dirPath = maybeDirPath
+ const mdxPath = getFilePathInDirectoryByName(
+ dirPath,
+ 'index',
+ VALID_EXTENSION,
+ )
+
+ if (!mdxPath) {
+ return null
+ }
+
return {
name,
isFile: false,
bundlePath: dirPath,
- mdxPath: getFilePathInDirectoryByName(dirPath, 'index', VALID_EXTENSION),
+ mdxPath,
}
}
@@ -37,6 +47,10 @@ export function getMdxEntry(category: string, name: string): Entry {
VALID_EXTENSION,
)
+ if (!filePath) {
+ return null
+ }
+
return {
name,
isFile: true,
@@ -76,7 +90,7 @@ async function getFilesInDirectory(
const fileSets = await Promise.all(
dir.map((dirent) =>
- getFilesInDirectory(resolve(dirent.path, dirent.name), rootPath),
+ getFilesInDirectory(resolve(dirent.parentPath, dirent.name), rootPath),
),
)
diff --git a/app/utils/path.server.ts b/app/utils/path.server.ts
index b704def..392cf1e 100644
--- a/app/utils/path.server.ts
+++ b/app/utils/path.server.ts
@@ -18,7 +18,5 @@ export function getFilePathInDirectoryByName(
}
}
- throw new Error(
- `No file named ${name} with valid extension found in directory => ${dirPath}`,
- )
+ return null
}