Fix Learn theme addition to git

themes/learn/exampleSite/content/shortcodes/_index.en.md

@@ -0,0 +1,16 @@
+---
+date: 2016-04-09T16:50:16+02:00
+title: Shortcodes
+pre: "<b>3. </b>"
+weight: 15
+---
+
+Hugo uses Markdown for its simple content format. However, there are a lot of things that Markdown doesn’t support well. You could use pure HTML to expand possibilities.
+
+But this happens to be a bad idea. Everyone uses Markdown because it's pure and simple to read even non-rendered. You should avoid HTML to keep it as simple as possible.
+
+To avoid this limitations, Hugo created [shortcodes](https://gohugo.io/extras/shortcodes/). A shortcode is a simple snippet inside a page.
+
+**Hugo-theme-learn** provides multiple shortcodes on top of existing ones.
+
+{{%children style="h2" description="true" %}}

themes/learn/exampleSite/content/shortcodes/_index.fr.md

@@ -0,0 +1,16 @@
+---
+date: 2016-04-09T16:50:16+02:00
+title: Shortcodes
+pre: "<b>3. </b>"
+weight: 15
+---
+
+Hugo utilise Markdown pour son format simple. Cependant, il y a beaucoup de chose que Markdown ne supporte pas bien. On pourrait utiliser du HTML pur pour améliorer les capacité du Markdown.
+
+Mais c'est probablement une mauvaise idée. Tout le monde utilise le Markdown parce que c'est pur et simple à lire même lorsqu'il est affiché en texte brut. Vous devez éviter le HTML autant que possible pour garder le contenu simple.
+
+Cependant, pour éviter les limitations, Hugo a créé les [shortcodes](https://gohugo.io/extras/shortcodes/). Un shortcode est un bout de code (*snippet*) dans une page.
+
+**Hugo-theme-learn** fournit de multiple shortcodes en plus de ceux existant.
+
+{{%children style="h2" description="true" %}}

themes/learn/exampleSite/content/shortcodes/attachments.en.files/small_file.txt

@@ -0,0 +1 @@
+This file was downloaded from Hugo Learn Theme.

themes/learn/exampleSite/content/shortcodes/attachments.en.md

@@ -0,0 +1,85 @@
+---
+title: Attachments
+description : "The Attachments shortcode displays a list of files attached to a page."
+---
+
+The Attachments shortcode displays a list of files attached to a page.
+
+{{% attachments /%}}
+
+## Usage
+
+The shortcurt lists files found in a **specific folder**.
+Currently, it support two implementations for pages
+
+1. If your page is a markdown file, attachements must be placed in a **folder** named like your page and ending with **.files**.
+
+    > * content
+    >   * _index.md
+    >   * page.files
+    >      * attachment.pdf
+    >   * page.md
+
+2. If your page is a **folder**, attachements must be placed in a nested **'files'** folder.
+
+    > * content
+    >   * _index.md
+    >   * page
+    >      * index.md
+    >      * files
+    >          * attachment.pdf
+
+Be aware that if you use a multilingual website, you will need to have as many folders as languages.
+
+That's all!
+
+### Parameters
+
+| Parameter | Default | Description |
+|:--|:--|:--|
+| title | "Attachments" | List's title  |
+| style | "" | Choose between "orange", "grey", "blue" and "green" for nice style |
+| pattern | ".*" | A regular expression, used to filter the attachments by file name. The **pattern** parameter value must be a [regular expression](https://en.wikipedia.org/wiki/Regular_expression). |
+
+For example:
+
+* To match a file suffix of '.jpg', use `.*\.jpg$` (not `*.jpg`).
+* To match file names ending in '.jpg' or '.png', use `.*\.(jpg|png)$`.
+
+### Examples
+
+#### List of attachments ending in pdf or mp4
+
+
+    {{%/*attachments title="Related files" pattern=".*\.(pdf|mp4)$"/*/%}}
+
+renders as
+
+{{%attachments title="Related files" pattern=".*\.(pdf|mp4)$"/%}}
+
+#### Colored styled box
+
+    {{%/*attachments style="orange" /*/%}}
+
+renders as
+
+{{% attachments style="orange" /%}}
+
+
+    {{%/*attachments style="grey" /*/%}}
+
+renders as 
+
+{{% attachments style="grey" /%}}
+
+    {{%/*attachments style="blue" /*/%}}
+
+renders as
+
+{{% attachments style="blue" /%}}
+    
+    {{%/*attachments style="green" /*/%}}
+
+renders as
+
+{{% attachments style="green" /%}}

themes/learn/exampleSite/content/shortcodes/attachments.fr.files/small_file.txt

@@ -0,0 +1 @@
+Ce fichier a été téléchargé à partir du Hugo Learn Theme.

themes/learn/exampleSite/content/shortcodes/attachments.fr.md

@@ -0,0 +1,85 @@
+---
+title: Attachments (Pièces jointes)
+description : "The Attachments shortcode displays a list of files attached to a page."
+---
+
+Le shortcode *Attachments* affiche une liste de pièces jointes d'une page.
+
+{{% attachments /%}}
+
+## Utilisation
+
+Le shortcode affiche la liste de fichiers trouvés dans un **dossier spécifique**
+A l'heure actuelle, il supporte deux implémentations
+
+1. Si votre page est un fichier Markdown, les pièces jointes doivent être placée dans un **dossier** nommé comme le nom de la page et suffixé par **.files**.
+
+    > * content
+    >   * _index.md
+    >   * page.files
+    >      * attachment.pdf
+    >   * page.md
+
+2. Si votre page est un **dossier**, les pièces jointes doivent être placées dans un dossier fils **'files'**.
+
+    > * content
+    >   * _index.md
+    >   * page
+    >      * index.md
+    >      * files
+    >          * attachment.pdf
+
+Attention, si votre site est multi-langue, vous devrez avec autant de dossier qu'il y a de langues.
+
+C'est tout !
+
+### Paramètres
+
+| Paramètre | Défaut | Description |
+|:--|:--|:--|
+| title | "Pièces jointes" | Titre de la liste  |
+| style | "" | Choisir entre "orange", "grey", "blue" et "green" pour un style plus sympa |
+| pattern | ".*" | Une expression régulière, utilisée pour filtrer les pièces jointes par leur nom de fichier. Le paramètre **pattern** doit être une [expression régulière](https://en.wikipedia.org/wiki/Regular_expression). |
+
+Par exemple:
+
+* Pour trouver les fichiers avec le suffixe '.jpg', utilisez `.*\.jpg$` (pas `*.jpg`).
+* Pour trouver les fichiers avec les suffixe '.jpg' ou '.png', utilisez `.*\.(jpg|png)$`.
+
+### Exemples
+
+#### Lister les pièces jointes de type pdf ou mp4
+
+
+    {{%/*attachments title="Fichiers associés" pattern=".*\.(pdf|mp4)$"/*/%}}
+
+s'affiche comme
+
+{{%attachments title="Fichiers associés" pattern=".*\.(pdf|mp4)$"/%}}
+
+#### Modifier le style
+
+    {{%/*attachments style="orange" /*/%}}
+
+s'affiche comme
+
+{{% attachments style="orange" /%}}
+
+
+    {{%/*attachments style="grey" /*/%}}
+
+s'affiche comme
+
+{{% attachments style="grey" /%}}
+
+    {{%/*attachments style="blue" /*/%}}
+
+s'affiche comme
+
+{{% attachments style="blue" /%}}
+    
+    {{%/*attachments style="green" /*/%}}
+
+s'affiche comme
+
+{{% attachments style="green" /%}}

themes/learn/exampleSite/content/shortcodes/button.en.md

@@ -0,0 +1,16 @@
+---
+title: Button
+description : "Nice buttons on your page."
+---
+
+A button is a just a clickable button with optional icon.
+
+```
+{{%/* button href="https://getgrav.org/" */%}}Get Grav{{%/* /button */%}}
+{{%/* button href="https://getgrav.org/" icon="fas fa-download" */%}}Get Grav with icon{{%/* /button */%}}
+{{%/* button href="https://getgrav.org/" icon="fas fa-download" icon-position="right" */%}}Get Grav with icon right{{%/* /button */%}}
+```
+
+{{% button href="https://getgrav.org/" %}}Get Grav{{% /button %}}
+{{% button href="https://getgrav.org/" icon="fas fa-download" %}}Get Grav with icon{{% /button %}}
+{{% button href="https://getgrav.org/" icon="fas fa-download" icon-position="right" %}}Get Grav with icon right{{% /button %}}

themes/learn/exampleSite/content/shortcodes/button.fr.md

@@ -0,0 +1,16 @@
+---
+title: Button (Bouton)
+description : "De beaux boutons sur votre page."
+---
+
+Le shortcode *button* est simplement un bouton cliquable avec une icône optionnelle.
+
+```
+{{%/* button href="https://getgrav.org/" */%}}Téléchargez Grav{{%/* /button */%}}
+{{%/* button href="https://getgrav.org/" icon="fas fa-download" */%}}Téléchargez Grav avec icône{{%/* /button */%}}
+{{%/* button href="https://getgrav.org/" icon="fas fa-download" icon-position="right" */%}}Téléchargez Grav avec icône à droite{{%/* /button */%}}
+```
+
+{{% button href="https://getgrav.org/" %}}Téléchargez Grav{{% /button %}}
+{{% button href="https://getgrav.org/" icon="fas fa-download" %}}Téléchargez Grav avec icône{{% /button %}}
+{{% button href="https://getgrav.org/" icon="fas fa-download" icon-position="right" %}}Téléchargez Grav avec icône à droite{{% /button %}}

themes/learn/exampleSite/content/shortcodes/children/_index.en.md

@@ -0,0 +1,45 @@
+---
+title : Children
+description : List the child pages of a page
+---
+
+Use the children shortcode to list the child pages of a page and the further descendants (children's children). By default, the shortcode displays links to the child pages.
+
+## Usage
+
+| Parameter | Default | Description |
+|:--|:--|:--|
+| page | _current_ | Specify the page name (section name) to display children for |
+| style | "li" | Choose the style used to display descendants. It could be any HTML tag name |
+| showhidden | "false" | When true, child pages hidden from the menu will be displayed |
+| description  | "false" | Allows you to include a short text under each page in the list. When no description exists for the page, children shortcode takes the first 70 words of your content. [Read more info about summaries on gohugo.io](https://gohugo.io/content/summaries/) |
+| depth | 1 | Enter a number to specify the depth of descendants to display. For example, if the value is 2, the shortcode will display 2 levels of child pages.  **Tips:** set 999 to get all descendants |
+| sort | none | Sort children by **Weight** - to sort on menu order, **Name** - to sort alphabetically on menu label, **Identifier** - to sort alphabetically on identifier set in frontmatter, and **URL** - to sort by URL |
+
+## Demo
+
+	{{%/* children  */%}}
+
+{{% children %}}
+
+	{{%/* children description="true" */%}}
+
+{{%children description="true" %}}
+
+	{{%/* children depth="3" showhidden="true" */%}}
+
+{{% children depth="3" showhidden="true" %}}
+
+	{{%/* children style="h2" depth="3" description="true" */%}}
+
+{{% children style="h2" depth="3" description="true" %}}
+
+	{{%/* children style="div" depth="999" */%}}
+
+{{% children style="div" depth="999" %}}
+
+
+
+
+
+

themes/learn/exampleSite/content/shortcodes/children/_index.fr.md

@@ -0,0 +1,45 @@
+---
+title : Children (Pages filles)
+description : Liste les pages filles de la page
+---
+
+Utilisez le shortcode *children* pour lister les pages filles de la page et tous ses déscendants (pages filles de pages filles). Par défaut, le shortcode affiche des liens vers les pages filles.
+
+## Utilisation
+
+| Paramètre | Défaut | Description |
+|:--|:--|:--|
+| page | _current_ | Spécifie le nom de la page (nom de la section) à afficher |
+| style | "li" | Choisi le style à utiliser pour afficher les descendants. Cela peut être n'importe quel balise HTML |
+| showhidden | "false" | Quand *true*, pages filles cachées dans le menu seront affichées quand même |
+| description  | "false" | Permet d'inclure le texte de la description de la page sous chaque entré de la liste.<br/>quand aucune description existe pour la page, le shortcode prend les 70 premiers mots du contenu. [plus d'infos sur gohugo.io](https://gohugo.io/content/summaries/)  |
+| depth | 1 | Nombre de descendants à afficher. Par exemple, si la valeur est 2, le shortcode va afficher 2 niveaux de pages filels. <br/> **Astuce:** Utilisez 999 pour avoir tous les descendants|
+| sort | <rien> | Tri les pages filles par<br><li><strong>Weight</strong> - Poids</li><li><strong>Name</strong> - Nom</li><li><strong>Identifier</strong> - Trier alphabétiquement par identifiant configuré dans le front matter</li><li><strong>URL</strong> - URL</li> |
+
+## Démo
+
+	{{%/* children  */%}}
+
+{{% children %}}
+
+	{{%/* children description="true"   */%}}
+
+{{%children description="true"   %}}
+
+	{{%/* children depth="3" showhidden="true" */%}}
+
+{{% children depth="3" showhidden="true" %}}
+
+	{{%/* children style="h2" depth="3" description="true" */%}}
+
+{{% children style="h2" depth="3" description="true" %}}
+
+	{{%/* children style="div" depth="999" */%}}
+
+{{% children style="div" depth="999" %}}
+
+
+
+
+
+

themes/learn/exampleSite/content/shortcodes/children/children-1/_index.en.md

@@ -0,0 +1,6 @@
++++
+title = "page 1"
+description = "This is a demo child page"
++++
+
+This is a demo child page

themes/learn/exampleSite/content/shortcodes/children/children-1/_index.fr.md

@@ -0,0 +1,6 @@
++++
+title = "page 1"
+description = "Ceci est une page test"
++++
+
+Ceci est une page de demo

themes/learn/exampleSite/content/shortcodes/children/children-1/children-1-1/_index.en.md

@@ -0,0 +1,6 @@
++++
+title = "page 1-1"
+description = "This is a demo child page"
++++
+
+This is a demo child page

themes/learn/exampleSite/content/shortcodes/children/children-1/children-1-1/_index.fr.md

@@ -0,0 +1,6 @@
++++
+title = "page 1-1"
+description = "Ceci est une page test"
++++
+
+Ceci est une page de demo

themes/learn/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-1/_index.en.md

@@ -0,0 +1,6 @@
++++
+title = "page 1-1-1"
+description = "This is a demo child page"
++++
+
+This is a demo child page

themes/learn/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-1/_index.fr.md

@@ -0,0 +1,6 @@
++++
+title = "page 1-1-1"
+description = "Ceci est une page test"
++++
+
+Ceci est une page de demo

themes/learn/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/_index.en.md

@@ -0,0 +1,6 @@
++++
+title = "page 1-1-1-1"
+description = "This is a demo child page"
++++
+
+This is a demo child page

themes/learn/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/_index.fr.md

@@ -0,0 +1,6 @@
++++
+title = "page 1-1-1-1"
+description = "Ceci est une page test"
++++
+
+Ceci est une page de demo

themes/learn/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/_index.en.md

@@ -0,0 +1,6 @@
++++
+title = "page 1-1-1-1-1"
+description = "This is a demo child page"
++++
+
+This is a demo child page

themes/learn/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/_index.fr.md

@@ -0,0 +1,6 @@
++++
+title = "page 1-1-1-1-1"
+description = "Ceci est une page test"
++++
+
+Ceci est une page de demo

themes/learn/exampleSite/content/shortcodes/children/children-2/_index.en.md

@@ -0,0 +1,11 @@
++++
+title = "page 2"
+description = ""
++++
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.	

themes/learn/exampleSite/content/shortcodes/children/children-2/_index.fr.md

@@ -0,0 +1,11 @@
++++
+title = "page 2"
+description = ""
++++
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.	

themes/learn/exampleSite/content/shortcodes/children/children-2/test3.en.md

@@ -0,0 +1,6 @@
++++
+title = "page test 3"
+description = "This is a page test"
++++
+
+This is a test 3 demo child page

themes/learn/exampleSite/content/shortcodes/children/children-2/test3.fr.md

@@ -0,0 +1,6 @@
++++
+title = "page test 3"
+description = "Ceci est une page test"
++++
+
+Ceci est une page de demo test 3

themes/learn/exampleSite/content/shortcodes/children/children-3/_index.en.md

@@ -0,0 +1,6 @@
++++
+title = "page 3"
+description = "This is a demo child page"
++++
+
+This is a demo child page, not displayed in the menu

themes/learn/exampleSite/content/shortcodes/children/children-3/_index.fr.md

@@ -0,0 +1,6 @@
++++
+title = "page 3"
+description = "Ceci est une page test"
++++
+
+Ceci est une page de demo

themes/learn/exampleSite/content/shortcodes/children/children-4/_index.en.md

@@ -0,0 +1,7 @@
++++
+title = "page 4"
+description = "This is a demo child page"
+hidden = true
++++
+
+This is a demo child page, not displayed in the menu

themes/learn/exampleSite/content/shortcodes/children/children-4/_index.fr.md

@@ -0,0 +1,7 @@
++++
+title = "page 4"
+description = "Ceci est une page test"
+hidden = true
++++
+
+Ceci est une page de demo

themes/learn/exampleSite/content/shortcodes/children/test.en.md

@@ -0,0 +1,6 @@
++++ 
+title = "page test" 
+description = "This is a page test"
++++
+
+This is a test demo child page

themes/learn/exampleSite/content/shortcodes/children/test.fr.md

@@ -0,0 +1,6 @@
++++ 
+title = "page test" 
+description = "Ceci est une page test"
++++
+
+Ceci est une page de demo

themes/learn/exampleSite/content/shortcodes/expand.en.md

@@ -0,0 +1,45 @@
+---
+title : Expand
+description : "Displays an expandable/collapsible section of text on your page"
+---
+
+The Expand shortcode displays an expandable/collapsible section of text on your page.
+Here is an example
+
+{{%expand%}}
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+{{%/expand%}}
+
+
+## Usage
+
+
+this shortcode takes exactly one optional parameter to define the text that appears next to the expand/collapse icon. (default is "Expand me...")
+
+	{{%/*expand "Is this learn theme rocks ?" */%}}Yes !.{{%/* /expand*/%}}
+
+{{%expand "Is this learn theme rocks ?" %}}Yes !{{% /expand%}}
+
+# Demo
+
+	{{%/*expand*/%}}
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    {{%/* /expand*/%}}
+
+
+{{%expand%}}Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.{{% /expand%}}

themes/learn/exampleSite/content/shortcodes/expand.fr.md

@@ -0,0 +1,45 @@
+---
+title : Expand
+description : "Affiche une section de texte qui se plie et se déplie"
+---
+
+Le shortcode *Expand* affiche une section de texte qui se plie et se déplie.
+Ci-dessous un exemple.
+
+{{%expand%}}
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+{{%/expand%}}
+
+
+## Utilisation
+
+
+Ce shortcode prends exactement un paramètre optionel pour définir le texte à côté de l'icone. (valeur par défaut est "Déroulez-moi...")
+
+	{{%/*expand "Est-ce que ce thème envoie du pâté ?" */%}}Oui !.{{%/* /expand*/%}}
+
+{{%expand "Est-ce que ce thème envoie du pâté ?" %}}Oui !{{% /expand%}}
+
+# Demo
+
+	{{%/*expand*/%}}
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    {{%/* /expand*/%}}
+
+
+{{%expand%}}Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.{{% /expand%}}

themes/learn/exampleSite/content/shortcodes/mermaid.en.md

@@ -0,0 +1,210 @@
+---
+title : "Mermaid"
+description : "Generation of diagram and flowchart from text in a similar manner as markdown"
+---
+
+[Mermaid](https://mermaidjs.github.io/) is a library helping you to generate diagram and flowcharts from text, in a similar manner as Markdown.
+
+Just insert your mermaid code in the `mermaid` shortcode and that's it.
+
+## Flowchart example
+
+    {{</*mermaid align="left"*/>}}
+    graph LR;
+        A[Hard edge] -->|Link text| B(Round edge)
+        B --> C{Decision}
+        C -->|One| D[Result one]
+        C -->|Two| E[Result two]
+    {{</* /mermaid */>}}
+
+renders as
+
+{{<mermaid align="left">}}
+graph LR;
+    A[Hard edge] -->|Link text| B(Round edge)
+    B --> C{Decision}
+    C -->|One| D[Result one]
+    C -->|Two| E[Result two]
+{{</mermaid>}}
+
+## Sequence example
+
+    {{</* mermaid */>}}
+    sequenceDiagram
+        participant Alice
+        participant Bob
+        Alice->>John: Hello John, how are you?
+        loop Healthcheck
+            John->John: Fight against hypochondria
+        end
+        Note right of John: Rational thoughts <br/>prevail...
+        John-->Alice: Great!
+        John->Bob: How about you?
+        Bob-->John: Jolly good!
+    {{</* /mermaid */>}}
+
+renders as
+
+{{<mermaid>}}
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts <br/>prevail...
+    John-->Alice: Great!
+    John->Bob: How about you?
+    Bob-->John: Jolly good!
+{{</mermaid>}}
+
+## GANTT Example
+
+    {{</* mermaid */>}}
+    gantt
+            dateFormat  YYYY-MM-DD
+            title Adding GANTT diagram functionality to mermaid
+            section A section
+            Completed task            :done,    des1, 2014-01-06,2014-01-08
+            Active task               :active,  des2, 2014-01-09, 3d
+            Future task               :         des3, after des2, 5d
+            Future task2               :         des4, after des3, 5d
+            section Critical tasks
+            Completed task in the critical line :crit, done, 2014-01-06,24h
+            Implement parser and jison          :crit, done, after des1, 2d
+            Create tests for parser             :crit, active, 3d
+            Future task in critical line        :crit, 5d
+            Create tests for renderer           :2d
+            Add to mermaid                      :1d
+    {{</* /mermaid */>}}
+
+
+renders as
+
+{{<mermaid>}}
+gantt
+        dateFormat  YYYY-MM-DD
+        title Adding GANTT diagram functionality to mermaid
+        section A section
+        Completed task            :done,    des1, 2014-01-06,2014-01-08
+        Active task               :active,  des2, 2014-01-09, 3d
+        Future task               :         des3, after des2, 5d
+        Future task2               :         des4, after des3, 5d
+        section Critical tasks
+        Completed task in the critical line :crit, done, 2014-01-06,24h
+        Implement parser and jison          :crit, done, after des1, 2d
+        Create tests for parser             :crit, active, 3d
+        Future task in critical line        :crit, 5d
+        Create tests for renderer           :2d
+        Add to mermaid                      :1d
+{{</mermaid>}}
+
+
+### Class example
+
+    {{</* mermaid */>}}
+    classDiagram
+      Class01 <|-- AveryLongClass : Cool
+      Class03 *-- Class04
+      Class05 o-- Class06
+      Class07 .. Class08
+      Class09 --> C2 : Where am i?
+      Class09 --* C3
+      Class09 --|> Class07
+      Class07 : equals()
+      Class07 : Object[] elementData
+      Class01 : size()
+      Class01 : int chimp
+      Class01 : int gorilla
+      Class08 <--> C2: Cool label
+    {{</* /mermaid */>}}
+
+renders as
+
+
+{{<mermaid>}}
+classDiagram
+  Class01 <|-- AveryLongClass : Cool
+  Class03 *-- Class04
+  Class05 o-- Class06
+  Class07 .. Class08
+  Class09 --> C2 : Where am i?
+  Class09 --* C3
+  Class09 --|> Class07
+  Class07 : equals()
+  Class07 : Object[] elementData
+  Class01 : size()
+  Class01 : int chimp
+  Class01 : int gorilla
+  Class08 <--> C2: Cool label
+{{</mermaid>}}
+
+
+### Git example
+
+    {{</* mermaid */>}}
+    gitGraph:
+    options
+    {
+      "nodeSpacing": 150,
+      "nodeRadius": 10
+    }
+    end
+      commit
+      branch newbranch
+      checkout newbranch
+      commit
+      commit
+      checkout master
+      commit
+      commit
+      merge newbranch
+    {{</* /mermaid*/>}}
+
+renders as
+
+{{<mermaid>}}
+gitGraph:
+options
+{
+  "nodeSpacing": 150,
+  "nodeRadius": 10
+}
+end
+  commit
+  branch newbranch
+  checkout newbranch
+  commit
+  commit
+  checkout master
+  commit
+  commit
+  merge newbranch
+{{</mermaid>}}
+
+### State Diagrams
+
+    {{</* mermaid */>}}
+    stateDiagram-v2
+      open: Open Door
+      closed: Closed Door
+      locked: Locked Door
+      open   --> closed: Close
+      closed --> locked: Lock
+      locked --> closed: Unlock
+      closed --> open: Open
+    {{</* /mermaid */>}}
+
+renders as
+
+{{<mermaid>}}
+stateDiagram-v2
+  open: Open Door
+  closed: Closed Door
+  locked: Locked Door
+  open   --> closed: Close
+  closed --> locked: Lock
+  locked --> closed: Unlock
+  closed --> open: Open
+{{</mermaid>}}

themes/learn/exampleSite/content/shortcodes/mermaid.fr.md

@@ -0,0 +1,205 @@
+---
+title : "Mermaid"
+description : "Génération de diagrammes à partir de texte, dans le même style que Markdown"
+---
+
+[Mermaid](https://mermaidjs.github.io/) est une bibliothèque Javascript qui permet de générer des diagrammes (séquence, état, gantt, etc.) à partir de texte, dans le même style que Markdown.
+
+Insérer votre code Mermaid dans un shortcode `mermaid` et c'est tout.
+
+## Flowchart example
+    {{</*mermaid align="left"*/>}}
+    graph LR;
+        A[Bords droits] -->|Lien texte| B(Bords arondis)
+        B --> C{Décision}
+        C -->|Un| D[Résultat un]
+        C -->|Deux| E[Résultat deux]
+    {{</* /mermaid */>}}
+
+renders as
+
+{{<mermaid align="left">}}
+graph LR;
+    A[Bords droits] -->|Lien texte| B(Bords arondis)
+    B --> C{Décision}
+    C -->|Un| D[Résultat un]
+    C -->|Deux| E[Résultat deux]
+{{< /mermaid >}}
+
+## Sequence example
+
+    {{</*mermaid*/>}}
+    sequenceDiagram
+        participant Alice
+        participant Bob
+        Alice->>John: Salut John, comment vas-tu?
+        loop Vérification
+            John->John: Se bat contre l'hyponcodrie.
+        end
+        Note right of John: Les pensées rationnelles<br/>prédominent...
+        John-->Alice: Super!
+        John->Bob: Et toi?
+        Bob-->John: Au top!
+    {{</* /mermaid */>}}
+
+renders as
+
+{{<mermaid>}}
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: Salut John, comment vas-tu?
+    loop Vérification
+        John->John: Se bat contre l'hyponcodrie.
+    end
+    Note right of John: Les pensées rationnelles<br/>prédominent...
+    John-->Alice: Super!
+    John->Bob: Et toi?
+    Bob-->John: Au top!
+{{< /mermaid >}}
+
+## GANTT Example
+
+    {{</*mermaid*/>}}
+    gantt
+            dateFormat  YYYY-MM-DD
+            title Ajout de la fonctionnalité de GANTT à Mermaid
+            section Une section
+            Tâche complétée            :done,    des1, 2014-01-06,2014-01-08
+            Tâche en cours             :active,  des2, 2014-01-09, 3d
+            Future tâche               :         des3, after des2, 5d
+            Future tâche 2             :         des4, after des3, 5d
+            section Tâches critiques
+            Tâche complétée dans le chemin critique :crit, done, 2014-01-06,24h
+            Implémenter le parser et jison          :crit, done, after des1, 2d
+            Créer des tests pour le parser          :crit, active, 3d
+            Future tâche dans le chemin critique    :crit, 5d
+            Créer des tests pour le renderer        :2d
+            Ajout à Mermaid                          :1d
+    {{</* /mermaid */>}}
+
+renders as
+
+{{<mermaid>}}
+gantt
+        dateFormat  YYYY-MM-DD
+        title Ajout de la fonctionnalité de GANTT à Mermaid
+        section Une section
+        Tâche complétée            :done,    des1, 2014-01-06,2014-01-08
+        Tâche en cours             :active,  des2, 2014-01-09, 3d
+        Future tâche               :         des3, after des2, 5d
+        Future tâche 2             :         des4, after des3, 5d
+        section Tâches critiques
+        Tâche complétée dans le chemin critique :crit, done, 2014-01-06,24h
+        Implémenter le parser et jison          :crit, done, after des1, 2d
+        Créer des tests pour le parser             :crit, active, 3d
+        Future tâche dans le chemin critique        :crit, 5d
+        Créer des tests pour le renderer           :2d
+        Ajout à Mermaid                      :1d
+{{</mermaid>}}
+
+### Class example
+
+    {{/* mermaid */}}
+    classDiagram
+      Class01 <|-- AveryLongClass : Cool
+      Class03 *-- Class04
+      Class05 o-- Class06
+      Class07 .. Class08
+      Class09 --> C2 : Where am i?
+      Class09 --* C3
+      Class09 --|> Class07
+      Class07 : equals()
+      Class07 : Object[] elementData
+      Class01 : size()
+      Class01 : int chimp
+      Class01 : int gorilla
+      Class08 <--> C2: Cool label
+    {{/* /mermaid */}}
+
+renders as
+
+{{< mermaid >}}
+classDiagram
+  Class01 <|-- AveryLongClass : Cool
+  Class03 *-- Class04
+  Class05 o-- Class06
+  Class07 .. Class08
+  Class09 --> C2 : Where am i?
+  Class09 --* C3
+  Class09 --|> Class07
+  Class07 : equals()
+  Class07 : Object[] elementData
+  Class01 : size()
+  Class01 : int chimp
+  Class01 : int gorilla
+  Class08 <--> C2: Cool label
+{{< /mermaid >}}
+
+### Git example
+
+    {{</* mermaid */>}}
+    gitGraph:
+    options
+    {
+      "nodeSpacing": 150,
+      "nodeRadius": 10
+    }
+    end
+      commit
+      branch newbranch
+      checkout newbranch
+      commit
+      commit
+      checkout master
+      commit
+      commit
+      merge newbranch
+    {{</* /mermaid */>}}
+
+renders as
+
+{{< mermaid >}}
+gitGraph:
+options
+{
+  "nodeSpacing": 150,
+  "nodeRadius": 10
+}
+end
+  commit
+  branch newbranch
+  checkout newbranch
+  commit
+  commit
+  checkout master
+  commit
+  commit
+  merge newbranch
+{{< /mermaid >}}
+
+### State Diagrams
+
+    {{</* mermaid */>}}
+    stateDiagram-v2
+      ouvert: Ouvert
+      clos: Clos
+      fermé: Fermé
+      ouvert --> clos
+      clos   --> fermé: Lock
+      fermé --> clos: Unlock
+      clos --> ouvert: Open
+    {{</* /mermaid */>}}
+
+renders as
+
+{{<mermaid>}}
+stateDiagram-v2
+  ouvert: Ouvert
+  clos: Clos
+  fermé: Fermé
+  ouvert --> clos
+  clos   --> fermé: Lock
+  fermé --> clos: Unlock
+  clos --> ouvert: Open
+{{</mermaid>}}

themes/learn/exampleSite/content/shortcodes/notice.en.md

@@ -0,0 +1,62 @@
+---
+title: Notice
+description : "Disclaimers to help you structure your page"
+---
+
+The notice shortcode shows 4 types of disclaimers to help you structure your page.
+
+### Note
+
+```
+{{%/* notice note */%}}
+A notice disclaimer
+{{%/* /notice */%}}
+```
+
+renders as
+
+{{% notice note %}}
+A notice disclaimer
+{{% /notice %}}
+
+### Info
+
+```
+{{%/* notice info */%}}
+An information disclaimer
+{{%/* /notice */%}}
+```
+
+renders as
+
+{{% notice info %}}
+An information disclaimer
+{{% /notice %}}
+
+### Tip
+
+```
+{{%/* notice tip */%}}
+A tip disclaimer
+{{%/* /notice */%}}
+```
+
+renders as
+
+{{% notice tip %}}
+A tip disclaimer
+{{% /notice %}}
+
+### Warning
+
+```
+{{%/* notice warning */%}}
+A warning disclaimer
+{{%/* /notice */%}}
+```
+
+renders as
+
+{{% notice warning %}}
+A warning disclaimer
+{{% /notice %}}

themes/learn/exampleSite/content/shortcodes/notice.fr.md

@@ -0,0 +1,62 @@
+---
+title: Notice
+description : "Message pour vous aider à structurer votre contenu"
+---
+
+Le shortcode *Notice* permet d'afficher 4 types de message pour vous aider à structurer votre contenu.
+
+### Note
+
+```
+{{%/* notice note */%}}
+Une notice de type *note*
+{{%/* /notice */%}}
+```
+
+s'affiche comme
+
+{{% notice note %}}
+Une notice de type *note*
+{{% /notice %}}
+
+### Info
+
+```
+{{%/* notice info */%}}
+Une notice de type *info*
+{{%/* /notice */%}}
+```
+
+s'affiche comme
+
+{{% notice info %}}
+Une notice de type *info*
+{{% /notice %}}
+
+### Tip
+
+```
+{{%/* notice tip */%}}
+Une notice de type *tip*
+{{%/* /notice */%}}
+```
+
+s'affiche comme
+
+{{% notice tip %}}
+Une notice de type *tip*
+{{% /notice %}}
+
+### Warning
+
+```
+{{%/* notice warning */%}}
+Une notice de type *warning*
+{{%/* /notice */%}}
+```
+
+s'affiche comme
+
+{{% notice warning %}}
+Une notice de type *warning*
+{{% /notice %}}

themes/learn/exampleSite/content/shortcodes/siteparam.en.md

@@ -0,0 +1,23 @@
+---
+title: Site param
+description : "Get value of site params variables in your page."
+---
+
+`siteparam` shortcode is used to help you print values of site params. 
+
+For instance, in this current site, the `editURL` variable is used in `config.toml`
+
+```toml
+[params]
+  editURL = "https://github.com/matcornic/hugo-theme-learn/edit/master/exampleSite/content/"
+```
+
+Use the `siteparam` shortcode to display its value.
+
+```
+`editURL` Value : {{%/* siteparam "editURL" */%}}
+```
+
+is displayed as
+
+`editURL` Value : {{% siteparam "editURL" %}}

themes/learn/exampleSite/content/shortcodes/siteparam.fr.md

@@ -0,0 +1,23 @@
+---
+title: Site param
+description : "Afficher la valeur d'un paramètre global du site dans votre page"
+---
+
+Les shortcode `siteparam` est utilisé pour vous aider à afficher des valeurs provenant des paramètres globaux du site. 
+
+Par exemple, dans ce site, le paramètre `editURL`  est utilisé dans le fichier `config.toml`
+
+```toml
+[params]
+  editURL = "https://github.com/matcornic/hugo-theme-learn/edit/master/exampleSite/content/"
+```
+
+Utilisez le shortcode `siteparam` pour affichier sa valeur.
+
+```
+Valeur de `editURL` : {{%/* siteparam "editURL" */%}}
+```
+
+s'affiche comme
+
+Valeur de `editURL` : {{% siteparam "editURL" %}}

themes/learn/exampleSite/content/shortcodes/tabs.en.md

@@ -0,0 +1,119 @@
+---
+title: Tabbed views
+description : "Synchronize selection of content in different tabbed views"
+---
+
+Choose which content to see across the page. Very handy for providing code
+snippets for multiple languages or providing configuration in different formats.
+
+## Code example
+
+	{{</* tabs */>}}
+	{{%/* tab name="python" */%}}
+	```python
+	print("Hello World!")
+	```
+	{{%/* /tab */%}}
+	{{%/* tab name="R" */%}}
+	```R
+	> print("Hello World!")
+	```
+	{{%/* /tab */%}}
+	{{%/* tab name="Bash" */%}}
+	```Bash
+	echo "Hello World!"
+	```
+	{{%/* /tab */%}}
+	{{</* /tabs */>}}
+
+Renders as:
+
+{{< tabs >}}
+{{% tab name="python" %}}
+```python
+print("Hello World!")
+```
+{{% /tab %}}
+{{% tab name="R" %}}
+```R
+> print("Hello World!")
+```
+{{% /tab %}}
+{{% tab name="Bash" %}}
+```Bash
+echo "Hello World!"
+```
+{{% /tab %}}
+{{< /tabs >}}
+
+Tab views with the same tabs that belong to the same group sychronize their selection:
+
+{{< tabs >}}
+{{% tab name="python" %}}
+```python
+print("Hello World!")
+```
+{{% /tab %}}
+{{% tab name="R" %}}
+```R
+> print("Hello World!")
+```
+{{% /tab %}}
+{{% tab name="Bash" %}}
+```Bash
+echo "Hello World!"
+```
+{{% /tab %}}
+{{< /tabs >}}
+
+## Config example
+
+	{{</* tabs groupId="config" */>}}
+	{{%/* tab name="json" */%}}
+	```json
+	{
+	  "Hello": "World"
+	}
+	```
+	{{%/* /tab */%}}
+	{{%/* tab name="XML" */%}}
+	```xml
+	<Hello>World</Hello>
+	```
+	{{%/* /tab */%}}
+	{{%/* tab name="properties" */%}}
+	```properties
+	Hello = World
+	```
+	{{%/* /tab */%}}
+	{{</* /tabs */>}}
+
+Renders as:
+
+{{< tabs groupId="config" >}}
+{{% tab name="json" %}}
+```json
+{
+  "Hello": "World"
+}
+```
+{{% /tab %}}
+{{% tab name="XML" %}}
+```xml
+<Hello>World</Hello>
+```
+{{% /tab %}}
+{{% tab name="properties" %}}
+```properties
+Hello = World
+```
+{{% /tab %}}
+{{< /tabs >}}
+
+{{% notice warning %}}
+When using tab views with different content sets, make sure to use a common `groupId` for equal sets but distinct
+`groupId` for different sets. The `groupId` defaults to `'default'`.  
+**Take this into account across the whole site!**  
+The tab selection is restored automatically based on the `groupId` and if it cannot find a tab item because it came
+ from the `'default'` group on a different page then all tabs will be empty at first.
+{{% /notice %}}