Version switching between v8.0.0 / latest manual

bindings/Next.re

@@ -104,6 +104,8 @@ module Router = {
     events: Events.t,
   };
 
+  [@bs.send] external push: (router, string ) => unit = "push";
+
   [@bs.module "next/router"] external useRouter: unit => router = "useRouter";
 };
 

common/App.re

@@ -42,6 +42,10 @@ 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;
@@ -54,8 +58,18 @@ let default = (props: props): React.element => {
 
   switch (url) {
   // docs routes
-  | {base: [|"docs", "manual"|], version: Latest} =>
-    <ManualDocsLayout.Prose> content </ManualDocsLayout.Prose>
+  | {base: [|"docs", "manual"|], version} =>
+    switch (version) {
+    | Latest =>
+      <ManualDocsLayout.Prose frontmatter={component->frontmatter}>
+        content
+      </ManualDocsLayout.Prose>
+    | Version("v8.0.0") =>
+      <ManualDocsLayout8_0_0.Prose frontmatter={component->frontmatter}>
+        content
+      </ManualDocsLayout8_0_0.Prose>
+    | _ => React.null
+    }
   | {base: [|"docs", "reason-compiler"|], version: Latest} =>
     <ReasonCompilerDocsLayout> content </ReasonCompilerDocsLayout>
   | {base: [|"docs", "reason-react"|], version: Latest} =>

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

@@ -33,6 +33,33 @@ module Toc = {
   };
 };
 
+module VersionSelect = {
+  [@react.component]
+  let make =
+      (
+        ~onChange,
+        ~version: string,
+        ~latestVersionLabel: string,
+        ~availableVersions: array(string),
+      ) => {
+    let children =
+      Belt.Array.map(
+        availableVersions,
+        ver => {
+          let label = ver === "latest" ? latestVersionLabel : ver;
+          <option className="py-4" key=ver value=ver> label->s </option>;
+        },
+      );
+    <select
+      className="text-14 border border-fire inline-block rounded px-4 py-1  font-semibold "
+      name="versionSelection"
+      value=version
+      onChange>
+      children->ate
+    </select>;
+  };
+};
+
 module Sidebar = {
   module Title = {
     [@react.component]
@@ -309,7 +336,10 @@ let make =
     (
       ~breadcrumbs: option(list(UrlPath.breadcrumb))=?,
       ~title: string,
+      ~frontmatter: option(Js.Json.t)=?,
       ~version: option(string)=?,
+      ~availableVersions: option(array(string))=?,
+      ~latestVersionLabel: string="latest",
       ~activeToc: option(Toc.t)=?,
       ~categories: array(Category.t),
       ~components=Markdown.default,
@@ -350,7 +380,31 @@ let make =
       title->s
       {switch (version) {
        | Some(version) =>
-         <span className="font-mono text-sm"> version->s </span>
+         switch (availableVersions) {
+         | Some(availableVersions) =>
+           let onChange = evt => {
+             open Url;
+             ReactEvent.Form.preventDefault(evt);
+             let version = evt->ReactEvent.Form.target##value;
+             let url = Url.parse(route);
+
+             let targetUrl =
+               "/"
+               ++ Js.Array2.joinWith(url.base, "/")
+               ++ "/"
+               ++ version
+               ++ "/"
+               ++ Js.Array2.joinWith(url.pagepath, "/");
+             router->Next.Router.push(targetUrl);
+           };
+           <VersionSelect
+             latestVersionLabel
+             onChange
+             version
+             availableVersions
+           />;
+         | None => <span className="font-mono text-sm"> version->s </span>
+         }
        | None => React.null
        }}
     </div>;
@@ -368,13 +422,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/ManualDocsLayout.re

@@ -1,7 +1,11 @@
-let version = "v8.2.0";
-
 module Link = Next.Link;
 
+// This is used for the version dropdown in the manual layouts
+let allManualVersions = [|"latest", "v8.0.0"|];
+
+// Used for replacing "latest" with "vX.X.X" in the version dropdown
+let latestVersionLabel = "v8.2.0";
+
 // Structure defined by `scripts/extract-tocs.js`
 let tocData:
   Js.Dict.t({
@@ -24,7 +28,10 @@ module Toc = DocsLayout.Toc;
 
 let overviewNavs = [|
   NavItem.{name: "Introduction", href: "/docs/manual/latest/introduction"},
-  {name: "Migrate from BuckleScript/Reason", href: "/docs/manual/latest/migrate-from-bucklescript-reason"},
+  {
+    name: "Migrate from BuckleScript/Reason",
+    href: "/docs/manual/latest/migrate-from-bucklescript-reason",
+  },
   {name: "Installation", href: "/docs/manual/latest/installation"},
   {name: "Try", href: "/docs/manual/latest/try"},
   {name: "Editor Plugins", href: "/docs/manual/latest/editor-plugins"},
@@ -47,7 +54,10 @@ let basicNavs = [|
   {name: "Function", href: "/docs/manual/latest/function"},
   {name: "Control Flow", href: "/docs/manual/latest/control-flow"},
   {name: "Pipe", href: "/docs/manual/latest/pipe"},
-  {name: "Pattern Matching/Destructuring", href: "/docs/manual/latest/pattern-matching-destructuring"},
+  {
+    name: "Pattern Matching/Destructuring",
+    href: "/docs/manual/latest/pattern-matching-destructuring",
+  },
   {name: "Mutation", href: "/docs/manual/latest/mutation"},
   {name: "JSX", href: "/docs/manual/latest/jsx"},
   {name: "External", href: "/docs/manual/latest/external"},
@@ -60,22 +70,13 @@ let basicNavs = [|
 |];
 
 let buildsystemNavs = [|
-  NavItem.{
-    name: "Overview",
-    href: "/docs/manual/latest/build-overview",
-  },
-  {
-    name: "Configuration",
-    href: "/docs/manual/latest/build-configuration",
-  },
+  NavItem.{name: "Overview", href: "/docs/manual/latest/build-overview"},
+  {name: "Configuration", href: "/docs/manual/latest/build-configuration"},
   {
     name: "Interop with JS Build System",
     href: "/docs/manual/latest/interop-with-js-build-systems",
   },
-  {
-    name: "Performance",
-    href: "/docs/manual/latest/build-performance",
-  },
+  {name: "Performance", href: "/docs/manual/latest/build-performance"},
 |];
 
 let jsInteropNavs = [|
@@ -85,13 +86,31 @@ let jsInteropNavs = [|
   },
   {name: "Shared Data Types", href: "/docs/manual/latest/shared-data-types"},
   {name: "Bind to JS Object", href: "/docs/manual/latest/bind-to-js-object"},
-  {name: "Bind to JS Function", href: "/docs/manual/latest/bind-to-js-function"},
-  {name: "Import from/Export to JS", href: "/docs/manual/latest/import-from-export-to-js"},
-  {name: "Bind to Global JS Values", href: "/docs/manual/latest/bind-to-global-js-values"},
+  {
+    name: "Bind to JS Function",
+    href: "/docs/manual/latest/bind-to-js-function",
+  },
+  {
+    name: "Import from/Export to JS",
+    href: "/docs/manual/latest/import-from-export-to-js",
+  },
+  {
+    name: "Bind to Global JS Values",
+    href: "/docs/manual/latest/bind-to-global-js-values",
+  },
   {name: "JSON", href: "/docs/manual/latest/json"},
-  {name: "Use Illegal Identifier Names", href: "/docs/manual/latest/use-illegal-identifier-names"},
-  {name: "Browser Support & Polyfills", href: "/docs/manual/latest/browser-support-polyfills"},
-  {name: "Interop Cheatsheet", href: "/docs/manual/latest/interop-cheatsheet"},
+  {
+    name: "Use Illegal Identifier Names",
+    href: "/docs/manual/latest/use-illegal-identifier-names",
+  },
+  {
+    name: "Browser Support & Polyfills",
+    href: "/docs/manual/latest/browser-support-polyfills",
+  },
+  {
+    name: "Interop Cheatsheet",
+    href: "/docs/manual/latest/interop-cheatsheet",
+  },
 |];
 
 let guidesNavs = [|
@@ -103,7 +122,10 @@ let guidesNavs = [|
 |];
 
 let extraNavs = [|
-  NavItem.{name: "Newcomer Examples", href: "/docs/manual/latest/newcomer-examples"},
+  NavItem.{
+    name: "Newcomer Examples",
+    href: "/docs/manual/latest/newcomer-examples",
+  },
   {name: "Project Structure", href: "/docs/manual/latest/project-structure"},
   {name: "FAQ", href: "/docs/manual/latest/faq"},
 |];
@@ -119,7 +141,12 @@ 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;
 
@@ -156,13 +183,17 @@ module Docs = {
       );
 
     let title = "Language Manual";
+    let version = "latest";
 
     <DocsLayout
       theme=`Reason
       components
       categories
       version
       title
+      availableVersions=allManualVersions
+      latestVersionLabel
+      ?frontmatter
       ?activeToc
       ?breadcrumbs>
       children
@@ -172,9 +203,7 @@ module Docs = {
 
 module Prose = {
   [@react.component]
-  let make = (~children) => {
-    <Docs components=Markdown.default>
-      children
-    </Docs>;
+  let make = (~frontmatter: option(Js.Json.t)=?, ~children) => {
+    <Docs ?frontmatter components=Markdown.default> children </Docs>;
   };
 };