Use __ghEditHref in layouts

Author: ryyppy

common/DocFrontmatter.js

@@ -2,6 +2,7 @@ type t = {
   title: string,
   description: Js.null<string>,
   canonical: Js.null<string>,
+  ghEditHref: string,
 }
 
 let decode = (json): result<t, string> => {
@@ -10,6 +11,7 @@ let decode = (json): result<t, string> => {
     title: field("title", string, json),
     description: optional(field("description", string), json)->Js.Null.fromOption,
     canonical: optional(field("canonical", string), json)->Js.Null.fromOption,
+    ghEditHref: field("__ghEditHref", string, json),
   }) catch {
   | DecodeError(errMsg) => Error(errMsg)
   }

common/DocFrontmatter.res

@@ -120,7 +120,7 @@ let make = (
   | None => title
   }
 
-  let metaElement = switch frontmatter {
+  let (metaElement, editHref) = switch frontmatter {
   | Some(frontmatter) =>
     switch DocFrontmatter.decode(frontmatter) {
     | Ok(fm) =>
@@ -130,14 +130,15 @@ let make = (
       | Some(titleCategory) => fm.title ++ (" | " ++ titleCategory)
       | None => title
       }
-      <Meta title ?description ?canonical />
-    | Error(_) => React.null
+      let meta = <Meta title ?description ?canonical />
+      (meta, Some(fm.ghEditHref))
+    | Error(_) => (React.null, None)
     }
-  | None => React.null
+  | None => (React.null, None)
   }
 
   <SidebarLayout
-    metaTitle theme components sidebarState=(isSidebarOpen, setSidebarOpen) sidebar ?breadcrumbs>
+    metaTitle theme components sidebarState=(isSidebarOpen, setSidebarOpen) sidebar ?breadcrumbs ?editHref>
     metaElement children
   </SidebarLayout>
 }

layouts/DocsLayout.js

@@ -204,6 +204,7 @@ let make = (
   ~metaTitle: string,
   ~theme: ColorTheme.t,
   ~components: Mdx.Components.t,
+  ~editHref: option<string>=?,
   ~sidebarState: (bool, (bool => bool) => unit),
   // (Sidebar, toggleSidebar) ... for toggling sidebar in mobile view
   ~sidebar: React.element,
@@ -243,6 +244,11 @@ let make = (
     )
   }, [])
 
+  let editLinkEl = switch editHref {
+  | Some(href) => <a href className="inline text-14 hover:underline text-fire" target="_blank" rel="noopener noreferrer"> {React.string("Edit")} </a>
+  | None => React.null
+  }
+
   <>
     <Meta title=metaTitle />
     <div className={"mt-16 min-w-320 " ++ theme}>
@@ -263,7 +269,9 @@ let make = (
                       toggleSidebar()
                     }}
                   />
-                  <div className="truncate overflow-x-auto touch-scroll"> breadcrumbs </div>
+                  <div className="truncate overflow-x-auto touch-scroll flex items-center space-x-4 md:justify-between mr-4 w-full">
+                    breadcrumbs editLinkEl
+                  </div>
                 </div>
                 <div className={hasBreadcrumbs ? "mt-10" : "-mt-4"}>
                   <Mdx.Provider components> children </Mdx.Provider>
@@ -273,7 +281,7 @@ let make = (
           </div>
         </div>
       </div>
-          <Footer/>
+      <Footer />
     </div>
   </>
 }