Added support for Chart.js (#2126)

Solved #460. ![image](https://github.com/alshedivat/al-folio/assets/31376482/ce65dbe2-031e-4208-b374-08ec89beaaca) --------- Signed-off-by: George Araújo <[email protected]>
alshedivat · Jan 26, 2024 · a7d6b37 · a7d6b37
1 parent 1d84621
commit a7d6b37
Show file tree

Hide file tree

Showing 5 changed files with 213 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -299,7 +299,7 @@ For more details on how to create distill-styled posts using `<d-*>` tags, pleas
 
 #### Full support for math & code
 
-**al-folio** supports fast math typesetting through [MathJax](https://www.mathjax.org/) and code syntax highlighting using [GitHub style](https://github.com/jwarby/jekyll-pygments-themes). Also supports [mermaid diagrams](https://mermaid-js.github.io/mermaid/#/) and [TikZ figures](https://tikzjax.com/).
+**al-folio** supports fast math typesetting through [MathJax](https://www.mathjax.org/) and code syntax highlighting using [GitHub style](https://github.com/jwarby/jekyll-pygments-themes). Also supports [chartjs charts](https://www.chartjs.org/), [mermaid diagrams](https://mermaid-js.github.io/mermaid/#/), and [TikZ figures](https://tikzjax.com/).
 
 <p align="center">
 <a href="https://alshedivat.github.io/al-folio/blog/2015/math/" target="_blank"><img src="assets/img/readme_preview/math.png" width=400></a>

diff --git a/_includes/scripts/chart.liquid b/_includes/scripts/chart.liquid
@@ -0,0 +1,19 @@
+{% if page.chart %}
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
+  <script>
+    $(document).ready(function () {
+      var $canvas = null,
+        $this = null,
+        _ctx = null,
+        _text = '';
+      $('.language-chart').each(function () {
+        $this = $(this);
+        $canvas = $('<canvas></canvas>');
+        _text = $this.text();
+        $this.text('').append($canvas);
+        _ctx = $canvas.get(0).getContext('2d');
+        _ctx && _text && new Chart(_ctx, JSON.parse(_text)) && $this.attr('data-processed', true);
+      });
+    });
+  </script>
+{% endif %}
diff --git a/_layouts/default.liquid b/_layouts/default.liquid
@@ -48,6 +48,7 @@
     {% include scripts/bootstrap.liquid %}
     {% include scripts/masonry.liquid %}
     {% include scripts/mermaid.liquid %}
+    {% include scripts/chart.liquid %}
     {% include scripts/misc.liquid %}
     {% include scripts/badges.liquid %}
     {% include scripts/mathjax.liquid %}

diff --git a/_posts/2024-01-26-chartjs.md b/_posts/2024-01-26-chartjs.md
@@ -0,0 +1,187 @@
+---
+layout: post
+title: a post with chart.js
+date: 2024-01-26 01:04:00
+description: this is what included chart.js code could look like
+tags: formatting charts
+categories: sample-posts
+chart: true
+---
+
+This is an example post with some chart.js code.
+
+````markdown
+```chart
+{
+  "type": "line",
+  "data": {
+    "labels": [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July"
+    ],
+    "datasets": [
+      {
+        "label": "# of bugs",
+        "fill": false,
+        "lineTension": 0.1,
+        "backgroundColor": "rgba(75,192,192,0.4)",
+        "borderColor": "rgba(75,192,192,1)",
+        "borderCapStyle": "butt",
+        "borderDash": [],
+        "borderDashOffset": 0,
+        "borderJoinStyle": "miter",
+        "pointBorderColor": "rgba(75,192,192,1)",
+        "pointBackgroundColor": "#fff",
+        "pointBorderWidth": 1,
+        "pointHoverRadius": 5,
+        "pointHoverBackgroundColor": "rgba(75,192,192,1)",
+        "pointHoverBorderColor": "rgba(220,220,220,1)",
+        "pointHoverBorderWidth": 2,
+        "pointRadius": 1,
+        "pointHitRadius": 10,
+        "data": [
+          65,
+          59,
+          80,
+          81,
+          56,
+          55,
+          40
+        ],
+        "spanGaps": false
+      }
+    ]
+  },
+  "options": {}
+}
+```
+````
+
+This is how it looks like:
+
+```chart
+{
+  "type": "line",
+  "data": {
+    "labels": [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July"
+    ],
+    "datasets": [
+      {
+        "label": "# of bugs",
+        "fill": false,
+        "lineTension": 0.1,
+        "backgroundColor": "rgba(75,192,192,0.4)",
+        "borderColor": "rgba(75,192,192,1)",
+        "borderCapStyle": "butt",
+        "borderDash": [],
+        "borderDashOffset": 0,
+        "borderJoinStyle": "miter",
+        "pointBorderColor": "rgba(75,192,192,1)",
+        "pointBackgroundColor": "#fff",
+        "pointBorderWidth": 1,
+        "pointHoverRadius": 5,
+        "pointHoverBackgroundColor": "rgba(75,192,192,1)",
+        "pointHoverBorderColor": "rgba(220,220,220,1)",
+        "pointHoverBorderWidth": 2,
+        "pointRadius": 1,
+        "pointHitRadius": 10,
+        "data": [
+          65,
+          59,
+          80,
+          81,
+          56,
+          55,
+          40
+        ],
+        "spanGaps": false
+      }
+    ]
+  },
+  "options": {}
+}
+```
+
+Also another example chart.
+
+````markdown
+```chart
+{
+  "type": "doughnut",
+  "data": {
+    "labels": [
+      "Red",
+      "Blue",
+      "Yellow"
+    ],
+    "datasets": [
+      {
+        "data": [
+          300,
+          50,
+          100
+        ],
+        "backgroundColor": [
+          "#FF6384",
+          "#36A2EB",
+          "#FFCE56"
+        ],
+        "hoverBackgroundColor": [
+          "#FF6384",
+          "#36A2EB",
+          "#FFCE56"
+        ]
+      }
+    ]
+  },
+  "options": {}
+}
+```
+````
+
+Which generates:
+
+```chart
+{
+  "type": "doughnut",
+  "data": {
+    "labels": [
+      "Red",
+      "Blue",
+      "Yellow"
+    ],
+    "datasets": [
+      {
+        "data": [
+          300,
+          50,
+          100
+        ],
+        "backgroundColor": [
+          "#FF6384",
+          "#36A2EB",
+          "#FFCE56"
+        ],
+        "hoverBackgroundColor": [
+          "#FF6384",
+          "#36A2EB",
+          "#FFCE56"
+        ]
+      }
+    ]
+  },
+  "options": {}
+}
+```
diff --git a/assets/js/copy_code.js b/assets/js/copy_code.js
@@ -1,7 +1,11 @@
 // create element for copy button in code blocks
 var codeBlocks = document.querySelectorAll("pre");
 codeBlocks.forEach(function (codeBlock) {
-  if ((codeBlock.querySelector("pre:not(.lineno)") || codeBlock.querySelector("code")) && codeBlock.querySelector("code:not(.language-mermaid)")) {
+  if (
+    (codeBlock.querySelector("pre:not(.lineno)") || codeBlock.querySelector("code")) &&
+    codeBlock.querySelector("code:not(.language-chart)") &&
+    codeBlock.querySelector("code:not(.language-mermaid)")
+  ) {
     // create copy button
     var copyButton = document.createElement("button");
     copyButton.className = "copy";