Add fixes for static styles not loading issue

Author: sameeragunarathne

.github/workflows/publish_docs.yaml

@@ -7,10 +7,16 @@ on:
   workflow_dispatch:
 
 permissions:
-  contents: write
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
 
 jobs:
-  release-wso2-open-healthcare-docs:
+  build:
     runs-on: ubuntu-latest
     steps:
       - name: Check out code
@@ -27,19 +33,27 @@ jobs:
           cache-dependency-path: en/package-lock.json
 
       - name: Install dependencies
-        run: |
-          cd en/
-          npm ci
+        run: npm ci
+        working-directory: en
 
       - name: Build Docusaurus site
-        run: |
-          cd en/
-          npm run build
+        run: npm run build
+        working-directory: en
         env:
-          BASE_URL: /open-healthcare-docs/
+          BASE_URL: /${{ github.event.repository.name }}/
 
-      - name: Deploy to GitHub Pages
-        uses: peaceiris/actions-gh-pages@v4
+      - name: Upload GitHub Pages artifact
+        uses: actions/upload-pages-artifact@v3
         with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: en/build
+          path: en/build
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

en/docusaurus.config.js

@@ -3,6 +3,13 @@ const rehypeFixAssetImages = require('./src/plugins/rehype-fix-asset-images');
 
 const baseUrl = process.env.BASE_URL || '/';
 
+/** Prefix absolute static asset paths with baseUrl (required for GitHub Pages project sites). */
+function staticAsset(path) {
+  const normalizedBase = baseUrl.endsWith('/') ? baseUrl : `${baseUrl}/`;
+  const normalizedPath = path.startsWith('/') ? path.slice(1) : path;
+  return `${normalizedBase}${normalizedPath}`;
+}
+
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: 'Healthcare Solution Documentation',
@@ -37,16 +44,16 @@ const config = {
     ],
   ],
   stylesheets: [
-    '/assets/css/ohtheme.css',
-    '/assets/css/blue-palette-alt1.css',
-    '/assets/css/config-catalog.css',
-    '/assets/css/redoc.css',
-    '/assets/lib/json-formatter/json-formatter.css',
-    '/assets/lib/fontawesome-free-6.3.0-web/css/all.min.css',
+    staticAsset('/assets/css/ohtheme.css'),
+    staticAsset('/assets/css/blue-palette-alt1.css'),
+    staticAsset('/assets/css/config-catalog.css'),
+    staticAsset('/assets/css/redoc.css'),
+    staticAsset('/assets/lib/json-formatter/json-formatter.css'),
+    staticAsset('/assets/lib/fontawesome-free-6.3.0-web/css/all.min.css'),
   ],
   scripts: [
-    '/assets/lib/json-formatter/json-formatter.umd.js',
-    '/assets/js/ohtheme.js',
+    staticAsset('/assets/lib/json-formatter/json-formatter.umd.js'),
+    staticAsset('/assets/js/ohtheme.js'),
   ],
   themeConfig: {
     image: 'img/logo.svg',

en/docusaurus.config.ts

@@ -2,12 +2,20 @@ import { themes as prismThemes } from 'prism-react-renderer';
 import type { Config } from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';
 
+const baseUrl = process.env.BASE_URL || '/';
+
+function staticAsset(path: string): string {
+  const normalizedBase = baseUrl.endsWith('/') ? baseUrl : `${baseUrl}/`;
+  const normalizedPath = path.startsWith('/') ? path.slice(1) : path;
+  return `${normalizedBase}${normalizedPath}`;
+}
+
 const config: Config = {
   title: 'Healthcare Solution Documentation',
   tagline: 'Documentation for WSO2 Open Healthcare Accelerator',
   favicon: 'img/favicon.svg',
   url: 'https://oh.docs.wso2.com',
-  baseUrl: process.env.BASE_URL || '/',
+  baseUrl,
   organizationName: 'wso2',
   projectName: 'open-healthcare-docs',
   onBrokenLinks: 'warn',
@@ -35,18 +43,18 @@ const config: Config = {
     ],
   ],
   stylesheets: [
-    '/assets/css/ohtheme.css',
-    '/assets/css/blue-palette-alt1.css',
-    '/assets/css/config-catalog.css',
-    '/assets/css/redoc.css',
-    '/assets/lib/highlightjs/styles/vs.min.css',
-    '/assets/lib/json-formatter/json-formatter.css',
-    '/assets/lib/fontawesome-free-6.3.0-web/css/all.min.css',
+    staticAsset('/assets/css/ohtheme.css'),
+    staticAsset('/assets/css/blue-palette-alt1.css'),
+    staticAsset('/assets/css/config-catalog.css'),
+    staticAsset('/assets/css/redoc.css'),
+    staticAsset('/assets/lib/highlightjs/styles/vs.min.css'),
+    staticAsset('/assets/lib/json-formatter/json-formatter.css'),
+    staticAsset('/assets/lib/fontawesome-free-6.3.0-web/css/all.min.css'),
   ],
   scripts: [
-    '/assets/lib/highlightjs/highlight.min.js',
-    '/assets/lib/json-formatter/json-formatter.umd.js',
-    '/assets/js/ohtheme.js',
+    staticAsset('/assets/lib/highlightjs/highlight.min.js'),
+    staticAsset('/assets/lib/json-formatter/json-formatter.umd.js'),
+    staticAsset('/assets/js/ohtheme.js'),
   ],
   themeConfig: {
     image: 'img/logo.svg',