lib/mdx.js

@@ -85,17 +85,15 @@ export async function getFileBySlug(type, slug) {
 export async function getAllFilesFrontMatter(type) {
   const files = fs.readdirSync(path.join(root, 'data', type))
 
-  const allFrontMatter = files.reduce((allPosts, postSlug) => {
-    const source = fs.readFileSync(path.join(root, 'data', type, postSlug), 'utf8')
+  const allFrontMatter = []
+
+  files.forEach((file) => {
+    const source = fs.readFileSync(path.join(root, 'data', type, file), 'utf8')
     const { data } = matter(source)
-    return [
-      {
-        ...data,
-        slug: postSlug.replace(/\.(mdx|md)/, ''),
-      },
-      ...allPosts,
-    ]
-  }, [])
+    if (data.draft !== true) {
+      allFrontMatter.push({ ...data, slug: file.replace(/\.(mdx|md)/, '') })
+    }
+  })
 
   return allFrontMatter.sort((a, b) => dateSortDesc(a.date, b.date))
 }

pages/blog/[slug].js

@@ -3,6 +3,7 @@ import hydrate from 'next-mdx-remote/hydrate'
 import { getFiles, getFileBySlug, getAllFilesFrontMatter } from '@/lib/mdx'
 import PostLayout from '@/layouts/PostLayout'
 import MDXComponents from '@/components/MDXComponents'
+import PageTitle from '@/components/PageTitle'
 import generateRss from '@/lib/generate-rss'
 
 export async function getStaticPaths() {
@@ -40,10 +41,19 @@ export default function Blog({ post, prev, next }) {
 
   return (
     <>
-      {frontMatter.draft !== true && (
+      {frontMatter.draft !== true ? (
         <PostLayout frontMatter={frontMatter} prev={prev} next={next}>
           {content}
         </PostLayout>
+      ) : (
+        <div className="mt-24 text-center">
+          <PageTitle>
+            Under Construction{' '}
+            <span role="img" aria-label="roadwork sign">
+              🚧
+            </span>
+          </PageTitle>
+        </div>
       )}
     </>
   )