templates/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2025-06-06 17:51:54 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge pull request #467 from mirceanton/mirceanton/feature-shortcode-slider

Browse source 
✨ Carousel Shortcode Fixes and Improvements
This commit is contained in:
Nuno Coração 2023-01-18 21:19:38 +00:00 • committed by GitHub
commit 5465c855d4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 55 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6267,6 +6267,18 @@ body:has(#menu-controller:checked) {
/* 16:9 Aspect Ratio */ /* 16:9 Aspect Ratio */
.ratio-21-9 {
padding-top: 42.85%;
}
/* 21:9 Aspect Ratio */
.ratio-32-9 {
padding-top: 28.125%;
}
/* 32:9 Aspect Ratio */
.first\:mt-8:first-child { .first\:mt-8:first-child {
margin-top: 2rem; margin-top: 2rem;
} }

4
assets/css/main.css
View file

@ -470,4 +470,6 @@ body:has(#menu-controller:checked) {
.grid-w95 { width: calc(95% - 5px); margin: 0px !important; } .grid-w95 { width: calc(95% - 5px); margin: 0px !important; }
.grid-w100 { width: calc(100% - 5px); margin: 0px !important; } .grid-w100 { width: calc(100% - 5px); margin: 0px !important; }
.ratio-16-9 { padding-top: 56.25%; } /* 16:9 Aspect Ratio */ .ratio-16-9 { padding-top: 56.25%; } /* 16:9 Aspect Ratio */
.ratio-21-9 { padding-top: 42.85%; } /* 21:9 Aspect Ratio */
.ratio-32-9 { padding-top: 28.125%; } /* 32:9 Aspect Ratio */

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

@ -40,6 +40,7 @@ Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter.
{{< /alert >}} {{< /alert >}}
## Article ## Article
`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.* `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 --> <!-- prettier-ignore-start -->
@ -56,8 +57,6 @@ Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter.
{{< article link="/docs/welcome/" >}} {{< article link="/docs/welcome/" >}}
## Badge ## Badge
`badge` outputs a styled badge component which is useful for displaying metadata. `badge` outputs a styled badge component which is useful for displaying metadata.
@ -92,23 +91,31 @@ Call to action
## Carousel ## Carousel
`carousel` is used to showcase multiple images in an interactive and visually appealing way. This allows a user to slide through multiple images while only taking up the vertical space of a single one. All images are displayed using the full width of the parent component and using a ratio of `16:9`. `carousel` is used to showcase multiple images in an interactive and visually appealing way. This allows a user to slide through multiple images while only taking up the vertical space of a single one. All images are displayed using the full width of the parent component and using one of the predefined aspect ratios of `16:9`, `21:9` or `32:9`.
<!-- prettier-ignore-start --> <!-- prettier-ignore-start -->
| Parameter | Description | | Parameter | Description |
| --------- | --------------------------------------------------------- | | ---------------- | ----------------------------------------------------------------------------------------------------------------- |
| `images` | This shortcode receives how many image paths as you want. | | `images` | **Required.** A regex string to match image names. |
| `aspectRatio` | **Optional.** The aspect ratio for the carousel. Either `16-9`, `21-9` or `32-9`. It is set to `16-9` by default. |
<!-- prettier-ignore-end --> <!-- prettier-ignore-end -->
**Example:** **Example 1:** 16:9 aspect ratio and verbose list of images
```md ```md
{{</* carousel "gallery/03.jpg" "gallery/01.jpg" "gallery/02.jpg" */>}} {{</* carousel images="{gallery/03.jpg, gallery/01.jpg, gallery/02.jpg, gallery/04.jpg}" */>}}
``` ```
{{< carousel "gallery/03.jpg" "gallery/01.jpg" "gallery/02.jpg" "gallery/04.jpg" >}} {{< carousel images="{gallery/03.jpg,gallery/01.jpg,gallery/02.jpg,gallery/04.jpg}" >}}
**Example 2:** 21:9 aspect ratio and regex-ed list of images
```md
{{</* carousel images="gallery/*" aspectRatio="21-9" */>}}
```
{{< carousel images="gallery/*" aspectRatio="21-9" >}}
## Chart ## Chart
@ -187,7 +194,6 @@ 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/)" >}} {{< figure src="abstract.jpg" alt="Abstract purple artwork" caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)" >}}
## Gallery ## Gallery
`gallery` allows you to showcase multiple images at once, in a responsive manner with more varied and interesting layouts. `gallery` allows you to showcase multiple images at once, in a responsive manner with more varied and interesting layouts.
@ -218,7 +224,6 @@ In order to add images to the gallery, use `img` tags for each image and add `cl
<img src="gallery/07.jpg" class="grid-w33" /> <img src="gallery/07.jpg" class="grid-w33" />
{{< /gallery >}} {{< /gallery >}}
## GitHub Card ## 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. `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.
@ -237,7 +242,6 @@ In order to add images to the gallery, use `img` tags for each image and add `cl
{{< github repo="nunocoracao/blowfish" >}} {{< github repo="nunocoracao/blowfish" >}}
## Icon ## 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. `icon` outputs an SVG icon and takes the icon name as its only parameter. The icon is scaled to match the current text size.
@ -293,6 +297,7 @@ When life gives you lemons, make lemonade.
{{< /lead >}} {{< /lead >}}
## List ## List
`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. `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 --> <!-- prettier-ignore-start -->
@ -305,6 +310,7 @@ When life gives you lemons, make lemonade.
<!-- prettier-ignore-end --> <!-- prettier-ignore-end -->
**Example #1:** **Example #1:**
```md ```md
{{</* list limit=2 */>}} {{</* list limit=2 */>}}
``` ```
@ -312,13 +318,13 @@ When life gives you lemons, make lemonade.
{{< list limit=2 >}} {{< list limit=2 >}}
**Example #2:** **Example #2:**
```md ```md
{{</* list limit=2 where="Type" value="sample" */>}} {{</* list limit=2 where="Type" value="sample" */>}}
``` ```
{{< list limit=2 where="Type" value="sample">}} {{< list limit=2 where="Type" value="sample">}}
## Mermaid ## Mermaid
`mermaid` allows you to draw detailed diagrams and visualisations using text. It uses Mermaid under the hood and supports a wide variety of diagrams, charts and other output formats. `mermaid` allows you to draw detailed diagrams and visualisations using text. It uses Mermaid under the hood and supports a wide variety of diagrams, charts and other output formats.
@ -346,9 +352,11 @@ B-->C[Profit]
You can see some additional Mermaid examples on the [diagrams and flowcharts samples]({{< ref "diagrams-flowcharts" >}}) page. You can see some additional Mermaid examples on the [diagrams and flowcharts samples]({{< ref "diagrams-flowcharts" >}}) page.
## Swatches ## Swatches
`swatches` outputs a set of up to three different colors to showcase color elements like a color palette. This shortcode takes the `HEX` codes of each color and creates the visual elements for each. `swatches` outputs a set of up to three different colors to showcase color elements like a color palette. This shortcode takes the `HEX` codes of each color and creates the visual elements for each.
**Example** **Example**
```md ```md
{{</* swatches "#64748b" "#3b82f6" "#06b6d4" */>}} {{</* swatches "#64748b" "#3b82f6" "#06b6d4" */>}}
``` ```
@ -356,7 +364,6 @@ You can see some additional Mermaid examples on the [diagrams and flowcharts sam
**Output** **Output**
{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}} {{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
## TypeIt ## 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. [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.
@ -378,8 +385,6 @@ Blowfish implements a sub-set of TypeIt features using a `shortcode`. Write your
<!-- prettier-ignore-end --> <!-- prettier-ignore-end -->
**Example 1:** **Example 1:**
```md ```md
@ -389,7 +394,7 @@ Lorem ipsum dolor sit amet
``` ```
{{< typeit >}} {{< typeit >}}
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
{{< /typeit >}} {{< /typeit >}}
**Example 2:** **Example 2:**
@ -404,15 +409,14 @@ consectetur adipiscing elit.
{{</* /typeit */>}} {{</* /typeit */>}}
``` ```
{{< typeit {{< typeit
tag=h1 tag=h1
lifeLike=true lifeLike=true
>}} >}}
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,
consectetur adipiscing elit. consectetur adipiscing elit.
{{< /typeit >}} {{< /typeit >}}
**Example 3:** **Example 3:**
```md ```md
@ -426,7 +430,8 @@ Lorem ipsum dolor sit amet,
consectetur adipiscing elit. consectetur adipiscing elit.
{{</* /typeit */>}} {{</* /typeit */>}}
``` ```
{{< typeit
{{< typeit
tag=h3 tag=h3
speed=50 speed=50
breakLines=false breakLines=false
@ -435,4 +440,4 @@ consectetur adipiscing elit.
"Frankly, my dear, I don't give a damn." Gone with the Wind (1939) "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) "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) "Toto, I've a feeling we're not in Kansas anymore." The Wizard of Oz (1939)
{{< /typeit >}} {{< /typeit >}}

19
layouts/shortcodes/carousel.html
View file

@ -1,10 +1,15 @@
<div id="carouselExampleCaptions" class="carousel slide relative" data-bs-ride="carousel"> {{ $time := now.UnixNano }}
{{ $id := delimit (slice "gallery" $time) "-" }}
{{ $aspect := default "16-9" (.Get "aspectRatio") }}
{{ $images := .Page.Resources.Match (.Get "images") }}
<div id="{{ $id }}" class="carousel slide relative" data-bs-ride="carousel">
<div class="carousel-indicators absolute right-0 bottom-0 left-0 flex justify-center p-0 mb-2"> <div class="carousel-indicators absolute right-0 bottom-0 left-0 flex justify-center p-0 mb-2">
{{ $num := 0 }} {{ $num := 0 }}
{{ range .Params }} {{ range $images }}
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="{{ $num }}" <button type="button" data-bs-target="#{{ $id }}" data-bs-slide-to="{{ $num }}"
{{ if eq $num 0 }} class="active" aria-current="true" {{ end }} aria-label="Slide {{ $num }}"></button> {{ if eq $num 0 }} class="active" aria-current="true" {{ end }} aria-label="Slide {{ $num }}"></button>
{{ $num = add $num 1 }} {{ $num = add $num 1 }}
@ -14,9 +19,9 @@
<div class="carousel-inner relative w-full overflow-hidden"> <div class="carousel-inner relative w-full overflow-hidden">
{{ $num := 0 }} {{ $num := 0 }}
{{ range .Params }} {{ range $images }}
<div class="carousel-item {{ if eq $num 0 }} active {{ end }} relative float-left w-full ratio-16-9 single_hero_background" <div class="carousel-item {{ if eq $num 0 }} active {{ end }} relative float-left w-full ratio-{{ $aspect }} single_hero_background"
style="background-image:url({{ . }})" style="background-image:url({{ . }})"
></div> ></div>
{{ $num = add $num 1 }} {{ $num = add $num 1 }}
@ -25,13 +30,13 @@
</div> </div>
<button <button
class="carousel-control-prev absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline left-0" class="carousel-control-prev absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline left-0"
type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev"> type="button" data-bs-target="#{{ $id }}" data-bs-slide="prev">
<span class="carousel-control-prev-icon inline-block bg-no-repeat" aria-hidden="true"></span> <span class="carousel-control-prev-icon inline-block bg-no-repeat" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span> <span class="visually-hidden">Previous</span>
</button> </button>
<button <button
class="carousel-control-next absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline right-0" class="carousel-control-next absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline right-0"
type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next"> type="button" data-bs-target="#{{ $id }}" data-bs-slide="next">
<span class="carousel-control-next-icon inline-block bg-no-repeat" aria-hidden="true"></span> <span class="carousel-control-next-icon inline-block bg-no-repeat" aria-hidden="true"></span>
<span class="visually-hidden">Next</span> <span class="visually-hidden">Next</span>
</button> </button>

46
layouts/shortcodes/sliderOLD.html
View file

@ -1,46 +0,0 @@
{{ $images := .Page.Resources.Match (.Get "pattern") }}
{{ $id := .Get "id" }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<!-- Slider main container -->
<div class="swiper swiper{{ $id }}">
<!-- Additional required wrapper -->
<div class="swiper-wrapper items-center">
<!-- Slides -->
{{ range $images }}
<div class="swiper-slide swiper-slide{{ $id }}">
<center>
<img src="{{ (.Resize "x300").RelPermalink }}" class="my-0 rounded-md">
</center>
</div>
{{ end }}
</div>
<!-- pagination -->
<div class="swiper-pagination swiper-pagination{{ $id }}"></div>
<!-- navigation buttons -->
<div class="swiper-button-prev swiper-button-prev{{ $id }} hover:text-neutral"></div>
<div class="swiper-button-next swiper-button-next{{ $id }} hover:text-neutral"></div>
</div>
<script>
new Swiper('.swiper{{ $id }}', {
direction: 'horizontal',
centeredSlides: true,
loop: true,
spaceBetween: 10,
pagination: {
el: '.swiper-pagination{{ $id }}',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next{{ $id }}',
prevEl: '.swiper-button-prev{{ $id }}',
},
});
</script>