exampleSite/content/en/shortcodes/audio/_index.md

@@ -0,0 +1,48 @@
+---
+title: Audio
+resources:
+  - name: risen
+    src: "risen.mp3"
+    title: Risen
+    params:
+      credits: "[Sascha Ende on filmmusic.io](https://filmmusic.io/en/song/12856-risen)"
+---
+
+The audio shortcode allows you to embed audio files.
+
+## Usage
+
+Define your resources in the page front matter, custom parameter `params.credits` is optional.
+
+<!-- spellchecker-disable -->
+
+```md
+---
+resources:
+  - name: risen
+    src: "risen.mp3"
+    title: Risen
+    params:
+      credits: "[Sascha Ende on filmmusic.io](https://filmmusic.io/en/song/12856-risen)"
+---
+
+{{</* audio name="risen" */>}}
+```
+
+### Attributes
+
+<!-- prettier-ignore-start -->
+<!-- spellchecker-disable -->
+{{< propertylist name=shortcode-audio sort=name order=asc >}}
+<!-- spellchecker-enable -->
+<!-- prettier-ignore-end -->
+
+<!-- spellchecker-enable -->
+
+## Example
+
+<!-- spellchecker-disable -->
+
+{{< audio name="risen" >}}
+
+<!-- spellchecker-enable -->

exampleSite/content/en/shortcodes/progress.md

@@ -24,5 +24,15 @@ A progress bar shows how far a process has progressed.
 <!-- prettier-ignore-start -->
 <!-- spellchecker-disable -->
 {{< progress title=Eating value=65 icon=gdoc_heart >}}
+
+{{< progress title="Type: note" value=10 icon=gdoc_heart type=note >}}
+
+{{< progress title="Type: tip" value=70 icon=gdoc_heart type=tip >}}
+
+{{< progress title="Type: important" value=30 icon=gdoc_heart type=important >}}
+
+{{< progress title="Type: caution" value=90 icon=gdoc_heart type=caution >}}
+
+{{< progress title="Type: warning" value=80 icon=gdoc_heart type=warning >}}
 <!-- spellchecker-enable -->
 <!-- prettier-ignore-end -->

exampleSite/data/menu/main.yaml

@@ -8,6 +8,7 @@ main:
           en: Level 1.1 (EN)
           de: Level 1.1 (DE)
         ref: "/toc-tree/level-1/level-1-1"
+        rel: me
       - name: Level 1.2
         ref: "/toc-tree/level-1/level-1-2"
       - name: Level 1.3

exampleSite/data/properties/shortcode-audio.yaml

@@ -0,0 +1,6 @@
+---
+properties:
+  - name: name
+    type: string
+    description: Name of the audio resource defined in page front matter.
+    required: true

exampleSite/data/properties/shortcode-progress.yaml

@@ -1,5 +1,10 @@
 ---
 properties:
+  - name: type
+    type: string
+    description: Color type of the progress bar. Supported values are `main|note|tip|important|caution|warning`.
+    required: false
+    defaultValue: main
   - name: value
     type: integer
     description: Progress value.

layouts/partials/menu-bundle.html

@@ -60,6 +60,9 @@
                   class="gdoc-nav__entry{{- if not .external }}
                     {{- if $isCurrent }}{{ printf " is-active" }}{{ end }}
                   {{- end }}"
+                  {{ if .rel -}}
+                    rel="{{ .rel }}"
+                  {{- end }}
                 >
                   {{ $name }}
                 </a>

layouts/partials/menu-extra.html

@@ -33,6 +33,9 @@
               {{ relref $current .ref }}
             {{- end }}"
             class="gdoc-header__link"
+            {{ if .rel -}}
+              rel="{{ .rel }}"
+            {{- end }}
           >
             <svg class="gdoc-icon {{ .icon }}">
               <title>{{ $name }}</title>

layouts/shortcodes/audio.html

@@ -0,0 +1,23 @@
+{{- $source := ($.Page.Resources.ByType "audio").GetMatch (printf "%s" (.Get "name")) }}
+{{- $customAlt := .Get "alt" }}
+
+
+{{- with $source }}
+  {{- $caption := default .Title $customAlt }}
+
+  <div class="flex justify-center">
+    <figure class="gdoc-markdown__figure">
+      <audio controls class="player" preload="auto">
+        <source src="{{ .Permalink }}" type="audio/mpeg">
+      </audio>
+      {{- with $caption }}
+        <figcaption>
+          {{ . }}
+          {{- with $source.Params.credits }}
+            {{ printf " (%s)" . | $.Page.RenderString }}
+          {{- end }}
+        </figcaption>
+      {{- end }}
+    </figure>
+  </div>
+{{- end }}

layouts/shortcodes/hint.html

@@ -1,6 +1,6 @@
-{{ $type := default "note" (.Get "type") }}
-{{ $icon := .Get "icon" }}
-{{ $title := default ($type | title) (.Get "title") }}
+{{- $type := default "note" (.Get "type") }}
+{{- $icon := .Get "icon" }}
+{{- $title := default ($type | title) (.Get "title") }}
 
 
 <blockquote class="gdoc-hint {{ $type | lower }}">

layouts/shortcodes/progress.html

@@ -1,4 +1,5 @@
 {{- $value := default 0 (.Get "value") -}}
+{{- $type := default "main" (.Get "type") }}
 {{- $title := .Get "title" -}}
 {{- $icon := .Get "icon" -}}
 
@@ -15,7 +16,7 @@
   </div>
   <div class="gdoc-progress__wrap">
     <div
-      class="gdoc-progress__bar"
+      class="gdoc-progress__bar {{ $type | lower }}"
       data-percent="{{ $value }}"
       style="width: {{ $value }}%;"
     ></div>

src/sass/_color_mode.scss

@@ -95,6 +95,10 @@
       filter: saturate(2.5) brightness(0.85);
     }
 
+    .gdoc-progress__bar {
+      filter: saturate(0.85) brightness(0.85);
+    }
+
     .gdoc-hint,
     .admonitionblock {
       a {

src/sass/_markdown.scss

@@ -100,6 +100,14 @@
       max-width: 100%;
       height: auto;
     }
+
+    &:has(audio) {
+      width: 100%;
+
+      audio {
+        width: 100%;
+      }
+    }
   }
 
   img {
@@ -109,7 +117,8 @@
 
   blockquote {
     margin: defaults.$padding-16 0;
-    padding: defaults.$padding-8 defaults.$padding-16 defaults.$padding-8 (defaults.$padding-16 - defaults.$padding-4); //to keep total left space 16dp
+    padding: defaults.$padding-8 defaults.$padding-16 defaults.$padding-8
+      (defaults.$padding-16 - defaults.$padding-4); //to keep total left space 16dp
 
     border-left: defaults.$border-4 solid var(--accent-color);
     border-radius: defaults.$border-radius;

src/sass/_shortcodes.scss

@@ -281,6 +281,23 @@
       transparent
     );
     background-size: 2.5em 2.5em;
-    background-color: defaults.$main-color !important;
+    background-color: defaults.$main-color;
+
+    @each $name, $color in defaults.$hint-colors {
+      &.#{$name} {
+        background-image: linear-gradient(
+          -45deg,
+          #{color.scale($color, $lightness: -20%)} 25%,
+          transparent 25%,
+          transparent 50%,
+          #{color.scale($color, $lightness: -20%)} 50%,
+          #{color.scale($color, $lightness: -20%)} 75%,
+          transparent 75%,
+          transparent
+        );
+
+        background-color: $color;
+      }
+    }
   }
 }