blog listing page is mostly working

Author: jderochervlk

app/routes/MdxRoute.res

@@ -214,8 +214,8 @@ let default = () => {
       ? "ReScript Language Manual"
       : "Some other page"
   <>
-    <title> {React.string(attributes.metaTitle->Option.getOr(attributes.title))} </title>
-    <meta name="description" content={attributes.description->Option.getOr("")} />
+    <title> {React.string(attributes.metaTitle->Nullable.getOr(attributes.title))} </title>
+    <meta name="description" content={attributes.description->Nullable.getOr("")} />
     {if (pathname :> string) == "/docs/manual/api" {
       <ApiOverviewLayout.Docs> {component()} </ApiOverviewLayout.Docs>
     } else if (

mdx-manifest.json

@@ -97,7 +97,7 @@
     "slug": "2022-08-25-release-10-0-0",
     "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": "The first community powered release.\n"

public/blog/grid_0.jpeg:Zone.Identifier

@@ -0,0 +1,4 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=https://rescript-lang.org/blog
+HostUrl=https://rescript-lang.org/blog/grid_0.jpeg

src/Blog.res

@@ -105,9 +105,9 @@ module BlogCard = {
         </Link.String>
       </div>
       <div className="px-2">
-        //   <Link to=Url(`/blog/${slug}`)>
-        //     <h2 className="hl-4"> {React.string(title)} </h2>
-        //   </Link>
+        <Link.String to={`/blog/${slug}`}>
+          <h2 className="hl-4"> {React.string(title)} </h2>
+        </Link.String>
         <div className="captions text-gray-40 pt-1">
           {switch category {
           | Some(category) =>
@@ -154,6 +154,7 @@ module FeatureCard = {
             </div>
           | None => React.null
           }}
+
           {
             let className = "absolute top-0 h-full w-full object-cover"
             switch previewImg {
@@ -197,9 +198,9 @@ module FeatureCard = {
             <p className="body-md text-gray-70"> {React.string(firstParagraph)} </p>
           </div>
         </div>
-        // <Link to=Url(`/blog/${slug}`)>
-        //   <Button> {React.string("Read Article")} </Button>
-        // </Link>
+        <Link.String to={`/blog/${slug}`}>
+          <Button> {React.string("Read Article")} </Button>
+        </Link.String>
       </div>
     </section>
   }
@@ -225,11 +226,11 @@ let make = (~posts: array<BlogApi.post>, ~category: category): React.element =>
       let featureBox =
         <div className="w-full mb-24 lg:px-8 xl:px-0">
           <FeatureCard
-            previewImg=?{first.frontmatter.previewImg->Null.toOption}
+            previewImg=?{first.frontmatter.previewImg->Nullable.toOption}
             title=first.frontmatter.title
-            badge=?{first.frontmatter.badge->Null.toOption}
+            badge=?{first.frontmatter.badge->Nullable.toOption}
             author=first.frontmatter.author
-            firstParagraph=?{first.frontmatter.description->Null.toOption}
+            firstParagraph=?{first.frontmatter.description->Nullable.toOption}
             date={first.frontmatter.date->DateStr.toDate}
             slug={BlogApi.blogPathToSlug(first.path)}
           />
@@ -242,16 +243,17 @@ let make = (~posts: array<BlogApi.post>, ~category: category): React.element =>
           className="px-4 md:px-8 xl:px-0 grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-20 gap-y-12 md:gap-y-24 w-full"
         >
           {Array.map(rest, post => {
-            let badge = post.frontmatter.badge->Null.toOption
+            let badge = post.frontmatter.badge->Nullable.toOption
 
             <BlogCard
               key={post.path}
-              previewImg=?{post.frontmatter.previewImg->Null.toOption}
+              previewImg=?{post.frontmatter.previewImg->Nullable.toOption}
               title=post.frontmatter.title
               author=post.frontmatter.author
               ?badge
               date={post.frontmatter.date->DateStr.toDate}
-              slug={BlogApi.blogPathToSlug(post.path)}
+              // TODO RR7 format blog urls
+              slug={`/${encodeURI(post.frontmatter.title)}`}
             />
           })->React.array}
         </div>
@@ -262,7 +264,6 @@ let make = (~posts: array<BlogApi.post>, ~category: category): React.element =>
         postsBox
       </>
     }
-
     <>
       <div className="hidden sm:flex justify-center ">
         <div className="my-16 w-full max-w-48">
@@ -298,15 +299,6 @@ let make = (~posts: array<BlogApi.post>, ~category: category): React.element =>
   </>
 }
 
-// let getStaticProps_All: Next.GetStaticProps.t<props, params> = async _ctx => {
-//   let props = {
-//     posts: BlogApi.getLivePosts(),
-//     category: All,
-//   }
-
-//   {"props": props}
-// }
-
 // let getStaticProps_Archived: Next.GetStaticProps.t<props, params> = async _ctx => {
 //   let props = {
 //     posts: BlogApi.getArchivedPosts(),

src/BlogArticle.res

@@ -44,7 +44,8 @@ module AuthorBox = {
           | Bluesky(handle) => "https://bsky.app/profile/" ++ handle
           }}
           className="hover:text-gray-80"
-          rel="noopener noreferrer">
+          rel="noopener noreferrer"
+        >
           {React.string(author.fullname)}
         </a>
         <div className="text-gray-60"> {React.string(author.role)} </div>
@@ -148,17 +149,17 @@ let default = (props: props) => {
       <Meta
         siteName="ReScript Blog"
         title={title ++ " | ReScript Blog"}
-        description=?{description->Null.toOption}
-        ogImage={previewImg->Null.toOption->Option.getOr(Blog.defaultPreviewImg)}
+        description=?{description->Nullable.toOption}
+        ogImage={previewImg->Nullable.toOption->Option.getOr(Blog.defaultPreviewImg)}
       />
       <div className="mb-10 md:mb-20">
         <BlogHeader
           date
           author
           co_authors
           title
-          description={description->Null.toOption}
-          articleImg={articleImg->Null.toOption}
+          description={description->Nullable.toOption}
+          articleImg={articleImg->Nullable.toOption}
         />
       </div>
       <div className="flex justify-center">

src/BlogLoader.res

@@ -1,24 +1,24 @@
 let transform = (mdx: ReactRouter.Mdx.attributes): BlogApi.post => {
+  let archived = switch mdx.archived {
+  | Nullable.Value(archived) => archived
+  | _ => false
+  }
+  Console.log(mdx)
   {
     path: mdx.path,
-    archived: mdx.archived->Nullable.getOr(false),
+    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>),
       date: mdx.date,
-      previewImg: mdx.previewImg->Null.map(img => {
-        Console.log2("img", img)
-        img
-      }),
+      previewImg: mdx.previewImg,
       articleImg: mdx.articleImg,
       title: mdx.title,
-      badge: mdx.badge
-      ->Nullable.map(badge => BlogFrontmatter.decodeBadge(badge))
-      ->Nullable.toOption
-      ->Null.fromOption,
-      description: mdx.description->Null.fromOption,
+      badge: mdx.badge->Nullable.map(badge => BlogFrontmatter.decodeBadge(badge)),
+      description: mdx.description,
+      slug: `/blog${archived ? "/archived" : ""}/${mdx.slug}`,
     },
   }
 }

src/bindings/ReactRouter.res

@@ -132,16 +132,16 @@ module Mdx = {
     author: string,
     co_authors: array<author>,
     date: DateStr.t,
-    previewImg: Null.t<string>,
-    articleImg: Null.t<string>,
+    previewImg: Nullable.t<string>,
+    articleImg: Nullable.t<string>,
     badge: Nullable.t<string>,
     canonical: Path.t,
     category?: string,
-    description?: string,
     id?: string,
     keywords?: array<string>,
     name?: string,
-    metaTitle?: string,
+    description: Nullable.t<string>,
+    metaTitle: Nullable.t<string>,
     order?: int,
     path: string,
     section?: string,

src/common/BlogApi.res

@@ -149,7 +149,7 @@ module RssFeed = {
       getAllPosts()
       ->Array.map(post => {
         let fm = post.frontmatter
-        let description = Null.toOption(fm.description)->Option.getOr("")
+        let description = fm.description->Nullable.getOr("")
         {
           title: fm.title,
           href: baseUrl ++ "/blog/" ++ blogPathToSlug(post.path),

src/common/BlogFrontmatter.res

@@ -96,11 +96,12 @@ type t = {
   author: author,
   co_authors: array<author>,
   date: DateStr.t,
-  previewImg: Null.t<string>,
-  articleImg: Null.t<string>,
+  previewImg: Nullable.t<string>,
+  articleImg: Nullable.t<string>,
   title: string,
-  badge: Null.t<Badge.t>,
-  description: Null.t<string>,
+  badge: Nullable.t<Badge.t>,
+  description: Nullable.t<string>,
+  slug: string,
 }
 
 let decodeBadge = (str: string): Badge.t =>
@@ -147,20 +148,20 @@ let decode = (json: JSON.t): result<t, string> => {
     }
     let date = date->DateStr.fromString
     let badge = switch badge {
-    | Some(String(badge)) => badge->decodeBadge->Null.Value
-    | _ => Null
+    | Some(String(badge)) => badge->decodeBadge->Nullable.Value
+    | _ => Nullable.null
     }
     let previewImg = switch previewImg {
-    | Some(String(previewImg)) => previewImg->Null.Value
-    | _ => Null
+    | Some(String(previewImg)) => previewImg->Nullable.Value
+    | _ => Nullable.null
     }
     let articleImg = switch articleImg {
-    | Some(String(articleImg)) => articleImg->Null.Value
-    | _ => Null
+    | Some(String(articleImg)) => articleImg->Nullable.Value
+    | _ => Nullable.null
     }
     let description = switch description {
-    | Some(String(description)) => description->Null.Value
-    | _ => Null
+    | Some(String(description)) => description->Nullable.Value
+    | _ => Nullable.null
     }
     Ok({
       author,
@@ -171,6 +172,7 @@ let decode = (json: JSON.t): result<t, string> => {
       title,
       badge,
       description,
+      slug: "/", // TODO RR7 - fix this to be the actual slug
     })
   | exception AuthorNotFound(str) => Error(str)
   | _ => Error(`Failed to decode: ${JSON.stringify(json)}`)