#1932 Publish v13 Docs using mike (#1967)

Signed-off-by: srikant <srksriks123@gmail.com>

.github/workflows/deploy-docs.yml

@@ -32,15 +32,20 @@ jobs:
         working-directory: ./docs
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-python@v5
+       # We need to additionally fetch the gh-pages branch for mike deploy
         with:
-          python-version: 3.x
+          fetch-depth: 0
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: 3.11
       - run: echo "cache_id=$(date --utc '+%V')" >> $GITHUB_ENV
       - uses: actions/cache@v4
         with:
           key: mkdocs-material-${{ env.cache_id }}
           path: .cache
           restore-keys: |
             mkdocs-material-
-      - run: pip install mkdocs-material
-      - run: mkdocs gh-deploy --force
+      - run: pip3 install mkdocs-material
+        run: pip3 install mike
+      - run: mike deploy --push --update-aliases v13 latest

README.md

@@ -66,10 +66,26 @@ npm install
 3. Install required mkdocs packages using pip3.
 ```
 pip3 install -r requirements.txt
+pip3 install mike
 ```
 
-4. Run below command to start mkdocs server.
-```
+4. Run below commands to use `mike` to deploy multiple versions of docs.
+```sh
+# Initially delete everything from gh-pages branch to start creating version folders.
+mike delete --all 
+
+# If above command throws an error please run below mkdocs command and then run mike deploy
+mkdocs gh-deploy --force
+
+# This command will create a folder named as v13 in gh-pages branch.
+mike deploy --push --update-aliases v13 latest
+mike set-default v13
+
+
+# Test changes in local.
+mike serve
+
+# If you are working on Elyra Canvas documentation content, you should run the following command, instead of the mike serve command, to see your changes immediately reflected in the browser.
 mkdocs serve
 ```
 

docs/mkdocs.yml

@@ -33,6 +33,8 @@ theme:
       - navigation.footer
 
 extra:
+  version:
+    provider: mike
   social:
     - icon: fontawesome/brands/github
       link: http://github.com/elyra-ai/canvas

docs/pages/css/styles.css

@@ -22,3 +22,12 @@ th {
   max-width: 71rem;
 }
 
+.md-version__list {
+  background-color: black;
+}
+
+.md-version__link {
+  background-color: black;
+  color: white;
+  transition: color 0.3s ease;
+}