ENG-437 Remove Error from Blog Build (Closes #71) (#203)

* Refactor generateStaticParams to utilize getFileMetadata for filtering published markdown files in blog and docs pages

* Refactor page components in blog and docs to use arrow functions

* Update apps/website/app/utils/getFileMetadata.ts

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Update apps/website/app/(home)/blog/[slug]/page.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Author: mdroidian

apps/website/app/(docs)/docs/roam/[slug]/page.tsx

@@ -8,6 +8,7 @@ import { TableOfContents } from "~/components/TableOfContents";
 import { getProcessedMarkdownFile } from "~/utils/getProcessedMarkdownFile";
 import { collectSections } from "~/utils/getSections";
 import { PrevNextLinks } from "~/components/PrevNextLinks";
+import { getFileMetadata } from "~/utils/getFileMetadata";
 
 type Params = {
   params: Promise<{
@@ -18,7 +19,7 @@ type Params = {
 const PATH = "app/(docs)/docs/roam/pages";
 const DIRECTORY = path.join(process.cwd(), PATH);
 
-export default async function Page({ params }: Params) {
+const Page = async ({ params }: Params) => {
   try {
     const { slug } = await params;
     const { data, contentHtml } = await getProcessedMarkdownFile({
@@ -45,9 +46,11 @@ export default async function Page({ params }: Params) {
     console.error("Error rendering docs page:", error);
     return notFound();
   }
-}
+};
+
+export default Page;
 
-export async function generateStaticParams() {
+export const generateStaticParams = async () => {
   try {
     const directoryExists = await fs
       .stat(DIRECTORY)
@@ -61,18 +64,32 @@ export async function generateStaticParams() {
 
     const files = await fs.readdir(DIRECTORY);
 
-    return files
-      .filter((filename) => filename.endsWith(".md"))
-      .map((filename) => ({
+    const mdFiles = files.filter((filename) => filename.endsWith(".md"));
+
+    const publishedFiles = await Promise.all(
+      mdFiles.map(async (filename) => {
+        const { published } = await getFileMetadata({
+          filename,
+          directory: DIRECTORY,
+        });
+        return { filename, published };
+      }),
+    );
+
+    return publishedFiles
+      .filter(({ published }) => published)
+      .map(({ filename }) => ({
         slug: filename.replace(/\.md$/, ""),
       }));
   } catch (error) {
     console.error("Error generating static params:", error);
     return [];
   }
-}
+};
 
-export async function generateMetadata({ params }: Params): Promise<Metadata> {
+export const generateMetadata = async ({
+  params,
+}: Params): Promise<Metadata> => {
   try {
     const { slug } = await params;
     const { data } = await getProcessedMarkdownFile({
@@ -90,4 +107,4 @@ export async function generateMetadata({ params }: Params): Promise<Metadata> {
       title: "Docs",
     };
   }
-}
+};

apps/website/app/(home)/blog/[slug]/page.tsx

@@ -4,14 +4,15 @@ import { notFound } from "next/navigation";
 import { Metadata } from "next";
 import { getProcessedMarkdownFile } from "~/utils/getProcessedMarkdownFile";
 import { BLOG_PATH } from "~/data/constants";
+import { getFileMetadata } from "~/utils/getFileMetadata";
 
 type Params = {
   params: Promise<{
     slug: string;
   }>;
 };
 
-export default async function BlogPost({ params }: Params) {
+const BlogPost = async ({ params }: Params) => {
   try {
     const { slug } = await params;
     const { data, contentHtml } = await getProcessedMarkdownFile({
@@ -41,41 +42,60 @@ export default async function BlogPost({ params }: Params) {
     console.error("Error rendering blog post:", error);
     return notFound();
   }
-}
+};
 
-export async function generateStaticParams() {
+export const generateStaticParams = async () => {
   try {
     const blogPath = path.resolve(process.cwd(), BLOG_PATH);
-    // 1) Check if the directory exists
     const directoryExists = await fs
       .stat(blogPath)
       .then((stats) => stats.isDirectory())
       .catch(() => false);
 
-    // 2) If it's missing, return empty
     if (!directoryExists) {
       console.log(
         "No app/blog/posts directory found. Returning empty params...",
       );
       return [];
     }
 
-    // 3) If it exists, read it
     const files = await fs.readdir(blogPath);
 
-    // 4) Filter .md files to build the slug array
-    return files
-      .filter((filename) => filename.endsWith(".md"))
-      .map((filename) => ({
+    const mdFiles = files.filter((filename) => filename.endsWith(".md"));
+
+    const results = await Promise.allSettled(
+      mdFiles.map(async (filename) => {
+        try {
+          const { published } = await getFileMetadata({
+            filename,
+            directory: BLOG_PATH,
+          });
+          return { filename, published };
+        } catch (error) {
+          console.error(`Skipping ${filename} due to metadata error:`, error);
+          return { filename, published: false };
+        }
+      }),
+    );
+
+    const publishedFiles = results
+      .filter((result) => result.status === 'fulfilled')
+      .map((result) => result.value);
+
+    return publishedFiles
+      .filter(({ published }) => published)
+      .map(({ filename }) => ({
         slug: filename.replace(/\.md$/, ""),
       }));
   } catch (error) {
     console.error("Error generating static params:", error);
     return [];
   }
-}
+};
 
-export async function generateMetadata({ params }: Params): Promise<Metadata> {
+export const generateMetadata = async ({
+  params,
+}: Params): Promise<Metadata> => {
   try {
     const { slug } = await params;
     const { data } = await getProcessedMarkdownFile({
@@ -93,4 +113,6 @@ export async function generateMetadata({ params }: Params): Promise<Metadata> {
       title: "Blog Post",
     };
   }
-}
+};
+
+export default BlogPost;

apps/website/app/utils/getFileMetadata.ts

@@ -0,0 +1,29 @@
+import matter from "gray-matter";
+import { PageFrontmatter, PageSchema } from "~/types/schema";
+import { getFileContent } from "~/utils/getFileContent";
+
+type Props = {
+  filename: string;
+  directory: string;
+};
+
+export const getFileMetadata = async ({
+  filename,
+  directory,
+}: Props): Promise<PageFrontmatter> => {
+  try {
+    const fileContent = await getFileContent({
+      filename,
+      directory,
+    });
+    const { data } = matter(fileContent);
+    return PageSchema.parse(data);
+  } catch (error) {
+    console.error(`Error parsing metadata for ${filename}:`, error);
+    throw new Error(
+      `Invalid frontmatter in ${filename}: ${
+        error instanceof Error ? error.message : 'Unknown error'
+      }`
+    );
+  }
+};