From 24de8cb34ee1a9e9fa06ce18e69ed63d46192615 Mon Sep 17 00:00:00 2001
From: Xin <xin@imfing.com>
Date: Fri, 29 Mar 2024 22:03:14 +0000
Subject: [PATCH] feat: shortcode for Jupyter Notebook

---
 assets/css/components/jupyter.css             | 31 +++++++++
 assets/css/components/scrollbar.css           |  2 +-
 assets/css/styles.css                         |  1 +
 .../content/docs/test-jupyter/index.md        | 10 +++
 layouts/partials/scripts.html                 |  6 ++
 layouts/shortcodes/jupyter.html               | 66 +++++++++++++++++++
 6 files changed, 115 insertions(+), 1 deletion(-)
 create mode 100644 assets/css/components/jupyter.css
 create mode 100644 exampleSite/content/docs/test-jupyter/index.md
 create mode 100644 layouts/shortcodes/jupyter.html

diff --git a/assets/css/components/jupyter.css b/assets/css/components/jupyter.css
new file mode 100644
index 0000000..4e977a4
--- /dev/null
+++ b/assets/css/components/jupyter.css
@@ -0,0 +1,31 @@
+.hextra-jupyter-code-cell {
+  * {
+    scrollbar-gutter: auto;
+  }
+
+  @apply hx-mt-6;
+
+  .hextra-jupyter-code-cell-source {
+    @apply hx-text-sm;
+    .chroma,
+    pre {
+      @apply hx-m-0;
+    }
+  }
+
+  .hextra-jupyter-code-cell-outputs-container {
+    @apply hx-text-xs hx-overflow-hidden hx-border hx-border-t-0 hx-rounded-b-xl dark:hx-border-neutral-800;
+
+    .hextra-jupyter-code-cell-outputs {
+      @apply hx-overflow-auto hx-max-h-[50vh];
+
+      pre {
+        @apply hx-p-4;
+      }
+    }
+  }
+}
+
+.hextra-jupyter-code-cell:has(.hextra-jupyter-code-cell-outputs) .hextra-jupyter-code-cell-source .chroma {
+  @apply hx-rounded-b-none;
+}
diff --git a/assets/css/components/scrollbar.css b/assets/css/components/scrollbar.css
index 7dc75e9..6699375 100644
--- a/assets/css/components/scrollbar.css
+++ b/assets/css/components/scrollbar.css
@@ -1,4 +1,4 @@
-.hextra-scrollbar {
+.hextra-scrollbar, .hextra-scrollbar * {
   scrollbar-width: thin; /* Firefox */
   scrollbar-color: oklch(55.55% 0 0 / 40%) transparent; /* Firefox */
 
diff --git a/assets/css/styles.css b/assets/css/styles.css
index 3ef02b8..48cfc56 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -9,6 +9,7 @@
 @import "components/navbar.css";
 @import "components/scrollbar.css";
 @import "components/code-copy.css";
+@import "components/jupyter.css";
 
 html {
   @apply hx-text-base hx-antialiased;
diff --git a/exampleSite/content/docs/test-jupyter/index.md b/exampleSite/content/docs/test-jupyter/index.md
new file mode 100644
index 0000000..aa184f7
--- /dev/null
+++ b/exampleSite/content/docs/test-jupyter/index.md
@@ -0,0 +1,10 @@
+---
+title: Jupyter Notebook
+math: true
+---
+
+{{< callout type="info" >}}
+  Experimental page to include Jupyter Notebooks in the site.
+{{< /callout >}}
+
+{{< jupyter "Intro.ipynb" >}}
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index dbb4fe4..026b344 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -60,12 +60,18 @@
   {{- end -}}
   <script>
     // TODO: make render options configurable
+    // Reference: https://katex.org/docs/autorender#api
     document.addEventListener("DOMContentLoaded", function () {
       renderMathInElement(document.body, {
         delimiters: [
           { left: "$$", right: "$$", display: true },
           { left: "$", right: "$", display: false },
           { left: "\\(", right: "\\)", display: false },
+          { left: "\\begin{equation}", right: "\\end{equation}", display: true },
+          {left: "\\begin{align}", right: "\\end{align}", display: true},
+          {left: "\\begin{alignat}", right: "\\end{alignat}", display: true},
+          {left: "\\begin{gather}", right: "\\end{gather}", display: true},
+          {left: "\\begin{CD}", right: "\\end{CD}", display: true},
           { left: "\\[", right: "\\]", display: true },
         ],
         throwOnError: false,
diff --git a/layouts/shortcodes/jupyter.html b/layouts/shortcodes/jupyter.html
new file mode 100644
index 0000000..288d44d
--- /dev/null
+++ b/layouts/shortcodes/jupyter.html
@@ -0,0 +1,66 @@
+{{/* Render Jupyter Notebook */}}
+{{- $path := .Get 0 -}}
+{{- $data := "" -}}
+{{- $page := .Page -}}
+
+{{/* https://gohugo.io/functions/transform/unmarshal/ */}}
+{{- with .Page.Resources.Get $path -}}
+  {{- with unmarshal .Content -}}
+    {{- $data = . -}}
+  {{- end -}}
+{{- else -}}
+  {{- errorf "Resource not found: %s" $path -}}
+{{- end -}}
+
+{{- $language := index $data "metadata" "language_info" "name" | default "python" -}}
+
+{{- with index $data "cells" -}}
+  {{- range $cell := . -}}
+    {{- if eq (index $cell "cell_type") "code" -}}
+      {{- $source := index $cell "source" -}}
+      {{- $sourceContent := (cond (reflect.IsSlice $source) (delimit $source "") $source) -}}
+      <div class="hextra-jupyter-code-cell hextra-scrollbar">
+        <div class="hextra-jupyter-code-cell-source hextra-code-block">
+          {{- partial "components/codeblock" (dict "lang" $language "content" $sourceContent) -}}
+        </div>
+        {{- $outputs := index $cell "outputs" -}}
+
+        {{- with $outputs -}}
+          <div class="hextra-jupyter-code-cell-outputs-container">
+            <div class="hextra-jupyter-code-cell-outputs">
+              {{- range $output := . -}}
+                {{- if eq (index $output "output_type") "display_data" -}}
+                  {{- $data := index $output "data" -}}
+                  {{- $image := index $data "image/png" -}}
+                  {{- if $image -}}
+                    <img src="data:image/png;base64,{{- $image -}}" alt="image" />
+                  {{- end -}}
+                {{- else if eq (index $output "output_type") "stream" -}}
+                  {{- $text := index $output "text" -}}
+                  {{- $textContent := (cond (reflect.IsSlice $text) (delimit $text "") $text) -}}
+                  <pre class="not-prose">{{- $textContent -}}</pre>
+                {{- else if eq (index $output "output_type") "execute_result" -}}
+                  {{- $data := index $output "data" -}}
+                  {{- $text := index $data "text/plain" -}}
+                  {{- $textContent := (cond (reflect.IsSlice $text) (delimit $text "") $text) -}}
+                  <pre class="not-prose">{{- $textContent -}}</pre>
+                  {{- $html := index $data "text/html" -}}
+                  {{- if $html -}}
+                    {{- $htmlText := delimit $html "" -}}
+                    <div>
+                      {{- $htmlText | safeHTML -}}
+                    </div>
+                  {{- end -}}
+                {{- end -}}
+              {{- end -}}
+            </div>
+          </div>
+        {{- end -}}
+      </div>
+    {{- else if eq (index $cell "cell_type") "markdown" -}}
+      {{- $source := index $cell "source" -}}
+      {{- $sourceContent := (cond (reflect.IsSlice $source) (delimit $source "") $source) -}}
+      {{- $sourceContent | $page.RenderString -}}
+    {{- end -}}
+  {{- end -}}
+{{- end -}}