michael/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2025-01-22 14:35:43 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

✨ TypeIt integration

Browse source
This commit is contained in:
Nuno Coração 2022-12-31 14:51:04 +00:00
parent 5d6dca74dc
commit 09a5be7077
7 changed files with 164 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
README.md
View file

@ -38,6 +38,7 @@ Blowfish is designed to be a powerful, lightweight theme for [Hugo](https://gohu
- Client-side site search powered by Fuse.js
- Diagrams and visualisations using Mermaid
- Charts using Chart.js
- TypeIt integration
- Mathematical notation using KaTeX
- SVG icons from FontAwesome 6
- Automatic image resizing using Hugo Pipes

2
assets/lib/typeit/typeit.umd.js Normal file
View file

File diff suppressed because one or more lines are too long

112
exampleSite/content/docs/shortcodes/index.md
View file

@ -43,9 +43,9 @@ Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter.
`Article` will embed a single article into a markdown file. The `link` to the file should be the `.RelPermalink` of the file to be embedded. Note that the shortcode will not display anything if it's referencing it's parent. *Note: if you are running your website in a subfolder like Blowfish (i.e. /blowfish/) please include that path in the link.*
<!-- prettier-ignore-start -->
|Parameter|Description|
|---|---|
|`link`| **Required.** the `.RelPermalink` to the target article.|
| Parameter | Description |
| --------- | -------------------------------------------------------- |
| `link` | **Required.** the `.RelPermalink` to the target article. |
<!-- prettier-ignore-end -->
**Example:**
@ -135,14 +135,14 @@ When a provided image is a page resource, it will be optimised using Hugo Pipes
The `figure` shortcode accepts six parameters:
<!-- prettier-ignore-start -->
|Parameter|Description|
|---|---|
|`src`| **Required.** The local path/filename or URL of the image. When providing a path and filename, the theme will attempt to locate the image using the following lookup order: Firstly, as a [page resource](https://gohugo.io/content-management/page-resources/) bundled with the page; then an asset in the `assets/` directory; then finally, a static image in the `static/` directory.|
|`alt`|[Alternative text description](https://moz.com/learn/seo/alt-text) for the image.|
|`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.|
|`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).|
| Parameter | Description |
| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `src` | **Required.** The local path/filename or URL of the image. When providing a path and filename, the theme will attempt to locate the image using the following lookup order: Firstly, as a [page resource](https://gohugo.io/content-management/page-resources/) bundled with the page; then an asset in the `assets/` directory; then finally, a static image in the `static/` directory. |
| `alt` | [Alternative text description](https://moz.com/learn/seo/alt-text) for the image. |
| `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. |
| `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 -->
Blowfish also supports automatic conversion of images included using standard Markdown syntax. Simply use the following format and the theme will handle the rest:
@ -189,11 +189,11 @@ Icons can also be used in partials by calling the [icon partial]({{< ref "partia
`List` will display a list of recent articles. This shortcode requires a limit value to constraint the list. Additionally, it supports a `where` and a `value` in order to filter articles by their parameters. Note that this shortcode will not display its parent page but it will count for the limit value.
<!-- prettier-ignore-start -->
|Parameter|Description|
|---|---|
|`limit`| **Required.** the number of recent articles to display.|
|`where`| the number of recent articles to display.|
|`value`| the number of recent articles to display.|
| Parameter | Description |
| --------- | ------------------------------------------------------- |
| `limit` | **Required.** the number of recent articles to display. |
| `where` | the number of recent articles to display. |
| `value` | the number of recent articles to display. |
<!-- prettier-ignore-end -->
@ -285,3 +285,83 @@ B-->C[Profit]
{{< /mermaid >}}
You can see some additional Mermaid examples on the [diagrams and flowcharts samples]({{< ref "diagrams-flowcharts" >}}) page.
## TypeIt
[TypeIt](https://www.typeitjs.com) is the most versatile JavaScript tool for creating typewriter effects on the planet. With a straightforward configuration, it allows you to type single or multiple strings that break lines, delete & replace each other, and it even handles strings that contain complex HTML.
Blowfish implements a sub-set of TypeIt features using a `shortcode`. Write your text within the `typeit` shortcode and use the following parameters to configure the behavior you want.
<!-- 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 |
<!-- prettier-ignore-end -->
**Example 1:**
```md
{{</* typeit */>}}
Lorem ipsum dolor sit amet
{{</* /typeit */>}}
```
{{< typeit >}}
Lorem ipsum dolor sit amet
{{< /typeit >}}
**Example 2:**
```md
{{</* typeit
tag=h1
lifeLike=true
*/>}}
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
{{</* /typeit */>}}
```
{{< typeit
tag=h1
lifeLike=true
>}}
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
{{< /typeit >}}
**Example 3:**
```md
{{</* typeit
tag=h3
speed=50
breakLines=false
loop=true
*/>}}
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
{{</* /typeit */>}}
```
{{< typeit
tag=h3
speed=50
breakLines=false
loop=true
>}}
"Frankly, my dear, I don't give a damn." Gone with the Wind (1939)
"I'm gonna make him an offer he can't refuse." The Godfather (1972)
"Toto, I've a feeling we're not in Kansas anymore." The Wizard of Oz (1939)
{{< /typeit >}}

5
layouts/partials/vendor.html
View file

@ -33,4 +33,9 @@
{{ range $katexFonts }}
<!-- {{ .RelPermalink }} -->
{{ end }}
{{/* TypeIt */}}
{{ if .Page.HasShortcode "typeit" }}
{{ $typeitLib := resources.Get "lib/typeit/typeit.umd.js" }}
<script defer type="text/javascript" src="{{ $typeitLib.RelPermalink }}" integrity="{{ $typeitLib.Data.Integrity }}"></script>
{{ end }}
{{ end }}

38
layouts/shortcodes/typeit.html Normal file
View file

@ -0,0 +1,38 @@
{{- $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 -}}
{{- $classList := slice -}}
{{- with .Get "class" -}}
{{- $classList = $classList | append . -}}
{{- end -}}
{{- $tag := .Get "tag" | default "div" -}}
{{ $time := now.UnixNano }}
{{ $id := delimit (slice "typeit" $time) "-" }}
{{- $attrs := printf `id="%v"` $id -}}
{{- with $classList -}}
{{- $attrs = delimit $classList " " | printf `%v class="%v"` $attrs -}}
{{- end -}}
{{ printf `<%v %v>%s</%v>` $tag $attrs $initialString $tag | safeHTML }}
<script>
document.addEventListener("DOMContentLoaded", function () {
new TypeIt("#{{ $id }}", {
strings: {{ $content }},
speed: {{ $speed }},
lifeLike: {{ $lifeLike }},
startDelay: {{ $startDelay }},
breakLines: {{ $breakLines }},
waitUntilVisible: {{ $waitUntilVisible }},
loop: {{ $loop }}
}).go();
});
</script>

18
package-lock.json generated
View file

@ -1,12 +1,12 @@
{
"name": "hugo-blowfish-theme",
"version": "2.19.1",
"version": "2.21.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "hugo-blowfish-theme",
"version": "2.19.1",
"version": "2.21.0",
"hasInstallScript": true,
"license": "MIT",
"dependencies": {
@ -26,6 +26,7 @@
"prettier-plugin-tailwindcss": "^0.2.1",
"rimraf": "^3.0.2",
"tailwindcss": "^3.2.4",
"typeit": "^8.7.1",
"vendor-copy": "^3.0.1"
}
},
@ -1607,6 +1608,13 @@
"node": ">=8.0"
}
},
"node_modules/typeit": {
"version": "8.7.1",
"resolved": "https://registry.npmjs.org/typeit/-/typeit-8.7.1.tgz",
"integrity": "sha512-Bx/O4NMz10NWh9FWYtVwV4XwGHF9UDJfpCZPJRtw2/oUcahFAStU8J0t19aroPfTV6s1UlS5ICoqilOqmEnh2Q==",
"dev": true,
"hasInstallScript": true
},
"node_modules/ulid": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/ulid/-/ulid-2.3.0.tgz",
@ -2799,6 +2807,12 @@
"is-number": "^7.0.0"
}
},
"typeit": {
"version": "8.7.1",
"resolved": "https://registry.npmjs.org/typeit/-/typeit-8.7.1.tgz",
"integrity": "sha512-Bx/O4NMz10NWh9FWYtVwV4XwGHF9UDJfpCZPJRtw2/oUcahFAStU8J0t19aroPfTV6s1UlS5ICoqilOqmEnh2Q==",
"dev": true
},
"ulid": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/ulid/-/ulid-2.3.0.tgz",

7
package.json
View file

@ -8,7 +8,7 @@
"postinstall": "vendor-copy",
"assets": "rimraf assets/vendor && vendor-copy",
"dev": "NODE_ENV=development ./node_modules/tailwindcss/lib/cli.js -i ./assets/css/main.css -o ./assets/css/compiled/main.css --jit -w",
"build": "NODE_ENV=production ./node_modules/tailwindcss/lib/cli.js -i ./assets/css/main.css -o ./assets/css/compiled/main.css --jit",
"build": "NODE_ENV=production ./node_modules/tailwindcss/lib/cli.js -i ./assets/css/main.css -o ./assets/css/compiled/main.css --jit",
"build-hugo": "hugo --minify -s exampleSite --themesDir ../.. -d ../docs --baseURL https://nunocoracao.github.io/blowfish/",
"example": "hugo server -E -F --minify --source exampleSite --themesDir ../.. --buildDrafts -b http://localhost/ -p 1313",
"lighthouse": "lhci autorun"
@ -44,6 +44,7 @@
"prettier-plugin-tailwindcss": "^0.2.1",
"rimraf": "^3.0.2",
"tailwindcss": "^3.2.4",
"typeit": "^8.7.1",
"vendor-copy": "^3.0.1"
},
"vendorCopy": [],
@ -75,6 +76,10 @@
{
"from": "node_modules/fuse.js/dist/fuse.min.js",
"to": "assets/lib/fuse/fuse.min.js"
},
{
"from": "node_modules/typeit/dist/index.umd.js",
"to": "assets/lib/typeit/typeit.umd.js"
}
],
"dependencies": {