Allow Local Hosting of Javascript Dependencies for Airgapped Environments

[leonvosidemia]

Context

No response

Bug description

We are running MkDocs Material in an airgapped environment where external resources cannot be fetched from the internet. Currently, various Javascript libraries are hardcoded - like mermaid.min.js - to be loaded from unpkg.com, preventing us from using Mermaid diagrams in our documentation.

Related links

• Reporting a bug

Reproduction

mkdocs.yml:

site_name: test
theme:
  name: material
markdown_extensions:
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_code_format

docs/index.md:

flowchart TD
    testing{1234}

Loading

Steps to reproduce

1. Create a markdown file which includes any mermaid diagram
2. Build the static files
3. Move the static files to an airgapped environment
4. Open the files in a local browser
5. The build works as expected (e.g. it is working), however the mermaid graph isn't rendered, because the mermaid.min.js cannot be fetched

Another usecase we utilize is to build everything within the airgapped environment, which results in the same situation.

Browser

Firefox

Before submitting

• I have read and followed the bug reporting guidelines.
• I have attached links to the documentation, and possibly related issues and discussions.
• I assure that I have removed all customizations before submitting this bug report.
• I have attached a .zip file with a minimal reproduction using the built-in info plugin.

[squidfunk]

Thanks for suggesting. We've explained several times why bundling all assets is not possible, which is also why we've added it to our documentation (see green box). However, this is exactly what the privacy plugin is for – you can download the assets in a non-airgapped environment, and then commit the cache to your repository, so that they don't need to be downloaded.

I'm converting this to a discussion, in case you need help with it.

[squidfunk]

Oh, and you can just provide your own Mermaid.js via extra JavaScript, that should already solve the problem, see: #3742 (comment)

[heitorlessa]

glad I found this discussion!

just bumped into this (airgap env), gonna try the privacy plugin. I previously tried to include as an extra_js asset but the component kept bringing the external asset.

reporting back later

[heitorlessa]

worked by removing privacy plugin ; ). Thanks a lot!!

extra_javascript:
  - javascripts/mermaid.min.js
  - javascripts/tablesort.min.js
  - javascripts/tablesort.js