#3137 initial code for Plotly support

Author: rjzupkoii

.gitignore

@@ -14,4 +14,7 @@ package-lock.json
 
 # Ignore the vendor file and bundle for alternative installation
 vendor/
-.bundle/
+.bundle/
+
+# Ignore folders related to IDEs
+.vscode/

_includes/head/custom.html

@@ -18,9 +18,12 @@
 
 <!-- Support for Mermaid -->
 <script type="module">
-import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
-mermaid.initialize({startOnLoad:true, theme:'default'});
-await mermaid.run({querySelector:'code.language-mermaid'});
+    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+    mermaid.initialize({startOnLoad:true, theme:'default'});
+    await mermaid.run({querySelector:'code.language-mermaid'});
 </script>
 
+<!-- Support for Plotly -->
+<script src='https://cdnjs.cloudflare.com/ajax/libs/plotly.js/3.0.1/plotly.min.js'></script>
+
 <!-- end custom head snippets -->

_includes/scripts.html

@@ -1,3 +1,3 @@
-<script src="{{ base_path }}/assets/js/main.min.js"></script>
+<script type="module" src="{{ base_path }}/assets/js/main.min.js"></script>
 
 {% include analytics.html %}

_pages/markdown.md

@@ -92,6 +92,25 @@ graph TD;
     C-->D;
 ```
 
+## Plotly
+
+```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"
+    }
+  ]
+}
+```
+
 ## Markdown guide
 
 Academic Pages uses [kramdown](https://kramdown.gettalong.org/index.html) for Markdown rendering, which has some differences from other Markdown implementations such as GitHub's. In addition to this guide, please see the [kramdown Syntax page](https://kramdown.gettalong.org/syntax.html) for full documentation.  

assets/js/_main.js

@@ -1,5 +1,81 @@
 /* ==========================================================================
-   jQuery plugin settings and other scripts
+   Various functions that we want to use within the template
+   ========================================================================== */
+
+// Determine the expected state of the theme toggle, which can be "dark", "light", or
+// "system". Default is "system".
+let determineThemeSetting = () => {
+  let themeSetting = localStorage.getItem("theme");
+  return (themeSetting != "dark" && themeSetting != "light" && themeSetting != "system") ? "system" : themeSetting;
+};
+
+// Determine the computed theme, which can be "dark" or "light". If the theme setting is
+// "system", the computed theme is determined based on the user's system preference.
+let determineComputedTheme = () => {
+  let themeSetting = determineThemeSetting();
+  if (themeSetting != "system") {
+    return themeSetting;
+  }
+  return (userPref && userPref("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+};
+
+// Set the theme on page load or when explicitly called
+let setTheme = (theme) => {
+  const use_theme =
+    theme ||
+    localStorage.getItem("theme") ||
+    $("html").attr("data-theme") ||
+    browserPref;
+
+  if (use_theme === "dark") {
+    $("html").attr("data-theme", "dark");
+    $("#theme-icon").removeClass("fa-sun").addClass("fa-moon");
+  } else if (use_theme === "light") {
+    $("html").removeAttr("data-theme");
+    $("#theme-icon").removeClass("fa-moon").addClass("fa-sun");
+  }
+};
+
+// Toggle the theme manually
+var toggleTheme = () => {
+  const current_theme = $("html").attr("data-theme");
+  const new_theme = current_theme === "dark" ? "light" : "dark";
+  localStorage.setItem("theme", new_theme);
+  setTheme(new_theme);
+};
+
+/* ==========================================================================
+   Plotly integration script so that Markdown codeblocks will be rendered
+   ========================================================================== */
+
+// Read the Plotly data from the code block, hide it, and render the chart as new node. This allows for the 
+// JSON data to be retrieve when the theme is switched.
+import { plotlyDarkLayout, plotlyLightLayout } from './theme.js';       
+document.addEventListener("readystatechange", () => {
+  if (document.readyState === "complete") {
+    document.querySelectorAll("pre>code.language-plotly").forEach((elem) => {
+      // Parse the Plotly JSON data and hide it
+      var jsonData = JSON.parse(elem.textContent);
+      elem.parentElement.classList.add("hidden");
+
+      // Add the Plotly node
+      let chartElement = document.createElement("div");
+      elem.parentElement.after(chartElement);      
+
+      // Set the theme for the plot and render it
+      const theme = (determineComputedTheme() === "dark") ? plotlyDarkLayout : plotlyLightLayout;
+      if (jsonData.layout) {
+        jsonData.layout.template = (jsonData.layout.template) ? { ...theme, ...jsonData.layout.template } : theme;
+      } else {
+        jsonData.layout = { template: theme };
+      }
+      Plotly.react(chartElement, jsonData.data, jsonData.layout);
+    });
+  }
+});
+
+/* ==========================================================================
+   Actions that should occur when the page has been fully loaded
    ========================================================================== */
 
 $(document).ready(function () {
@@ -8,23 +84,6 @@ $(document).ready(function () {
     ? 'dark'
     : 'light';
 
-  // Set the theme on page load or when explicitly called
-  var setTheme = function (theme) {
-    const use_theme =
-      theme ||
-      localStorage.getItem("theme") ||
-      $("html").attr("data-theme") ||
-      browserPref;
-
-    if (use_theme === "dark") {
-      $("html").attr("data-theme", "dark");
-      $("#theme-icon").removeClass("fa-sun").addClass("fa-moon");
-    } else if (use_theme === "light") {
-      $("html").removeAttr("data-theme");
-      $("#theme-icon").removeClass("fa-moon").addClass("fa-sun");
-    }
-  };
-
   setTheme();
 
   // if user hasn't chosen a theme, follow OS changes
@@ -36,14 +95,6 @@ $(document).ready(function () {
       }
     });
 
-  // Toggle the theme manually
-  var toggleTheme = function () {
-    const current_theme = $("html").attr("data-theme");
-    const new_theme = current_theme === "dark" ? "light" : "dark";
-    localStorage.setItem("theme", new_theme);
-    setTheme(new_theme);
-  };
-
   $('#theme-toggle').on('click', toggleTheme);
 
   // These should be the same as the settings in _variables.scss