fixed youtube performance issues and added new shortcut

This commit is contained in:
Nuno Coração 2024-03-10 11:02:47 +00:00
parent e17c4b6dd6
commit 40908cb3c3
3 changed files with 12 additions and 36 deletions

View file

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

View file

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

View file

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