chore: rename example file

- update docs accordingly
- add example notebook file

assets/css/compiled/main.css

@@ -1176,9 +1176,6 @@ video {
 .hx-text-4xl {
   font-size: 2.25rem;
 }
-.hx-text-\[\.65rem\] {
-  font-size: .65rem;
-}
 .hx-text-\[10px\] {
   font-size: 10px;
 }
@@ -2272,6 +2269,7 @@ article details > summary::before {
   top: 5px;
   right: 5px;
   z-index: 10;
+  font-size: .65rem;
 }
 .steps h3 {
   counter-increment: step;
@@ -2579,27 +2577,6 @@ nav .search-wrapper {
     grid-template-columns: repeat(var(--hextra-feature-grid-cols), minmax(0, 1fr))
 }
   }
-.hextra-jupyter-code-cell {
-  scrollbar-gutter: auto;
-  margin-top: 1.5rem;
-}
-.hextra-jupyter-code-cell .hextra-jupyter-code-cell-outputs-container {
-  overflow: hidden;
-  font-size: .75rem;
-}
-.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 {
-  max-width: 100%;
-  overflow: auto;
-  font-size: .75rem;
-}
-.hextra-badge {
-  display: inline-flex;
-  align-items: center;
-}
 html {
   font-size: 1rem;
   -webkit-font-smoothing: antialiased;

assets/css/components/badge.css

@@ -1,3 +0,0 @@
-.hextra-badge {
-  @apply hx-inline-flex hx-items-center;
-}

assets/css/components/cards.css

@@ -38,4 +38,5 @@
   top: 5px;
   right: 5px;
   z-index: 10;
+  font-size: .65rem;
 }

assets/css/components/jupyter.css

@@ -3,15 +3,27 @@
 
   @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;
+    @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-text-xs hx-overflow-auto hx-max-w-full;
+        @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/styles.css

@@ -10,8 +10,6 @@
 @import "components/scrollbar.css";
 @import "components/code-copy.css";
 @import "components/hextra/feature-grid.css";
-@import "components/jupyter.css";
-@import "components/badge.css";
 
 html {
   @apply hx-text-base hx-antialiased;

exampleSite/content/docs/guide/configuration.md

@@ -186,10 +186,10 @@ To customize the [favicon](https://en.wikipedia.org/wiki/Favicon) for your site,
   {{< /filetree/folder >}}
 {{< /filetree/container >}}
 
-Include `favicon.ico`, `favicon.svg` and `favicon-dark.svg` files in your project to ensure your site's favicons display correctly.
+Include both `favicon.ico` and `favicon.svg` files in your project to ensure your site's favicons display correctly.
 
-While `favicon.ico` is generally for older browsers, `favicon.svg` and `favicon-dark.svg` are supported by modern browsers.
-Use tools like [favicon.io](https://favicon.io/) or [favycon](https://github.com/ruisaraiva19/favycon) to generate such icons.
+While `favicon.ico` is generally for older browsers, `favicon.svg` is supported by modern ones. The optional `favicon-dark.svg` can be included for a tailored experience in dark mode.
+Feel free to use tools like [favicon.io](https://favicon.io/) or [favycon](https://github.com/ruisaraiva19/favycon) to generate these icons.
 
 ### Theme Configuration
 

exampleSite/content/docs/guide/shortcodes/cards.md

@@ -22,7 +22,7 @@ linkTitle: Cards
 ```
 {{</* cards */>}}
   {{</* card link="../callout" title="Callout" icon="warning" */>}}
-  {{</* card link="../callout" title="Card with tag" icon="tag" tag= "A custom tag" */>}}
+  {{</* card link="../callout" title="Card with tag" icon="warning" tag= "A custom tag" */>}}
   {{</* card link="/" title="No Icon" */>}}
 {{</* /cards */>}}
 ```

exampleSite/content/docs/guide/shortcodes/others.md

@@ -10,41 +10,6 @@ sidebar:
   These shortcodes are considered less stable and may be changed anytime.
 {{< /callout >}}
 
-## Badge
-
-```
-{{</* badge "Badge" */>}}
-```
-
-Result:
-
-{{< badge "Badge" >}}
-
-Variants:
-
-```
-{{</* badge content="info" type="info" */>}}
-{{</* badge content="warning" type="warning" */>}}
-{{</* badge content="error" type="error" */>}}
-```
-
-Result:
-
-{{< badge content="info" type="info" >}} &nbsp;
-{{< badge content="warning" type="warning" >}} &nbsp;
-{{< badge content="error" type="error" >}}
-
-With link:
-
-```
-{{</* badge content="Releases" link="https://github.com/imfing/hextra/releases" */>}}
-```
-
-Result:
-
-{{< badge content="Releases" link="https://github.com/imfing/hextra/releases" >}}
-
-
 ## YouTube
 
 Embed a YouTube video.

exampleSite/hugo_stats.json

@@ -209,7 +209,6 @@
       "group-hover:hx-underline",
       "group-open:before:hx-rotate-90",
       "hamburger-menu",
-      "hextra-badge",
       "hextra-card",
       "hextra-card-icon",
       "hextra-card-image",
@@ -465,7 +464,6 @@
       "hx-sticky",
       "hx-text-2xl",
       "hx-text-4xl",
-      "hx-text-[.65rem]",
       "hx-text-[10px]",
       "hx-text-[color:hsl(var(--primary-hue),100%,50%)]",
       "hx-text-base",
@@ -490,6 +488,7 @@
       "hx-text-white",
       "hx-text-xl",
       "hx-text-xs",
+      "hx-text-xxs",
       "hx-text-yellow-900",
       "hx-to-gray-600",
       "hx-top-0",

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">
-          {{ if .Title }}<h1>{{ .Title }}</h1>{{ end }}
+          <h1>{{ .Title }}</h1>
           {{ .Content }}
         </div>
         <div class="hx-mt-16"></div>
@@ -14,4 +14,4 @@
       </main>
     </article>
   </div>
-{{ end }}
+{{ end }}

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" />
-        {{ 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 }}
+        <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>
         <div class="hx-mb-16"></div>
         <div class="content">
           {{ .Content }}
@@ -15,4 +15,4 @@
       </main>
     </article>
   </div>
-{{ end }}
+{{ end }}

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" />
-      {{ 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 }}
+      <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>
       <div class="content">
         {{ .Content }}
       </div>
     </article>
   </div>
-{{ end }}
+{{ end }}

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" />
-        {{ 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 }}
+        <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>
         <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 -}}

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" . }}
-        {{ 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 }}
+        <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>
         <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 }}

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">
-          {{ if .Title }}<h1>{{ .Title }}</h1>{{ end }}
+          <h1>{{ .Title }}</h1>
           {{ .Content }}
         </div>
         {{ partial "components/last-updated.html" . }}
@@ -15,4 +15,4 @@
       </main>
     </article>
   </div>
-{{ end }}
+{{ end }}

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">
-          {{ if .Title }}<h1>{{ .Title }}</h1>{{ end }}
+          <h1>{{ .Title }}</h1>
           {{ .Content }}
         </div>
         {{ partial "components/last-updated.html" . }}
@@ -15,4 +15,4 @@
       </main>
     </article>
   </div>
-{{ end }}
+{{ end }}

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">
-        {{ 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 }}
+        <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>
         <div class="content">
           {{ .Content }}
         </div>
       </main>
     </article>
   </div>
-{{ end }}
+{{ end }}

layouts/partials/head-css.html

@@ -1,6 +1,6 @@
 {{- if and (not hugo.IsProduction) (eq hugo.Environment "theme") }}
   {{- $styles := resources.Get "css/styles.css" }}
-  {{- $styles = $styles | postCSS (dict "inlineImports" true) }}
+  {{- $styles = $styles | resources.PostCSS (dict "inlineImports" true) }}
   <link href="{{ $styles.RelPermalink }}" rel="stylesheet" />
 {{- else }}
   {{- $styles := resources.Get "css/compiled/main.css" -}}

layouts/partials/shortcodes/badge.html

@@ -1,16 +0,0 @@
-{{- $content := .content -}}
-{{- $type := .type -}}
-{{- $class := .class | default "" -}}
-{{- $border := .border | default false -}}
-
-{{- $defaultClass := "hx-text-gray-600 hx-bg-gray-100 dark:hx-bg-neutral-800 dark:hx-text-neutral-200 hx-border-gray-200 dark:hx-border-neutral-700" -}}
-{{- $warningClass := "hx-border-yellow-100 hx-bg-yellow-50 hx-text-yellow-900 dark:hx-border-yellow-200/30 dark:hx-bg-yellow-700/30 dark:hx-text-yellow-200" -}}
-{{- $infoClass := "hx-border-blue-200 hx-bg-blue-100 hx-text-blue-900 dark:hx-border-blue-200/30 dark:hx-bg-blue-900/30 dark:hx-text-blue-200" -}}
-{{- $errorClass := "hx-border-red-200 hx-bg-red-100 hx-text-red-900 dark:hx-border-red-200/30 dark:hx-bg-red-900/30 dark:hx-text-red-200" -}}
-
-{{- $borderClass := cond (eq $border true) "hx-border" "" -}}
-{{- $badgeClass := cond (eq $type "info") $infoClass (cond (eq $type "warning") $warningClass (cond (eq $type "error") $errorClass $defaultClass)) -}}
-<div class="hextra-badge {{ $class }}">
-  <div class="hx-inline-flex hx-items-center hx-rounded-full hx-px-2.5 hx-leading-6 hx-text-[.65rem] {{ $borderClass }} {{ $badgeClass }}">{{- $content -}}</div>
-</div>
-{{- /* Strip trailing newline. */ -}}

layouts/partials/shortcodes/card.html

@@ -54,13 +54,15 @@
   {{- end -}}
 
   {{- if $tag }}
-    {{- partial "shortcodes/badge.html" (dict
-      "content" $tag
-      "type" $tagType
-      "class" "hextra-card-tag"
-      "border" true
-      )
-    -}}
+    {{ $defaultClass := "hx-text-gray-600 hx-text-xxs hx-bg-gray-100 dark:hx-bg-neutral-800 dark:hx-text-neutral-200" }}
+    {{ $warningClass := "hx-border-yellow-100 hx-bg-yellow-50 hx-text-yellow-900 dark:hx-border-yellow-200/30 dark:hx-bg-yellow-700/30 dark:hx-text-yellow-200" }}
+    {{ $infoClass := "hx-border-blue-200 hx-bg-blue-100 hx-text-blue-900 dark:hx-border-blue-200/30 dark:hx-bg-blue-900/30 dark:hx-text-blue-200" }}
+    {{ $errorClass := "hx-border-red-200 hx-bg-red-100 hx-text-red-900 dark:hx-border-red-200/30 dark:hx-bg-red-900/30 dark:hx-text-red-200" }}
+
+    {{ $tagClass := cond (eq $tagType "info") $infoClass (cond (eq $tagType "warning") $warningClass (cond (eq $tagType "error") $errorClass $defaultClass)) }}
+    <div class="hextra-card-tag">
+      <span class="hx-inline-block hx-rounded-full hx-px-2.5 hx-leading-6 {{ $tagClass }}">{{ $tag }}</span>
+    </div>
   {{- end -}}
 </a>
 {{- /* Strip trailing newline. */ -}}

layouts/shortcodes/badge.html

@@ -1,33 +0,0 @@
-{{- if .IsNamedParams -}}
-  {{- $content := .Get "content" -}}
-  {{- $type := .Get "type" | default "" -}}
-  {{- $class := .Get "class" | default "" -}}
-  {{- $link := .Get "link" | default "" -}}
-
-  {{- if $link -}}
-    <a href="{{ $link }}" title="{{ $content | plainify }}" target="_blank">
-      {{- partial "shortcodes/badge.html" (dict
-        "content" $content 
-        "type" $type
-        "class" $class
-        "border" true
-        )
-      -}}
-    </a>
-  {{- else -}}
-    {{- partial "shortcodes/badge.html" (dict
-      "content" $content 
-      "type" $type
-      "class" $class
-      "border" true
-      )
-    -}}
-  {{- end -}}
-{{- else -}}
-  {{- $content := .Get 0 -}}
-  {{- partial "shortcodes/badge.html" (dict
-    "content" $content 
-    "border" true
-    )
-  -}}
-{{- end -}}

layouts/shortcodes/jupyter.html

@@ -53,12 +53,12 @@
                 {{- 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>
+                  <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">{{- $textContent -}}</pre>
+                  <pre class="not-prose hx-text-sm">{{- $textContent -}}</pre>
                   {{- $html := index $data "text/html" -}}
                   {{- if $html -}}
                     {{- $htmlText := delimit $html "" -}}

package-lock.json

@@ -980,10 +980,11 @@
       }
     },
     "node_modules/micromatch": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
-      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
+      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "braces": "^3.0.3",
         "picomatch": "^2.3.1"