fix blog not found

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() {
 		</div>
 	)
 }
+
+export function ErrorBoundary() {
+	return (
+		<GeneralErrorBoundary
+			statusHandlers={{
+				404: generalNotFoundHandler,
+			}}
+		/>
+	)
+}

app/utils/mdx/blog.server.ts

@@ -48,6 +48,11 @@ export async function getPostInfos(): Promise<Array<PostInfo>> {
 
 			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)
 

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),
 			),
 		)
 

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
 }