diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index ed6d7123..6a508a6a 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -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; } diff --git a/assets/css/main.css b/assets/css/main.css index c18c8861..600b64e0 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -470,4 +470,6 @@ body:has(#menu-controller:checked) { .grid-w95 { width: calc(95% - 5px); margin: 0px !important; } .grid-w100 { width: calc(100% - 5px); margin: 0px !important; } -.ratio-16-9 { padding-top: 56.25%; } /* 16:9 Aspect Ratio */ \ No newline at end of file +.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 */ \ No newline at end of file diff --git a/exampleSite/content/docs/shortcodes/index.md b/exampleSite/content/docs/shortcodes/index.md index 6f5fb790..8d89d391 100644 --- a/exampleSite/content/docs/shortcodes/index.md +++ b/exampleSite/content/docs/shortcodes/index.md @@ -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.* @@ -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`. + -| 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. | -**Example:** +**Example 1:** 16:9 aspect ratio and verbose list of images ```md -{{}} +{{}} ``` -{{< 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" >}} ## 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 {{< /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. @@ -305,6 +310,7 @@ When life gives you lemons, make lemonade. **Example #1:** + ```md {{}} ``` @@ -312,13 +318,13 @@ When life gives you lemons, make lemonade. {{< list limit=2 >}} **Example #2:** + ```md {{}} ``` {{< 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 {{}} ``` @@ -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 - - **Example 1:** ```md @@ -389,7 +394,7 @@ Lorem ipsum dolor sit amet ``` {{< typeit >}} -Lorem ipsum dolor sit amet +Lorem ipsum dolor sit amet {{< /typeit >}} **Example 2:** @@ -404,15 +409,14 @@ consectetur adipiscing elit. {{}} ``` -{{< typeit +{{< typeit tag=h1 lifeLike=true >}} -Lorem ipsum dolor sit amet, -consectetur adipiscing elit. +Lorem ipsum dolor sit amet, +consectetur adipiscing elit. {{< /typeit >}} - **Example 3:** ```md @@ -426,7 +430,8 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. {{}} ``` -{{< typeit + +{{< typeit tag=h3 speed=50 breakLines=false @@ -435,4 +440,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 >}} \ No newline at end of file +{{< /typeit >}} diff --git a/layouts/shortcodes/carousel.html b/layouts/shortcodes/carousel.html index 91b333b2..928ace96 100644 --- a/layouts/shortcodes/carousel.html +++ b/layouts/shortcodes/carousel.html @@ -1,10 +1,15 @@ -