Fix PR preview deployment issues

.github/workflows/pull-request-preview.yml

@@ -115,21 +115,3 @@ jobs:
           preview-branch: gh-pages
           umbrella-dir: pr-preview
           action: remove
-
-      - name: Delete preview environment
-        env:
-          GH_TOKEN: ${{ github.token }}
-        run: |
-          set -e
-          ENV_NAME="pr-preview/pr-${{ github.event.pull_request.number }}"
-          ENCODED_ENV="${ENV_NAME//\//%2F}"
-
-          gh api "repos/${{ github.repository }}/deployments" \
-            -X GET -f environment="$ENV_NAME" --jq '.[].id' \
-          | while IFS= read -r id; do
-              gh api "repos/${{ github.repository }}/deployments/$id/statuses" \
-                -X POST -f state=inactive
-              gh api "repos/${{ github.repository }}/deployments/$id" -X DELETE
-            done
-
-          gh api "repos/${{ github.repository }}/environments/$ENCODED_ENV" -X DELETE

mkdocs.yml

@@ -64,6 +64,10 @@ extra_javascript:
   - docs/_assets/js/ruiIcon.js
   - docs/_assets/js/ruiSwatch.js
 
+  # Workaround for https://github.com/react-ui-org/docoff/issues/50 — sets --docoff-preview-css
+  # dynamically so subdirectory deployments (e.g. PR previews) load the correct CSS bundle.
+  - docs/_assets/js/setupDocoff.js
+
   # Then load and init Docoff
   - https://unpkg.com/@react-ui-org/docoff@0.5.4/public/generated/bundle.js
 

src/docs/_assets/js/setupDocoff.js

@@ -0,0 +1,11 @@
+// Derives --docoff-preview-css from the co-located react-ui bundle URL so that
+// subdirectory deployments (e.g. PR previews) resolve the correct CSS file.
+// Remove once https://github.com/react-ui-org/docoff/issues/50 is fixed.
+(() => {
+  const script = [...document.querySelectorAll('script[src]')]
+    .find((s) => /react-ui(\.\w+)?\.js$/.test(s.src));
+
+  if (script) {
+    document.body.style.setProperty('--docoff-preview-css', script.src.replace(/\.js$/, '.css'));
+  }
+})();

src/docs/_assets/stylesheets/extra.css

@@ -33,7 +33,12 @@
     --docoff-preview-padding: 1em;
 
     /* Custom preview CSS file, typically this would be the CSS of your component */
-    --docoff-preview-css: /docs/_assets/generated/react-ui.development.css;
+
+    /* Commented out — an absolute path breaks subdirectory deployments (e.g. PR previews).
+       Set dynamically via docs/_assets/js/setupDocoff.js instead.
+       See https://github.com/react-ui-org/docoff/issues/50 for the upstream fix. */
+
+    /* --docoff-preview-css: /docs/_assets/generated/react-ui.development.css; */
 
     /* Visual configuration of the `<docoff-placeholder>` element */
     --docoff-placeholder-background-dark: #4d4d4d;