From 40908cb3c30c01089b2750c795681d78d899cb78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20Cora=C3=A7=C3=A3o?= <nunocoracao@gmail.com>
Date: Sun, 10 Mar 2024 11:02:47 +0000
Subject: [PATCH] fixed youtube performance issues and added new shortcut

---
 exampleSite/content/_index.md                |  3 +-
 exampleSite/content/docs/shortcodes/index.md | 31 +++++---------------
 layouts/shortcodes/youtubeLite.html          | 14 ++-------
 3 files changed, 12 insertions(+), 36 deletions(-)

diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md
index b8c1ad74..2080b105 100755
--- a/exampleSite/content/_index.md
+++ b/exampleSite/content/_index.md
@@ -9,8 +9,7 @@ Welcome to Blowfish, one of the most flexible and robust Hugo themes. It is desi
 npx blowfish-tools
 ```  
 
-<iframe width="100%" height="350" src="https://www.youtube.com/embed/SgXhGb-7QbU?si=ce44baicuQ6zMeXz" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
-
+{{< youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" >}}
 
 <!--You can also find the complete theme documentation in [docs]({{< ref "docs" >}}). Blowfish is highly customizable and can be configured to fit your needs: from a static website to a blog. Checkout some [examples](/examples) and what some of our [users](/users) have been building.
 
diff --git a/exampleSite/content/docs/shortcodes/index.md b/exampleSite/content/docs/shortcodes/index.md
index e167e99c..8c29faa3 100644
--- a/exampleSite/content/docs/shortcodes/index.md
+++ b/exampleSite/content/docs/shortcodes/index.md
@@ -204,7 +204,7 @@ The `figure` shortcode accepts six parameters:
 | `caption` | Markdown for the image caption, which will be displayed below the image.                                                                                                                                                                                                                                                                                                                  |
 | `class`   | Additional CSS classes to apply to the image.                                                                                                                                                                                                                                                                                                                                             |
 | `href`    | URL that the image should be linked to.                                                                                                                                                                                                                                                                                                                                                   |
-| `target`  | The target attribute for the `href` URL.                                                                                                                                                                                                                                                                                                                                        |
+| `target`  | The target attribute for the `href` URL.                                                                                                                                                                                                                                                                                                                                                  |
 | `nozoom`  | `nozoom=true` disables the image "zoom" functionality. This is most useful in combination with a `href` link.                                                                                                                                                                                                                                                                             |
 | `default` | Special parameter to revert to default Hugo `figure` behaviour. Simply provide `default=true` and then use normal [Hugo shortcode syntax](https://gohugo.io/content-management/shortcodes/#figure).                                                                                                                                                                                       |
 <!-- prettier-ignore-end -->
@@ -735,35 +735,20 @@ consectetur adipiscing elit.
 
 ## Youtube Lite
 
-tbd
-
-https://github.com/paulirish/lite-youtube-embed
-
-
+A shortcut to embed youtube videos using the [lite-youtube-embed](https://github.com/paulirish/lite-youtube-embed) library. This library is a lightweight alternative to the standard youtube embeds, and it's designed to be faster and more efficient.
 
 <!-- prettier-ignore-start -->
-| Parameter          | Description                                                                                                                                        |
-| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `tag`              | [String] `html` tag that will be used to render the strings.                                                                                       |
-| `classList`        | [String] List of `css` classes to apply to the `html` element.                                                                                     |
-| `initialString`    | [String] Initial string that will appear written and will be replaced.                                                                             |
-| `speed`            | [number] Typing speed, measured in milliseconds between each step.                                                                                 |
-| `lifeLike`         | [boolean] Makes the typing pace irregular, as if a real person is doing it.                                                                        |
-| `startDelay`       | [number] The amount of time before the plugin begins typing after being initialized.                                                               |
-| `breakLines`       | [boolean] Whether multiple strings are printed on top of each other (true), or if they're deleted and replaced by each other (false).              |
-| `waitUntilVisible` | [boolean] Determines if the instance will begin when loaded or only when the target element becomes visible in the viewport. The default is `true` |
-| `loop`             | [boolean] Whether your strings will continuously loop after completing                                                                             |
-
+| Parameter | Description                         |
+| --------- | ----------------------------------- |
+| `id`      | [String] Youtube video id to embed. |
+| `label`   | [String] Label for the video        |
 <!-- prettier-ignore-end -->
 
 **Example 1:**
 
 ```md
-{{</* typeit */>}}
-Lorem ipsum dolor sit amet 
-{{</* /typeit */>}}
+{{</* youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" */>}}
 
-SgXhGb-7QbU
 ```
 
-{{< youtubeLite />}}
+{{< youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" >}}
diff --git a/layouts/shortcodes/youtubeLite.html b/layouts/shortcodes/youtubeLite.html
index 8817dc67..398f9f79 100644
--- a/layouts/shortcodes/youtubeLite.html
+++ b/layouts/shortcodes/youtubeLite.html
@@ -1,12 +1,4 @@
-{{- $content := split .Inner "\n" -}}
-{{- $initialString := .Get "initialString" | default "" -}}
-{{- $speed := .Get "speed" | default 100 -}}
-{{- $lifeLike := .Get "lifeLike" | default false -}}
-{{- $startDelay := .Get "startDelay" | default 0 -}}
-{{- $breakLines := .Get "breakLines" | default true -}}
-{{- $waitUntilVisible := .Get "waitUntilVisible" | default true -}}
-{{- $loop := .Get "loop" | default false -}}                                                                    
+{{- $id := .Get "id" | default "SgXhGb-7QbU" -}}
+{{- $label := .Get "id" | default "Blowfish" -}}
 
-
-
-<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>
+<lite-youtube videoid="{{ $id }}" playlabel="{{ $label }}"></lite-youtube>