templates/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2025-04-21 04:41:53 +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;
} }

2
assets/css/main.css
View file

@ -471,3 +471,5 @@ body:has(#menu-controller:checked) {
.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 */

37
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
@ -412,7 +417,6 @@ Lorem ipsum dolor sit amet,
consectetur adipiscing elit. consectetur adipiscing elit.
{{< /typeit >}} {{< /typeit >}}
**Example 3:** **Example 3:**
```md ```md
@ -426,6 +430,7 @@ Lorem ipsum dolor sit amet,
consectetur adipiscing elit. consectetur adipiscing elit.
{{</* /typeit */>}} {{</* /typeit */>}}
``` ```
{{< typeit {{< typeit
tag=h3 tag=h3
speed=50 speed=50

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>