feat: shortcode for Jupyter Notebook (#337 )

* feat: shortcode for Jupyter Notebook * chore: update generated CSS files * chore: add example Jupyter Notebook file * chore: update doc * chore: enhance jupyter notebook styling - use raw markdown for contents like code block and markdown text * feat: support load notebook from assets and remote - update docs accordingly - add example notebook file * chore: rename example file
optional Title in md Head (#442 )
2025-07-01 03:07:19 -04:00 · 2024-09-14 14:29:55 +01:00 · 2024-09-14 14:28:30 +01:00 · 2024-09-12 08:36:39 +01:00 · 2024-08-22 10:05:30 +01:00 · 2024-08-18 16:34:48 +01:00
27 changed files with 547 additions and 63 deletions
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.4.9 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.10 | MIT License | https://tailwindcss.com
 *//*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@ -2532,30 +2532,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);
 }
--- a/assets/css/components/jupyter.css
+++ b/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;
+}
--- 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 */

--- a/data/icons.yaml
+++ b/data/icons.yaml
@ -36,6 +36,8 @@ hugo-full: >
    <path fill="#fff" d="M1320.72 89.15c58.79 0 106.52 47.73 106.52 106.51 0 58.8-47.73 106.52-106.52 106.52-58.78 0-106.52-47.73-106.52-106.52 0-58.78 47.74-106.51 106.52-106.51zm0 39.57c36.95 0 66.94 30 66.94 66.94a66.97 66.97 0 0 1-66.94 66.94c-36.95 0-66.94-29.99-66.94-66.94a66.97 66.97 0 0 1 66.93-66.94h.01zm-283.8 65.31c0 47.18-8.94 60.93-26.81 80.58-17.87 19.65-41.57 27.57-71.1 27.57-27 0-48.75-9.58-67.61-26.23-20.88-18.45-36.08-47.04-36.08-78.95 0-31.37 11.72-58.48 32.49-78.67 18.22-17.67 45.34-29.18 73.3-29.18 33.77 0 68.83 15.98 90.44 47.53l-31.73 26.82c-13.45-25.03-32.94-33.46-60.82-34.26-30.83-.88-64.77 28.53-62.25 67.75 1.4 21.94 11.65 59.65 60.96 66.57 25.9 3.63 55.36-24.02 55.36-39.04H944.4v-37.5h92.5V194l.02.03zm-562.6-94.65h42.29v112.17c0 17.8.49 29.33 1.47 34.61 1.69 8.48 4.81 14.37 11.17 19.5 6.37 5.13 13.8 6.59 24.84 6.59 11.2 0 14.96-1.74 20.66-6.6 5.69-4.85 9.12-9.46 10.28-16.53 1.15-7.07 3.07-18.8 3.07-35.18V99.38h42.28v108.78c0 24.86-1.07 42.43-3.21 52.69-2.14 10.27-6.08 18.93-11.82 26-5.74 7.06-13.42 12.69-23.03 16.88-9.62 4.19-22.16 6.28-37.65 6.28-18.7 0-32.87-2.28-42.52-6.85-9.66-4.57-17.3-10.5-22.9-17.8-5.61-7.3-9.3-14.95-11.08-22.96-2.58-11.86-3.88-29.38-3.88-52.55V99.38h.03zM93.91 299.92V92.7h43.35v75.48h71.92V92.7h43.48v207.22h-43.48v-90.61h-71.92v90.61z"/>
  </svg>

