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 }