Added support for plotly js (alshedivat#3097)

Only now I realized that the [previous
support](https://alshedivat.github.io/al-folio/blog/2021/distill/#interactive-plots)
for [plotly](https://plotly.com/) was enabled by exporting an HTML from
python code. This adds support for
[plotly.js](https://plotly.com/javascript/).

---------

Signed-off-by: George Araújo <[email protected]>

Author: george-gca

_config.yml

@@ -548,6 +548,12 @@ third_party_libraries:
     url:
       js: "https://cdn.jsdelivr.net/npm/photoswipe@{{version}}/dist/photoswipe-lightbox.esm.min.js"
     version: "5.4.4"
+  plotly:
+    integrity:
+      js: "sha256-oy6Be7Eh6eiQFs5M7oXuPxxm9qbJXEtTpfSI93dW16Q="
+    url:
+      js: "https://cdn.jsdelivr.net/npm/plotly.js@{{version}}/dist/plotly.min.js"
+    version: "3.0.1"
   polyfill:
     url:
       js: "https://cdnjs.cloudflare.com/polyfill/v{{version}}/polyfill.min.js?features=es6"

_includes/distill_scripts.liquid

@@ -81,6 +81,17 @@
   <script defer src="{{ '/assets/js/echarts-setup.js' | relative_url | bust_file_cache }}" type="text/javascript"></script>
 {% endif %}
 
+{% if page.chart and page.chart.plotly %}
+  <!-- Plotly -->
+  <script
+    defer
+    src="{{ site.third_party_libraries.plotly.url.js }}"
+    integrity="{{ site.third_party_libraries.plotly.integrity.js }}"
+    crossorigin="anonymous"
+  ></script>
+  <script defer src="{{ '/assets/js/plotly-setup.js' | relative_url | bust_file_cache }}" type="text/javascript"></script>
+{% endif %}
+
 {% if page.chart and page.chart.vega_lite %}
   <!-- Vega -->
   <script

_includes/scripts.liquid

@@ -98,6 +98,17 @@
   <script defer src="{{ '/assets/js/echarts-setup.js' | relative_url | bust_file_cache }}" type="text/javascript"></script>
 {% endif %}
 
+{% if page.chart and page.chart.plotly %}
+  <!-- Plotly -->
+  <script
+    defer
+    src="{{ site.third_party_libraries.plotly.url.js }}"
+    integrity="{{ site.third_party_libraries.plotly.integrity.js }}"
+    crossorigin="anonymous"
+  ></script>
+  <script defer src="{{ '/assets/js/plotly-setup.js' | relative_url | bust_file_cache }}" type="text/javascript"></script>
+{% endif %}
+
 {% if page.chart and page.chart.vega_lite %}
   <!-- Vega -->
   <script

_posts/2025-03-26-plotly.md

@@ -0,0 +1,110 @@
+---
+layout: post
+title: a post with plotly.js
+date: 2025-03-26 14:24:00
+description: this is what included plotly.js code could look like
+tags: formatting charts
+categories: sample-posts
+chart:
+  plotly: true
+---
+
+This is an example post with some [plotly](https://plotly.com/javascript/) code.
+
+````markdown
+```plotly
+{
+  "data": [
+    {
+      "x": [1, 2, 3, 4],
+      "y": [10, 15, 13, 17],
+      "type": "scatter"
+    },
+    {
+      "x": [1, 2, 3, 4],
+      "y": [16, 5, 11, 9],
+      "type": "scatter"
+    }
+  ]
+}
+```
+````
+
+Which generates:
+
+```plotly
+{
+  "data": [
+    {
+      "x": [1, 2, 3, 4],
+      "y": [10, 15, 13, 17],
+      "type": "scatter"
+    },
+    {
+      "x": [1, 2, 3, 4],
+      "y": [16, 5, 11, 9],
+      "type": "scatter"
+    }
+  ]
+}
+```
+
+Also another example chart.
+
+````markdown
+```plotly
+{
+  "data": [
+    {
+      "x": [1, 2, 3, 4],
+      "y": [10, 15, 13, 17],
+      "mode": "markers"
+    },
+    {
+      "x": [2, 3, 4, 5],
+      "y": [16, 5, 11, 9],
+      "mode": "lines"
+    },
+    {
+      "x": [1, 2, 3, 4],
+      "y": [12, 9, 15, 12],
+      "mode": "lines+markers"
+    }
+  ],
+  "layout": {
+    "title": {
+      "text": "Line and Scatter Plot"
+    }
+  }
+}
+```
+````
+
+This is how it looks like:
+
+```plotly
+{
+  "data": [
+    {
+      "x": [1, 2, 3, 4],
+      "y": [10, 15, 13, 17],
+      "mode": "markers"
+    },
+    {
+      "x": [2, 3, 4, 5],
+      "y": [16, 5, 11, 9],
+      "mode": "lines"
+    },
+    {
+      "x": [1, 2, 3, 4],
+      "y": [12, 9, 15, 12],
+      "mode": "lines+markers"
+    }
+  ],
+  "layout": {
+    "title": {
+      "text": "Line and Scatter Plot"
+    }
+  }
+}
+```

assets/js/copy_code.js

@@ -8,6 +8,7 @@ codeBlocks.forEach(function (codeBlock) {
     codeBlock.querySelector("code:not(.language-echarts)") &&
     codeBlock.querySelector("code:not(.language-geojson)") &&
     codeBlock.querySelector("code:not(.language-mermaid)") &&
+    codeBlock.querySelector("code:not(.language-plotly)") &&
     codeBlock.querySelector("code:not(.language-vega_lite)")
   ) {
     // create copy button