chore: rewrite deploy action to be able to deploy multiple versions t…

…o gh pages

.github/workflows/deploy.yml

@@ -0,0 +1,41 @@
+name: Deploy docs to gh-pages
+on:
+  push:
+    branches:
+      - master
+      - v8_maintenance
+      - v9_maintenance
+  workflow_dispatch:
+jobs:
+  deploy-docs:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - run: npm ci && npm run bootstrap
+      - name: Set build directory and deployment path based on branch
+        id: set-build-dir
+        run: |
+          echo "::set-output name=build_dir::./packages/__docs__/__build__"
+          case "${{ github.ref }}" in
+            "refs/heads/master")
+              echo "::set-output name=deploy_dir::./"
+              ;;
+            "refs/heads/v8_maintenance")
+              echo "::set-output name=deploy_dir::v8"
+              ;;
+            "refs/heads/v9_maintenance")
+              echo "::set-output name=deploy_dir::v9"
+              ;;
+          esac
+      - name: Build docs-app
+        run: npm run build:docs
+      - name: Copy redirects config file to the __build__ directory.
+        run: cp ./packages/__docs__/_redirects_gh_pages ./packages/__docs__/__build__
+      - name: Deploy to GitHub Pages
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          folder: ${{ steps.set-build-dir.outputs.build_dir }}
+          branch: gh-pages
+          target-folder: ${{ steps.set-build-dir.outputs.deploy_dir }}
+          clean-exclude: pr-preview
+          force: false

packages/__docs__/src/Header/index.tsx

@@ -69,15 +69,16 @@ class Header extends Component<HeaderProps> {
     // If we select the latest version from the dropdown,
     // then navigate to the index (instructure.design/#currentHash).
     // In every other case eg.: v6,v7 navigate to --> instructure.design/v6/#currentHash
-    const versionToNavigate = isSelectedLatestVersion
-      ? `/${window.location.hash}`
-      : `/${selectedVersion}/${window.location.hash}`
-
+    // Add `ghPagesPrefix` if we are not on https://instructure.design/
+    const ghPagesPrefix = window.location.origin === 'https://instructure.github.io'
+      ? '/instructure-ui'
+      : ''
+    const versionToNavigate = `${ghPagesPrefix}/${isSelectedLatestVersion ? window.location.hash : `${selectedVersion}/${window.location.hash}`}`
     return window.location.replace(versionToNavigate)
   }
 
   renderVersionsBlock = () => {
-    const { versionsData } = this.props
+    const { versionsData, name, version } = this.props
     const { latestVersion, previousVersions } = versionsData
     const allVersions = [latestVersion, ...previousVersions]
 
@@ -92,11 +93,11 @@ class Header extends Component<HeaderProps> {
           trigger={
             <CondensedButton>
               <Text size="large">
-                {(
+                {(name && version) ? (
                   <span>
-                    {this.props.name} {this.props.version}
+                    {name} {version}
                   </span>
-                ) || 'Documentation'}
+                ) : 'Documentation'}
               </Text>
               <IconMiniArrowDownLine size="x-small" />
             </CondensedButton>

packages/__docs__/src/versionData.js

@@ -33,17 +33,13 @@
  * @returns {Promise<null|object>}
  */
 const fetchVersionData = async (signal) => {
-  // eslint-disable-next-line compat/compat
   const isLocalHost = window.location.hostname === 'localhost'
 
   if (!isLocalHost) {
-    // eslint-disable-next-line compat/compat
-    const result = await fetch(`${window.location.origin}/versions.json`, {
-      signal
-    })
-    const versionsData = await result.json()
-
-    return versionsData
+    const isGhPages = window.location.origin === 'https://instructure.github.io'
+    const versionsDataUrl = window.location.origin + (isGhPages ? '/instructure-ui' : '') + '/versions.json'
+    const result = await fetch(versionsDataUrl, { signal })
+    return await result.json()
   }
 
   return null
@@ -53,7 +49,8 @@ const fetchVersionData = async (signal) => {
  * if we are on the docs page of a legacy version,
  * the path includes the version number, e.g. `/v7` or `/v8`
  */
-const [versionInPath] = window.location.pathname.split('/').filter(Boolean)
+const versionMatch = window.location.pathname.match(/\/(v\d+)(\/|$)/)
+const versionInPath =  versionMatch ? versionMatch[1] : null
 
 export default fetchVersionData
 export { fetchVersionData, versionInPath }