edit page

weru

10.44.2021 1207bebadda55fd894b663732efc4e6670d54ca2

edit page

 exampleSite/content/_index.md

@@ -17,7 +17,9 @@

We do a [Pull Request](https://github.com/onweru/compose/pulls) contributions workflow on **GitHub**. Also feel free to raise any issues or feature suggestions.

Note that the theme is built with simplicity in mind. This way, if a suggestion complicates the usability of the theme, it may be declined. New users are always welcome!
{{< tip "warning" >}}
Note that the theme is built with simplicity in mind. [This way](/), if a suggestion complicates the usability of the theme, it may be declined. New users are always welcome!
{{< /tip >}}

{{< button "docs/compose/" "Read the Docs" >}}{{< button "https://github.com/onweru/compose" "Download Theme" >}}
{{< /column >}}

 exampleSite/content/docs/clarity/blogging.md

@@ -41,7 +41,7 @@

#### Number of tags example

![Tags](https://github.com/chipzoller/hugo-clarity/blob/master/images/tags.png)
![Tags](../../../images/clarity/tags.png)

<!-- mark -->

@@ -51,4 +51,4 @@

#### Table of contents (TOC) example

![Article table of contents](https://github.com/chipzoller/hugo-clarity/blob/master/images/article-toc.png)
![Article table of contents](../../../images/clarity/article-toc.png)

 exampleSite/content/docs/clarity/features.md

@@ -22,4 +22,4 @@

    To put it all in context, here is a preview showing all functionality.

    ![code block functions](https://github.com/chipzoller/hugo-clarity/blob/master/images/syntax-block.gif)
    ![code block functions](../../../images/clarity/syntax-block.gif)

 exampleSite/content/docs/clarity/images.md

@@ -18,10 +18,10 @@
In this example, `figurePositionLabel` is set to "Figure" in `config.toml` and this is the first image in a given article.

```markdown
![Antrea Kubernetes nodes prepared](./images/image-figure.png)
![Antrea Kubernetes nodes prepared](./images/calrity/image-figure.png)
```

![Here is my alt text for this image.](https://github.com/chipzoller/hugo-clarity/blob/master/images/image-figure.png)
![Here is my alt text for this image.](../../../images/clarity/image-figure.png)

### Inline images

@@ -38,7 +38,7 @@
![some alt text:inline](someOtherImageUrl)
```

![Inline image example](https://github.com/chipzoller/hugo-clarity/blob/master/images/image-inline.png)
![Inline image example](../../../images/clarity/image-inline.png)

### Float images to the left


 exampleSite/content/docs/compose/install-theme.md

@@ -31,7 +31,9 @@

To pull in theme updates, run `hugo mod get -u ./...` from the theme folder. If unsure, [learn how to update hugo modules](https://gohugo.io/hugo-modules/use-modules/#update-modules)

> ⚠️ If you choose __Option 2__ or __Option 3__ below, ensure you edit [these lines in the config.toml file](https://github.com/onweru/compose/blob/b3e30e0816621223224897edc45eeeabd0d9cd16/exampleSite/config.toml#L4-L7) as advised on the comments
{{< tip >}}
If you choose __Option 2__ or __Option 3__ below, ensure you edit [these lines in the config.toml file](https://github.com/onweru/compose/blob/b3e30e0816621223224897edc45eeeabd0d9cd16/exampleSite/config.toml#L4-L7) as advised on the comments
{{< /tip >}}

### Option 2 (recommended)

@@ -63,7 +65,9 @@
hugo server --themesDir ../..
```

> Although, option 3 is great for quick testing, it is somewhat problematic when you want to update your theme. You would need to be careful not to overwrite your changes.
{{< tip >}}
Although, option 3 is great for quick testing, it is somewhat problematic when you want to update your theme. You would need to be careful not to overwrite your changes.
{{< /tip >}}

Once set, jump over to the `config.toml` file and start [configuring](#configuration) your site.


 exampleSite/content/docs/compose/shortcodes-example.md

@@ -54,38 +54,3 @@

{{< /column >}}
{{< /block >}}

### Youtube

```sh
{{</* youtube "q0hyYWKXF0Q" */>}}
<!-- generates 👇 -->
```

{{< youtube "q0hyYWKXF0Q" >}}

## Picture

```sh
{{</* picture "compose.svg" "compose-light.svg" "Compose Logo" */>}} 
<!-- generates 👇 -->
```

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

## Gallery

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

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

The 2nd parameter is optional. It is _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.

```sh
{{</* gallery "images/painting.jpg,images/scribble.jpg,images/painting.jpg" "Gallery Image 1::gallery image 2::gallery image 1 copy" */>}}
# generates 👇
```

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

> For legibility, you may include a space after the delimiters `,` & `::`

 exampleSite/content/docs/compose/shortcodes.md

@@ -38,17 +38,21 @@
  {{</* /column */>}}
```

### Video
### Youtube Video

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:

**Example:**
__Syntax__

```markdown
  {{</* youtube "xWF59rWSceA" */>}}
  {{</* youtube "25QyCxVkXwQ" */>}}
  <!-- Use the youtube video id -->
```

__Result__

{{< youtube "25QyCxVkXwQ" >}}

### Button

This adds a styled link (styled like a button). It takes two no-optional parameters:
@@ -61,7 +65,7 @@

**Example**

```
```markdown
  {{</* button "/" "doe nu mee" */>}}
```

@@ -71,12 +75,18 @@

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

```sh
__Syntax__

```markdown
...
{{</* picture "lightModeImage.png" "darkModeImage.png" "Image alt text" */>}}
...
```

__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. 
@@ -85,8 +95,54 @@

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.

```sh
__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__

{{< 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__

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

__Result__

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

__OR__

__Syntax__

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

__Result__

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

 exampleSite/content/docs/compose/use-forestry-cms.md

@@ -12,7 +12,9 @@

Obviously you  ought to have __a github account__. This is where your website source will live. Basically, forestry will read from github and write (commmit) to your github repo.

> Gitlab or bitbucket will work too. Just check their [implementation here](https://forestry.io/docs/git-sync/gitlab/). Happy fishing.
{{< tip "warning" >}}
Gitlab or bitbucket will work too. Just check their [implementation here](https://forestry.io/docs/git-sync/gitlab/). Happy fishing.
{{< /tip >}}

### Requirement 1 : A Forestry account

@@ -28,7 +30,9 @@

### Step 2 : Add your repository in Forestry

> The exampleSite already comes with prefilled default forestry settings. If you set up your site using [option 2](../getting-started/#option-2-recommended), look for a file `.forestry/settings.yml` and remove all `exampleSite/` strings from it.
{{< tip >}}
The exampleSite already comes with prefilled default forestry settings. If you set up your site using [option 2](../getting-started/#option-2-recommended), look for a file `.forestry/settings.yml` and remove all `exampleSite/` strings from it.
{{< /tip >}}

Go to your [forestry](https://bit.ly/forestry-account)  account and click on `import your site now`.