blog post is rendering

Author: jderochervlk

_blogposts/2022-08-25-release-10-0-0.mdx

@@ -1,7 +1,7 @@
 ---
 author: rescript-team
 date: "2022-08-25"
-previewImg: static/blog/grid_0.jpeg
+previewImg: /blog/grid_0.jpeg
 title: ReScript 10.0
 badge: release
 description: |

app/routes.res

@@ -1,5 +1,5 @@
 open ReactRouter.Routes
-open ReactRouter.Mdx
+open Mdx
 
 let stdlibPaths = {
   let rawFile = await Node.Fs.readFile("./docs/api/stdlib.json", "utf-8")
@@ -30,5 +30,5 @@ let default = [
   route("docs/manual/api/belt", "./routes/ApiRoute.mjs", ~options={id: "api-belt"}),
   route("docs/manual/api/dom", "./routes/ApiRoute.mjs", ~options={id: "api-dom"}),
   ...stdlibRoutes,
-  ...routes("./routes/MdxRoute.mjs"),
+  ...mdxRoutes("./routes/MdxRoute.mjs"),
 ]

app/routes/BlogRoute.res

@@ -1,7 +1,7 @@
 type loaderData = {posts: array<BlogApi.post>, category: Blog.category}
 
 let loader: ReactRouter.Loader.t<loaderData> = async ({request}) => {
-  let posts: array<BlogApi.post> = BlogLoader.posts()
+  let posts: array<BlogApi.post> = MdxRoute.posts()
   let data = {posts, category: All}
   data
 }

app/routes/MdxRoute.res

@@ -5,6 +5,7 @@ type loaderData = {
   ...Mdx.t,
   categories: array<SidebarLayout.Sidebar.Category.t>,
   entries: array<TableOfContents.entry>,
+  blogPost?: BlogApi.post,
 }
 
 /**
@@ -43,30 +44,6 @@ let components = {
   "Warn": Markdown.Warn.make,
 }
 
-// The loadAllMdx function logs out all of the file contents as it reads them, which is noisy and not useful.
-// We can suppress that logging with this helper function.
-let allMdx = await Shims.runWithoutLogging(() => loadAllMdx())
-
-let sortSection = mdxPages =>
-  Array.toSorted(mdxPages, (a: Mdx.attributes, b: Mdx.attributes) =>
-    switch (a.order, b.order) {
-    | (Some(a), Some(b)) => a > b ? 1.0 : -1.0
-    | _ => -1.0
-    }
-  )
-
-let groupBySection = mdxPages =>
-  Array.reduce(mdxPages, (Dict.make() :> Dict.t<array<Mdx.attributes>>), (acc, item) => {
-    let section = item.section->Option.flatMap(Dict.get(acc, _))
-    switch section {
-    // If the section already exists, add this item to it
-    | Some(section) => section->Array.push(item)
-    // otherwise create a new section with this item
-    | None => item.section->Option.forEach(section => acc->Dict.set(section, [item]))
-    }
-    acc
-  })
-
 let convertToNavItems = (items, rootPath) =>
   Array.map(items, (item): SidebarLayout.Sidebar.NavItem.t => {
     {
@@ -75,9 +52,6 @@ let convertToNavItems = (items, rootPath) =>
     }
   })
 
-let filterMdxPages = (mdxPages, path) =>
-  Array.filter(mdxPages, mdx => (mdx.path :> string)->String.includes(path))
-
 let getGroup = (groups, groupName): SidebarLayout.Sidebar.Category.t => {
   {
     name: groupName,
@@ -134,6 +108,8 @@ let reactTableOfContents = () => {
   categories
 }
 
+let posts = () => allMdx->filterMdxPages("blog")->Array.map(BlogLoader.transform)
+
 let loader: Loader.t<loaderData> = async ({request}) => {
   let {pathname} = WebAPI.URL.make(~url=request.url)
 
@@ -143,13 +119,12 @@ let loader: Loader.t<loaderData> = async ({request}) => {
   if pathname->String.includes("blog") {
     let posts = blogPosts()
 
-    Console.log2("posts", posts)
-
     let res: loaderData = {
       __raw: mdx.__raw,
       attributes: mdx.attributes,
       entries: [],
       categories: [],
+      blogPost: mdx.attributes->BlogLoader.transform,
     }
 
     res
@@ -207,8 +182,11 @@ let default = () => {
   let component = useMdxComponent(~components)
   let attributes = useMdxAttributes()
 
-  let {categories, entries} = useLoaderData()
+  let loaderData: loaderData = useLoaderData()
+
+  let {entries, categories} = loaderData
 
+  // TODO: get actual meta categories working
   let metaTitleCategory =
     (pathname :> string)->String.includes("docs/manual")
       ? "ReScript Language Manual"
@@ -226,8 +204,13 @@ let default = () => {
         <div className="markdown-body"> {component()} </div>
       </DocsLayout>
     } else {
-      // TODO Handle blog pages
-      React.null
+      switch loaderData.blogPost {
+      | Some({frontmatter, archived, path}) => {
+          Console.log(frontmatter)
+          <BlogArticle frontmatter isArchived=archived path> {component()} </BlogArticle>
+        }
+      | None => React.null // TODO: RR7 show an error
+      }
     }}
   </>
 

src/ApiDocs.res

@@ -440,8 +440,6 @@ let processStaticProps = (~slug: array<string>) => {
 
   let _content = content
 
-  // Console.log(content)
-
   switch content {
   | Some(json) =>
     let {items, docstrings, deprecated, name} = Docgen.decodeFromJson(json)

src/BlogArticle.res

@@ -23,7 +23,12 @@ module Params = {
   type t = {slug: string}
 }
 
-type props = {mdxSource: MdxRemote.output, isArchived: bool, path: string}
+type props = {
+  children: React.element,
+  isArchived: bool,
+  path: string,
+  frontmatter: BlogFrontmatter.t,
+}
 
 module Line = {
   @react.component
@@ -69,6 +74,8 @@ module BlogHeader = {
 
     let authors = Array.concat([author], co_authors)
 
+    Console.log2("authors", authors)
+
     <div className="flex flex-col items-center">
       <div className="w-full max-w-740">
         <div className="text-gray-60 body-sm mb-5">
@@ -114,18 +121,8 @@ module BlogHeader = {
   }
 }
 
-let default = (props: props) => {
-  let {mdxSource, isArchived, path} = props
-
-  let children =
-    <MdxRemote
-      frontmatter={mdxSource.frontmatter}
-      compiledSource={mdxSource.compiledSource}
-      scope={mdxSource.scope}
-      components={MarkdownComponents.default}
-    />
-
-  let fm = mdxSource.frontmatter->BlogFrontmatter.decode
+let make = (props: props) => {
+  let {children, isArchived, path, frontmatter} = props
 
   let archivedNote = isArchived
     ? {
@@ -143,8 +140,9 @@ let default = (props: props) => {
       }
     : React.null
 
-  let content = switch fm {
-  | Ok({date, author, co_authors, title, description, articleImg, previewImg}) =>
+  let {date, author, co_authors, title, description, articleImg, previewImg} = frontmatter
+
+  <MainLayout>
     <div className="w-full">
       <Meta
         siteName="ReScript Blog"
@@ -182,60 +180,5 @@ let default = (props: props) => {
         </div>
       </div>
     </div>
-
-  | Error(msg) =>
-    <div>
-      <Markdown.Warn>
-        <h2 className="font-bold text-gray-80 text-24 mb-2">
-          {React.string("Could not parse file '_blogposts/" ++ (path ++ ".mdx'"))}
-        </h2>
-        <p>
-          {React.string("The content of this blog post will be displayed as soon as all
-            required frontmatter data has been added.")}
-        </p>
-        <p className="font-bold mt-4"> {React.string("Errors:")} </p>
-        {React.string(msg)}
-      </Markdown.Warn>
-    </div>
-  }
-  <MainLayout> content </MainLayout>
-}
-
-let getStaticProps: Next.GetStaticProps.t<props, Params.t> = async ctx => {
-  open Next.GetStaticProps
-  let {params} = ctx
-
-  let path = switch BlogApi.getAllPosts()->Array.find(({path}) =>
-    BlogApi.blogPathToSlug(path) == params.slug
-  ) {
-  | None => params.slug
-  | Some({path}) => path
-  }
-
-  let filePath = Node.Path.resolve("_blogposts", path)
-
-  let isArchived = String.startsWith(path, "archive/")
-
-  let source = filePath->Node.Fs.readFileSync
-
-  let mdxSource = await MdxRemote.serialize(
-    source,
-    {parseFrontmatter: true, mdxOptions: MdxRemote.defaultMdxOptions},
-  )
-
-  let props = {mdxSource, isArchived, path}
-
-  {"props": props}
-}
-
-let getStaticPaths: Next.GetStaticPaths.t<Params.t> = async () => {
-  open Next.GetStaticPaths
-
-  let paths = BlogApi.getAllPosts()->Array.map(postData => {
-    params: {
-      Params.slug: BlogApi.blogPathToSlug(postData.path),
-    },
-  })
-
-  {paths, fallback: false}
+  </MainLayout>
 }

src/BlogArticle.resi

@@ -2,9 +2,11 @@ module Params: {
   type t = {slug: string}
 }
 
-type props = {mdxSource: MdxRemote.output, isArchived: bool, path: string}
-
-let default: props => React.element
+type props = {
+  children: React.element,
+  isArchived: bool,
+  path: string,
+  frontmatter: BlogFrontmatter.t,
+}
 
-let getStaticProps: Next.GetStaticProps.t<props, Params.t>
-let getStaticPaths: Next.GetStaticPaths.t<Params.t>
+let make: props => React.element

src/BlogLoader.res

@@ -1,26 +1,22 @@
-let transform = (mdx: ReactRouter.Mdx.attributes): BlogApi.post => {
+let transform = (mdx: Mdx.attributes): BlogApi.post => {
   let archived = switch mdx.archived {
   | Nullable.Value(archived) => archived
   | _ => false
   }
-  Console.log(mdx)
   {
-    path: mdx.path,
+    path: `${archived ? "archived/" : ""}${mdx.slug}`,
     archived,
     frontmatter: {
       author: BlogFrontmatter.authors
       ->Array.find(author => author.username->String.includes(mdx.author))
       ->Option.getOrThrow, // TODO: this is probably unsafe and needs to be fixed
-      co_authors: (mdx.co_authors :> array<BlogFrontmatter.author>),
+      co_authors: (mdx.co_authors->Nullable.getOr([]) :> array<BlogFrontmatter.author>),
       date: mdx.date,
       previewImg: mdx.previewImg,
       articleImg: mdx.articleImg,
       title: mdx.title,
       badge: mdx.badge->Nullable.map(badge => BlogFrontmatter.decodeBadge(badge)),
       description: mdx.description,
-      slug: `/blog${archived ? "/archived" : ""}/${mdx.slug}`,
     },
   }
 }
-
-let posts = () => MdxRoute.allMdx->MdxRoute.filterMdxPages("blog")->Array.map(transform)