+jupyter: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M7.157 22.201A1.784 1.799 0 0 1 5.374 24a1.784 1.799 0 0 1-1.784-1.799a1.784 1.799 0 0 1 1.784-1.799a1.784 1.799 0 0 1 1.783 1.799M20.582 1.427a1.415 1.427 0 0 1-1.415 1.428a1.415 1.427 0 0 1-1.416-1.428A1.415 1.427 0 0 1 19.167 0a1.415 1.427 0 0 1 1.415 1.427M4.992 3.336A1.047 1.056 0 0 1 3.946 4.39a1.047 1.056 0 0 1-1.047-1.055A1.047 1.056 0 0 1 3.946 2.28a1.047 1.056 0 0 1 1.046 1.056m7.336 1.517c3.769 0 7.06 1.38 8.768 3.424a9.36 9.36 0 0 0-3.393-4.547a9.24 9.24 0 0 0-5.377-1.728A9.24 9.24 0 0 0 6.95 3.73a9.36 9.36 0 0 0-3.394 4.547c1.713-2.04 5.004-3.424 8.772-3.424m.001 13.295c-3.768 0-7.06-1.381-8.768-3.425a9.36 9.36 0 0 0 3.394 4.547A9.24 9.24 0 0 0 12.33 21a9.24 9.24 0 0 0 5.377-1.729a9.36 9.36 0 0 0 3.393-4.547c-1.712 2.044-5.003 3.425-8.772 3.425Z" /></svg>
+
 warning: <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"></path></svg>
 one: <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="-1 0 19 19"><path d="M16.417 9.6A7.917 7.917 0 1 1 8.5 1.683 7.917 7.917 0 0 1 16.417 9.6zM9.666 6.508H8.248L6.09 8.09l.806 1.103 1.222-.945v4.816h1.547z"></path></svg>
 cards: <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 6.878V6a2.25 2.25 0 0 1 2.25-2.25h7.5A2.25 2.25 0 0 1 18 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 0 0 4.5 9v.878m13.5-3A2.25 2.25 0 0 1 19.5 9v.878m0 0a2.246 2.246 0 0 0-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0 1 21 12v6a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6c0-.98.626-1.813 1.5-2.122"></path></svg>
--- a/exampleSite/assets/example.ipynb
+++ b/exampleSite/assets/example.ipynb
--- a/exampleSite/content/docs/guide/deploy-site.md
+++ b/exampleSite/content/docs/guide/deploy-site.md
@ -54,7 +54,7 @@ jobs:
  build:
    runs-on: ubuntu-latest
    env:
-      HUGO_VERSION: 0.121.2
+      HUGO_VERSION: 0.131.0
    steps:
      - name: Checkout
        uses: actions/checkout@v4
@ -64,7 +64,7 @@ jobs:
      - name: Setup Go
        uses: actions/setup-go@v5
        with:
-          go-version: '1.21'
+          go-version: '1.22'
      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v4
@ -146,7 +146,7 @@ For more details, check out:
 3. If you are not using [hextra-starter-template][hextra-starter-template], configure the following manually:
   - Configure the Build command to `hugo --gc --minify`
   - Specify the Publish directory to `public`
