Genius/hextra
1
0
Fork 0
forked from drowl87/hextra_mirror
Code Pull Requests Activity

feat: shortcode for Jupyter Notebook (#337)

Browse Source 
* 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
This commit is contained in:
Xin 2024-09-14 14:29:55 +01:00 committed by GitHub
parent d1c3c40a95
commit 2af73b3d7e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 433 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
assets/css/compiled/main.css
View File

@ -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);
}

29
assets/css/components/jupyter.css Normal file
View File

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

2
assets/css/components/scrollbar.css
View File

@ -1,4 +1,4 @@
.hextra-scrollbar {
.hextra-scrollbar, .hextra-scrollbar * {
scrollbar-width: thin; /* Firefox */
scrollbar-color: oklch(55.55% 0 0 / 40%) transparent; /* Firefox */

2
data/icons.yaml
View File

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

224
exampleSite/assets/example.ipynb Normal file
View File

File diff suppressed because one or more lines are too long

1
exampleSite/content/docs/guide/shortcodes/_index.md
View File

@ -24,5 +24,6 @@ Hextra provides a collection of beautiful shortcodes to enhance your content.
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 >}}

79
exampleSite/content/docs/guide/shortcodes/jupyter.md Normal file
View File

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

4
exampleSite/hugo_stats.json
View File

@ -191,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",
@ -222,6 +223,9 @@
"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",

6
layouts/partials/scripts.html
View File

@ -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,

81
layouts/shortcodes/jupyter.html Normal file
View File

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