chore: update doc

assets/css/compiled/main.css

@@ -2512,30 +2512,30 @@ nav .search-wrapper {
 .hamburger-menu svg.open > g:nth-of-type(2) path {
         transform: translate3d(0, -4px, 0);
       }
-.hextra-scrollbar {
+.hextra-scrollbar, .hextra-scrollbar * {
   scrollbar-width: thin; /* Firefox */
   scrollbar-color: oklch(55.55% 0 0 / 40%) transparent; /* Firefox */
 
   scrollbar-gutter: stable;
 }
-.hextra-scrollbar::-webkit-scrollbar {
+.hextra-scrollbar::-webkit-scrollbar, .hextra-scrollbar *::-webkit-scrollbar {
   height: 0.75rem;
   width: 0.75rem;
 }
-.hextra-scrollbar::-webkit-scrollbar-track {
+.hextra-scrollbar::-webkit-scrollbar-track, .hextra-scrollbar *::-webkit-scrollbar-track {
   background-color: transparent;
 }
-.hextra-scrollbar::-webkit-scrollbar-thumb {
+.hextra-scrollbar::-webkit-scrollbar-thumb, .hextra-scrollbar *::-webkit-scrollbar-thumb {
   border-radius: 10px;
 }
-.hextra-scrollbar:hover::-webkit-scrollbar-thumb {
+.hextra-scrollbar:hover::-webkit-scrollbar-thumb, .hextra-scrollbar *:hover::-webkit-scrollbar-thumb {
     border: 3px solid transparent;
     background-color: var(--tw-shadow-color);
     background-clip: content-box;
     --tw-shadow-color: rgb(115 115 115 / 0.2);
     --tw-shadow: var(--tw-shadow-colored);
   }
-.hextra-scrollbar:hover::-webkit-scrollbar-thumb:hover {
+.hextra-scrollbar:hover::-webkit-scrollbar-thumb:hover, .hextra-scrollbar *:hover::-webkit-scrollbar-thumb:hover {
   --tw-shadow-color: rgb(115 115 115 / 0.4);
   --tw-shadow: var(--tw-shadow-colored);
 }
@@ -2552,6 +2552,40 @@ nav .search-wrapper {
     --tw-bg-opacity: 0.8;
   }
 }
+.hextra-jupyter-code-cell {
+  scrollbar-gutter: auto;
+  margin-top: 1.5rem;
+}
+.hextra-jupyter-code-cell .hextra-jupyter-code-cell-source {
+  font-size: .875rem;
+}
+.hextra-jupyter-code-cell .hextra-jupyter-code-cell-source .chroma,
+    .hextra-jupyter-code-cell .hextra-jupyter-code-cell-source pre {
+  margin: 0px;
+}
+.hextra-jupyter-code-cell .hextra-jupyter-code-cell-outputs-container {
+  overflow: hidden;
+  border-bottom-right-radius: 0.75rem;
+  border-bottom-left-radius: 0.75rem;
+  border-width: 1px;
+  border-top-width: 0px;
+  font-size: .75rem;
+}
+:is(html[class~="dark"] .hextra-jupyter-code-cell .hextra-jupyter-code-cell-outputs-container) {
+  --tw-border-opacity: 1;
+  border-color: rgb(38 38 38 / var(--tw-border-opacity));
+}
+.hextra-jupyter-code-cell .hextra-jupyter-code-cell-outputs-container .hextra-jupyter-code-cell-outputs {
+  max-height: 50vh;
+  overflow: auto;
+}
+.hextra-jupyter-code-cell .hextra-jupyter-code-cell-outputs-container .hextra-jupyter-code-cell-outputs pre {
+  padding: 1rem;
+}
+.hextra-jupyter-code-cell:has(.hextra-jupyter-code-cell-outputs) .hextra-jupyter-code-cell-source .chroma {
+  border-bottom-right-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
 html {
   font-size: 1rem;
   -webkit-font-smoothing: antialiased;

assets/css/components/jupyter.css

@@ -0,0 +1,29 @@
+.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;
+}

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 */
 

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;

exampleSite/content/docs/jupyter/index.md

@@ -0,0 +1,11 @@
+---
+title: Jupyter Notebook
+math: true
+---
+
+{{< callout type="info" >}}
+  Experimental page to include Jupyter Notebooks in the site.
+  [Example file](https://github.com/jupyterlite/jupyterlite/blob/main/examples/intro.ipynb)
+{{< /callout >}}
+
+{{< jupyter "Intro.ipynb" >}}

exampleSite/hugo_stats.json

@@ -216,6 +216,10 @@
       "hextra-filetree",
       "hextra-filetree-folder",
       "hextra-footer",
+      "hextra-jupyter-code-cell",
+      "hextra-jupyter-code-cell-outputs",
+      "hextra-jupyter-code-cell-outputs-container",
+      "hextra-jupyter-code-cell-source",
       "hextra-scrollbar",
       "hextra-sidebar-collapsible-button",
       "hextra-toc",

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,

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 -}}