mirror of
https://github.com/nunocoracao/blowfish.git
synced 2025-01-22 22:45:42 -06:00
Merge pull request #467 from mirceanton/mirceanton/feature-shortcode-slider
✨ Carousel Shortcode Fixes and Improvements
This commit is contained in:
Nuno Coração
GitHub
commit
5465c855d4
5 changed files with 55 additions and 77 deletions
|
|
@ -6267,6 +6267,18 @@ body:has(#menu-controller:checked) {
|
|||
|
||||
/* 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 {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -471,3 +471,5 @@ body:has(#menu-controller:checked) {
|
|||
.grid-w100 { width: calc(100% - 5px); margin: 0px !important; }
|
||||
|
||||
.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 */
|
||||
|
|
@ -40,6 +40,7 @@ Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter.
|
|||
{{< /alert >}}
|
||||
|
||||
## 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.*
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
|
@ -56,8 +57,6 @@ Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter.
|
|||
|
||||
{{< article link="/docs/welcome/" >}}
|
||||
|
||||
|
||||
|
||||
## Badge
|
||||
|
||||
`badge` outputs a styled badge component which is useful for displaying metadata.
|
||||
|
|
@ -92,23 +91,31 @@ Call to action
|
|||
|
||||
## 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 -->
|
||||
| Parameter | Description |
|
||||
| --------- | --------------------------------------------------------- |
|
||||
| `images` | This shortcode receives how many image paths as you want. |
|
||||
| Parameter | Description |
|
||||
| ---------------- | ----------------------------------------------------------------------------------------------------------------- |
|
||||
| `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 -->
|
||||
|
||||
**Example:**
|
||||
**Example 1:** 16:9 aspect ratio and verbose list of images
|
||||
|
||||
```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
|
||||
|
||||
|
|
@ -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/)" >}}
|
||||
|
||||
|
||||
## Gallery
|
||||
|
||||
`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" />
|
||||
{{< /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.
|
||||
|
|
@ -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" >}}
|
||||
|
||||
|
||||
## 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.
|
||||
|
|
@ -293,6 +297,7 @@ When life gives you lemons, make lemonade.
|
|||
{{< /lead >}}
|
||||
|
||||
## 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.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
|
@ -305,6 +310,7 @@ When life gives you lemons, make lemonade.
|
|||
<!-- prettier-ignore-end -->
|
||||
|
||||
**Example #1:**
|
||||
|
||||
```md
|
||||
{{</* list limit=2 */>}}
|
||||
```
|
||||
|
|
@ -312,13 +318,13 @@ When life gives you lemons, make lemonade.
|
|||
{{< list limit=2 >}}
|
||||
|
||||
**Example #2:**
|
||||
|
||||
```md
|
||||
{{</* list limit=2 where="Type" value="sample" */>}}
|
||||
```
|
||||
|
||||
{{< list limit=2 where="Type" value="sample">}}
|
||||
|
||||
|
||||
## 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.
|
||||
|
|
@ -346,9 +352,11 @@ B-->C[Profit]
|
|||
You can see some additional Mermaid examples on the [diagrams and flowcharts samples]({{< ref "diagrams-flowcharts" >}}) page.
|
||||
|
||||
## 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.
|
||||
|
||||
**Example**
|
||||
|
||||
```md
|
||||
{{</* swatches "#64748b" "#3b82f6" "#06b6d4" */>}}
|
||||
```
|
||||
|
|
@ -356,7 +364,6 @@ You can see some additional Mermaid examples on the [diagrams and flowcharts sam
|
|||
**Output**
|
||||
{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
|
||||
|
||||
|
||||
## 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.
|
||||
|
|
@ -378,8 +385,6 @@ Blowfish implements a sub-set of TypeIt features using a `shortcode`. Write your
|
|||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
|
||||
|
||||
**Example 1:**
|
||||
|
||||
```md
|
||||
|
|
@ -412,7 +417,6 @@ Lorem ipsum dolor sit amet,
|
|||
consectetur adipiscing elit.
|
||||
{{< /typeit >}}
|
||||
|
||||
|
||||
**Example 3:**
|
||||
|
||||
```md
|
||||
|
|
@ -426,6 +430,7 @@ Lorem ipsum dolor sit amet,
|
|||
consectetur adipiscing elit.
|
||||
{{</* /typeit */>}}
|
||||
```
|
||||
|
||||
{{< typeit
|
||||
tag=h3
|
||||
speed=50
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
||||
{{ $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>
|
||||
|
||||
{{ $num = add $num 1 }}
|
||||
|
|
@ -14,9 +19,9 @@
|
|||
<div class="carousel-inner relative w-full overflow-hidden">
|
||||
|
||||
{{ $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({{ . }})"
|
||||
></div>
|
||||
{{ $num = add $num 1 }}
|
||||
|
|
@ -25,13 +30,13 @@
|
|||
</div>
|
||||
<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"
|
||||
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="visually-hidden">Previous</span>
|
||||
</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"
|
||||
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="visually-hidden">Next</span>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in a new issue