Asset Loading Issue in Azure Static Web Apps with MkDocs-Material Sites in Subdirectories

[broktoram]

I'm hosting a static site on Azure Static Web Apps, built using MkDocs-Material. The site contains a main landing page and multiple sub-sites (each built individually using mkdocs) located in subdirectories (e.g., /sub-site1/, /sub-site2/). Each sub-site has its own index.html, assets (CSS, JS, images), and content pages.

Here's the structure of the deployed site:

public/
  index.html          # Landing page
  assets/
  stylesheets/
    main.css
  sub-site1/          # Sub-site 1
    index.html
    assets/
    stylesheets/
        main.css
  sub-site2/          # Sub-site 2
    index.html
    assets/
      stylesheets/
        main.css

Problem

While the main landing page loads correctly, sub-site pages fail to load their CSS and JavaScript and the navigation doesn't work properly in the sub-sites either. The browser tries to load the assets from the subdirectory of the current page (e.g., /sub-site1/page1/assets/stylesheets/main.css) instead of the correct directory root for the sub-site (e.g., /sub-site1/assets/stylesheets/main.css).

Debugging Insights

1. Configuration:
   • site_url in mkdocs.yml is set to the correct sub-site URL (e.g., https://example.com/sub-site1/) and for the landing page, it is set to https://example.com/.
   • use_directory_urls: true is used in all builds (I have tried setting this to false as well).
   • My staticwebapp.config.json looks like:

     {
          "trailingSlash": "always",
          "navigationFallback": {
              "rewrite": "/index.html",
              "exclude": [
                  "/sub-site1/*",
                  "/sub-site2/*",
              ]
          },
          "routes": [
              {
                  "route": "/",
                  "methods": ["GET"],
                  "rewrite": "index.html"
              },
              {
                  "route": "/sub-site1/*",
                  "methods": ["GET"],
                  "rewrite": "/sub-site1/"
              },
              {
                  "route": "/sub-site2/*",
                  "methods": ["GET"],
                  "rewrite": "/sub-site2/"
              },
          ],
          "mimeTypes": {
              ".html": "text/html",
              ".css": "text/css",
              ".js": "application/javascript",
              ".json": "application/json",
              ".woff": "font/woff",
              ".woff2": "font/woff2",
              ".ttf": "font/ttf",
              ".svg": "image/svg+xml",
              ".png": "image/png",
              ".jpg": "image/jpeg",
              ".jpeg": "image/jpeg",
              ".gif": "image/gif"
          },
          "responseOverrides": {
              "404": {
                  "rewrite": "/404.html"
              }
          }
      }
     

2. Behavior Observed:
   • The browser throws errors like NS_ERROR_CORRUPTED_CONTENT or 404s for asset files.
   • The asset paths in the generated HTML are relative to the current page's directory rather than the sub-site root.
   • If I try and look at the link to a page in a sub-site, say https://example.com/sub-site1/page1 by clicking on a link in the sub-site home page (which loads without any styles or scripts), it shows as https://example.com/page1.

Question

How can I configure MkDocs and Azure Static Web Apps so that sub-site pages correctly load their assets (CSS, JS) without attempting to fetch them relative to the current page? Is there a specific MkDocs or Azure Static Web Apps configuration I might be missing? Any insights or similar experiences would be greatly appreciated! Or if it is even possible to host a structure like this (where we have a top level site as well as sub-sites built separately as sub-folders which will be linked as paths to the domain) as a static web app?