Add frontmatter parsing support and enable frontmatter based Meta injection in v8.0.0 pages

Author: ryyppy

common/App.re

@@ -42,6 +42,8 @@ type props = {
   "pageProps": pageProps,
 };
 
+[@bs.get] external frontmatter: React.component(Js.t({.})) => Js.Json.t = "frontmatter";
+
 let default = (props: props): React.element => {
   let component = props##"Component";
   let pageProps = props##pageProps;
@@ -59,7 +61,7 @@ let default = (props: props): React.element => {
     | Latest =>
       <ManualDocsLayout.Prose> content </ManualDocsLayout.Prose>
     | Version("v8.0.0") =>
-      <ManualDocsLayout8_0_0.Prose> content </ManualDocsLayout8_0_0.Prose>
+      <ManualDocsLayout8_0_0.Prose frontmatter=component->frontmatter> content </ManualDocsLayout8_0_0.Prose>
     | _ =>
       React.null
     }

common/DocFrontmatter.re

@@ -0,0 +1,20 @@
+type t = {
+  title: string,
+  description: Js.null(string),
+  canonical: Js.null(string),
+};
+
+let decode = (json): result(t, string) => {
+  open! Json.Decode;
+  try(
+    Ok({
+      title: field("title", string, json),
+      description:
+        optional(field("description", string), json)->Js.Null.fromOption,
+      canonical:
+        optional(field("canonical", string), json)->Js.Null.fromOption,
+    })
+  ) {
+  | DecodeError(errMsg) => Error(errMsg)
+  };
+};

layouts/DocsLayout.re

@@ -309,6 +309,7 @@ let make =
     (
       ~breadcrumbs: option(list(UrlPath.breadcrumb))=?,
       ~title: string,
+      ~frontmatter: option(Js.Json.t)=?,
       ~version: option(string)=?,
       ~activeToc: option(Toc.t)=?,
       ~categories: array(Category.t),
@@ -368,13 +369,28 @@ let make =
 
   let metaTitle = title ++ " | ReScript Documentation";
 
+  let metaElement =
+    switch (frontmatter) {
+    | Some(frontmatter) =>
+      switch (DocFrontmatter.decode(frontmatter)) {
+      | Ok(fm) =>
+        let canonical = Js.Null.toOption(fm.canonical);
+        let description = Js.Null.toOption(fm.description);
+        let title = fm.title ++ " | ReScript Language Manual";
+        <Meta title ?description ?canonical />;
+      | Error(_) => React.null
+      }
+    | None => React.null
+    };
+
   <SidebarLayout
     metaTitle
     theme
     components
     sidebarState=(isSidebarOpen, setSidebarOpen)
     sidebar
     ?breadcrumbs>
+    metaElement
     children
   </SidebarLayout>;
 };

layouts/ManualDocsLayout8_0_0.re

@@ -118,7 +118,7 @@ let categories = [|
 
 module Docs = {
   [@react.component]
-  let make = (~components=Markdown.default, ~children) => {
+  let make = (~frontmatter: option(Js.Json.t)=?, ~components=Markdown.default, ~children) => {
     let router = Next.Router.useRouter();
     let route = router.route;
 
@@ -161,6 +161,7 @@ module Docs = {
       components
       categories
       version
+      ?frontmatter
       title
       ?activeToc
       ?breadcrumbs>
@@ -171,8 +172,8 @@ module Docs = {
 
 module Prose = {
   [@react.component]
-  let make = (~children) => {
-    <Docs components=Markdown.default>
+  let make = (~frontmatter: option(Js.Json.t)=?, ~children) => {
+    <Docs ?frontmatter components=Markdown.default>
       children
     </Docs>;
   };