sourcing an external js library with in mkdocs #7241

ghost · 2024-06-03T18:20:17Z

ghost
Jun 3, 2024

Hi, i am trying to source an external js library with in mkdocs and also mkdocs-material such as highcharts and chartsjs but it is not rendering the chart. even in case of the plotly, the chart is not rendering when the build is done and deployed unless you put a <!DOCSYTLE html> and then it renders.

Can you point me to the page or the link where an external js can be called without calling the HTML tag as to deploy it with in the container. I put the js into the /docs/javascripts/plot-charts.js

The configuration file is given below: So here i am trying to put a chart plotting library in a folder named javascript in the docs folder and then using all the sub-functions. However, when i am rendering it, it is not taking the plots in the web render. However, when i put the as the file indicating it is as HTML file rather than a markdown syntax file, the plots are rendered.

Let me know if anything else need to be changed. I also tried passing the url of the same.

site_name: genomes
site_url: mywebsite address
plugins:
  - search: {}
  - encryptcontent: {}
extra_javascript:
  - javascripts/chart.js
theme:
  name: cosmo
nav:
  - Home: main.md

i added the link also but it is not working.

site_name: genomes
site_url: mywebsite address
plugins:
  - search: {}
  - encryptcontent: {}
extra_javascript:
  - <script src="https://cdn.plot.ly/plotly-2.33.0.min.js" charset="utf-8"></script>
theme:
  name: cosmo
nav:
  - Home: main.md

Thank you,
Gaurav

thank you,
Gaurav

kamilkrzyskow · 2024-06-03T19:54:23Z

kamilkrzyskow
Jun 3, 2024
Collaborator

Hello @gauravcodepro,
it would be for the best, for you to prepare a runnable example zip archive using the minimal reproduction guide:

https://squidfunk.github.io/mkdocs-material/contributing/reporting-a-bug/

Removing all plugins and other custom stuff would help to pinpoint the issue.
None of your provided configurations contain both of the scripts you want to add...

Also according to the docs your second example is incorrect:

https://www.mkdocs.org/user-guide/configuration/#extra_javascript
You should only provide the link to the JS file https://cdn.plot.ly/plotly-2.33.0.min.js

According to the docs here: https://plotly.com/javascript/getting-started/
It's recommended to add the library to the <head> section of the site, you can do so with customization and extending the extrahead block:

https://squidfunk.github.io/mkdocs-material/customization/#overriding-blocks

0 replies

ghost · 2024-06-03T19:57:19Z

ghost
Jun 3, 2024

@kamilkrzyskow thank you and i am packaging the same for a minimal installation to see where it is not picking up the same. as soon as it is ready will post the link here to give a try.

Thank you,
Gaurav

0 replies

ghost · 2024-06-03T21:01:37Z

ghost
Jun 3, 2024

[
test.tar.gz
]

(@kamilkrzyskow please see attached a test site i build and put the javascript functions with in the test site and it is listening to the document.getselect.

The site is working fine and it is routing the javascript library through the extra_javascript but as soon as i enable the encryption using the https://github.com/unverbuggt/mkdocs-encryptcontent-plugin by adding this to the mkdocs.yml, it stops routing the javascript library and make no charts.

plugins:
  - search: {}
  - encryptcontent: {}

You can test by running the unzip and then first by simply running the

mkdocs build 
mkdocs serve

and everything is working fine and then you can add the encryption by adding those aforementioned lines to the mkdocs.yml and then again

mkdocs build
mkdocs serve

and the charts went off and it is no longer routing the javascript library.

let me know.
Gaurav)

2 replies

kamilkrzyskow Jun 3, 2024
Collaborator

Please make sure to read through the links I've sent in my previous comment, even though it works without the plugin it still isn't done "as per specification", and this is a layer of variability we don't want to have.

You can't just slap on a <head> into the test.md file, the <head> is already created. Follow the link about extending the theme.

I see that you've posted the issue upstream as well 👍 Let's hope it will be a quick fix.

encryption is blocking the javascript library unverbuggt/mkdocs-encryptcontent-plugin#70

kamilkrzyskow Jun 3, 2024
Collaborator

Looking at this commit:

unverbuggt/mkdocs-encryptcontent-plugin@d6dad1b

I guess that your issue could lie in handling the loading events and you likely can't just use read = document.getElementById('R4'); directly in the "root" as when it's executed it might conflict with the encryption 🤔

ghost · 2024-06-04T03:33:13Z

ghost
Jun 4, 2024

@kamilkrzyskow thank you and it can be used. in the test.tag.gz site template i have provided, everything works without the encryption, it is listening to the DOM events and the moment you add the encryption it stops the routing of the library.

0 replies

ghost · 2024-06-04T04:03:07Z

ghost
Jun 4, 2024

@kamilkrzyskow see this, i checked using the vegalite and vegalite works just fine without the encryption as

extra_javascript:
  - https://cdn.jsdelivr.net/npm/vega@5
  - https://cdn.jsdelivr.net/npm/vega-lite@5
  - https://cdn.jsdelivr.net/npm/vega-embed@6
markdown_extensions:
  - pymdownx.superfences:
      custom_fences:
        - name: vegalite
          class: vegalite
          format: !!python/name:mkdocs_charts_plugin.fences.fence_vegalite

but as soon as you enable the encrypted plugin then the vegalite also stops working basically the enrcyption is not allowing the library to route through.

Thank you,
Gaurav

0 replies

unverbuggt · 2024-06-09T14:04:51Z

unverbuggt
Jun 9, 2024

Hi,

in you test configuration, you set the extra_javascript like this:

extra_javascript:
 - <script src="https://cdn.plot.ly/plotly-2.33.0.min.js"></script>
 - <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js">
theme:

Why? I don't believe this is the correct syntax. At least Firefox and Edge give me 404 errors this way. But the charts somehow work.
None of your sites is encrypted, so the encryptcontent plugin should do nothing on the site (activating the plugin has no effect).

Plus, you are not using material theme in your test configuration. Better reopen the issue on the plugin page then.

If you are using whatever javascript libraries on an encrypted page, then you might need to reload some scripts (explained here)

0 replies

ghost · 2024-06-09T16:18:15Z

ghost
Jun 9, 2024

@unverbuggt thank you for taking the time to reply and giving the attention to this. I appreciate this and this will help me solve the problem. I solved it earlier but this will help the other users also. Thank you for your time and attention.

Gaurav

0 replies

Uh oh!

sourcing an external js library with in mkdocs #7241

Uh oh!

ghost Jun 3, 2024

Replies: 7 comments · 2 replies

Uh oh!

kamilkrzyskow Jun 3, 2024 Collaborator

Uh oh!

ghost Jun 3, 2024

Uh oh!

ghost Jun 3, 2024

Uh oh!

Uh oh!

kamilkrzyskow Jun 3, 2024 Collaborator

Uh oh!

kamilkrzyskow Jun 3, 2024 Collaborator

Uh oh!

ghost Jun 4, 2024

Uh oh!

ghost Jun 4, 2024

Uh oh!

unverbuggt Jun 9, 2024

Uh oh!

ghost Jun 9, 2024

ghost
Jun 3, 2024

Replies: 7 comments 2 replies

kamilkrzyskow
Jun 3, 2024
Collaborator

ghost
Jun 3, 2024

ghost
Jun 3, 2024

kamilkrzyskow Jun 3, 2024
Collaborator

kamilkrzyskow Jun 3, 2024
Collaborator

ghost
Jun 4, 2024

ghost
Jun 4, 2024

unverbuggt
Jun 9, 2024

ghost
Jun 9, 2024