working on blog listing page

Author: jderochervlk

app/routes/BlogRoute.res

@@ -1,4 +1,13 @@
+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 data = {posts, category: All}
+  data
+}
+
 @react.component
 let default = () => {
-  React.string("Blog Route Placeholder")
+  let {posts, category} = ReactRouter.useLoaderData()
+  <Blog posts category />
 }

app/routes/MdxRoute.res

@@ -90,6 +90,10 @@ let getGroup = (groups, groupName): SidebarLayout.Sidebar.Category.t => {
 let getAllGroups = (groups, groupNames): array<SidebarLayout.Sidebar.Category.t> =>
   groupNames->Array.map(item => getGroup(groups, item))
 
+let blogPosts = () => {
+  allMdx->filterMdxPages("blog")
+}
+
 // These are the pages for the language manual, sorted by their "order" field in the frontmatter
 let manualTableOfContents = () => {
   let groups =
@@ -137,6 +141,10 @@ let loader: Loader.t<loaderData> = async ({request}) => {
 
   // TODO: actually render the blog pages
   if pathname->String.includes("blog") {
+    let posts = blogPosts()
+
+    Console.log2("posts", posts)
+
     let res: loaderData = {
       __raw: mdx.__raw,
       attributes: mdx.attributes,

app/routes/MdxRoute.resi

@@ -207,11 +207,8 @@ module FeatureCard = {
 
 type params = {slug: string}
 
-type props = {posts: array<BlogApi.post>, category: category}
-
-let default = (props: props): React.element => {
-  let {posts, category} = props
-
+@react.component
+let make = (~posts: array<BlogApi.post>, ~category: category): React.element => {
   let content = if Array.length(posts) === 0 {
     /* <div> {React.string("Currently no posts available")} </div>; */
     <div className="mt-8">
@@ -301,20 +298,20 @@ let default = (props: props): React.element => {
   </>
 }
 
-let getStaticProps_All: Next.GetStaticProps.t<props, params> = async _ctx => {
-  let props = {
-    posts: BlogApi.getLivePosts(),
-    category: All,
-  }
+// let getStaticProps_All: Next.GetStaticProps.t<props, params> = async _ctx => {
+//   let props = {
+//     posts: BlogApi.getLivePosts(),
+//     category: All,
+//   }
 
-  {"props": props}
-}
+//   {"props": props}
+// }
 
-let getStaticProps_Archived: Next.GetStaticProps.t<props, params> = async _ctx => {
-  let props = {
-    posts: BlogApi.getArchivedPosts(),
-    category: Archived,
-  }
+// let getStaticProps_Archived: Next.GetStaticProps.t<props, params> = async _ctx => {
+//   let props = {
+//     posts: BlogApi.getArchivedPosts(),
+//     category: Archived,
+//   }
 
-  {"props": props}
-}
+//   {"props": props}
+// }

src/Blog.res

@@ -0,0 +1,26 @@
+let transform = (mdx: ReactRouter.Mdx.attributes): BlogApi.post => {
+  {
+    path: mdx.path,
+    archived: mdx.archived->Nullable.getOr(false),
+    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>),
+      date: mdx.date,
+      previewImg: mdx.previewImg->Null.map(img => {
+        Console.log2("img", img)
+        img
+      }),
+      articleImg: mdx.articleImg,
+      title: mdx.title,
+      badge: mdx.badge
+      ->Nullable.map(badge => BlogFrontmatter.decodeBadge(badge))
+      ->Nullable.toOption
+      ->Null.fromOption,
+      description: mdx.description->Null.fromOption,
+    },
+  }
+}
+
+let posts = () => MdxRoute.allMdx->MdxRoute.filterMdxPages("blog")->Array.map(transform)

src/Blog.resi

@@ -108,7 +108,31 @@ module Routes = {
 }
 
 module Mdx = {
+  type social = X(string) | Bluesky(string)
+
+  type author = {
+    username: string,
+    fullname: string,
+    role: string,
+    imgUrl: string,
+    social: social,
+  }
+
+  type badge =
+    | Release
+    | Testing
+    | Preview
+    | Roadmap
+    | Community
+
   type attributes = {
+    archived: Nullable.t<bool>,
+    author: string,
+    co_authors: array<author>,
+    date: DateStr.t,
+    previewImg: Null.t<string>,
+    articleImg: Null.t<string>,
+    badge: Nullable.t<string>,
     canonical: Path.t,
     category?: string,
     description?: string,