-   - Add Environment variable `HUGO_VERSION` and set to `0.119.0`
+   - Add Environment variable `HUGO_VERSION` and set to `0.132.2`
 4. Deploy!

 Check [Hugo on Netlify](https://docs.netlify.com/integrations/frameworks/hugo/) for more details.
--- a/exampleSite/content/docs/guide/markdown.fa.md
+++ b/exampleSite/content/docs/guide/markdown.fa.md
@ -117,18 +117,18 @@ Hugo از سینتکس [مارک‌داون](https://en.wikipedia.org/wiki/Markd

 ### عکس‌ها

-![landscape](https://source.unsplash.com/featured/800x600?landscape)
+![landscape](https://picsum.photos/800/600)

 ```markdown {filename=Markdown}
-![landscape](https://source.unsplash.com/featured/800x600?landscape)
+![landscape](https://picsum.photos/800/600)
 ```

 با توضیحات:

-![landscape](https://source.unsplash.com/featured/800x600?landscape "یک چشم‌انداز Unsplash")
+![landscape](https://picsum.photos/800/600 "یک چشم‌انداز Unsplash")

 ```markdown {filename=Markdown}
-![landscape](https://source.unsplash.com/featured/800x600?landscape "یک چشم‌انداز Unsplash")
+![landscape](https://picsum.photos/800/600 "یک چشم‌انداز Unsplash")
 ```

 ## پیکربندی
--- a/exampleSite/content/docs/guide/markdown.md
+++ b/exampleSite/content/docs/guide/markdown.md
@ -117,18 +117,18 @@ Tables aren't part of the core Markdown spec, but Hugo supports them out-of-the-

 ### Images

-![landscape](https://source.unsplash.com/featured/800x600?landscape)
+![landscape](https://picsum.photos/800/600)

 ```markdown {filename=Markdown}
-![landscape](https://source.unsplash.com/featured/800x600?landscape)
+![landscape](https://picsum.photos/800/600)
 ```

 With caption:

-![landscape](https://source.unsplash.com/featured/800x600?landscape "Unsplash Landscape")
+![landscape](https://picsum.photos/800/600 "Unsplash Landscape")

 ```markdown {filename=Markdown}
-![landscape](https://source.unsplash.com/featured/800x600?landscape "Unsplash Landscape")
+![landscape](https://picsum.photos/800/600 "Unsplash Landscape")
 ```

 ## Configuration
--- a/exampleSite/content/docs/guide/markdown.zh-cn.md
+++ b/exampleSite/content/docs/guide/markdown.zh-cn.md
@ -117,18 +117,18 @@ Hugo 支持 [Markdown](https://en.wikipedia.org/wiki/Markdown) 来书写内容

 ### 图片

-![landscape](https://source.unsplash.com/featured/800x600?landscape)
+![landscape](https://picsum.photos/800/600)

 ```markdown {filename=Markdown}
-![landscape](https://source.unsplash.com/featured/800x600?landscape)
+![landscape](https://picsum.photos/800/600)
 ```

 带有标题：

-![landscape](https://source.unsplash.com/featured/800x600?landscape "Unsplash Landscape")
+![landscape](https://picsum.photos/800/600 "Unsplash Landscape")

 ```markdown {filename=Markdown}
-![landscape](https://source.unsplash.com/featured/800x600?landscape "Unsplash Landscape")
+![landscape](https://picsum.photos/800/600 "Unsplash Landscape")
 ```

 ## 配置
--- a/exampleSite/content/docs/guide/shortcodes/_index.md
+++ b/exampleSite/content/docs/guide/shortcodes/_index.md
@ -9,7 +9,6 @@ next: /docs/guide/shortcodes/callout

 Hextra provides a collection of beautiful shortcodes to enhance your content.

-
 {{< cards >}}
  {{< card link="callout" title="Callout" icon="warning" >}}
  {{< card link="cards" title="Cards" icon="card" >}}
@ -19,3 +18,12 @@ Hextra provides a collection of beautiful shortcodes to enhance your content.
  {{< card link="steps" title="Steps" icon="one" >}}
  {{< card link="tabs" title="Tabs" icon="collection" >}}
 {{< /cards >}}
+
+<div style="padding-top:4rem"></div>
+
+Additional shortcodes provided by Hugo and Hextra:
+
+{{< cards >}}
+  {{< card link="jupyter" title="Jupyter Notebook" icon="jupyter" tag="alpha" >}}
+  {{< card link="others" title="Others" icon="view-grid" >}}
+{{< /cards >}}
--- a/exampleSite/content/docs/guide/shortcodes/jupyter.md
+++ b/exampleSite/content/docs/guide/shortcodes/jupyter.md
@ -0,0 +1,79 @@
+---
+title: "Jupyter Notebook Component"
+linktitle: "Jupyter Notebook"
+math: true
+sidebar:
+  exclude: true
+---
+
+{{< callout >}}Experimental feature to include Jupyter Notebooks via a shortcode. Note that not all cell types are supported.{{< /callout >}}
+
+[Jupyter Notebook](https://jupyter.org/) is a language-agnostic HTML notebook application for [Project Jupyter](https://jupyter.org/). It allows you to create and share documents that contain live code, equations, visualizations, and narrative text.
+
+<!--more-->
+
+## How to use
+
+### Using a local notebook
+
+To use the Jupyter Notebook shortcode, you need to have a Jupyter Notebook file in your project. Similar to how you would [add images](../../organize-files#add-images) to the project, you can add Jupyter Notebooks to the `assets` folder.
+
+{{< filetree/container >}}
+  {{< filetree/folder name="assets" >}}
+    {{< filetree/file name="notebook.ipynb" >}}
+  {{< /filetree/folder >}}
+  {{< filetree/folder name="content" >}}
+    {{< filetree/folder name="docs" >}}
+        {{< filetree/file name="my-page.md" >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+{{< /filetree/container >}}
+
+Include the Jupyter Notebook in the page using the `jupyter` shortcode:
+
+```markdown {filename="content/docs/my-page.md"}
+---
+title: My Page
+math: true
+---
+
+{{%/* jupyter "notebook.ipynb" */%}}
+```
+
+Alternatively, you can utilize the [page bundles][page-bundles] feature of Hugo to organize the Jupyter Notebooks together with the Markdown file.
+
+{{< filetree/container >}}
+  {{< filetree/folder name="content" >}}
+    {{< filetree/folder name="docs" >}}
+        {{< filetree/folder name="my-page" >}}
+            {{< filetree/file name="index.md" >}}
+            {{< filetree/file name="notebook.ipynb" >}}
+        {{< /filetree/folder >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+{{< /filetree/container >}}
+
+```markdown {filename="content/docs/my-page/index.md"}
+---
+title: My Page
+math: true
+---
+
+{{%/* jupyter "notebook.ipynb" */%}}
+```
+
+### Using a remote notebook
+
+You can also use a remote notebook by providing the URL to the notebook file. For example, to include [What is the Jupyter Notebook](https://github.com/jupyter/notebook/blob/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb) notebook in the page, you can use the following shortcode:
+
+```
+{{%/* jupyter "https://raw.githubusercontent.com/jupyter/notebook/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb" */%}}
+```
+
+## Example Notebook
+
+{{< callout type="info" >}}The following is an example of a notebook file that is included in the project assets folder.{{< /callout >}}
+
+{{% jupyter "example.ipynb" %}}
+
+[page-bundles]: https://gohugo.io/content-management/page-bundles/#leaf-bundles
--- a/exampleSite/content/docs/guide/shortcodes/others.md
+++ b/exampleSite/content/docs/guide/shortcodes/others.md
@ -0,0 +1,43 @@
+---
+title: Other Shortcodes
+linkTitle: Others
+sidebar:
+  exclude: true
+---
+
+{{< callout emoji="ℹ️" >}}
+  Some of these are Hugo built-in shortcodes.
+  These shortcodes are considered less stable and may be changed anytime.
+{{< /callout >}}
+
+## YouTube
+
+Embed a YouTube video.
+
+```
+{{</* youtube VIDEO_ID */>}}
+```
+
+Result:
+
+{{< youtube id=dQw4w9WgXcQ loading=lazy >}}
+
+For more information, see [Hugo's YouTube Shortcode](https://gohugo.io/content-management/shortcodes/#youtube).
+
+## PDF
+
+With PDF shortcode, you can embed a PDF file in your content.
+
+```
+{{</* pdf "https://example.com/sample.pdf" */>}}
+```
+
+You can also place the PDF file in your project directory and use the relative path.
+
+```
+{{</* pdf "path/to/file.pdf" */>}}
+```
+
+Example:
+
+{{< pdf "https://upload.wikimedia.org/wikipedia/commons/1/13/Example.pdf" >}}
--- a/exampleSite/content/docs/guide/shortcodes/steps.md
+++ b/exampleSite/content/docs/guide/shortcodes/steps.md
@ -25,6 +25,11 @@ This is the third step.

 ## Usage

+{{< callout emoji="ℹ️" >}}
+  Please note that this shortcode is intended **only for Markdown content**.
+  If you put HTML content or other shortcodes as step content, it may not render as expected.
+{{< /callout >}}
+
 Put Markdown h3 header within `steps` shortcode.

 ```
--- a/exampleSite/hugo_stats.json
+++ b/exampleSite/hugo_stats.json
@ -27,6 +27,7 @@
      "head",
      "hr",
      "html",
+      "iframe",
      "img",
      "input",
      "kbd",
@ -190,6 +191,7 @@
      "data-[state=selected]:hx-block",
      "data-[state=selected]:hx-border-primary-500",
      "data-[state=selected]:hx-text-primary-600",
+      "dataframe",
      "filename",
      "first:hx-mt-0",
      "focus:hx-bg-white",
@ -221,6 +223,10 @@
      "hextra-filetree",
      "hextra-filetree-folder",
      "hextra-footer",
+      "hextra-jupyter-code-cell",
+      "hextra-jupyter-code-cell-outputs",
+      "hextra-jupyter-code-cell-outputs-container",
+      "hextra-pdf",
      "hextra-scrollbar",
      "hextra-sidebar-collapsible-button",
      "hextra-tabs-panel",
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@ -5,7 +5,7 @@
    <article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
      <main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">
        <div class="content">
-          <h1>{{ .Title }}</h1>
+          {{ if .Title }}<h1>{{ .Title }}</h1>{{ end }}
          {{ .Content }}
        </div>
        <div class="hx-mt-16"></div>
@ -14,4 +14,4 @@
      </main>
    </article>
  </div>
-{{ end }}
+{{ end }}
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@ -5,7 +5,7 @@
    <article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
      <main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">
        <br class="hx-mt-1.5 hx-text-sm" />
-        <h1 class="hx-text-center hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100">{{ .Title }}</h1>
+        {{ if .Title }}<h1 class="hx-text-center hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100">{{ .Title }}</h1>{{ end }}
        <div class="hx-mb-16"></div>
        <div class="content">
          {{ .Content }}
@ -15,4 +15,4 @@
      </main>
    </article>
  </div>
-{{ end }}
+{{ end }}
--- a/layouts/_default/wide.html
+++ b/layouts/_default/wide.html
@ -3,10 +3,10 @@
    {{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" false) }}
    <article class="hx-w-full hx-break-words hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-pt-4 hx-pb-8 hx-pl-[max(env(safe-area-inset-left),1.5rem)] hx-pr-[max(env(safe-area-inset-left),1.5rem)]">
      <br class="hx-mt-1.5 hx-text-sm" />
-      <h1 class="hx-text-center hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100">{{ .Title }}</h1>
+      {{ if .Title }}<h1 class="hx-text-center hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100">{{ .Title }}</h1>{{ end }}
      <div class="content">
        {{ .Content }}
      </div>
    </article>
  </div>
-{{ end }}
+{{ end }}
--- a/layouts/blog/list.html
+++ b/layouts/blog/list.html
@ -5,7 +5,7 @@
    <article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
      <main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">
        <br class="hx-mt-1.5 hx-text-sm" />
-        <h1 class="hx-text-center hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100">{{ .Title }}</h1>
+        {{ if .Title }}<h1 class="hx-text-center hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100">{{ .Title }}</h1>{{ end }}
        <div class="content">{{ .Content }}</div>
        {{- $pages := partial "utils/sort-pages" (dict "page" . "by" site.Params.blog.list.sortBy "order" site.Params.blog.list.sortOrder) -}}
        {{- range $pages }}
@ -31,4 +31,4 @@
    </article>
    <div class="max-xl:hx-hidden hx-h-0 hx-w-64 hx-shrink-0"></div>
  </div>
-{{- end -}}
+{{- end -}}
--- a/layouts/blog/single.html
+++ b/layouts/blog/single.html
@ -5,7 +5,7 @@
    <article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
      <main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">
        {{ partial "breadcrumb.html" . }}
-        <h1 class="hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100">{{ .Title }}</h1>
+        {{ if .Title }}<h1 class="hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100">{{ .Title }}</h1>{{ end }}
        <div class="hx-mt-4 hx-mb-16 hx-text-gray-500 hx-text-sm hx-flex hx-items-center hx-flex-wrap hx-gap-y-2">
          {{- with $date := .Date }}<span class="hx-mr-1">{{ partial "utils/format-date" $date }}</span>{{ end -}}
          {{- $lazyLoading := site.Params.enableImageLazyLoading | default true -}}
@ -45,4 +45,4 @@
      </main>
    </article>
  </div>
-{{ end }}
+{{ end }}
--- a/layouts/docs/list.html
+++ b/layouts/docs/list.html
@ -6,7 +6,7 @@
      <main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">
        {{ partial "breadcrumb.html" . }}
        <div class="content">
-          <h1>{{ .Title }}</h1>
+          {{ if .Title }}<h1>{{ .Title }}</h1>{{ end }}
          {{ .Content }}
        </div>
        {{ partial "components/last-updated.html" . }}
@ -15,4 +15,4 @@
      </main>
    </article>
  </div>
-{{ end }}
+{{ end }}
--- a/layouts/docs/single.html
+++ b/layouts/docs/single.html
@ -6,7 +6,7 @@
      <main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">
        {{ partial "breadcrumb.html" . }}
        <div class="content">
-          <h1>{{ .Title }}</h1>
+          {{ if .Title }}<h1>{{ .Title }}</h1>{{ end }}
          {{ .Content }}
        </div>
        {{ partial "components/last-updated.html" . }}
@ -15,4 +15,4 @@
      </main>
    </article>
  </div>
-{{ end }}
+{{ end }}
--- a/layouts/index.html
+++ b/layouts/index.html
@ -4,11 +4,11 @@
    {{ partial "toc.html" . }}
    <article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
      <main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">
-        <h1 class="hx-text-center hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100">{{ .Title }}</h1>
+        {{ if .Title }}<h1 class="hx-text-center hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100">{{ .Title }}</h1>{{ end }}
        <div class="content">
          {{ .Content }}
        </div>
      </main>
    </article>
  </div>
-{{ end }}
+{{ end }}
--- 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,
--- a/layouts/shortcodes/jupyter.html
+++ b/layouts/shortcodes/jupyter.html
@ -0,0 +1,81 @@
+{{/* Render Jupyter Notebook */}}
+{{- $path := .Get 0 -}}
+{{- $data := "" -}}
+{{- $page := .Page -}}
+
+{{- $isLocal := not (urls.Parse $path).Scheme -}}
+{{- $isPage := and (eq .Page.Kind "page") (not .Page.BundleType) -}}
+
+{{/* https://gohugo.io/functions/transform/unmarshal/ */}}
+{{- if (not $isLocal) -}}
+  {{- with resources.GetRemote $path -}}
+    {{- with unmarshal .Content -}}{{- $data = . -}}{{- end -}}
+  {{- else -}}
+    {{- errorf "Remote resource not found: %s" $path -}}
+  {{- end -}}
+{{- else if (not $isPage) -}}
+  {{- with .Page.Resources.Get $path -}}
+    {{- with unmarshal .Content -}}{{- $data = . -}}{{- end -}}
+  {{- else -}}
+    {{- errorf "Local resource not found: %s" $path -}}
+  {{- end -}}
+{{- else -}}
+  {{- with resources.Get $path -}}
+    {{- with unmarshal .Content -}}{{- $data = . -}}{{- end -}}
+  {{- else -}}
+    {{- errorf "Local resource not found: %s" $path -}}
+  {{- end -}}
+{{- 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) -}}
+{{- with ($sourceContent | strings.Chomp) -}}
+{{ (printf "\n\n```%s\n%s\n```\n" $language .) | safeHTML -}}
+{{- end -}}
+
+      <div class="hextra-jupyter-code-cell hextra-scrollbar">
+        {{- $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 hx-text-sm">{{- $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 hx-text-sm">{{- $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) }}
+{{ (printf "\n%s\n" $sourceContent) | safeHTML }}
+    {{- end -}}
+  {{- end -}}
+{{- end -}}
--- a/layouts/shortcodes/tab.html
+++ b/layouts/shortcodes/tab.html
@ -4,8 +4,9 @@
  class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
  id="tabs-panel-{{ .Ordinal }}"
  role="tabpanel"
-  {{ if eq .Ordinal $defaultIndex }}tabindex="0"{{ end }}
-  {{ if eq .Ordinal $defaultIndex }}data-state="selected"{{ end }}
+  {{- if eq .Ordinal $defaultIndex }} tabindex="0" {{ end -}}
+  {{- if eq .Ordinal $defaultIndex }} data-state="selected" {{ end -}}
 >
-  {{ .InnerDeindent | markdownify }}
+  {{- .InnerDeindent | markdownify -}}
 </div>
+{{- /* Drop trailing newlines */ -}}
--- a/layouts/shortcodes/tabs.html
+++ b/layouts/shortcodes/tabs.html
@ -13,9 +13,9 @@
        role="tab"
        type="button"
        aria-controls="tabs-panel-{{ $i }}"
-        {{ if eq $i $defaultIndex }}aria-selected="true"{{ end }}
-        {{ if eq $i $defaultIndex }}tabindex="0"{{ end }}
-        {{ if eq $i $defaultIndex }}data-state="selected"{{ end }}
+        {{- if eq $i $defaultIndex }} aria-selected="true" {{ end -}}
+        {{- if eq $i $defaultIndex }} tabindex="0" {{ end -}}
+        {{- if eq $i $defaultIndex }} data-state="selected"{{ end -}}
      >
        {{- $item -}}
      </button>
@ -23,5 +23,6 @@
  </div>
 </div>
 <div>
-  {{ .Inner }}
+  {{- .Inner -}}
 </div>
+{{- /* Drop trailing newlines */ -}}
--- a/package-lock.json
+++ b/package-lock.json
@ -582,9 +582,9 @@
      "license": "MIT"
    },
    "node_modules/electron-to-chromium": {
-      "version": "1.5.6",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.6.tgz",
-      "integrity": "sha512-jwXWsM5RPf6j9dPYzaorcBSUg6AiqocPEyMpkchkvntaH9HGfOOMZwxMJjDY/XEs3T5dM7uyH1VhRMkqUU9qVw==",
+      "version": "1.5.11",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.11.tgz",
+      "integrity": "sha512-R1CccCDYqndR25CaXFd6hp/u9RaaMcftMkphmvuepXr5b1vfLkRml6aWVeBhXJ7rbevHkKEMJtz8XqPf7ffmew==",
      "dev": true,
      "license": "ISC"
    },
@ -815,9 +815,9 @@
      }
    },
    "node_modules/ignore": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
-      "integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==",
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
      "dev": true,
      "license": "MIT",
      "engines": {
@ -980,11 +980,10 @@
      }
    },
    "node_modules/micromatch": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
-      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
      "dev": true,
-      "license": "MIT",
      "dependencies": {
        "braces": "^3.0.3",
        "picomatch": "^2.3.1"
@ -1376,9 +1375,9 @@
      }
    },
    "node_modules/postcss-selector-parser": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.1.tgz",
-      "integrity": "sha512-b4dlw/9V8A71rLIDsSwVmak9z2DuBUB7CA1/wSdelNEzqsjoSPeADTWNO09lpH49Diy3/JIZ2bSPB1dI3LJCHg==",
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
@ -1745,9 +1744,9 @@
      }
    },
    "node_modules/tailwindcss": {
-      "version": "3.4.9",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.9.tgz",
-      "integrity": "sha512-1SEOvRr6sSdV5IDf9iC+NU4dhwdqzF4zKKq3sAbasUWHEM6lsMhX+eNN5gkPx1BvLFEnZQEUFbXnGj8Qlp83Pg==",
+      "version": "3.4.10",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.10.tgz",
+      "integrity": "sha512-KWZkVPm7yJRhdu4SRSl9d4AK2wM3a50UsvgHZO7xY77NQr2V+fIrEuoDGQcbvswWvFGbS2f6e+jC/6WJm1Dl0w==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
Author	SHA1	Message	Date
Xin	2af73b3d7e	feat: shortcode for Jupyter Notebook (#337 ) Some checks are pending Deploy Hugo site to Pages / build (push) Waiting to run Details Deploy Hugo site to Pages / deploy (push) Blocked by required conditions Details * feat: shortcode for Jupyter Notebook * chore: update generated CSS files * chore: add example Jupyter Notebook file * chore: update doc * chore: enhance jupyter notebook styling - use raw markdown for contents like code block and markdown text * feat: support load notebook from assets and remote - update docs accordingly - add example notebook file * chore: rename example file	2024-09-14 14:29:55 +01:00
Filefabrik	d1c3c40a95	optional Title in md Head (#442 ) Co-authored-by: RT Filefabrik <rt@filefabriik.com>	2024-09-14 14:28:30 +01:00
dependabot[bot]	086af4d173	chore(deps): bump micromatch from 4.0.7 to 4.0.8 (#453 ) Some checks failed Deploy Hugo site to Pages / build (push) Has been cancelled Details Deploy Hugo site to Pages / deploy (push) Has been cancelled Details	2024-09-12 08:36:39 +01:00
August	c6de4b5b6b	docs: update image examples with Lorem Picsum (#445 ) Some checks failed Deploy Hugo site to Pages / build (push) Has been cancelled Details Deploy Hugo site to Pages / deploy (push) Has been cancelled Details	2024-08-22 10:05:30 +01:00
Xin	66d2bf57ba	docs: additional shortcodes (#441 ) Some checks failed Deploy Hugo site to Pages / build (push) Has been cancelled Details Deploy Hugo site to Pages / deploy (push) Has been cancelled Details * Create pdf.md * Update pdf.md * Escape PDF shortcode examples * Remove markdown syntax highlight * chore: update Hugo and Go versions for deployment * docs: add additional shortcodes * chore: re-compile --------- Co-authored-by: Shahar Naveh <50263213+ShaharNaveh@users.noreply.github.com>	2024-08-18 16:34:48 +01:00
Xin	526be88d7b	fix: tabs styling in steps shortcode (#440 ) * fix: tabs styling in steps shortcode * docs: add notes for intended usage	2024-08-18 15:38:06 +01:00