docs: show latest version in docs + update automatically (medusajs#9753)

.github/workflows/docs-update-version.yml

@@ -0,0 +1,54 @@
+name: Update Version in Docs
+on:
+  release:
+    types: [published]
+
+jobs:
+  update-docs-version:
+    runs-on: ubuntu-latest
+    env:
+      GH_TOKEN: ${{ secrets.REFERENCE_PAT }}
+    steps:
+      - name: Cancel Previous Runs
+        uses: styfle/[email protected]
+        with:
+          access_token: ${{ github.token }}
+
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: "yarn"
+
+      - name: Install dependencies
+        uses: ./.github/actions/cache-deps
+        with:
+          extension: docs-update-version
+
+      - name: Install Workspace dependencies
+        run: yarn install
+        working-directory: www/utils
+
+      - name: Build Workspace packages
+        run: yarn build
+        working-directory: www/utils
+
+      - name: Update Docs Version
+        run: yarn update:config-version
+        working-directory: www/utils/packages/scripts
+
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v4
+        with:
+          commit-message: "chore(docs): Update version in documentation (automated)"
+          base: "develop"
+          title: "chore(docs): Update version in documentation (automated)"
+          labels: "type: chore"
+          add-paths: www/packages/docs-ui/src/global-config.ts
+          branch: "docs/update-config-version"
+          branch-suffix: "timestamp"

www/apps/api-reference/config/index.ts

@@ -1,8 +1,10 @@
+import { globalConfig } from "docs-ui"
 import { DocsConfig } from "types"
 
 const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000"
 
 export const config: DocsConfig = {
+  ...globalConfig,
   baseUrl,
   basePath: process.env.NEXT_PUBLIC_BASE_PATH,
   // sidebar is auto generated

www/apps/book/config/index.ts

@@ -1,9 +1,11 @@
 import { DocsConfig } from "types"
 import { sidebarConfig } from "./sidebar"
+import { globalConfig } from "docs-ui"
 
 const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000"
 
 export const config: DocsConfig = {
+  ...globalConfig,
   titleSuffix: "Medusa v2 Documentation",
   baseUrl,
   basePath: process.env.NEXT_PUBLIC_BASE_PATH,

www/apps/resources/config/index.ts

@@ -1,9 +1,11 @@
 import { DocsConfig, SidebarItem } from "types"
 import { generatedSidebar } from "../generated/sidebar.mjs"
+import { globalConfig } from "docs-ui"
 
 const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000"
 
 export const config: DocsConfig = {
+  ...globalConfig,
   titleSuffix: "Medusa Development Resources",
   baseUrl,
   basePath: process.env.NEXT_PUBLIC_BASE_PATH,

www/apps/ui/src/config/site.ts

@@ -1,3 +1,4 @@
+import { globalConfig } from "docs-ui"
 import { DocsConfig } from "types"
 
 type SiteConfig = {
@@ -9,6 +10,7 @@ type SiteConfig = {
 const baseUrl = process.env.NEXT_PUBLIC_DOCS_URL || "http://localhost:3000"
 
 export const siteConfig: SiteConfig = {
+  ...globalConfig,
   name: "Medusa UI",
   baseUrl,
   basePath: process.env.NEXT_PUBLIC_BASE_PATH,

www/apps/user-guide/config/index.ts

@@ -1,9 +1,11 @@
 import { DocsConfig, SidebarItem } from "types"
 import { generatedSidebar as sidebar } from "@/generated/sidebar.mjs"
+import { globalConfig } from "docs-ui"
 
 const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000"
 
 export const config: DocsConfig = {
+  ...globalConfig,
   titleSuffix: "Medusa Admin User Guide",
   baseUrl,
   basePath: process.env.NEXT_PUBLIC_BASE_PATH,

www/packages/docs-ui/src/components/MainNav/Version/index.tsx

@@ -0,0 +1,65 @@
+"use state"
+
+import React, { useEffect, useMemo, useState } from "react"
+import { useIsBrowser, useSiteConfig } from "../../../providers"
+import Link from "next/link"
+import { Tooltip } from "../../Tooltip"
+import clsx from "clsx"
+
+const LOCAL_STORAGE_SUFFIX = "-seen"
+
+export const MainNavVersion = () => {
+  const {
+    config: { version },
+  } = useSiteConfig()
+  const [showNewBadge, setShowNewBadge] = useState(false)
+  const { isBrowser } = useIsBrowser()
+  const localStorageKey = useMemo(
+    () => `${version.number}${LOCAL_STORAGE_SUFFIX}`,
+    [version]
+  )
+
+  useEffect(() => {
+    if (!isBrowser) {
+      return
+    }
+
+    if (!localStorage.getItem(localStorageKey)) {
+      setShowNewBadge(true)
+    }
+  }, [isBrowser, localStorageKey])
+
+  const afterHover = () => {
+    if (!showNewBadge) {
+      return
+    }
+
+    setShowNewBadge(false)
+    localStorage.setItem(localStorageKey, "true")
+  }
+
+  return (
+    <>
+      <Link href={version.releaseUrl} target="_blank">
+        <Tooltip html="View the release notes<br/>on GitHub">
+          <span
+            className="relative text-compact-small-plus"
+            onMouseOut={afterHover}
+          >
+            <span>v{version.number}</span>
+            {showNewBadge && (
+              <span
+                className={clsx(
+                  "bg-medusa-tag-blue-icon w-[10px] h-[10px]",
+                  "absolute -top-docs_0.25 -right-docs_0.5",
+                  "animate-pulse rounded-full"
+                )}
+              ></span>
+            )}
+          </span>
+        </Tooltip>
+      </Link>
+      <span className="text-compact-small">&#183;</span>
+    </>
+  )
+}

www/packages/docs-ui/src/components/MainNav/index.tsx

@@ -18,6 +18,7 @@ import { MainNavDesktopMenu } from "./DesktopMenu"
 import { SidebarLeftIcon } from "../Icons/SidebarLeft"
 import { MainNavMobileMenu } from "./MobileMenu"
 import Link from "next/link"
+import { MainNavVersion } from "./Version"
 
 type MainNavProps = {
   className?: string
@@ -60,6 +61,7 @@ export const MainNav = ({ className, itemsClassName }: MainNavProps) => {
       </div>
       <div className="flex items-center gap-docs_0.75 my-docs_0.75">
         <div className="lg:flex items-center gap-docs_0.5 text-medusa-fg-subtle hidden">
+          <MainNavVersion />
           {editDate && <MainNavEditDate date={editDate} />}
           <LinkButton
             href={reportIssueLink}

www/packages/docs-ui/src/global-config.ts

@@ -0,0 +1,10 @@
+/* eslint-disable comma-dangle */
+/* eslint-disable prettier/prettier */
+import { DocsConfig } from "types"
+
+export const globalConfig: Pick<DocsConfig, "version"> = {
+  "version": {
+    "number": "2.0",
+    "releaseUrl": "https://github.com/medusajs/medusa/releases/tag/v2.0.0"
+  }
+}

www/packages/docs-ui/src/index.ts

@@ -1,4 +1,5 @@
 export * from "./constants"
+export * from "./global-config"
 
 export * from "./components"
 export * from "./hooks"

www/packages/docs-ui/src/providers/SiteConifg/index.tsx

@@ -2,6 +2,7 @@
 
 import React, { createContext, useContext, useState } from "react"
 import { DocsConfig } from "types"
+import { globalConfig } from "../../global-config"
 
 export type SiteConfigContextType = {
   config: DocsConfig
@@ -33,6 +34,7 @@ export const SiteConfigProvider = ({
       breadcrumbOptions: {
         showCategories: true,
       },
+      ...globalConfig,
     }
   )
 

www/packages/types/src/config.ts

@@ -16,4 +16,8 @@ export declare type DocsConfig = {
     key: string
   }
   breadcrumbOptions?: BreadcrumbOptions
+  version: {
+    number: string
+    releaseUrl: string
+  }
 }

www/utils/packages/scripts/change-config-version.ts

@@ -0,0 +1,81 @@
+#!/usr/bin/env node
+
+import { Octokit } from "@octokit/core"
+import fs from "fs"
+import path from "path"
+import { fileURLToPath } from "url"
+
+const octokit = new Octokit({
+  auth: process.env.GH_TOKEN,
+})
+
+type DocsConfig = {
+  version: {
+    number: string
+    releaseUrl: string
+  }
+}
+
+function getConfigPath() {
+  const __filename = fileURLToPath(import.meta.url)
+  const __dirname = path.dirname(__filename)
+  return path.join(
+    __dirname,
+    "..",
+    "..",
+    "..",
+    "..",
+    "packages",
+    "docs-ui",
+    "src",
+    "global-config.ts"
+  )
+}
+
+const configFilePrefix = `/* eslint-disable comma-dangle */
+/* eslint-disable prettier/prettier */
+import { DocsConfig } from "types"
+
+export const globalConfig: Pick<DocsConfig, "version"> = `
+
+async function main() {
+  //retrieve the latest release
+  const response = await octokit.request(
+    "GET /repos/{owner}/{repo}/releases/latest",
+    {
+      owner: "medusajs",
+      repo: "medusa",
+      sha: "develop",
+    }
+  )
+
+  const version = response.data.tag_name.replace(/\.0$/, "").replace(/^v/, "")
+
+  // get the existing version
+  const configPath = getConfigPath()
+  const configContent = fs
+    .readFileSync(configPath, "utf-8")
+    .replace(configFilePrefix, "")
+  const oldConfig: DocsConfig = JSON.parse(configContent)
+
+  if (oldConfig.version.number === version) {
+    return
+  }
+
+  //add new announcement
+  const config: DocsConfig = {
+    version: {
+      number: version,
+      releaseUrl: response.data.html_url,
+    },
+  }
+
+  //write new config file
+  fs.writeFileSync(
+    configPath,
+    `${configFilePrefix}${JSON.stringify(config, undefined, 2)}`
+  )
+  console.log(`Version in config has been updated.`)
+}
+
+void main()

www/utils/packages/scripts/package.json

@@ -7,11 +7,13 @@
   },
   "scripts": {
     "build": "tsc",
+    "watch": "tsc --watch",
     "check:freshness": "node ./dist/freshness-check.js",
     "generate:message": "node ./dist/get-generate-diff-message.js",
     "check:release-commit": "node ./dist/check-release-commit.js",
     "generate:changeset": "node ./dist/run-changeset.js",
-    "check:pr-files-count": "node ./dist/check-pr-files-count.js"
+    "check:pr-files-count": "node ./dist/check-pr-files-count.js",
+    "update:config-version": "node ./dist/change-config-version.js"
   },
   "version": "0.0.0",
   "type": "module",