dbrun/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2026-01-30 16:31:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

rewrote carousel

Browse Source
This commit is contained in:
Nuno Coração
2023-01-17 22:36:56 +00:00
parent 1790b2bddd
commit f4222b83a2
10 changed files with 3510 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
exampleSite/content/docs/shortcodes/index.md
View File

@@ -51,10 +51,10 @@ Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter.
**Example:**
```md
{{</* article link="/blowfish/docs/welcome/" */>}}
{{</* article link="/docs/welcome/" */>}}
```
{{< article link="/blowfish/docs/welcome/" >}}
{{< article link="/docs/welcome/" >}}
@@ -90,6 +90,26 @@ Call to action
Call to action
{{< /button >}}
## 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`.
<!-- prettier-ignore-start -->
| Parameter | Description |
| --------- | --------------------------------------------------------- |
| `images` | This shortcode receives how many image paths as you want. |
<!-- prettier-ignore-end -->
**Example:**
```md
{{</* carousel "gallery/03.jpg" "gallery/01.jpg" "gallery/02.jpg" */>}}
```
{{< carousel "gallery/03.jpg" "gallery/01.jpg" "gallery/02.jpg" "gallery/04.jpg" >}}
## Chart
`chart` uses the Chart.js library to embed charts into articles using simple structured data. It supports a number of [different chart styles](https://www.chartjs.org/docs/latest/samples/) and everything can be configured from within the shortcode. Simply provide the chart parameters between the shortcode tags and Chart.js will do the rest.
@@ -204,9 +224,9 @@ In order to add images to the gallery, use `img` tags for each image and add `cl
`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.
<!-- prettier-ignore-start -->
| Parameter | Description |
| --------- | ------------------------ |
| `repo` | [String] github repo in the format of `username/repo` |
| Parameter | Description |
| --------- | ----------------------------------------------------- |
| `repo` | [String] github repo in the format of `username/repo` |
<!-- prettier-ignore-end -->
**Example 1:**
@@ -415,32 +435,4 @@ consectetur adipiscing elit.
"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 >}}
## Swiper
`swiper` is used to showcase multiple images in a limited space, in an interactive and visually appealing way. It provides a standar swiper/slider/carousel feature, allowing the user to slide through multiple images while only taking up the vertical space of a single one.
<!-- prettier-ignore-start -->
| Parameter | Description |
| --------- | ------------------------ |
| `id` | [String] A unique identifier so that multiple sliders can work in the same page |
| `pattern` | [String] Go glob to match image names |
<!-- prettier-ignore-end -->
{{< alert "circle-info" >}}
It doesn't really matter the value set for the slider `id` as long as each slider in a given page has a unique identifier.
{{< /alert >}}
<br>
{{< alert "circle-info" >}}
A good resource for testing your go glob string is [this url](https://www.digitalocean.com/community/tools/glob?comments=true&glob=img%2F%7Biac%2Ck8s_all%7D.png&matches=false&tests=img%2Fiac.png&tests=img%2Fk8s_all.png)
{{< /alert >}}
**Example:**
```md
{{</* slider id="1" pattern="{abstract.jpg,featured.png} */>}}
```
{{< slider id="1" pattern="{abstract.jpg,featured.png}" >}}
{{< /typeit >}}