Use version instead of 'latest' everywhere

Author: fhammerschmidt

src/ApiDocs.res

@@ -91,10 +91,12 @@ module SidebarTree = {
   @react.component
   let make = (~isOpen: bool, ~toggle: unit => unit, ~node: node, ~items: array<item>) => {
     let router = Next.Router.useRouter()
+    let url = router.route->Url.parse
+    let version = url->Url.getVersionString
 
     let moduleRoute =
       Webapi.URL.make("file://" ++ router.asPath).pathname
-      ->String.replace("/docs/manual/latest/api/", "")
+      ->String.replace(`/docs/manual/${version}/api/`, "")
       ->String.split("/")
 
     let summaryClassName = "truncate py-1 md:h-auto tracking-tight text-gray-60 font-medium text-14 rounded-sm hover:bg-gray-20 hover:-ml-2 hover:py-1 hover:pl-2 "
@@ -179,10 +181,10 @@ module SidebarTree = {
           }
           let version = url->Url.getVersionString
           let availableVersions = switch node.name {
-          | "Core" => [("latest", "v11.0")]
+          | "Core" => [("latest", "v11.0.0")]
           | _ => ApiLayout.allApiVersions
           }
-          <VersionSelect onChange version availableVersions />
+          <VersionSelect onChange version availableVersions nextVersion=?Constants.nextVersion />
         | None => React.null
         }}
       </div>

src/DocsOverview.res

@@ -27,7 +27,7 @@ let default = (~showVersionSelect=true) => {
   let ecosystem = [
     ("Package Index", "/packages"),
     ("rescript-react", "/docs/react/latest/introduction"),
-    ("GenType", "/docs/manual/latest/typescript-integration"),
+    ("GenType", `/docs/manual/${version}/typescript-integration`),
     ("Reanalyze", "https://github.com/rescript-lang/reanalyze"),
   ]
 
@@ -50,7 +50,7 @@ let default = (~showVersionSelect=true) => {
     <div className="text-fire">
       <VersionSelect
         availableVersions=Constants.allManualVersions
-        nextVersion=Constants.nextVersion
+        nextVersion=?Constants.nextVersion
         onChange
         version
       />

src/Playground.res

@@ -975,7 +975,7 @@ module Settings = {
                 })
                 <>
                   <option disabled=true className="py-4">
-                    {React.string("---Experimental---")}
+                    {React.string("--- Experimental ---")}
                   </option>
                   {versionByOrder
                   ->Array.map(version => {
@@ -986,7 +986,7 @@ module Settings = {
                   })
                   ->React.array}
                   <option disabled=true className="py-4">
-                    {React.string("---Official Releases---")}
+                    {React.string("--- Official Releases ---")}
                   </option>
                 </>
               }}

src/common/App.res

