Update from Forestry.io weru updated exampleSite/content/docs/compose/short...

weru

26.42.2021 f208332beccffc32876ee121f6349b213779e848

Update from Forestry.io
weru updated exampleSite/content/docs/compose/shortcodes.md

 exampleSite/content/docs/compose/shortcodes.md

@@ -1,9 +1,9 @@
+++
description = "Use hugo shortcodes to quickly compose your documentation pages."
title = "Shortcodes"
weight = 5
description = "Use hugo shortcodes to quickly compose your documentation pages."
+++

+++
Instead of writing all your site pages from scratch, Hugo lets you define and use [shortcodes](https://gohugo.io/content-management/shortcodes/).

Why shortcodes? While markdown is sufficient to produce simple pages, it's insufficient where complex page structures are needed. Thusly, whenever we need special styling, shortcodes compliment the shortcomings of markdown.
@@ -14,11 +14,12 @@

I've setup the following shortcodes:

### Block 
### Block

Takes positional modifiers

**Example**

```markdown
...
  {{</* block "modifiers" */>}}
@@ -32,6 +33,7 @@
It takes positional parameters

**Example**

```markdown
  {{</* column "mt-2 mb-2" */>}}
  <!-- applied margin top and margin bottom modifiers -->
@@ -42,19 +44,26 @@

This allows you to embed a youtube video in you content. You would achieve that using a positional parameter (needs no name )parameter, like so:

__Syntax__
**Syntax**

```markdown
  {{</* youtube "25QyCxVkXwQ" */>}}
  <!-- Use the youtube video id -->
  <!-- or use full url -->
  {{</* youtube "https://www.youtube.com/watch?v=MmG2ah5Df4g" */>}}
```

__Result__
**Result**

{{< youtube "25QyCxVkXwQ" >}}

**OR**

**Syntax**

      <!-- or use full url -->
      {{</* youtube "https://www.youtube.com/watch?v=MmG2ah5Df4g" */>}}

**Result**

{{< youtube "https://www.youtube.com/watch?v=MmG2ah5Df4g" >}}

### Button
@@ -62,7 +71,7 @@
This adds a styled link (styled like a button). It takes two no-optional parameters:

| PARAMETER | PURPOSE | OPTIONAL |
| :---  | :--- | :--- |
| :--- | :--- | :--- |
| label | button text | no |
| url | button link | no |
| modifier | styling classes | yes |
@@ -77,9 +86,9 @@

You want to use darkmode images when darkmode is enabled on a device and a regular image on lightmode? It takes 3 positional parameter

Store these images in the `static/images` directory. 
Store these images in the `static/images` directory.

__Syntax__
**Syntax**

```markdown
...
@@ -87,41 +96,42 @@
...
```

__Result__
**Result**

{{< picture "compose.svg" "compose-light.svg" "Compose Logo" >}}

### Gallery

Include inline galleries within your articles. These galleries can contain `N` number of images. It takes 2 positional parameters. 
Include inline galleries within your articles. These galleries can contain `N` number of images. It takes 2 positional parameters.

The 1st parameter is required. It's a _comma-separated list_ (`,`) of your images' paths.

The 2nd parameter is optional. It's a _double-collon-separated list_ (`::`) of your images' alt/description/captions text. It's always a good SEO practice to include alt text for your images.

__Syntax__
**Syntax**

```markdown
...
{{</* gallery "images/painting.jpg,images/scribble.jpg,images/painting.jpg" "Gallery Image 1::gallery image 2::gallery image 1 copy" */>}}
...
```
{{< tip >}}
> For legibility, you may include a space after the delimiters `,` & `::`
{{< /tip  >}}

__Result__
{{< tip >}}

> For legibility, you may include a space after the delimiters `,` & `::`
> {{< /tip  >}}

**Result**

{{< gallery "images/painting.jpg,images/scribble.jpg,images/painting.jpg" "Gallery Image 1::gallery image 2::gallery image 1 copy" >}}


### Tip

Use this short if you want to publish informational tooltips that look like:

This tooltips may take either of the following forms:

__Syntax__
**Syntax**

```markdown
{{</* tip */>}}
@@ -129,15 +139,15 @@
{{</* /tip */>}}
```

__Result__
**Result**

{{< tip >}}
Something of __interest__ you want to highlight
Something of **interest** you want to highlight
{{< /tip >}}

__OR__
**OR**

__Syntax__
**Syntax**

```markdown
{{</* tip "warning" */>}}
@@ -145,8 +155,8 @@
{{</* /tip */>}}
```

__Result__
**Result**

{{< tip "warning" >}}
Something of __interest__ the user should be careful about
{{< /tip >}}
Something of **interest** the user should be careful about
{{< /tip >}}