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

Merge pull request #458 from nunocoracao/feature-shortcode-gallery

Browse source 
✨ shortcode gallery
This commit is contained in:
Nuno Coração 2023-01-17 21:31:03 +00:00 committed by GitHub
commit 9965933f89
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 308 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

111
assets/css/compiled/main.css
View file

@ -1667,6 +1667,10 @@ select {
cursor: pointer;
}
.resize {
resize: both;
}
.list-none {
list-style-type: none;
}
@ -2992,7 +2996,7 @@ body:has(#menu-controller:checked) {
text-decoration-line: underline;
}
/* */
/* Custom */
.thumbnail {
min-width: 300px;
@ -3106,6 +3110,111 @@ body:has(#menu-controller:checked) {
text-underline-offset: 4px;
}
.grid-w10 {
width: calc(10% - 5px);
margin: 0px !important;
}
.grid-w15 {
width: calc(15% - 5px);
margin: 0px !important;
}
.grid-w20 {
width: calc(20% - 5px);
margin: 0px !important;
}
.grid-w25 {
width: calc(25% - 5px);
margin: 0px !important;
}
.grid-w30 {
width: calc(30% - 5px);
margin: 0px !important;
}
.grid-w33 {
width: calc(33% - 5px);
margin: 0px !important;
}
.grid-w35 {
width: calc(35% - 5px);
margin: 0px !important;
}
.grid-w40 {
width: calc(40% - 5px);
margin: 0px !important;
}
.grid-w45 {
width: calc(45% - 5px);
margin: 0px !important;
}
.grid-w50 {
width: calc(50% - 5px);
margin: 0px !important;
}
.grid-w55 {
width: calc(55% - 5px);
margin: 0px !important;
}
.grid-w60 {
width: calc(60% - 5px);
margin: 0px !important;
}
.grid-w66 {
width: calc(66% - 5px);
margin: 0px !important;
}
.grid-w65 {
width: calc(65% - 5px);
margin: 0px !important;
}
.grid-w70 {
width: calc(70% - 5px);
margin: 0px !important;
}
.grid-w75 {
width: calc(75% - 5px);
margin: 0px !important;
}
.grid-w80 {
width: calc(80% - 5px);
margin: 0px !important;
}
.grid-w85 {
width: calc(85% - 5px);
margin: 0px !important;
}
.grid-w90 {
width: calc(90% - 5px);
margin: 0px !important;
}
.grid-w95 {
width: calc(95% - 5px);
margin: 0px !important;
}
.grid-w100 {
width: calc(100% - 5px);
margin: 0px !important;
}
.first\:mt-8:first-child {
margin-top: 2rem;
}

24
assets/css/main.css
View file

@ -337,7 +337,7 @@ body:has(#menu-controller:checked) {
@apply underline;
}
/* */
/* Custom */
.thumbnail {
min-width: 300px;
@ -447,3 +447,25 @@ body:has(#menu-controller:checked) {
text-decoration-thickness: 3px;
text-underline-offset: 4px;
}
.grid-w10 { width: calc(10% - 5px); margin: 0px !important; }
.grid-w15 { width: calc(15% - 5px); margin: 0px !important; }
.grid-w20 { width: calc(20% - 5px); margin: 0px !important; }
.grid-w25 { width: calc(25% - 5px); margin: 0px !important; }
.grid-w30 { width: calc(30% - 5px); margin: 0px !important; }
.grid-w33 { width: calc(33% - 5px); margin: 0px !important; }
.grid-w35 { width: calc(35% - 5px); margin: 0px !important; }
.grid-w40 { width: calc(40% - 5px); margin: 0px !important; }
.grid-w45 { width: calc(45% - 5px); margin: 0px !important; }
.grid-w50 { width: calc(50% - 5px); margin: 0px !important; }
.grid-w55 { width: calc(55% - 5px); margin: 0px !important; }
.grid-w60 { width: calc(60% - 5px); margin: 0px !important; }
.grid-w65 { width: calc(65% - 5px); margin: 0px !important; }
.grid-w66 { width: calc(66% - 5px); margin: 0px !important; }
.grid-w70 { width: calc(70% - 5px); margin: 0px !important; }
.grid-w75 { width: calc(75% - 5px); margin: 0px !important; }
.grid-w80 { width: calc(80% - 5px); margin: 0px !important; }
.grid-w85 { width: calc(85% - 5px); margin: 0px !important; }
.grid-w90 { width: calc(90% - 5px); margin: 0px !important; }
.grid-w95 { width: calc(95% - 5px); margin: 0px !important; }
.grid-w100 { width: calc(100% - 5px); margin: 0px !important; }

13
assets/lib/packery/packery.pkgd.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

BIN
exampleSite/content/docs/shortcodes/gallery/01.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.6 MiB

BIN
exampleSite/content/docs/shortcodes/gallery/02.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.4 MiB

BIN
exampleSite/content/docs/shortcodes/gallery/03.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
exampleSite/content/docs/shortcodes/gallery/04.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.1 MiB

BIN
exampleSite/content/docs/shortcodes/gallery/05.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.7 MiB

BIN
exampleSite/content/docs/shortcodes/gallery/06.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.8 MiB

BIN
exampleSite/content/docs/shortcodes/gallery/07.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.6 MiB

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

@ -167,6 +167,38 @@ Blowfish also supports automatic conversion of images included using standard Ma
{{< figure src="abstract.jpg" alt="Abstract purple artwork" caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)" >}}
## Gallery
`gallery` allows you to showcase multiple images at once, in a responsive manner with more varied and interesting layouts.
In order to add images to the gallery, use `img` tags for each image and add `class="grid-wXX"` in order for the gallery to be able to identify the column width for each image. The widths available by default start at 10% and go all the way to 100% in 5% increments. For example, to set the width to 65%, set the class to `grid-w65`. Additionally, widths for 33% and 66% are also available in order to build galleries with 3 cols.
**Example:**
```md
{{</* gallery */>}}
<img src="gallery/01.jpg" class="grid-w33" />
<img src="gallery/02.jpg" class="grid-w33" />
<img src="gallery/03.jpg" class="grid-w33" />
<img src="gallery/04.jpg" class="grid-w33" />
<img src="gallery/05.jpg" class="grid-w33" />
<img src="gallery/06.jpg" class="grid-w33" />
<img src="gallery/07.jpg" class="grid-w33" />
{{</* /gallery */>}}
```
{{< gallery >}}
<img src="gallery/01.jpg" class="grid-w33" />
<img src="gallery/02.jpg" class="grid-w33" />
<img src="gallery/03.jpg" class="grid-w33" />
<img src="gallery/04.jpg" class="grid-w33" />
<img src="gallery/05.jpg" class="grid-w33" />
<img src="gallery/06.jpg" class="grid-w33" />
<img src="gallery/07.jpg" class="grid-w33" />
{{< /gallery >}}
## GitHub Card
`github` allows you to quickly link a github repository, all while showing and updating in realtime stats about it, such as the number of stars and forks it has.
@ -185,6 +217,7 @@ Blowfish also supports automatic conversion of images included using standard Ma
{{< github repo="nunocoracao/blowfish" >}}
## Icon
`icon` outputs an SVG icon and takes the icon name as its only parameter. The icon is scaled to match the current text size.

7
layouts/partials/vendor.html
View file

@ -46,3 +46,10 @@
{{ $typeitLib := resources.Get "lib/typeit/typeit.umd.js" }}
<script defer src="{{ $typeitLib.RelPermalink }}" integrity="{{ $typeitLib.Data.Integrity }}"></script>
{{ end }}
{{/* Packery */}}
{{ if .Page.HasShortcode "gallery" }}
{{ $packeryLib := resources.Get "lib/packery/packery.pkgd.min.js" }}
<script defer src="{{ $packeryLib.RelPermalink }}" integrity="{{ $packeryLib.Data.Integrity }}"></script>
{{ end }}

18
layouts/shortcodes/gallery.html Normal file
View file

@ -0,0 +1,18 @@
{{ $time := now.UnixNano }}
{{ $id := delimit (slice "gallery" $time) "-" }}
<div id="{{ $id }}">
{{ .Inner }}
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
var elem = document.querySelector('#{{ $id }}');
var pckry = new Packery(elem, {
percentPosition: true,
gutter: 5,
resize: true
});
});
</script>

97
package-lock.json generated
View file

@ -22,6 +22,7 @@
"jquery": "^3.6.3",
"katex": "^0.16.4",
"mermaid": "^9.3.0",
"packery": "^2.1.2",
"prettier": "^2.8.3",
"prettier-plugin-go-template": "^0.0.13",
"prettier-plugin-tailwindcss": "^0.2.1",
@ -709,6 +710,12 @@
"robust-predicates": "^3.0.0"
}
},
"node_modules/desandro-matches-selector": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/desandro-matches-selector/-/desandro-matches-selector-2.0.2.tgz",
"integrity": "sha512-+1q0nXhdzg1IpIJdMKalUwvvskeKnYyEe3shPRwedNcWtnhEKT3ZxvFjzywHDeGcKViIxTCAoOYQWP1qD7VNyg==",
"dev": true
},
"node_modules/detective": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
@ -741,6 +748,12 @@
"integrity": "sha512-ewwFzHzrrneRjxzmK6oVz/rZn9VWspGFRDb4/rRtIsM1n36t9AKma/ye8syCpcw+XJ25kOK/hOG7t1j2I2yBqA==",
"dev": true
},
"node_modules/ev-emitter": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/ev-emitter/-/ev-emitter-1.1.1.tgz",
"integrity": "sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q==",
"dev": true
},
"node_modules/fast-glob": {
"version": "3.2.12",
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
@ -786,6 +799,15 @@
"node": ">=8"
}
},
"node_modules/fizzy-ui-utils": {
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/fizzy-ui-utils/-/fizzy-ui-utils-2.0.7.tgz",
"integrity": "sha512-CZXDVXQ1If3/r8s0T+v+qVeMshhfcuq0rqIFgJnrtd+Bu8GmDmqMjntjUePypVtjHXKJ6V4sw9zeyox34n9aCg==",
"dev": true,
"dependencies": {
"desandro-matches-selector": "^2.0.0"
}
},
"node_modules/fsevents": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@ -813,6 +835,12 @@
"node": ">=10"
}
},
"node_modules/get-size": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/get-size/-/get-size-2.0.3.tgz",
"integrity": "sha512-lXNzT/h/dTjTxRbm9BXb+SGxxzkm97h/PCIKtlN/CBCxxmkkIVV21udumMS93MuVTDX583gqc94v3RjuHmI+2Q==",
"dev": true
},
"node_modules/glob-parent": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@ -1091,6 +1119,27 @@
"node": ">= 6"
}
},
"node_modules/outlayer": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/outlayer/-/outlayer-2.1.1.tgz",
"integrity": "sha512-+GplXsCQ3VrbGujAeHEzP9SXsBmJxzn/YdDSQZL0xqBmAWBmortu2Y9Gwdp9J0bgDQ8/YNIPMoBM13nTwZfAhw==",
"dev": true,
"dependencies": {
"ev-emitter": "^1.0.0",
"fizzy-ui-utils": "^2.0.0",
"get-size": "^2.0.2"
}
},
"node_modules/packery": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/packery/-/packery-2.1.2.tgz",
"integrity": "sha512-Coc+8Atz03c0iu1RK0PZIJMKcKrE4i9Z8UBBywqz7Dhy40mMPM5wMQfqO9P2eqFP+lxKjGMTHgRAwjBQc+AQ5w==",
"dev": true,
"dependencies": {
"get-size": "^2.0.2",
"outlayer": "^2.0.0"
}
},
"node_modules/path-parse": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
@ -2085,6 +2134,12 @@
"robust-predicates": "^3.0.0"
}
},
"desandro-matches-selector": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/desandro-matches-selector/-/desandro-matches-selector-2.0.2.tgz",
"integrity": "sha512-+1q0nXhdzg1IpIJdMKalUwvvskeKnYyEe3shPRwedNcWtnhEKT3ZxvFjzywHDeGcKViIxTCAoOYQWP1qD7VNyg==",
"dev": true
},
"detective": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
@ -2111,6 +2166,12 @@
"integrity": "sha512-ewwFzHzrrneRjxzmK6oVz/rZn9VWspGFRDb4/rRtIsM1n36t9AKma/ye8syCpcw+XJ25kOK/hOG7t1j2I2yBqA==",
"dev": true
},
"ev-emitter": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/ev-emitter/-/ev-emitter-1.1.1.tgz",
"integrity": "sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q==",
"dev": true
},
"fast-glob": {
"version": "3.2.12",
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
@ -2149,6 +2210,15 @@
"to-regex-range": "^5.0.1"
}
},
"fizzy-ui-utils": {
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/fizzy-ui-utils/-/fizzy-ui-utils-2.0.7.tgz",
"integrity": "sha512-CZXDVXQ1If3/r8s0T+v+qVeMshhfcuq0rqIFgJnrtd+Bu8GmDmqMjntjUePypVtjHXKJ6V4sw9zeyox34n9aCg==",
"dev": true,
"requires": {
"desandro-matches-selector": "^2.0.0"
}
},
"fsevents": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@ -2166,6 +2236,12 @@
"integrity": "sha512-cJaJkxCCxC8qIIcPBF9yGxY0W/tVZS3uEISDxhYIdtk8OL93pe+6Zj7LjCqVV4dzbqcriOZ+kQ/NE4RXZHsIGA==",
"dev": true
},
"get-size": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/get-size/-/get-size-2.0.3.tgz",
"integrity": "sha512-lXNzT/h/dTjTxRbm9BXb+SGxxzkm97h/PCIKtlN/CBCxxmkkIVV21udumMS93MuVTDX583gqc94v3RjuHmI+2Q==",
"dev": true
},
"glob-parent": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@ -2379,6 +2455,27 @@
"resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
"integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw=="
},
"outlayer": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/outlayer/-/outlayer-2.1.1.tgz",
"integrity": "sha512-+GplXsCQ3VrbGujAeHEzP9SXsBmJxzn/YdDSQZL0xqBmAWBmortu2Y9Gwdp9J0bgDQ8/YNIPMoBM13nTwZfAhw==",
"dev": true,
"requires": {
"ev-emitter": "^1.0.0",
"fizzy-ui-utils": "^2.0.0",
"get-size": "^2.0.2"
}
},
"packery": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/packery/-/packery-2.1.2.tgz",
"integrity": "sha512-Coc+8Atz03c0iu1RK0PZIJMKcKrE4i9Z8UBBywqz7Dhy40mMPM5wMQfqO9P2eqFP+lxKjGMTHgRAwjBQc+AQ5w==",
"dev": true,
"requires": {
"get-size": "^2.0.2",
"outlayer": "^2.0.0"
}
},
"path-parse": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",

5
package.json
View file

@ -40,6 +40,7 @@
"jquery": "^3.6.3",
"katex": "^0.16.4",
"mermaid": "^9.3.0",
"packery": "^2.1.2",
"prettier": "^2.8.3",
"prettier-plugin-go-template": "^0.0.13",
"prettier-plugin-tailwindcss": "^0.2.1",
@ -85,6 +86,10 @@
{
"from": "node_modules/jquery/dist/jquery.slim.min.js",
"to": "assets/lib/jquery/jquery.slim.min.js"
},
{
"from": "node_modules/packery/dist/packery.pkgd.min.js",
"to": "assets/lib/packery/packery.pkgd.min.js"
}
],
"dependencies": {