@@ -54,18 +54,18 @@ let make = (props: props): React.element => {
   // landing page
   | {base: [], pagepath: []} => <LandingPageLayout> content </LandingPageLayout>
   // docs routes
-  | {base: ["docs", "manual"], pagepath, version} =>
+  | {base: ["docs", "manual"], pagepath} =>
     // check if it's an api route
     <EnableCollapsibleNavbar>
       {switch pagepath[0] {
       | Some("api") =>
-        switch version {
-        | Latest =>
+        switch url->Url.getVersionString {
+        | ("v11.0.0" | "v12.0.0") as version =>
           switch (Array.length(pagepath), pagepath[1]) {
-          | (1, _) => <ApiOverviewLayout.Docs> content </ApiOverviewLayout.Docs>
+          | (1, _) => <ApiOverviewLayout.Docs version> content </ApiOverviewLayout.Docs>
           | _ => content
           }
-        | Version("v8.0.0") =>
+        | "v8.0.0" =>
           switch (Array.length(pagepath), pagepath[1]) {
           | (1, _) => <ApiOverviewLayout8_0_0.Docs> content </ApiOverviewLayout8_0_0.Docs>
           | (2, Some("js")) => <JsDocsLayout8_0_0.Prose> content </JsDocsLayout8_0_0.Prose>
@@ -75,7 +75,7 @@ let make = (props: props): React.element => {
           | (_, Some("dom")) => <DomDocsLayout8_0_0.Docs> content </DomDocsLayout8_0_0.Docs>
           | _ => React.null
           }
-        | Version("v9.0.0") =>
+        | "v9.0.0" =>
           switch (Array.length(pagepath), pagepath[1]) {
           | (1, _) => <ApiOverviewLayout9_0_0.Docs> content </ApiOverviewLayout9_0_0.Docs>
           | (2, Some("js")) => <JsDocsLayout9_0_0.Prose> content </JsDocsLayout9_0_0.Prose>
@@ -85,7 +85,7 @@ let make = (props: props): React.element => {
           | (_, Some("dom")) => <DomDocsLayout9_0_0.Docs> content </DomDocsLayout9_0_0.Docs>
           | _ => React.null
           }
-        | Version("v10.0.0") =>
+        | "v10.0.0" =>
           switch (Array.length(pagepath), pagepath[1]) {
           | (1, _) => <ApiOverviewLayout10_0_0.Docs> content </ApiOverviewLayout10_0_0.Docs>
           | (2, Some("js")) => <JsDocsLayout10_0_0.Prose> content </JsDocsLayout10_0_0.Prose>
@@ -98,28 +98,24 @@ let make = (props: props): React.element => {
         | _ => content
         }
       | _ =>
-        switch version {
-        | Latest =>
-          <ManualDocsLayout.Latest frontmatter={component->frontmatter}>
-            content
-          </ManualDocsLayout.Latest>
-        | Version("v8.0.0") =>
+        switch url->Url.getVersionString {
+        | "v8.0.0" =>
           <ManualDocsLayout.V800 frontmatter={component->frontmatter}>
             content
           </ManualDocsLayout.V800>
-        | Version("v9.0.0") =>
+        | "v9.0.0" =>
           <ManualDocsLayout.V900 frontmatter={component->frontmatter}>
             content
           </ManualDocsLayout.V900>
-        | Version("v10.0.0") =>
+        | "v10.0.0" =>
           <ManualDocsLayout.V1000 frontmatter={component->frontmatter}>
             content
           </ManualDocsLayout.V1000>
-        | Version("v11.0.0") =>
+        | "v11.0.0" =>
           <ManualDocsLayout.V1100 frontmatter={component->frontmatter}>
             content
           </ManualDocsLayout.V1100>
-        | Version("v12.0.0") =>
+        | "v12.0.0" =>
           <ManualDocsLayout.V1200 frontmatter={component->frontmatter}>
             content
           </ManualDocsLayout.V1200>

src/common/Constants.res

@@ -12,12 +12,13 @@ type versions = {
 
 // This is used for the version dropdown in the manual layouts
 let allManualVersions = [
-  ("latest", versions.latest),
+  (versions.latest, versions.latest),
   ("v10.0.0", "v9.1 - v10.1"),
   ("v9.0.0", "v8.2 - v9.0"),
   ("v8.0.0", "v6.0 - v8.2"),
 ]
-let nextVersion = ("next", versions.next)
+
+let nextVersion = versions.latest === versions.next ? None : Some(versions.next, versions.next)
 
 let allReactVersions = [("latest", "v0.12.0"), ("v0.11.0", "v0.11.0"), ("v0.10.0", "v0.10.0")]
 
@@ -31,13 +32,6 @@ let languageManual = version => {
   ]
 }
 
-let ecosystem = [
-  ("Package Index", "/packages"),
-  ("rescript-react", "/docs/react/latest/introduction"),
-  ("GenType", "/docs/manual/latest/typescript-integration"),
-  ("Reanalyze", "https://github.com/rescript-lang/reanalyze"),
-]
-
 let tools = [("Syntax Lookup", "/syntax-lookup")]
 
 let githubHref = "https://github.com/rescript-lang/rescript"

src/common/Url.res

@@ -65,8 +65,8 @@ let parse = (route: string): t => {
     (NoVersion, fullpath, [])
   } else {
     let version = switch fullpath[foundVersionIndex] {
-    | Some("next") => Next
-    | Some("latest") => Latest
+    | Some(version) if version === Constants.versions.next => Next
+    | Some(version) if version === Constants.versions.latest => Latest
     | Some(v) => Version(v)
     | None => NoVersion
     }
@@ -82,7 +82,7 @@ let parse = (route: string): t => {
 
 let getVersionString = url =>
   switch url.version {
-  | Next => "next"
-  | Latest | NoVersion => "latest"
+  | Next => Constants.versions.next
+  | Latest | NoVersion => Constants.versions.latest
   | Version(version) => version
   }

src/components/Navigation.res

@@ -181,7 +181,7 @@ module DocsSection = {
         imgSrc: "/static/ic_gentype@2x.png",
         title: "GenType",
         description: "Seamless TypeScript integration",
-        href: "/docs/manual/latest/typescript-integration",
+        href: `/docs/manual/${version}/typescript-integration`,
         isActive: url => {
           switch url.fullpath {
           | ["docs", "manual", _, "typescript-integration"] => true
@@ -330,20 +330,20 @@ module DocsSection = {
         <div className="px-4 w-full space-x-2 max-w-1280 ">
           <VersionSelect
             availableVersions=Constants.allManualVersions
-            nextVersion=Constants.nextVersion
+            nextVersion=?Constants.nextVersion
             onChange=onVersionChange
             version
           />
-          {switch version {
-          | "next" =>
+          {if version === Constants.versions.next {
             <span className="text-fire-50 text-12">
               {React.string("This docs version is work in progress!")}
             </span>
-          | "latest" =>
+          } else if version === Constants.versions.latest {
             <span className="text-gray-40 text-12">
               {React.string("This is the latest docs version")}
             </span>
-          | _ => React.null
+          } else {
+            React.null
           }}
         </div>
       </div>
@@ -420,11 +420,13 @@ let make = (~fixed=true, ~isOverlayOpen: bool, ~setOverlayOpen: (bool => bool) =
   let minWidth = "20rem"
   let router = Next.Router.useRouter()
   let route = router.route
+  let url = router.route->Url.parse
+  let version = url->Url.getVersionString
 
   let (collapsibles, setCollapsibles) = React.useState(_ => [
     {
       title: "Docs",
-      href: "/docs/manual/latest/api",
+      href: `/docs/manual/${version}/api`,
       isActiveRoute: route => {
         let url = Url.parse(route)
         switch url {
@@ -535,7 +537,7 @@ let make = (~fixed=true, ~isOverlayOpen: bool, ~setOverlayOpen: (bool => bool) =
             className="flex ml-10 space-x-5 w-full max-w-320"
             style={ReactDOMStyle.make(~maxWidth="26rem", ())}>
             {collapsibleElements->React.array}
-            <Link href="/docs/manual/latest/api" className={linkOrActiveApiSubroute(~route)}>
+            <Link href={`/docs/manual/${version}/api`} className={linkOrActiveApiSubroute(~route)}>
               {React.string("API")}
             </Link>
             <Link

src/components/VersionSelect.res

@@ -14,17 +14,19 @@ let make = (
     name="versionSelection"
     value=version
     onChange>
-    {nextVersion->Option.isSome
-      ? <option disabled=true className="py-4"> {React.string("---Current---")} </option>
-      : React.null}
-    {React.array(children)}
     {switch nextVersion {
     | None => React.null
     | Some((value, label)) =>
       <>
-        <option disabled=true className="py-4"> {React.string("---Next---")} </option>
+        <option disabled=true key="next-heading" className="py-4">
+          {React.string("--- Next ---")}
+        </option>
         <option className="py-4" key=value value> {React.string(label)} </option>
+        <option disabled=true key="released-heading" className="py-4">
+          {React.string("--- Released ---")}
+        </option>
       </>
     }}
+    {React.array(children)}
   </select>
 }

src/layouts/ApiLayout.res

@@ -113,7 +113,9 @@ let make = (
             ("/" ++ (version ++ ("/" ++ Array.join(url.pagepath, "/")))))
           router->Next.Router.push(targetUrl)
         }
-        <VersionSelect onChange version availableVersions=allApiVersions />
+        <VersionSelect
+          onChange version availableVersions=allApiVersions nextVersion=?Constants.nextVersion
+        />
       | None => React.null
       }}
     </div>

src/layouts/ApiOverviewLayout.res

@@ -1,45 +1,34 @@
 module Sidebar = SidebarLayout.Sidebar
 
-let categories: array<Sidebar.Category.t> = [
+let makeCategories: string => array<Sidebar.Category.t> = version => [
   {
     name: "Introduction",
-    items: [{name: "Overview", href: "/docs/manual/latest/api"}],
+    items: [{name: "Overview", href: `/docs/manual/${version}/api`}],
   },
   {
     name: "Standard Library",
-    items: [{name: "Core", href: "/docs/manual/latest/api/core"}],
+    items: [{name: "Core", href: `/docs/manual/${version}/api/core`}],
   },
   {
     name: "Additional Libraries",
     items: [
-      {name: "Belt", href: "/docs/manual/latest/api/belt"},
-      {name: "Dom", href: "/docs/manual/latest/api/dom"},
+      {name: "Belt", href: `/docs/manual/${version}/api/belt`},
+      {name: "Dom", href: `/docs/manual/${version}/api/dom`},
     ],
   },
   {
     name: "Legacy Modules",
-    items: [{name: "Js", href: "/docs/manual/latest/api/js"}],
+    items: [{name: "Js", href: `/docs/manual/${version}/api/js`}],
   },
 ]
 
 /* Used for API docs (structured data) */
 module Docs = {
   @react.component
-  let make = (~components=ApiMarkdown.default, ~children) => {
+  let make = (~version, ~components=ApiMarkdown.default, ~children) => {
     let title = "API"
-    let version = "latest"
+    let categories = makeCategories(version)
 
     <ApiLayout title categories version components> children </ApiLayout>
   }
 }
-
-/*
- This layout is used for structured prose text with proper H2 headings.
- We cannot really use the same layout as with the Docs module, since they
- have different semantic styling and do things such as hiding the text
- of H2 nodes.
- */
-/* module Prose = { */
-/* @react.component */
-/* let make = (~children) => <Docs components=Markdown.default> children </Docs> */
-/* } */