added placeholder files for all missing translations

exampleSite/content/_index.it.md

@@ -0,0 +1,29 @@
+---
+title: "Welcome to Blowfish! :tada:"
+description: "This page was built using the Blowfish theme for Hugo."
+---
+
+
+<div class="flex px-4 py-2 mb-8 text-base rounded-md bg-primary-100 dark:bg-primary-900">
+  <span class="flex items-center ltr:pr-3 rtl:pl-3 text-primary-400">
+    {{< icon "triangle-exclamation" >}}
+  </span>
+  <span class="flex items-center justify-between grow dark:text-neutral-300">
+    <span class="prose dark:prose-invert">This is a demo of the <code id="layout">background</code> layout.</span>
+    <button
+      id="switch-layout-button"
+      class="px-4 !text-neutral !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
+    >
+      Switch layout &orarr;
+    </button>
+  </span>
+</div>
+
+
+```node
+npx blowfish-tools
+```  
+
+{{< youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" >}}
+
+

exampleSite/content/authors/_index.it.md

@@ -0,0 +1,5 @@
+---
+title: "Authors Taxonomy Listing Example"
+---
+
+A quick example of how to start using author taxonomies in your articles.

exampleSite/content/authors/nunocoracao/_index.it.md

@@ -0,0 +1,5 @@
+---
+title: "Nuno Coração"
+---
+
+Nuno's awesome dummy bio.

exampleSite/content/authors/nunocoracao/_index.ja.md

@@ -0,0 +1,5 @@
+---
+title: "Nuno Coração"
+---
+
+Nuno's awesome dummy bio.

exampleSite/content/authors/nunocoracao/_index.zh-cn.md

@@ -0,0 +1,5 @@
+---
+title: "Nuno Coração"
+---
+
+Nuno's awesome dummy bio.

exampleSite/content/authors/secondauthor/_index.it.md

@@ -0,0 +1,5 @@
+---
+title: "Dummy Second Author"
+---
+
+Dummy Second Author's awesome dummy bio.

exampleSite/content/authors/secondauthor/_index.ja.md

@@ -0,0 +1,5 @@
+---
+title: "Dummy Second Author"
+---
+
+Dummy Second Author's awesome dummy bio.

exampleSite/content/authors/secondauthor/_index.zh-cn.md

@@ -0,0 +1,5 @@
+---
+title: "Dummy Second Author"
+---
+
+Dummy Second Author's awesome dummy bio.

exampleSite/content/docs/_index.it.md

@@ -0,0 +1,17 @@
+---
+title: "Documentation"
+description: "Learn how to use Blowfish and its features."
+
+cascade:
+  showDate: false
+  showAuthor: false
+  invertPagination: true
+---
+
+{{< lead >}}
+Simple, yet powerful. Learn how to use Blowfish and its features.
+{{< /lead >}}
+
+This section contains everything you need to know about Blowfish. If you're new, check out the [Installation]({{< ref "docs/installation" >}}) guide to begin or visit the [Samples]({{< ref "samples" >}}) section to see what Blowfish can do.
+
+---

exampleSite/content/docs/advanced-customisation/index.it.md

@@ -0,0 +1,235 @@
+---
+title: "Advanced Customisation"
+date: 2020-08-08
+draft: false
+description: "Learn how to build Blowfish manually."
+slug: "advanced-customisation"
+tags: ["advanced", "css", "docs"]
+series: ["Documentation"]
+series_order: 13
+---
+
+There are many ways you can make advanced changes to Blowfish. Read below to learn more about what can be customised and the best way of achieving your desired result.
+
+If you need further advice, post your questions on [GitHub Discussions](https://github.com/nunocoracao/blowfish/discussions).
+
+## Hugo project structure
+
+Before leaping into it, first a quick note about [Hugo project structure](https://gohugo.io/getting-started/directory-structure/) and best practices for managing your content and theme customisations.
+
+{{< alert >}}
+**In summary:** Never directly edit the theme files. Only make customisations in your Hugo project's sub-directories, not in the themes directory itself.
+{{< /alert >}}
+
+Blowfish is built to take advantage of all the standard Hugo practices. It is designed to allow all aspects of the theme to be customised and overridden without changing any of the core theme files. This allows for a seamless upgrade experience while giving you total control over the look and feel of your website.
+
+In order to achieve this, you should never manually adjust any of the theme files directly. Whether you install using Hugo modules, as a git submodule or manually include the theme in your `themes/` directory, you should always leave these files intact.
+
+The correct way to adjust any theme behaviour is by overriding files using Hugo's powerful [file lookup order](https://gohugo.io/templates/lookup-order/). In summary, the lookup order ensures any files you include in your project directory will automatically take precedence over any theme files.
+
+For example, if you wanted to override the main article template in Blowfish, you can simply create your own `layouts/_default/single.html` file and place it in the root of your project. This file will then override the `single.html` from the theme without ever changing the theme itself. This works for any theme files - HTML templates, partials, shortcodes, config files, data, assets, etc.
+
+As long as you follow this simple practice, you will always be able to update the theme (or test different theme versions) without worrying that you will lose any of your custom changes.
+
+## Change image optimization settings
+
+Hugo has various builtin methods to resize, crop and optimize images.
+
+As an example - in `layouts/partials/article-link/card.html`, you have the following code:
+
+```go
+{{ with .Resize "600x" }}
+<div class="w-full thumbnail_card nozoom" style="background-image:url({{ .RelPermalink }});"></div>
+{{ end }}
+```
+
+The default behavior of Hugo here is to resize the image to 600px keeping the ratio.
+
+It is worth noting here that default image configurations such as [anchor point](https://gohugo.io/content-management/image-processing/#anchor) can also be set in your [site configuration](https://gohugo.io/content-management/image-processing/#processing-options) as well as in the template itself.
+
+See the [Hugo docs on image processing](https://gohugo.io/content-management/image-processing/#image-processing-methods) for more info.
+
+## Colour schemes
+
+Blowfish ships with a number of colour schemes out of the box. To change the basic colour scheme, you can set the `colorScheme` theme parameter. Refer to the [Getting Started]({{< ref "getting-started#colour-schemes" >}}) section to learn more about the built-in schemes.
+
+In addition to the default schemes, you can also create your own and re-style the entire website to your liking. Schemes are created by by placing a `<scheme-name>.css` file in the `assets/css/schemes/` folder. Once the file is created, simply refer to it by name in the theme configuration.
+
+{{< alert "github">}}
+**Note:** generating these files manually can be hard, I've built a `nodejs` terminal tool to help with that, [Fugu](https://github.com/nunocoracao/fugu). In a nutshell, you pass the main three `hex` values of your color palette and the program will output a css file that can be imported directly into Blowfish.
+{{< /alert >}}
+
+
+Blowfish defines a three-colour palette that is used throughout the theme. The three colours are defined as `neutral`, `primary` and `secondary` variants, each containing ten shades of colour.
+
+Due to the way Tailwind CSS 3.0 calculates colour values with opacity, the colours specified in the scheme need to [conform to a particular format](https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo) by providing the red, green and blue colour values.
+
+```css
+:root {
+  --color-primary-500: 139, 92, 246;
+}
+```
+
+This example defines a CSS variable for the `primary-500` colour with a red value of `139`, green value of `92` and blue value of `246`.
+
+Use one of the existing theme stylesheets as a template. You are free to define your own colours, but for some inspiration, check out the official [Tailwind colour palette reference](https://tailwindcss.com/docs/customizing-colors#color-palette-reference).
+
+## Overriding the stylesheet
+
+Sometimes you need to add a custom style to style your own HTML elements. Blowfish provides for this scenario by allowing you to override the default styles in your own CSS stylesheet. Simply create a `custom.css` file in your project's `assets/css/` folder.
+
+The `custom.css` file will be minified by Hugo and loaded automatically after all the other theme styles which means anything in your custom file will take precedence over the defaults.
+
+### Using additional fonts
+
+Blowfish allows you to easily change the font for your site. After creating a `custom.css` file in your project's `assets/css/` folder, place you font file inside a `fonts` folder within the `static` root folder.
+
+```shell
+.
+├── assets
+│   └── css
+│       └── custom.css
+...
+└─── static
+    └── fonts
+        └─── font.ttf
+
+```
+
+This makes the font available to the website. Now, the font can just import it in your `custom.css` and replaced wherever you see fit. The example below shows what replacing the font for the entire `html` would look like.
+
+```css
+@font-face {
+    font-family: font;
+    src: url('/fonts/font.ttf');
+}
+
+html {
+    font-family: font;
+}
+```
+
+### Adjusting the font size
+
+Changing the font size of your website is one example of overriding the default stylesheet. Blowfish makes this simple as it uses scaled font sizes throughout the theme which are derived from the base HTML font size. By default, Tailwind sets the default size to `12pt`, but it can be changed to whatever value you prefer.
+
+Create a `custom.css` file using the [instructions above]({{< ref "#overriding-the-stylesheet" >}}) and add the following CSS declaration:
+
+```css
+/* Increase the default font size */
+html {
+  font-size: 13pt;
+}
+```
+
+Simply by changing this one value, all the font sizes on your website will be adjusted to match this new size. Therefore, to increase the overall font sizes used, make the value greater than `12pt`. Similarly, to decrease the font sizes, make the value less than `12pt`.
+
+## Building the theme CSS from source
+
+If you'd like to make a major change, you can take advantage of Tailwind CSS's JIT compiler and rebuild the entire theme CSS from scratch. This is useful if you want to adjust the Tailwind configuration or add extra Tailwind classes to the main stylesheet.
+
+{{< alert >}}
+**Note:** Building the theme manually is intended for advanced users.
+{{< /alert >}}
+
+Let's step through how building the Tailwind CSS works.
+
+### Tailwind configuration
+
+In order to generate a CSS file that only contains the Tailwind classes that are actually being used the JIT compiler needs to scan through all the HTML templates and Markdown content files to check which styles are present in the markup. The compiler does this by looking at the `tailwind.config.js` file which is included in the root of the theme directory:
+
+```js
+// themes/blowfish/tailwind.config.js
+
+module.exports = {
+  content: [
+    "./layouts/**/*.html",
+    "./content/**/*.{html,md}",
+    "./themes/blowfish/layouts/**/*.html",
+    "./themes/blowfish/content/**/*.{html,md}",
+  ],
+
+  // and more...
+};
+```
+
+This default configuration has been included with these content paths so that you can easily generate your own CSS file without needing to modify it, provided you follow a particular project structure. Namely, **you have to include Blowfish in your project as a subdirectory at `themes/blowfish/`**. This means you cannot easily use Hugo Modules to install the theme and you must go down either the git submodule (recommended) or manual install routes. The [Installation docs]({{< ref "installation" >}}) explain how to install the theme using either of these methods.
+
+### Project structure
+
+In order to take advantage of the default configuration, your project should look something like this...
+
+```shell
+.
+├── assets
+│   └── css
+│       └── compiled
+│           └── main.css  # this is the file we will generate
+├── config  # site config
+│   └── _default
+├── content  # site content
+│   ├── _index.md
+│   ├── projects
+│   │   └── _index.md
+│   └── blog
+│       └── _index.md
+├── layouts  # custom layouts for your site
+│   ├── partials
+│   │   └── extend-article-link/simple.html
+│   ├── projects
+│   │   └── list.html
+│   └── shortcodes
+│       └── disclaimer.html
+└── themes
+    └── blowfish  # git submodule or manual theme install
+```
+
+This example structure adds a new `projects` content type with its own custom layout along with a custom shortcode and extended partial. Provided the project follows this structure, all that's required is to recompile the `main.css` file.
+
+### Install dependencies
+
+In order for this to work you'll need to change into the `themes/blowfish/` directory and install the project dependencies. You'll need [npm](https://docs.npmjs.com/cli/v7/configuring-npm/install) on your local machine for this step.
+
+```shell
+cd themes/blowfish
+npm install
+```
+
+### Run the Tailwind compiler
+
+With the dependencies installed all that's left is to use [Tailwind CLI](https://v2.tailwindcss.com/docs/installation#using-tailwind-cli) to invoke the JIT compiler. Navigate back to the root of your Hugo project and issue the following command:
+
+```shell
+cd ../..
+./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit
+```
+
+It's a bit of an ugly command due to the paths involved but essentially you're calling Tailwind CLI and passing it the location of the Tailwind config file (the one we looked at above), where to find the theme's `main.css` file and then where you want the compiled CSS file to be placed (it's going into the `assets/css/compiled/` folder of your Hugo project).
+
+The config file will automatically inspect all the content and layouts in your project as well as all those in the theme and build a new CSS file that contains all the CSS required for your website. Due to the way Hugo handles file hierarchy, this file in your project will now automatically override the one that comes with the theme.
+
+Each time you make a change to your layouts and need new Tailwind CSS styles, you can simply re-run the command and generate the new CSS file. You can also add `-w` to the end of the command to run the JIT compiler in watch mode.
+
+### Make a build script
+
+To fully complete this solution, you can simplify this whole process by adding aliases for these commands, or do what I do and add a `package.json` to the root of your project which contains the necessary scripts...
+
+```js
+// package.json
+
+{
+  "name": "my-website",
+  "version": "1.0.0",
+  "description": "",
+  "scripts": {
+    "server": "hugo server -b http://localhost -p 8000",
+    "dev": "NODE_ENV=development ./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit -w",
+    "build": "NODE_ENV=production ./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit"
+  },
+  // and more...
+}
+```
+
+Now when you want to work on designing your site, you can invoke `npm run dev` and the compiler will run in watch mode. When you're ready to deploy, run `npm run build` and you'll get a clean Tailwind CSS build.
+
+🙋‍♀️ If you need help, feel free to ask a question on [GitHub Discussions](https://github.com/nunocoracao/blowfish/discussions).

exampleSite/content/docs/advanced-customisation/index.ja.md

@@ -0,0 +1,235 @@
+---
+title: "Advanced Customisation"
+date: 2020-08-08
+draft: false
+description: "Learn how to build Blowfish manually."
+slug: "advanced-customisation"
+tags: ["advanced", "css", "docs"]
+series: ["Documentation"]
+series_order: 13
+---
+
+There are many ways you can make advanced changes to Blowfish. Read below to learn more about what can be customised and the best way of achieving your desired result.
+
+If you need further advice, post your questions on [GitHub Discussions](https://github.com/nunocoracao/blowfish/discussions).
+
+## Hugo project structure
+
+Before leaping into it, first a quick note about [Hugo project structure](https://gohugo.io/getting-started/directory-structure/) and best practices for managing your content and theme customisations.
+
+{{< alert >}}
+**In summary:** Never directly edit the theme files. Only make customisations in your Hugo project's sub-directories, not in the themes directory itself.
+{{< /alert >}}
+
+Blowfish is built to take advantage of all the standard Hugo practices. It is designed to allow all aspects of the theme to be customised and overridden without changing any of the core theme files. This allows for a seamless upgrade experience while giving you total control over the look and feel of your website.
+
+In order to achieve this, you should never manually adjust any of the theme files directly. Whether you install using Hugo modules, as a git submodule or manually include the theme in your `themes/` directory, you should always leave these files intact.
+
+The correct way to adjust any theme behaviour is by overriding files using Hugo's powerful [file lookup order](https://gohugo.io/templates/lookup-order/). In summary, the lookup order ensures any files you include in your project directory will automatically take precedence over any theme files.
+
+For example, if you wanted to override the main article template in Blowfish, you can simply create your own `layouts/_default/single.html` file and place it in the root of your project. This file will then override the `single.html` from the theme without ever changing the theme itself. This works for any theme files - HTML templates, partials, shortcodes, config files, data, assets, etc.
+
+As long as you follow this simple practice, you will always be able to update the theme (or test different theme versions) without worrying that you will lose any of your custom changes.
+
+## Change image optimization settings
+
+Hugo has various builtin methods to resize, crop and optimize images.
+
+As an example - in `layouts/partials/article-link/card.html`, you have the following code:
+
+```go
+{{ with .Resize "600x" }}
+<div class="w-full thumbnail_card nozoom" style="background-image:url({{ .RelPermalink }});"></div>
+{{ end }}
+```
+
+The default behavior of Hugo here is to resize the image to 600px keeping the ratio.
+
+It is worth noting here that default image configurations such as [anchor point](https://gohugo.io/content-management/image-processing/#anchor) can also be set in your [site configuration](https://gohugo.io/content-management/image-processing/#processing-options) as well as in the template itself.
+
+See the [Hugo docs on image processing](https://gohugo.io/content-management/image-processing/#image-processing-methods) for more info.
+
+## Colour schemes
+
+Blowfish ships with a number of colour schemes out of the box. To change the basic colour scheme, you can set the `colorScheme` theme parameter. Refer to the [Getting Started]({{< ref "getting-started#colour-schemes" >}}) section to learn more about the built-in schemes.
+
+In addition to the default schemes, you can also create your own and re-style the entire website to your liking. Schemes are created by by placing a `<scheme-name>.css` file in the `assets/css/schemes/` folder. Once the file is created, simply refer to it by name in the theme configuration.
+
+{{< alert "github">}}
+**Note:** generating these files manually can be hard, I've built a `nodejs` terminal tool to help with that, [Fugu](https://github.com/nunocoracao/fugu). In a nutshell, you pass the main three `hex` values of your color palette and the program will output a css file that can be imported directly into Blowfish.
+{{< /alert >}}
+
+
+Blowfish defines a three-colour palette that is used throughout the theme. The three colours are defined as `neutral`, `primary` and `secondary` variants, each containing ten shades of colour.
+
+Due to the way Tailwind CSS 3.0 calculates colour values with opacity, the colours specified in the scheme need to [conform to a particular format](https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo) by providing the red, green and blue colour values.
+
+```css
+:root {
+  --color-primary-500: 139, 92, 246;
+}
+```
+
+This example defines a CSS variable for the `primary-500` colour with a red value of `139`, green value of `92` and blue value of `246`.
+
+Use one of the existing theme stylesheets as a template. You are free to define your own colours, but for some inspiration, check out the official [Tailwind colour palette reference](https://tailwindcss.com/docs/customizing-colors#color-palette-reference).
+
+## Overriding the stylesheet
+
+Sometimes you need to add a custom style to style your own HTML elements. Blowfish provides for this scenario by allowing you to override the default styles in your own CSS stylesheet. Simply create a `custom.css` file in your project's `assets/css/` folder.
+
+The `custom.css` file will be minified by Hugo and loaded automatically after all the other theme styles which means anything in your custom file will take precedence over the defaults.
+
+### Using additional fonts
+
+Blowfish allows you to easily change the font for your site. After creating a `custom.css` file in your project's `assets/css/` folder, place you font file inside a `fonts` folder within the `static` root folder.
+
+```shell
+.
+├── assets
+│   └── css
+│       └── custom.css
+...
+└─── static
+    └── fonts
+        └─── font.ttf
+
+```
+
+This makes the font available to the website. Now, the font can just import it in your `custom.css` and replaced wherever you see fit. The example below shows what replacing the font for the entire `html` would look like.
+
+```css
+@font-face {
+    font-family: font;
+    src: url('/fonts/font.ttf');
+}
+
+html {
+    font-family: font;
+}
+```
+
+### Adjusting the font size
+
+Changing the font size of your website is one example of overriding the default stylesheet. Blowfish makes this simple as it uses scaled font sizes throughout the theme which are derived from the base HTML font size. By default, Tailwind sets the default size to `12pt`, but it can be changed to whatever value you prefer.
+
+Create a `custom.css` file using the [instructions above]({{< ref "#overriding-the-stylesheet" >}}) and add the following CSS declaration:
+
+```css
+/* Increase the default font size */
+html {
+  font-size: 13pt;
+}
+```
+
+Simply by changing this one value, all the font sizes on your website will be adjusted to match this new size. Therefore, to increase the overall font sizes used, make the value greater than `12pt`. Similarly, to decrease the font sizes, make the value less than `12pt`.
+
+## Building the theme CSS from source
+
+If you'd like to make a major change, you can take advantage of Tailwind CSS's JIT compiler and rebuild the entire theme CSS from scratch. This is useful if you want to adjust the Tailwind configuration or add extra Tailwind classes to the main stylesheet.
+
+{{< alert >}}
+**Note:** Building the theme manually is intended for advanced users.
+{{< /alert >}}
+
+Let's step through how building the Tailwind CSS works.
+
+### Tailwind configuration
+
+In order to generate a CSS file that only contains the Tailwind classes that are actually being used the JIT compiler needs to scan through all the HTML templates and Markdown content files to check which styles are present in the markup. The compiler does this by looking at the `tailwind.config.js` file which is included in the root of the theme directory:
+
+```js
+// themes/blowfish/tailwind.config.js
+
+module.exports = {
+  content: [
+    "./layouts/**/*.html",
+    "./content/**/*.{html,md}",
+    "./themes/blowfish/layouts/**/*.html",
+    "./themes/blowfish/content/**/*.{html,md}",
+  ],
+
+  // and more...
+};
+```
+
+This default configuration has been included with these content paths so that you can easily generate your own CSS file without needing to modify it, provided you follow a particular project structure. Namely, **you have to include Blowfish in your project as a subdirectory at `themes/blowfish/`**. This means you cannot easily use Hugo Modules to install the theme and you must go down either the git submodule (recommended) or manual install routes. The [Installation docs]({{< ref "installation" >}}) explain how to install the theme using either of these methods.
+
+### Project structure
+
+In order to take advantage of the default configuration, your project should look something like this...
+
+```shell
+.
+├── assets
+│   └── css
+│       └── compiled
+│           └── main.css  # this is the file we will generate
+├── config  # site config
+│   └── _default
+├── content  # site content
+│   ├── _index.md
+│   ├── projects
+│   │   └── _index.md
+│   └── blog
+│       └── _index.md
+├── layouts  # custom layouts for your site
+│   ├── partials
+│   │   └── extend-article-link/simple.html
+│   ├── projects
+│   │   └── list.html
+│   └── shortcodes
+│       └── disclaimer.html
+└── themes
+    └── blowfish  # git submodule or manual theme install
+```
+
+This example structure adds a new `projects` content type with its own custom layout along with a custom shortcode and extended partial. Provided the project follows this structure, all that's required is to recompile the `main.css` file.
+
+### Install dependencies
+
+In order for this to work you'll need to change into the `themes/blowfish/` directory and install the project dependencies. You'll need [npm](https://docs.npmjs.com/cli/v7/configuring-npm/install) on your local machine for this step.
+
+```shell
+cd themes/blowfish
+npm install
+```
+
+### Run the Tailwind compiler
+
+With the dependencies installed all that's left is to use [Tailwind CLI](https://v2.tailwindcss.com/docs/installation#using-tailwind-cli) to invoke the JIT compiler. Navigate back to the root of your Hugo project and issue the following command:
+
+```shell
+cd ../..
+./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit
+```
+
+It's a bit of an ugly command due to the paths involved but essentially you're calling Tailwind CLI and passing it the location of the Tailwind config file (the one we looked at above), where to find the theme's `main.css` file and then where you want the compiled CSS file to be placed (it's going into the `assets/css/compiled/` folder of your Hugo project).
+
+The config file will automatically inspect all the content and layouts in your project as well as all those in the theme and build a new CSS file that contains all the CSS required for your website. Due to the way Hugo handles file hierarchy, this file in your project will now automatically override the one that comes with the theme.
+
+Each time you make a change to your layouts and need new Tailwind CSS styles, you can simply re-run the command and generate the new CSS file. You can also add `-w` to the end of the command to run the JIT compiler in watch mode.
+
+### Make a build script
+
+To fully complete this solution, you can simplify this whole process by adding aliases for these commands, or do what I do and add a `package.json` to the root of your project which contains the necessary scripts...
+
+```js
+// package.json
+
+{
+  "name": "my-website",
+  "version": "1.0.0",
+  "description": "",
+  "scripts": {
+    "server": "hugo server -b http://localhost -p 8000",
+    "dev": "NODE_ENV=development ./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit -w",
+    "build": "NODE_ENV=production ./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit"
+  },
+  // and more...
+}
+```
+
+Now when you want to work on designing your site, you can invoke `npm run dev` and the compiler will run in watch mode. When you're ready to deploy, run `npm run build` and you'll get a clean Tailwind CSS build.
+
+🙋‍♀️ If you need help, feel free to ask a question on [GitHub Discussions](https://github.com/nunocoracao/blowfish/discussions).

exampleSite/content/docs/advanced-customisation/index.zh-cn.md

@@ -0,0 +1,235 @@
+---
+title: "Advanced Customisation"
+date: 2020-08-08
+draft: false
+description: "Learn how to build Blowfish manually."
+slug: "advanced-customisation"
+tags: ["advanced", "css", "docs"]
+series: ["Documentation"]
+series_order: 13
+---
+
+There are many ways you can make advanced changes to Blowfish. Read below to learn more about what can be customised and the best way of achieving your desired result.
+
+If you need further advice, post your questions on [GitHub Discussions](https://github.com/nunocoracao/blowfish/discussions).
+
+## Hugo project structure
+
+Before leaping into it, first a quick note about [Hugo project structure](https://gohugo.io/getting-started/directory-structure/) and best practices for managing your content and theme customisations.
+
+{{< alert >}}
+**In summary:** Never directly edit the theme files. Only make customisations in your Hugo project's sub-directories, not in the themes directory itself.
+{{< /alert >}}
+
+Blowfish is built to take advantage of all the standard Hugo practices. It is designed to allow all aspects of the theme to be customised and overridden without changing any of the core theme files. This allows for a seamless upgrade experience while giving you total control over the look and feel of your website.
+
+In order to achieve this, you should never manually adjust any of the theme files directly. Whether you install using Hugo modules, as a git submodule or manually include the theme in your `themes/` directory, you should always leave these files intact.
+
+The correct way to adjust any theme behaviour is by overriding files using Hugo's powerful [file lookup order](https://gohugo.io/templates/lookup-order/). In summary, the lookup order ensures any files you include in your project directory will automatically take precedence over any theme files.
+
+For example, if you wanted to override the main article template in Blowfish, you can simply create your own `layouts/_default/single.html` file and place it in the root of your project. This file will then override the `single.html` from the theme without ever changing the theme itself. This works for any theme files - HTML templates, partials, shortcodes, config files, data, assets, etc.
+
+As long as you follow this simple practice, you will always be able to update the theme (or test different theme versions) without worrying that you will lose any of your custom changes.
+
+## Change image optimization settings
+
+Hugo has various builtin methods to resize, crop and optimize images.
+
+As an example - in `layouts/partials/article-link/card.html`, you have the following code:
+
+```go
+{{ with .Resize "600x" }}
+<div class="w-full thumbnail_card nozoom" style="background-image:url({{ .RelPermalink }});"></div>
+{{ end }}
+```
+
+The default behavior of Hugo here is to resize the image to 600px keeping the ratio.
+
+It is worth noting here that default image configurations such as [anchor point](https://gohugo.io/content-management/image-processing/#anchor) can also be set in your [site configuration](https://gohugo.io/content-management/image-processing/#processing-options) as well as in the template itself.
+
+See the [Hugo docs on image processing](https://gohugo.io/content-management/image-processing/#image-processing-methods) for more info.
+
+## Colour schemes
+
+Blowfish ships with a number of colour schemes out of the box. To change the basic colour scheme, you can set the `colorScheme` theme parameter. Refer to the [Getting Started]({{< ref "getting-started#colour-schemes" >}}) section to learn more about the built-in schemes.
+
+In addition to the default schemes, you can also create your own and re-style the entire website to your liking. Schemes are created by by placing a `<scheme-name>.css` file in the `assets/css/schemes/` folder. Once the file is created, simply refer to it by name in the theme configuration.
+
+{{< alert "github">}}
+**Note:** generating these files manually can be hard, I've built a `nodejs` terminal tool to help with that, [Fugu](https://github.com/nunocoracao/fugu). In a nutshell, you pass the main three `hex` values of your color palette and the program will output a css file that can be imported directly into Blowfish.
+{{< /alert >}}
+
+
+Blowfish defines a three-colour palette that is used throughout the theme. The three colours are defined as `neutral`, `primary` and `secondary` variants, each containing ten shades of colour.
+
+Due to the way Tailwind CSS 3.0 calculates colour values with opacity, the colours specified in the scheme need to [conform to a particular format](https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo) by providing the red, green and blue colour values.
+
+```css
+:root {
+  --color-primary-500: 139, 92, 246;
+}
+```
+
+This example defines a CSS variable for the `primary-500` colour with a red value of `139`, green value of `92` and blue value of `246`.
+
+Use one of the existing theme stylesheets as a template. You are free to define your own colours, but for some inspiration, check out the official [Tailwind colour palette reference](https://tailwindcss.com/docs/customizing-colors#color-palette-reference).
+
+## Overriding the stylesheet
+
+Sometimes you need to add a custom style to style your own HTML elements. Blowfish provides for this scenario by allowing you to override the default styles in your own CSS stylesheet. Simply create a `custom.css` file in your project's `assets/css/` folder.
+
+The `custom.css` file will be minified by Hugo and loaded automatically after all the other theme styles which means anything in your custom file will take precedence over the defaults.
+
+### Using additional fonts
+
+Blowfish allows you to easily change the font for your site. After creating a `custom.css` file in your project's `assets/css/` folder, place you font file inside a `fonts` folder within the `static` root folder.
+
+```shell
+.
+├── assets
+│   └── css
+│       └── custom.css
+...
+└─── static
+    └── fonts
+        └─── font.ttf
+
+```
+
+This makes the font available to the website. Now, the font can just import it in your `custom.css` and replaced wherever you see fit. The example below shows what replacing the font for the entire `html` would look like.
+
+```css
+@font-face {
+    font-family: font;
+    src: url('/fonts/font.ttf');
+}
+
+html {
+    font-family: font;
+}
+```
+
+### Adjusting the font size
+
+Changing the font size of your website is one example of overriding the default stylesheet. Blowfish makes this simple as it uses scaled font sizes throughout the theme which are derived from the base HTML font size. By default, Tailwind sets the default size to `12pt`, but it can be changed to whatever value you prefer.
+
+Create a `custom.css` file using the [instructions above]({{< ref "#overriding-the-stylesheet" >}}) and add the following CSS declaration:
+
+```css
+/* Increase the default font size */
+html {
+  font-size: 13pt;
+}
+```
+
+Simply by changing this one value, all the font sizes on your website will be adjusted to match this new size. Therefore, to increase the overall font sizes used, make the value greater than `12pt`. Similarly, to decrease the font sizes, make the value less than `12pt`.
+
+## Building the theme CSS from source
+
+If you'd like to make a major change, you can take advantage of Tailwind CSS's JIT compiler and rebuild the entire theme CSS from scratch. This is useful if you want to adjust the Tailwind configuration or add extra Tailwind classes to the main stylesheet.
+
+{{< alert >}}
+**Note:** Building the theme manually is intended for advanced users.
+{{< /alert >}}
+
+Let's step through how building the Tailwind CSS works.
+
+### Tailwind configuration
+
+In order to generate a CSS file that only contains the Tailwind classes that are actually being used the JIT compiler needs to scan through all the HTML templates and Markdown content files to check which styles are present in the markup. The compiler does this by looking at the `tailwind.config.js` file which is included in the root of the theme directory:
+
+```js
+// themes/blowfish/tailwind.config.js
+
+module.exports = {
+  content: [
+    "./layouts/**/*.html",
+    "./content/**/*.{html,md}",
+    "./themes/blowfish/layouts/**/*.html",
+    "./themes/blowfish/content/**/*.{html,md}",
+  ],
+
+  // and more...
+};
+```
+
+This default configuration has been included with these content paths so that you can easily generate your own CSS file without needing to modify it, provided you follow a particular project structure. Namely, **you have to include Blowfish in your project as a subdirectory at `themes/blowfish/`**. This means you cannot easily use Hugo Modules to install the theme and you must go down either the git submodule (recommended) or manual install routes. The [Installation docs]({{< ref "installation" >}}) explain how to install the theme using either of these methods.
+
+### Project structure
+
+In order to take advantage of the default configuration, your project should look something like this...
+
+```shell
+.
+├── assets
+│   └── css
+│       └── compiled
+│           └── main.css  # this is the file we will generate
+├── config  # site config
+│   └── _default
+├── content  # site content
+│   ├── _index.md
+│   ├── projects
+│   │   └── _index.md
+│   └── blog
+│       └── _index.md
+├── layouts  # custom layouts for your site
+│   ├── partials
+│   │   └── extend-article-link/simple.html
+│   ├── projects
+│   │   └── list.html
+│   └── shortcodes
+│       └── disclaimer.html
+└── themes
+    └── blowfish  # git submodule or manual theme install
+```
+
+This example structure adds a new `projects` content type with its own custom layout along with a custom shortcode and extended partial. Provided the project follows this structure, all that's required is to recompile the `main.css` file.
+
+### Install dependencies
+
+In order for this to work you'll need to change into the `themes/blowfish/` directory and install the project dependencies. You'll need [npm](https://docs.npmjs.com/cli/v7/configuring-npm/install) on your local machine for this step.
+
+```shell
+cd themes/blowfish
+npm install
+```
+
+### Run the Tailwind compiler
+
+With the dependencies installed all that's left is to use [Tailwind CLI](https://v2.tailwindcss.com/docs/installation#using-tailwind-cli) to invoke the JIT compiler. Navigate back to the root of your Hugo project and issue the following command:
+
+```shell
+cd ../..
+./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit
+```
+
+It's a bit of an ugly command due to the paths involved but essentially you're calling Tailwind CLI and passing it the location of the Tailwind config file (the one we looked at above), where to find the theme's `main.css` file and then where you want the compiled CSS file to be placed (it's going into the `assets/css/compiled/` folder of your Hugo project).
+
+The config file will automatically inspect all the content and layouts in your project as well as all those in the theme and build a new CSS file that contains all the CSS required for your website. Due to the way Hugo handles file hierarchy, this file in your project will now automatically override the one that comes with the theme.
+
+Each time you make a change to your layouts and need new Tailwind CSS styles, you can simply re-run the command and generate the new CSS file. You can also add `-w` to the end of the command to run the JIT compiler in watch mode.
+
+### Make a build script
+
+To fully complete this solution, you can simplify this whole process by adding aliases for these commands, or do what I do and add a `package.json` to the root of your project which contains the necessary scripts...
+
+```js
+// package.json
+
+{
+  "name": "my-website",
+  "version": "1.0.0",
+  "description": "",
+  "scripts": {
+    "server": "hugo server -b http://localhost -p 8000",
+    "dev": "NODE_ENV=development ./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit -w",
+    "build": "NODE_ENV=production ./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit"
+  },
+  // and more...
+}
+```
+
+Now when you want to work on designing your site, you can invoke `npm run dev` and the compiler will run in watch mode. When you're ready to deploy, run `npm run build` and you'll get a clean Tailwind CSS build.
+
+🙋‍♀️ If you need help, feel free to ask a question on [GitHub Discussions](https://github.com/nunocoracao/blowfish/discussions).

exampleSite/content/docs/configuration/index.it.md

@@ -0,0 +1,339 @@
+---
+title: "Configuration"
+date: 2020-08-14
+draft: false
+description: "All the configuration variables available in Blowfish."
+slug: "configuration"
+tags: ["config", "docs"]
+series: ["Documentation"]
+series_order: 4
+---
+
+Blowfish is a highly customisable theme and uses some of the latest Hugo features to simplify how it is configured.
+
+The theme ships with a default configuration that gets you up and running with a basic blog or static website.
+
+{{< alert "fire" >}}
+We just launched a CLI tool to help you get started with Blowfish. It will help you with installation and configuration. Install the CLI tool globally using:
+```bash
+npx blowfish-tools
+```
+{{< /alert >}}
+
+> Configuration files bundled with the theme are provided in TOML format as this is the default Hugo syntax. Feel free to convert your config to YAML or JSON if you wish.
+
+The default theme configuration is documented in each file so you can freely adjust the settings to meet your needs.
+
+{{< alert >}}
+As outlined in the [installation instructions]({{< ref "/docs/installation#set-up-theme-configuration-files" >}}), you should adjust your theme configuration by modifying the files in the `config/_default/` folder of your Hugo project and delete the `config.toml` file in your project root.
+{{< /alert >}}
+
+## Site configuration
+
+Standard Hugo configuration variables are respected throughout the theme, however there are some specific things that should be configured for the best experience.
+
+The site configuration is managed through the `config/_default/config.toml` file. The table below outlines all the settings that the Blowfish takes advantage of.
+
+Note that the variable names provided in this table use dot notation to simplify the TOML data structure (ie. `outputs.home` refers to `[outputs] home`).
+
+<!-- prettier-ignore-start -->
+| Name                     | Default                   | Description                                                                                                                                                                                                                                                                                                                                                                  |
+| ------------------------ | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `theme`                  | `"blowfish"`              | When using Hugo Modules this config value should be removed. For all other installation types, this must be set to `blowfish` for the theme to function.                                                                                                                                                                                                                     |
+| `baseURL`                | _Not set_                 | The URL to the root of the website.                                                                                                                                                                                                                                                                                                                                          |
+| `defaultContentLanguage` | `"en"`                    | This value determines the default language of theme components and content. Refer to the [language and i18n](#language-and-i18n) section below for supported language codes.                                                                                                                                                                                                 |
+| `enableRobotsTXT`        | `true`                    | When enabled, a `robots.txt` file will be created in the site root that allows search engines to crawl the entire site. If you prefer to provide your own pre-made `robots.txt`, set to `false` and place your file in the `static` directory. For complete control, you may provide a [custom layout]({{< ref "content-examples#custom-layouts" >}}) to generate this file. |
+| `paginate`               | `10`                      | The number of articles listed on each page of the article listing.                                                                                                                                                                                                                                                                                                           |
+| `summaryLength`          | `0`                       | The number of words that are used to generate the article summary when one is not provided in the [front matter]({{< ref "front-matter" >}}). A value of `0` will use the first sentence. This value has no effect when summaries are hidden.                                                                                                                                |
+| `outputs.home`           | `["HTML", "RSS", "JSON"]` | The output formats that are generated for the site. Blowfish requires HTML, RSS and JSON for all theme components to work correctly.                                                                                                                                                                                                                                         |
+| `permalinks`             | _Not set_                 | Refer to the [Hugo docs](https://gohugo.io/content-management/urls/#permalinks) for permalink configuration.                                                                                                                                                                                                                                                                 |
+| `taxonomies`             | _Not set_                 | Refer to the [Organising content]({{< ref "getting-started#organising-content" >}}) section for taxonomy configuration.                                                                                                                                                                                                                                                      |
+<!-- prettier-ignore-end -->
+
+## Thumbnails
+
+Blowfish was built so it would be easy to add visual support to your articles. If your familiar with Hugo article structure, you just need to place an image file (almost all formats are supported but we recommend `.png` or `.jpg`) that starts with `feature*` inside your article folder. And that's it, Blowfish will then able to both use the image as a thumbnail within your website as well as for <a target="_blank" href="https://oembed.com/">oEmbed</a> cards across social platforms. 
+
+[Here]({{< ref "thumbnails" >}}) is also a guide with more info and a [sample]({{< ref "thumbnail_sample" >}}) if you want to see how you can do it.
+
+## Language and i18n
+
+Blowfish is optimised for full multilingual websites and theme assets are translated into several languages out of the box. The language configuration allows you to generate multiple versions of your content to provide a customised experience to your visitors in their native language.
+
+The theme currently supports the following languages by default:
+
+| Language                       | Code    |
+| ------------------------------ | ------- |
+| Arabic                       | `ar`    |
+| Bulgarian                    | `bg`    |
+| Bengali                      | `bn`    |
+| Catalan                      | `ca`    |
+| Czech                        | `cs`    |
+| German                       | `de`    |
+| English                      | `en`    |
+| Spanish (Spain)              | `es`    |
+| Finnish                      | `fi`    |
+| French                       | `fr`    |
+| Hebrew                       | `he`    |
+| Croatian                     | `hr`    |
+| Hungarian                    | `hu`    |
+| Indonesian                   | `id`    |
+| Italian                      | `it`    |
+| Japanese                     | `ja`    |
+| Korean                       | `ko`    |
+| Polish                       | `pl`    |
+| Portuguese (Brazil)          | `pt-br` |
+| Portuguese (Portugal)        | `pt-pt` |
+| Romanian                     | `ro`    |
+| Russian                      | `ru`    |
+| Turkish                      | `tr`    |
+| Vietnamese                   | `vi`    |
+| Simplified Chinese (China)   | `zh-cn` |
+| Traditional Chinese (Taiwan) | `zh-tw` |
+
+
+
+The default translations can be overridden by creating a custom file in `i18n/[code].yaml` that contains the translation strings. You can also use this method to add new languages. If you'd like to share a new translation with the community, please [open a pull request](https://github.com/nunocoracao/blowfish/pulls).
+
+### Configuration
+
+In order to be as flexible as possible, a language configuration file needs to be created for each language on the website. By default Blowfish includes an English language configuration at `config/_default/languages.en.toml`.
+
+The default file can be used as a template to create additional languages, or renamed if you wish to author your website in a language other than English. Simply name the file using the format `languages.[language-code].toml`.
+
+{{< alert >}}
+**Note:** Ensure the `defaultContentLanguage` parameter in the [site configuration](#site-configuration) matches the language code in your language config filename.  
+{{< /alert >}}
+
+
+#### Global
+
+<!-- prettier-ignore-start -->
+| Name           | Default      | Description                                                                                                                                                                                                                                                                                            |
+| -------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `languageCode` | `"en"`       | The Hugo language code for this file. It can be a top-level language (ie. `en`) or a sub-variant (ie. `en-au`) and should match the language code in the filename. Hugo expects this value to always be in lowercase. For proper HTML compliance, set the `isoCode` parameter which is case-sensitive. |
+| `languageName` | `"English"`  | The name of the language.                                                                                                                                                                                                                                                                              |
+| `weight`       | `1`          | The weight determines the order of languages when building multilingual sites.                                                                                                                                                                                                                         |
+| `title`        | `"Blowfish"` | The title of the website. This will be displayed in the site header and footer.                                                                                                                                                                                                                        |
+<!-- prettier-ignore-end -->
+
+#### Params
+
+<!-- prettier-ignore-start -->
+| Name                   | Default            | Description                                                                                                                                                                                                                                                                                                                |
+| ---------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `params.displayName`   | `"EN"`             | The name used when the language appears on the website.                                                                                                                                                                                                                                                                    |
+| `params.isoCode`       | `"en"`             | The ISO language code for HTML metadata purposes. It can be a top-level language (ie. `en`) or a sub-variant (ie. `en-AU`).                                                                                                                                                                                                |
+| `params.rtl`           | `false`            | Whether or not this is a RTL language. Set to `true` to reflow content from right-to-left. Blowfish fully supports using RTL and LTR languages at the same time and will dynamically adjust to both.                                                                                                                       |
+| `params.dateFormat`    | `"2 January 2006"` | How dates are formatted in this language. Refer to the [Hugo docs](https://gohugo.io/functions/format/#gos-layout-string) for acceptable formats.                                                                                                                                                                          |
+| `params.logo`          | _Not set_          | The relative path to the site logo file within the `assets/` folder. The logo file should be provided at 2x resolution and supports any image dimensions.                                                                                                                                                                  |
+| `params.secondaryLogo` | _Not set_          | The relative path to the secondary site logo file within the `assets/` folder. The logo file should be provided at 2x resolution and supports any image dimensions. This should have an inverted/contrasting colour scheme to `logo`. If set, this logo will be shown when users toggle from the `defaultAppearance` mode. |
+| `params.description`   | _Not set_          | The website description. This will be used in the site metadata.                                                                                                                                                                                                                                                           |
+| `params.copyright`     | _Not set_          | A Markdown string for the site footer copyright message can include the placeholder { year } to dynamically insert the current year. If none is provided, Blowfish will automatically generate a copyright string using the site `title`.                                                                                  |
+
+
+<!-- prettier-ignore-end -->
+
+#### Author
+| Name              | Default   | Description                                                                                                                                                                                                                                                                                                                 |
+| ----------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `author.name`     | _Not set_ | The author's name. This will be displayed in article footers, and on the homepage when the profile layout is used.                                                                                                                                                                                                          |
+| `author.image`    | _Not set_ | Path to the image file of the author. The image should be a 1:1 aspect ratio. The image can be placed in the site's `assets/` folder or can be external url.                                                                                                                                                                                                     |
+| `author.headline` | _Not set_ | A Markdown string containing the author's headline. It will be displayed on the profile homepage under the author's name.                                                                                                                                                                                                   |
+| `author.bio`      | _Not set_ | A Markdown string containing the author's bio. It will be displayed in article footers.                                                                                                                                                                                                                                     |
+| `author.links`    | _Not set_ | The links to display alongside the author's details. The config file contains example links which can simply be uncommented to enable. The order that the links are displayed is determined by the order they appear in the array. Custom links can be added by providing corresponding SVG icon assets in `assets/icons/`. |
+<!-- prettier-ignore-end -->
+
+### Menus
+
+Blowfish also supports language-specific menu configurations. Menu config files follow the same naming format as the languages file. Simply provide the language code in the file name to tell Hugo which language the file relates to.
+
+Menu config files are named with the format `menus.[language-code].toml`. Always ensure that the language code used in the menus configuration matches the languages configuration.
+
+The [Getting Started]({{< ref "getting-started#menus" >}}) section explains more about the structure of this file. You can also refer to the [Hugo menu docs](https://gohugo.io/content-management/menus/) for more configuration examples.
+
+## Theme parameters
+
+Blowfish provides a large number of configuration parameters that control how the theme functions. The table below outlines every available parameter in the `config/_default/params.toml` file.
+
+Many of the article defaults here can be overridden on a per article basis by specifying it in the front matter. Refer to the [Front Matter]({{< ref "front-matter" >}}) section for further details.
+
+<!-- prettier-ignore-start -->
+
+### Global
+
+| Name                            | Default      | Description                                                                                                                                                                                                                                       |
+| ------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `colorScheme`                   | `"blowfish"` | The theme colour scheme to use. Valid values are `blowfish` (default), `avocado`, `fire`, `ocean`, `forest`, `princess`, `neon`, `bloody`, `terminal`, `marvel`, `noir`, `autumn`, `congo`, and`slate`. Refer to the [Colour Schemes]({{< ref "getting-started#colour-schemes" >}}) section for more details.                              |
+| `defaultAppearance`             | `"light"`    | The default theme appearance, either `light` or `dark`.                                                                                                                                                                                           |
+| `autoSwitchAppearance`          | `true`       | Whether the theme appearance automatically switches based upon the visitor's operating system preference. Set to `false` to force the site to always use the `defaultAppearance`.                                                                 |
+| `enableSearch`                  | `false`      | Whether site search is enabled. Set to `true` to enable search functionality. Note that the search feature depends on the `outputs.home` setting in the [site configuration](#site-configuration) being set correctly.                            |
+| `enableCodeCopy`                | `false`      | Whether copy-to-clipboard buttons are enabled for `<code>` blocks. The `highlight.noClasses` parameter must be set to `false` for code copy to function correctly. Read more about [other configuration files](#other-configuration-files) below. |
+| `mainSections`                  | _Not set_    | The sections that should be displayed in the recent articles list. If not provided the section with the greatest number of articles is used.                                                                                                      |
+| `showViews`                     | _Not set_    | Whether or not articles and list views are displayed. This requires firebase integrations to be enabled, look below.                                                                                                                              |
+| `showLikes`                     | _Not set_    | Whether or not articles and list likes are displayed. This requires firebase integrations to be enabled, look below.                                                                                                                              |
+| `robots`                        | _Not set_    | String that indicates how robots should handle your site. If set, it will be output in the page head. Refer to [Google's docs](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) for valid values.            |
+| `disableImageZoom`              | `false`      | Disables image zoom feature across all the images in the site.                                                                                                                                                                                    |
+| `disableImageOptimization`      | `false`      | Disables image resize and optimization features across all the images in the site.                                                                                                                                                                |
+| `disableTextInHeader`           | `false`      | Disables text in header, useful for logo based headers.                                                                                                                                                                                           |
+| `defaultBackgroundImage`        | _Not set_    | Default background image for both `background` homepage layout and `background` hero style                                                                                                                                                        |
+| `defaultFeaturedImage`          | _Not set_    | Default background image for all `featured` images across articles, will be overridden by a local `featured` image.                                                                                                                               |
+| `highlightCurrentMenuArea`      | _Not set_    | Marks menu entries in the main menu when selected                                                                                                                                                                                                 |
+| `smartTOC`                      | _Not set_    | Activate smart Table of Contents, items in view will be highlighted.                                                                                                                                                                              |
+| `smartTOCHideUnfocusedChildren` | _Not set_    | When smart Table of Contents is turned on, this will hide deeper levels of the table when they are not in focus.                                                                                                                                  |
+
+### Header
+
+| Name            | Default   | Description                                                                                                         |
+| --------------- | --------- | ------------------------------------------------------------------------------------------------------------------- |
+| `header.layout` | `"basic"` | Defines the header for the entire site, supported values are `basic`, `fixed`, `fixed-fill`, and `fixed-fill-blur`. |
+### Footer
+
+| Name                            | Default | Description                                                                                                                                                                                                               |
+| ------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `footer.showMenu`               | `true`  | Show/hide the footer menu, which can be configured in the `[[footer]]` section of the `config/_default/menus.en.toml` file.                                                                                               |
+| `footer.showCopyright`          | `true`  | Whether or not to show the copyright string in the site footer. Note that the string itself can be customised using the `copyright` parameter in the [languages configuration](#language-and-i18n).                       |
+| `footer.showThemeAttribution`   | `true`  | Whether or not to show the "powered by" theme attribution in the site footer. If you choose to disable this message, please consider attributing the theme somewhere else on your site (for example, on your about page). |
+| `footer.showAppearanceSwitcher` | `false` | Whether or not to show the appearance switcher in the site footer. The browser's local storage is used to persist the visitor's preference.                                                                               |
+| `footer.showScrollToTop`        | `true`  | When set to `true` the scroll to top arrow is displayed.                                                                                                                                                                  |
+### Homepage
+
+| Name                            | Default     | Description                                                                                                                                                                                                                                                                                                        |
+| ------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `homepage.layout`               | `"profile"` | The layout of the homepage. Valid values are `page`, `profile`, `hero`, `card`, `background`, or `custom`. When set to `custom`, you must provide your own layout by creating a `/layouts/partials/home/custom.html` file. Refer to the [Homepage Layout]({{< ref "homepage-layout" >}}) section for more details. |
+| `homepage.homepageImage`        | _Not set_   | Image to be used in `hero` and `card` layouts. Can be set as local image from asset directory or external image url. Refer to the [Homepage Layout]({{< ref "homepage-layout" >}}) section for more details.                                                                                                                                                                             |
+| `homepage.showRecent`           | `false`     | Whether or not to display the recent articles list on the homepage.                                                                                                                                                                                                                                                |
+| `homepage.showRecentItems`      | 5           | How many articles to display if showRecent is true. If variable is set to 0 or if it isn't defined the system will default to 5 articles.                                                                                                                                                                          |
+| `homepage.showMoreLink`         | `false`     | Whether or not to display a show more link at the end of your posts that takes the user to a predefined place.                                                                                                                                                                                                     |
+| `homepage.showMoreLinkDest`     | `/posts`    | The destination of the show more button.                                                                                                                                                                                                                                                                           |
+| `homepage.cardView`             | `false`     | Display recent articles as a gallery of cards.                                                                                                                                                                                                                                                                     |
+| `homepage.cardViewScreenWidth`  | `false`     | Enhance the width of the recent articles card gallery to take the full width available.                                                                                                                                                                                                                            |
+| `homepage.layoutBackgroundBlur` | `false`     | Makes the background image in the homepage layout blur with the scroll                                                                                                                                                                                                                                             |
+### Article
+
+| Name                                  | Default   | Description                                                                                                                                                                                                                                                                                                            |
+| ------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `article.showDate`                    | `true`    | Whether or not article dates are displayed.                                                                                                                                                                                                                                                                            |
+| `article.showViews`                   | `false`   | Whether or not article views are displayed. This requires firebase integrations to be enabled, look below.                                                                                                                                                                                                             |
+| `article.showLikes`                   | `false`   | Whether or not article likes are displayed. This requires firebase integrations to be enabled, look below.                                                                                                                                                                                                             |
+| `article.showDateOnlyInArticle`       | `false`   | Show date within article even if not displayed in article listings/cards.                                                                                                                                                                                                                                              |
+| `article.showDateUpdated`             | `false`   | Whether or not the dates articles were updated are displayed.                                                                                                                                                                                                                                                          |
+| `article.showAuthor`                  | `true`    | Whether or not the author box is displayed in the article footer.                                                                                                                                                                                                                                                      |
+| `article.showHero`                    | `false`   | Whether the thumbnail image will be shown as a hero image within each article page.                                                                                                                                                                                                                                    |
+| `article.heroStyle`                   | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`.                                                                                                                                                                                                                |
+| `article.layoutBackgroundBlur`        | `true`    | Makes the background image in the background article heroStyle blur with the scroll                                                                                                                                                                                                                                    |
+| `article.layoutBackgroundHeaderSpace` | `true`    | Add space between the header and the body.                                                                                                                                                                                                                                                                             |
+| `article.showBreadcrumbs`             | `false`   | Whether or not breadcrumbs are displayed in the article header.                                                                                                                                                                                                                                                        |
+| `article.showDraftLabel`              | `true`    | Whether or not the draft indicator is shown next to articles when site is built with `--buildDrafts`.                                                                                                                                                                                                                  |
+| `article.showEdit`                    | `false`   | Whether or not the link to edit the article content should be displayed.                                                                                                                                                                                                                                               |
+| `article.editURL`                     | _Not set_ | When `article.showEdit` is active, the URL for the edit link.                                                                                                                                                                                                                                                          |
+| `article.editAppendPath`              | `true`    | When `article.showEdit` is active, whether or not the path to the current article should be appended to the URL set at `article.editURL`.                                                                                                                                                                              |
+| `article.seriesOpened`                | `false`   | Whether or not the series module will be displayed open by default or not.                                                                                                                                                                                                                                             |
+| `article.showHeadingAnchors`          | `true`    | Whether or not heading anchor links are displayed alongside headings within articles.                                                                                                                                                                                                                                  |
+| `article.showPagination`              | `true`    | Whether or not the next/previous article links are displayed in the article footer.                                                                                                                                                                                                                                    |
+| `article.invertPagination`            | `false`   | Whether or not to flip the direction of the next/previous article links.                                                                                                                                                                                                                                               |
+| `article.showReadingTime`             | `true`    | Whether or not article reading times are displayed.                                                                                                                                                                                                                                                                    |
+| `article.showTableOfContents`         | `false`   | Whether or not the table of contents is displayed on articles.                                                                                                                                                                                                                                                         |
+| `article.showRelatedContent`          | `false`   | Display related content for each post. Might required additional configuration to your `config.toml`. Please check the theme `config.toml` if you want to enable this feature and copy all the relevant *related* entries. Also check [Hugo's docs](https://gohugo.io/content-management/related/) on related content. |
+| `article.relatedContentLimit`         | `3`       | Limit of related articles to display if `      showRelatedContent` is turned on.                                                                                                                                                                                                                                       |
+| `article.showTaxonomies`              | `false`   | Whether or not the taxonomies related to this article are displayed.                                                                                                                                                                                                                                                   |
+| `article.showAuthorsBadges`           | `false`   | Whether the `authors` taxonomies are are displayed in the article or list header. This requires the setup of `multiple authors` and the `authors` taxonomy. Check [this page]({{< ref "multi-author" >}}) for more details on how to configure that feature.                                                           |
+| `article.showWordCount`               | `false`   | Whether or not article word counts are displayed.                                                                                                                                                                                                                                                                      |
+| `article.showComments`                | `false`   | Whether or not the [comments partial]({{< ref "partials#comments" >}}) is included after the article footer.                                                                                                                                                                                                           |
+| `article.sharingLinks`                | _Not set_ | Which sharing links to display at the end of each article. When not provided, or set to `false` no links will be displayed.  Available values are: "linkedin", "twitter", "reddit", "pinterest", "facebook", "email", "whatsapp", and "telegram"                                                                       |
+| `article.showZenMode`                 | `false`   | Flag to activate Zen Mode reading feature for articles.                                                                                                                                                                                                                                                                |
+
+### List
+
+| Name                               | Default   | Description                                                                                                                                                                                                                                                    |
+| ---------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `list.showHero`                    | `false`   | Whether the thumbnail image will be shown as a hero image within each list page.                                                                                                                                                                               |
+| `list.heroStyle`                   | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`.                                                                                                                                                        |
+| `list.showBreadcrumbs`             | `false`   | Whether or not breadcrumbs are displayed in the header on list pages.                                                                                                                                                                                          |
+| `list.layoutBackgroundBlur`        | `true`    | Makes the background image in the background list heroStyle blur with the scroll                                                                                                                                                                               |
+| `list.layoutBackgroundHeaderSpace` | `true`    | Add space between the header and the body.                                                                                                                                                                                                                     |
+| `list.showTableOfContents`         | `false`   | Whether or not the table of contents is displayed on list pages.                                                                                                                                                                                               |
+| `list.showSummary`                 | `false`   | Whether or not article summaries are displayed on list pages. If a summary is not provided in the [front matter]({{< ref "front-matter" >}}), one will be auto generated using the `summaryLength` parameter in the [site configuration](#site-configuration). |
+| `list.showViews`                   | `false`   | Whether or not list views are displayed. This requires firebase integrations to be enabled, look below.                                                                                                                                                        |
+| `list.showLikes`                   | `false`   | Whether or not list likes are displayed. This requires firebase integrations to be enabled, look below.                                                                                                                                                        |
+| `list.showCards`                   | `false`   | Whether or not each article is displayed as a card or as simple inline text.                                                                                                                                                                                   |
+| `list.groupByYear`                 | `true`    | Whether or not articles are grouped by year on list pages.                                                                                                                                                                                                     |
+| `list.cardView`                    | `false`   | Display lists as a gallery of cards.                                                                                                                                                                                                                           |
+| `list.cardViewScreenWidth`         | `false`   | Enhance the width of card galleries in lists to take the full width available.                                                                                                                                                                                 |
+| `list.constrainItemsWidth`         | `false`   | Limit item width to `prose` to increase readability. Useful when no feature images are available.                                                                                                                                                              |
+| `list.showTableOfContents`         | `false`   | Whether or not the table of contents is displayed on articles.                                                                                                                                                                                                 |
+
+### Sitemap
+
+| Name                    | Default                | Description                                                                                                                                                                                 |
+| ----------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `sitemap.excludedKinds` | `["taxonomy", "term"]` | Kinds of content that should be excluded from the generated `/sitemap.xml` file. Refer to the [Hugo docs](https://gohugo.io/templates/section-templates/#page-kinds) for acceptable values. |
+
+### Taxonomy
+
+| Name                           | Default   | Description                                                                                                |
+| ------------------------------ | --------- | ---------------------------------------------------------------------------------------------------------- |
+| `taxonomy.showTermCount`       | `true`    | Whether or not the number of articles within a taxonomy term is displayed on the taxonomy listing.         |
+| `taxonomy.showHero`            | `false`   | Whether the thumbnail image will be shown as a hero image within each taxonomy page.                       |
+| `taxonomy.heroStyle`           | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`.    |
+| `taxonomy.showBreadcrumbs`     | `false`   | Whether or not breadcrumbs are displayed in the taxonomy header.                                           |
+| `taxonomy.showViews`           | `false`   | Whether or not article views are displayed. This requires firebase integrations to be enabled, look below. |
+| `taxonomy.showLikes`           | `false`   | Whether or not article likes are displayed. This requires firebase integrations to be enabled, look below. |
+| `taxonomy.showTableOfContents` | `false`   | Whether or not the table of contents is displayed on taxonomies.                                           |
+| `taxonomy.cardView`            | `false`   | Display lists as a gallery of cards.                                                                       |
+### Term
+
+| Name                       | Default   | Description                                                                                                |
+| -------------------------- | --------- | ---------------------------------------------------------------------------------------------------------- |
+| `term.showHero`            | `false`   | Whether the thumbnail image will be shown as a hero image within each term page.                           |
+| `term.heroStyle`           | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`.    |
+| `term.showBreadcrumbs`     | `false`   | Whether or not breadcrumbs are displayed in the term header.                                               |
+| `term.showViews`           | `false`   | Whether or not article views are displayed. This requires firebase integrations to be enabled, look below. |
+| `term.showLikes`           | `false`   | Whether or not article likes are displayed. This requires firebase integrations to be enabled, look below. |
+| `term.showTableOfContents` | `false`   | Whether or not the table of contents is displayed on terms.                                                |
+| `term.groupByYear`         | `false`   | Whether or not articles are grouped by year on term pages.                                                 |
+| `term.cardView`            | `false`   | Display lists as a gallery of cards.                                                                       |
+| `term.cardViewScreenWidth` | `false`   | Enhance the width of card galleries in lists to take the full width available.                             |
+### Firebase
+
+| Name                         | Default   | Description                                                                                                                                                                 |
+| ---------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `firebase.apiKey`            | _Not set_ | Firebase apiKey, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish.            |
+| `firebase.authDomain`        | _Not set_ | Firebase authDomain, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish.        |
+| `firebase.projectId`         | _Not set_ | Firebase projectId, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish.         |
+| `firebase.storageBucket`     | _Not set_ | Firebase storageBucket, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish.     |
+| `firebase.messagingSenderId` | _Not set_ | Firebase messagingSenderId, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish. |
+| `firebase.appId`             | _Not set_ | Firebase appId, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish.             |
+| `firebase.measurementId`     | _Not set_ | Firebase measurementId, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish.     |
+
+### Fathom Analytics
+
+| Name                     | Default   | Description                                                                                                                                    |
+| ------------------------ | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| `fathomAnalytics.site`   | _Not set_ | The site code generated by Fathom Analytics for the website. Refer to the [Analytics docs]({{< ref "partials#analytics" >}}) for more details. |
+| `fathomAnalytics.domain` | _Not set_ | If using a custom domain with Fathom Analytics, provide it here to serve `script.js` from the custom domain.                                   |
+
+### BuyMeACoffee
+
+| Name                                | Default   | Description                                                                 |
+| ----------------------------------- | --------- | --------------------------------------------------------------------------- |
+| `buymeacoffee.identifier`           | _Not set_ | The identifier to the target buymeacoffee account.                          |
+| `buymeacoffee.globalWidget`         | _Not set_ | Activate the global buymeacoffee widget.                                    |
+| `buymeacoffee.globalWidgetMessage`  | _Not set_ | Message what will be displayed the first time a new user lands on the site. |
+| `buymeacoffee.globalWidgetColor`    | _Not set_ | Widget color in hex format.                                                 |
+| `buymeacoffee.globalWidgetPosition` | _Not set_ | Position of the widget, i.e. "Left" or "Right"                              |
+### Verifications
+
+| Name                     | Default   | Description                                                                             |
+| ------------------------ | --------- | --------------------------------------------------------------------------------------- |
+| `verification.google`    | _Not set_ | The site verification string provided by Google to be included in the site metadata.    |
+| `verification.bing`      | _Not set_ | The site verification string provided by Bing to be included in the site metadata.      |
+| `verification.pinterest` | _Not set_ | The site verification string provided by Pinterest to be included in the site metadata. |
+| `verification.yandex`    | _Not set_ | The site verification string provided by Yandex to be included in the site metadata.    |
+<!-- prettier-ignore-end -->
+
+## Other configuration files
+
+The theme also includes a `markup.toml` configuration file. This file contains some important parameters that ensure that Hugo is correctly configured to generate sites built with Blowfish.
+
+Always ensure this file is present in the config directory and that the required values are set. Failure to do so may cause certain features to function incorrectly and could result in unintended behaviour.

exampleSite/content/docs/configuration/index.ja.md

@@ -0,0 +1,339 @@
+---
+title: "Configuration"
+date: 2020-08-14
+draft: false
+description: "All the configuration variables available in Blowfish."
+slug: "configuration"
+tags: ["config", "docs"]
+series: ["Documentation"]
+series_order: 4
+---
+
+Blowfish is a highly customisable theme and uses some of the latest Hugo features to simplify how it is configured.
+
+The theme ships with a default configuration that gets you up and running with a basic blog or static website.
+
+{{< alert "fire" >}}
+We just launched a CLI tool to help you get started with Blowfish. It will help you with installation and configuration. Install the CLI tool globally using:
+```bash
+npx blowfish-tools
+```
+{{< /alert >}}
+
+> Configuration files bundled with the theme are provided in TOML format as this is the default Hugo syntax. Feel free to convert your config to YAML or JSON if you wish.
+
+The default theme configuration is documented in each file so you can freely adjust the settings to meet your needs.
+
+{{< alert >}}
+As outlined in the [installation instructions]({{< ref "/docs/installation#set-up-theme-configuration-files" >}}), you should adjust your theme configuration by modifying the files in the `config/_default/` folder of your Hugo project and delete the `config.toml` file in your project root.
+{{< /alert >}}
+
+## Site configuration
+
+Standard Hugo configuration variables are respected throughout the theme, however there are some specific things that should be configured for the best experience.
+
+The site configuration is managed through the `config/_default/config.toml` file. The table below outlines all the settings that the Blowfish takes advantage of.
+
+Note that the variable names provided in this table use dot notation to simplify the TOML data structure (ie. `outputs.home` refers to `[outputs] home`).
+
+<!-- prettier-ignore-start -->
+| Name                     | Default                   | Description                                                                                                                                                                                                                                                                                                                                                                  |
+| ------------------------ | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `theme`                  | `"blowfish"`              | When using Hugo Modules this config value should be removed. For all other installation types, this must be set to `blowfish` for the theme to function.                                                                                                                                                                                                                     |
+| `baseURL`                | _Not set_                 | The URL to the root of the website.                                                                                                                                                                                                                                                                                                                                          |
+| `defaultContentLanguage` | `"en"`                    | This value determines the default language of theme components and content. Refer to the [language and i18n](#language-and-i18n) section below for supported language codes.                                                                                                                                                                                                 |
+| `enableRobotsTXT`        | `true`                    | When enabled, a `robots.txt` file will be created in the site root that allows search engines to crawl the entire site. If you prefer to provide your own pre-made `robots.txt`, set to `false` and place your file in the `static` directory. For complete control, you may provide a [custom layout]({{< ref "content-examples#custom-layouts" >}}) to generate this file. |
+| `paginate`               | `10`                      | The number of articles listed on each page of the article listing.                                                                                                                                                                                                                                                                                                           |
+| `summaryLength`          | `0`                       | The number of words that are used to generate the article summary when one is not provided in the [front matter]({{< ref "front-matter" >}}). A value of `0` will use the first sentence. This value has no effect when summaries are hidden.                                                                                                                                |
+| `outputs.home`           | `["HTML", "RSS", "JSON"]` | The output formats that are generated for the site. Blowfish requires HTML, RSS and JSON for all theme components to work correctly.                                                                                                                                                                                                                                         |
+| `permalinks`             | _Not set_                 | Refer to the [Hugo docs](https://gohugo.io/content-management/urls/#permalinks) for permalink configuration.                                                                                                                                                                                                                                                                 |
+| `taxonomies`             | _Not set_                 | Refer to the [Organising content]({{< ref "getting-started#organising-content" >}}) section for taxonomy configuration.                                                                                                                                                                                                                                                      |
+<!-- prettier-ignore-end -->
+
+## Thumbnails
+
+Blowfish was built so it would be easy to add visual support to your articles. If your familiar with Hugo article structure, you just need to place an image file (almost all formats are supported but we recommend `.png` or `.jpg`) that starts with `feature*` inside your article folder. And that's it, Blowfish will then able to both use the image as a thumbnail within your website as well as for <a target="_blank" href="https://oembed.com/">oEmbed</a> cards across social platforms. 
+
+[Here]({{< ref "thumbnails" >}}) is also a guide with more info and a [sample]({{< ref "thumbnail_sample" >}}) if you want to see how you can do it.
+
+## Language and i18n
+
+Blowfish is optimised for full multilingual websites and theme assets are translated into several languages out of the box. The language configuration allows you to generate multiple versions of your content to provide a customised experience to your visitors in their native language.
+
+The theme currently supports the following languages by default:
+
+| Language                       | Code    |
+| ------------------------------ | ------- |
+| Arabic                       | `ar`    |
+| Bulgarian                    | `bg`    |
+| Bengali                      | `bn`    |
+| Catalan                      | `ca`    |
+| Czech                        | `cs`    |
+| German                       | `de`    |
+| English                      | `en`    |
+| Spanish (Spain)              | `es`    |
+| Finnish                      | `fi`    |
+| French                       | `fr`    |
+| Hebrew                       | `he`    |
+| Croatian                     | `hr`    |
+| Hungarian                    | `hu`    |
+| Indonesian                   | `id`    |
+| Italian                      | `it`    |
+| Japanese                     | `ja`    |
+| Korean                       | `ko`    |
+| Polish                       | `pl`    |
+| Portuguese (Brazil)          | `pt-br` |
+| Portuguese (Portugal)        | `pt-pt` |
+| Romanian                     | `ro`    |
+| Russian                      | `ru`    |
+| Turkish                      | `tr`    |
+| Vietnamese                   | `vi`    |
+| Simplified Chinese (China)   | `zh-cn` |
+| Traditional Chinese (Taiwan) | `zh-tw` |
+
+
+
+The default translations can be overridden by creating a custom file in `i18n/[code].yaml` that contains the translation strings. You can also use this method to add new languages. If you'd like to share a new translation with the community, please [open a pull request](https://github.com/nunocoracao/blowfish/pulls).
+
+### Configuration
+
+In order to be as flexible as possible, a language configuration file needs to be created for each language on the website. By default Blowfish includes an English language configuration at `config/_default/languages.en.toml`.
+
+The default file can be used as a template to create additional languages, or renamed if you wish to author your website in a language other than English. Simply name the file using the format `languages.[language-code].toml`.
+
+{{< alert >}}
+**Note:** Ensure the `defaultContentLanguage` parameter in the [site configuration](#site-configuration) matches the language code in your language config filename.  
+{{< /alert >}}
+
+
+#### Global
+
+<!-- prettier-ignore-start -->
+| Name           | Default      | Description                                                                                                                                                                                                                                                                                            |
+| -------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `languageCode` | `"en"`       | The Hugo language code for this file. It can be a top-level language (ie. `en`) or a sub-variant (ie. `en-au`) and should match the language code in the filename. Hugo expects this value to always be in lowercase. For proper HTML compliance, set the `isoCode` parameter which is case-sensitive. |
+| `languageName` | `"English"`  | The name of the language.                                                                                                                                                                                                                                                                              |
+| `weight`       | `1`          | The weight determines the order of languages when building multilingual sites.                                                                                                                                                                                                                         |
+| `title`        | `"Blowfish"` | The title of the website. This will be displayed in the site header and footer.                                                                                                                                                                                                                        |
+<!-- prettier-ignore-end -->
+
+#### Params
+
+<!-- prettier-ignore-start -->
+| Name                   | Default            | Description                                                                                                                                                                                                                                                                                                                |
+| ---------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `params.displayName`   | `"EN"`             | The name used when the language appears on the website.                                                                                                                                                                                                                                                                    |
+| `params.isoCode`       | `"en"`             | The ISO language code for HTML metadata purposes. It can be a top-level language (ie. `en`) or a sub-variant (ie. `en-AU`).                                                                                                                                                                                                |
+| `params.rtl`           | `false`            | Whether or not this is a RTL language. Set to `true` to reflow content from right-to-left. Blowfish fully supports using RTL and LTR languages at the same time and will dynamically adjust to both.                                                                                                                       |
+| `params.dateFormat`    | `"2 January 2006"` | How dates are formatted in this language. Refer to the [Hugo docs](https://gohugo.io/functions/format/#gos-layout-string) for acceptable formats.                                                                                                                                                                          |
+| `params.logo`          | _Not set_          | The relative path to the site logo file within the `assets/` folder. The logo file should be provided at 2x resolution and supports any image dimensions.                                                                                                                                                                  |
+| `params.secondaryLogo` | _Not set_          | The relative path to the secondary site logo file within the `assets/` folder. The logo file should be provided at 2x resolution and supports any image dimensions. This should have an inverted/contrasting colour scheme to `logo`. If set, this logo will be shown when users toggle from the `defaultAppearance` mode. |
+| `params.description`   | _Not set_          | The website description. This will be used in the site metadata.                                                                                                                                                                                                                                                           |
+| `params.copyright`     | _Not set_          | A Markdown string for the site footer copyright message can include the placeholder { year } to dynamically insert the current year. If none is provided, Blowfish will automatically generate a copyright string using the site `title`.                                                                                  |
+
+
+<!-- prettier-ignore-end -->
+
+#### Author
+| Name              | Default   | Description                                                                                                                                                                                                                                                                                                                 |
+| ----------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `author.name`     | _Not set_ | The author's name. This will be displayed in article footers, and on the homepage when the profile layout is used.                                                                                                                                                                                                          |
+| `author.image`    | _Not set_ | Path to the image file of the author. The image should be a 1:1 aspect ratio. The image can be placed in the site's `assets/` folder or can be external url.                                                                                                                                                                                                     |
+| `author.headline` | _Not set_ | A Markdown string containing the author's headline. It will be displayed on the profile homepage under the author's name.                                                                                                                                                                                                   |
+| `author.bio`      | _Not set_ | A Markdown string containing the author's bio. It will be displayed in article footers.                                                                                                                                                                                                                                     |
+| `author.links`    | _Not set_ | The links to display alongside the author's details. The config file contains example links which can simply be uncommented to enable. The order that the links are displayed is determined by the order they appear in the array. Custom links can be added by providing corresponding SVG icon assets in `assets/icons/`. |
+<!-- prettier-ignore-end -->
+
+### Menus
+
+Blowfish also supports language-specific menu configurations. Menu config files follow the same naming format as the languages file. Simply provide the language code in the file name to tell Hugo which language the file relates to.
+
+Menu config files are named with the format `menus.[language-code].toml`. Always ensure that the language code used in the menus configuration matches the languages configuration.
+
+The [Getting Started]({{< ref "getting-started#menus" >}}) section explains more about the structure of this file. You can also refer to the [Hugo menu docs](https://gohugo.io/content-management/menus/) for more configuration examples.
+
+## Theme parameters
+
+Blowfish provides a large number of configuration parameters that control how the theme functions. The table below outlines every available parameter in the `config/_default/params.toml` file.
+
+Many of the article defaults here can be overridden on a per article basis by specifying it in the front matter. Refer to the [Front Matter]({{< ref "front-matter" >}}) section for further details.
+
+<!-- prettier-ignore-start -->
+
+### Global
+
+| Name                            | Default      | Description                                                                                                                                                                                                                                       |
+| ------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `colorScheme`                   | `"blowfish"` | The theme colour scheme to use. Valid values are `blowfish` (default), `avocado`, `fire`, `ocean`, `forest`, `princess`, `neon`, `bloody`, `terminal`, `marvel`, `noir`, `autumn`, `congo`, and`slate`. Refer to the [Colour Schemes]({{< ref "getting-started#colour-schemes" >}}) section for more details.                              |
+| `defaultAppearance`             | `"light"`    | The default theme appearance, either `light` or `dark`.                                                                                                                                                                                           |
+| `autoSwitchAppearance`          | `true`       | Whether the theme appearance automatically switches based upon the visitor's operating system preference. Set to `false` to force the site to always use the `defaultAppearance`.                                                                 |
+| `enableSearch`                  | `false`      | Whether site search is enabled. Set to `true` to enable search functionality. Note that the search feature depends on the `outputs.home` setting in the [site configuration](#site-configuration) being set correctly.                            |
+| `enableCodeCopy`                | `false`      | Whether copy-to-clipboard buttons are enabled for `<code>` blocks. The `highlight.noClasses` parameter must be set to `false` for code copy to function correctly. Read more about [other configuration files](#other-configuration-files) below. |
+| `mainSections`                  | _Not set_    | The sections that should be displayed in the recent articles list. If not provided the section with the greatest number of articles is used.                                                                                                      |
+| `showViews`                     | _Not set_    | Whether or not articles and list views are displayed. This requires firebase integrations to be enabled, look below.                                                                                                                              |
+| `showLikes`                     | _Not set_    | Whether or not articles and list likes are displayed. This requires firebase integrations to be enabled, look below.                                                                                                                              |
+| `robots`                        | _Not set_    | String that indicates how robots should handle your site. If set, it will be output in the page head. Refer to [Google's docs](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) for valid values.            |
+| `disableImageZoom`              | `false`      | Disables image zoom feature across all the images in the site.                                                                                                                                                                                    |
+| `disableImageOptimization`      | `false`      | Disables image resize and optimization features across all the images in the site.                                                                                                                                                                |
+| `disableTextInHeader`           | `false`      | Disables text in header, useful for logo based headers.                                                                                                                                                                                           |
+| `defaultBackgroundImage`        | _Not set_    | Default background image for both `background` homepage layout and `background` hero style                                                                                                                                                        |
+| `defaultFeaturedImage`          | _Not set_    | Default background image for all `featured` images across articles, will be overridden by a local `featured` image.                                                                                                                               |
+| `highlightCurrentMenuArea`      | _Not set_    | Marks menu entries in the main menu when selected                                                                                                                                                                                                 |
+| `smartTOC`                      | _Not set_    | Activate smart Table of Contents, items in view will be highlighted.                                                                                                                                                                              |
+| `smartTOCHideUnfocusedChildren` | _Not set_    | When smart Table of Contents is turned on, this will hide deeper levels of the table when they are not in focus.                                                                                                                                  |
+
+### Header
+
+| Name            | Default   | Description                                                                                                         |
+| --------------- | --------- | ------------------------------------------------------------------------------------------------------------------- |
+| `header.layout` | `"basic"` | Defines the header for the entire site, supported values are `basic`, `fixed`, `fixed-fill`, and `fixed-fill-blur`. |
+### Footer
+
+| Name                            | Default | Description                                                                                                                                                                                                               |
+| ------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `footer.showMenu`               | `true`  | Show/hide the footer menu, which can be configured in the `[[footer]]` section of the `config/_default/menus.en.toml` file.                                                                                               |
+| `footer.showCopyright`          | `true`  | Whether or not to show the copyright string in the site footer. Note that the string itself can be customised using the `copyright` parameter in the [languages configuration](#language-and-i18n).                       |
+| `footer.showThemeAttribution`   | `true`  | Whether or not to show the "powered by" theme attribution in the site footer. If you choose to disable this message, please consider attributing the theme somewhere else on your site (for example, on your about page). |
+| `footer.showAppearanceSwitcher` | `false` | Whether or not to show the appearance switcher in the site footer. The browser's local storage is used to persist the visitor's preference.                                                                               |
+| `footer.showScrollToTop`        | `true`  | When set to `true` the scroll to top arrow is displayed.                                                                                                                                                                  |
+### Homepage
+
+| Name                            | Default     | Description                                                                                                                                                                                                                                                                                                        |
+| ------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `homepage.layout`               | `"profile"` | The layout of the homepage. Valid values are `page`, `profile`, `hero`, `card`, `background`, or `custom`. When set to `custom`, you must provide your own layout by creating a `/layouts/partials/home/custom.html` file. Refer to the [Homepage Layout]({{< ref "homepage-layout" >}}) section for more details. |
+| `homepage.homepageImage`        | _Not set_   | Image to be used in `hero` and `card` layouts. Can be set as local image from asset directory or external image url. Refer to the [Homepage Layout]({{< ref "homepage-layout" >}}) section for more details.                                                                                                                                                                             |
+| `homepage.showRecent`           | `false`     | Whether or not to display the recent articles list on the homepage.                                                                                                                                                                                                                                                |
+| `homepage.showRecentItems`      | 5           | How many articles to display if showRecent is true. If variable is set to 0 or if it isn't defined the system will default to 5 articles.                                                                                                                                                                          |
+| `homepage.showMoreLink`         | `false`     | Whether or not to display a show more link at the end of your posts that takes the user to a predefined place.                                                                                                                                                                                                     |
+| `homepage.showMoreLinkDest`     | `/posts`    | The destination of the show more button.                                                                                                                                                                                                                                                                           |
+| `homepage.cardView`             | `false`     | Display recent articles as a gallery of cards.                                                                                                                                                                                                                                                                     |
+| `homepage.cardViewScreenWidth`  | `false`     | Enhance the width of the recent articles card gallery to take the full width available.                                                                                                                                                                                                                            |
+| `homepage.layoutBackgroundBlur` | `false`     | Makes the background image in the homepage layout blur with the scroll                                                                                                                                                                                                                                             |
+### Article
+
+| Name                                  | Default   | Description                                                                                                                                                                                                                                                                                                            |
+| ------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `article.showDate`                    | `true`    | Whether or not article dates are displayed.                                                                                                                                                                                                                                                                            |
+| `article.showViews`                   | `false`   | Whether or not article views are displayed. This requires firebase integrations to be enabled, look below.                                                                                                                                                                                                             |
+| `article.showLikes`                   | `false`   | Whether or not article likes are displayed. This requires firebase integrations to be enabled, look below.                                                                                                                                                                                                             |
+| `article.showDateOnlyInArticle`       | `false`   | Show date within article even if not displayed in article listings/cards.                                                                                                                                                                                                                                              |
+| `article.showDateUpdated`             | `false`   | Whether or not the dates articles were updated are displayed.                                                                                                                                                                                                                                                          |
+| `article.showAuthor`                  | `true`    | Whether or not the author box is displayed in the article footer.                                                                                                                                                                                                                                                      |
+| `article.showHero`                    | `false`   | Whether the thumbnail image will be shown as a hero image within each article page.                                                                                                                                                                                                                                    |
+| `article.heroStyle`                   | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`.                                                                                                                                                                                                                |
+| `article.layoutBackgroundBlur`        | `true`    | Makes the background image in the background article heroStyle blur with the scroll                                                                                                                                                                                                                                    |
+| `article.layoutBackgroundHeaderSpace` | `true`    | Add space between the header and the body.                                                                                                                                                                                                                                                                             |
+| `article.showBreadcrumbs`             | `false`   | Whether or not breadcrumbs are displayed in the article header.                                                                                                                                                                                                                                                        |
+| `article.showDraftLabel`              | `true`    | Whether or not the draft indicator is shown next to articles when site is built with `--buildDrafts`.                                                                                                                                                                                                                  |
+| `article.showEdit`                    | `false`   | Whether or not the link to edit the article content should be displayed.                                                                                                                                                                                                                                               |
+| `article.editURL`                     | _Not set_ | When `article.showEdit` is active, the URL for the edit link.                                                                                                                                                                                                                                                          |
+| `article.editAppendPath`              | `true`    | When `article.showEdit` is active, whether or not the path to the current article should be appended to the URL set at `article.editURL`.                                                                                                                                                                              |
+| `article.seriesOpened`                | `false`   | Whether or not the series module will be displayed open by default or not.                                                                                                                                                                                                                                             |
+| `article.showHeadingAnchors`          | `true`    | Whether or not heading anchor links are displayed alongside headings within articles.                                                                                                                                                                                                                                  |
+| `article.showPagination`              | `true`    | Whether or not the next/previous article links are displayed in the article footer.                                                                                                                                                                                                                                    |
+| `article.invertPagination`            | `false`   | Whether or not to flip the direction of the next/previous article links.                                                                                                                                                                                                                                               |
+| `article.showReadingTime`             | `true`    | Whether or not article reading times are displayed.                                                                                                                                                                                                                                                                    |
+| `article.showTableOfContents`         | `false`   | Whether or not the table of contents is displayed on articles.                                                                                                                                                                                                                                                         |
+| `article.showRelatedContent`          | `false`   | Display related content for each post. Might required additional configuration to your `config.toml`. Please check the theme `config.toml` if you want to enable this feature and copy all the relevant *related* entries. Also check [Hugo's docs](https://gohugo.io/content-management/related/) on related content. |
+| `article.relatedContentLimit`         | `3`       | Limit of related articles to display if `      showRelatedContent` is turned on.                                                                                                                                                                                                                                       |
+| `article.showTaxonomies`              | `false`   | Whether or not the taxonomies related to this article are displayed.                                                                                                                                                                                                                                                   |
+| `article.showAuthorsBadges`           | `false`   | Whether the `authors` taxonomies are are displayed in the article or list header. This requires the setup of `multiple authors` and the `authors` taxonomy. Check [this page]({{< ref "multi-author" >}}) for more details on how to configure that feature.                                                           |
+| `article.showWordCount`               | `false`   | Whether or not article word counts are displayed.                                                                                                                                                                                                                                                                      |
+| `article.showComments`                | `false`   | Whether or not the [comments partial]({{< ref "partials#comments" >}}) is included after the article footer.                                                                                                                                                                                                           |
+| `article.sharingLinks`                | _Not set_ | Which sharing links to display at the end of each article. When not provided, or set to `false` no links will be displayed.  Available values are: "linkedin", "twitter", "reddit", "pinterest", "facebook", "email", "whatsapp", and "telegram"                                                                       |
+| `article.showZenMode`                 | `false`   | Flag to activate Zen Mode reading feature for articles.                                                                                                                                                                                                                                                                |
+
+### List
+
+| Name                               | Default   | Description                                                                                                                                                                                                                                                    |
+| ---------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `list.showHero`                    | `false`   | Whether the thumbnail image will be shown as a hero image within each list page.                                                                                                                                                                               |
+| `list.heroStyle`                   | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`.                                                                                                                                                        |
+| `list.showBreadcrumbs`             | `false`   | Whether or not breadcrumbs are displayed in the header on list pages.                                                                                                                                                                                          |
+| `list.layoutBackgroundBlur`        | `true`    | Makes the background image in the background list heroStyle blur with the scroll                                                                                                                                                                               |
+| `list.layoutBackgroundHeaderSpace` | `true`    | Add space between the header and the body.                                                                                                                                                                                                                     |
+| `list.showTableOfContents`         | `false`   | Whether or not the table of contents is displayed on list pages.                                                                                                                                                                                               |
+| `list.showSummary`                 | `false`   | Whether or not article summaries are displayed on list pages. If a summary is not provided in the [front matter]({{< ref "front-matter" >}}), one will be auto generated using the `summaryLength` parameter in the [site configuration](#site-configuration). |
+| `list.showViews`                   | `false`   | Whether or not list views are displayed. This requires firebase integrations to be enabled, look below.                                                                                                                                                        |
+| `list.showLikes`                   | `false`   | Whether or not list likes are displayed. This requires firebase integrations to be enabled, look below.                                                                                                                                                        |
+| `list.showCards`                   | `false`   | Whether or not each article is displayed as a card or as simple inline text.                                                                                                                                                                                   |
+| `list.groupByYear`                 | `true`    | Whether or not articles are grouped by year on list pages.                                                                                                                                                                                                     |
+| `list.cardView`                    | `false`   | Display lists as a gallery of cards.                                                                                                                                                                                                                           |
+| `list.cardViewScreenWidth`         | `false`   | Enhance the width of card galleries in lists to take the full width available.                                                                                                                                                                                 |
+| `list.constrainItemsWidth`         | `false`   | Limit item width to `prose` to increase readability. Useful when no feature images are available.                                                                                                                                                              |
+| `list.showTableOfContents`         | `false`   | Whether or not the table of contents is displayed on articles.                                                                                                                                                                                                 |
+
+### Sitemap
+
+| Name                    | Default                | Description                                                                                                                                                                                 |
+| ----------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `sitemap.excludedKinds` | `["taxonomy", "term"]` | Kinds of content that should be excluded from the generated `/sitemap.xml` file. Refer to the [Hugo docs](https://gohugo.io/templates/section-templates/#page-kinds) for acceptable values. |
+
+### Taxonomy
+
+| Name                           | Default   | Description                                                                                                |
+| ------------------------------ | --------- | ---------------------------------------------------------------------------------------------------------- |
+| `taxonomy.showTermCount`       | `true`    | Whether or not the number of articles within a taxonomy term is displayed on the taxonomy listing.         |
+| `taxonomy.showHero`            | `false`   | Whether the thumbnail image will be shown as a hero image within each taxonomy page.                       |
+| `taxonomy.heroStyle`           | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`.    |
+| `taxonomy.showBreadcrumbs`     | `false`   | Whether or not breadcrumbs are displayed in the taxonomy header.                                           |
+| `taxonomy.showViews`           | `false`   | Whether or not article views are displayed. This requires firebase integrations to be enabled, look below. |
+| `taxonomy.showLikes`           | `false`   | Whether or not article likes are displayed. This requires firebase integrations to be enabled, look below. |
+| `taxonomy.showTableOfContents` | `false`   | Whether or not the table of contents is displayed on taxonomies.                                           |
+| `taxonomy.cardView`            | `false`   | Display lists as a gallery of cards.                                                                       |
+### Term
+
+| Name                       | Default   | Description                                                                                                |
+| -------------------------- | --------- | ---------------------------------------------------------------------------------------------------------- |
+| `term.showHero`            | `false`   | Whether the thumbnail image will be shown as a hero image within each term page.                           |
+| `term.heroStyle`           | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`.    |
+| `term.showBreadcrumbs`     | `false`   | Whether or not breadcrumbs are displayed in the term header.                                               |
+| `term.showViews`           | `false`   | Whether or not article views are displayed. This requires firebase integrations to be enabled, look below. |
+| `term.showLikes`           | `false`   | Whether or not article likes are displayed. This requires firebase integrations to be enabled, look below. |
+| `term.showTableOfContents` | `false`   | Whether or not the table of contents is displayed on terms.                                                |
+| `term.groupByYear`         | `false`   | Whether or not articles are grouped by year on term pages.                                                 |
+| `term.cardView`            | `false`   | Display lists as a gallery of cards.                                                                       |
+| `term.cardViewScreenWidth` | `false`   | Enhance the width of card galleries in lists to take the full width available.                             |
+### Firebase
+
+| Name                         | Default   | Description                                                                                                                                                                 |
+| ---------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `firebase.apiKey`            | _Not set_ | Firebase apiKey, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish.            |
+| `firebase.authDomain`        | _Not set_ | Firebase authDomain, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish.        |
+| `firebase.projectId`         | _Not set_ | Firebase projectId, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish.         |
+| `firebase.storageBucket`     | _Not set_ | Firebase storageBucket, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish.     |
+| `firebase.messagingSenderId` | _Not set_ | Firebase messagingSenderId, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish. |
+| `firebase.appId`             | _Not set_ | Firebase appId, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish.             |
+| `firebase.measurementId`     | _Not set_ | Firebase measurementId, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish.     |
+
+### Fathom Analytics
+
+| Name                     | Default   | Description                                                                                                                                    |
+| ------------------------ | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| `fathomAnalytics.site`   | _Not set_ | The site code generated by Fathom Analytics for the website. Refer to the [Analytics docs]({{< ref "partials#analytics" >}}) for more details. |
+| `fathomAnalytics.domain` | _Not set_ | If using a custom domain with Fathom Analytics, provide it here to serve `script.js` from the custom domain.                                   |
+
+### BuyMeACoffee
+
+| Name                                | Default   | Description                                                                 |
+| ----------------------------------- | --------- | --------------------------------------------------------------------------- |
+| `buymeacoffee.identifier`           | _Not set_ | The identifier to the target buymeacoffee account.                          |
+| `buymeacoffee.globalWidget`         | _Not set_ | Activate the global buymeacoffee widget.                                    |
+| `buymeacoffee.globalWidgetMessage`  | _Not set_ | Message what will be displayed the first time a new user lands on the site. |
+| `buymeacoffee.globalWidgetColor`    | _Not set_ | Widget color in hex format.                                                 |
+| `buymeacoffee.globalWidgetPosition` | _Not set_ | Position of the widget, i.e. "Left" or "Right"                              |
+### Verifications
+
+| Name                     | Default   | Description                                                                             |
+| ------------------------ | --------- | --------------------------------------------------------------------------------------- |
+| `verification.google`    | _Not set_ | The site verification string provided by Google to be included in the site metadata.    |
+| `verification.bing`      | _Not set_ | The site verification string provided by Bing to be included in the site metadata.      |
+| `verification.pinterest` | _Not set_ | The site verification string provided by Pinterest to be included in the site metadata. |
+| `verification.yandex`    | _Not set_ | The site verification string provided by Yandex to be included in the site metadata.    |
+<!-- prettier-ignore-end -->
+
+## Other configuration files
+
+The theme also includes a `markup.toml` configuration file. This file contains some important parameters that ensure that Hugo is correctly configured to generate sites built with Blowfish.
+
+Always ensure this file is present in the config directory and that the required values are set. Failure to do so may cause certain features to function incorrectly and could result in unintended behaviour.

exampleSite/content/docs/configuration/index.zh-cn.md

@@ -0,0 +1,339 @@
+---
+title: "Configuration"
+date: 2020-08-14
+draft: false
+description: "All the configuration variables available in Blowfish."
+slug: "configuration"
+tags: ["config", "docs"]
+series: ["Documentation"]
+series_order: 4
+---
+
+Blowfish is a highly customisable theme and uses some of the latest Hugo features to simplify how it is configured.
+
+The theme ships with a default configuration that gets you up and running with a basic blog or static website.
+
+{{< alert "fire" >}}
+We just launched a CLI tool to help you get started with Blowfish. It will help you with installation and configuration. Install the CLI tool globally using:
+```bash
+npx blowfish-tools
+```
+{{< /alert >}}
+
+> Configuration files bundled with the theme are provided in TOML format as this is the default Hugo syntax. Feel free to convert your config to YAML or JSON if you wish.
+
+The default theme configuration is documented in each file so you can freely adjust the settings to meet your needs.
+
+{{< alert >}}
+As outlined in the [installation instructions]({{< ref "/docs/installation#set-up-theme-configuration-files" >}}), you should adjust your theme configuration by modifying the files in the `config/_default/` folder of your Hugo project and delete the `config.toml` file in your project root.
+{{< /alert >}}
+
+## Site configuration
+
+Standard Hugo configuration variables are respected throughout the theme, however there are some specific things that should be configured for the best experience.
+
+The site configuration is managed through the `config/_default/config.toml` file. The table below outlines all the settings that the Blowfish takes advantage of.
+
+Note that the variable names provided in this table use dot notation to simplify the TOML data structure (ie. `outputs.home` refers to `[outputs] home`).
+
+<!-- prettier-ignore-start -->
+| Name                     | Default                   | Description                                                                                                                                                                                                                                                                                                                                                                  |
+| ------------------------ | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `theme`                  | `"blowfish"`              | When using Hugo Modules this config value should be removed. For all other installation types, this must be set to `blowfish` for the theme to function.                                                                                                                                                                                                                     |
+| `baseURL`                | _Not set_                 | The URL to the root of the website.                                                                                                                                                                                                                                                                                                                                          |
+| `defaultContentLanguage` | `"en"`                    | This value determines the default language of theme components and content. Refer to the [language and i18n](#language-and-i18n) section below for supported language codes.                                                                                                                                                                                                 |
+| `enableRobotsTXT`        | `true`                    | When enabled, a `robots.txt` file will be created in the site root that allows search engines to crawl the entire site. If you prefer to provide your own pre-made `robots.txt`, set to `false` and place your file in the `static` directory. For complete control, you may provide a [custom layout]({{< ref "content-examples#custom-layouts" >}}) to generate this file. |
+| `paginate`               | `10`                      | The number of articles listed on each page of the article listing.                                                                                                                                                                                                                                                                                                           |
+| `summaryLength`          | `0`                       | The number of words that are used to generate the article summary when one is not provided in the [front matter]({{< ref "front-matter" >}}). A value of `0` will use the first sentence. This value has no effect when summaries are hidden.                                                                                                                                |
+| `outputs.home`           | `["HTML", "RSS", "JSON"]` | The output formats that are generated for the site. Blowfish requires HTML, RSS and JSON for all theme components to work correctly.                                                                                                                                                                                                                                         |
+| `permalinks`             | _Not set_                 | Refer to the [Hugo docs](https://gohugo.io/content-management/urls/#permalinks) for permalink configuration.                                                                                                                                                                                                                                                                 |
+| `taxonomies`             | _Not set_                 | Refer to the [Organising content]({{< ref "getting-started#organising-content" >}}) section for taxonomy configuration.                                                                                                                                                                                                                                                      |
+<!-- prettier-ignore-end -->
+
+## Thumbnails
+
+Blowfish was built so it would be easy to add visual support to your articles. If your familiar with Hugo article structure, you just need to place an image file (almost all formats are supported but we recommend `.png` or `.jpg`) that starts with `feature*` inside your article folder. And that's it, Blowfish will then able to both use the image as a thumbnail within your website as well as for <a target="_blank" href="https://oembed.com/">oEmbed</a> cards across social platforms. 
+
+[Here]({{< ref "thumbnails" >}}) is also a guide with more info and a [sample]({{< ref "thumbnail_sample" >}}) if you want to see how you can do it.
+
+## Language and i18n
+
+Blowfish is optimised for full multilingual websites and theme assets are translated into several languages out of the box. The language configuration allows you to generate multiple versions of your content to provide a customised experience to your visitors in their native language.
+
+The theme currently supports the following languages by default:
+
+| Language                       | Code    |
+| ------------------------------ | ------- |
+| Arabic                       | `ar`    |
+| Bulgarian                    | `bg`    |
+| Bengali                      | `bn`    |
+| Catalan                      | `ca`    |
+| Czech                        | `cs`    |
+| German                       | `de`    |
+| English                      | `en`    |
+| Spanish (Spain)              | `es`    |
+| Finnish                      | `fi`    |
+| French                       | `fr`    |
+| Hebrew                       | `he`    |
+| Croatian                     | `hr`    |
+| Hungarian                    | `hu`    |
+| Indonesian                   | `id`    |
+| Italian                      | `it`    |
+| Japanese                     | `ja`    |
+| Korean                       | `ko`    |
+| Polish                       | `pl`    |
+| Portuguese (Brazil)          | `pt-br` |
+| Portuguese (Portugal)        | `pt-pt` |
+| Romanian                     | `ro`    |
+| Russian                      | `ru`    |
+| Turkish                      | `tr`    |
+| Vietnamese                   | `vi`    |
+| Simplified Chinese (China)   | `zh-cn` |
+| Traditional Chinese (Taiwan) | `zh-tw` |
+
+
+
+The default translations can be overridden by creating a custom file in `i18n/[code].yaml` that contains the translation strings. You can also use this method to add new languages. If you'd like to share a new translation with the community, please [open a pull request](https://github.com/nunocoracao/blowfish/pulls).
+
+### Configuration
+
+In order to be as flexible as possible, a language configuration file needs to be created for each language on the website. By default Blowfish includes an English language configuration at `config/_default/languages.en.toml`.
+
+The default file can be used as a template to create additional languages, or renamed if you wish to author your website in a language other than English. Simply name the file using the format `languages.[language-code].toml`.
+
+{{< alert >}}
+**Note:** Ensure the `defaultContentLanguage` parameter in the [site configuration](#site-configuration) matches the language code in your language config filename.  
+{{< /alert >}}
+
+
+#### Global
+
+<!-- prettier-ignore-start -->
+| Name           | Default      | Description                                                                                                                                                                                                                                                                                            |
+| -------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `languageCode` | `"en"`       | The Hugo language code for this file. It can be a top-level language (ie. `en`) or a sub-variant (ie. `en-au`) and should match the language code in the filename. Hugo expects this value to always be in lowercase. For proper HTML compliance, set the `isoCode` parameter which is case-sensitive. |
+| `languageName` | `"English"`  | The name of the language.                                                                                                                                                                                                                                                                              |
+| `weight`       | `1`          | The weight determines the order of languages when building multilingual sites.                                                                                                                                                                                                                         |
+| `title`        | `"Blowfish"` | The title of the website. This will be displayed in the site header and footer.                                                                                                                                                                                                                        |
+<!-- prettier-ignore-end -->
+
+#### Params
+
+<!-- prettier-ignore-start -->
+| Name                   | Default            | Description                                                                                                                                                                                                                                                                                                                |
+| ---------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `params.displayName`   | `"EN"`             | The name used when the language appears on the website.                                                                                                                                                                                                                                                                    |
+| `params.isoCode`       | `"en"`             | The ISO language code for HTML metadata purposes. It can be a top-level language (ie. `en`) or a sub-variant (ie. `en-AU`).                                                                                                                                                                                                |
+| `params.rtl`           | `false`            | Whether or not this is a RTL language. Set to `true` to reflow content from right-to-left. Blowfish fully supports using RTL and LTR languages at the same time and will dynamically adjust to both.                                                                                                                       |
+| `params.dateFormat`    | `"2 January 2006"` | How dates are formatted in this language. Refer to the [Hugo docs](https://gohugo.io/functions/format/#gos-layout-string) for acceptable formats.                                                                                                                                                                          |
+| `params.logo`          | _Not set_          | The relative path to the site logo file within the `assets/` folder. The logo file should be provided at 2x resolution and supports any image dimensions.                                                                                                                                                                  |
+| `params.secondaryLogo` | _Not set_          | The relative path to the secondary site logo file within the `assets/` folder. The logo file should be provided at 2x resolution and supports any image dimensions. This should have an inverted/contrasting colour scheme to `logo`. If set, this logo will be shown when users toggle from the `defaultAppearance` mode. |
+| `params.description`   | _Not set_          | The website description. This will be used in the site metadata.                                                                                                                                                                                                                                                           |
+| `params.copyright`     | _Not set_          | A Markdown string for the site footer copyright message can include the placeholder { year } to dynamically insert the current year. If none is provided, Blowfish will automatically generate a copyright string using the site `title`.                                                                                  |
+
+
+<!-- prettier-ignore-end -->
+
+#### Author
+| Name              | Default   | Description                                                                                                                                                                                                                                                                                                                 |
+| ----------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `author.name`     | _Not set_ | The author's name. This will be displayed in article footers, and on the homepage when the profile layout is used.                                                                                                                                                                                                          |
+| `author.image`    | _Not set_ | Path to the image file of the author. The image should be a 1:1 aspect ratio. The image can be placed in the site's `assets/` folder or can be external url.                                                                                                                                                                                                     |
+| `author.headline` | _Not set_ | A Markdown string containing the author's headline. It will be displayed on the profile homepage under the author's name.                                                                                                                                                                                                   |
+| `author.bio`      | _Not set_ | A Markdown string containing the author's bio. It will be displayed in article footers.                                                                                                                                                                                                                                     |
+| `author.links`    | _Not set_ | The links to display alongside the author's details. The config file contains example links which can simply be uncommented to enable. The order that the links are displayed is determined by the order they appear in the array. Custom links can be added by providing corresponding SVG icon assets in `assets/icons/`. |
+<!-- prettier-ignore-end -->
+
+### Menus
+
+Blowfish also supports language-specific menu configurations. Menu config files follow the same naming format as the languages file. Simply provide the language code in the file name to tell Hugo which language the file relates to.
+
+Menu config files are named with the format `menus.[language-code].toml`. Always ensure that the language code used in the menus configuration matches the languages configuration.
+
+The [Getting Started]({{< ref "getting-started#menus" >}}) section explains more about the structure of this file. You can also refer to the [Hugo menu docs](https://gohugo.io/content-management/menus/) for more configuration examples.
+
+## Theme parameters
+
+Blowfish provides a large number of configuration parameters that control how the theme functions. The table below outlines every available parameter in the `config/_default/params.toml` file.
+
+Many of the article defaults here can be overridden on a per article basis by specifying it in the front matter. Refer to the [Front Matter]({{< ref "front-matter" >}}) section for further details.
+
+<!-- prettier-ignore-start -->
+
+### Global
+
+| Name                            | Default      | Description                                                                                                                                                                                                                                       |
+| ------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `colorScheme`                   | `"blowfish"` | The theme colour scheme to use. Valid values are `blowfish` (default), `avocado`, `fire`, `ocean`, `forest`, `princess`, `neon`, `bloody`, `terminal`, `marvel`, `noir`, `autumn`, `congo`, and`slate`. Refer to the [Colour Schemes]({{< ref "getting-started#colour-schemes" >}}) section for more details.                              |
+| `defaultAppearance`             | `"light"`    | The default theme appearance, either `light` or `dark`.                                                                                                                                                                                           |
+| `autoSwitchAppearance`          | `true`       | Whether the theme appearance automatically switches based upon the visitor's operating system preference. Set to `false` to force the site to always use the `defaultAppearance`.                                                                 |
+| `enableSearch`                  | `false`      | Whether site search is enabled. Set to `true` to enable search functionality. Note that the search feature depends on the `outputs.home` setting in the [site configuration](#site-configuration) being set correctly.                            |
+| `enableCodeCopy`                | `false`      | Whether copy-to-clipboard buttons are enabled for `<code>` blocks. The `highlight.noClasses` parameter must be set to `false` for code copy to function correctly. Read more about [other configuration files](#other-configuration-files) below. |
+| `mainSections`                  | _Not set_    | The sections that should be displayed in the recent articles list. If not provided the section with the greatest number of articles is used.                                                                                                      |
+| `showViews`                     | _Not set_    | Whether or not articles and list views are displayed. This requires firebase integrations to be enabled, look below.                                                                                                                              |
+| `showLikes`                     | _Not set_    | Whether or not articles and list likes are displayed. This requires firebase integrations to be enabled, look below.                                                                                                                              |
+| `robots`                        | _Not set_    | String that indicates how robots should handle your site. If set, it will be output in the page head. Refer to [Google's docs](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) for valid values.            |
+| `disableImageZoom`              | `false`      | Disables image zoom feature across all the images in the site.                                                                                                                                                                                    |
+| `disableImageOptimization`      | `false`      | Disables image resize and optimization features across all the images in the site.                                                                                                                                                                |
+| `disableTextInHeader`           | `false`      | Disables text in header, useful for logo based headers.                                                                                                                                                                                           |
+| `defaultBackgroundImage`        | _Not set_    | Default background image for both `background` homepage layout and `background` hero style                                                                                                                                                        |
+| `defaultFeaturedImage`          | _Not set_    | Default background image for all `featured` images across articles, will be overridden by a local `featured` image.                                                                                                                               |
+| `highlightCurrentMenuArea`      | _Not set_    | Marks menu entries in the main menu when selected                                                                                                                                                                                                 |
+| `smartTOC`                      | _Not set_    | Activate smart Table of Contents, items in view will be highlighted.                                                                                                                                                                              |
+| `smartTOCHideUnfocusedChildren` | _Not set_    | When smart Table of Contents is turned on, this will hide deeper levels of the table when they are not in focus.                                                                                                                                  |
+
+### Header
+
+| Name            | Default   | Description                                                                                                         |
+| --------------- | --------- | ------------------------------------------------------------------------------------------------------------------- |
+| `header.layout` | `"basic"` | Defines the header for the entire site, supported values are `basic`, `fixed`, `fixed-fill`, and `fixed-fill-blur`. |
+### Footer
+
+| Name                            | Default | Description                                                                                                                                                                                                               |
+| ------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `footer.showMenu`               | `true`  | Show/hide the footer menu, which can be configured in the `[[footer]]` section of the `config/_default/menus.en.toml` file.                                                                                               |
+| `footer.showCopyright`          | `true`  | Whether or not to show the copyright string in the site footer. Note that the string itself can be customised using the `copyright` parameter in the [languages configuration](#language-and-i18n).                       |
+| `footer.showThemeAttribution`   | `true`  | Whether or not to show the "powered by" theme attribution in the site footer. If you choose to disable this message, please consider attributing the theme somewhere else on your site (for example, on your about page). |
+| `footer.showAppearanceSwitcher` | `false` | Whether or not to show the appearance switcher in the site footer. The browser's local storage is used to persist the visitor's preference.                                                                               |
+| `footer.showScrollToTop`        | `true`  | When set to `true` the scroll to top arrow is displayed.                                                                                                                                                                  |
+### Homepage
+
+| Name                            | Default     | Description                                                                                                                                                                                                                                                                                                        |
+| ------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `homepage.layout`               | `"profile"` | The layout of the homepage. Valid values are `page`, `profile`, `hero`, `card`, `background`, or `custom`. When set to `custom`, you must provide your own layout by creating a `/layouts/partials/home/custom.html` file. Refer to the [Homepage Layout]({{< ref "homepage-layout" >}}) section for more details. |
+| `homepage.homepageImage`        | _Not set_   | Image to be used in `hero` and `card` layouts. Can be set as local image from asset directory or external image url. Refer to the [Homepage Layout]({{< ref "homepage-layout" >}}) section for more details.                                                                                                                                                                             |
+| `homepage.showRecent`           | `false`     | Whether or not to display the recent articles list on the homepage.                                                                                                                                                                                                                                                |
+| `homepage.showRecentItems`      | 5           | How many articles to display if showRecent is true. If variable is set to 0 or if it isn't defined the system will default to 5 articles.                                                                                                                                                                          |
+| `homepage.showMoreLink`         | `false`     | Whether or not to display a show more link at the end of your posts that takes the user to a predefined place.                                                                                                                                                                                                     |
+| `homepage.showMoreLinkDest`     | `/posts`    | The destination of the show more button.                                                                                                                                                                                                                                                                           |
+| `homepage.cardView`             | `false`     | Display recent articles as a gallery of cards.                                                                                                                                                                                                                                                                     |
+| `homepage.cardViewScreenWidth`  | `false`     | Enhance the width of the recent articles card gallery to take the full width available.                                                                                                                                                                                                                            |
+| `homepage.layoutBackgroundBlur` | `false`     | Makes the background image in the homepage layout blur with the scroll                                                                                                                                                                                                                                             |
+### Article
+
+| Name                                  | Default   | Description                                                                                                                                                                                                                                                                                                            |
+| ------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `article.showDate`                    | `true`    | Whether or not article dates are displayed.                                                                                                                                                                                                                                                                            |
+| `article.showViews`                   | `false`   | Whether or not article views are displayed. This requires firebase integrations to be enabled, look below.                                                                                                                                                                                                             |
+| `article.showLikes`                   | `false`   | Whether or not article likes are displayed. This requires firebase integrations to be enabled, look below.                                                                                                                                                                                                             |
+| `article.showDateOnlyInArticle`       | `false`   | Show date within article even if not displayed in article listings/cards.                                                                                                                                                                                                                                              |
+| `article.showDateUpdated`             | `false`   | Whether or not the dates articles were updated are displayed.                                                                                                                                                                                                                                                          |
+| `article.showAuthor`                  | `true`    | Whether or not the author box is displayed in the article footer.                                                                                                                                                                                                                                                      |
+| `article.showHero`                    | `false`   | Whether the thumbnail image will be shown as a hero image within each article page.                                                                                                                                                                                                                                    |
+| `article.heroStyle`                   | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`.                                                                                                                                                                                                                |
+| `article.layoutBackgroundBlur`        | `true`    | Makes the background image in the background article heroStyle blur with the scroll                                                                                                                                                                                                                                    |
+| `article.layoutBackgroundHeaderSpace` | `true`    | Add space between the header and the body.                                                                                                                                                                                                                                                                             |
+| `article.showBreadcrumbs`             | `false`   | Whether or not breadcrumbs are displayed in the article header.                                                                                                                                                                                                                                                        |
+| `article.showDraftLabel`              | `true`    | Whether or not the draft indicator is shown next to articles when site is built with `--buildDrafts`.                                                                                                                                                                                                                  |
+| `article.showEdit`                    | `false`   | Whether or not the link to edit the article content should be displayed.                                                                                                                                                                                                                                               |
+| `article.editURL`                     | _Not set_ | When `article.showEdit` is active, the URL for the edit link.                                                                                                                                                                                                                                                          |
+| `article.editAppendPath`              | `true`    | When `article.showEdit` is active, whether or not the path to the current article should be appended to the URL set at `article.editURL`.                                                                                                                                                                              |
+| `article.seriesOpened`                | `false`   | Whether or not the series module will be displayed open by default or not.                                                                                                                                                                                                                                             |
+| `article.showHeadingAnchors`          | `true`    | Whether or not heading anchor links are displayed alongside headings within articles.                                                                                                                                                                                                                                  |
+| `article.showPagination`              | `true`    | Whether or not the next/previous article links are displayed in the article footer.                                                                                                                                                                                                                                    |
+| `article.invertPagination`            | `false`   | Whether or not to flip the direction of the next/previous article links.                                                                                                                                                                                                                                               |
+| `article.showReadingTime`             | `true`    | Whether or not article reading times are displayed.                                                                                                                                                                                                                                                                    |
+| `article.showTableOfContents`         | `false`   | Whether or not the table of contents is displayed on articles.                                                                                                                                                                                                                                                         |
+| `article.showRelatedContent`          | `false`   | Display related content for each post. Might required additional configuration to your `config.toml`. Please check the theme `config.toml` if you want to enable this feature and copy all the relevant *related* entries. Also check [Hugo's docs](https://gohugo.io/content-management/related/) on related content. |
+| `article.relatedContentLimit`         | `3`       | Limit of related articles to display if `      showRelatedContent` is turned on.                                                                                                                                                                                                                                       |
+| `article.showTaxonomies`              | `false`   | Whether or not the taxonomies related to this article are displayed.                                                                                                                                                                                                                                                   |
+| `article.showAuthorsBadges`           | `false`   | Whether the `authors` taxonomies are are displayed in the article or list header. This requires the setup of `multiple authors` and the `authors` taxonomy. Check [this page]({{< ref "multi-author" >}}) for more details on how to configure that feature.                                                           |
+| `article.showWordCount`               | `false`   | Whether or not article word counts are displayed.                                                                                                                                                                                                                                                                      |
+| `article.showComments`                | `false`   | Whether or not the [comments partial]({{< ref "partials#comments" >}}) is included after the article footer.                                                                                                                                                                                                           |
+| `article.sharingLinks`                | _Not set_ | Which sharing links to display at the end of each article. When not provided, or set to `false` no links will be displayed.  Available values are: "linkedin", "twitter", "reddit", "pinterest", "facebook", "email", "whatsapp", and "telegram"                                                                       |
+| `article.showZenMode`                 | `false`   | Flag to activate Zen Mode reading feature for articles.                                                                                                                                                                                                                                                                |
+
+### List
+
+| Name                               | Default   | Description                                                                                                                                                                                                                                                    |
+| ---------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `list.showHero`                    | `false`   | Whether the thumbnail image will be shown as a hero image within each list page.                                                                                                                                                                               |
+| `list.heroStyle`                   | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`.                                                                                                                                                        |
+| `list.showBreadcrumbs`             | `false`   | Whether or not breadcrumbs are displayed in the header on list pages.                                                                                                                                                                                          |
+| `list.layoutBackgroundBlur`        | `true`    | Makes the background image in the background list heroStyle blur with the scroll                                                                                                                                                                               |
+| `list.layoutBackgroundHeaderSpace` | `true`    | Add space between the header and the body.                                                                                                                                                                                                                     |
+| `list.showTableOfContents`         | `false`   | Whether or not the table of contents is displayed on list pages.                                                                                                                                                                                               |
+| `list.showSummary`                 | `false`   | Whether or not article summaries are displayed on list pages. If a summary is not provided in the [front matter]({{< ref "front-matter" >}}), one will be auto generated using the `summaryLength` parameter in the [site configuration](#site-configuration). |
+| `list.showViews`                   | `false`   | Whether or not list views are displayed. This requires firebase integrations to be enabled, look below.                                                                                                                                                        |
+| `list.showLikes`                   | `false`   | Whether or not list likes are displayed. This requires firebase integrations to be enabled, look below.                                                                                                                                                        |
+| `list.showCards`                   | `false`   | Whether or not each article is displayed as a card or as simple inline text.                                                                                                                                                                                   |
+| `list.groupByYear`                 | `true`    | Whether or not articles are grouped by year on list pages.                                                                                                                                                                                                     |
+| `list.cardView`                    | `false`   | Display lists as a gallery of cards.                                                                                                                                                                                                                           |
+| `list.cardViewScreenWidth`         | `false`   | Enhance the width of card galleries in lists to take the full width available.                                                                                                                                                                                 |
+| `list.constrainItemsWidth`         | `false`   | Limit item width to `prose` to increase readability. Useful when no feature images are available.                                                                                                                                                              |
+| `list.showTableOfContents`         | `false`   | Whether or not the table of contents is displayed on articles.                                                                                                                                                                                                 |
+
+### Sitemap
+
+| Name                    | Default                | Description                                                                                                                                                                                 |
+| ----------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `sitemap.excludedKinds` | `["taxonomy", "term"]` | Kinds of content that should be excluded from the generated `/sitemap.xml` file. Refer to the [Hugo docs](https://gohugo.io/templates/section-templates/#page-kinds) for acceptable values. |
+
+### Taxonomy
+
+| Name                           | Default   | Description                                                                                                |
+| ------------------------------ | --------- | ---------------------------------------------------------------------------------------------------------- |
+| `taxonomy.showTermCount`       | `true`    | Whether or not the number of articles within a taxonomy term is displayed on the taxonomy listing.         |
+| `taxonomy.showHero`            | `false`   | Whether the thumbnail image will be shown as a hero image within each taxonomy page.                       |
+| `taxonomy.heroStyle`           | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`.    |
+| `taxonomy.showBreadcrumbs`     | `false`   | Whether or not breadcrumbs are displayed in the taxonomy header.                                           |
+| `taxonomy.showViews`           | `false`   | Whether or not article views are displayed. This requires firebase integrations to be enabled, look below. |
+| `taxonomy.showLikes`           | `false`   | Whether or not article likes are displayed. This requires firebase integrations to be enabled, look below. |
+| `taxonomy.showTableOfContents` | `false`   | Whether or not the table of contents is displayed on taxonomies.                                           |
+| `taxonomy.cardView`            | `false`   | Display lists as a gallery of cards.                                                                       |
+### Term
+
+| Name                       | Default   | Description                                                                                                |
+| -------------------------- | --------- | ---------------------------------------------------------------------------------------------------------- |
+| `term.showHero`            | `false`   | Whether the thumbnail image will be shown as a hero image within each term page.                           |
+| `term.heroStyle`           | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`.    |
+| `term.showBreadcrumbs`     | `false`   | Whether or not breadcrumbs are displayed in the term header.                                               |
+| `term.showViews`           | `false`   | Whether or not article views are displayed. This requires firebase integrations to be enabled, look below. |
+| `term.showLikes`           | `false`   | Whether or not article likes are displayed. This requires firebase integrations to be enabled, look below. |
+| `term.showTableOfContents` | `false`   | Whether or not the table of contents is displayed on terms.                                                |
+| `term.groupByYear`         | `false`   | Whether or not articles are grouped by year on term pages.                                                 |
+| `term.cardView`            | `false`   | Display lists as a gallery of cards.                                                                       |
+| `term.cardViewScreenWidth` | `false`   | Enhance the width of card galleries in lists to take the full width available.                             |
+### Firebase
+
+| Name                         | Default   | Description                                                                                                                                                                 |
+| ---------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `firebase.apiKey`            | _Not set_ | Firebase apiKey, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish.            |
+| `firebase.authDomain`        | _Not set_ | Firebase authDomain, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish.        |
+| `firebase.projectId`         | _Not set_ | Firebase projectId, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish.         |
+| `firebase.storageBucket`     | _Not set_ | Firebase storageBucket, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish.     |
+| `firebase.messagingSenderId` | _Not set_ | Firebase messagingSenderId, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish. |
+| `firebase.appId`             | _Not set_ | Firebase appId, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish.             |
+| `firebase.measurementId`     | _Not set_ | Firebase measurementId, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish.     |
+
+### Fathom Analytics
+
+| Name                     | Default   | Description                                                                                                                                    |
+| ------------------------ | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| `fathomAnalytics.site`   | _Not set_ | The site code generated by Fathom Analytics for the website. Refer to the [Analytics docs]({{< ref "partials#analytics" >}}) for more details. |
+| `fathomAnalytics.domain` | _Not set_ | If using a custom domain with Fathom Analytics, provide it here to serve `script.js` from the custom domain.                                   |
+
+### BuyMeACoffee
+
+| Name                                | Default   | Description                                                                 |
+| ----------------------------------- | --------- | --------------------------------------------------------------------------- |
+| `buymeacoffee.identifier`           | _Not set_ | The identifier to the target buymeacoffee account.                          |
+| `buymeacoffee.globalWidget`         | _Not set_ | Activate the global buymeacoffee widget.                                    |
+| `buymeacoffee.globalWidgetMessage`  | _Not set_ | Message what will be displayed the first time a new user lands on the site. |
+| `buymeacoffee.globalWidgetColor`    | _Not set_ | Widget color in hex format.                                                 |
+| `buymeacoffee.globalWidgetPosition` | _Not set_ | Position of the widget, i.e. "Left" or "Right"                              |
+### Verifications
+
+| Name                     | Default   | Description                                                                             |
+| ------------------------ | --------- | --------------------------------------------------------------------------------------- |
+| `verification.google`    | _Not set_ | The site verification string provided by Google to be included in the site metadata.    |
+| `verification.bing`      | _Not set_ | The site verification string provided by Bing to be included in the site metadata.      |
+| `verification.pinterest` | _Not set_ | The site verification string provided by Pinterest to be included in the site metadata. |
+| `verification.yandex`    | _Not set_ | The site verification string provided by Yandex to be included in the site metadata.    |
+<!-- prettier-ignore-end -->
+
+## Other configuration files
+
+The theme also includes a `markup.toml` configuration file. This file contains some important parameters that ensure that Hugo is correctly configured to generate sites built with Blowfish.
+
+Always ensure this file is present in the config directory and that the required values are set. Failure to do so may cause certain features to function incorrectly and could result in unintended behaviour.

exampleSite/content/docs/content-examples/index.it.md

@@ -0,0 +1,318 @@
+---
+title: "Content Examples"
+date: 2020-08-09
+draft: false
+description: "All the partials available in Blowfish."
+slug: "content-examples"
+tags: ["content", "example"]
+series: ["Documentation"]
+series_order: 12
+---
+
+If you've been reading the documentation in order, you should now know about all the features and configurations available in Blowfish. This page is designed to pull everything together and offer some worked examples that you might like to use in your Hugo project.
+
+{{< alert >}}
+**Tip:** If you're new to Hugo, be sure to check out the [official docs](https://gohugo.io/content-management/page-bundles/) to learn more about the concept of page bundles and resources.
+{{< /alert >}}
+
+The examples on this page can all be adapted to different scenarios but hopefully give you some ideas about how to approach formatting a particular content item for your individual project.
+
+## Branch pages
+
+Branch page bundles in Hugo cover items like the homepage, section listings, and taxonomy pages. The important thing to remember about branch bundles is that the filename for this content type is **`_index.md`**.
+
+Blowfish will honour the front matter parameters specified in branch pages and these will override the default settings for that particular page. For example, setting the `title` parameter in a branch page will allow overriding the page title.
+
+### Homepage
+
+|              |                      |
+| ------------ | -------------------- |
+| **Layout:**  | `layouts/index.html` |
+| **Content:** | `content/_index.md`  |
+
+The homepage in Blowfish is special in that it's overarching design is controlled by the homepage layout config parameter. You can learn more about this in the [Homepage Layout]({{< ref "homepage-layout" >}}) section.
+
+If you want to add custom content to this page, you simply need to create a `content/_index.md` file. Anything in this file will then be included in your homepage.
+
+**Example:**
+
+```yaml
+---
+title: "Welcome to Blowfish!"
+description: "This is a demo of adding content to the homepage."
+---
+Welcome to my website! I'm really happy you stopped by.
+```
+
+_This example sets a custom title and adds some additional text to the body of the page. Any Markdown formatted text is acceptable, including shortcodes, images and links._
+
+### List pages
+
+|              |                              |
+| ------------ | ---------------------------- |
+| **Layout:**  | `layouts/_default/list.html` |
+| **Content:** | `content/../_index.md`       |
+
+List pages group all the pages within into a section and provide a way for visitors to reach each page. A blog or portfolio are examples of a list page as they group together posts or projects.
+
+Creating a list page is as simple as making a sub-directory in the content folder. For example, to create a "Projects" section, you would create `content/projects/`. Then create a Markdown file for each of your projects.
+
+A list page will be generated by default, however to customise the content, you should also create an `_index.md` page in this new directory.
+
+```shell
+.
+└── content
+    └── projects
+        ├── _index.md          # /projects
+        ├── first-project.md   # /projects/first-project
+        └── another-project
+            ├── index.md       # /projects/another-project
+            └── project.jpg
+```
+
+Hugo will generate URLs for the pages in your projects folder accordingly.
+
+Just like the homepage, content in the `_index.md` file will be output into the generated list index. Blowfish will then list any pages in this section below the content.
+
+**Example:**
+
+```yaml
+---
+title: "Projects"
+description: "Learn about some of my projects."
+cascade:
+  showReadingTime: false
+---
+This section contains all my current projects.
+```
+
+_In this example, the special `cascade` parameter is being used to hide the reading time on any sub-pages within this section. By doing this, any project pages will not have their reading time showing. This is a great way to override default theme parameters for an entire section without having to include them in every individual page._
+
+The [samples section]({{< ref "samples" >}}) of this site is an example of a list page.
+
+### Taxonomy pages
+
+|                  |                                  |
+| ---------------- | -------------------------------- |
+| **List layout:** | `layouts/_default/taxonomy.html` |
+| **Term layout:** | `layouts/_default/term.html`     |
+| **Content:**     | `content/../_index.md`           |
+
+Taxonomy pages come in two forms - taxonomy lists and taxonomy terms. Lists display a listing of each of the terms within a given taxonomy, while terms display a list of pages that are related to a given term.
+
+The terminology can get a little confusing so let's explore an example using a taxonomy named `animals`.
+
+Firstly, to use taxonomies in Hugo, they have to be configured. This is done by creating a config file at `config/_default/taxonomies.toml` and defining the taxonomy name.
+
+```toml
+# config/_default/taxonomies.toml
+
+animal = "animals"
+```
+
+Hugo expects taxonomies to be listed using their singular and plural forms, so we add the singular `animal` equals the plural `animals` to create our example taxonomy.
+
+Now that our `animals` taxonomy exists, it needs to be added to individual content items. It's as simple as inserting it into the front matter:
+
+```yaml
+---
+title: "Into the Lion's Den"
+description: "This week we're learning about lions."
+animals: ["lion", "cat"]
+---
+```
+
+This has now created two _terms_ within our `animals` taxonomy - `lion` and `cat`.
+
+Although it's not obvious at this point, Hugo will now be generating list and term pages for this new taxonomy. By default the listing can be accessed at `/animals/` and the term pages can be found at `/animals/lion/` and `/animals/cat/`.
+
+The list page will list all the terms contained within the taxonomy. In this example, navigating to `/animals/` will show a page that has links for "lion" and "cat" which take visitors to the individual term pages.
+
+The term pages will list all the pages contained within that term. These term lists are essentially the same as normal [list pages](#list-pages) and behave in much the same way.
+
+In order to add custom content to taxonomy pages, simply create `_index.md` files in the content folder using the taxonomy name as the sub-directory name.
+
+```shell
+.
+└── content
+    └── animals
+        ├── _index.md       # /animals
+        └── lion
+            └── _index.md   # /animals/lion
+```
+
+Anything in these content files will now be placed onto the generated taxonomy pages. As with other content, the front matter variables can be used to override defaults. In this way you could have a tag named `lion` but override the `title` to be "Lion".
+
+To see how this looks in reality, check out the [tags taxonomy listing]({{< ref "tags" >}}) on this site.
+
+## Leaf pages
+
+|                           |                                 |
+| ------------------------- | ------------------------------- |
+| **Layout:**               | `layouts/_default/single.html`  |
+| **Content (standalone):** | `content/../page-name.md`       |
+| **Content (bundled):**    | `content/../page-name/index.md` |
+
+Leaf pages in Hugo are basically standard content pages. They are defined as pages that don't contain any sub-pages. These could be things like an about page, or an individual blog post that lives in the blog section of the website.
+
+The most important thing to remember about leaf pages is that unlike branch pages, leaf pages should be named `index.md` _without_ an underscore. Leaf pages are also special in that they can be grouped together at the top level of the section and named with a unique name.
+
+```shell
+.
+└── content
+    └── blog
+        ├── first-post.md     # /blog/first-post
+        ├── second-post.md    # /blog/second-post
+        └── third-post
+            ├── index.md      # /blog/third-post
+            └── image.jpg
+```
+
+When including assets in a page, like an image, a page bundle should be used. Page bundles are created using a sub-directory with an `index.md` file. Grouping the assets with the content in its own directory is important as many of the shortcodes and other theme logic assumes that resources are bundled alongside pages.
+
+**Example:**
+
+```yaml
+---
+title: "My First Blog Post"
+date: 2022-01-25
+description: "Welcome to my blog!"
+summary: "Learn more about me and why I am starting this blog."
+tags: ["welcome", "new", "about", "first"]
+---
+_This_ is the content of my blog post.
+```
+
+Leaf pages have a wide variety of [front matter]({{< ref "front-matter" >}}) parameters that can be used to customise how they are displayed.
+
+### External links
+
+Blowfish has a special feature that allows links to external pages to appear alongside articles in the article listings. This is useful if you have content on third party websites like Medium, or research papers that you'd like to link to, without replicating the content in your Hugo site.
+
+In order to create an external link article, some special front matter needs to be set:
+
+```yaml
+---
+title: "My Medium post"
+date: 2022-01-25
+externalUrl: "https://medium.com/"
+summary: "I wrote a post on Medium."
+showReadingTime: false
+_build:
+  render: "false"
+  list: "local"
+---
+```
+
+Along with the normal front matter parameters like `title` and `summary`, the `externalUrl` parameter is used to tell Blowfish that this is not an ordinary article. The URL provided here will be where visitors are directed when they select this article.
+
+Additionally, we use a special Hugo front matter parameter `_build` to prevent a normal page for this content being generated - there's no point generating a page since we're linking to an external URL!
+
+The theme includes an archetype to make generating these external link articles simple. Just specify `-k external` when making new content.
+
+```shell
+hugo new -k external posts/my-post.md
+```
+
+### Simple pages
+
+|                   |                                |
+| ----------------- | ------------------------------ |
+| **Layout:**       | `layouts/_default/simple.html` |
+| **Front Matter:** | `layout: "simple"`             |
+
+Blowfish also includes a special layout for simple pages. The simple layout is a full-width template that just places Markdown content into the page without any special theme features.
+
+The only features available in the simple layout are breadcrumbs and sharing links. However, the behaviour of these can still be controlled using the normal page [front matter]({{< ref "front-matter" >}}) variables.
+
+To enable the simple layout on a particular page, add the `layout` front matter variable with a value of `"simple"`:
+
+```yaml
+---
+title: "My landing page"
+date: 2022-03-08
+layout: "simple"
+---
+This page content is now full-width.
+```
+
+## Custom layouts
+
+One of the benefits of Hugo is that it makes it easy to create custom layouts for the whole site, individual sections or pages.
+
+Layouts follow all the normal Hugo templating rules and more information is available in the [official Hugo docs](https://gohugo.io/templates/introduction/).
+
+### Overriding default layouts
+
+Each of the content types discussed above lists the layout file that is used to generate each type of page. If this file is created in your local project it will override the theme template and thus can be used to customise the default style of the website.
+
+For example, creating a `layouts/_default/single.html` file will allow the layout of leaf pages to be completely customised.
+
+### Custom section layouts
+
+It is also simple to create custom layouts for individual content sections. This is useful when you want to make a section that lists a certain type of content using a particular style.
+
+Let's step through an example that creates a custom "Projects" page that lists projects using a special layout.
+
+In order to do this, structure your content using the normal Hugo content rules and create a section for your projects. Additionally, create a new layout for the projects section by using the same directory name as the content and adding a `list.html` file.
+
+```shell
+.
+└── content
+│   └── projects
+│       ├── _index.md
+│       ├── first-project.md
+│       └── second-project.md
+└── layouts
+    └── projects
+        └── list.html
+```
+
+This `list.html` file will now override the default list template, but only for the `projects` section. Before we look at this file, lets first look at the individual project files.
+
+```yaml
+---
+title: "Blowfish"
+date: 2021-08-11
+icon: "github"
+description: "A theme for Hugo built with Tailwind CSS."
+topics: ["Hugo", "Web", "Tailwind"]
+externalUrl: "https://github.com/nunocoracao/blowfish/"
+---
+```
+
+_In this example we are assigning some metadata for each project that we can then use in our list template. There's no page content, but there's nothing stopping you from including it. It's your own custom template after all!_
+
+With the projects defined, now we can create a list template that outputs the details of each project.
+
+```go
+{{ define "main" }}
+  <section class="mt-8">
+    {{ range .Pages }}
+      <article class="pb-6">
+        <a class="flex" href="{{ .Params.externalUrl }}">
+          <div class="mr-3 text-3xl text-neutral-300">
+            <span class="relative inline-block align-text-bottom">
+              {{ partial "icon.html" .Params.icon }}
+            </span>
+          </div>
+          <div>
+            <h3 class="flex text-xl font-semibold">
+              {{ .Title }}
+            </h3>
+            <p class="text-sm text-neutral-400">
+              {{ .Description }}
+            </p>
+          </div>
+        </a>
+      </article>
+    {{ end }}
+  </section>
+{{ end }}
+```
+
+Although this is quite a straightforward example, you can see that it steps through each of the pages in this section (ie. each project), and then outputs HTML links to each project alongside an icon. The metadata in the front matter for each project is used to determine which information is displayed.
+
+Keep in mind that you'll need to ensure the relevant styles and classes are available, which may require the Tailwind CSS to be recompiled. This is discussed in more detail in the [Advanced Customisation]({{< ref "advanced-customisation" >}}) section.
+
+When making custom templates like this one, it's always easiest to take a look at how the default Blowfish template works and then use that as a guide. Remember, the [Hugo docs](https://gohugo.io/templates/introduction/) are a great resource to learn more about creating templates too.

exampleSite/content/docs/content-examples/index.ja.md

@@ -0,0 +1,318 @@
+---
+title: "Content Examples"
+date: 2020-08-09
+draft: false
+description: "All the partials available in Blowfish."
+slug: "content-examples"
+tags: ["content", "example"]
+series: ["Documentation"]
+series_order: 12
+---
+
+If you've been reading the documentation in order, you should now know about all the features and configurations available in Blowfish. This page is designed to pull everything together and offer some worked examples that you might like to use in your Hugo project.
+
+{{< alert >}}
+**Tip:** If you're new to Hugo, be sure to check out the [official docs](https://gohugo.io/content-management/page-bundles/) to learn more about the concept of page bundles and resources.
+{{< /alert >}}
+
+The examples on this page can all be adapted to different scenarios but hopefully give you some ideas about how to approach formatting a particular content item for your individual project.
+
+## Branch pages
+
+Branch page bundles in Hugo cover items like the homepage, section listings, and taxonomy pages. The important thing to remember about branch bundles is that the filename for this content type is **`_index.md`**.
+
+Blowfish will honour the front matter parameters specified in branch pages and these will override the default settings for that particular page. For example, setting the `title` parameter in a branch page will allow overriding the page title.
+
+### Homepage
+
+|              |                      |
+| ------------ | -------------------- |
+| **Layout:**  | `layouts/index.html` |
+| **Content:** | `content/_index.md`  |
+
+The homepage in Blowfish is special in that it's overarching design is controlled by the homepage layout config parameter. You can learn more about this in the [Homepage Layout]({{< ref "homepage-layout" >}}) section.
+
+If you want to add custom content to this page, you simply need to create a `content/_index.md` file. Anything in this file will then be included in your homepage.
+
+**Example:**
+
+```yaml
+---
+title: "Welcome to Blowfish!"
+description: "This is a demo of adding content to the homepage."
+---
+Welcome to my website! I'm really happy you stopped by.
+```
+
+_This example sets a custom title and adds some additional text to the body of the page. Any Markdown formatted text is acceptable, including shortcodes, images and links._
+
+### List pages
+
+|              |                              |
+| ------------ | ---------------------------- |
+| **Layout:**  | `layouts/_default/list.html` |
+| **Content:** | `content/../_index.md`       |
+
+List pages group all the pages within into a section and provide a way for visitors to reach each page. A blog or portfolio are examples of a list page as they group together posts or projects.
+
+Creating a list page is as simple as making a sub-directory in the content folder. For example, to create a "Projects" section, you would create `content/projects/`. Then create a Markdown file for each of your projects.
+
+A list page will be generated by default, however to customise the content, you should also create an `_index.md` page in this new directory.
+
+```shell
+.
+└── content
+    └── projects
+        ├── _index.md          # /projects
+        ├── first-project.md   # /projects/first-project
+        └── another-project
+            ├── index.md       # /projects/another-project
+            └── project.jpg
+```
+
+Hugo will generate URLs for the pages in your projects folder accordingly.
+
+Just like the homepage, content in the `_index.md` file will be output into the generated list index. Blowfish will then list any pages in this section below the content.
+
+**Example:**
+
+```yaml
+---
+title: "Projects"
+description: "Learn about some of my projects."
+cascade:
+  showReadingTime: false
+---
+This section contains all my current projects.
+```
+
+_In this example, the special `cascade` parameter is being used to hide the reading time on any sub-pages within this section. By doing this, any project pages will not have their reading time showing. This is a great way to override default theme parameters for an entire section without having to include them in every individual page._
+
+The [samples section]({{< ref "samples" >}}) of this site is an example of a list page.
+
+### Taxonomy pages
+
+|                  |                                  |
+| ---------------- | -------------------------------- |
+| **List layout:** | `layouts/_default/taxonomy.html` |
+| **Term layout:** | `layouts/_default/term.html`     |
+| **Content:**     | `content/../_index.md`           |
+
+Taxonomy pages come in two forms - taxonomy lists and taxonomy terms. Lists display a listing of each of the terms within a given taxonomy, while terms display a list of pages that are related to a given term.
+
+The terminology can get a little confusing so let's explore an example using a taxonomy named `animals`.
+
+Firstly, to use taxonomies in Hugo, they have to be configured. This is done by creating a config file at `config/_default/taxonomies.toml` and defining the taxonomy name.
+
+```toml
+# config/_default/taxonomies.toml
+
+animal = "animals"
+```
+
+Hugo expects taxonomies to be listed using their singular and plural forms, so we add the singular `animal` equals the plural `animals` to create our example taxonomy.
+
+Now that our `animals` taxonomy exists, it needs to be added to individual content items. It's as simple as inserting it into the front matter:
+
+```yaml
+---
+title: "Into the Lion's Den"
+description: "This week we're learning about lions."
+animals: ["lion", "cat"]
+---
+```
+
+This has now created two _terms_ within our `animals` taxonomy - `lion` and `cat`.
+
+Although it's not obvious at this point, Hugo will now be generating list and term pages for this new taxonomy. By default the listing can be accessed at `/animals/` and the term pages can be found at `/animals/lion/` and `/animals/cat/`.
+
+The list page will list all the terms contained within the taxonomy. In this example, navigating to `/animals/` will show a page that has links for "lion" and "cat" which take visitors to the individual term pages.
+
+The term pages will list all the pages contained within that term. These term lists are essentially the same as normal [list pages](#list-pages) and behave in much the same way.
+
+In order to add custom content to taxonomy pages, simply create `_index.md` files in the content folder using the taxonomy name as the sub-directory name.
+
+```shell
+.
+└── content
+    └── animals
+        ├── _index.md       # /animals
+        └── lion
+            └── _index.md   # /animals/lion
+```
+
+Anything in these content files will now be placed onto the generated taxonomy pages. As with other content, the front matter variables can be used to override defaults. In this way you could have a tag named `lion` but override the `title` to be "Lion".
+
+To see how this looks in reality, check out the [tags taxonomy listing]({{< ref "tags" >}}) on this site.
+
+## Leaf pages
+
+|                           |                                 |
+| ------------------------- | ------------------------------- |
+| **Layout:**               | `layouts/_default/single.html`  |
+| **Content (standalone):** | `content/../page-name.md`       |
+| **Content (bundled):**    | `content/../page-name/index.md` |
+
+Leaf pages in Hugo are basically standard content pages. They are defined as pages that don't contain any sub-pages. These could be things like an about page, or an individual blog post that lives in the blog section of the website.
+
+The most important thing to remember about leaf pages is that unlike branch pages, leaf pages should be named `index.md` _without_ an underscore. Leaf pages are also special in that they can be grouped together at the top level of the section and named with a unique name.
+
+```shell
+.
+└── content
+    └── blog
+        ├── first-post.md     # /blog/first-post
+        ├── second-post.md    # /blog/second-post
+        └── third-post
+            ├── index.md      # /blog/third-post
+            └── image.jpg
+```
+
+When including assets in a page, like an image, a page bundle should be used. Page bundles are created using a sub-directory with an `index.md` file. Grouping the assets with the content in its own directory is important as many of the shortcodes and other theme logic assumes that resources are bundled alongside pages.
+
+**Example:**
+
+```yaml
+---
+title: "My First Blog Post"
+date: 2022-01-25
+description: "Welcome to my blog!"
+summary: "Learn more about me and why I am starting this blog."
+tags: ["welcome", "new", "about", "first"]
+---
+_This_ is the content of my blog post.
+```
+
+Leaf pages have a wide variety of [front matter]({{< ref "front-matter" >}}) parameters that can be used to customise how they are displayed.
+
+### External links
+
+Blowfish has a special feature that allows links to external pages to appear alongside articles in the article listings. This is useful if you have content on third party websites like Medium, or research papers that you'd like to link to, without replicating the content in your Hugo site.
+
+In order to create an external link article, some special front matter needs to be set:
+
+```yaml
+---
+title: "My Medium post"
+date: 2022-01-25
+externalUrl: "https://medium.com/"
+summary: "I wrote a post on Medium."
+showReadingTime: false
+_build:
+  render: "false"
+  list: "local"
+---
+```
+
+Along with the normal front matter parameters like `title` and `summary`, the `externalUrl` parameter is used to tell Blowfish that this is not an ordinary article. The URL provided here will be where visitors are directed when they select this article.
+
+Additionally, we use a special Hugo front matter parameter `_build` to prevent a normal page for this content being generated - there's no point generating a page since we're linking to an external URL!
+
+The theme includes an archetype to make generating these external link articles simple. Just specify `-k external` when making new content.
+
+```shell
+hugo new -k external posts/my-post.md
+```
+
+### Simple pages
+
+|                   |                                |
+| ----------------- | ------------------------------ |
+| **Layout:**       | `layouts/_default/simple.html` |
+| **Front Matter:** | `layout: "simple"`             |
+
+Blowfish also includes a special layout for simple pages. The simple layout is a full-width template that just places Markdown content into the page without any special theme features.
+
+The only features available in the simple layout are breadcrumbs and sharing links. However, the behaviour of these can still be controlled using the normal page [front matter]({{< ref "front-matter" >}}) variables.
+
+To enable the simple layout on a particular page, add the `layout` front matter variable with a value of `"simple"`:
+
+```yaml
+---
+title: "My landing page"
+date: 2022-03-08
+layout: "simple"
+---
+This page content is now full-width.
+```
+
+## Custom layouts
+
+One of the benefits of Hugo is that it makes it easy to create custom layouts for the whole site, individual sections or pages.
+
+Layouts follow all the normal Hugo templating rules and more information is available in the [official Hugo docs](https://gohugo.io/templates/introduction/).
+
+### Overriding default layouts
+
+Each of the content types discussed above lists the layout file that is used to generate each type of page. If this file is created in your local project it will override the theme template and thus can be used to customise the default style of the website.
+
+For example, creating a `layouts/_default/single.html` file will allow the layout of leaf pages to be completely customised.
+
+### Custom section layouts
+
+It is also simple to create custom layouts for individual content sections. This is useful when you want to make a section that lists a certain type of content using a particular style.
+
+Let's step through an example that creates a custom "Projects" page that lists projects using a special layout.
+
+In order to do this, structure your content using the normal Hugo content rules and create a section for your projects. Additionally, create a new layout for the projects section by using the same directory name as the content and adding a `list.html` file.
+
+```shell
+.
+└── content
+│   └── projects
+│       ├── _index.md
+│       ├── first-project.md
+│       └── second-project.md
+└── layouts
+    └── projects
+        └── list.html
+```
+
+This `list.html` file will now override the default list template, but only for the `projects` section. Before we look at this file, lets first look at the individual project files.
+
+```yaml
+---
+title: "Blowfish"
+date: 2021-08-11
+icon: "github"
+description: "A theme for Hugo built with Tailwind CSS."
+topics: ["Hugo", "Web", "Tailwind"]
+externalUrl: "https://github.com/nunocoracao/blowfish/"
+---
+```
+
+_In this example we are assigning some metadata for each project that we can then use in our list template. There's no page content, but there's nothing stopping you from including it. It's your own custom template after all!_
+
+With the projects defined, now we can create a list template that outputs the details of each project.
+
+```go
+{{ define "main" }}
+  <section class="mt-8">
+    {{ range .Pages }}
+      <article class="pb-6">
+        <a class="flex" href="{{ .Params.externalUrl }}">
+          <div class="mr-3 text-3xl text-neutral-300">
+            <span class="relative inline-block align-text-bottom">
+              {{ partial "icon.html" .Params.icon }}
+            </span>
+          </div>
+          <div>
+            <h3 class="flex text-xl font-semibold">
+              {{ .Title }}
+            </h3>
+            <p class="text-sm text-neutral-400">
+              {{ .Description }}
+            </p>
+          </div>
+        </a>
+      </article>
+    {{ end }}
+  </section>
+{{ end }}
+```
+
+Although this is quite a straightforward example, you can see that it steps through each of the pages in this section (ie. each project), and then outputs HTML links to each project alongside an icon. The metadata in the front matter for each project is used to determine which information is displayed.
+
+Keep in mind that you'll need to ensure the relevant styles and classes are available, which may require the Tailwind CSS to be recompiled. This is discussed in more detail in the [Advanced Customisation]({{< ref "advanced-customisation" >}}) section.
+
+When making custom templates like this one, it's always easiest to take a look at how the default Blowfish template works and then use that as a guide. Remember, the [Hugo docs](https://gohugo.io/templates/introduction/) are a great resource to learn more about creating templates too.

exampleSite/content/docs/content-examples/index.zh-cn.md

@@ -0,0 +1,318 @@
+---
+title: "Content Examples"
+date: 2020-08-09
+draft: false
+description: "All the partials available in Blowfish."
+slug: "content-examples"
+tags: ["content", "example"]
+series: ["Documentation"]
+series_order: 12
+---
+
+If you've been reading the documentation in order, you should now know about all the features and configurations available in Blowfish. This page is designed to pull everything together and offer some worked examples that you might like to use in your Hugo project.
+
+{{< alert >}}
+**Tip:** If you're new to Hugo, be sure to check out the [official docs](https://gohugo.io/content-management/page-bundles/) to learn more about the concept of page bundles and resources.
+{{< /alert >}}
+
+The examples on this page can all be adapted to different scenarios but hopefully give you some ideas about how to approach formatting a particular content item for your individual project.
+
+## Branch pages
+
+Branch page bundles in Hugo cover items like the homepage, section listings, and taxonomy pages. The important thing to remember about branch bundles is that the filename for this content type is **`_index.md`**.
+
+Blowfish will honour the front matter parameters specified in branch pages and these will override the default settings for that particular page. For example, setting the `title` parameter in a branch page will allow overriding the page title.
+
+### Homepage
+
+|              |                      |
+| ------------ | -------------------- |
+| **Layout:**  | `layouts/index.html` |
+| **Content:** | `content/_index.md`  |
+
+The homepage in Blowfish is special in that it's overarching design is controlled by the homepage layout config parameter. You can learn more about this in the [Homepage Layout]({{< ref "homepage-layout" >}}) section.
+
+If you want to add custom content to this page, you simply need to create a `content/_index.md` file. Anything in this file will then be included in your homepage.
+
+**Example:**
+
+```yaml
+---
+title: "Welcome to Blowfish!"
+description: "This is a demo of adding content to the homepage."
+---
+Welcome to my website! I'm really happy you stopped by.
+```
+
+_This example sets a custom title and adds some additional text to the body of the page. Any Markdown formatted text is acceptable, including shortcodes, images and links._
+
+### List pages
+
+|              |                              |
+| ------------ | ---------------------------- |
+| **Layout:**  | `layouts/_default/list.html` |
+| **Content:** | `content/../_index.md`       |
+
+List pages group all the pages within into a section and provide a way for visitors to reach each page. A blog or portfolio are examples of a list page as they group together posts or projects.
+
+Creating a list page is as simple as making a sub-directory in the content folder. For example, to create a "Projects" section, you would create `content/projects/`. Then create a Markdown file for each of your projects.
+
+A list page will be generated by default, however to customise the content, you should also create an `_index.md` page in this new directory.
+
+```shell
+.
+└── content
+    └── projects
+        ├── _index.md          # /projects
+        ├── first-project.md   # /projects/first-project
+        └── another-project
+            ├── index.md       # /projects/another-project
+            └── project.jpg
+```
+
+Hugo will generate URLs for the pages in your projects folder accordingly.
+
+Just like the homepage, content in the `_index.md` file will be output into the generated list index. Blowfish will then list any pages in this section below the content.
+
+**Example:**
+
+```yaml
+---
+title: "Projects"
+description: "Learn about some of my projects."
+cascade:
+  showReadingTime: false
+---
+This section contains all my current projects.
+```
+
+_In this example, the special `cascade` parameter is being used to hide the reading time on any sub-pages within this section. By doing this, any project pages will not have their reading time showing. This is a great way to override default theme parameters for an entire section without having to include them in every individual page._
+
+The [samples section]({{< ref "samples" >}}) of this site is an example of a list page.
+
+### Taxonomy pages
+
+|                  |                                  |
+| ---------------- | -------------------------------- |
+| **List layout:** | `layouts/_default/taxonomy.html` |
+| **Term layout:** | `layouts/_default/term.html`     |
+| **Content:**     | `content/../_index.md`           |
+
+Taxonomy pages come in two forms - taxonomy lists and taxonomy terms. Lists display a listing of each of the terms within a given taxonomy, while terms display a list of pages that are related to a given term.
+
+The terminology can get a little confusing so let's explore an example using a taxonomy named `animals`.
+
+Firstly, to use taxonomies in Hugo, they have to be configured. This is done by creating a config file at `config/_default/taxonomies.toml` and defining the taxonomy name.
+
+```toml
+# config/_default/taxonomies.toml
+
+animal = "animals"
+```
+
+Hugo expects taxonomies to be listed using their singular and plural forms, so we add the singular `animal` equals the plural `animals` to create our example taxonomy.
+
+Now that our `animals` taxonomy exists, it needs to be added to individual content items. It's as simple as inserting it into the front matter:
+
+```yaml
+---
+title: "Into the Lion's Den"
+description: "This week we're learning about lions."
+animals: ["lion", "cat"]
+---
+```
+
+This has now created two _terms_ within our `animals` taxonomy - `lion` and `cat`.
+
+Although it's not obvious at this point, Hugo will now be generating list and term pages for this new taxonomy. By default the listing can be accessed at `/animals/` and the term pages can be found at `/animals/lion/` and `/animals/cat/`.
+
+The list page will list all the terms contained within the taxonomy. In this example, navigating to `/animals/` will show a page that has links for "lion" and "cat" which take visitors to the individual term pages.
+
+The term pages will list all the pages contained within that term. These term lists are essentially the same as normal [list pages](#list-pages) and behave in much the same way.
+
+In order to add custom content to taxonomy pages, simply create `_index.md` files in the content folder using the taxonomy name as the sub-directory name.
+
+```shell
+.
+└── content
+    └── animals
+        ├── _index.md       # /animals
+        └── lion
+            └── _index.md   # /animals/lion
+```
+
+Anything in these content files will now be placed onto the generated taxonomy pages. As with other content, the front matter variables can be used to override defaults. In this way you could have a tag named `lion` but override the `title` to be "Lion".
+
+To see how this looks in reality, check out the [tags taxonomy listing]({{< ref "tags" >}}) on this site.
+
+## Leaf pages
+
+|                           |                                 |
+| ------------------------- | ------------------------------- |
+| **Layout:**               | `layouts/_default/single.html`  |
+| **Content (standalone):** | `content/../page-name.md`       |
+| **Content (bundled):**    | `content/../page-name/index.md` |
+
+Leaf pages in Hugo are basically standard content pages. They are defined as pages that don't contain any sub-pages. These could be things like an about page, or an individual blog post that lives in the blog section of the website.
+
+The most important thing to remember about leaf pages is that unlike branch pages, leaf pages should be named `index.md` _without_ an underscore. Leaf pages are also special in that they can be grouped together at the top level of the section and named with a unique name.
+
+```shell
+.
+└── content
+    └── blog
+        ├── first-post.md     # /blog/first-post
+        ├── second-post.md    # /blog/second-post
+        └── third-post
+            ├── index.md      # /blog/third-post
+            └── image.jpg
+```
+
+When including assets in a page, like an image, a page bundle should be used. Page bundles are created using a sub-directory with an `index.md` file. Grouping the assets with the content in its own directory is important as many of the shortcodes and other theme logic assumes that resources are bundled alongside pages.
+
+**Example:**
+
+```yaml
+---
+title: "My First Blog Post"
+date: 2022-01-25
+description: "Welcome to my blog!"
+summary: "Learn more about me and why I am starting this blog."
+tags: ["welcome", "new", "about", "first"]
+---
+_This_ is the content of my blog post.
+```
+
+Leaf pages have a wide variety of [front matter]({{< ref "front-matter" >}}) parameters that can be used to customise how they are displayed.
+
+### External links
+
+Blowfish has a special feature that allows links to external pages to appear alongside articles in the article listings. This is useful if you have content on third party websites like Medium, or research papers that you'd like to link to, without replicating the content in your Hugo site.
+
+In order to create an external link article, some special front matter needs to be set:
+
+```yaml
+---
+title: "My Medium post"
+date: 2022-01-25
+externalUrl: "https://medium.com/"
+summary: "I wrote a post on Medium."
+showReadingTime: false
+_build:
+  render: "false"
+  list: "local"
+---
+```
+
+Along with the normal front matter parameters like `title` and `summary`, the `externalUrl` parameter is used to tell Blowfish that this is not an ordinary article. The URL provided here will be where visitors are directed when they select this article.
+
+Additionally, we use a special Hugo front matter parameter `_build` to prevent a normal page for this content being generated - there's no point generating a page since we're linking to an external URL!
+
+The theme includes an archetype to make generating these external link articles simple. Just specify `-k external` when making new content.
+
+```shell
+hugo new -k external posts/my-post.md
+```
+
+### Simple pages
+
+|                   |                                |
+| ----------------- | ------------------------------ |
+| **Layout:**       | `layouts/_default/simple.html` |
+| **Front Matter:** | `layout: "simple"`             |
+
+Blowfish also includes a special layout for simple pages. The simple layout is a full-width template that just places Markdown content into the page without any special theme features.
+
+The only features available in the simple layout are breadcrumbs and sharing links. However, the behaviour of these can still be controlled using the normal page [front matter]({{< ref "front-matter" >}}) variables.
+
+To enable the simple layout on a particular page, add the `layout` front matter variable with a value of `"simple"`:
+
+```yaml
+---
+title: "My landing page"
+date: 2022-03-08
+layout: "simple"
+---
+This page content is now full-width.
+```
+
+## Custom layouts
+
+One of the benefits of Hugo is that it makes it easy to create custom layouts for the whole site, individual sections or pages.
+
+Layouts follow all the normal Hugo templating rules and more information is available in the [official Hugo docs](https://gohugo.io/templates/introduction/).
+
+### Overriding default layouts
+
+Each of the content types discussed above lists the layout file that is used to generate each type of page. If this file is created in your local project it will override the theme template and thus can be used to customise the default style of the website.
+
+For example, creating a `layouts/_default/single.html` file will allow the layout of leaf pages to be completely customised.
+
+### Custom section layouts
+
+It is also simple to create custom layouts for individual content sections. This is useful when you want to make a section that lists a certain type of content using a particular style.
+
+Let's step through an example that creates a custom "Projects" page that lists projects using a special layout.
+
+In order to do this, structure your content using the normal Hugo content rules and create a section for your projects. Additionally, create a new layout for the projects section by using the same directory name as the content and adding a `list.html` file.
+
+```shell
+.
+└── content
+│   └── projects
+│       ├── _index.md
+│       ├── first-project.md
+│       └── second-project.md
+└── layouts
+    └── projects
+        └── list.html
+```
+
+This `list.html` file will now override the default list template, but only for the `projects` section. Before we look at this file, lets first look at the individual project files.
+
+```yaml
+---
+title: "Blowfish"
+date: 2021-08-11
+icon: "github"
+description: "A theme for Hugo built with Tailwind CSS."
+topics: ["Hugo", "Web", "Tailwind"]
+externalUrl: "https://github.com/nunocoracao/blowfish/"
+---
+```
+
+_In this example we are assigning some metadata for each project that we can then use in our list template. There's no page content, but there's nothing stopping you from including it. It's your own custom template after all!_
+
+With the projects defined, now we can create a list template that outputs the details of each project.
+
+```go
+{{ define "main" }}
+  <section class="mt-8">
+    {{ range .Pages }}
+      <article class="pb-6">
+        <a class="flex" href="{{ .Params.externalUrl }}">
+          <div class="mr-3 text-3xl text-neutral-300">
+            <span class="relative inline-block align-text-bottom">
+              {{ partial "icon.html" .Params.icon }}
+            </span>
+          </div>
+          <div>
+            <h3 class="flex text-xl font-semibold">
+              {{ .Title }}
+            </h3>
+            <p class="text-sm text-neutral-400">
+              {{ .Description }}
+            </p>
+          </div>
+        </a>
+      </article>
+    {{ end }}
+  </section>
+{{ end }}
+```
+
+Although this is quite a straightforward example, you can see that it steps through each of the pages in this section (ie. each project), and then outputs HTML links to each project alongside an icon. The metadata in the front matter for each project is used to determine which information is displayed.
+
+Keep in mind that you'll need to ensure the relevant styles and classes are available, which may require the Tailwind CSS to be recompiled. This is discussed in more detail in the [Advanced Customisation]({{< ref "advanced-customisation" >}}) section.
+
+When making custom templates like this one, it's always easiest to take a look at how the default Blowfish template works and then use that as a guide. Remember, the [Hugo docs](https://gohugo.io/templates/introduction/) are a great resource to learn more about creating templates too.

exampleSite/content/docs/firebase-views/index.it.md

@@ -0,0 +1,55 @@
+---
+title: "Firebase: Views & Likes"
+date: 2020-08-03
+draft: false
+description: "Learn how to integrate Firebase and get dynamic data for views and likes."
+slug: "firebase-views"
+tags: ["firebase", "views", likes]
+series: ["Documentation"]
+series_order: 15
+---
+
+In order to be able to support dynamic data across your website we've added the support to integrate Firebase. This will allow you to use the views feature across lists and posts. 
+
+1. Go to <a target="_blank" href="https://firebase.com">Firebase website</a> and create an account for free
+2. Create a new project
+3. Select analytics location
+4. Setup firebase in Blowfish by getting the variables for your project and setting them inside `params.toml` file. More details can be found in <a target="_blank" href="{{< ref "configuration/#theme-parameters" >}}">this page</a>. You can find an example of the file Firebase will provide below, notice the parameters within the FirebaseConfig object.
+
+```
+// Import the functions you need from the SDKs you need
+import { initializeApp } from "firebase/app";
+import { getAnalytics } from "firebase/analytics";
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+// For Firebase JS SDK v7.20.0 and later, measurementId is optional
+const firebaseConfig = {
+  apiKey: "AIzaSyB5tqlqDky77Vb4Tc4apiHV4hRZI18KGiY",
+  authDomain: "blowfish-21fff.firebaseapp.com",
+  projectId: "blowfish-21fff",
+  storageBucket: "blowfish-21fff.appspot.com",
+  messagingSenderId: "60108104191",
+  appId: "1:60108104191:web:039842ebe1370698b487ca",
+  measurementId: "G-PEDMYR1V0K"
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+const analytics = getAnalytics(app);
+```
+
+5. Setup Firestore - Select Build and open Firestore. Create a new database and choose to start in production mode. Select server location and wait. Once that is started you need to configure the rules. Just copy and paste the file below and press publish.
+```
+rules_version = '2';
+service cloud.firestore {
+  match /databases/{database}/documents {
+    match /{document=**} {
+      allow read, write: if request.auth != null;
+    }
+  }
+}
+```
+6. Enable anonymous authorization - Select Build and open Authentication. Select get started, click Anonymous and turn it on, save.
+7. Enjoy - you can now activate views and likes on Blowfish for all (or specific) articles.

exampleSite/content/docs/firebase-views/index.ja.md

@@ -0,0 +1,55 @@
+---
+title: "Firebase: Views & Likes"
+date: 2020-08-03
+draft: false
+description: "Learn how to integrate Firebase and get dynamic data for views and likes."
+slug: "firebase-views"
+tags: ["firebase", "views", likes]
+series: ["Documentation"]
+series_order: 15
+---
+
+In order to be able to support dynamic data across your website we've added the support to integrate Firebase. This will allow you to use the views feature across lists and posts. 
+
+1. Go to <a target="_blank" href="https://firebase.com">Firebase website</a> and create an account for free
+2. Create a new project
+3. Select analytics location
+4. Setup firebase in Blowfish by getting the variables for your project and setting them inside `params.toml` file. More details can be found in <a target="_blank" href="{{< ref "configuration/#theme-parameters" >}}">this page</a>. You can find an example of the file Firebase will provide below, notice the parameters within the FirebaseConfig object.
+
+```
+// Import the functions you need from the SDKs you need
+import { initializeApp } from "firebase/app";
+import { getAnalytics } from "firebase/analytics";
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+// For Firebase JS SDK v7.20.0 and later, measurementId is optional
+const firebaseConfig = {
+  apiKey: "AIzaSyB5tqlqDky77Vb4Tc4apiHV4hRZI18KGiY",
+  authDomain: "blowfish-21fff.firebaseapp.com",
+  projectId: "blowfish-21fff",
+  storageBucket: "blowfish-21fff.appspot.com",
+  messagingSenderId: "60108104191",
+  appId: "1:60108104191:web:039842ebe1370698b487ca",
+  measurementId: "G-PEDMYR1V0K"
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+const analytics = getAnalytics(app);
+```
+
+5. Setup Firestore - Select Build and open Firestore. Create a new database and choose to start in production mode. Select server location and wait. Once that is started you need to configure the rules. Just copy and paste the file below and press publish.
+```
+rules_version = '2';
+service cloud.firestore {
+  match /databases/{database}/documents {
+    match /{document=**} {
+      allow read, write: if request.auth != null;
+    }
+  }
+}
+```
+6. Enable anonymous authorization - Select Build and open Authentication. Select get started, click Anonymous and turn it on, save.
+7. Enjoy - you can now activate views and likes on Blowfish for all (or specific) articles.

exampleSite/content/docs/firebase-views/index.zh-cn.md

@@ -0,0 +1,55 @@
+---
+title: "Firebase: Views & Likes"
+date: 2020-08-03
+draft: false
+description: "Learn how to integrate Firebase and get dynamic data for views and likes."
+slug: "firebase-views"
+tags: ["firebase", "views", likes]
+series: ["Documentation"]
+series_order: 15
+---
+
+In order to be able to support dynamic data across your website we've added the support to integrate Firebase. This will allow you to use the views feature across lists and posts. 
+
+1. Go to <a target="_blank" href="https://firebase.com">Firebase website</a> and create an account for free
+2. Create a new project
+3. Select analytics location
+4. Setup firebase in Blowfish by getting the variables for your project and setting them inside `params.toml` file. More details can be found in <a target="_blank" href="{{< ref "configuration/#theme-parameters" >}}">this page</a>. You can find an example of the file Firebase will provide below, notice the parameters within the FirebaseConfig object.
+
+```
+// Import the functions you need from the SDKs you need
+import { initializeApp } from "firebase/app";
+import { getAnalytics } from "firebase/analytics";
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+// For Firebase JS SDK v7.20.0 and later, measurementId is optional
+const firebaseConfig = {
+  apiKey: "AIzaSyB5tqlqDky77Vb4Tc4apiHV4hRZI18KGiY",
+  authDomain: "blowfish-21fff.firebaseapp.com",
+  projectId: "blowfish-21fff",
+  storageBucket: "blowfish-21fff.appspot.com",
+  messagingSenderId: "60108104191",
+  appId: "1:60108104191:web:039842ebe1370698b487ca",
+  measurementId: "G-PEDMYR1V0K"
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+const analytics = getAnalytics(app);
+```
+
+5. Setup Firestore - Select Build and open Firestore. Create a new database and choose to start in production mode. Select server location and wait. Once that is started you need to configure the rules. Just copy and paste the file below and press publish.
+```
+rules_version = '2';
+service cloud.firestore {
+  match /databases/{database}/documents {
+    match /{document=**} {
+      allow read, write: if request.auth != null;
+    }
+  }
+}
+```
+6. Enable anonymous authorization - Select Build and open Authentication. Select get started, click Anonymous and turn it on, save.
+7. Enjoy - you can now activate views and likes on Blowfish for all (or specific) articles.

exampleSite/content/docs/front-matter/index.it.md

@@ -0,0 +1,57 @@
+---
+title: "Front Matter"
+date: 2020-08-10
+draft: false
+description: "All the front matter variables available in Blowfish."
+slug: "front-matter"
+tags: ["front matter", "config", "docs"]
+series: ["Documentation"]
+series_order: 7
+---
+
+In addition to the [default Hugo front matter parameters](https://gohugo.io/content-management/front-matter/#front-matter-variables), Blowfish adds a number of additional options to customise the presentation of individual articles. All the available theme front matter parameters are listed below.
+
+Front matter parameter default values are inherited from the theme's [base configuration]({{< ref "configuration" >}}), so you only need to specify these parameters in your front matter when you want to override the default.
+
+<!-- prettier-ignore-start -->
+| Name                          | Default                                                                                                         | Description                                                                                                                                                                                                                                                  |
+| ----------------------------- | --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `title`                       | _Not set_                                                                                                       | The name of the article.                                                                                                                                                                                                                                     |
+| `description`                 | _Not set_                                                                                                       | The text description for the article. It is used in the HTML metadata.                                                                                                                                                                                       |
+| `externalUrl`                 | _Not set_                                                                                                       | If this article is published on a third-party website, the URL to this article. Providing a URL will prevent a content page being generated and any references to this article will link directly to the third-party website.                                |
+| `editURL`                     | `article.editURL`                                                                                               | When `showEdit` is active, the URL for the edit link.                                                                                                                                                                                                        |
+| `editAppendPath`              | `article.editAppendPath`                                                                                        | When `showEdit` is active, whether or not the path to the current article should be appended to the URL set at `editURL`.                                                                                                                                    |
+| `groupByYear`                 | `list.groupByYear`                                                                                              | Whether or not articles are grouped by year on list pages.                                                                                                                                                                                                   |
+| `menu`                        | _Not set_                                                                                                       | When a value is provided, a link to this article will appear in the named menus. Valid values are `main` or `footer`.                                                                                                                                        |
+| `robots`                      | _Not set_                                                                                                       | String that indicates how robots should handle this article. If set, it will be output in the page head. Refer to [Google's docs](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) for valid values.                    |
+| `sharingLinks`                | `article.sharingLinks`                                                                                          | Which sharing links to display at the end of this article. When not provided, or set to `false` no links will be displayed.                                                                                                                                  |
+| `showAuthor`                  | `article.showAuthor`                                                                                            | Whether or not the author box for the default author is displayed in the article footer.                                                                                                                                                                     |
+| `authors`                     | _Not set_                                                                                                       | Array of values for authors, if set it overrides `showAuthor` settings for page or site. Used on the multiple authors feature, check [this page]({{< ref "multi-author" >}}) for more details on how to configure that feature.                              |
+| `showAuthorsBadges`           | `article.showAuthorsBadges`                                                                                     | Whether the `authors` taxonomies are are displayed in the article or list header. This requires the setup of `multiple authors` and the `authors` taxonomy. Check [this page]({{< ref "multi-author" >}}) for more details on how to configure that feature. |
+| `featureimage`                | _Not set_                                                                                                       | External URL for feature image
+| `featureimagecaption`         | _Not set_                                                                                                       | Caption for feature image. Only displayed in heroStyle `big`
+| `showHero`                    | `article.showHero`                                                                                              | Whether the thumbnail image will be shown as a hero image within the article page.                                                                                                                                                                           |
+| `heroStyle`                   | `article.heroStyle`                                                                                             | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`.                                                                                                                                                      |
+| `showBreadcrumbs`             | `article.showBreadcrumbs` or `list.showBreadcrumbs`                                                             | Whether the breadcrumbs are displayed in the article or list header.                                                                                                                                                                                         |
+| `showDate`                    | `article.showDate`                                                                                              | Whether or not the article date is displayed. The date is set using the `date` parameter.                                                                                                                                                                    |
+| `showDateUpdated`             | `article.showDateUpdated`                                                                                       | Whether or not the date the article was updated is displayed. The date is set using the `lastmod` parameter.                                                                                                                                                 |
+| `showEdit`                    | `article.showEdit`                                                                                              | Whether or not the link to edit the article content should be displayed.                                                                                                                                                                                     |
+| `showHeadingAnchors`          | `article.showHeadingAnchors`                                                                                    | Whether or not heading anchor links are displayed alongside headings within this article.                                                                                                                                                                    |
+| `showPagination`              | `article.showPagination`                                                                                        | Whether or not the next/previous article links are displayed in the article footer.                                                                                                                                                                          |
+| `invertPagination`            | `article.invertPagination`                                                                                      | Whether or not to flip the direction of the next/previous article links.                                                                                                                                                                                     |
+| `showReadingTime`             | `article.showReadingTime`                                                                                       | Whether or not the article reading time is displayed.                                                                                                                                                                                                        |
+| `showTaxonomies`              | `article.showTaxonomies`                                                                                        | Whether or not the taxonomies that relate to this article are displayed.                                                                                                                                                                                     |
+| `showTableOfContents`         | `article.showTableOfContents`                                                                                   | Whether or not the table of contents is displayed on this article.                                                                                                                                                                                           |
+| `showWordCount`               | `article.showWordCount`                                                                                         | Whether or not the article word count is displayed.                                                                                                                                                                                                          |
+| `showComments`                | `article.showComments`                                                                                          | Whether or not the [comments partial]({{< ref "partials#comments" >}}) is included after the article footer.                                                                                                                                                 |
+| `showSummary`                 | `list.showSummary`                                                                                              | Whether or not the article summary should be displayed on list pages.                                                                                                                                                                                        |
+| `showViews`                   | `article.showViews`                                                                                             | Whether or not the article views should be displayed in lists and detailed view. This requires a firebase integration. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish                                |
+| `showLikes`                   | `article.showLikes`                                                                                             | Whether or not the article likes should be displayed in lists and detailed view. This requires a firebase integration. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish                                |
+| `seriesOpened`                | `article.seriesOpened`                                                                                          | Whether or not the series module will be displayed open by default or not.                                                                                                                                                                                   |
+| `series`                      | _Not set_                                                                                                       | Array of series the article belongs to, we recommend using only one series per article.                                                                                                                                                                      |
+| `series_order`                | _Not set_                                                                                                       | Number of the article within the series.                                                                                                                                                                                                                     |
+| `summary`                     | Auto generated using `summaryLength` (see [site configuration]({{< ref "configuration#site-configuration" >}})) | When `showSummary` is enabled, this is the Markdown string to be used as the summary for this article.                                                                                                                                                       |
+| `xml`                         | `true` unless excluded by `sitemap.excludedKinds`                                                               | Whether or not this article is included in the generated `/sitemap.xml` file.                                                                                                                                                                                |
+| `layoutBackgroundBlur`        | `true`                                                                                                          | Makes the background image in the background heroStyle blur with the scroll                                                                                                                                                                                  |
+| `layoutBackgroundHeaderSpace` | `true`                                                                                                          | Add space between the header and the body.                                                                                                                                                                                                                   |
+<!-- prettier-ignore-end -->

exampleSite/content/docs/front-matter/index.ja.md

@@ -0,0 +1,57 @@
+---
+title: "Front Matter"
+date: 2020-08-10
+draft: false
+description: "All the front matter variables available in Blowfish."
+slug: "front-matter"
+tags: ["front matter", "config", "docs"]
+series: ["Documentation"]
+series_order: 7
+---
+
+In addition to the [default Hugo front matter parameters](https://gohugo.io/content-management/front-matter/#front-matter-variables), Blowfish adds a number of additional options to customise the presentation of individual articles. All the available theme front matter parameters are listed below.
+
+Front matter parameter default values are inherited from the theme's [base configuration]({{< ref "configuration" >}}), so you only need to specify these parameters in your front matter when you want to override the default.
+
+<!-- prettier-ignore-start -->
+| Name                          | Default                                                                                                         | Description                                                                                                                                                                                                                                                  |
+| ----------------------------- | --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `title`                       | _Not set_                                                                                                       | The name of the article.                                                                                                                                                                                                                                     |
+| `description`                 | _Not set_                                                                                                       | The text description for the article. It is used in the HTML metadata.                                                                                                                                                                                       |
+| `externalUrl`                 | _Not set_                                                                                                       | If this article is published on a third-party website, the URL to this article. Providing a URL will prevent a content page being generated and any references to this article will link directly to the third-party website.                                |
+| `editURL`                     | `article.editURL`                                                                                               | When `showEdit` is active, the URL for the edit link.                                                                                                                                                                                                        |
+| `editAppendPath`              | `article.editAppendPath`                                                                                        | When `showEdit` is active, whether or not the path to the current article should be appended to the URL set at `editURL`.                                                                                                                                    |
+| `groupByYear`                 | `list.groupByYear`                                                                                              | Whether or not articles are grouped by year on list pages.                                                                                                                                                                                                   |
+| `menu`                        | _Not set_                                                                                                       | When a value is provided, a link to this article will appear in the named menus. Valid values are `main` or `footer`.                                                                                                                                        |
+| `robots`                      | _Not set_                                                                                                       | String that indicates how robots should handle this article. If set, it will be output in the page head. Refer to [Google's docs](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) for valid values.                    |
+| `sharingLinks`                | `article.sharingLinks`                                                                                          | Which sharing links to display at the end of this article. When not provided, or set to `false` no links will be displayed.                                                                                                                                  |
+| `showAuthor`                  | `article.showAuthor`                                                                                            | Whether or not the author box for the default author is displayed in the article footer.                                                                                                                                                                     |
+| `authors`                     | _Not set_                                                                                                       | Array of values for authors, if set it overrides `showAuthor` settings for page or site. Used on the multiple authors feature, check [this page]({{< ref "multi-author" >}}) for more details on how to configure that feature.                              |
+| `showAuthorsBadges`           | `article.showAuthorsBadges`                                                                                     | Whether the `authors` taxonomies are are displayed in the article or list header. This requires the setup of `multiple authors` and the `authors` taxonomy. Check [this page]({{< ref "multi-author" >}}) for more details on how to configure that feature. |
+| `featureimage`                | _Not set_                                                                                                       | External URL for feature image
+| `featureimagecaption`         | _Not set_                                                                                                       | Caption for feature image. Only displayed in heroStyle `big`
+| `showHero`                    | `article.showHero`                                                                                              | Whether the thumbnail image will be shown as a hero image within the article page.                                                                                                                                                                           |
+| `heroStyle`                   | `article.heroStyle`                                                                                             | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`.                                                                                                                                                      |
+| `showBreadcrumbs`             | `article.showBreadcrumbs` or `list.showBreadcrumbs`                                                             | Whether the breadcrumbs are displayed in the article or list header.                                                                                                                                                                                         |
+| `showDate`                    | `article.showDate`                                                                                              | Whether or not the article date is displayed. The date is set using the `date` parameter.                                                                                                                                                                    |
+| `showDateUpdated`             | `article.showDateUpdated`                                                                                       | Whether or not the date the article was updated is displayed. The date is set using the `lastmod` parameter.                                                                                                                                                 |
+| `showEdit`                    | `article.showEdit`                                                                                              | Whether or not the link to edit the article content should be displayed.                                                                                                                                                                                     |
+| `showHeadingAnchors`          | `article.showHeadingAnchors`                                                                                    | Whether or not heading anchor links are displayed alongside headings within this article.                                                                                                                                                                    |
+| `showPagination`              | `article.showPagination`                                                                                        | Whether or not the next/previous article links are displayed in the article footer.                                                                                                                                                                          |
+| `invertPagination`            | `article.invertPagination`                                                                                      | Whether or not to flip the direction of the next/previous article links.                                                                                                                                                                                     |
+| `showReadingTime`             | `article.showReadingTime`                                                                                       | Whether or not the article reading time is displayed.                                                                                                                                                                                                        |
+| `showTaxonomies`              | `article.showTaxonomies`                                                                                        | Whether or not the taxonomies that relate to this article are displayed.                                                                                                                                                                                     |
+| `showTableOfContents`         | `article.showTableOfContents`                                                                                   | Whether or not the table of contents is displayed on this article.                                                                                                                                                                                           |
+| `showWordCount`               | `article.showWordCount`                                                                                         | Whether or not the article word count is displayed.                                                                                                                                                                                                          |
+| `showComments`                | `article.showComments`                                                                                          | Whether or not the [comments partial]({{< ref "partials#comments" >}}) is included after the article footer.                                                                                                                                                 |
+| `showSummary`                 | `list.showSummary`                                                                                              | Whether or not the article summary should be displayed on list pages.                                                                                                                                                                                        |
+| `showViews`                   | `article.showViews`                                                                                             | Whether or not the article views should be displayed in lists and detailed view. This requires a firebase integration. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish                                |
+| `showLikes`                   | `article.showLikes`                                                                                             | Whether or not the article likes should be displayed in lists and detailed view. This requires a firebase integration. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish                                |
+| `seriesOpened`                | `article.seriesOpened`                                                                                          | Whether or not the series module will be displayed open by default or not.                                                                                                                                                                                   |
+| `series`                      | _Not set_                                                                                                       | Array of series the article belongs to, we recommend using only one series per article.                                                                                                                                                                      |
+| `series_order`                | _Not set_                                                                                                       | Number of the article within the series.                                                                                                                                                                                                                     |
+| `summary`                     | Auto generated using `summaryLength` (see [site configuration]({{< ref "configuration#site-configuration" >}})) | When `showSummary` is enabled, this is the Markdown string to be used as the summary for this article.                                                                                                                                                       |
+| `xml`                         | `true` unless excluded by `sitemap.excludedKinds`                                                               | Whether or not this article is included in the generated `/sitemap.xml` file.                                                                                                                                                                                |
+| `layoutBackgroundBlur`        | `true`                                                                                                          | Makes the background image in the background heroStyle blur with the scroll                                                                                                                                                                                  |
+| `layoutBackgroundHeaderSpace` | `true`                                                                                                          | Add space between the header and the body.                                                                                                                                                                                                                   |
+<!-- prettier-ignore-end -->

exampleSite/content/docs/front-matter/index.zh-cn.md

@@ -0,0 +1,57 @@
+---
+title: "Front Matter"
+date: 2020-08-10
+draft: false
+description: "All the front matter variables available in Blowfish."
+slug: "front-matter"
+tags: ["front matter", "config", "docs"]
+series: ["Documentation"]
+series_order: 7
+---
+
+In addition to the [default Hugo front matter parameters](https://gohugo.io/content-management/front-matter/#front-matter-variables), Blowfish adds a number of additional options to customise the presentation of individual articles. All the available theme front matter parameters are listed below.
+
+Front matter parameter default values are inherited from the theme's [base configuration]({{< ref "configuration" >}}), so you only need to specify these parameters in your front matter when you want to override the default.
+
+<!-- prettier-ignore-start -->
+| Name                          | Default                                                                                                         | Description                                                                                                                                                                                                                                                  |
+| ----------------------------- | --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `title`                       | _Not set_                                                                                                       | The name of the article.                                                                                                                                                                                                                                     |
+| `description`                 | _Not set_                                                                                                       | The text description for the article. It is used in the HTML metadata.                                                                                                                                                                                       |
+| `externalUrl`                 | _Not set_                                                                                                       | If this article is published on a third-party website, the URL to this article. Providing a URL will prevent a content page being generated and any references to this article will link directly to the third-party website.                                |
+| `editURL`                     | `article.editURL`                                                                                               | When `showEdit` is active, the URL for the edit link.                                                                                                                                                                                                        |
+| `editAppendPath`              | `article.editAppendPath`                                                                                        | When `showEdit` is active, whether or not the path to the current article should be appended to the URL set at `editURL`.                                                                                                                                    |
+| `groupByYear`                 | `list.groupByYear`                                                                                              | Whether or not articles are grouped by year on list pages.                                                                                                                                                                                                   |
+| `menu`                        | _Not set_                                                                                                       | When a value is provided, a link to this article will appear in the named menus. Valid values are `main` or `footer`.                                                                                                                                        |
+| `robots`                      | _Not set_                                                                                                       | String that indicates how robots should handle this article. If set, it will be output in the page head. Refer to [Google's docs](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) for valid values.                    |
+| `sharingLinks`                | `article.sharingLinks`                                                                                          | Which sharing links to display at the end of this article. When not provided, or set to `false` no links will be displayed.                                                                                                                                  |
+| `showAuthor`                  | `article.showAuthor`                                                                                            | Whether or not the author box for the default author is displayed in the article footer.                                                                                                                                                                     |
+| `authors`                     | _Not set_                                                                                                       | Array of values for authors, if set it overrides `showAuthor` settings for page or site. Used on the multiple authors feature, check [this page]({{< ref "multi-author" >}}) for more details on how to configure that feature.                              |
+| `showAuthorsBadges`           | `article.showAuthorsBadges`                                                                                     | Whether the `authors` taxonomies are are displayed in the article or list header. This requires the setup of `multiple authors` and the `authors` taxonomy. Check [this page]({{< ref "multi-author" >}}) for more details on how to configure that feature. |
+| `featureimage`                | _Not set_                                                                                                       | External URL for feature image
+| `featureimagecaption`         | _Not set_                                                                                                       | Caption for feature image. Only displayed in heroStyle `big`
+| `showHero`                    | `article.showHero`                                                                                              | Whether the thumbnail image will be shown as a hero image within the article page.                                                                                                                                                                           |
+| `heroStyle`                   | `article.heroStyle`                                                                                             | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`.                                                                                                                                                      |
+| `showBreadcrumbs`             | `article.showBreadcrumbs` or `list.showBreadcrumbs`                                                             | Whether the breadcrumbs are displayed in the article or list header.                                                                                                                                                                                         |
+| `showDate`                    | `article.showDate`                                                                                              | Whether or not the article date is displayed. The date is set using the `date` parameter.                                                                                                                                                                    |
+| `showDateUpdated`             | `article.showDateUpdated`                                                                                       | Whether or not the date the article was updated is displayed. The date is set using the `lastmod` parameter.                                                                                                                                                 |
+| `showEdit`                    | `article.showEdit`                                                                                              | Whether or not the link to edit the article content should be displayed.                                                                                                                                                                                     |
+| `showHeadingAnchors`          | `article.showHeadingAnchors`                                                                                    | Whether or not heading anchor links are displayed alongside headings within this article.                                                                                                                                                                    |
+| `showPagination`              | `article.showPagination`                                                                                        | Whether or not the next/previous article links are displayed in the article footer.                                                                                                                                                                          |
+| `invertPagination`            | `article.invertPagination`                                                                                      | Whether or not to flip the direction of the next/previous article links.                                                                                                                                                                                     |
+| `showReadingTime`             | `article.showReadingTime`                                                                                       | Whether or not the article reading time is displayed.                                                                                                                                                                                                        |
+| `showTaxonomies`              | `article.showTaxonomies`                                                                                        | Whether or not the taxonomies that relate to this article are displayed.                                                                                                                                                                                     |
+| `showTableOfContents`         | `article.showTableOfContents`                                                                                   | Whether or not the table of contents is displayed on this article.                                                                                                                                                                                           |
+| `showWordCount`               | `article.showWordCount`                                                                                         | Whether or not the article word count is displayed.                                                                                                                                                                                                          |
+| `showComments`                | `article.showComments`                                                                                          | Whether or not the [comments partial]({{< ref "partials#comments" >}}) is included after the article footer.                                                                                                                                                 |
+| `showSummary`                 | `list.showSummary`                                                                                              | Whether or not the article summary should be displayed on list pages.                                                                                                                                                                                        |
+| `showViews`                   | `article.showViews`                                                                                             | Whether or not the article views should be displayed in lists and detailed view. This requires a firebase integration. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish                                |
+| `showLikes`                   | `article.showLikes`                                                                                             | Whether or not the article likes should be displayed in lists and detailed view. This requires a firebase integration. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish                                |
+| `seriesOpened`                | `article.seriesOpened`                                                                                          | Whether or not the series module will be displayed open by default or not.                                                                                                                                                                                   |
+| `series`                      | _Not set_                                                                                                       | Array of series the article belongs to, we recommend using only one series per article.                                                                                                                                                                      |
+| `series_order`                | _Not set_                                                                                                       | Number of the article within the series.                                                                                                                                                                                                                     |
+| `summary`                     | Auto generated using `summaryLength` (see [site configuration]({{< ref "configuration#site-configuration" >}})) | When `showSummary` is enabled, this is the Markdown string to be used as the summary for this article.                                                                                                                                                       |
+| `xml`                         | `true` unless excluded by `sitemap.excludedKinds`                                                               | Whether or not this article is included in the generated `/sitemap.xml` file.                                                                                                                                                                                |
+| `layoutBackgroundBlur`        | `true`                                                                                                          | Makes the background image in the background heroStyle blur with the scroll                                                                                                                                                                                  |
+| `layoutBackgroundHeaderSpace` | `true`                                                                                                          | Add space between the header and the body.                                                                                                                                                                                                                   |
+<!-- prettier-ignore-end -->

exampleSite/content/docs/getting-started/index.it.md

@@ -0,0 +1,272 @@
+---
+title: "Getting Started"
+date: 2020-08-15
+draft: false
+description: "All the front matter variables available in Blowfish."
+slug: "getting-started"
+tags: ["installation", "docs"]
+series: ["Documentation"]
+series_order: 3
+---
+
+{{< alert >}}
+This section assumes you have already [installed the Blowfish theme]({{< ref "docs/installation" >}}).
+{{< /alert >}}
+
+</br>
+{{< alert "fire" >}}
+We just launched a CLI tool to help you get started with Blowfish. It will help you with installation and configuration. Install the CLI tool globally using:
+```bash
+npx blowfish-tools
+```
+{{< /alert >}}
+
+
+The config files that ship with Blowfish contain all of the possible settings that the theme recognises. By default, many of these are commented out but you can simply uncomment them to activate or change a specific feature.
+
+## Basic configuration
+
+Before creating any content, there are a few things you should set for a new installation. Starting in the `config.toml` file, set the `baseURL` and `languageCode` parameters. The `languageCode` should be set to the main language that you will be using to author your content.
+
+```toml
+# config/_default/config.toml
+
+baseURL = "https://your_domain.com/"
+languageCode = "en"
+```
+
+The next step is to configure the language settings. Although Blowfish supports multilingual setups, for now, just configure the main language.
+
+Locate the `languages.en.toml` file in the config folder. If your main language is English you can use this file as is. Otherwise, rename it so that it includes the correct language code in the filename. For example, for French, rename the file to `languages.fr.toml`.
+
+{{< alert >}}
+Note that the language code in the language config filename should match the `languageCode` setting in `config.toml`.
+{{< /alert >}}
+
+```toml
+# config/_default/languages.en.toml
+
+title = "My awesome website"
+
+[author]
+name = "My name"
+image = "img/author.jpg"
+headline = "A generally awesome human"
+bio = "A little bit about me"
+links = [
+  { twitter = "https://twitter.com/username" }
+]
+```
+
+The `[author]` configuration determines how the author information is displayed on the website. The image should be placed in the site's `assets/` folder. Links will be displayed in the order they are listed.
+
+If you need extra detail, further information about each of these configuration options, is covered in the [Configuration]({{< ref "configuration" >}}) section.
+
+## Colour schemes
+
+Blowfish ships with a number of colour schemes out of the box. To change the scheme, simply set the `colorScheme` theme parameter. Valid options are `blowfish` (default), `avocado`, `fire`, `ocean`, `forest`, `princess`, `neon`, `bloody`, `terminal`, `marvel`, `noir`, `autumn`, `congo`, and`slate`.
+
+```toml
+# config/_default/params.toml
+
+colorScheme = "blowfish"
+```
+
+Blowfish defines a three-colour palette that is used throughout the theme. Each main colour contains ten shades which are based upon the colours that are included in [Tailwind](https://tailwindcss.com/docs/customizing-colors#color-palette-reference). The three main colours are used for the header, footer, and accent colours. Here are the colors for each scheme:
+
+#### Blowfish (default)
+{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
+
+#### Avocado
+{{< swatches "#78716c" "#84cc16" "#10b981" >}}
+
+#### Fire
+{{< swatches "#78716c" "#f97316" "#f43f5e" >}}
+
+#### Ocean
+{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
+
+#### Forest
+{{< swatches "#658c86" "#3bf5df" "#06d45c" >}}
+
+#### Princess
+{{< swatches "#8c658c" "#f53bf2" "#7706d4" >}}
+
+#### Neon
+{{< swatches "#8338ec" "#ff006e" "#3a86ff" >}}
+
+#### Bloody
+{{< swatches "#d90429" "#8d99ae" "#457b9d" >}}
+
+#### Terminal
+{{< swatches "#004b23" "#38b000" "#1a759f" >}}
+
+#### Marvel
+{{< swatches "#2541b2" "#d81159" "#ffbc42" >}}
+
+#### Noir
+{{< swatches "#5c6b73" "#9db4c0" "#00a5cf" >}}
+
+#### Autumn
+{{< swatches "#0a9396" "#ee9b00" "#bb3e03" >}}
+
+#### Congo
+{{< swatches "#71717a" "#8b5cf6" "#d946ef" >}}
+
+#### Slate
+{{< swatches "#6B7280" "#64748b" "#6B7280" >}}
+
+
+Although these are the default schemes, you can also create your own. Refer to the [Advanced Customisation]({{< ref "advanced-customisation#colour-schemes" >}}) section for details.
+
+## Organising content
+
+By default, Blowfish doesn't force you to use a particular content type. In doing so you are free to define your content as you wish. You might prefer _pages_ for a static site, _posts_ for a blog, or _projects_ for a portfolio.
+
+Here's a quick overview of a basic Blowfish project. All content is placed within the `content` folder:
+
+```shell
+.
+├── assets
+│   └── img
+│       └── author.jpg
+├── config
+│   └── _default
+├── content
+│   ├── _index.md
+│   ├── about.md
+│   └── posts
+│       ├── _index.md
+│       ├── first-post.md
+│       └── another-post
+│           ├── aardvark.jpg
+│           └── index.md
+└── themes
+    └── blowfish
+```
+
+It's important to have a firm grasp of how Hugo expects content to be organised as the theme is designed to take full advantage of Hugo page bundles. Be sure to read the [official Hugo docs](https://gohugo.io/content-management/organization/) for more information.
+
+Blowfish is also flexible when it comes to taxonomies. Some people prefer to use _tags_ and _categories_ to group their content, others prefer to use _topics_.
+
+Hugo defaults to using posts, tags and categories out of the box and this will work fine if that's what you want. If you wish to customise this, however, you can do so by creating a `taxonomies.toml` configuration file:
+
+```toml
+# config/_default/taxonomies.toml
+
+topic = "topics"
+```
+
+This will replace the default _tags_ and _categories_ with _topics_. Refer to the [Hugo Taxonomy docs](https://gohugo.io/content-management/taxonomies/) for more information on naming taxonomies.
+
+When you create a new taxonomy, you will need to adjust the navigation links on the website to point to the correct sections, which is covered below.
+
+## Menus
+
+Blowfish has two menus that can be customised to suit the content and layout of your site. The `main` menu appears in the site header and the `footer` menu appears at the bottom of the page just above the copyright notice.
+
+Both menus are configured in the `menus.en.toml` file. Similarly to the languages config file, if you wish to use another language, rename this file and replace `en` with the language code you wish to use.
+
+```toml
+# config/_default/menus.toml
+
+[[main]]
+  name = "Blog"
+  pageRef = "posts"
+  weight = 10
+
+[[main]]
+  name = "Topics"
+  pageRef = "topics"
+  weight = 20
+
+[[main]]
+  pre = "github"
+  name = "GitHub"
+  url = "https://github.com/nunocoracao/blowfish"
+  weight = 30
+
+[[main]]
+  identifier = "github2"
+  pre = "github"
+  url = "https://github.com/nunocoracao/blowfish"
+  weight = 40
+
+[[footer]]
+  name = "Privacy"
+  url = "https://external-link"
+```
+
+The `name` parameter specifies the text that is used in the menu link. You can also optionally provide a `title` which fills the HTML title attribute for the link.
+
+The `pageRef` parameter allows you to easily reference Hugo content pages and taxonomies. It is the quickest way to configure the menu as you can simply refer to any Hugo content item and it will automatically build the correct link. To link to external URLs, the `url` parameter can be used.
+
+The `pre` parameter allows you to place an icon from [Blowfish's icon set]({{< ref "samples/icons" >}}) on the menu entry. This parameter can be used with `name` parameter or by itself. If you want to use multiple menu entries with just icons please set the `identifier`parameter otherwise Hugo will default to the naming tag as the id and probably not display all the menu entries.
+
+Menu links will be sorted from lowest to highest `weight`, and then alphabetically by `name`.
+
+Both menus are completely optional and can be commented out if not required. Use the template provided in the file as a guide.
+
+### Nested menus
+
+The theme also supports nested menus. In order to use them you just need to define a parent entry in `menu.toml` and its sub-menus using the `parent` parameter to reference the parent. All properties can be used for sub-menus. `pageRef` and `url` can also be used in the parent entry. Nested menus are only available in the main menu not for the footer.
+
+```toml
+# config/_default/menus.toml
+
+[[main]]
+  name = "Parent"
+  weight = 20
+
+[[main]]
+  name = "sub-menu 1"
+  parent = "Parent"
+  pageRef = "samples"
+  weight = 20
+
+[[main]]
+  name = "sub-menu 2"
+  parent = "Parent"
+  pageRef = "samples"
+  weight = 20
+
+[[main]]
+  name = "sub-menu 3"
+  parent = "Parent"
+  pre = "github"
+  pageRef = "samples"
+  weight = 20
+```
+
+### Sub-Navigation menu
+
+Additionally, you can also configure a sub-navigation menu. Just define new menu entries as `subnavigation` in `menus.toml`.
+This will render a second line with sub-categories below the main header menu.
+
+```toml
+# config/_default/menus.toml
+
+[[subnavigation]]
+  name = "An interesting topic"
+  pageRef = "tags/interesting-topic"
+  weight = 10
+
+[[subnavigation]]
+  name = "My Awesome Category"
+  pageRef = "categories/awesome"
+  weight = 20
+```
+
+The default `name` is the `pageRef` title cased.
+
+## Thumbnails & Backgrounds
+
+Blowfish was built so it would be easy to add visual support to your articles. If your familiar with Hugo article structure, you just need to place an image file (almost all formats are supported but we recommend `.png` or `.jpg`) that starts with `feature*` inside your article folder. And that's it, Blowfish will then be able to both use the image as a thumbnail within your website as well as for <a target="_blank" href="https://oembed.com/">oEmbed</a> cards across social platforms. 
+
+[Here]({{< ref "thumbnails" >}}) is also a guide with more info and a [sample]({{< ref "thumbnail_sample" >}}) if you want to see how you can do it.
+
+Additionally, Blowfish also supports background hero images in articles and lists. In order to use a different image than the featured one, add an image file in which the name starts with `background*`.
+
+## Detailed configuration
+
+The steps above are the bare minimum configuration. If you now run `hugo server` you will be presented with a blank Blowfish website. Detailed configuration is covered in the [Configuration]({{< ref "configuration" >}}) section.

exampleSite/content/docs/getting-started/index.zh-cn.md

@@ -0,0 +1,272 @@
+---
+title: "Getting Started"
+date: 2020-08-15
+draft: false
+description: "All the front matter variables available in Blowfish."
+slug: "getting-started"
+tags: ["installation", "docs"]
+series: ["Documentation"]
+series_order: 3
+---
+
+{{< alert >}}
+This section assumes you have already [installed the Blowfish theme]({{< ref "docs/installation" >}}).
+{{< /alert >}}
+
+</br>
+{{< alert "fire" >}}
+We just launched a CLI tool to help you get started with Blowfish. It will help you with installation and configuration. Install the CLI tool globally using:
+```bash
+npx blowfish-tools
+```
+{{< /alert >}}
+
+
+The config files that ship with Blowfish contain all of the possible settings that the theme recognises. By default, many of these are commented out but you can simply uncomment them to activate or change a specific feature.
+
+## Basic configuration
+
+Before creating any content, there are a few things you should set for a new installation. Starting in the `config.toml` file, set the `baseURL` and `languageCode` parameters. The `languageCode` should be set to the main language that you will be using to author your content.
+
+```toml
+# config/_default/config.toml
+
+baseURL = "https://your_domain.com/"
+languageCode = "en"
+```
+
+The next step is to configure the language settings. Although Blowfish supports multilingual setups, for now, just configure the main language.
+
+Locate the `languages.en.toml` file in the config folder. If your main language is English you can use this file as is. Otherwise, rename it so that it includes the correct language code in the filename. For example, for French, rename the file to `languages.fr.toml`.
+
+{{< alert >}}
+Note that the language code in the language config filename should match the `languageCode` setting in `config.toml`.
+{{< /alert >}}
+
+```toml
+# config/_default/languages.en.toml
+
+title = "My awesome website"
+
+[author]
+name = "My name"
+image = "img/author.jpg"
+headline = "A generally awesome human"
+bio = "A little bit about me"
+links = [
+  { twitter = "https://twitter.com/username" }
+]
+```
+
+The `[author]` configuration determines how the author information is displayed on the website. The image should be placed in the site's `assets/` folder. Links will be displayed in the order they are listed.
+
+If you need extra detail, further information about each of these configuration options, is covered in the [Configuration]({{< ref "configuration" >}}) section.
+
+## Colour schemes
+
+Blowfish ships with a number of colour schemes out of the box. To change the scheme, simply set the `colorScheme` theme parameter. Valid options are `blowfish` (default), `avocado`, `fire`, `ocean`, `forest`, `princess`, `neon`, `bloody`, `terminal`, `marvel`, `noir`, `autumn`, `congo`, and`slate`.
+
+```toml
+# config/_default/params.toml
+
+colorScheme = "blowfish"
+```
+
+Blowfish defines a three-colour palette that is used throughout the theme. Each main colour contains ten shades which are based upon the colours that are included in [Tailwind](https://tailwindcss.com/docs/customizing-colors#color-palette-reference). The three main colours are used for the header, footer, and accent colours. Here are the colors for each scheme:
+
+#### Blowfish (default)
+{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
+
+#### Avocado
+{{< swatches "#78716c" "#84cc16" "#10b981" >}}
+
+#### Fire
+{{< swatches "#78716c" "#f97316" "#f43f5e" >}}
+
+#### Ocean
+{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
+
+#### Forest
+{{< swatches "#658c86" "#3bf5df" "#06d45c" >}}
+
+#### Princess
+{{< swatches "#8c658c" "#f53bf2" "#7706d4" >}}
+
+#### Neon
+{{< swatches "#8338ec" "#ff006e" "#3a86ff" >}}
+
+#### Bloody
+{{< swatches "#d90429" "#8d99ae" "#457b9d" >}}
+
+#### Terminal
+{{< swatches "#004b23" "#38b000" "#1a759f" >}}
+
+#### Marvel
+{{< swatches "#2541b2" "#d81159" "#ffbc42" >}}
+
+#### Noir
+{{< swatches "#5c6b73" "#9db4c0" "#00a5cf" >}}
+
+#### Autumn
+{{< swatches "#0a9396" "#ee9b00" "#bb3e03" >}}
+
+#### Congo
+{{< swatches "#71717a" "#8b5cf6" "#d946ef" >}}
+
+#### Slate
+{{< swatches "#6B7280" "#64748b" "#6B7280" >}}
+
+
+Although these are the default schemes, you can also create your own. Refer to the [Advanced Customisation]({{< ref "advanced-customisation#colour-schemes" >}}) section for details.
+
+## Organising content
+
+By default, Blowfish doesn't force you to use a particular content type. In doing so you are free to define your content as you wish. You might prefer _pages_ for a static site, _posts_ for a blog, or _projects_ for a portfolio.
+
+Here's a quick overview of a basic Blowfish project. All content is placed within the `content` folder:
+
+```shell
+.
+├── assets
+│   └── img
+│       └── author.jpg
+├── config
+│   └── _default
+├── content
+│   ├── _index.md
+│   ├── about.md
+│   └── posts
+│       ├── _index.md
+│       ├── first-post.md
+│       └── another-post
+│           ├── aardvark.jpg
+│           └── index.md
+└── themes
+    └── blowfish
+```
+
+It's important to have a firm grasp of how Hugo expects content to be organised as the theme is designed to take full advantage of Hugo page bundles. Be sure to read the [official Hugo docs](https://gohugo.io/content-management/organization/) for more information.
+
+Blowfish is also flexible when it comes to taxonomies. Some people prefer to use _tags_ and _categories_ to group their content, others prefer to use _topics_.
+
+Hugo defaults to using posts, tags and categories out of the box and this will work fine if that's what you want. If you wish to customise this, however, you can do so by creating a `taxonomies.toml` configuration file:
+
+```toml
+# config/_default/taxonomies.toml
+
+topic = "topics"
+```
+
+This will replace the default _tags_ and _categories_ with _topics_. Refer to the [Hugo Taxonomy docs](https://gohugo.io/content-management/taxonomies/) for more information on naming taxonomies.
+
+When you create a new taxonomy, you will need to adjust the navigation links on the website to point to the correct sections, which is covered below.
+
+## Menus
+
+Blowfish has two menus that can be customised to suit the content and layout of your site. The `main` menu appears in the site header and the `footer` menu appears at the bottom of the page just above the copyright notice.
+
+Both menus are configured in the `menus.en.toml` file. Similarly to the languages config file, if you wish to use another language, rename this file and replace `en` with the language code you wish to use.
+
+```toml
+# config/_default/menus.toml
+
+[[main]]
+  name = "Blog"
+  pageRef = "posts"
+  weight = 10
+
+[[main]]
+  name = "Topics"
+  pageRef = "topics"
+  weight = 20
+
+[[main]]
+  pre = "github"
+  name = "GitHub"
+  url = "https://github.com/nunocoracao/blowfish"
+  weight = 30
+
+[[main]]
+  identifier = "github2"
+  pre = "github"
+  url = "https://github.com/nunocoracao/blowfish"
+  weight = 40
+
+[[footer]]
+  name = "Privacy"
+  url = "https://external-link"
+```
+
+The `name` parameter specifies the text that is used in the menu link. You can also optionally provide a `title` which fills the HTML title attribute for the link.
+
+The `pageRef` parameter allows you to easily reference Hugo content pages and taxonomies. It is the quickest way to configure the menu as you can simply refer to any Hugo content item and it will automatically build the correct link. To link to external URLs, the `url` parameter can be used.
+
+The `pre` parameter allows you to place an icon from [Blowfish's icon set]({{< ref "samples/icons" >}}) on the menu entry. This parameter can be used with `name` parameter or by itself. If you want to use multiple menu entries with just icons please set the `identifier`parameter otherwise Hugo will default to the naming tag as the id and probably not display all the menu entries.
+
+Menu links will be sorted from lowest to highest `weight`, and then alphabetically by `name`.
+
+Both menus are completely optional and can be commented out if not required. Use the template provided in the file as a guide.
+
+### Nested menus
+
+The theme also supports nested menus. In order to use them you just need to define a parent entry in `menu.toml` and its sub-menus using the `parent` parameter to reference the parent. All properties can be used for sub-menus. `pageRef` and `url` can also be used in the parent entry. Nested menus are only available in the main menu not for the footer.
+
+```toml
+# config/_default/menus.toml
+
+[[main]]
+  name = "Parent"
+  weight = 20
+
+[[main]]
+  name = "sub-menu 1"
+  parent = "Parent"
+  pageRef = "samples"
+  weight = 20
+
+[[main]]
+  name = "sub-menu 2"
+  parent = "Parent"
+  pageRef = "samples"
+  weight = 20
+
+[[main]]
+  name = "sub-menu 3"
+  parent = "Parent"
+  pre = "github"
+  pageRef = "samples"
+  weight = 20
+```
+
+### Sub-Navigation menu
+
+Additionally, you can also configure a sub-navigation menu. Just define new menu entries as `subnavigation` in `menus.toml`.
+This will render a second line with sub-categories below the main header menu.
+
+```toml
+# config/_default/menus.toml
+
+[[subnavigation]]
+  name = "An interesting topic"
+  pageRef = "tags/interesting-topic"
+  weight = 10
+
+[[subnavigation]]
+  name = "My Awesome Category"
+  pageRef = "categories/awesome"
+  weight = 20
+```
+
+The default `name` is the `pageRef` title cased.
+
+## Thumbnails & Backgrounds
+
+Blowfish was built so it would be easy to add visual support to your articles. If your familiar with Hugo article structure, you just need to place an image file (almost all formats are supported but we recommend `.png` or `.jpg`) that starts with `feature*` inside your article folder. And that's it, Blowfish will then be able to both use the image as a thumbnail within your website as well as for <a target="_blank" href="https://oembed.com/">oEmbed</a> cards across social platforms. 
+
+[Here]({{< ref "thumbnails" >}}) is also a guide with more info and a [sample]({{< ref "thumbnail_sample" >}}) if you want to see how you can do it.
+
+Additionally, Blowfish also supports background hero images in articles and lists. In order to use a different image than the featured one, add an image file in which the name starts with `background*`.
+
+## Detailed configuration
+
+The steps above are the bare minimum configuration. If you now run `hugo server` you will be presented with a blank Blowfish website. Detailed configuration is covered in the [Configuration]({{< ref "configuration" >}}) section.

exampleSite/content/docs/homepage-layout/index.it.md

@@ -0,0 +1,89 @@
+---
+title: "Homepage Layout"
+date: 2020-08-13
+draft: false
+description: "Configuring the homepage layout in the Blowfish theme."
+slug: "homepage-layout"
+tags: ["homepage", "layouts", "docs"]
+series: ["Documentation"]
+series_order: 5
+---
+
+Blowfish provides a fully flexible homepage layout. There are two main templates to choose from with additional settings to adjust the design. Alternatively, you can also provide your own template and have complete control over the homepage content.
+
+The layout of the homepage is controlled by the `homepage.layout` setting in the `params.toml` configuration file. Additionally, all layouts have the option to include a listing of [recent articles](#recent-articles).
+
+## Profile layout
+
+The default layout is the profile layout, which is great for personal websites and blogs. It puts the author's details front and centre by providing an image and links to social profiles.
+
+<img class="thumbnailshadow" src="img/home-profile.png"/>
+
+The author information is provided in the languages configuration file. Refer to the [Getting Started]({{< ref "getting-started" >}}) and [Language Configuration]({{< ref "configuration##language-and-i18n" >}}) sections for parameter details.
+
+Additionally, any Markdown content that is provided in the homepage content will be placed below the author profile. This allows extra flexibility for displaying a bio or other custom content using shortcodes.
+
+To enable the Profile layout, set `homepage.layout = "profile"` in the `params.toml` configuration file.
+
+## Page layout
+
+The page layout is simply a normal content page that displays your Markdown content. It's great for static websites and provides a lot of flexibility.
+
+<img class="thumbnailshadow" src="img/home-page.png"/>
+
+To enable the Page layout, set `homepage.layout = "page"` in the `params.toml` configuration file.
+
+## Hero layout
+
+The hero layout brings together ideas from the profile and card layouts. This one not only displays information on the author of the site but it also loads your markdown beneath it.
+
+<img class="thumbnailshadow" src="img/home-hero.png"/>
+
+To enable the Hero layout, set `homepage.layout = "hero"` and `homepage.homepageImage` in the `params.toml` configuration file.
+
+## Background layout
+
+The background layout is a more smooth version of the hero layout. As in the Hero layout, this one also displays both information on the author of the site and loads your markdown beneath it.
+
+<img class="thumbnailshadow" src="img/home-background.png"/>
+
+To enable the Background layout, set `homepage.layout = "background"` and `homepage.homepageImage` in the `params.toml` configuration file.
+
+## Card layout
+
+The card layout is an extension of the page layout. It provides the same level of flexibility by also displaying your markdown content and adds a card image to display visual content.
+
+<img class="thumbnailshadow" src="img/home-card.png"/>
+
+To enable the Card layout, set `homepage.layout = "card"` and `homepage.homepageImage` in the `params.toml` configuration file. 
+
+
+## Custom layout
+
+If the built-in homepage layouts aren't sufficient for your needs, you have the option to provide your own custom layout. This allows you to have total control over the page content and essentially gives you a blank slate to work with.
+
+To enable the Custom layout, set `homepage.layout = "custom"` in the `params.toml` configuration file.
+
+With the configuration value set, create a new `custom.html` file and place it in `layouts/partials/home/custom.html`. Now whatever is in the `custom.html` file will be placed in the content area of the site homepage. You may use whatever HTML, Tailwind, or Hugo templating functions you wish to define your layout.
+
+To include [recent articles](#recent-articles) on the custom layout, use the `recent-articles/main.html` partial.
+
+As an example, the [homepage]({{< ref "/" >}}) on this site uses the custom layout to allow toggling between the profile and page layouts. Visit the [GitHub repo](https://github.com/nunocoracao/blowfish/blob/main/exampleSite/layouts/partials/home/custom.html) to see how it works.
+
+## Recent articles
+
+All homepage layouts have the option of displaying recent articles below the main page content. To enable this, simply set the `homepage.showRecent` setting to `true` in the `params.toml` configuration file.
+
+<img class="thumbnailshadow" src="img/home-list.png"/>
+
+The articles listed in this section are derived from the `mainSections` setting which allows for whatever content types you are using on your website. For instance, if you had content sections for _posts_ and _projects_ you could set this setting to `["posts", "projects"]` and all the articles in these two sections would be used to populate the recent list. The theme expects this setting to be an array so if you only use one section for all your content, you should set this accordingly: `["blog"]`.
+
+## Thumbnails
+
+Blowfish was built so it would be easy to add visual support to your articles. If your familiar with Hugo article structure, you just need to place an image file (almost all formats are supported bue we recommend `.png` or `.jpg`) that starts with `feature*` inside your article folder. And that's it, Blowfish will then able to both use the image as a thumbnail within your website as well as for <a target="_blank" href="https://oembed.com/">oEmbed</a> cards across social platforms. 
+
+[Here]({{< ref "thumbnails" >}}) is a guide with more info and a [sample]({{< ref "thumbnail_sample" >}}) if you want to see an example.
+
+## Card Gallery
+
+Blowfish also supports displaying the standard lists of articles as card galleries. You can config this both for the recent section in the homepage and for lists of articles across your website. For homepage you can use `homepage.cardView` and `homepage.cardViewScreenWidth`; and for lists use `list.cardView` and `list.cardViewScreenWidth`. Check the [Configuration docs]({{< ref "configuration" >}}) for more details, and the homepage for a live demo.

exampleSite/content/docs/homepage-layout/index.ja.md

@@ -0,0 +1,89 @@
+---
+title: "Homepage Layout"
+date: 2020-08-13
+draft: false
+description: "Configuring the homepage layout in the Blowfish theme."
+slug: "homepage-layout"
+tags: ["homepage", "layouts", "docs"]
+series: ["Documentation"]
+series_order: 5
+---
+
+Blowfish provides a fully flexible homepage layout. There are two main templates to choose from with additional settings to adjust the design. Alternatively, you can also provide your own template and have complete control over the homepage content.
+
+The layout of the homepage is controlled by the `homepage.layout` setting in the `params.toml` configuration file. Additionally, all layouts have the option to include a listing of [recent articles](#recent-articles).
+
+## Profile layout
+
+The default layout is the profile layout, which is great for personal websites and blogs. It puts the author's details front and centre by providing an image and links to social profiles.
+
+<img class="thumbnailshadow" src="img/home-profile.png"/>
+
+The author information is provided in the languages configuration file. Refer to the [Getting Started]({{< ref "getting-started" >}}) and [Language Configuration]({{< ref "configuration##language-and-i18n" >}}) sections for parameter details.
+
+Additionally, any Markdown content that is provided in the homepage content will be placed below the author profile. This allows extra flexibility for displaying a bio or other custom content using shortcodes.
+
+To enable the Profile layout, set `homepage.layout = "profile"` in the `params.toml` configuration file.
+
+## Page layout
+
+The page layout is simply a normal content page that displays your Markdown content. It's great for static websites and provides a lot of flexibility.
+
+<img class="thumbnailshadow" src="img/home-page.png"/>
+
+To enable the Page layout, set `homepage.layout = "page"` in the `params.toml` configuration file.
+
+## Hero layout
+
+The hero layout brings together ideas from the profile and card layouts. This one not only displays information on the author of the site but it also loads your markdown beneath it.
+
+<img class="thumbnailshadow" src="img/home-hero.png"/>
+
+To enable the Hero layout, set `homepage.layout = "hero"` and `homepage.homepageImage` in the `params.toml` configuration file.
+
+## Background layout
+
+The background layout is a more smooth version of the hero layout. As in the Hero layout, this one also displays both information on the author of the site and loads your markdown beneath it.
+
+<img class="thumbnailshadow" src="img/home-background.png"/>
+
+To enable the Background layout, set `homepage.layout = "background"` and `homepage.homepageImage` in the `params.toml` configuration file.
+
+## Card layout
+
+The card layout is an extension of the page layout. It provides the same level of flexibility by also displaying your markdown content and adds a card image to display visual content.
+
+<img class="thumbnailshadow" src="img/home-card.png"/>
+
+To enable the Card layout, set `homepage.layout = "card"` and `homepage.homepageImage` in the `params.toml` configuration file. 
+
+
+## Custom layout
+
+If the built-in homepage layouts aren't sufficient for your needs, you have the option to provide your own custom layout. This allows you to have total control over the page content and essentially gives you a blank slate to work with.
+
+To enable the Custom layout, set `homepage.layout = "custom"` in the `params.toml` configuration file.
+
+With the configuration value set, create a new `custom.html` file and place it in `layouts/partials/home/custom.html`. Now whatever is in the `custom.html` file will be placed in the content area of the site homepage. You may use whatever HTML, Tailwind, or Hugo templating functions you wish to define your layout.
+
+To include [recent articles](#recent-articles) on the custom layout, use the `recent-articles/main.html` partial.
+
+As an example, the [homepage]({{< ref "/" >}}) on this site uses the custom layout to allow toggling between the profile and page layouts. Visit the [GitHub repo](https://github.com/nunocoracao/blowfish/blob/main/exampleSite/layouts/partials/home/custom.html) to see how it works.
+
+## Recent articles
+
+All homepage layouts have the option of displaying recent articles below the main page content. To enable this, simply set the `homepage.showRecent` setting to `true` in the `params.toml` configuration file.
+
+<img class="thumbnailshadow" src="img/home-list.png"/>
+
+The articles listed in this section are derived from the `mainSections` setting which allows for whatever content types you are using on your website. For instance, if you had content sections for _posts_ and _projects_ you could set this setting to `["posts", "projects"]` and all the articles in these two sections would be used to populate the recent list. The theme expects this setting to be an array so if you only use one section for all your content, you should set this accordingly: `["blog"]`.
+
+## Thumbnails
+
+Blowfish was built so it would be easy to add visual support to your articles. If your familiar with Hugo article structure, you just need to place an image file (almost all formats are supported bue we recommend `.png` or `.jpg`) that starts with `feature*` inside your article folder. And that's it, Blowfish will then able to both use the image as a thumbnail within your website as well as for <a target="_blank" href="https://oembed.com/">oEmbed</a> cards across social platforms. 
+
+[Here]({{< ref "thumbnails" >}}) is a guide with more info and a [sample]({{< ref "thumbnail_sample" >}}) if you want to see an example.
+
+## Card Gallery
+
+Blowfish also supports displaying the standard lists of articles as card galleries. You can config this both for the recent section in the homepage and for lists of articles across your website. For homepage you can use `homepage.cardView` and `homepage.cardViewScreenWidth`; and for lists use `list.cardView` and `list.cardViewScreenWidth`. Check the [Configuration docs]({{< ref "configuration" >}}) for more details, and the homepage for a live demo.

exampleSite/content/docs/homepage-layout/index.zh-cn.md

@@ -0,0 +1,89 @@
+---
+title: "Homepage Layout"
+date: 2020-08-13
+draft: false
+description: "Configuring the homepage layout in the Blowfish theme."
+slug: "homepage-layout"
+tags: ["homepage", "layouts", "docs"]
+series: ["Documentation"]
+series_order: 5
+---
+
+Blowfish provides a fully flexible homepage layout. There are two main templates to choose from with additional settings to adjust the design. Alternatively, you can also provide your own template and have complete control over the homepage content.
+
+The layout of the homepage is controlled by the `homepage.layout` setting in the `params.toml` configuration file. Additionally, all layouts have the option to include a listing of [recent articles](#recent-articles).
+
+## Profile layout
+
+The default layout is the profile layout, which is great for personal websites and blogs. It puts the author's details front and centre by providing an image and links to social profiles.
+
+<img class="thumbnailshadow" src="img/home-profile.png"/>
+
+The author information is provided in the languages configuration file. Refer to the [Getting Started]({{< ref "getting-started" >}}) and [Language Configuration]({{< ref "configuration##language-and-i18n" >}}) sections for parameter details.
+
+Additionally, any Markdown content that is provided in the homepage content will be placed below the author profile. This allows extra flexibility for displaying a bio or other custom content using shortcodes.
+
+To enable the Profile layout, set `homepage.layout = "profile"` in the `params.toml` configuration file.
+
+## Page layout
+
+The page layout is simply a normal content page that displays your Markdown content. It's great for static websites and provides a lot of flexibility.
+
+<img class="thumbnailshadow" src="img/home-page.png"/>
+
+To enable the Page layout, set `homepage.layout = "page"` in the `params.toml` configuration file.
+
+## Hero layout
+
+The hero layout brings together ideas from the profile and card layouts. This one not only displays information on the author of the site but it also loads your markdown beneath it.
+
+<img class="thumbnailshadow" src="img/home-hero.png"/>
+
+To enable the Hero layout, set `homepage.layout = "hero"` and `homepage.homepageImage` in the `params.toml` configuration file.
+
+## Background layout
+
+The background layout is a more smooth version of the hero layout. As in the Hero layout, this one also displays both information on the author of the site and loads your markdown beneath it.
+
+<img class="thumbnailshadow" src="img/home-background.png"/>
+
+To enable the Background layout, set `homepage.layout = "background"` and `homepage.homepageImage` in the `params.toml` configuration file.
+
+## Card layout
+
+The card layout is an extension of the page layout. It provides the same level of flexibility by also displaying your markdown content and adds a card image to display visual content.
+
+<img class="thumbnailshadow" src="img/home-card.png"/>
+
+To enable the Card layout, set `homepage.layout = "card"` and `homepage.homepageImage` in the `params.toml` configuration file. 
+
+
+## Custom layout
+
+If the built-in homepage layouts aren't sufficient for your needs, you have the option to provide your own custom layout. This allows you to have total control over the page content and essentially gives you a blank slate to work with.
+
+To enable the Custom layout, set `homepage.layout = "custom"` in the `params.toml` configuration file.
+
+With the configuration value set, create a new `custom.html` file and place it in `layouts/partials/home/custom.html`. Now whatever is in the `custom.html` file will be placed in the content area of the site homepage. You may use whatever HTML, Tailwind, or Hugo templating functions you wish to define your layout.
+
+To include [recent articles](#recent-articles) on the custom layout, use the `recent-articles/main.html` partial.
+
+As an example, the [homepage]({{< ref "/" >}}) on this site uses the custom layout to allow toggling between the profile and page layouts. Visit the [GitHub repo](https://github.com/nunocoracao/blowfish/blob/main/exampleSite/layouts/partials/home/custom.html) to see how it works.
+
+## Recent articles
+
+All homepage layouts have the option of displaying recent articles below the main page content. To enable this, simply set the `homepage.showRecent` setting to `true` in the `params.toml` configuration file.
+
+<img class="thumbnailshadow" src="img/home-list.png"/>
+
+The articles listed in this section are derived from the `mainSections` setting which allows for whatever content types you are using on your website. For instance, if you had content sections for _posts_ and _projects_ you could set this setting to `["posts", "projects"]` and all the articles in these two sections would be used to populate the recent list. The theme expects this setting to be an array so if you only use one section for all your content, you should set this accordingly: `["blog"]`.
+
+## Thumbnails
+
+Blowfish was built so it would be easy to add visual support to your articles. If your familiar with Hugo article structure, you just need to place an image file (almost all formats are supported bue we recommend `.png` or `.jpg`) that starts with `feature*` inside your article folder. And that's it, Blowfish will then able to both use the image as a thumbnail within your website as well as for <a target="_blank" href="https://oembed.com/">oEmbed</a> cards across social platforms. 
+
+[Here]({{< ref "thumbnails" >}}) is a guide with more info and a [sample]({{< ref "thumbnail_sample" >}}) if you want to see an example.
+
+## Card Gallery
+
+Blowfish also supports displaying the standard lists of articles as card galleries. You can config this both for the recent section in the homepage and for lists of articles across your website. For homepage you can use `homepage.cardView` and `homepage.cardViewScreenWidth`; and for lists use `list.cardView` and `list.cardViewScreenWidth`. Check the [Configuration docs]({{< ref "configuration" >}}) for more details, and the homepage for a live demo.

exampleSite/content/docs/hosting-deployment/index.it.md

@@ -0,0 +1,148 @@
+---
+title: "Hosting & Deployment"
+date: 2020-08-07
+draft: false
+description: "Learn how to deploy a Blowfish site."
+slug: "hosting-deployment"
+tags: ["docs", "hosting", "deployment", "github", "netlify", "render"]
+series: ["Documentation"]
+series_order: 14
+---
+
+There are many ways to deploy your Hugo website built with Blowfish. The theme is designed to be flexible in almost any deployment scenario.
+
+Blowfish is built using relative URLs throughout the theme. This enables sites to easily be deployed to sub-folders and hosts like GitHub Pages. There's usually no special configuration required for this to work as long as the `baseURL` parameter has been configured in the `config.toml` file.
+
+The official Hugo [Hosting and Deployment](https://gohugo.io/hosting-and-deployment/) docs are the best place to learn how to deploy your site. The sections below contain some specific theme configuration details that can help you deploy smoothly with certain providers.
+
+**Choose your provider:**
+
+- [GitHub Pages](#github-pages)
+- [Netlify](#netlify)
+- [Render](#render)
+- [Cloudflare Pages](#cloudflare-pages)
+- [Shared hosting, VPS or private web server](#shared-hosting-vps-or-private-web-server)
+
+---
+
+## GitHub Pages
+
+GitHub allows hosting on [GitHub Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages) using Actions. To enable this functionality, enable Pages on your repo and create a new Actions workflow to build and deploy your site.
+
+The file needs to be in YAML format, placed within the `.github/workflows/` directory of your GitHub repository and named with a `.yml` extension.
+
+{{< alert >}}
+**Important:** Ensure you set the correct branch name under `branches` and in the deploy step `if` parameter to the source branch used in your project.
+{{< /alert >}}
+
+```yaml
+# .github/workflows/gh-pages.yml
+
+name: GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build-deploy:
+    runs-on: ubuntu-20.04
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.ref }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          submodules: true
+          fetch-depth: 0
+
+      - name: Setup Hugo
+        uses: peaceiris/actions-hugo@v2
+        with:
+          hugo-version: "latest"
+
+      - name: Build
+        run: hugo --minify
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        if: ${{ github.ref == 'refs/heads/main' }}
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_branch: gh-pages
+          publish_dir: ./public
+```
+
+Push the config file to GitHub and the action should automatically run. It may fail the first time and you'll need to visit the **Settings > Pages** section of your GitHub repo to check the source is correct. It should be set to use the `gh-pages` branch.
+
+{{< screenshot src="github-pages-source.jpg" alt="Screen capture of GitHub Pages source" >}}
+
+Once the settings are configured, re-run the action and the site should build and deploy correctly. You can consult the actions log to check everything deployed successfully.
+
+## Netlify
+
+To deploy to [Netlify](https://www.netlify.com), create a new continuous deployment site and link it to your source code. The build settings can be left blank in the Netlify UI. You will only need to configure the domain you'll be using.
+
+{{< screenshot src="netlify-build-settings.jpg" alt="Screen capture of Netlify build settings" >}}
+
+Then in the root of your site repository, create a `netlify.toml` file:
+
+```toml
+# netlify.toml
+
+[build]
+  command = "hugo mod get -u && hugo --gc --minify -b $URL"
+  publish = "public"
+
+[build.environment]
+  NODE_ENV = "production"
+  GO_VERSION = "1.16"
+  TZ = "UTC"  # Set to preferred timezone
+
+[context.production.environment]
+  HUGO_VERSION = "0.104.1"
+  HUGO_ENV = "production"
+
+[context.deploy-preview.environment]
+  HUGO_VERSION = "0.104.1"
+```
+
+This configuration assumes you are deploying Blowfish as a Hugo module. If you have installed the theme using another method, change the build command to simply `hugo --gc --minify -b $URL`.
+
+When you push the config file to your repo, Netlify should automatically deploy your site. You can check the deploy logs in the Netlify UI to check for any errors.
+
+## Render
+
+Deploying to [Render](https://render.com) is very straightforward and all configuration is via the Render UI.
+
+Create a new **Static Site** and link it to your project's code repository. Then simply configure the build command to be `hugo --gc --minify` and publish directory to be `public`.
+
+{{< screenshot src="render-settings.jpg" alt="Screen capture of Render settings" >}}
+
+The site will automatically build and deploy whenever you push a change to your repo.
+
+## Cloudflare Pages
+
+Cloudflare offers the [Pages](https://pages.cloudflare.com/) service that can host Hugo blogs. It builds the site from a git repository and then hosts it on Cloudflare's CDN. Follow their [Hugo deployment guide](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site) to get started.
+
+The Rocket Loader™ feature offered by Cloudflare tries to speed up rendering of web pages with JavaScript, but it breaks the appearance switcher in the theme. It can also cause an annoying light/dark screen flash when browsing your site due to scripts loading in the wrong order.
+
+This problem can be fixed by disabling it:
+
+- Go to the [Cloudflare dashboard](https://dash.cloudflare.com)
+- Click on your domain name in the list
+- Click _Optimization_ in the _Speed_ section
+- Scroll down to _Rocket Loader™_ and disable it
+
+Hugo sites built with Blowfish still load very quickly, even with this feature disabled.
+
+## Shared hosting, VPS or private web server
+
+Using traditional web hosting, or deploying to your own web server, is as simple as building your Hugo site and transferring the files to your host.
+
+Make sure that the `baseURL` parameter in `config.toml` is set to the full URL to the root of your website (including any sub domains or sub-folders).
+
+Then build your site using `hugo` and copy the contents of the output directory to the root of your web server and you will be ready to go. By default, the output directory is named `public`.
+
+_If you need a hosting provider, check out [Vultr](https://www.vultr.com/?ref=8957394-8H) or [DigitalOcean](https://m.do.co/c/36841235e565). Signing up using these affiliate links will give you up to $100 in free credit so you can try the service._

exampleSite/content/docs/hosting-deployment/index.ja.md

@@ -0,0 +1,148 @@
+---
+title: "Hosting & Deployment"
+date: 2020-08-07
+draft: false
+description: "Learn how to deploy a Blowfish site."
+slug: "hosting-deployment"
+tags: ["docs", "hosting", "deployment", "github", "netlify", "render"]
+series: ["Documentation"]
+series_order: 14
+---
+
+There are many ways to deploy your Hugo website built with Blowfish. The theme is designed to be flexible in almost any deployment scenario.
+
+Blowfish is built using relative URLs throughout the theme. This enables sites to easily be deployed to sub-folders and hosts like GitHub Pages. There's usually no special configuration required for this to work as long as the `baseURL` parameter has been configured in the `config.toml` file.
+
+The official Hugo [Hosting and Deployment](https://gohugo.io/hosting-and-deployment/) docs are the best place to learn how to deploy your site. The sections below contain some specific theme configuration details that can help you deploy smoothly with certain providers.
+
+**Choose your provider:**
+
+- [GitHub Pages](#github-pages)
+- [Netlify](#netlify)
+- [Render](#render)
+- [Cloudflare Pages](#cloudflare-pages)
+- [Shared hosting, VPS or private web server](#shared-hosting-vps-or-private-web-server)
+
+---
+
+## GitHub Pages
+
+GitHub allows hosting on [GitHub Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages) using Actions. To enable this functionality, enable Pages on your repo and create a new Actions workflow to build and deploy your site.
+
+The file needs to be in YAML format, placed within the `.github/workflows/` directory of your GitHub repository and named with a `.yml` extension.
+
+{{< alert >}}
+**Important:** Ensure you set the correct branch name under `branches` and in the deploy step `if` parameter to the source branch used in your project.
+{{< /alert >}}
+
+```yaml
+# .github/workflows/gh-pages.yml
+
+name: GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build-deploy:
+    runs-on: ubuntu-20.04
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.ref }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          submodules: true
+          fetch-depth: 0
+
+      - name: Setup Hugo
+        uses: peaceiris/actions-hugo@v2
+        with:
+          hugo-version: "latest"
+
+      - name: Build
+        run: hugo --minify
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        if: ${{ github.ref == 'refs/heads/main' }}
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_branch: gh-pages
+          publish_dir: ./public
+```
+
+Push the config file to GitHub and the action should automatically run. It may fail the first time and you'll need to visit the **Settings > Pages** section of your GitHub repo to check the source is correct. It should be set to use the `gh-pages` branch.
+
+{{< screenshot src="github-pages-source.jpg" alt="Screen capture of GitHub Pages source" >}}
+
+Once the settings are configured, re-run the action and the site should build and deploy correctly. You can consult the actions log to check everything deployed successfully.
+
+## Netlify
+
+To deploy to [Netlify](https://www.netlify.com), create a new continuous deployment site and link it to your source code. The build settings can be left blank in the Netlify UI. You will only need to configure the domain you'll be using.
+
+{{< screenshot src="netlify-build-settings.jpg" alt="Screen capture of Netlify build settings" >}}
+
+Then in the root of your site repository, create a `netlify.toml` file:
+
+```toml
+# netlify.toml
+
+[build]
+  command = "hugo mod get -u && hugo --gc --minify -b $URL"
+  publish = "public"
+
+[build.environment]
+  NODE_ENV = "production"
+  GO_VERSION = "1.16"
+  TZ = "UTC"  # Set to preferred timezone
+
+[context.production.environment]
+  HUGO_VERSION = "0.104.1"
+  HUGO_ENV = "production"
+
+[context.deploy-preview.environment]
+  HUGO_VERSION = "0.104.1"
+```
+
+This configuration assumes you are deploying Blowfish as a Hugo module. If you have installed the theme using another method, change the build command to simply `hugo --gc --minify -b $URL`.
+
+When you push the config file to your repo, Netlify should automatically deploy your site. You can check the deploy logs in the Netlify UI to check for any errors.
+
+## Render
+
+Deploying to [Render](https://render.com) is very straightforward and all configuration is via the Render UI.
+
+Create a new **Static Site** and link it to your project's code repository. Then simply configure the build command to be `hugo --gc --minify` and publish directory to be `public`.
+
+{{< screenshot src="render-settings.jpg" alt="Screen capture of Render settings" >}}
+
+The site will automatically build and deploy whenever you push a change to your repo.
+
+## Cloudflare Pages
+
+Cloudflare offers the [Pages](https://pages.cloudflare.com/) service that can host Hugo blogs. It builds the site from a git repository and then hosts it on Cloudflare's CDN. Follow their [Hugo deployment guide](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site) to get started.
+
+The Rocket Loader™ feature offered by Cloudflare tries to speed up rendering of web pages with JavaScript, but it breaks the appearance switcher in the theme. It can also cause an annoying light/dark screen flash when browsing your site due to scripts loading in the wrong order.
+
+This problem can be fixed by disabling it:
+
+- Go to the [Cloudflare dashboard](https://dash.cloudflare.com)
+- Click on your domain name in the list
+- Click _Optimization_ in the _Speed_ section
+- Scroll down to _Rocket Loader™_ and disable it
+
+Hugo sites built with Blowfish still load very quickly, even with this feature disabled.
+
+## Shared hosting, VPS or private web server
+
+Using traditional web hosting, or deploying to your own web server, is as simple as building your Hugo site and transferring the files to your host.
+
+Make sure that the `baseURL` parameter in `config.toml` is set to the full URL to the root of your website (including any sub domains or sub-folders).
+
+Then build your site using `hugo` and copy the contents of the output directory to the root of your web server and you will be ready to go. By default, the output directory is named `public`.
+
+_If you need a hosting provider, check out [Vultr](https://www.vultr.com/?ref=8957394-8H) or [DigitalOcean](https://m.do.co/c/36841235e565). Signing up using these affiliate links will give you up to $100 in free credit so you can try the service._

exampleSite/content/docs/hosting-deployment/index.zh-cn.md

@@ -0,0 +1,148 @@
+---
+title: "Hosting & Deployment"
+date: 2020-08-07
+draft: false
+description: "Learn how to deploy a Blowfish site."
+slug: "hosting-deployment"
+tags: ["docs", "hosting", "deployment", "github", "netlify", "render"]
+series: ["Documentation"]
+series_order: 14
+---
+
+There are many ways to deploy your Hugo website built with Blowfish. The theme is designed to be flexible in almost any deployment scenario.
+
+Blowfish is built using relative URLs throughout the theme. This enables sites to easily be deployed to sub-folders and hosts like GitHub Pages. There's usually no special configuration required for this to work as long as the `baseURL` parameter has been configured in the `config.toml` file.
+
+The official Hugo [Hosting and Deployment](https://gohugo.io/hosting-and-deployment/) docs are the best place to learn how to deploy your site. The sections below contain some specific theme configuration details that can help you deploy smoothly with certain providers.
+
+**Choose your provider:**
+
+- [GitHub Pages](#github-pages)
+- [Netlify](#netlify)
+- [Render](#render)
+- [Cloudflare Pages](#cloudflare-pages)
+- [Shared hosting, VPS or private web server](#shared-hosting-vps-or-private-web-server)
+
+---
+
+## GitHub Pages
+
+GitHub allows hosting on [GitHub Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages) using Actions. To enable this functionality, enable Pages on your repo and create a new Actions workflow to build and deploy your site.
+
+The file needs to be in YAML format, placed within the `.github/workflows/` directory of your GitHub repository and named with a `.yml` extension.
+
+{{< alert >}}
+**Important:** Ensure you set the correct branch name under `branches` and in the deploy step `if` parameter to the source branch used in your project.
+{{< /alert >}}
+
+```yaml
+# .github/workflows/gh-pages.yml
+
+name: GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build-deploy:
+    runs-on: ubuntu-20.04
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.ref }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          submodules: true
+          fetch-depth: 0
+
+      - name: Setup Hugo
+        uses: peaceiris/actions-hugo@v2
+        with:
+          hugo-version: "latest"
+
+      - name: Build
+        run: hugo --minify
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        if: ${{ github.ref == 'refs/heads/main' }}
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_branch: gh-pages
+          publish_dir: ./public
+```
+
+Push the config file to GitHub and the action should automatically run. It may fail the first time and you'll need to visit the **Settings > Pages** section of your GitHub repo to check the source is correct. It should be set to use the `gh-pages` branch.
+
+{{< screenshot src="github-pages-source.jpg" alt="Screen capture of GitHub Pages source" >}}
+
+Once the settings are configured, re-run the action and the site should build and deploy correctly. You can consult the actions log to check everything deployed successfully.
+
+## Netlify
+
+To deploy to [Netlify](https://www.netlify.com), create a new continuous deployment site and link it to your source code. The build settings can be left blank in the Netlify UI. You will only need to configure the domain you'll be using.
+
+{{< screenshot src="netlify-build-settings.jpg" alt="Screen capture of Netlify build settings" >}}
+
+Then in the root of your site repository, create a `netlify.toml` file:
+
+```toml
+# netlify.toml
+
+[build]
+  command = "hugo mod get -u && hugo --gc --minify -b $URL"
+  publish = "public"
+
+[build.environment]
+  NODE_ENV = "production"
+  GO_VERSION = "1.16"
+  TZ = "UTC"  # Set to preferred timezone
+
+[context.production.environment]
+  HUGO_VERSION = "0.104.1"
+  HUGO_ENV = "production"
+
+[context.deploy-preview.environment]
+  HUGO_VERSION = "0.104.1"
+```
+
+This configuration assumes you are deploying Blowfish as a Hugo module. If you have installed the theme using another method, change the build command to simply `hugo --gc --minify -b $URL`.
+
+When you push the config file to your repo, Netlify should automatically deploy your site. You can check the deploy logs in the Netlify UI to check for any errors.
+
+## Render
+
+Deploying to [Render](https://render.com) is very straightforward and all configuration is via the Render UI.
+
+Create a new **Static Site** and link it to your project's code repository. Then simply configure the build command to be `hugo --gc --minify` and publish directory to be `public`.
+
+{{< screenshot src="render-settings.jpg" alt="Screen capture of Render settings" >}}
+
+The site will automatically build and deploy whenever you push a change to your repo.
+
+## Cloudflare Pages
+
+Cloudflare offers the [Pages](https://pages.cloudflare.com/) service that can host Hugo blogs. It builds the site from a git repository and then hosts it on Cloudflare's CDN. Follow their [Hugo deployment guide](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site) to get started.
+
+The Rocket Loader™ feature offered by Cloudflare tries to speed up rendering of web pages with JavaScript, but it breaks the appearance switcher in the theme. It can also cause an annoying light/dark screen flash when browsing your site due to scripts loading in the wrong order.
+
+This problem can be fixed by disabling it:
+
+- Go to the [Cloudflare dashboard](https://dash.cloudflare.com)
+- Click on your domain name in the list
+- Click _Optimization_ in the _Speed_ section
+- Scroll down to _Rocket Loader™_ and disable it
+
+Hugo sites built with Blowfish still load very quickly, even with this feature disabled.
+
+## Shared hosting, VPS or private web server
+
+Using traditional web hosting, or deploying to your own web server, is as simple as building your Hugo site and transferring the files to your host.
+
+Make sure that the `baseURL` parameter in `config.toml` is set to the full URL to the root of your website (including any sub domains or sub-folders).
+
+Then build your site using `hugo` and copy the contents of the output directory to the root of your web server and you will be ready to go. By default, the output directory is named `public`.
+
+_If you need a hosting provider, check out [Vultr](https://www.vultr.com/?ref=8957394-8H) or [DigitalOcean](https://m.do.co/c/36841235e565). Signing up using these affiliate links will give you up to $100 in free credit so you can try the service._

exampleSite/content/docs/installation/index.it.md

@@ -0,0 +1,210 @@
+---
+title: "Installation"
+date: 2020-08-16
+draft: false
+description: "How to install the Blowfish theme."
+slug: "installation"
+tags: ["installation", "docs"]
+series: ["Documentation"]
+series_order: 2
+---
+
+Simply follow the standard Hugo [Quick Start](https://gohugo.io/getting-started/quick-start/) procedure to get up and running quickly.
+
+Detailed installation instructions can be found below. Instructions for [updating the theme](#installing-updates) are also available.
+
+## Installation
+
+These instructions will get you up and running using Hugo and Blowfish from a completely blank state. Most of the dependencies mentioned in this guide can be installed using the package manager of choice for your platform.
+
+### Install Hugo
+
+If you haven't used Hugo before, you will need to [install it onto your local machine](https://gohugo.io/getting-started/installing). You can check if it's already installed by running the command `hugo version`.
+
+{{< alert >}}
+Make sure you are using **Hugo version 0.87.0** or later as the theme takes advantage of some of the latest Hugo features.
+{{< /alert >}}
+
+You can find detailed installation instructions for your platform in the [Hugo docs](https://gohugo.io/getting-started/installing).
+
+### Blowfish Tools (recommended)
+
+We just launched a new CLI tool to help you get started with Blowfish. It will create a new Hugo project, install the theme and set up the theme configuration files for you. It's still in beta so please [report any issues you find](https://github.com/nunocoracao/blowfish-tools).
+
+Install the CLI tool globally using npm (or other package manager):
+```shell
+npx blowfish-tools
+```
+or
+
+```shell
+npm i -g blowfish-tools
+```
+
+Then run the command `blowfish-tools` to start an interactive run which will guide you through creation and configuration use-cases.
+```shell
+blowfish-tools
+```
+
+You can also run the command `blowfish-tools new` to create a new Hugo project and install the theme in one go. Check the CLI help for more information.
+```shell
+blowfish-tools new mynewsite
+```
+
+Here's a quick video of how fast it is to get started with Blowfish using the CLI tool:
+
+<iframe width="100%" height="350" src="https://www.youtube.com/embed/SgXhGb-7QbU?si=ce44baicuQ6zMeXz" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+### Install Manually
+
+#### Create a new site
+
+Run the command `hugo new site mywebsite` to create a new Hugo site in a directory named `mywebsite`.
+
+Note that you can name the project directory whatever you choose, but the instructions below will assume it's named `mywebsite`. If you use a different name, be sure to substitute it accordingly.
+
+#### Download the Blowfish theme
+
+There several different ways to install the Blowfish theme into your Hugo website. From easiest to most difficult to install and maintain, they are:
+
+- [Git submodule](#install-using-git) (recommended)
+- [Hugo module](#install-using-hugo) 
+- [Manual file copy](#install-manually)
+
+If you're unsure, choose the Git submodule method. 
+
+##### Install using git
+
+This method is the quickest and easiest for keeping the theme up-to-date. Besides **Hugo** and **Go**, you'll also need to ensure you have **Git** installed on your local machine.
+
+Change into the directory for your Hugo website (that you created above), initialise a new `git` repository and add Blowfish as a submodule.
+
+```bash
+cd mywebsite
+git init
+git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish
+```
+
+Then continue to [set up the theme configuration files](#set-up-theme-configuration-files).
+
+##### Install using Hugo
+
+For this method you'll use Hugo to manage your themes. Hugo uses **Go** to initialise and manage modules so you need to ensure you have `go` installed before proceeding.
+
+1. [Download](https://golang.org/dl/) and install Go. You can check if it's already installed by using the command `go version`.
+
+   {{< alert >}}
+   Make sure you are using **Go version 1.12** or later as Hugo requires this for modules to work correctly.
+   {{< /alert >}}
+
+2. From your Hugo project directory (that you created above), initialise modules for your website:
+
+   ```shell
+   # If you're managing your project on GitHub
+   hugo mod init github.com/<username>/<repo-name>
+
+   # If you're managing your project locally
+   hugo mod init my-project
+   ```
+
+3. Add the theme to your configuration by creating a new file `config/_default/module.toml` and adding the following:
+
+   ```toml
+   [[imports]]
+   path = "github.com/nunocoracao/blowfish/v2"
+   ```
+
+4. Start your server using `hugo server` and the theme will be downloaded automatically.
+5. Continue to [set up the theme configuration files](#set-up-theme-configuration-files).
+
+##### Install manually
+
+1. Download the latest release of the theme source code.
+
+   {{< button href="https://github.com/nunocoracao/blowfish/releases/latest" target="_blank" >}}Download from Github{{< /button >}}
+
+2. Extract the archive, rename the folder to `blowfish` and move it to the `themes/` directory inside your Hugo project's root folder.
+3. Continue to [set up the theme configuration files](#set-up-theme-configuration-files).
+
+#### Set up theme configuration files
+
+In the root folder of your website, delete the `config.toml` file that was generated by Hugo. Copy the `*.toml` config files from the theme into your `config/_default/` folder. This will ensure you have all the correct theme settings and will enable you to easily customise the theme to your needs.
+
+{{< alert >}}
+**Note:** You should not overwrite the `module.toml` file if one already exists in your project!
+{{< /alert >}}
+
+Depending on how you installed the theme you will find the theme config files in different places:
+
+- **Hugo Modules:** In the Hugo cache directory, or [download a copy](https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/nunocoracao/blowfish/tree/main/config/_default) from GitHub
+- **Git submodule or Manual install:** `themes/blowfish/config/_default`
+
+Once you've copied the files, your config folder should look like this:
+
+```shell
+config/_default/
+├─ config.toml
+├─ languages.en.toml
+├─ markup.toml
+├─ menus.en.toml
+├─ module.toml  # if you installed using Hugo Modules
+└─ params.toml
+```
+
+{{< alert >}}
+**Important:** If you didn't use Hugo Modules to install Blowfish, you must add the line `theme = "blowfish"` to the top of your `config.toml` file.
+{{< /alert >}}
+
+### Next steps
+
+The basic Blowfish installation is now complete. Continue to the [Getting Started]({{< ref "getting-started" >}}) section to learn more about configuring the theme.
+
+---
+
+## Installing updates
+
+From time to time there will be [new releases](https://github.com/nunocoracao/blowfish/releases) posted that apply fixes and add new functionality to the theme. In order to take advantage of these changes, you will need to update the theme files on your website.
+
+How you go about this will depend on the installation method you chose when the theme was originally installed. Instructions for each method can be found below.
+
+- [Git submodule](#update-using-git)
+- [Hugo module](#update-using-hugo)
+- [Manual file copy](#update-manually)
+
+### Update using git
+
+Git submodules can be updated using the `git` command. Simply execute the following command and the latest version of the theme will be downloaded into your local repository:
+
+```shell
+git submodule update --remote --merge
+```
+
+Once the submodule has been updated, rebuild your site and check everything works as expected.
+
+### Update using Hugo
+
+Hugo makes updating modules super easy. Simply change into your project directory and execute the following command:
+
+```shell
+hugo mod get -u
+```
+
+Hugo will automatically update any modules that are required for your project. It does this by inspecting your `module.toml` and `go.mod` files. If you have any issues with the update, check to ensure these files are still configured correctly.
+
+Then simply rebuild your site and check everything works as expected.
+
+### Update manually
+
+Updating Blowfish manually requires you to download the latest copy of the theme and replace the old version in your project.
+
+{{< alert >}}
+Note that any local customisations you have made to the theme files will be lost during this process.
+{{< /alert >}}
+
+1. Download the latest release of the theme source code.
+
+   {{< button href="https://github.com/nunocoracao/blowfish/releases/latest" target="_blank" >}}Download from Github{{< /button >}}
+
+2. Extract the archive, rename the folder to `blowfish` and move it to the `themes/` directory inside your Hugo project's root folder. You will need to overwrite the existing directory to replace all the theme files.
+
+3. Rebuild your site and check everything works as expected.

exampleSite/content/docs/installation/index.zh-cn.md

@@ -0,0 +1,210 @@
+---
+title: "Installation"
+date: 2020-08-16
+draft: false
+description: "How to install the Blowfish theme."
+slug: "installation"
+tags: ["installation", "docs"]
+series: ["Documentation"]
+series_order: 2
+---
+
+Simply follow the standard Hugo [Quick Start](https://gohugo.io/getting-started/quick-start/) procedure to get up and running quickly.
+
+Detailed installation instructions can be found below. Instructions for [updating the theme](#installing-updates) are also available.
+
+## Installation
+
+These instructions will get you up and running using Hugo and Blowfish from a completely blank state. Most of the dependencies mentioned in this guide can be installed using the package manager of choice for your platform.
+
+### Install Hugo
+
+If you haven't used Hugo before, you will need to [install it onto your local machine](https://gohugo.io/getting-started/installing). You can check if it's already installed by running the command `hugo version`.
+
+{{< alert >}}
+Make sure you are using **Hugo version 0.87.0** or later as the theme takes advantage of some of the latest Hugo features.
+{{< /alert >}}
+
+You can find detailed installation instructions for your platform in the [Hugo docs](https://gohugo.io/getting-started/installing).
+
+### Blowfish Tools (recommended)
+
+We just launched a new CLI tool to help you get started with Blowfish. It will create a new Hugo project, install the theme and set up the theme configuration files for you. It's still in beta so please [report any issues you find](https://github.com/nunocoracao/blowfish-tools).
+
+Install the CLI tool globally using npm (or other package manager):
+```shell
+npx blowfish-tools
+```
+or
+
+```shell
+npm i -g blowfish-tools
+```
+
+Then run the command `blowfish-tools` to start an interactive run which will guide you through creation and configuration use-cases.
+```shell
+blowfish-tools
+```
+
+You can also run the command `blowfish-tools new` to create a new Hugo project and install the theme in one go. Check the CLI help for more information.
+```shell
+blowfish-tools new mynewsite
+```
+
+Here's a quick video of how fast it is to get started with Blowfish using the CLI tool:
+
+<iframe width="100%" height="350" src="https://www.youtube.com/embed/SgXhGb-7QbU?si=ce44baicuQ6zMeXz" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+### Install Manually
+
+#### Create a new site
+
+Run the command `hugo new site mywebsite` to create a new Hugo site in a directory named `mywebsite`.
+
+Note that you can name the project directory whatever you choose, but the instructions below will assume it's named `mywebsite`. If you use a different name, be sure to substitute it accordingly.
+
+#### Download the Blowfish theme
+
+There several different ways to install the Blowfish theme into your Hugo website. From easiest to most difficult to install and maintain, they are:
+
+- [Git submodule](#install-using-git) (recommended)
+- [Hugo module](#install-using-hugo) 
+- [Manual file copy](#install-manually)
+
+If you're unsure, choose the Git submodule method. 
+
+##### Install using git
+
+This method is the quickest and easiest for keeping the theme up-to-date. Besides **Hugo** and **Go**, you'll also need to ensure you have **Git** installed on your local machine.
+
+Change into the directory for your Hugo website (that you created above), initialise a new `git` repository and add Blowfish as a submodule.
+
+```bash
+cd mywebsite
+git init
+git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish
+```
+
+Then continue to [set up the theme configuration files](#set-up-theme-configuration-files).
+
+##### Install using Hugo
+
+For this method you'll use Hugo to manage your themes. Hugo uses **Go** to initialise and manage modules so you need to ensure you have `go` installed before proceeding.
+
+1. [Download](https://golang.org/dl/) and install Go. You can check if it's already installed by using the command `go version`.
+
+   {{< alert >}}
+   Make sure you are using **Go version 1.12** or later as Hugo requires this for modules to work correctly.
+   {{< /alert >}}
+
+2. From your Hugo project directory (that you created above), initialise modules for your website:
+
+   ```shell
+   # If you're managing your project on GitHub
+   hugo mod init github.com/<username>/<repo-name>
+
+   # If you're managing your project locally
+   hugo mod init my-project
+   ```
+
+3. Add the theme to your configuration by creating a new file `config/_default/module.toml` and adding the following:
+
+   ```toml
+   [[imports]]
+   path = "github.com/nunocoracao/blowfish/v2"
+   ```
+
+4. Start your server using `hugo server` and the theme will be downloaded automatically.
+5. Continue to [set up the theme configuration files](#set-up-theme-configuration-files).
+
+##### Install manually
+
+1. Download the latest release of the theme source code.
+
+   {{< button href="https://github.com/nunocoracao/blowfish/releases/latest" target="_blank" >}}Download from Github{{< /button >}}
+
+2. Extract the archive, rename the folder to `blowfish` and move it to the `themes/` directory inside your Hugo project's root folder.
+3. Continue to [set up the theme configuration files](#set-up-theme-configuration-files).
+
+#### Set up theme configuration files
+
+In the root folder of your website, delete the `config.toml` file that was generated by Hugo. Copy the `*.toml` config files from the theme into your `config/_default/` folder. This will ensure you have all the correct theme settings and will enable you to easily customise the theme to your needs.
+
+{{< alert >}}
+**Note:** You should not overwrite the `module.toml` file if one already exists in your project!
+{{< /alert >}}
+
+Depending on how you installed the theme you will find the theme config files in different places:
+
+- **Hugo Modules:** In the Hugo cache directory, or [download a copy](https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/nunocoracao/blowfish/tree/main/config/_default) from GitHub
+- **Git submodule or Manual install:** `themes/blowfish/config/_default`
+
+Once you've copied the files, your config folder should look like this:
+
+```shell
+config/_default/
+├─ config.toml
+├─ languages.en.toml
+├─ markup.toml
+├─ menus.en.toml
+├─ module.toml  # if you installed using Hugo Modules
+└─ params.toml
+```
+
+{{< alert >}}
+**Important:** If you didn't use Hugo Modules to install Blowfish, you must add the line `theme = "blowfish"` to the top of your `config.toml` file.
+{{< /alert >}}
+
+### Next steps
+
+The basic Blowfish installation is now complete. Continue to the [Getting Started]({{< ref "getting-started" >}}) section to learn more about configuring the theme.
+
+---
+
+## Installing updates
+
+From time to time there will be [new releases](https://github.com/nunocoracao/blowfish/releases) posted that apply fixes and add new functionality to the theme. In order to take advantage of these changes, you will need to update the theme files on your website.
+
+How you go about this will depend on the installation method you chose when the theme was originally installed. Instructions for each method can be found below.
+
+- [Git submodule](#update-using-git)
+- [Hugo module](#update-using-hugo)
+- [Manual file copy](#update-manually)
+
+### Update using git
+
+Git submodules can be updated using the `git` command. Simply execute the following command and the latest version of the theme will be downloaded into your local repository:
+
+```shell
+git submodule update --remote --merge
+```
+
+Once the submodule has been updated, rebuild your site and check everything works as expected.
+
+### Update using Hugo
+
+Hugo makes updating modules super easy. Simply change into your project directory and execute the following command:
+
+```shell
+hugo mod get -u
+```
+
+Hugo will automatically update any modules that are required for your project. It does this by inspecting your `module.toml` and `go.mod` files. If you have any issues with the update, check to ensure these files are still configured correctly.
+
+Then simply rebuild your site and check everything works as expected.
+
+### Update manually
+
+Updating Blowfish manually requires you to download the latest copy of the theme and replace the old version in your project.
+
+{{< alert >}}
+Note that any local customisations you have made to the theme files will be lost during this process.
+{{< /alert >}}
+
+1. Download the latest release of the theme source code.
+
+   {{< button href="https://github.com/nunocoracao/blowfish/releases/latest" target="_blank" >}}Download from Github{{< /button >}}
+
+2. Extract the archive, rename the folder to `blowfish` and move it to the `themes/` directory inside your Hugo project's root folder. You will need to overwrite the existing directory to replace all the theme files.
+
+3. Rebuild your site and check everything works as expected.

exampleSite/content/docs/multi-author/index.it.md

@@ -0,0 +1,102 @@
+---
+title: "Multiple Authors"
+date: 2020-08-10
+draft: false
+description: "Configure multiple authors for your articles."
+slug: "multi-author"
+tags: ["authors", "config", "docs"]
+series: ["Documentation"]
+series_order: 10
+showAuthor: true
+authors:
+  - "nunocoracao"
+showAuthorsBadges : false 
+---
+
+
+Some websites have more than one author contributing with content and therefore require more than a single default author across the entire website. For those use-cases, Blowfish allows users to extend the list of authors using the multiple authors feature. 
+
+To keep everything backwards compatible, this feature only allows the definition of extra authors and does not change in any way the previous author functionality which is used via config files.  
+
+
+## Create Authors
+
+The first step to create new authors is to set up a new folder in `./data/authors`. Then you can simply add new `json` files inside, one for each new author. The name of the file will be the `key` for that author when referencing it in your articles. 
+
+As an example, let’s create a file called `nunocoracao.json` within `./data/authors`. The contents of the file should be similar to the ones below. `name`, `image`, `bio`, and `social` are the 4 parameters supported right for authors. They mimic the configurations available for the default author in the config files.
+
+_Note: the key in the social object will be used to fetch one of the theme’s icons, feel free to use any of the icons available in your setup._
+
+```json
+{
+    "name": "Nuno Coração",
+    "image" : "img/nuno_avatar.jpg",
+    "bio": "Theme Creator",
+    "social": [
+        { "linkedin": "https://linkedin.com/in/nunocoracao" },
+        { "twitter": "https://twitter.com/nunocoracao" },
+        { "instagram": "https://instagram.com/nunocoracao" },
+        { "medium": "https://medium.com/@nunocoracao" },
+        { "github": "https://github.com/nunocoracao" },
+        { "goodreads": "http://goodreads.com/nunocoracao" },
+        { "keybase": "https://keybase.io/nunocoracao" },
+        { "reddit": "https://reddit.com/user/nunoheart" }
+    ]
+}
+```
+
+
+## Reference Authors in Articles
+
+Now that you created one author, the next step is to reference it in one or more articles. In the example below, we reference the author created in the previous step using its `key`.
+
+This will render an extra author using the data provided in the `json` file. This feature does not change in any way the default author configured for the overall site, and therefore, you can control both separately. Using the `showAuthor` parameter, you can configure whether to show the default author, that is the normal use-case for a single author blog. The new `authors` front-matter parameter allows you to define authors specifically to an article, and they will be rendered independently of the configurations for the default site author.
+
+```md
+---
+title: "Multiple Authors"
+date: 2020-08-10
+draft: false
+description: "Configure multiple authors for your articles."
+slug: "multi-author"
+tags: ["authors", "config", "docs"]
+showAuthor: true
+authors:
+  - "nunocoracao"
+showAuthorsBadges : false 
+---
+```
+
+In the example, which matches the markdown of the current page, both the default author and the new one will be displayed. You can scroll now to see the outcome.
+
+## Create the Authors Taxonomy
+
+To get lists of articles for each of your authors you can configure the `authors` taxonomy, which opens up some more configurations that might be interesting. This is an optional step in the process that is not required to display the authors in your articles.
+
+First step is to configure the `authors` taxonomy in your `config.toml` file, like in the example below. Even though `tag` and `category` are defined by default with Hugo, once you add a specific taxonomies section you need to add them again otherwise the site will not process them.
+
+```toml
+[taxonomies]
+  tag = "tags"
+  category = "categories"
+  author = "authors"
+```
+
+And that’s just about it. Now you will have pages that reference your authors and, for each, show the respective list of articles where they participate. You can also use the `article.showAuthorsBadges` on the config file, or `showAuthorsBadges` on each article to chose whether to display the `authors` taxonomy as badges in each post item. As an example, this doc is configured to not display authors but if you look at the sample referenced below you will see the authors displayed as badges.
+
+Lastly, you can add more detail to each author page so that it displays a little bio, links, or whatever information fits your use-case. To achieve that, create a folder with the `key` to each author inside `./content/authors` and inside each folder place a `_index.md` file. For the example above, we would end up with a `.content/authors/nunocoracao/_index.md` file. Inside, you can configure the actual name of the author and the contents of their page. Authors in this documentation website are configured like this, so you can have a look by playing around with the site.
+
+```md
+---
+title: "Nuno Coração"
+---
+
+Nuno's awesome dummy bio.
+
+```
+
+## Sample
+
+This sample sample below shows an example where the default site author is turned off and the article has multiple authors.
+
+{{< article link="/samples/multiple-authors/" >}}

exampleSite/content/docs/multi-author/index.ja.md

@@ -0,0 +1,102 @@
+---
+title: "Multiple Authors"
+date: 2020-08-10
+draft: false
+description: "Configure multiple authors for your articles."
+slug: "multi-author"
+tags: ["authors", "config", "docs"]
+series: ["Documentation"]
+series_order: 10
+showAuthor: true
+authors:
+  - "nunocoracao"
+showAuthorsBadges : false 
+---
+
+
+Some websites have more than one author contributing with content and therefore require more than a single default author across the entire website. For those use-cases, Blowfish allows users to extend the list of authors using the multiple authors feature. 
+
+To keep everything backwards compatible, this feature only allows the definition of extra authors and does not change in any way the previous author functionality which is used via config files.  
+
+
+## Create Authors
+
+The first step to create new authors is to set up a new folder in `./data/authors`. Then you can simply add new `json` files inside, one for each new author. The name of the file will be the `key` for that author when referencing it in your articles. 
+
+As an example, let’s create a file called `nunocoracao.json` within `./data/authors`. The contents of the file should be similar to the ones below. `name`, `image`, `bio`, and `social` are the 4 parameters supported right for authors. They mimic the configurations available for the default author in the config files.
+
+_Note: the key in the social object will be used to fetch one of the theme’s icons, feel free to use any of the icons available in your setup._
+
+```json
+{
+    "name": "Nuno Coração",
+    "image" : "img/nuno_avatar.jpg",
+    "bio": "Theme Creator",
+    "social": [
+        { "linkedin": "https://linkedin.com/in/nunocoracao" },
+        { "twitter": "https://twitter.com/nunocoracao" },
+        { "instagram": "https://instagram.com/nunocoracao" },
+        { "medium": "https://medium.com/@nunocoracao" },
+        { "github": "https://github.com/nunocoracao" },
+        { "goodreads": "http://goodreads.com/nunocoracao" },
+        { "keybase": "https://keybase.io/nunocoracao" },
+        { "reddit": "https://reddit.com/user/nunoheart" }
+    ]
+}
+```
+
+
+## Reference Authors in Articles
+
+Now that you created one author, the next step is to reference it in one or more articles. In the example below, we reference the author created in the previous step using its `key`.
+
+This will render an extra author using the data provided in the `json` file. This feature does not change in any way the default author configured for the overall site, and therefore, you can control both separately. Using the `showAuthor` parameter, you can configure whether to show the default author, that is the normal use-case for a single author blog. The new `authors` front-matter parameter allows you to define authors specifically to an article, and they will be rendered independently of the configurations for the default site author.
+
+```md
+---
+title: "Multiple Authors"
+date: 2020-08-10
+draft: false
+description: "Configure multiple authors for your articles."
+slug: "multi-author"
+tags: ["authors", "config", "docs"]
+showAuthor: true
+authors:
+  - "nunocoracao"
+showAuthorsBadges : false 
+---
+```
+
+In the example, which matches the markdown of the current page, both the default author and the new one will be displayed. You can scroll now to see the outcome.
+
+## Create the Authors Taxonomy
+
+To get lists of articles for each of your authors you can configure the `authors` taxonomy, which opens up some more configurations that might be interesting. This is an optional step in the process that is not required to display the authors in your articles.
+
+First step is to configure the `authors` taxonomy in your `config.toml` file, like in the example below. Even though `tag` and `category` are defined by default with Hugo, once you add a specific taxonomies section you need to add them again otherwise the site will not process them.
+
+```toml
+[taxonomies]
+  tag = "tags"
+  category = "categories"
+  author = "authors"
+```
+
+And that’s just about it. Now you will have pages that reference your authors and, for each, show the respective list of articles where they participate. You can also use the `article.showAuthorsBadges` on the config file, or `showAuthorsBadges` on each article to chose whether to display the `authors` taxonomy as badges in each post item. As an example, this doc is configured to not display authors but if you look at the sample referenced below you will see the authors displayed as badges.
+
+Lastly, you can add more detail to each author page so that it displays a little bio, links, or whatever information fits your use-case. To achieve that, create a folder with the `key` to each author inside `./content/authors` and inside each folder place a `_index.md` file. For the example above, we would end up with a `.content/authors/nunocoracao/_index.md` file. Inside, you can configure the actual name of the author and the contents of their page. Authors in this documentation website are configured like this, so you can have a look by playing around with the site.
+
+```md
+---
+title: "Nuno Coração"
+---
+
+Nuno's awesome dummy bio.
+
+```
+
+## Sample
+
+This sample sample below shows an example where the default site author is turned off and the article has multiple authors.
+
+{{< article link="/samples/multiple-authors/" >}}

exampleSite/content/docs/multi-author/index.zh-cn.md

@@ -0,0 +1,102 @@
+---
+title: "Multiple Authors"
+date: 2020-08-10
+draft: false
+description: "Configure multiple authors for your articles."
+slug: "multi-author"
+tags: ["authors", "config", "docs"]
+series: ["Documentation"]
+series_order: 10
+showAuthor: true
+authors:
+  - "nunocoracao"
+showAuthorsBadges : false 
+---
+
+
+Some websites have more than one author contributing with content and therefore require more than a single default author across the entire website. For those use-cases, Blowfish allows users to extend the list of authors using the multiple authors feature. 
+
+To keep everything backwards compatible, this feature only allows the definition of extra authors and does not change in any way the previous author functionality which is used via config files.  
+
+
+## Create Authors
+
+The first step to create new authors is to set up a new folder in `./data/authors`. Then you can simply add new `json` files inside, one for each new author. The name of the file will be the `key` for that author when referencing it in your articles. 
+
+As an example, let’s create a file called `nunocoracao.json` within `./data/authors`. The contents of the file should be similar to the ones below. `name`, `image`, `bio`, and `social` are the 4 parameters supported right for authors. They mimic the configurations available for the default author in the config files.
+
+_Note: the key in the social object will be used to fetch one of the theme’s icons, feel free to use any of the icons available in your setup._
+
+```json
+{
+    "name": "Nuno Coração",
+    "image" : "img/nuno_avatar.jpg",
+    "bio": "Theme Creator",
+    "social": [
+        { "linkedin": "https://linkedin.com/in/nunocoracao" },
+        { "twitter": "https://twitter.com/nunocoracao" },
+        { "instagram": "https://instagram.com/nunocoracao" },
+        { "medium": "https://medium.com/@nunocoracao" },
+        { "github": "https://github.com/nunocoracao" },
+        { "goodreads": "http://goodreads.com/nunocoracao" },
+        { "keybase": "https://keybase.io/nunocoracao" },
+        { "reddit": "https://reddit.com/user/nunoheart" }
+    ]
+}
+```
+
+
+## Reference Authors in Articles
+
+Now that you created one author, the next step is to reference it in one or more articles. In the example below, we reference the author created in the previous step using its `key`.
+
+This will render an extra author using the data provided in the `json` file. This feature does not change in any way the default author configured for the overall site, and therefore, you can control both separately. Using the `showAuthor` parameter, you can configure whether to show the default author, that is the normal use-case for a single author blog. The new `authors` front-matter parameter allows you to define authors specifically to an article, and they will be rendered independently of the configurations for the default site author.
+
+```md
+---
+title: "Multiple Authors"
+date: 2020-08-10
+draft: false
+description: "Configure multiple authors for your articles."
+slug: "multi-author"
+tags: ["authors", "config", "docs"]
+showAuthor: true
+authors:
+  - "nunocoracao"
+showAuthorsBadges : false 
+---
+```
+
+In the example, which matches the markdown of the current page, both the default author and the new one will be displayed. You can scroll now to see the outcome.
+
+## Create the Authors Taxonomy
+
+To get lists of articles for each of your authors you can configure the `authors` taxonomy, which opens up some more configurations that might be interesting. This is an optional step in the process that is not required to display the authors in your articles.
+
+First step is to configure the `authors` taxonomy in your `config.toml` file, like in the example below. Even though `tag` and `category` are defined by default with Hugo, once you add a specific taxonomies section you need to add them again otherwise the site will not process them.
+
+```toml
+[taxonomies]
+  tag = "tags"
+  category = "categories"
+  author = "authors"
+```
+
+And that’s just about it. Now you will have pages that reference your authors and, for each, show the respective list of articles where they participate. You can also use the `article.showAuthorsBadges` on the config file, or `showAuthorsBadges` on each article to chose whether to display the `authors` taxonomy as badges in each post item. As an example, this doc is configured to not display authors but if you look at the sample referenced below you will see the authors displayed as badges.
+
+Lastly, you can add more detail to each author page so that it displays a little bio, links, or whatever information fits your use-case. To achieve that, create a folder with the `key` to each author inside `./content/authors` and inside each folder place a `_index.md` file. For the example above, we would end up with a `.content/authors/nunocoracao/_index.md` file. Inside, you can configure the actual name of the author and the contents of their page. Authors in this documentation website are configured like this, so you can have a look by playing around with the site.
+
+```md
+---
+title: "Nuno Coração"
+---
+
+Nuno's awesome dummy bio.
+
+```
+
+## Sample
+
+This sample sample below shows an example where the default site author is turned off and the article has multiple authors.
+
+{{< article link="/samples/multiple-authors/" >}}

exampleSite/content/docs/partials/index.it.md

@@ -0,0 +1,102 @@
+---
+title: "Partials"
+date: 2020-08-10
+draft: false
+description: "All the partials available in Blowfish."
+slug: "partials"
+tags: ["partials", "analytics", "privacy", "comments", "favicons", "icon", "docs"]
+series: ["Documentation"]
+series_order: 9
+---
+
+## Analytics
+
+Blowfish provides built-in support for Fathom Analytics and Google Analytics. Fathom is a paid alternative to Google Analytics that respects user privacy.
+
+### Fathom Analytics
+
+To enable Fathom Analytics support, simply provide your Fathom site code in the `config/_default/params.toml` file. If you also use the custom domain feature of Fathom and would like to serve their script from your domain, you can also additionally provide the `domain` configuration value. If you don't provide a `domain` value, the script will load directly from Fathom DNS.
+
+```toml
+# config/_default/params.toml
+
+[fathomAnalytics]
+  site = "ABC12345"
+  domain = "llama.yoursite.com"
+```
+
+### Google Analytics
+
+Google Analytics support is provided through the internal Hugo partial. Simply provide the `googleAnalytics` key in the `config/_default/config.toml` file and the script will be added automatically.
+
+Both version 3 (analytics.js) and version 4 (gtag.js) are supported, based on the configuration value provided:
+
+```toml
+# config/_default/config.toml
+
+# version 3
+googleAnalytics = "UA-PROPERTY_ID"
+# version 4
+googleAnalytics = "G-MEASUREMENT_ID"
+```
+
+### Custom analytics providers
+
+If you wish to use a different analytics provider on your website you can also override the analytics partial and provide your own script. Simply create the file `layouts/partials/extend-head.html` in your project and it will automatically include it in the `<head>` of the website.
+
+## Comments
+
+To add comments to your articles, Blowfish includes support for a comments partial that is included at the base of each article page. Simply provide a `layouts/partials/comments.html` which contains the code required to display your chosen comments.
+
+You can use either the built-in Hugo Disqus template, or provide your own custom code. Refer to the [Hugo docs](https://gohugo.io/content-management/comments/) for further information.
+
+Once the partial has been provided, finer control over where comments are displayed is then managed using the `showComments` parameter. This value can be set at the theme level in the `params.toml` [config file]({{< ref "configuration#theme-parameters" >}}), or on a per-article basis by including it in the [front matter]({{< ref "front-matter" >}}). The parameter defaults to `false` so it must be set to `true` in one of these locations in order for comments to be displayed.
+
+## Favicons
+
+Blowfish provides a default set of blank favicons to get started but you can provide your own assets to override them. The easiest way to obtain new favicon assets is to generate them using a third-party provider like [favicon.io](https://favicon.io).
+
+Icon assets should be placed directly in the `static/` folder of your website and named as per the listing below. If you use [favicon.io](https://favicon.io), these will be the filenames that are automatically generated for you, but you can provide your own assets if you wish.
+
+```shell
+static/
+├─ android-chrome-192x192.png
+├─ android-chrome-512x512.png
+├─ apple-touch-icon.png
+├─ favicon-16x16.png
+├─ favicon-32x32.png
+├─ favicon.ico
+└─ site.webmanifest
+```
+
+Alternatively, you can also completely override the default favicon behaviour and provide your own favicon HTML tags and assets. Simply provide a `layouts/partials/favicons.html` file in your project and this will be injected into the site `<head>` in place of the default assets.
+
+## Icon
+
+Similar to the [icon shortcode]({{< ref "shortcodes#icon" >}}), you can include icons in your own templates and partials by using Blowfish's `icon.html` partial. The partial takes one parameter which is the name of the icon to be included.
+
+**Example:**
+
+```go
+  {{ partial "icon.html" "github" }}
+```
+
+Icons are populated using Hugo pipelines which makes them very flexible. Blowfish includes a number of built-in icons for social, links and other purposes. Check the [icon samples]({{< ref "samples/icons" >}}) page for a full list of supported icons.
+
+Custom icons can be added by providing your own icon assets in the `assets/icons/` directory of your project. The icon can then be referenced in the partial by using the SVG filename without the `.svg` extension.
+
+Icons can also be used in article content by calling the [icon shortcode]({{< ref "shortcodes#icon" >}}).
+
+## Extensions
+
+Blowfish also provides for a number of extension partials that allow for expanding upon base functionality.
+
+### Article link
+
+If you wish to insert additional code after article links, create a `layouts/partials/extend-article-link.html` file. This is especially powerful when combined with the [`badge`]({{< ref "shortcodes#badge" >}}) shortcode which can be used to highlight metadata for certain articles.
+
+### Head and Footer
+
+The theme allows for inserting additional code directly into the `<head>` and `<footer>` sections of the template. These can be useful for providing scripts or other logic that isn't part of the theme.
+
+Simply create either `layouts/partials/extend-head.html` or `layouts/partials/extend-footer.html` and these will automatically be included in your website build. Both partials are injected as the last items in `<head>` and `<footer>` so they can be used to override theme defaults.

exampleSite/content/docs/partials/index.ja.md

@@ -0,0 +1,102 @@
+---
+title: "Partials"
+date: 2020-08-10
+draft: false
+description: "All the partials available in Blowfish."
+slug: "partials"
+tags: ["partials", "analytics", "privacy", "comments", "favicons", "icon", "docs"]
+series: ["Documentation"]
+series_order: 9
+---
+
+## Analytics
+
+Blowfish provides built-in support for Fathom Analytics and Google Analytics. Fathom is a paid alternative to Google Analytics that respects user privacy.
+
+### Fathom Analytics
+
+To enable Fathom Analytics support, simply provide your Fathom site code in the `config/_default/params.toml` file. If you also use the custom domain feature of Fathom and would like to serve their script from your domain, you can also additionally provide the `domain` configuration value. If you don't provide a `domain` value, the script will load directly from Fathom DNS.
+
+```toml
+# config/_default/params.toml
+
+[fathomAnalytics]
+  site = "ABC12345"
+  domain = "llama.yoursite.com"
+```
+
+### Google Analytics
+
+Google Analytics support is provided through the internal Hugo partial. Simply provide the `googleAnalytics` key in the `config/_default/config.toml` file and the script will be added automatically.
+
+Both version 3 (analytics.js) and version 4 (gtag.js) are supported, based on the configuration value provided:
+
+```toml
+# config/_default/config.toml
+
+# version 3
+googleAnalytics = "UA-PROPERTY_ID"
+# version 4
+googleAnalytics = "G-MEASUREMENT_ID"
+```
+
+### Custom analytics providers
+
+If you wish to use a different analytics provider on your website you can also override the analytics partial and provide your own script. Simply create the file `layouts/partials/extend-head.html` in your project and it will automatically include it in the `<head>` of the website.
+
+## Comments
+
+To add comments to your articles, Blowfish includes support for a comments partial that is included at the base of each article page. Simply provide a `layouts/partials/comments.html` which contains the code required to display your chosen comments.
+
+You can use either the built-in Hugo Disqus template, or provide your own custom code. Refer to the [Hugo docs](https://gohugo.io/content-management/comments/) for further information.
+
+Once the partial has been provided, finer control over where comments are displayed is then managed using the `showComments` parameter. This value can be set at the theme level in the `params.toml` [config file]({{< ref "configuration#theme-parameters" >}}), or on a per-article basis by including it in the [front matter]({{< ref "front-matter" >}}). The parameter defaults to `false` so it must be set to `true` in one of these locations in order for comments to be displayed.
+
+## Favicons
+
+Blowfish provides a default set of blank favicons to get started but you can provide your own assets to override them. The easiest way to obtain new favicon assets is to generate them using a third-party provider like [favicon.io](https://favicon.io).
+
+Icon assets should be placed directly in the `static/` folder of your website and named as per the listing below. If you use [favicon.io](https://favicon.io), these will be the filenames that are automatically generated for you, but you can provide your own assets if you wish.
+
+```shell
+static/
+├─ android-chrome-192x192.png
+├─ android-chrome-512x512.png
+├─ apple-touch-icon.png
+├─ favicon-16x16.png
+├─ favicon-32x32.png
+├─ favicon.ico
+└─ site.webmanifest
+```
+
+Alternatively, you can also completely override the default favicon behaviour and provide your own favicon HTML tags and assets. Simply provide a `layouts/partials/favicons.html` file in your project and this will be injected into the site `<head>` in place of the default assets.
+
+## Icon
+
+Similar to the [icon shortcode]({{< ref "shortcodes#icon" >}}), you can include icons in your own templates and partials by using Blowfish's `icon.html` partial. The partial takes one parameter which is the name of the icon to be included.
+
+**Example:**
+
+```go
+  {{ partial "icon.html" "github" }}
+```
+
+Icons are populated using Hugo pipelines which makes them very flexible. Blowfish includes a number of built-in icons for social, links and other purposes. Check the [icon samples]({{< ref "samples/icons" >}}) page for a full list of supported icons.
+
+Custom icons can be added by providing your own icon assets in the `assets/icons/` directory of your project. The icon can then be referenced in the partial by using the SVG filename without the `.svg` extension.
+
+Icons can also be used in article content by calling the [icon shortcode]({{< ref "shortcodes#icon" >}}).
+
+## Extensions
+
+Blowfish also provides for a number of extension partials that allow for expanding upon base functionality.
+
+### Article link
+
+If you wish to insert additional code after article links, create a `layouts/partials/extend-article-link.html` file. This is especially powerful when combined with the [`badge`]({{< ref "shortcodes#badge" >}}) shortcode which can be used to highlight metadata for certain articles.
+
+### Head and Footer
+
+The theme allows for inserting additional code directly into the `<head>` and `<footer>` sections of the template. These can be useful for providing scripts or other logic that isn't part of the theme.
+
+Simply create either `layouts/partials/extend-head.html` or `layouts/partials/extend-footer.html` and these will automatically be included in your website build. Both partials are injected as the last items in `<head>` and `<footer>` so they can be used to override theme defaults.

exampleSite/content/docs/partials/index.zh-cn.md

@@ -0,0 +1,102 @@
+---
+title: "Partials"
+date: 2020-08-10
+draft: false
+description: "All the partials available in Blowfish."
+slug: "partials"
+tags: ["partials", "analytics", "privacy", "comments", "favicons", "icon", "docs"]
+series: ["Documentation"]
+series_order: 9
+---
+
+## Analytics
+
+Blowfish provides built-in support for Fathom Analytics and Google Analytics. Fathom is a paid alternative to Google Analytics that respects user privacy.
+
+### Fathom Analytics
+
+To enable Fathom Analytics support, simply provide your Fathom site code in the `config/_default/params.toml` file. If you also use the custom domain feature of Fathom and would like to serve their script from your domain, you can also additionally provide the `domain` configuration value. If you don't provide a `domain` value, the script will load directly from Fathom DNS.
+
+```toml
+# config/_default/params.toml
+
+[fathomAnalytics]
+  site = "ABC12345"
+  domain = "llama.yoursite.com"
+```
+
+### Google Analytics
+
+Google Analytics support is provided through the internal Hugo partial. Simply provide the `googleAnalytics` key in the `config/_default/config.toml` file and the script will be added automatically.
+
+Both version 3 (analytics.js) and version 4 (gtag.js) are supported, based on the configuration value provided:
+
+```toml
+# config/_default/config.toml
+
+# version 3
+googleAnalytics = "UA-PROPERTY_ID"
+# version 4
+googleAnalytics = "G-MEASUREMENT_ID"
+```
+
+### Custom analytics providers
+
+If you wish to use a different analytics provider on your website you can also override the analytics partial and provide your own script. Simply create the file `layouts/partials/extend-head.html` in your project and it will automatically include it in the `<head>` of the website.
+
+## Comments
+
+To add comments to your articles, Blowfish includes support for a comments partial that is included at the base of each article page. Simply provide a `layouts/partials/comments.html` which contains the code required to display your chosen comments.
+
+You can use either the built-in Hugo Disqus template, or provide your own custom code. Refer to the [Hugo docs](https://gohugo.io/content-management/comments/) for further information.
+
+Once the partial has been provided, finer control over where comments are displayed is then managed using the `showComments` parameter. This value can be set at the theme level in the `params.toml` [config file]({{< ref "configuration#theme-parameters" >}}), or on a per-article basis by including it in the [front matter]({{< ref "front-matter" >}}). The parameter defaults to `false` so it must be set to `true` in one of these locations in order for comments to be displayed.
+
+## Favicons
+
+Blowfish provides a default set of blank favicons to get started but you can provide your own assets to override them. The easiest way to obtain new favicon assets is to generate them using a third-party provider like [favicon.io](https://favicon.io).
+
+Icon assets should be placed directly in the `static/` folder of your website and named as per the listing below. If you use [favicon.io](https://favicon.io), these will be the filenames that are automatically generated for you, but you can provide your own assets if you wish.
+
+```shell
+static/
+├─ android-chrome-192x192.png
+├─ android-chrome-512x512.png
+├─ apple-touch-icon.png
+├─ favicon-16x16.png
+├─ favicon-32x32.png
+├─ favicon.ico
+└─ site.webmanifest
+```
+
+Alternatively, you can also completely override the default favicon behaviour and provide your own favicon HTML tags and assets. Simply provide a `layouts/partials/favicons.html` file in your project and this will be injected into the site `<head>` in place of the default assets.
+
+## Icon
+
+Similar to the [icon shortcode]({{< ref "shortcodes#icon" >}}), you can include icons in your own templates and partials by using Blowfish's `icon.html` partial. The partial takes one parameter which is the name of the icon to be included.
+
+**Example:**
+
+```go
+  {{ partial "icon.html" "github" }}
+```
+
+Icons are populated using Hugo pipelines which makes them very flexible. Blowfish includes a number of built-in icons for social, links and other purposes. Check the [icon samples]({{< ref "samples/icons" >}}) page for a full list of supported icons.
+
+Custom icons can be added by providing your own icon assets in the `assets/icons/` directory of your project. The icon can then be referenced in the partial by using the SVG filename without the `.svg` extension.
+
+Icons can also be used in article content by calling the [icon shortcode]({{< ref "shortcodes#icon" >}}).
+
+## Extensions
+
+Blowfish also provides for a number of extension partials that allow for expanding upon base functionality.
+
+### Article link
+
+If you wish to insert additional code after article links, create a `layouts/partials/extend-article-link.html` file. This is especially powerful when combined with the [`badge`]({{< ref "shortcodes#badge" >}}) shortcode which can be used to highlight metadata for certain articles.
+
+### Head and Footer
+
+The theme allows for inserting additional code directly into the `<head>` and `<footer>` sections of the template. These can be useful for providing scripts or other logic that isn't part of the theme.
+
+Simply create either `layouts/partials/extend-head.html` or `layouts/partials/extend-footer.html` and these will automatically be included in your website build. Both partials are injected as the last items in `<head>` and `<footer>` so they can be used to override theme defaults.

exampleSite/content/docs/series/index.it.md

@@ -0,0 +1,36 @@
+---
+title: "Series"
+date: 2020-08-09
+draft: false
+description: "Learn how to group articles under a series."
+slug: "series"
+tags: ["series", "docs"]
+series: ["Documentation"]
+series_order: 11
+seriesOpened: true
+---
+
+Blowfish provides a feature to group a set of articles together under a "series". Placing an article under a series will display the rest of the series articles in each single page and provide a quick way to navigate amongst them. You can see an example of this above.
+
+## Create Taxonomy
+The first step to enable series is to create the `series` taxonomy. For doing this just add the `series` taxonomy to your taxonomy list in the `config.toml`.
+
+```toml
+[taxonomies]
+  tag = "tags"
+  category = "categories"
+  author = "authors"
+  series = "series"
+```
+
+## Mark Articles
+
+Then you just need to mark each article using the `series` parameter and the `series_order`. The `series` parameter will be the id and name of the series you are placing the article into (even though the variable is an array we recommend keeping each article to a single series.). And the `series_order` defines the order of that article within the series. In the example below the article is number `11` in the `Documentation` series.
+
+```md
+series: ["Documentation"]
+series_order: 11
+```
+
+## Series Behavior
+Marking an article as part of a series will automatically display the series module as you see in this page for example. You can choose whether that module starts opened or not using the `article.seriesOpened` global variable in `params.toml` or the front-matter parameter `seriesOpened` to specify an override at the article level.

exampleSite/content/docs/series/index.ja.md

@@ -0,0 +1,36 @@
+---
+title: "Series"
+date: 2020-08-09
+draft: false
+description: "Learn how to group articles under a series."
+slug: "series"
+tags: ["series", "docs"]
+series: ["Documentation"]
+series_order: 11
+seriesOpened: true
+---
+
+Blowfish provides a feature to group a set of articles together under a "series". Placing an article under a series will display the rest of the series articles in each single page and provide a quick way to navigate amongst them. You can see an example of this above.
+
+## Create Taxonomy
+The first step to enable series is to create the `series` taxonomy. For doing this just add the `series` taxonomy to your taxonomy list in the `config.toml`.
+
+```toml
+[taxonomies]
+  tag = "tags"
+  category = "categories"
+  author = "authors"
+  series = "series"
+```
+
+## Mark Articles
+
+Then you just need to mark each article using the `series` parameter and the `series_order`. The `series` parameter will be the id and name of the series you are placing the article into (even though the variable is an array we recommend keeping each article to a single series.). And the `series_order` defines the order of that article within the series. In the example below the article is number `11` in the `Documentation` series.
+
+```md
+series: ["Documentation"]
+series_order: 11
+```
+
+## Series Behavior
+Marking an article as part of a series will automatically display the series module as you see in this page for example. You can choose whether that module starts opened or not using the `article.seriesOpened` global variable in `params.toml` or the front-matter parameter `seriesOpened` to specify an override at the article level.

exampleSite/content/docs/series/index.zh-cn.md

@@ -0,0 +1,36 @@
+---
+title: "Series"
+date: 2020-08-09
+draft: false
+description: "Learn how to group articles under a series."
+slug: "series"
+tags: ["series", "docs"]
+series: ["Documentation"]
+series_order: 11
+seriesOpened: true
+---
+
+Blowfish provides a feature to group a set of articles together under a "series". Placing an article under a series will display the rest of the series articles in each single page and provide a quick way to navigate amongst them. You can see an example of this above.
+
+## Create Taxonomy
+The first step to enable series is to create the `series` taxonomy. For doing this just add the `series` taxonomy to your taxonomy list in the `config.toml`.
+
+```toml
+[taxonomies]
+  tag = "tags"
+  category = "categories"
+  author = "authors"
+  series = "series"
+```
+
+## Mark Articles
+
+Then you just need to mark each article using the `series` parameter and the `series_order`. The `series` parameter will be the id and name of the series you are placing the article into (even though the variable is an array we recommend keeping each article to a single series.). And the `series_order` defines the order of that article within the series. In the example below the article is number `11` in the `Documentation` series.
+
+```md
+series: ["Documentation"]
+series_order: 11
+```
+
+## Series Behavior
+Marking an article as part of a series will automatically display the series module as you see in this page for example. You can choose whether that module starts opened or not using the `article.seriesOpened` global variable in `params.toml` or the front-matter parameter `seriesOpened` to specify an override at the article level.

exampleSite/content/docs/shortcodes/index.it.md

@@ -0,0 +1,754 @@
+---
+title: "Shortcodes"
+date: 2020-08-11
+draft: false
+description: "All the shortcodes available in Blowfish."
+slug: "shortcodes"
+tags: ["shortcodes", "mermaid", "icon", "lead", "docs"]
+series: ["Documentation"]
+series_order: 8
+---
+
+In addition to all the [default Hugo shortcodes](https://gohugo.io/content-management/shortcodes/), Blowfish adds a few extras for additional functionality.
+
+## Alert
+
+`alert` outputs its contents as a stylised message box within your article. It's useful for drawing attention to important information that you don't want the reader to miss.
+
+<!-- prettier-ignore-start -->
+| Parameter   | Description                                                                                                                                                                                  |
+| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `icon`      | **Optional.** the icon to display on the left side.<br>**Default:** `exclaimation triangle icon` (Check out the [icon shortcode](#icon) for more details on using icons.)                    |
+| `iconColor` | **Optional.** the color for the icon in basic CSS style.<br>Can be either hex values (`#FFFFFF`) or color names (`white`)<br>By default chosen based on the current color theme .            |
+| `cardColor` | **Optional.** the color for the card background in basic CSS style.<br>Can be either hex values (`#FFFFFF`) or color names (`white`)<br>By default chosen based on the current color theme . |
+| `textColor` | **Optional.** the color for the text in basic CSS style.<br>Can be either hex values (`#FFFFFF`) or color names (`white`)<br>By default chosen based on the current color theme .            |
+<!-- prettier-ignore-end -->
+
+The input is written in Markdown so you can format it however you please.
+
+**Example 1:** No params
+
+```md
+{{</* alert */>}}
+**Warning!** This action is destructive!
+{{</* /alert */>}}
+```
+
+{{< alert >}}
+**Warning!** This action is destructive!
+{{< /alert >}}
+
+**Example 2:** Unnamed param
+
+```md
+{{</* alert "twitter" */>}}
+Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter.
+{{</* /alert */>}}
+```
+
+{{< alert "twitter" >}}
+Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter.
+{{< /alert >}}
+
+**Example 3:** Named params
+
+```md
+{{</* alert icon="fire" cardColor="#e63946" iconColor="#1d3557" textColor="#f1faee" */>}}
+This is an error!
+{{</* /alert */>}}
+```
+
+{{< alert icon="fire" cardColor="#e63946" iconColor="#1d3557" textColor="#f1faee" >}}
+This is an error!
+{{< /alert >}}
+
+<br/><br/><br/>
+
+## 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.*
+
+<!-- prettier-ignore-start -->
+| Parameter | Description                                              |
+| --------- | -------------------------------------------------------- |
+| `link`    | **Required.** the `.RelPermalink` to the target article. |
+<!-- prettier-ignore-end -->
+
+**Example:**
+
+```md
+{{</* article link="/docs/welcome/" */>}}
+```
+
+{{< article link="/docs/welcome/" >}}
+
+<br/><br/><br/>
+
+## Badge
+
+`badge` outputs a styled badge component which is useful for displaying metadata.
+
+**Example:**
+
+```md
+{{</* badge */>}}
+New article!
+{{</* /badge */>}}
+```
+
+{{< badge >}}
+New article!
+{{< /badge >}}
+
+<br/><br/><br/>
+
+## Button
+
+`button` outputs a styled button component which can be used to highlight a primary action. It has two optional variables `href` and `target` which can be used to specify the URL and target of the link.
+
+**Example:**
+
+```md
+{{</* button href="#button" target="_self" */>}}
+Call to action
+{{</* /button */>}}
+```
+
+{{< button href="#button" target="_self" >}}
+Call to action
+{{< /button >}}
+
+<br/><br/><br/>
+
+## 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 one of the predefined aspect ratios of `16:9`, `21:9` or `32:9`.
+
+<!-- prettier-ignore-start -->
+| Parameter     | Description                                                                                                       |
+| ------------- | ----------------------------------------------------------------------------------------------------------------- |
+| `images`      | **Required.** A regex string to match image names or URLs.                                                        |
+| `aspectRatio` | **Optional.** The aspect ratio for the carousel. Either `16-9`, `21-9` or `32-9`. It is set to `16-9` by default. |
+| `interval`    | **Optional.** The interval for the auto-scrooling, specified in milliseconds. Defaults to `2000` (2s)             |
+<!-- prettier-ignore-end -->
+
+**Example 1:** 16:9 aspect ratio and verbose list of images
+
+```md
+{{</* carousel images="{https://cdn.pixabay.com/photo/2016/12/11/12/02/mountains-1899264_960_720.jpg, gallery/03.jpg, gallery/01.jpg, gallery/02.jpg, gallery/04.jpg}" */>}}
+```
+
+{{< carousel images="{https://cdn.pixabay.com/photo/2016/12/11/12/02/mountains-1899264_960_720.jpg,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" interval="2500" */>}}
+```
+
+{{< carousel images="gallery/*" aspectRatio="21-9" interval="2500" >}}
+
+<br/><br/><br/>
+
+## 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.
+
+Refer to the [official Chart.js docs](https://www.chartjs.org/docs/latest/general/) for details on syntax and supported chart types.
+
+**Example:**
+
+```js
+{{</* chart */>}}
+type: 'bar',
+data: {
+  labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'],
+  datasets: [{
+    label: '# of votes',
+    data: [12, 19, 3, 5, 3],
+  }]
+}
+{{</* /chart */>}}
+```
+
+<!-- prettier-ignore-start -->
+{{< chart >}}
+type: 'bar',
+data: {
+  labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'],
+  datasets: [{
+    label: '# of votes',
+    data: [12, 19, 3, 5, 3],
+  }]
+}
+{{< /chart >}}
+<!-- prettier-ignore-end -->
+
+You can see some additional Chart.js examples on the [charts samples]({{< ref "charts" >}}) page.
+
+<br/><br/><br/>
+
+## Figure
+
+Blowfish includes a `figure` shortcode for adding images to content. The shortcode replaces the base Hugo functionality in order to provide additional performance benefits.
+
+When a provided image is a page resource, it will be optimised using Hugo Pipes and scaled in order to provide images appropriate to different device resolutions. If a static asset or URL to an external image is provided, it will be included as-is without any image processing by Hugo.
+
+The `figure` shortcode accepts six parameters:
+
+<!-- prettier-ignore-start -->
+| Parameter | Description                                                                                                                                                                                                                                                                                                                                                                               |
+| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `src`     | **Required.** The local path/filename or URL of the image. When providing a path and filename, the theme will attempt to locate the image using the following lookup order: Firstly, as a [page resource](https://gohugo.io/content-management/page-resources/) bundled with the page; then an asset in the `assets/` directory; then finally, a static image in the `static/` directory. |
+| `alt`     | [Alternative text description](https://moz.com/learn/seo/alt-text) for the image.                                                                                                                                                                                                                                                                                                         |
+| `caption` | Markdown for the image caption, which will be displayed below the image.                                                                                                                                                                                                                                                                                                                  |
+| `class`   | Additional CSS classes to apply to the image.                                                                                                                                                                                                                                                                                                                                             |
+| `href`    | URL that the image should be linked to.                                                                                                                                                                                                                                                                                                                                                   |
+| `target`  | The target attribute for the `href` URL.                                                                                                                                                                                                                                                                                                                                                  |
+| `nozoom`  | `nozoom=true` disables the image "zoom" functionality. This is most useful in combination with a `href` link.                                                                                                                                                                                                                                                                             |
+| `default` | Special parameter to revert to default Hugo `figure` behaviour. Simply provide `default=true` and then use normal [Hugo shortcode syntax](https://gohugo.io/content-management/shortcodes/#figure).                                                                                                                                                                                       |
+<!-- prettier-ignore-end -->
+
+Blowfish also supports automatic conversion of images included using standard Markdown syntax. Simply use the following format and the theme will handle the rest:
+
+```md
+![Alt text](image.jpg "Image caption")
+```
+
+**Example:**
+
+```md
+{{</* figure
+    src="abstract.jpg"
+    alt="Abstract purple artwork"
+    caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)"
+    */>}}
+
+<!-- OR -->
+
+![Abstract purple artwork](abstract.jpg "Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)")
+```
+
+{{< figure src="abstract.jpg" alt="Abstract purple artwork" caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)" >}}
+
+<br/><br/><br/>
+
+## Gallery
+
+`gallery` allows you to showcase multiple images at once, in a responsive manner with more varied and interesting layouts.
+
+In order to add images to the gallery, use `img` tags for each image and add `class="grid-wXX"` in order for the gallery to be able to identify the column width for each image. The widths available by default start at 10% and go all the way to 100% in 5% increments. For example, to set the width to 65%, set the class to `grid-w65`. Additionally, widths for 33% and 66% are also available in order to build galleries with 3 cols. You can also leverage tailwind's responsive indicators to have a reponsive grid.
+
+**Example 1: normal gallery**
+
+```md
+{{</* gallery */>}}
+  <img src="gallery/01.jpg" class="grid-w33" />
+  <img src="gallery/02.jpg" class="grid-w33" />
+  <img src="gallery/03.jpg" class="grid-w33" />
+  <img src="gallery/04.jpg" class="grid-w33" />
+  <img src="gallery/05.jpg" class="grid-w33" />
+  <img src="gallery/06.jpg" class="grid-w33" />
+  <img src="gallery/07.jpg" class="grid-w33" />
+{{</* /gallery */>}}
+```
+
+{{< gallery >}}
+  <img src="gallery/01.jpg" class="grid-w33" />
+  <img src="gallery/02.jpg" class="grid-w33" />
+  <img src="gallery/03.jpg" class="grid-w33" />
+  <img src="gallery/04.jpg" class="grid-w33" />
+  <img src="gallery/05.jpg" class="grid-w33" />
+  <img src="gallery/06.jpg" class="grid-w33" />
+  <img src="gallery/07.jpg" class="grid-w33" />
+{{< /gallery >}}
+
+<br/><br/><br/>
+
+
+**Example 2: responsive gallery**
+
+```md
+{{</* gallery */>}}
+  <img src="gallery/01.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/02.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/03.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/04.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/05.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/06.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/07.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+{{</* /gallery */>}}
+```
+
+{{< gallery >}}
+  <img src="gallery/01.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/02.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/03.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/04.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/05.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/06.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/07.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+{{< /gallery >}}
+
+<br/><br/><br/>
+
+## 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.
+
+<!-- prettier-ignore-start -->
+| Parameter | Description                                           |
+| --------- | ----------------------------------------------------- |
+| `repo`    | [String] github repo in the format of `username/repo` |
+<!-- prettier-ignore-end -->
+
+**Example 1:**
+
+```md
+{{</* github repo="nunocoracao/blowfish" */>}}
+```
+
+{{< github repo="nunocoracao/blowfish" >}}
+
+<br/><br/><br/>
+
+## GitLab Card
+
+`gitlab` allows you to quickly link a GitLab Project (GitLab's jargon for repo). 
+It displays realtime stats about it, such as the number of stars and forks it has.
+Unlike `github` it can't display the main programming language of a project.
+Finally, custom GitLab instance URL can be provided, as long as the `api/v4/projects/` endpoint is available, making this shortcode compatible with most self-hosted / enterprise deployments.
+
+<!-- prettier-ignore-start -->
+| Parameter   | Description                                                             |
+| ----------- | ----------------------------------------------------------------------- |
+| `projectID` | [String] gitlab numeric ProjectID                                       |
+| `baseURL`   | [String] optional gitlab instance URL, default is `https://gitlab.com/` |
+<!-- prettier-ignore-end -->
+
+**Example 1:**
+
+```md
+{{</* gitlab projectID="278964" */>}}
+```
+
+{{< gitlab projectID="278964" >}}
+
+<br/><br/><br/>
+
+## 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.
+
+**Example:**
+
+```md
+{{</* icon "github" */>}}
+```
+
+**Output:** {{< icon "github" >}}
+
+Icons are populated using Hugo pipelines which makes them very flexible. Blowfish includes a number of built-in icons for social, links and other purposes. Check the [icon samples]({{< ref "samples/icons" >}}) page for a full list of supported icons.
+
+Custom icons can be added by providing your own icon assets in the `assets/icons/` directory of your project. The icon can then be referenced in the shortcode by using the SVG filename without the `.svg` extension.
+
+Icons can also be used in partials by calling the [icon partial]({{< ref "partials#icon" >}}).
+
+<br/><br/><br/>
+
+## KaTeX
+
+The `katex` shortcode can be used to add mathematical expressions to article content using the KaTeX package. Refer to the online reference of [supported TeX functions](https://katex.org/docs/supported.html) for the available syntax.
+
+To include mathematical expressions in an article, simply place the shortcode anywhere with the content. It only needs to be included once per article and KaTeX will automatically render any markup on that page. Both inline and block notation are supported.
+
+Inline notation can be generated by wrapping the expression in `\\(` and `\\)` delimiters. Alternatively, block notation can be generated using `$$` delimiters.
+
+**Example:**
+
+```md
+{{</* katex */>}}
+\\(f(a,b,c) = (a^2+b^2+c^2)^3\\)
+```
+
+{{< katex >}}
+\\(f(a,b,c) = (a^2+b^2+c^2)^3\\)
+
+Check out the [mathematical notation samples]({{< ref "mathematical-notation" >}}) page for more examples.
+
+<br/><br/><br/>
+
+
+## Keyword
+
+
+The `keyword` component can be used to visually highlight certain important words or phrases, e.g. professional skills etc. The `keywordList` shortcode can be used to group together multiple `keyword` items. Each item can have the following properties.
+
+
+<!-- prettier-ignore-start -->
+| Parameter | Description                             |
+| --------- | --------------------------------------- |
+| `icon`    | Optional icon to be used in the keyword |
+<!-- prettier-ignore-end -->
+
+The input is written in Markdown so you can format it however you please.
+
+**Example1 :**
+
+```md
+{{</* keyword */>}} Super skill {{</* /keyword */>}}
+```
+
+{{< keyword >}} *Standalone* skill {{< /keyword >}}
+
+**Example2 :**
+
+```md
+{{</* keywordList */>}}
+{{</* keyword icon="github" */>}} Lorem ipsum dolor. {{</* /keyword */>}}
+{{</* keyword icon="code" */>}} **Important** skill {{</* /keyword */>}}
+{{</* /keywordList */>}}
+
+{{</* keyword */>}} *Standalone* skill {{</* /keyword */>}}
+```
+
+{{< keywordList >}}
+{{< keyword icon="github" >}} Lorem ipsum dolor {{< /keyword >}}
+{{< keyword icon="code" >}} **Important** skill {{< /keyword >}}
+{{< /keywordList >}}
+{{< keyword >}} *Standalone* skill {{< /keyword >}}
+
+<br/><br/><br/>
+
+## Lead
+
+`lead` is used to bring emphasis to the start of an article. It can be used to style an introduction, or to call out an important piece of information. Simply wrap any Markdown content in the `lead` shortcode.
+
+**Example:**
+
+```md
+{{</* lead */>}}
+When life gives you lemons, make lemonade.
+{{</* /lead */>}}
+```
+
+{{< lead >}}
+When life gives you lemons, make lemonade.
+{{< /lead >}}
+
+<br/><br/><br/> 
+
+## 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.
+
+<!-- prettier-ignore-start -->
+| Parameter  | Description                                                                                                                                             |
+| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `limit`    | **Required.** the number of recent articles to display.                                                                                                 |
+| `title`    | Optional title for the list, default is `Recent`                                                                                                        |
+| `cardView` | Optional card view enabled for the list, default is `false`                                                                                             |
+| `where`    | The variable to be used for the query of articles e.g. `Type`                                                                                           |
+| `value`    | The value that will need to match the parameter defined in `where` for the query of articles e.g. for `where` == `Type` a valid value could be `sample` |
+
+{{< alert >}}
+The `where` and `value` values are used in the following query `where .Site.RegularPages $where $value` in the code of the shortcode. Check [Hugo docs](https://gohugo.io/variables/page/) to learn more about which parameters are available to use.
+{{</ alert >}}
+
+<!-- prettier-ignore-end -->
+
+**Example #1:**
+
+```md
+{{</* list limit=2 */>}}
+```
+
+{{< list limit=2 >}}
+
+**Example #2:**
+
+```md
+{{</* list title="Samples" cardView=true limit=5 where="Type" value="sample" */>}}
+```
+
+{{< list title="Samples" cardView=true limit=6 where="Type" value="sample">}}
+
+<br/><br/><br/>
+
+## LTR/RTL 
+
+`ltr` and `rtl` allows you to mix your contents. Many RTL language users want to include parts of the content in LTR. Using this shortcode will let you do so, and by leveraging `%` as the outer-most dilemeter in the shortcode [Hugo shortcodes](https://gohugo.io/content-management/shortcodes/#shortcodes-with-markdown), any markdown inside will be rendered normally.
+
+**Example:**
+
+```md
+- This is an markdown list.
+- Its per default a LTR direction
+{{%/* rtl */%}}
+- هذه القائمة باللغة العربية
+- من اليمين الى اليسار
+{{%/* /rtl */%}}
+```
+
+- This is an markdown list.
+- Its per default a LTR direction
+{{% rtl %}}
+- هذه القائمة باللغة العربية
+- من اليمين الى اليسار
+{{% /rtl %}}
+
+<br/><br/><br/>
+
+## Markdown Importer
+
+This shortcode allows you to import markdown files from external sources. This is useful for including content from other repositories or websites without having to copy and paste the content.
+
+<!-- prettier-ignore-start -->
+| Parameter | Description                                             |
+| --------- | ------------------------------------------------------- |
+| `url`     | **Required** URL to an externally hosted markdown file. |
+
+
+<!-- prettier-ignore-end -->
+
+
+**Example:**
+
+```md
+{{</* mdimporter url="https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md" */>}}
+
+```
+
+{{< mdimporter url="https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md" >}}
+
+
+<br/><br/>
+
+## 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.
+
+Simply write your Mermaid syntax within the `mermaid` shortcode and let the plugin do the rest.
+
+Refer to the [official Mermaid docs](https://mermaid-js.github.io/) for details on syntax and supported diagram types.
+
+**Example:**
+
+```md
+{{</* mermaid */>}}
+graph LR;
+A[Lemons]-->B[Lemonade];
+B-->C[Profit]
+{{</* /mermaid */>}}
+```
+
+{{< mermaid >}}
+graph LR;
+A[Lemons]-->B[Lemonade];
+B-->C[Profit]
+{{< /mermaid >}}
+
+You can see some additional Mermaid examples on the [diagrams and flowcharts samples]({{< ref "diagrams-flowcharts" >}}) page.
+
+<br/><br/><br/>
+
+## 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
+{{</* swatches "#64748b" "#3b82f6" "#06b6d4" */>}}
+```
+
+**Output**
+{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
+
+<br/><br/><br/>
+
+## Timeline
+
+The `timeline` creates a visual timeline that can be used in different use-cases, e.g. professional experience, a project's achievements, etc. The `timeline` shortcode relies on the `timelineItem` sub-shortcode to define each item within the main timeline. Each item can have the following properties.
+
+
+<!-- prettier-ignore-start -->
+| Parameter   | Description                                  |
+| ----------- | -------------------------------------------- |
+| `icon`      | the icon to be used in the timeline visuals. |
+| `header`    | header for each entry                        |
+| `badge`     | text to place within the top right badge     |
+| `subheader` | entry's subheader                            |
+
+<!-- prettier-ignore-end -->
+
+**Example:**
+
+```md
+{{</* timeline */>}}
+
+{{</* timelineItem icon="github" header="header" badge="badge test" subheader="subheader" */>}}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus. 
+{{</* /timelineItem */>}}
+
+
+{{</* timelineItem icon="code" header="Another Awesome Header" badge="date - present" subheader="Awesome Subheader" */>}}
+With html code
+<ul>
+  <li>Coffee</li>
+  <li>Tea</li>
+  <li>Milk</li>
+</ul>
+{{</* /timelineItem */>}}
+
+{{</* timelineItem icon="star" header="Shortcodes" badge="AWESOME" */>}}
+With other shortcodes
+{{</* gallery */>}}
+  <img src="gallery/01.jpg" class="grid-w33" />
+  <img src="gallery/02.jpg" class="grid-w33" />
+  <img src="gallery/03.jpg" class="grid-w33" />
+  <img src="gallery/04.jpg" class="grid-w33" />
+  <img src="gallery/05.jpg" class="grid-w33" />
+  <img src="gallery/06.jpg" class="grid-w33" />
+  <img src="gallery/07.jpg" class="grid-w33" />
+{{</* /gallery */>}}
+{{</* /timelineItem */>}}
+
+{{</* /timeline */>}}
+```
+
+
+{{< timeline >}}
+
+{{< timelineItem icon="github" header="header" badge="badge test" subheader="subheader" >}}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus. 
+{{</ timelineItem >}}
+
+
+{{< timelineItem icon="code" header="Another Awesome Header" badge="date - present" subheader="Awesome Subheader">}}
+With html code
+<ul>
+  <li>Coffee</li>
+  <li>Tea</li>
+  <li>Milk</li>
+</ul>
+{{</ timelineItem >}}
+
+{{< timelineItem icon="star" header="Shortcodes" badge="AWESOME" >}}
+With other shortcodes
+{{< gallery >}}
+  <img src="gallery/01.jpg" class="grid-w33" />
+  <img src="gallery/02.jpg" class="grid-w33" />
+  <img src="gallery/03.jpg" class="grid-w33" />
+  <img src="gallery/04.jpg" class="grid-w33" />
+  <img src="gallery/05.jpg" class="grid-w33" />
+  <img src="gallery/06.jpg" class="grid-w33" />
+  <img src="gallery/07.jpg" class="grid-w33" />
+{{< /gallery >}}
+{{</ timelineItem >}}
+
+{{</ timeline >}}
+
+
+<br/><br/><br/>
+
+## 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.
+
+Blowfish implements a sub-set of TypeIt features using a `shortcode`. Write your text within the `typeit` shortcode and use the following parameters to configure the behavior you want.
+
+<!-- prettier-ignore-start -->
+| Parameter          | Description                                                                                                                                        |
+| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `tag`              | [String] `html` tag that will be used to render the strings.                                                                                       |
+| `classList`        | [String] List of `css` classes to apply to the `html` element.                                                                                     |
+| `initialString`    | [String] Initial string that will appear written and will be replaced.                                                                             |
+| `speed`            | [number] Typing speed, measured in milliseconds between each step.                                                                                 |
+| `lifeLike`         | [boolean] Makes the typing pace irregular, as if a real person is doing it.                                                                        |
+| `startDelay`       | [number] The amount of time before the plugin begins typing after being initialized.                                                               |
+| `breakLines`       | [boolean] Whether multiple strings are printed on top of each other (true), or if they're deleted and replaced by each other (false).              |
+| `waitUntilVisible` | [boolean] Determines if the instance will begin when loaded or only when the target element becomes visible in the viewport. The default is `true` |
+| `loop`             | [boolean] Whether your strings will continuously loop after completing                                                                             |
+
+<!-- prettier-ignore-end -->
+
+**Example 1:**
+
+```md
+{{</* typeit */>}}
+Lorem ipsum dolor sit amet 
+{{</* /typeit */>}}
+```
+
+{{< typeit >}}
+Lorem ipsum dolor sit amet
+{{< /typeit >}}
+
+**Example 2:**
+
+```md
+{{</* typeit 
+  tag=h1
+  lifeLike=true
+*/>}}
+Lorem ipsum dolor sit amet, 
+consectetur adipiscing elit. 
+{{</* /typeit */>}}
+```
+
+{{< typeit
+  tag=h1
+  lifeLike=true
+>}}
+Lorem ipsum dolor sit amet,
+consectetur adipiscing elit.
+{{< /typeit >}}
+
+**Example 3:**
+
+```md
+{{</* typeit 
+  tag=h3
+  speed=50
+  breakLines=false
+  loop=true
+*/>}}
+Lorem ipsum dolor sit amet, 
+consectetur adipiscing elit. 
+{{</* /typeit */>}}
+```
+
+{{< typeit
+  tag=h3
+  speed=50
+  breakLines=false
+  loop=true
+>}}
+"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 >}}
+
+
+<br/><br/><br/>
+
+## Youtube Lite
+
+A shortcut to embed youtube videos using the [lite-youtube-embed](https://github.com/paulirish/lite-youtube-embed) library. This library is a lightweight alternative to the standard youtube embeds, and it's designed to be faster and more efficient.
+
+<!-- prettier-ignore-start -->
+| Parameter | Description                         |
+| --------- | ----------------------------------- |
+| `id`      | [String] Youtube video id to embed. |
+| `label`   | [String] Label for the video        |
+<!-- prettier-ignore-end -->
+
+**Example 1:**
+
+```md
+{{</* youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" */>}}
+
+```
+
+{{< youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" >}}

exampleSite/content/docs/shortcodes/index.ja.md

@@ -0,0 +1,754 @@
+---
+title: "Shortcodes"
+date: 2020-08-11
+draft: false
+description: "All the shortcodes available in Blowfish."
+slug: "shortcodes"
+tags: ["shortcodes", "mermaid", "icon", "lead", "docs"]
+series: ["Documentation"]
+series_order: 8
+---
+
+In addition to all the [default Hugo shortcodes](https://gohugo.io/content-management/shortcodes/), Blowfish adds a few extras for additional functionality.
+
+## Alert
+
+`alert` outputs its contents as a stylised message box within your article. It's useful for drawing attention to important information that you don't want the reader to miss.
+
+<!-- prettier-ignore-start -->
+| Parameter   | Description                                                                                                                                                                                  |
+| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `icon`      | **Optional.** the icon to display on the left side.<br>**Default:** `exclaimation triangle icon` (Check out the [icon shortcode](#icon) for more details on using icons.)                    |
+| `iconColor` | **Optional.** the color for the icon in basic CSS style.<br>Can be either hex values (`#FFFFFF`) or color names (`white`)<br>By default chosen based on the current color theme .            |
+| `cardColor` | **Optional.** the color for the card background in basic CSS style.<br>Can be either hex values (`#FFFFFF`) or color names (`white`)<br>By default chosen based on the current color theme . |
+| `textColor` | **Optional.** the color for the text in basic CSS style.<br>Can be either hex values (`#FFFFFF`) or color names (`white`)<br>By default chosen based on the current color theme .            |
+<!-- prettier-ignore-end -->
+
+The input is written in Markdown so you can format it however you please.
+
+**Example 1:** No params
+
+```md
+{{</* alert */>}}
+**Warning!** This action is destructive!
+{{</* /alert */>}}
+```
+
+{{< alert >}}
+**Warning!** This action is destructive!
+{{< /alert >}}
+
+**Example 2:** Unnamed param
+
+```md
+{{</* alert "twitter" */>}}
+Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter.
+{{</* /alert */>}}
+```
+
+{{< alert "twitter" >}}
+Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter.
+{{< /alert >}}
+
+**Example 3:** Named params
+
+```md
+{{</* alert icon="fire" cardColor="#e63946" iconColor="#1d3557" textColor="#f1faee" */>}}
+This is an error!
+{{</* /alert */>}}
+```
+
+{{< alert icon="fire" cardColor="#e63946" iconColor="#1d3557" textColor="#f1faee" >}}
+This is an error!
+{{< /alert >}}
+
+<br/><br/><br/>
+
+## 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.*
+
+<!-- prettier-ignore-start -->
+| Parameter | Description                                              |
+| --------- | -------------------------------------------------------- |
+| `link`    | **Required.** the `.RelPermalink` to the target article. |
+<!-- prettier-ignore-end -->
+
+**Example:**
+
+```md
+{{</* article link="/docs/welcome/" */>}}
+```
+
+{{< article link="/docs/welcome/" >}}
+
+<br/><br/><br/>
+
+## Badge
+
+`badge` outputs a styled badge component which is useful for displaying metadata.
+
+**Example:**
+
+```md
+{{</* badge */>}}
+New article!
+{{</* /badge */>}}
+```
+
+{{< badge >}}
+New article!
+{{< /badge >}}
+
+<br/><br/><br/>
+
+## Button
+
+`button` outputs a styled button component which can be used to highlight a primary action. It has two optional variables `href` and `target` which can be used to specify the URL and target of the link.
+
+**Example:**
+
+```md
+{{</* button href="#button" target="_self" */>}}
+Call to action
+{{</* /button */>}}
+```
+
+{{< button href="#button" target="_self" >}}
+Call to action
+{{< /button >}}
+
+<br/><br/><br/>
+
+## 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 one of the predefined aspect ratios of `16:9`, `21:9` or `32:9`.
+
+<!-- prettier-ignore-start -->
+| Parameter     | Description                                                                                                       |
+| ------------- | ----------------------------------------------------------------------------------------------------------------- |
+| `images`      | **Required.** A regex string to match image names or URLs.                                                        |
+| `aspectRatio` | **Optional.** The aspect ratio for the carousel. Either `16-9`, `21-9` or `32-9`. It is set to `16-9` by default. |
+| `interval`    | **Optional.** The interval for the auto-scrooling, specified in milliseconds. Defaults to `2000` (2s)             |
+<!-- prettier-ignore-end -->
+
+**Example 1:** 16:9 aspect ratio and verbose list of images
+
+```md
+{{</* carousel images="{https://cdn.pixabay.com/photo/2016/12/11/12/02/mountains-1899264_960_720.jpg, gallery/03.jpg, gallery/01.jpg, gallery/02.jpg, gallery/04.jpg}" */>}}
+```
+
+{{< carousel images="{https://cdn.pixabay.com/photo/2016/12/11/12/02/mountains-1899264_960_720.jpg,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" interval="2500" */>}}
+```
+
+{{< carousel images="gallery/*" aspectRatio="21-9" interval="2500" >}}
+
+<br/><br/><br/>
+
+## 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.
+
+Refer to the [official Chart.js docs](https://www.chartjs.org/docs/latest/general/) for details on syntax and supported chart types.
+
+**Example:**
+
+```js
+{{</* chart */>}}
+type: 'bar',
+data: {
+  labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'],
+  datasets: [{
+    label: '# of votes',
+    data: [12, 19, 3, 5, 3],
+  }]
+}
+{{</* /chart */>}}
+```
+
+<!-- prettier-ignore-start -->
+{{< chart >}}
+type: 'bar',
+data: {
+  labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'],
+  datasets: [{
+    label: '# of votes',
+    data: [12, 19, 3, 5, 3],
+  }]
+}
+{{< /chart >}}
+<!-- prettier-ignore-end -->
+
+You can see some additional Chart.js examples on the [charts samples]({{< ref "charts" >}}) page.
+
+<br/><br/><br/>
+
+## Figure
+
+Blowfish includes a `figure` shortcode for adding images to content. The shortcode replaces the base Hugo functionality in order to provide additional performance benefits.
+
+When a provided image is a page resource, it will be optimised using Hugo Pipes and scaled in order to provide images appropriate to different device resolutions. If a static asset or URL to an external image is provided, it will be included as-is without any image processing by Hugo.
+
+The `figure` shortcode accepts six parameters:
+
+<!-- prettier-ignore-start -->
+| Parameter | Description                                                                                                                                                                                                                                                                                                                                                                               |
+| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `src`     | **Required.** The local path/filename or URL of the image. When providing a path and filename, the theme will attempt to locate the image using the following lookup order: Firstly, as a [page resource](https://gohugo.io/content-management/page-resources/) bundled with the page; then an asset in the `assets/` directory; then finally, a static image in the `static/` directory. |
+| `alt`     | [Alternative text description](https://moz.com/learn/seo/alt-text) for the image.                                                                                                                                                                                                                                                                                                         |
+| `caption` | Markdown for the image caption, which will be displayed below the image.                                                                                                                                                                                                                                                                                                                  |
+| `class`   | Additional CSS classes to apply to the image.                                                                                                                                                                                                                                                                                                                                             |
+| `href`    | URL that the image should be linked to.                                                                                                                                                                                                                                                                                                                                                   |
+| `target`  | The target attribute for the `href` URL.                                                                                                                                                                                                                                                                                                                                                  |
+| `nozoom`  | `nozoom=true` disables the image "zoom" functionality. This is most useful in combination with a `href` link.                                                                                                                                                                                                                                                                             |
+| `default` | Special parameter to revert to default Hugo `figure` behaviour. Simply provide `default=true` and then use normal [Hugo shortcode syntax](https://gohugo.io/content-management/shortcodes/#figure).                                                                                                                                                                                       |
+<!-- prettier-ignore-end -->
+
+Blowfish also supports automatic conversion of images included using standard Markdown syntax. Simply use the following format and the theme will handle the rest:
+
+```md
+![Alt text](image.jpg "Image caption")
+```
+
+**Example:**
+
+```md
+{{</* figure
+    src="abstract.jpg"
+    alt="Abstract purple artwork"
+    caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)"
+    */>}}
+
+<!-- OR -->
+
+![Abstract purple artwork](abstract.jpg "Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)")
+```
+
+{{< figure src="abstract.jpg" alt="Abstract purple artwork" caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)" >}}
+
+<br/><br/><br/>
+
+## Gallery
+
+`gallery` allows you to showcase multiple images at once, in a responsive manner with more varied and interesting layouts.
+
+In order to add images to the gallery, use `img` tags for each image and add `class="grid-wXX"` in order for the gallery to be able to identify the column width for each image. The widths available by default start at 10% and go all the way to 100% in 5% increments. For example, to set the width to 65%, set the class to `grid-w65`. Additionally, widths for 33% and 66% are also available in order to build galleries with 3 cols. You can also leverage tailwind's responsive indicators to have a reponsive grid.
+
+**Example 1: normal gallery**
+
+```md
+{{</* gallery */>}}
+  <img src="gallery/01.jpg" class="grid-w33" />
+  <img src="gallery/02.jpg" class="grid-w33" />
+  <img src="gallery/03.jpg" class="grid-w33" />
+  <img src="gallery/04.jpg" class="grid-w33" />
+  <img src="gallery/05.jpg" class="grid-w33" />
+  <img src="gallery/06.jpg" class="grid-w33" />
+  <img src="gallery/07.jpg" class="grid-w33" />
+{{</* /gallery */>}}
+```
+
+{{< gallery >}}
+  <img src="gallery/01.jpg" class="grid-w33" />
+  <img src="gallery/02.jpg" class="grid-w33" />
+  <img src="gallery/03.jpg" class="grid-w33" />
+  <img src="gallery/04.jpg" class="grid-w33" />
+  <img src="gallery/05.jpg" class="grid-w33" />
+  <img src="gallery/06.jpg" class="grid-w33" />
+  <img src="gallery/07.jpg" class="grid-w33" />
+{{< /gallery >}}
+
+<br/><br/><br/>
+
+
+**Example 2: responsive gallery**
+
+```md
+{{</* gallery */>}}
+  <img src="gallery/01.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/02.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/03.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/04.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/05.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/06.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/07.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+{{</* /gallery */>}}
+```
+
+{{< gallery >}}
+  <img src="gallery/01.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/02.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/03.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/04.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/05.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/06.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/07.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+{{< /gallery >}}
+
+<br/><br/><br/>
+
+## 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.
+
+<!-- prettier-ignore-start -->
+| Parameter | Description                                           |
+| --------- | ----------------------------------------------------- |
+| `repo`    | [String] github repo in the format of `username/repo` |
+<!-- prettier-ignore-end -->
+
+**Example 1:**
+
+```md
+{{</* github repo="nunocoracao/blowfish" */>}}
+```
+
+{{< github repo="nunocoracao/blowfish" >}}
+
+<br/><br/><br/>
+
+## GitLab Card
+
+`gitlab` allows you to quickly link a GitLab Project (GitLab's jargon for repo). 
+It displays realtime stats about it, such as the number of stars and forks it has.
+Unlike `github` it can't display the main programming language of a project.
+Finally, custom GitLab instance URL can be provided, as long as the `api/v4/projects/` endpoint is available, making this shortcode compatible with most self-hosted / enterprise deployments.
+
+<!-- prettier-ignore-start -->
+| Parameter   | Description                                                             |
+| ----------- | ----------------------------------------------------------------------- |
+| `projectID` | [String] gitlab numeric ProjectID                                       |
+| `baseURL`   | [String] optional gitlab instance URL, default is `https://gitlab.com/` |
+<!-- prettier-ignore-end -->
+
+**Example 1:**
+
+```md
+{{</* gitlab projectID="278964" */>}}
+```
+
+{{< gitlab projectID="278964" >}}
+
+<br/><br/><br/>
+
+## 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.
+
+**Example:**
+
+```md
+{{</* icon "github" */>}}
+```
+
+**Output:** {{< icon "github" >}}
+
+Icons are populated using Hugo pipelines which makes them very flexible. Blowfish includes a number of built-in icons for social, links and other purposes. Check the [icon samples]({{< ref "samples/icons" >}}) page for a full list of supported icons.
+
+Custom icons can be added by providing your own icon assets in the `assets/icons/` directory of your project. The icon can then be referenced in the shortcode by using the SVG filename without the `.svg` extension.
+
+Icons can also be used in partials by calling the [icon partial]({{< ref "partials#icon" >}}).
+
+<br/><br/><br/>
+
+## KaTeX
+
+The `katex` shortcode can be used to add mathematical expressions to article content using the KaTeX package. Refer to the online reference of [supported TeX functions](https://katex.org/docs/supported.html) for the available syntax.
+
+To include mathematical expressions in an article, simply place the shortcode anywhere with the content. It only needs to be included once per article and KaTeX will automatically render any markup on that page. Both inline and block notation are supported.
+
+Inline notation can be generated by wrapping the expression in `\\(` and `\\)` delimiters. Alternatively, block notation can be generated using `$$` delimiters.
+
+**Example:**
+
+```md
+{{</* katex */>}}
+\\(f(a,b,c) = (a^2+b^2+c^2)^3\\)
+```
+
+{{< katex >}}
+\\(f(a,b,c) = (a^2+b^2+c^2)^3\\)
+
+Check out the [mathematical notation samples]({{< ref "mathematical-notation" >}}) page for more examples.
+
+<br/><br/><br/>
+
+
+## Keyword
+
+
+The `keyword` component can be used to visually highlight certain important words or phrases, e.g. professional skills etc. The `keywordList` shortcode can be used to group together multiple `keyword` items. Each item can have the following properties.
+
+
+<!-- prettier-ignore-start -->
+| Parameter | Description                             |
+| --------- | --------------------------------------- |
+| `icon`    | Optional icon to be used in the keyword |
+<!-- prettier-ignore-end -->
+
+The input is written in Markdown so you can format it however you please.
+
+**Example1 :**
+
+```md
+{{</* keyword */>}} Super skill {{</* /keyword */>}}
+```
+
+{{< keyword >}} *Standalone* skill {{< /keyword >}}
+
+**Example2 :**
+
+```md
+{{</* keywordList */>}}
+{{</* keyword icon="github" */>}} Lorem ipsum dolor. {{</* /keyword */>}}
+{{</* keyword icon="code" */>}} **Important** skill {{</* /keyword */>}}
+{{</* /keywordList */>}}
+
+{{</* keyword */>}} *Standalone* skill {{</* /keyword */>}}
+```
+
+{{< keywordList >}}
+{{< keyword icon="github" >}} Lorem ipsum dolor {{< /keyword >}}
+{{< keyword icon="code" >}} **Important** skill {{< /keyword >}}
+{{< /keywordList >}}
+{{< keyword >}} *Standalone* skill {{< /keyword >}}
+
+<br/><br/><br/>
+
+## Lead
+
+`lead` is used to bring emphasis to the start of an article. It can be used to style an introduction, or to call out an important piece of information. Simply wrap any Markdown content in the `lead` shortcode.
+
+**Example:**
+
+```md
+{{</* lead */>}}
+When life gives you lemons, make lemonade.
+{{</* /lead */>}}
+```
+
+{{< lead >}}
+When life gives you lemons, make lemonade.
+{{< /lead >}}
+
+<br/><br/><br/> 
+
+## 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.
+
+<!-- prettier-ignore-start -->
+| Parameter  | Description                                                                                                                                             |
+| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `limit`    | **Required.** the number of recent articles to display.                                                                                                 |
+| `title`    | Optional title for the list, default is `Recent`                                                                                                        |
+| `cardView` | Optional card view enabled for the list, default is `false`                                                                                             |
+| `where`    | The variable to be used for the query of articles e.g. `Type`                                                                                           |
+| `value`    | The value that will need to match the parameter defined in `where` for the query of articles e.g. for `where` == `Type` a valid value could be `sample` |
+
+{{< alert >}}
+The `where` and `value` values are used in the following query `where .Site.RegularPages $where $value` in the code of the shortcode. Check [Hugo docs](https://gohugo.io/variables/page/) to learn more about which parameters are available to use.
+{{</ alert >}}
+
+<!-- prettier-ignore-end -->
+
+**Example #1:**
+
+```md
+{{</* list limit=2 */>}}
+```
+
+{{< list limit=2 >}}
+
+**Example #2:**
+
+```md
+{{</* list title="Samples" cardView=true limit=5 where="Type" value="sample" */>}}
+```
+
+{{< list title="Samples" cardView=true limit=6 where="Type" value="sample">}}
+
+<br/><br/><br/>
+
+## LTR/RTL 
+
+`ltr` and `rtl` allows you to mix your contents. Many RTL language users want to include parts of the content in LTR. Using this shortcode will let you do so, and by leveraging `%` as the outer-most dilemeter in the shortcode [Hugo shortcodes](https://gohugo.io/content-management/shortcodes/#shortcodes-with-markdown), any markdown inside will be rendered normally.
+
+**Example:**
+
+```md
+- This is an markdown list.
+- Its per default a LTR direction
+{{%/* rtl */%}}
+- هذه القائمة باللغة العربية
+- من اليمين الى اليسار
+{{%/* /rtl */%}}
+```
+
+- This is an markdown list.
+- Its per default a LTR direction
+{{% rtl %}}
+- هذه القائمة باللغة العربية
+- من اليمين الى اليسار
+{{% /rtl %}}
+
+<br/><br/><br/>
+
+## Markdown Importer
+
+This shortcode allows you to import markdown files from external sources. This is useful for including content from other repositories or websites without having to copy and paste the content.
+
+<!-- prettier-ignore-start -->
+| Parameter | Description                                             |
+| --------- | ------------------------------------------------------- |
+| `url`     | **Required** URL to an externally hosted markdown file. |
+
+
+<!-- prettier-ignore-end -->
+
+
+**Example:**
+
+```md
+{{</* mdimporter url="https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md" */>}}
+
+```
+
+{{< mdimporter url="https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md" >}}
+
+
+<br/><br/>
+
+## 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.
+
+Simply write your Mermaid syntax within the `mermaid` shortcode and let the plugin do the rest.
+
+Refer to the [official Mermaid docs](https://mermaid-js.github.io/) for details on syntax and supported diagram types.
+
+**Example:**
+
+```md
+{{</* mermaid */>}}
+graph LR;
+A[Lemons]-->B[Lemonade];
+B-->C[Profit]
+{{</* /mermaid */>}}
+```
+
+{{< mermaid >}}
+graph LR;
+A[Lemons]-->B[Lemonade];
+B-->C[Profit]
+{{< /mermaid >}}
+
+You can see some additional Mermaid examples on the [diagrams and flowcharts samples]({{< ref "diagrams-flowcharts" >}}) page.
+
+<br/><br/><br/>
+
+## 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
+{{</* swatches "#64748b" "#3b82f6" "#06b6d4" */>}}
+```
+
+**Output**
+{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
+
+<br/><br/><br/>
+
+## Timeline
+
+The `timeline` creates a visual timeline that can be used in different use-cases, e.g. professional experience, a project's achievements, etc. The `timeline` shortcode relies on the `timelineItem` sub-shortcode to define each item within the main timeline. Each item can have the following properties.
+
+
+<!-- prettier-ignore-start -->
+| Parameter   | Description                                  |
+| ----------- | -------------------------------------------- |
+| `icon`      | the icon to be used in the timeline visuals. |
+| `header`    | header for each entry                        |
+| `badge`     | text to place within the top right badge     |
+| `subheader` | entry's subheader                            |
+
+<!-- prettier-ignore-end -->
+
+**Example:**
+
+```md
+{{</* timeline */>}}
+
+{{</* timelineItem icon="github" header="header" badge="badge test" subheader="subheader" */>}}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus. 
+{{</* /timelineItem */>}}
+
+
+{{</* timelineItem icon="code" header="Another Awesome Header" badge="date - present" subheader="Awesome Subheader" */>}}
+With html code
+<ul>
+  <li>Coffee</li>
+  <li>Tea</li>
+  <li>Milk</li>
+</ul>
+{{</* /timelineItem */>}}
+
+{{</* timelineItem icon="star" header="Shortcodes" badge="AWESOME" */>}}
+With other shortcodes
+{{</* gallery */>}}
+  <img src="gallery/01.jpg" class="grid-w33" />
+  <img src="gallery/02.jpg" class="grid-w33" />
+  <img src="gallery/03.jpg" class="grid-w33" />
+  <img src="gallery/04.jpg" class="grid-w33" />
+  <img src="gallery/05.jpg" class="grid-w33" />
+  <img src="gallery/06.jpg" class="grid-w33" />
+  <img src="gallery/07.jpg" class="grid-w33" />
+{{</* /gallery */>}}
+{{</* /timelineItem */>}}
+
+{{</* /timeline */>}}
+```
+
+
+{{< timeline >}}
+
+{{< timelineItem icon="github" header="header" badge="badge test" subheader="subheader" >}}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus. 
+{{</ timelineItem >}}
+
+
+{{< timelineItem icon="code" header="Another Awesome Header" badge="date - present" subheader="Awesome Subheader">}}
+With html code
+<ul>
+  <li>Coffee</li>
+  <li>Tea</li>
+  <li>Milk</li>
+</ul>
+{{</ timelineItem >}}
+
+{{< timelineItem icon="star" header="Shortcodes" badge="AWESOME" >}}
+With other shortcodes
+{{< gallery >}}
+  <img src="gallery/01.jpg" class="grid-w33" />
+  <img src="gallery/02.jpg" class="grid-w33" />
+  <img src="gallery/03.jpg" class="grid-w33" />
+  <img src="gallery/04.jpg" class="grid-w33" />
+  <img src="gallery/05.jpg" class="grid-w33" />
+  <img src="gallery/06.jpg" class="grid-w33" />
+  <img src="gallery/07.jpg" class="grid-w33" />
+{{< /gallery >}}
+{{</ timelineItem >}}
+
+{{</ timeline >}}
+
+
+<br/><br/><br/>
+
+## 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.
+
+Blowfish implements a sub-set of TypeIt features using a `shortcode`. Write your text within the `typeit` shortcode and use the following parameters to configure the behavior you want.
+
+<!-- prettier-ignore-start -->
+| Parameter          | Description                                                                                                                                        |
+| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `tag`              | [String] `html` tag that will be used to render the strings.                                                                                       |
+| `classList`        | [String] List of `css` classes to apply to the `html` element.                                                                                     |
+| `initialString`    | [String] Initial string that will appear written and will be replaced.                                                                             |
+| `speed`            | [number] Typing speed, measured in milliseconds between each step.                                                                                 |
+| `lifeLike`         | [boolean] Makes the typing pace irregular, as if a real person is doing it.                                                                        |
+| `startDelay`       | [number] The amount of time before the plugin begins typing after being initialized.                                                               |
+| `breakLines`       | [boolean] Whether multiple strings are printed on top of each other (true), or if they're deleted and replaced by each other (false).              |
+| `waitUntilVisible` | [boolean] Determines if the instance will begin when loaded or only when the target element becomes visible in the viewport. The default is `true` |
+| `loop`             | [boolean] Whether your strings will continuously loop after completing                                                                             |
+
+<!-- prettier-ignore-end -->
+
+**Example 1:**
+
+```md
+{{</* typeit */>}}
+Lorem ipsum dolor sit amet 
+{{</* /typeit */>}}
+```
+
+{{< typeit >}}
+Lorem ipsum dolor sit amet
+{{< /typeit >}}
+
+**Example 2:**
+
+```md
+{{</* typeit 
+  tag=h1
+  lifeLike=true
+*/>}}
+Lorem ipsum dolor sit amet, 
+consectetur adipiscing elit. 
+{{</* /typeit */>}}
+```
+
+{{< typeit
+  tag=h1
+  lifeLike=true
+>}}
+Lorem ipsum dolor sit amet,
+consectetur adipiscing elit.
+{{< /typeit >}}
+
+**Example 3:**
+
+```md
+{{</* typeit 
+  tag=h3
+  speed=50
+  breakLines=false
+  loop=true
+*/>}}
+Lorem ipsum dolor sit amet, 
+consectetur adipiscing elit. 
+{{</* /typeit */>}}
+```
+
+{{< typeit
+  tag=h3
+  speed=50
+  breakLines=false
+  loop=true
+>}}
+"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 >}}
+
+
+<br/><br/><br/>
+
+## Youtube Lite
+
+A shortcut to embed youtube videos using the [lite-youtube-embed](https://github.com/paulirish/lite-youtube-embed) library. This library is a lightweight alternative to the standard youtube embeds, and it's designed to be faster and more efficient.
+
+<!-- prettier-ignore-start -->
+| Parameter | Description                         |
+| --------- | ----------------------------------- |
+| `id`      | [String] Youtube video id to embed. |
+| `label`   | [String] Label for the video        |
+<!-- prettier-ignore-end -->
+
+**Example 1:**
+
+```md
+{{</* youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" */>}}
+
+```
+
+{{< youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" >}}

exampleSite/content/docs/shortcodes/index.zh-cn.md

@@ -0,0 +1,754 @@
+---
+title: "Shortcodes"
+date: 2020-08-11
+draft: false
+description: "All the shortcodes available in Blowfish."
+slug: "shortcodes"
+tags: ["shortcodes", "mermaid", "icon", "lead", "docs"]
+series: ["Documentation"]
+series_order: 8
+---
+
+In addition to all the [default Hugo shortcodes](https://gohugo.io/content-management/shortcodes/), Blowfish adds a few extras for additional functionality.
+
+## Alert
+
+`alert` outputs its contents as a stylised message box within your article. It's useful for drawing attention to important information that you don't want the reader to miss.
+
+<!-- prettier-ignore-start -->
+| Parameter   | Description                                                                                                                                                                                  |
+| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `icon`      | **Optional.** the icon to display on the left side.<br>**Default:** `exclaimation triangle icon` (Check out the [icon shortcode](#icon) for more details on using icons.)                    |
+| `iconColor` | **Optional.** the color for the icon in basic CSS style.<br>Can be either hex values (`#FFFFFF`) or color names (`white`)<br>By default chosen based on the current color theme .            |
+| `cardColor` | **Optional.** the color for the card background in basic CSS style.<br>Can be either hex values (`#FFFFFF`) or color names (`white`)<br>By default chosen based on the current color theme . |
+| `textColor` | **Optional.** the color for the text in basic CSS style.<br>Can be either hex values (`#FFFFFF`) or color names (`white`)<br>By default chosen based on the current color theme .            |
+<!-- prettier-ignore-end -->
+
+The input is written in Markdown so you can format it however you please.
+
+**Example 1:** No params
+
+```md
+{{</* alert */>}}
+**Warning!** This action is destructive!
+{{</* /alert */>}}
+```
+
+{{< alert >}}
+**Warning!** This action is destructive!
+{{< /alert >}}
+
+**Example 2:** Unnamed param
+
+```md
+{{</* alert "twitter" */>}}
+Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter.
+{{</* /alert */>}}
+```
+
+{{< alert "twitter" >}}
+Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter.
+{{< /alert >}}
+
+**Example 3:** Named params
+
+```md
+{{</* alert icon="fire" cardColor="#e63946" iconColor="#1d3557" textColor="#f1faee" */>}}
+This is an error!
+{{</* /alert */>}}
+```
+
+{{< alert icon="fire" cardColor="#e63946" iconColor="#1d3557" textColor="#f1faee" >}}
+This is an error!
+{{< /alert >}}
+
+<br/><br/><br/>
+
+## 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.*
+
+<!-- prettier-ignore-start -->
+| Parameter | Description                                              |
+| --------- | -------------------------------------------------------- |
+| `link`    | **Required.** the `.RelPermalink` to the target article. |
+<!-- prettier-ignore-end -->
+
+**Example:**
+
+```md
+{{</* article link="/docs/welcome/" */>}}
+```
+
+{{< article link="/docs/welcome/" >}}
+
+<br/><br/><br/>
+
+## Badge
+
+`badge` outputs a styled badge component which is useful for displaying metadata.
+
+**Example:**
+
+```md
+{{</* badge */>}}
+New article!
+{{</* /badge */>}}
+```
+
+{{< badge >}}
+New article!
+{{< /badge >}}
+
+<br/><br/><br/>
+
+## Button
+
+`button` outputs a styled button component which can be used to highlight a primary action. It has two optional variables `href` and `target` which can be used to specify the URL and target of the link.
+
+**Example:**
+
+```md
+{{</* button href="#button" target="_self" */>}}
+Call to action
+{{</* /button */>}}
+```
+
+{{< button href="#button" target="_self" >}}
+Call to action
+{{< /button >}}
+
+<br/><br/><br/>
+
+## 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 one of the predefined aspect ratios of `16:9`, `21:9` or `32:9`.
+
+<!-- prettier-ignore-start -->
+| Parameter     | Description                                                                                                       |
+| ------------- | ----------------------------------------------------------------------------------------------------------------- |
+| `images`      | **Required.** A regex string to match image names or URLs.                                                        |
+| `aspectRatio` | **Optional.** The aspect ratio for the carousel. Either `16-9`, `21-9` or `32-9`. It is set to `16-9` by default. |
+| `interval`    | **Optional.** The interval for the auto-scrooling, specified in milliseconds. Defaults to `2000` (2s)             |
+<!-- prettier-ignore-end -->
+
+**Example 1:** 16:9 aspect ratio and verbose list of images
+
+```md
+{{</* carousel images="{https://cdn.pixabay.com/photo/2016/12/11/12/02/mountains-1899264_960_720.jpg, gallery/03.jpg, gallery/01.jpg, gallery/02.jpg, gallery/04.jpg}" */>}}
+```
+
+{{< carousel images="{https://cdn.pixabay.com/photo/2016/12/11/12/02/mountains-1899264_960_720.jpg,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" interval="2500" */>}}
+```
+
+{{< carousel images="gallery/*" aspectRatio="21-9" interval="2500" >}}
+
+<br/><br/><br/>
+
+## 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.
+
+Refer to the [official Chart.js docs](https://www.chartjs.org/docs/latest/general/) for details on syntax and supported chart types.
+
+**Example:**
+
+```js
+{{</* chart */>}}
+type: 'bar',
+data: {
+  labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'],
+  datasets: [{
+    label: '# of votes',
+    data: [12, 19, 3, 5, 3],
+  }]
+}
+{{</* /chart */>}}
+```
+
+<!-- prettier-ignore-start -->
+{{< chart >}}
+type: 'bar',
+data: {
+  labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'],
+  datasets: [{
+    label: '# of votes',
+    data: [12, 19, 3, 5, 3],
+  }]
+}
+{{< /chart >}}
+<!-- prettier-ignore-end -->
+
+You can see some additional Chart.js examples on the [charts samples]({{< ref "charts" >}}) page.
+
+<br/><br/><br/>
+
+## Figure
+
+Blowfish includes a `figure` shortcode for adding images to content. The shortcode replaces the base Hugo functionality in order to provide additional performance benefits.
+
+When a provided image is a page resource, it will be optimised using Hugo Pipes and scaled in order to provide images appropriate to different device resolutions. If a static asset or URL to an external image is provided, it will be included as-is without any image processing by Hugo.
+
+The `figure` shortcode accepts six parameters:
+
+<!-- prettier-ignore-start -->
+| Parameter | Description                                                                                                                                                                                                                                                                                                                                                                               |
+| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `src`     | **Required.** The local path/filename or URL of the image. When providing a path and filename, the theme will attempt to locate the image using the following lookup order: Firstly, as a [page resource](https://gohugo.io/content-management/page-resources/) bundled with the page; then an asset in the `assets/` directory; then finally, a static image in the `static/` directory. |
+| `alt`     | [Alternative text description](https://moz.com/learn/seo/alt-text) for the image.                                                                                                                                                                                                                                                                                                         |
+| `caption` | Markdown for the image caption, which will be displayed below the image.                                                                                                                                                                                                                                                                                                                  |
+| `class`   | Additional CSS classes to apply to the image.                                                                                                                                                                                                                                                                                                                                             |
+| `href`    | URL that the image should be linked to.                                                                                                                                                                                                                                                                                                                                                   |
+| `target`  | The target attribute for the `href` URL.                                                                                                                                                                                                                                                                                                                                                  |
+| `nozoom`  | `nozoom=true` disables the image "zoom" functionality. This is most useful in combination with a `href` link.                                                                                                                                                                                                                                                                             |
+| `default` | Special parameter to revert to default Hugo `figure` behaviour. Simply provide `default=true` and then use normal [Hugo shortcode syntax](https://gohugo.io/content-management/shortcodes/#figure).                                                                                                                                                                                       |
+<!-- prettier-ignore-end -->
+
+Blowfish also supports automatic conversion of images included using standard Markdown syntax. Simply use the following format and the theme will handle the rest:
+
+```md
+![Alt text](image.jpg "Image caption")
+```
+
+**Example:**
+
+```md
+{{</* figure
+    src="abstract.jpg"
+    alt="Abstract purple artwork"
+    caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)"
+    */>}}
+
+<!-- OR -->
+
+![Abstract purple artwork](abstract.jpg "Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)")
+```
+
+{{< figure src="abstract.jpg" alt="Abstract purple artwork" caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)" >}}
+
+<br/><br/><br/>
+
+## Gallery
+
+`gallery` allows you to showcase multiple images at once, in a responsive manner with more varied and interesting layouts.
+
+In order to add images to the gallery, use `img` tags for each image and add `class="grid-wXX"` in order for the gallery to be able to identify the column width for each image. The widths available by default start at 10% and go all the way to 100% in 5% increments. For example, to set the width to 65%, set the class to `grid-w65`. Additionally, widths for 33% and 66% are also available in order to build galleries with 3 cols. You can also leverage tailwind's responsive indicators to have a reponsive grid.
+
+**Example 1: normal gallery**
+
+```md
+{{</* gallery */>}}
+  <img src="gallery/01.jpg" class="grid-w33" />
+  <img src="gallery/02.jpg" class="grid-w33" />
+  <img src="gallery/03.jpg" class="grid-w33" />
+  <img src="gallery/04.jpg" class="grid-w33" />
+  <img src="gallery/05.jpg" class="grid-w33" />
+  <img src="gallery/06.jpg" class="grid-w33" />
+  <img src="gallery/07.jpg" class="grid-w33" />
+{{</* /gallery */>}}
+```
+
+{{< gallery >}}
+  <img src="gallery/01.jpg" class="grid-w33" />
+  <img src="gallery/02.jpg" class="grid-w33" />
+  <img src="gallery/03.jpg" class="grid-w33" />
+  <img src="gallery/04.jpg" class="grid-w33" />
+  <img src="gallery/05.jpg" class="grid-w33" />
+  <img src="gallery/06.jpg" class="grid-w33" />
+  <img src="gallery/07.jpg" class="grid-w33" />
+{{< /gallery >}}
+
+<br/><br/><br/>
+
+
+**Example 2: responsive gallery**
+
+```md
+{{</* gallery */>}}
+  <img src="gallery/01.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/02.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/03.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/04.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/05.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/06.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/07.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+{{</* /gallery */>}}
+```
+
+{{< gallery >}}
+  <img src="gallery/01.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/02.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/03.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/04.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/05.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/06.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/07.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+{{< /gallery >}}
+
+<br/><br/><br/>
+
+## 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.
+
+<!-- prettier-ignore-start -->
+| Parameter | Description                                           |
+| --------- | ----------------------------------------------------- |
+| `repo`    | [String] github repo in the format of `username/repo` |
+<!-- prettier-ignore-end -->
+
+**Example 1:**
+
+```md
+{{</* github repo="nunocoracao/blowfish" */>}}
+```
+
+{{< github repo="nunocoracao/blowfish" >}}
+
+<br/><br/><br/>
+
+## GitLab Card
+
+`gitlab` allows you to quickly link a GitLab Project (GitLab's jargon for repo). 
+It displays realtime stats about it, such as the number of stars and forks it has.
+Unlike `github` it can't display the main programming language of a project.
+Finally, custom GitLab instance URL can be provided, as long as the `api/v4/projects/` endpoint is available, making this shortcode compatible with most self-hosted / enterprise deployments.
+
+<!-- prettier-ignore-start -->
+| Parameter   | Description                                                             |
+| ----------- | ----------------------------------------------------------------------- |
+| `projectID` | [String] gitlab numeric ProjectID                                       |
+| `baseURL`   | [String] optional gitlab instance URL, default is `https://gitlab.com/` |
+<!-- prettier-ignore-end -->
+
+**Example 1:**
+
+```md
+{{</* gitlab projectID="278964" */>}}
+```
+
+{{< gitlab projectID="278964" >}}
+
+<br/><br/><br/>
+
+## 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.
+
+**Example:**
+
+```md
+{{</* icon "github" */>}}
+```
+
+**Output:** {{< icon "github" >}}
+
+Icons are populated using Hugo pipelines which makes them very flexible. Blowfish includes a number of built-in icons for social, links and other purposes. Check the [icon samples]({{< ref "samples/icons" >}}) page for a full list of supported icons.
+
+Custom icons can be added by providing your own icon assets in the `assets/icons/` directory of your project. The icon can then be referenced in the shortcode by using the SVG filename without the `.svg` extension.
+
+Icons can also be used in partials by calling the [icon partial]({{< ref "partials#icon" >}}).
+
+<br/><br/><br/>
+
+## KaTeX
+
+The `katex` shortcode can be used to add mathematical expressions to article content using the KaTeX package. Refer to the online reference of [supported TeX functions](https://katex.org/docs/supported.html) for the available syntax.
+
+To include mathematical expressions in an article, simply place the shortcode anywhere with the content. It only needs to be included once per article and KaTeX will automatically render any markup on that page. Both inline and block notation are supported.
+
+Inline notation can be generated by wrapping the expression in `\\(` and `\\)` delimiters. Alternatively, block notation can be generated using `$$` delimiters.
+
+**Example:**
+
+```md
+{{</* katex */>}}
+\\(f(a,b,c) = (a^2+b^2+c^2)^3\\)
+```
+
+{{< katex >}}
+\\(f(a,b,c) = (a^2+b^2+c^2)^3\\)
+
+Check out the [mathematical notation samples]({{< ref "mathematical-notation" >}}) page for more examples.
+
+<br/><br/><br/>
+
+
+## Keyword
+
+
+The `keyword` component can be used to visually highlight certain important words or phrases, e.g. professional skills etc. The `keywordList` shortcode can be used to group together multiple `keyword` items. Each item can have the following properties.
+
+
+<!-- prettier-ignore-start -->
+| Parameter | Description                             |
+| --------- | --------------------------------------- |
+| `icon`    | Optional icon to be used in the keyword |
+<!-- prettier-ignore-end -->
+
+The input is written in Markdown so you can format it however you please.
+
+**Example1 :**
+
+```md
+{{</* keyword */>}} Super skill {{</* /keyword */>}}
+```
+
+{{< keyword >}} *Standalone* skill {{< /keyword >}}
+
+**Example2 :**
+
+```md
+{{</* keywordList */>}}
+{{</* keyword icon="github" */>}} Lorem ipsum dolor. {{</* /keyword */>}}
+{{</* keyword icon="code" */>}} **Important** skill {{</* /keyword */>}}
+{{</* /keywordList */>}}
+
+{{</* keyword */>}} *Standalone* skill {{</* /keyword */>}}
+```
+
+{{< keywordList >}}
+{{< keyword icon="github" >}} Lorem ipsum dolor {{< /keyword >}}
+{{< keyword icon="code" >}} **Important** skill {{< /keyword >}}
+{{< /keywordList >}}
+{{< keyword >}} *Standalone* skill {{< /keyword >}}
+
+<br/><br/><br/>
+
+## Lead
+
+`lead` is used to bring emphasis to the start of an article. It can be used to style an introduction, or to call out an important piece of information. Simply wrap any Markdown content in the `lead` shortcode.
+
+**Example:**
+
+```md
+{{</* lead */>}}
+When life gives you lemons, make lemonade.
+{{</* /lead */>}}
+```
+
+{{< lead >}}
+When life gives you lemons, make lemonade.
+{{< /lead >}}
+
+<br/><br/><br/> 
+
+## 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.
+
+<!-- prettier-ignore-start -->
+| Parameter  | Description                                                                                                                                             |
+| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `limit`    | **Required.** the number of recent articles to display.                                                                                                 |
+| `title`    | Optional title for the list, default is `Recent`                                                                                                        |
+| `cardView` | Optional card view enabled for the list, default is `false`                                                                                             |
+| `where`    | The variable to be used for the query of articles e.g. `Type`                                                                                           |
+| `value`    | The value that will need to match the parameter defined in `where` for the query of articles e.g. for `where` == `Type` a valid value could be `sample` |
+
+{{< alert >}}
+The `where` and `value` values are used in the following query `where .Site.RegularPages $where $value` in the code of the shortcode. Check [Hugo docs](https://gohugo.io/variables/page/) to learn more about which parameters are available to use.
+{{</ alert >}}
+
+<!-- prettier-ignore-end -->
+
+**Example #1:**
+
+```md
+{{</* list limit=2 */>}}
+```
+
+{{< list limit=2 >}}
+
+**Example #2:**
+
+```md
+{{</* list title="Samples" cardView=true limit=5 where="Type" value="sample" */>}}
+```
+
+{{< list title="Samples" cardView=true limit=6 where="Type" value="sample">}}
+
+<br/><br/><br/>
+
+## LTR/RTL 
+
+`ltr` and `rtl` allows you to mix your contents. Many RTL language users want to include parts of the content in LTR. Using this shortcode will let you do so, and by leveraging `%` as the outer-most dilemeter in the shortcode [Hugo shortcodes](https://gohugo.io/content-management/shortcodes/#shortcodes-with-markdown), any markdown inside will be rendered normally.
+
+**Example:**
+
+```md
+- This is an markdown list.
+- Its per default a LTR direction
+{{%/* rtl */%}}
+- هذه القائمة باللغة العربية
+- من اليمين الى اليسار
+{{%/* /rtl */%}}
+```
+
+- This is an markdown list.
+- Its per default a LTR direction
+{{% rtl %}}
+- هذه القائمة باللغة العربية
+- من اليمين الى اليسار
+{{% /rtl %}}
+
+<br/><br/><br/>
+
+## Markdown Importer
+
+This shortcode allows you to import markdown files from external sources. This is useful for including content from other repositories or websites without having to copy and paste the content.
+
+<!-- prettier-ignore-start -->
+| Parameter | Description                                             |
+| --------- | ------------------------------------------------------- |
+| `url`     | **Required** URL to an externally hosted markdown file. |
+
+
+<!-- prettier-ignore-end -->
+
+
+**Example:**
+
+```md
+{{</* mdimporter url="https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md" */>}}
+
+```
+
+{{< mdimporter url="https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md" >}}
+
+
+<br/><br/>
+
+## 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.
+
+Simply write your Mermaid syntax within the `mermaid` shortcode and let the plugin do the rest.
+
+Refer to the [official Mermaid docs](https://mermaid-js.github.io/) for details on syntax and supported diagram types.
+
+**Example:**
+
+```md
+{{</* mermaid */>}}
+graph LR;
+A[Lemons]-->B[Lemonade];
+B-->C[Profit]
+{{</* /mermaid */>}}
+```
+
+{{< mermaid >}}
+graph LR;
+A[Lemons]-->B[Lemonade];
+B-->C[Profit]
+{{< /mermaid >}}
+
+You can see some additional Mermaid examples on the [diagrams and flowcharts samples]({{< ref "diagrams-flowcharts" >}}) page.
+
+<br/><br/><br/>
+
+## 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
+{{</* swatches "#64748b" "#3b82f6" "#06b6d4" */>}}
+```
+
+**Output**
+{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
+
+<br/><br/><br/>
+
+## Timeline
+
+The `timeline` creates a visual timeline that can be used in different use-cases, e.g. professional experience, a project's achievements, etc. The `timeline` shortcode relies on the `timelineItem` sub-shortcode to define each item within the main timeline. Each item can have the following properties.
+
+
+<!-- prettier-ignore-start -->
+| Parameter   | Description                                  |
+| ----------- | -------------------------------------------- |
+| `icon`      | the icon to be used in the timeline visuals. |
+| `header`    | header for each entry                        |
+| `badge`     | text to place within the top right badge     |
+| `subheader` | entry's subheader                            |
+
+<!-- prettier-ignore-end -->
+
+**Example:**
+
+```md
+{{</* timeline */>}}
+
+{{</* timelineItem icon="github" header="header" badge="badge test" subheader="subheader" */>}}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus. 
+{{</* /timelineItem */>}}
+
+
+{{</* timelineItem icon="code" header="Another Awesome Header" badge="date - present" subheader="Awesome Subheader" */>}}
+With html code
+<ul>
+  <li>Coffee</li>
+  <li>Tea</li>
+  <li>Milk</li>
+</ul>
+{{</* /timelineItem */>}}
+
+{{</* timelineItem icon="star" header="Shortcodes" badge="AWESOME" */>}}
+With other shortcodes
+{{</* gallery */>}}
+  <img src="gallery/01.jpg" class="grid-w33" />
+  <img src="gallery/02.jpg" class="grid-w33" />
+  <img src="gallery/03.jpg" class="grid-w33" />
+  <img src="gallery/04.jpg" class="grid-w33" />
+  <img src="gallery/05.jpg" class="grid-w33" />
+  <img src="gallery/06.jpg" class="grid-w33" />
+  <img src="gallery/07.jpg" class="grid-w33" />
+{{</* /gallery */>}}
+{{</* /timelineItem */>}}
+
+{{</* /timeline */>}}
+```
+
+
+{{< timeline >}}
+
+{{< timelineItem icon="github" header="header" badge="badge test" subheader="subheader" >}}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus. 
+{{</ timelineItem >}}
+
+
+{{< timelineItem icon="code" header="Another Awesome Header" badge="date - present" subheader="Awesome Subheader">}}
+With html code
+<ul>
+  <li>Coffee</li>
+  <li>Tea</li>
+  <li>Milk</li>
+</ul>
+{{</ timelineItem >}}
+
+{{< timelineItem icon="star" header="Shortcodes" badge="AWESOME" >}}
+With other shortcodes
+{{< gallery >}}
+  <img src="gallery/01.jpg" class="grid-w33" />
+  <img src="gallery/02.jpg" class="grid-w33" />
+  <img src="gallery/03.jpg" class="grid-w33" />
+  <img src="gallery/04.jpg" class="grid-w33" />
+  <img src="gallery/05.jpg" class="grid-w33" />
+  <img src="gallery/06.jpg" class="grid-w33" />
+  <img src="gallery/07.jpg" class="grid-w33" />
+{{< /gallery >}}
+{{</ timelineItem >}}
+
+{{</ timeline >}}
+
+
+<br/><br/><br/>
+
+## 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.
+
+Blowfish implements a sub-set of TypeIt features using a `shortcode`. Write your text within the `typeit` shortcode and use the following parameters to configure the behavior you want.
+
+<!-- prettier-ignore-start -->
+| Parameter          | Description                                                                                                                                        |
+| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `tag`              | [String] `html` tag that will be used to render the strings.                                                                                       |
+| `classList`        | [String] List of `css` classes to apply to the `html` element.                                                                                     |
+| `initialString`    | [String] Initial string that will appear written and will be replaced.                                                                             |
+| `speed`            | [number] Typing speed, measured in milliseconds between each step.                                                                                 |
+| `lifeLike`         | [boolean] Makes the typing pace irregular, as if a real person is doing it.                                                                        |
+| `startDelay`       | [number] The amount of time before the plugin begins typing after being initialized.                                                               |
+| `breakLines`       | [boolean] Whether multiple strings are printed on top of each other (true), or if they're deleted and replaced by each other (false).              |
+| `waitUntilVisible` | [boolean] Determines if the instance will begin when loaded or only when the target element becomes visible in the viewport. The default is `true` |
+| `loop`             | [boolean] Whether your strings will continuously loop after completing                                                                             |
+
+<!-- prettier-ignore-end -->
+
+**Example 1:**
+
+```md
+{{</* typeit */>}}
+Lorem ipsum dolor sit amet 
+{{</* /typeit */>}}
+```
+
+{{< typeit >}}
+Lorem ipsum dolor sit amet
+{{< /typeit >}}
+
+**Example 2:**
+
+```md
+{{</* typeit 
+  tag=h1
+  lifeLike=true
+*/>}}
+Lorem ipsum dolor sit amet, 
+consectetur adipiscing elit. 
+{{</* /typeit */>}}
+```
+
+{{< typeit
+  tag=h1
+  lifeLike=true
+>}}
+Lorem ipsum dolor sit amet,
+consectetur adipiscing elit.
+{{< /typeit >}}
+
+**Example 3:**
+
+```md
+{{</* typeit 
+  tag=h3
+  speed=50
+  breakLines=false
+  loop=true
+*/>}}
+Lorem ipsum dolor sit amet, 
+consectetur adipiscing elit. 
+{{</* /typeit */>}}
+```
+
+{{< typeit
+  tag=h3
+  speed=50
+  breakLines=false
+  loop=true
+>}}
+"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 >}}
+
+
+<br/><br/><br/>
+
+## Youtube Lite
+
+A shortcut to embed youtube videos using the [lite-youtube-embed](https://github.com/paulirish/lite-youtube-embed) library. This library is a lightweight alternative to the standard youtube embeds, and it's designed to be faster and more efficient.
+
+<!-- prettier-ignore-start -->
+| Parameter | Description                         |
+| --------- | ----------------------------------- |
+| `id`      | [String] Youtube video id to embed. |
+| `label`   | [String] Label for the video        |
+<!-- prettier-ignore-end -->
+
+**Example 1:**
+
+```md
+{{</* youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" */>}}
+
+```
+
+{{< youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" >}}

exampleSite/content/docs/thumbnails/index.it.md

@@ -0,0 +1,46 @@
+---
+title: "Thumbnails"
+date: 2020-08-10
+draft: false
+description: "Turn on thumbnails for your articles."
+slug: "thumbnails"
+tags: ["thumbnail", "config", "docs"]
+series: ["Documentation"]
+series_order: 6
+---
+
+## Thumbnails
+
+Blowfish was enhanced in order to make it easy to add visual support to your posts. To do so, you just need to place an image file (almost all formats are supported but we recommend `.png` or `.jpg`) that starts with `feature*` inside your article's main directory, as shown in the example below.
+
+```shell
+content
+└── awesome_article
+    ├── index.md
+    └── featured.png
+```
+
+This will tell Blowfish that this article has a feature image that can be used both as a thumbnail across your website as well as for <a target="_blank" href="https://oembed.com/">oEmbed</a> cards across social platforms. 
+
+## Folder Structure
+
+If you are using single `.md` files for your articles and have a file structure similar to this:
+
+```shell
+content
+└── awesome_article.md
+```
+
+You need to change it from a single Markdown file into a folder. Create a directory with the same name of the article, inside create a `index.md` file. You'll get a structure similar to what's below. 
+
+```shell
+content
+└── awesome_article
+    └── index.md
+```
+
+Then you just need to add an image like explained earlier. If you want to see a sample of this, you can consult [this sample]({{< ref "thumbnail_sample" >}}).
+
+## Hero Images
+
+Thumbnails will be used by default as hero images within each article. Use the global `article.showHero` or the front-matter parameter `showHero` to control this feature across the entire site or for each specific post. If you want to override the style of the hero image, you can create a file called `hero.html` in `./layouts/partials/` that will override the original partial from the theme.

exampleSite/content/docs/thumbnails/index.ja.md

@@ -0,0 +1,46 @@
+---
+title: "Thumbnails"
+date: 2020-08-10
+draft: false
+description: "Turn on thumbnails for your articles."
+slug: "thumbnails"
+tags: ["thumbnail", "config", "docs"]
+series: ["Documentation"]
+series_order: 6
+---
+
+## Thumbnails
+
+Blowfish was enhanced in order to make it easy to add visual support to your posts. To do so, you just need to place an image file (almost all formats are supported but we recommend `.png` or `.jpg`) that starts with `feature*` inside your article's main directory, as shown in the example below.
+
+```shell
+content
+└── awesome_article
+    ├── index.md
+    └── featured.png
+```
+
+This will tell Blowfish that this article has a feature image that can be used both as a thumbnail across your website as well as for <a target="_blank" href="https://oembed.com/">oEmbed</a> cards across social platforms. 
+
+## Folder Structure
+
+If you are using single `.md` files for your articles and have a file structure similar to this:
+
+```shell
+content
+└── awesome_article.md
+```
+
+You need to change it from a single Markdown file into a folder. Create a directory with the same name of the article, inside create a `index.md` file. You'll get a structure similar to what's below. 
+
+```shell
+content
+└── awesome_article
+    └── index.md
+```
+
+Then you just need to add an image like explained earlier. If you want to see a sample of this, you can consult [this sample]({{< ref "thumbnail_sample" >}}).
+
+## Hero Images
+
+Thumbnails will be used by default as hero images within each article. Use the global `article.showHero` or the front-matter parameter `showHero` to control this feature across the entire site or for each specific post. If you want to override the style of the hero image, you can create a file called `hero.html` in `./layouts/partials/` that will override the original partial from the theme.

exampleSite/content/docs/thumbnails/index.zh-cn.md

@@ -0,0 +1,46 @@
+---
+title: "Thumbnails"
+date: 2020-08-10
+draft: false
+description: "Turn on thumbnails for your articles."
+slug: "thumbnails"
+tags: ["thumbnail", "config", "docs"]
+series: ["Documentation"]
+series_order: 6
+---
+
+## Thumbnails
+
+Blowfish was enhanced in order to make it easy to add visual support to your posts. To do so, you just need to place an image file (almost all formats are supported but we recommend `.png` or `.jpg`) that starts with `feature*` inside your article's main directory, as shown in the example below.
+
+```shell
+content
+└── awesome_article
+    ├── index.md
+    └── featured.png
+```
+
+This will tell Blowfish that this article has a feature image that can be used both as a thumbnail across your website as well as for <a target="_blank" href="https://oembed.com/">oEmbed</a> cards across social platforms. 
+
+## Folder Structure
+
+If you are using single `.md` files for your articles and have a file structure similar to this:
+
+```shell
+content
+└── awesome_article.md
+```
+
+You need to change it from a single Markdown file into a folder. Create a directory with the same name of the article, inside create a `index.md` file. You'll get a structure similar to what's below. 
+
+```shell
+content
+└── awesome_article
+    └── index.md
+```
+
+Then you just need to add an image like explained earlier. If you want to see a sample of this, you can consult [this sample]({{< ref "thumbnail_sample" >}}).
+
+## Hero Images
+
+Thumbnails will be used by default as hero images within each article. Use the global `article.showHero` or the front-matter parameter `showHero` to control this feature across the entire site or for each specific post. If you want to override the style of the hero image, you can create a file called `hero.html` in `./layouts/partials/` that will override the original partial from the theme.

exampleSite/content/docs/welcome/index.it.md

@@ -0,0 +1,79 @@
+---
+title: "Welcome to Blowfish"
+date: 2022-01-19
+draft: false
+description: "Discover what's new in Blowfish version 2.0."
+tags: ["new", "docs"]
+series: ["Documentation"]
+series_order: 1
+---
+
+{{< lead >}}
+Blowfish is packed with tons of features.
+{{< /lead >}}
+
+The original aim of Blowfish was to develop a theme that was simple and lightweight. The theme is a fork of <a target="_blank" href="https://github.com/nunocoracao/congo">Congo</a> and expands its initial vision.
+
+## Tailwind CSS 3.0
+
+Tailwind CSS is at the heart of Blowfish and this release contains the very latest [Tailwind CSS version 3](https://tailwindcss.com/blog/tailwindcss-v3). It brings with it performance optimisations and support for some great new CSS features.
+
+{{< youtube "TmWIrBPE6Bc" >}}
+
+## Multilingual support
+
+A highly requested feature, Blowfish is now multilingual! If you publish your content in multiple languages, the site will be built with all the translations available.
+
+<div class="text-2xl text-center" style="font-size: 2.8rem">:gb: :de: :fr: :es: :cn: :brazil: :tr: :bangladesh:</div>
+
+Thanks to submissions from the community, Blowfish has already been translated into [twenty-six languages](https://github.com/nunocoracao/blowfish/tree/main/i18n) with more to be added over time. By the way, [pull requests](https://github.com/nunocoracao/blowfish/pulls) for new languages are always welcome!
+
+## RTL language support
+
+One of the benefits of the new Tailwind and Multilingual features is the ability to add RTL language support. When enabled, the entire site will reflow content from right-to-left. Every element in the theme has been restyled to ensure it looks great in this mode which aids authors who wish to generate content in RTL languages.
+
+RTL is controlled on a per-language basis so you can mix and match both RTL and LTR content in your projects and the theme will respond accordingly.
+
+## Automatic image resizing
+
+A big change in Blowfish 2.0 is the addition of automatic image resizing. Using the power of Hugo Pipes, images in Markdown content are now automatically scaled to different output sizes. These are then presented using HTML `srcset` attributes enabling optimised file sizes to be served to your site visitors.
+
+![](image-resizing.png)
+
+```html
+<!-- Markdown: ![My image](image.jpg) -->
+<img
+  srcset="
+    /image_320x0_resize_q75_box.jpg 320w,
+    /image_635x0_resize_q75_box.jpg 635w,
+    /image_1024x0_resize_q75_box.jpg 1024w,
+    /image_1270x0_resize_q75_box.jpg 2x"
+  src="/image_635x0_resize_q75_box.jpg"
+  alt="My image"
+/>
+```
+
+Best of all there's nothing you need to change! Simply insert standard Markdown image syntax and let the theme do the rest. If you want a little more control, the `figure` shortcode has been completely rewritten to provide the same resizing benefits.
+
+
+## Site search
+
+Powered by [Fuse.js](https://fusejs.io), site search allows visitors to quickly and easily find your content. All searches are performed client-side meaning there's nothing to configure on the server and queries are performed super fast. Simply enable the feature in your site configuration and you're all set. Oh, and it also supports full keyboard navigation!
+
+## Tables of contents
+
+A highly requested feature, Blowfish now supports tables of contents on article pages. You can see it in action on this page. The contents are fully responsive and will adjust to take advantage of the space available at different screen resolutions.
+
+Available on a global or per article basis, the table of contents can be fully customised using standard Hugo configuration values, allowing you to adjust the behaviour to suit your project.
+
+## Accessibility improvements
+
+From adding ARIA descriptions to more items or simply adjusting the contrast of certain text elements, this release is the most accessible yet.
+
+Version 2 also introduces "skip to content" and "scroll to top" links that enable quick navigation. There's also keyboard shortcuts for enabling items like search without reaching for the mouse.
+
+The new image resizing features also provide full control over `alt` and `title` elements enabling an accessible experience for all visitors.
+
+## A whole lot more
+
+There's countless other features to explore. From being able to display taxonomies on articles and list pages, to using the new `headline` author parameter to customise your homepage. There's also improved JSON-LD structured data which further optimises SEO performance. 

exampleSite/content/docs/welcome/index.ja.md

@@ -0,0 +1,79 @@
+---
+title: "Welcome to Blowfish"
+date: 2022-01-19
+draft: false
+description: "Discover what's new in Blowfish version 2.0."
+tags: ["new", "docs"]
+series: ["Documentation"]
+series_order: 1
+---
+
+{{< lead >}}
+Blowfish is packed with tons of features.
+{{< /lead >}}
+
+The original aim of Blowfish was to develop a theme that was simple and lightweight. The theme is a fork of <a target="_blank" href="https://github.com/nunocoracao/congo">Congo</a> and expands its initial vision.
+
+## Tailwind CSS 3.0
+
+Tailwind CSS is at the heart of Blowfish and this release contains the very latest [Tailwind CSS version 3](https://tailwindcss.com/blog/tailwindcss-v3). It brings with it performance optimisations and support for some great new CSS features.
+
+{{< youtube "TmWIrBPE6Bc" >}}
+
+## Multilingual support
+
+A highly requested feature, Blowfish is now multilingual! If you publish your content in multiple languages, the site will be built with all the translations available.
+
+<div class="text-2xl text-center" style="font-size: 2.8rem">:gb: :de: :fr: :es: :cn: :brazil: :tr: :bangladesh:</div>
+
+Thanks to submissions from the community, Blowfish has already been translated into [twenty-six languages](https://github.com/nunocoracao/blowfish/tree/main/i18n) with more to be added over time. By the way, [pull requests](https://github.com/nunocoracao/blowfish/pulls) for new languages are always welcome!
+
+## RTL language support
+
+One of the benefits of the new Tailwind and Multilingual features is the ability to add RTL language support. When enabled, the entire site will reflow content from right-to-left. Every element in the theme has been restyled to ensure it looks great in this mode which aids authors who wish to generate content in RTL languages.
+
+RTL is controlled on a per-language basis so you can mix and match both RTL and LTR content in your projects and the theme will respond accordingly.
+
+## Automatic image resizing
+
+A big change in Blowfish 2.0 is the addition of automatic image resizing. Using the power of Hugo Pipes, images in Markdown content are now automatically scaled to different output sizes. These are then presented using HTML `srcset` attributes enabling optimised file sizes to be served to your site visitors.
+
+![](image-resizing.png)
+
+```html
+<!-- Markdown: ![My image](image.jpg) -->
+<img
+  srcset="
+    /image_320x0_resize_q75_box.jpg 320w,
+    /image_635x0_resize_q75_box.jpg 635w,
+    /image_1024x0_resize_q75_box.jpg 1024w,
+    /image_1270x0_resize_q75_box.jpg 2x"
+  src="/image_635x0_resize_q75_box.jpg"
+  alt="My image"
+/>
+```
+
+Best of all there's nothing you need to change! Simply insert standard Markdown image syntax and let the theme do the rest. If you want a little more control, the `figure` shortcode has been completely rewritten to provide the same resizing benefits.
+
+
+## Site search
+
+Powered by [Fuse.js](https://fusejs.io), site search allows visitors to quickly and easily find your content. All searches are performed client-side meaning there's nothing to configure on the server and queries are performed super fast. Simply enable the feature in your site configuration and you're all set. Oh, and it also supports full keyboard navigation!
+
+## Tables of contents
+
+A highly requested feature, Blowfish now supports tables of contents on article pages. You can see it in action on this page. The contents are fully responsive and will adjust to take advantage of the space available at different screen resolutions.
+
+Available on a global or per article basis, the table of contents can be fully customised using standard Hugo configuration values, allowing you to adjust the behaviour to suit your project.
+
+## Accessibility improvements
+
+From adding ARIA descriptions to more items or simply adjusting the contrast of certain text elements, this release is the most accessible yet.
+
+Version 2 also introduces "skip to content" and "scroll to top" links that enable quick navigation. There's also keyboard shortcuts for enabling items like search without reaching for the mouse.
+
+The new image resizing features also provide full control over `alt` and `title` elements enabling an accessible experience for all visitors.
+
+## A whole lot more
+
+There's countless other features to explore. From being able to display taxonomies on articles and list pages, to using the new `headline` author parameter to customise your homepage. There's also improved JSON-LD structured data which further optimises SEO performance. 

exampleSite/content/docs/welcome/index.zh-cn.md

@@ -0,0 +1,79 @@
+---
+title: "Welcome to Blowfish"
+date: 2022-01-19
+draft: false
+description: "Discover what's new in Blowfish version 2.0."
+tags: ["new", "docs"]
+series: ["Documentation"]
+series_order: 1
+---
+
+{{< lead >}}
+Blowfish is packed with tons of features.
+{{< /lead >}}
+
+The original aim of Blowfish was to develop a theme that was simple and lightweight. The theme is a fork of <a target="_blank" href="https://github.com/nunocoracao/congo">Congo</a> and expands its initial vision.
+
+## Tailwind CSS 3.0
+
+Tailwind CSS is at the heart of Blowfish and this release contains the very latest [Tailwind CSS version 3](https://tailwindcss.com/blog/tailwindcss-v3). It brings with it performance optimisations and support for some great new CSS features.
+
+{{< youtube "TmWIrBPE6Bc" >}}
+
+## Multilingual support
+
+A highly requested feature, Blowfish is now multilingual! If you publish your content in multiple languages, the site will be built with all the translations available.
+
+<div class="text-2xl text-center" style="font-size: 2.8rem">:gb: :de: :fr: :es: :cn: :brazil: :tr: :bangladesh:</div>
+
+Thanks to submissions from the community, Blowfish has already been translated into [twenty-six languages](https://github.com/nunocoracao/blowfish/tree/main/i18n) with more to be added over time. By the way, [pull requests](https://github.com/nunocoracao/blowfish/pulls) for new languages are always welcome!
+
+## RTL language support
+
+One of the benefits of the new Tailwind and Multilingual features is the ability to add RTL language support. When enabled, the entire site will reflow content from right-to-left. Every element in the theme has been restyled to ensure it looks great in this mode which aids authors who wish to generate content in RTL languages.
+
+RTL is controlled on a per-language basis so you can mix and match both RTL and LTR content in your projects and the theme will respond accordingly.
+
+## Automatic image resizing
+
+A big change in Blowfish 2.0 is the addition of automatic image resizing. Using the power of Hugo Pipes, images in Markdown content are now automatically scaled to different output sizes. These are then presented using HTML `srcset` attributes enabling optimised file sizes to be served to your site visitors.
+
+![](image-resizing.png)
+
+```html
+<!-- Markdown: ![My image](image.jpg) -->
+<img
+  srcset="
+    /image_320x0_resize_q75_box.jpg 320w,
+    /image_635x0_resize_q75_box.jpg 635w,
+    /image_1024x0_resize_q75_box.jpg 1024w,
+    /image_1270x0_resize_q75_box.jpg 2x"
+  src="/image_635x0_resize_q75_box.jpg"
+  alt="My image"
+/>
+```
+
+Best of all there's nothing you need to change! Simply insert standard Markdown image syntax and let the theme do the rest. If you want a little more control, the `figure` shortcode has been completely rewritten to provide the same resizing benefits.
+
+
+## Site search
+
+Powered by [Fuse.js](https://fusejs.io), site search allows visitors to quickly and easily find your content. All searches are performed client-side meaning there's nothing to configure on the server and queries are performed super fast. Simply enable the feature in your site configuration and you're all set. Oh, and it also supports full keyboard navigation!
+
+## Tables of contents
+
+A highly requested feature, Blowfish now supports tables of contents on article pages. You can see it in action on this page. The contents are fully responsive and will adjust to take advantage of the space available at different screen resolutions.
+
+Available on a global or per article basis, the table of contents can be fully customised using standard Hugo configuration values, allowing you to adjust the behaviour to suit your project.
+
+## Accessibility improvements
+
+From adding ARIA descriptions to more items or simply adjusting the contrast of certain text elements, this release is the most accessible yet.
+
+Version 2 also introduces "skip to content" and "scroll to top" links that enable quick navigation. There's also keyboard shortcuts for enabling items like search without reaching for the mouse.
+
+The new image resizing features also provide full control over `alt` and `title` elements enabling an accessible experience for all visitors.
+
+## A whole lot more
+
+There's countless other features to explore. From being able to display taxonomies on articles and list pages, to using the new `headline` author parameter to customise your homepage. There's also improved JSON-LD structured data which further optimises SEO performance. 

exampleSite/content/examples/_index.it.md

@@ -0,0 +1,22 @@
+---
+title: "Showcase"
+description: "See what's possible with Blowfish."
+
+showLikes: true
+showViews: true
+
+cascade:
+  showEdit: false
+  showReadingTime: false
+  showSummary: false
+  showLikes: false
+  showViews: false
+---
+
+{{< lead >}}
+See what's possible with Blowfish.
+{{< /lead >}}
+
+This section contains links to example templates and pages created using Blowfish to get you inspired.
+
+---

exampleSite/content/examples/_index.zh-cn.md

@@ -0,0 +1,22 @@
+---
+title: "Showcase"
+description: "See what's possible with Blowfish."
+
+showLikes: true
+showViews: true
+
+cascade:
+  showEdit: false
+  showReadingTime: false
+  showSummary: false
+  showLikes: false
+  showViews: false
+---
+
+{{< lead >}}
+See what's possible with Blowfish.
+{{< /lead >}}
+
+This section contains links to example templates and pages created using Blowfish to get you inspired.
+
+---

exampleSite/content/examples/blowfish-artist/_index.it.md

@@ -0,0 +1,5 @@
+---
+title: "Blowfish Artist"
+date: 2022-11-06
+externalUrl: "https://nunocoracao.github.io/blowfish_artist/"
+---

exampleSite/content/examples/blowfish-artist/_index.ja.md

@@ -0,0 +1,5 @@
+---
+title: "Blowfish Artist"
+date: 2022-11-06
+externalUrl: "https://nunocoracao.github.io/blowfish_artist/"
+---

exampleSite/content/examples/blowfish-artist/_index.zh-cn.md

@@ -0,0 +1,5 @@
+---
+title: "Blowfish Artist"
+date: 2022-11-06
+externalUrl: "https://nunocoracao.github.io/blowfish_artist/"
+---

exampleSite/content/examples/blowfish-lite/_index.it.md

@@ -0,0 +1,5 @@
+---
+title: "Blowfish Lite"
+date: 2022-11-07
+externalUrl: "https://nunocoracao.github.io/blowfish_lite/"
+---

exampleSite/content/examples/blowfish-lite/_index.ja.md

@@ -0,0 +1,5 @@
+---
+title: "Blowfish Lite"
+date: 2022-11-07
+externalUrl: "https://nunocoracao.github.io/blowfish_lite/"
+---

exampleSite/content/examples/blowfish-lite/_index.zh-cn.md

@@ -0,0 +1,5 @@
+---
+title: "Blowfish Lite"
+date: 2022-11-07
+externalUrl: "https://nunocoracao.github.io/blowfish_lite/"
+---

exampleSite/content/examples/blowfish-lowkey/_index.it.md

@@ -0,0 +1,5 @@
+---
+title: "Blowfish Lowkey"
+date: 2022-11-06
+externalUrl: "https://nunocoracao.github.io/blowfish_lowkey/"
+---

exampleSite/content/examples/blowfish-lowkey/_index.ja.md

@@ -0,0 +1,5 @@
+---
+title: "Blowfish Lowkey"
+date: 2022-11-06
+externalUrl: "https://nunocoracao.github.io/blowfish_lowkey/"
+---

exampleSite/content/examples/blowfish-lowkey/_index.zh-cn.md

@@ -0,0 +1,5 @@
+---
+title: "Blowfish Lowkey"
+date: 2022-11-06
+externalUrl: "https://nunocoracao.github.io/blowfish_lowkey/"
+---

exampleSite/content/examples/blowfish-template-repo/_index.it.md

@@ -0,0 +1,5 @@
+---
+title: "Blowfish Template - GitHub Repo"
+date: 2020-11-06
+externalUrl: "https://github.com/nunocoracao/blowfish_template"
+---

exampleSite/content/examples/blowfish-template-repo/_index.zh-cn.md

@@ -0,0 +1,5 @@
+---
+title: "Blowfish Template - GitHub Repo"
+date: 2020-11-06
+externalUrl: "https://github.com/nunocoracao/blowfish_template"
+---

exampleSite/content/examples/blowfish-template/_index.it.md

@@ -0,0 +1,5 @@
+---
+title: "Blowfish Template"
+date: 2020-11-06
+externalUrl: "https://nunocoracao.github.io/blowfish_template/"
+---

exampleSite/content/examples/blowfish-template/_index.zh-cn.md

@@ -0,0 +1,5 @@
+---
+title: "Blowfish Template"
+date: 2020-11-06
+externalUrl: "https://nunocoracao.github.io/blowfish_template/"
+---

exampleSite/content/examples/blowfish-tutorial/_index.it.md

@@ -0,0 +1,5 @@
+---
+title: "Blowfish Tutorial"
+date: 2023-10-02
+externalUrl: "https://blowfish-tutorial.web.app/"
+---

exampleSite/content/examples/blowfish-tutorial/_index.zh-cn.md

@@ -0,0 +1,5 @@
+---
+title: "Blowfish Tutorial"
+date: 2023-10-02
+externalUrl: "https://blowfish-tutorial.web.app/"
+---

exampleSite/content/examples/repo-blowfish-artist/_index.it.md

@@ -0,0 +1,5 @@
+---
+title: "Blowfish Artist - Repo"
+date: 2021-11-06
+externalUrl: "https://github.com/nunocoracao/blowfish_artist/"
+---

exampleSite/content/examples/repo-blowfish-artist/_index.zh-cn.md

@@ -0,0 +1,5 @@
+---
+title: "Blowfish Artist - Repo"
+date: 2021-11-06
+externalUrl: "https://github.com/nunocoracao/blowfish_artist/"
+---

exampleSite/content/examples/repo-blowfish-lite/_index.it.md

@@ -0,0 +1,5 @@
+---
+title: "Blowfish Lite - Repo"
+date: 2021-11-07
+externalUrl: "https://github.com/nunocoracao/blowfish_lite/"
+---

exampleSite/content/examples/repo-blowfish-lite/_index.zh-cn.md

@@ -0,0 +1,5 @@
+---
+title: "Blowfish Lite - Repo"
+date: 2021-11-07
+externalUrl: "https://github.com/nunocoracao/blowfish_lite/"
+---

exampleSite/content/examples/repo-blowfish-lowkey/_index.it.md

@@ -0,0 +1,5 @@
+---
+title: "Blowfish Lowkey - Repo"
+date: 2021-11-06
+externalUrl: "https://github.com/nunocoracao/blowfish_lowkey/"
+---

exampleSite/content/examples/repo-blowfish-lowkey/_index.zh-cn.md

@@ -0,0 +1,5 @@
+---
+title: "Blowfish Lowkey - Repo"
+date: 2021-11-06
+externalUrl: "https://github.com/nunocoracao/blowfish_lowkey/"
+---

exampleSite/content/examples/repo-blowfish-tutorial/_index.it.md

@@ -0,0 +1,5 @@
+---
+title: "Blowfish Tutorial - Repo"
+date: 2023-10-01
+externalUrl: "https://github.com/nunocoracao/blowfish-tutorial"
+---

exampleSite/content/examples/repo-blowfish-tutorial/_index.zh-cn.md

@@ -0,0 +1,5 @@
+---
+title: "Blowfish Tutorial - Repo"
+date: 2023-10-01
+externalUrl: "https://github.com/nunocoracao/blowfish-tutorial"
+---

exampleSite/content/guides/202310-blowfish-tutorial/index.it.md

@@ -0,0 +1,410 @@
+---
+title: "Build your homepage using Blowfish and Hugo"
+summary: "Just one year ago, I created Blowfish, a Hugo theme crafted to build my unique vision for my personal homepage. I also decided to make it an open-source project. Fast-forward to today, and Blowfish has transformed into a thriving open-source project with over 600 stars on GitHub and a user base of hundreds. In this tutorial, I’ll show you how to get started and have your website running in a couple of minutes."
+description: "Just one year ago, I created Blowfish, a Hugo theme crafted to build my unique vision for my personal homepage. I also decided to make it an open-source project. Fast-forward to today, and Blowfish has transformed into a thriving open-source project with over 600 stars on GitHub and a user base of hundreds. In this tutorial, I’ll show you how to get started and have your website running in a couple of minutes."
+categories: ["Open-Source", "Blowfish"]
+tags: ["tutorial", "blowfish", "hugo"]
+externalUrl: "https://nunocoracao.com/posts/202310-blowfish-tutorial/"
+date: 2023-10-04
+draft: false
+showauthor: false
+authors:
+  - nunocoracao
+---
+
+Just one year ago, I created[Blowfish](https://blowfish.page/), a [Hugo](https://gohugo.io/) theme crafted to build my unique vision for my personal homepage. I also decided to make it an open-source project. Fast-forward to today, and Blowfish has transformed into a thriving open-source project with over 600 stars on GitHub and a user base of hundreds. In this tutorial, I’ll show you how to get started and have your website running in a couple of minutes.
+
+{{< github repo="nunocoracao/blowfish" >}}
+
+## TL;DR
+
+The goal of this guide is to walk a newcomer to Hugo on how to install, manage, and publish your own website. The final version of the code is available in this [repo](https://github.com/nunocoracao/blowfish-tutorial/tree/main) - for those that would like to jump to the end. 
+
+![Tutorial example](img/01.png)
+
+The visual style is just one of the many possibilities available in Blowfish. Users are encouraged to check the [documentation page](https://blowfish.page/) and learn how to customize the theme to their needs. Additionally, there are already [great examples](https://blowfish.page/users/) of the theme from other users available for inspiration. Blowfish also offers several extra features in the form of `shortcodes` available out of the box in the theme - check them out [here](https://blowfish.page/docs/shortcodes/) and get inspired. 
+
+## Setup your environment
+
+Let’s begin by installing all the tools you need. This guide will cover the steps for Mac so these instructions might not apply to your hardware and OS. If you are on Windows or Linux, please consult the guides on how to [install Hugo](https://gohugo.io/installation/), and [GitHub’s CLI](https://cli.github.com/) for your OS.
+
+Anyway, if you are using MacOS let’s install `brew` - a package manager for mac - as that will help installing and managing the other tools.
+
+```bash
+/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
+```
+
+Once `brew` is installed let’s install Git, Hugo and GitHub’s CLI.
+```bash
+brew install git
+brew install hugo
+brew install gh
+```
+
+Create a folder for your code and open a terminal session into it (I chose _blowfish-tutorial_ in the commands below, feel free to call the folder whatever you want).
+```bash
+mkdir blowfish-tutorial
+cd blowfish-tutorial
+```
+
+Once inside the folder, the next step is to initialize your local `git`  repo.
+```bash
+git init -b main
+```
+
+Now, let’s create and sync the local repo to a GitHub repo so that your code is stored remotely.
+```bash
+gh auth login
+gh repo create
+git push --set-upstream origin main
+```
+
+Check the image below for the options I selected for this guide, again feel free to change names and description to your use-case.
+
+![gh repo create example](img/ghcreate.png)
+
+
+Finally, create a **.gitignore** file which allows you to exclude certain files from your repo automatically. I would start with something like the example below.
+
+```bash
+#others
+node_modules
+.hugo_build.lock
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+
+# Hugo
+public
+```
+
+The last step is to save all the changes to the repo.
+```bash
+git add .
+git commit -m “initial commit”
+git push
+```
+
+
+## Create site and configure it
+
+With all the tools ready, creating and configuring your site will be easy. Still within the folder you created in the last section, let’s create an empty Hugo website (_with no theme_).
+
+```bash
+hugo new site --force .
+```
+
+Once the scaffolding finishes, try the command below to run your page. Open a browser on _[https://localhost:1313](https://localhost:1313)_ to see your site…
+ 
+```bash
+hugo server
+```
+
+ Ups… Page not found – right? 
+This was expected, even though you created a website, Hugo doesn’t give any default experience – aka your site doesn’t have any page to show.  
+
+Next step, let's install Blowfish using `git submodules` which will make it easier to manage and upgrade to new versions in the future.
+ 
+```bash
+git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish
+```
+
+Next, create the following folder structure at the root of your code directory - `config/_default/`. Now you will need to download [these files](https://minhaskamal.github.io/DownGit/#/home?url=https:%2F%2Fgithub.com%2Fnunocoracao%2Fblowfish%2Ftree%2Fmain%2Fconfig%2F%5C_default) and place them in _\_default_ folder you just created. The final structure should look something like this.
+
+```md
+config/_default/
+├─ config.toml
+├─ languages.en.toml
+├─ markup.toml
+├─ menus.en.toml
+└─ params.toml
+`
+```
+
+
+Open the **config.toml** and uncomment the line **theme = "blowfish”** and you are ready to go. Try the running the site again and check the result at _[https://localhost:1313](https://localhost:1313)_
+
+```bash
+hugo server
+```
+
+You should see something like the image below. Not much yet as we didn’t add any content, but the main skeleton for Blowfish is already in place - just requires configuration. 
+
+![blowfish empty site](img/blowfishempty.png)
+
+Now let’s configure the theme. 
+
+{{< alert  d>}}
+**FYI** This guide will not cover in detail what each parameter available in Blowfish does – for everything available and how to use it, check [Blowfish documentation](https://blowfish.page/docs/configuration/#theme-parameters) for every option in every file.
+{{< /alert >}}
+
+### menus.en.toml
+This file defines your menu structure, for the top banner and the footer. For this guide, let’s create two menu sections: one for _Posts_ and one for _Tags_. 
+- **Posts** - will display the full list of entries
+- **Tags** - automatically generated based on tags placed on each article
+
+To achieve this, make sure the following entries exist in the **menus.en.toml** file. Once the changes are done, you should see the menus appearing by re-running **hugo server**.
+
+```toml
+[[main]]
+  name = "Posts"
+  pageRef = "posts"
+  weight = 10
+
+[[main]]
+  name = "Tags"
+  pageRef = "tags"
+  weight = 30
+```
+
+
+### languages.en.toml
+
+This file will configure your main details as the author of the website. Change the section below to reflect your details.
+
+```bash
+[author]
+   name = "Your name here"
+   image = "profile.jpg"
+   headline = "I'm only human"
+   bio = "A little bit about you" # appears in author card for each article
+```
+
+The images for the website should be placed in the _assets_ folder. For this step, please add a profile picture to that folder named _profile.jpg_ or change the configuration above to the filename you chose. If you don’t have a profile image available, you can use the one below for the tutorial.
+
+![profile](img/profile.jpg "assets/profile.jpg")
+
+The last step is configuring your links – social media, GitHub, etc. The file includes all the supported options, but they are commented. You are welcome to uncomment everything and delete the ones you would rather not use. Replace the right links on the ones you decided to keep. You can also change the order.
+
+
+
+### params.toml
+
+This is the main configuration file for Blowfish. Most of the visual options or customization available can be configured using it, and it covers several areas of the theme. For this tutorial, I decided to use a **background** layout - [check other layouts for Blowfish’s landing page](https://blowfish.page/) - with the **Neon** color scheme - you can pick a different color scheme if you want to - check [this list](https://blowfish.page/docs/getting-started/#colour-schemes) or [create your own](https://blowfish.page/docs/advanced-customisation/#colour-schemes).
+
+Add an **image.jpg** to the assets folder which will be the background for the site. You can also download the examples I am using in this tutorial.
+
+![background](img/background.jpg "assets/image.jpg")
+
+Now let’s jump into the _params.toml_ and start configuring the file. I will focus only on the values that need to be changed, don’t delete the rest of the file without reading the docs. Let’s begin by making sure that we have the right color scheme, that image optimization is on, and configure the default background image.
+
+```bash
+colorScheme = "neon"
+disableImageOptimization = false
+defaultBackgroundImage = "image.jpg" # used as default for background images 
+```
+
+Next, let's configure our homepage. We’re going with the _background_ layout, configuring the homepage image and recent items. Furthermore, we are using the **card view** for items in the recent category. Finally, let’s configure the header to be fixed.
+
+```bash
+[homepage]
+  layout = "background" # valid options: page, profile, hero, card, background, custom
+  homepageImage = "image.jpg" # used in: hero, and card
+  showRecent = true
+  showRecentItems = 6
+  showMoreLink = true
+  showMoreLinkDest = "/posts"
+  cardView = true
+  cardViewScreenWidth = false
+  layoutBackgroundBlur = true # only used when layout equals background
+
+[header]
+  layout = "fixed"
+```
+
+Now configure how the article and list pages will look. Here are the configurations for those. 
+
+```bash
+[article]
+  showHero = true
+  heroStyle = "background" 
+  showSummary = true
+  showTableOfContents = true
+  showRelatedContent = true
+  relatedContentLimit = 3
+
+[list]
+  showCards = true
+  groupByYear = false
+  cardView = true
+```
+
+
+If you run **hugo server** again, you should see something like the image below.
+
+
+![blowfish no articles](img/blowfishnoarticles.png)
+
+
+
+## Adding content to your site
+
+Create a folder to place your posts in  `/content/posts`. This was also the directory configured in your menu to list all the articles. Within that folder, let’s create a new directory and give it the name **myfirstpost**. Within it create an **index.md** file – your article and place a featured.jpg or .png for in the same directory as the thumbnail for the article. Use the example below to get started. The first lines in the file are the Front Matter, which tell Hugo what the look and experience of the article will be – different themes support different params for this. Check the [docs](https://blowfish.page/docs/front-matter/) for more info.
+
+```md
+---
+title: "My first post"
+date: 2023-08-14
+draft: false
+summary: "This is my first post on my site"
+tags: ["space"]
+---
+
+## A sub-title
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nibh nisl, vulputate eu lacus vitae, maximus molestie libero. Vestibulum laoreet, odio et sollicitudin sollicitudin, quam ligula tempus urna, sed sagittis eros eros ac felis. In tristique tortor vitae lacinia commodo. Mauris venenatis ultrices purus nec fermentum. Nunc sit amet aliquet metus. Morbi nisl felis, gravida ac consequat vitae, blandit eu libero. Curabitur porta est in dui elementum porttitor. Maecenas fermentum, tortor ac feugiat fringilla, orci sem sagittis massa, a congue risus ipsum vel massa. Aliquam sit amet nunc vulputate, facilisis neque in, faucibus nisl.
+```
+
+You can create additional articles to see what your site will look like once there is content in it. Your site should look like the images below. The main page shows the recent articles, each article is connected through others automatically via related section, you have tag aggregation, and full-text search. 
+
+{{< gallery >}}
+  <img src="img/blowfishrecent.png" class="grid-w50" />
+  <img src="img/article.png" class="grid-w50" />
+  <img src="img/search.png" class="grid-w50" />
+  <img src="img/tag.png" class="grid-w50" />
+{{< /gallery >}}
+
+
+## Ship it
+
+The only thing missing is to ship your site. I will be using [Firebase](https://firebase.google.com/) for hosting - it’s a free alternative and provides more advanced features if you are creating something more complex. Go to firebase and create a new project. Once that is done, let’s switch to the CLI as it will make it easier to configure everything.
+
+Let’s install firebase’s CLI - if not on Mac check [install instructions on Firebase](https://firebase.google.com/docs/cli).
+```bash
+brew install firebase
+```
+
+Now log in and init firebase hosting for the project.
+
+```bash
+firebase login
+firebase init
+```
+
+Select hosting and proceed.
+
+![firebase init](img/firebasecli.png)
+
+Follow the image below for the options I recommend. Make sure to set up the workflow files for GitHub actions. These will guarantee that your code will be deployed once there is a change to the repo.
+
+![firebase options](img/firebaseoptions.png)
+
+However, those files will not work out-of-box, as Hugo requires extra steps for the build to work. Please copy and paste the code blocks below to the respective files within the **.github** folder, but keep the original **projectId** in the files generated by firebase.
+
+### firebase-hosting-merge.yml
+```yaml
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on merge
+'on':
+  push:
+    branches:
+      - main
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Hugo setup
+        uses: peaceiris/actions-hugo@v2.6.0
+        env:
+          ACTIONS_ALLOW_UNSECURE_COMMANDS: 'true'
+
+      - name: Check out code into the Go module directory
+        uses: actions/checkout@v4
+        with:
+          submodules: true  # Fetch Hugo themes (true OR recursive)
+          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod
+
+      - name: Build with Hugo
+        env:
+          # For maximum backward compatibility with Hugo modules
+          HUGO_ENVIRONMENT: production
+          HUGO_ENV: production
+        run: hugo -E -F --minify -d public
+
+      - name: Deploy Production
+        uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_BLOWFISH_TUTORIAL }}'
+          channelId: live
+          projectId: blowfish-tutorial
+
+```
+
+
+### firebase-hosting-pull-request.yml
+```yaml
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on PR
+'on': pull_request
+jobs:
+  build_and_preview:
+    if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Hugo setup
+        uses: peaceiris/actions-hugo@v2.6.0
+        env:
+          ACTIONS_ALLOW_UNSECURE_COMMANDS: 'true'
+
+      - name: Check out code into the Go module directory
+        uses: actions/checkout@v4
+        with:
+          submodules: true  # Fetch Hugo themes (true OR recursive)
+          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod
+
+      - name: Build with Hugo
+        env:
+          # For maximum backward compatibility with Hugo modules
+          HUGO_ENVIRONMENT: production
+          HUGO_ENV: production
+        run:  hugo -E -F --minify -d public
+
+      - name: Deploy preview
+        uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_BLOWFISH_TUTORIAL }}'
+          expires: 30d
+          channelId: preview-${{ github.event.number }}
+          projectId: blowfish-tutorial
+```
+
+
+The last step is committing your code to GitHub and let the workflows you created take care of deploying your site. Since we configured GitHub actions, this will trigger a job that will configure and deploy your site automatically.
+
+```bash
+git add .
+git commit -m "add github actions workflows"  
+git push  
+```
+
+If the actions tab for your repo, you should see something like this.
+
+![gh actions](img/githubactions.png)
+
+Once all the steps finish, your Firebase console should show something like the image below - including the links to see your app – I got a version of this tutorial running on [https://blowfish-tutorial.web.app/](https://blowfish-tutorial.web.app/).
+
+![firebase console](img/firebaseconsole.png)
+
+
+## Conclusion and Next Steps
+
+Now you have your first version of your homepage. You can make changes locally and once you commit your code they will automatically be reflected online. What shall you do next? I’ll leave you with some useful links to get you inspired and learn more about Blowfish and Hugo. 
+
+- https://blowfish.page/docs/
+- https://blowfish.page/docs/configuration/
+- https://blowfish.page/docs/shortcodes/
+- https://blowfish.page/examples/
+- https://blowfish.page/users/
+- https://gohugo.io/documentation/
+
+![blowfish final](img/01.png)

exampleSite/content/guides/202310-blowfish-tutorial/index.ja.md

@@ -0,0 +1,410 @@
+---
+title: "Build your homepage using Blowfish and Hugo"
+summary: "Just one year ago, I created Blowfish, a Hugo theme crafted to build my unique vision for my personal homepage. I also decided to make it an open-source project. Fast-forward to today, and Blowfish has transformed into a thriving open-source project with over 600 stars on GitHub and a user base of hundreds. In this tutorial, I’ll show you how to get started and have your website running in a couple of minutes."
+description: "Just one year ago, I created Blowfish, a Hugo theme crafted to build my unique vision for my personal homepage. I also decided to make it an open-source project. Fast-forward to today, and Blowfish has transformed into a thriving open-source project with over 600 stars on GitHub and a user base of hundreds. In this tutorial, I’ll show you how to get started and have your website running in a couple of minutes."
+categories: ["Open-Source", "Blowfish"]
+tags: ["tutorial", "blowfish", "hugo"]
+externalUrl: "https://nunocoracao.com/posts/202310-blowfish-tutorial/"
+date: 2023-10-04
+draft: false
+showauthor: false
+authors:
+  - nunocoracao
+---
+
+Just one year ago, I created[Blowfish](https://blowfish.page/), a [Hugo](https://gohugo.io/) theme crafted to build my unique vision for my personal homepage. I also decided to make it an open-source project. Fast-forward to today, and Blowfish has transformed into a thriving open-source project with over 600 stars on GitHub and a user base of hundreds. In this tutorial, I’ll show you how to get started and have your website running in a couple of minutes.
+
+{{< github repo="nunocoracao/blowfish" >}}
+
+## TL;DR
+
+The goal of this guide is to walk a newcomer to Hugo on how to install, manage, and publish your own website. The final version of the code is available in this [repo](https://github.com/nunocoracao/blowfish-tutorial/tree/main) - for those that would like to jump to the end. 
+
+![Tutorial example](img/01.png)
+
+The visual style is just one of the many possibilities available in Blowfish. Users are encouraged to check the [documentation page](https://blowfish.page/) and learn how to customize the theme to their needs. Additionally, there are already [great examples](https://blowfish.page/users/) of the theme from other users available for inspiration. Blowfish also offers several extra features in the form of `shortcodes` available out of the box in the theme - check them out [here](https://blowfish.page/docs/shortcodes/) and get inspired. 
+
+## Setup your environment
+
+Let’s begin by installing all the tools you need. This guide will cover the steps for Mac so these instructions might not apply to your hardware and OS. If you are on Windows or Linux, please consult the guides on how to [install Hugo](https://gohugo.io/installation/), and [GitHub’s CLI](https://cli.github.com/) for your OS.
+
+Anyway, if you are using MacOS let’s install `brew` - a package manager for mac - as that will help installing and managing the other tools.
+
+```bash
+/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
+```
+
+Once `brew` is installed let’s install Git, Hugo and GitHub’s CLI.
+```bash
+brew install git
+brew install hugo
+brew install gh
+```
+
+Create a folder for your code and open a terminal session into it (I chose _blowfish-tutorial_ in the commands below, feel free to call the folder whatever you want).
+```bash
+mkdir blowfish-tutorial
+cd blowfish-tutorial
+```
+
+Once inside the folder, the next step is to initialize your local `git`  repo.
+```bash
+git init -b main
+```
+
+Now, let’s create and sync the local repo to a GitHub repo so that your code is stored remotely.
+```bash
+gh auth login
+gh repo create
+git push --set-upstream origin main
+```
+
+Check the image below for the options I selected for this guide, again feel free to change names and description to your use-case.
+
+![gh repo create example](img/ghcreate.png)
+
+
+Finally, create a **.gitignore** file which allows you to exclude certain files from your repo automatically. I would start with something like the example below.
+
+```bash
+#others
+node_modules
+.hugo_build.lock
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+
+# Hugo
+public
+```
+
+The last step is to save all the changes to the repo.
+```bash
+git add .
+git commit -m “initial commit”
+git push
+```
+
+
+## Create site and configure it
+
+With all the tools ready, creating and configuring your site will be easy. Still within the folder you created in the last section, let’s create an empty Hugo website (_with no theme_).
+
+```bash
+hugo new site --force .
+```
+
+Once the scaffolding finishes, try the command below to run your page. Open a browser on _[https://localhost:1313](https://localhost:1313)_ to see your site…
+ 
+```bash
+hugo server
+```
+
+ Ups… Page not found – right? 
+This was expected, even though you created a website, Hugo doesn’t give any default experience – aka your site doesn’t have any page to show.  
+
+Next step, let's install Blowfish using `git submodules` which will make it easier to manage and upgrade to new versions in the future.
+ 
+```bash
+git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish
+```
+
+Next, create the following folder structure at the root of your code directory - `config/_default/`. Now you will need to download [these files](https://minhaskamal.github.io/DownGit/#/home?url=https:%2F%2Fgithub.com%2Fnunocoracao%2Fblowfish%2Ftree%2Fmain%2Fconfig%2F%5C_default) and place them in _\_default_ folder you just created. The final structure should look something like this.
+
+```md
+config/_default/
+├─ config.toml
+├─ languages.en.toml
+├─ markup.toml
+├─ menus.en.toml
+└─ params.toml
+`
+```
+
+
+Open the **config.toml** and uncomment the line **theme = "blowfish”** and you are ready to go. Try the running the site again and check the result at _[https://localhost:1313](https://localhost:1313)_
+
+```bash
+hugo server
+```
+
+You should see something like the image below. Not much yet as we didn’t add any content, but the main skeleton for Blowfish is already in place - just requires configuration. 
+
+![blowfish empty site](img/blowfishempty.png)
+
+Now let’s configure the theme. 
+
+{{< alert  d>}}
+**FYI** This guide will not cover in detail what each parameter available in Blowfish does – for everything available and how to use it, check [Blowfish documentation](https://blowfish.page/docs/configuration/#theme-parameters) for every option in every file.
+{{< /alert >}}
+
+### menus.en.toml
+This file defines your menu structure, for the top banner and the footer. For this guide, let’s create two menu sections: one for _Posts_ and one for _Tags_. 
+- **Posts** - will display the full list of entries
+- **Tags** - automatically generated based on tags placed on each article
+
+To achieve this, make sure the following entries exist in the **menus.en.toml** file. Once the changes are done, you should see the menus appearing by re-running **hugo server**.
+
+```toml
+[[main]]
+  name = "Posts"
+  pageRef = "posts"
+  weight = 10
+
+[[main]]
+  name = "Tags"
+  pageRef = "tags"
+  weight = 30
+```
+
+
+### languages.en.toml
+
+This file will configure your main details as the author of the website. Change the section below to reflect your details.
+
+```bash
+[author]
+   name = "Your name here"
+   image = "profile.jpg"
+   headline = "I'm only human"
+   bio = "A little bit about you" # appears in author card for each article
+```
+
+The images for the website should be placed in the _assets_ folder. For this step, please add a profile picture to that folder named _profile.jpg_ or change the configuration above to the filename you chose. If you don’t have a profile image available, you can use the one below for the tutorial.
+
+![profile](img/profile.jpg "assets/profile.jpg")
+
+The last step is configuring your links – social media, GitHub, etc. The file includes all the supported options, but they are commented. You are welcome to uncomment everything and delete the ones you would rather not use. Replace the right links on the ones you decided to keep. You can also change the order.
+
+
+
+### params.toml
+
+This is the main configuration file for Blowfish. Most of the visual options or customization available can be configured using it, and it covers several areas of the theme. For this tutorial, I decided to use a **background** layout - [check other layouts for Blowfish’s landing page](https://blowfish.page/) - with the **Neon** color scheme - you can pick a different color scheme if you want to - check [this list](https://blowfish.page/docs/getting-started/#colour-schemes) or [create your own](https://blowfish.page/docs/advanced-customisation/#colour-schemes).
+
+Add an **image.jpg** to the assets folder which will be the background for the site. You can also download the examples I am using in this tutorial.
+
+![background](img/background.jpg "assets/image.jpg")
+
+Now let’s jump into the _params.toml_ and start configuring the file. I will focus only on the values that need to be changed, don’t delete the rest of the file without reading the docs. Let’s begin by making sure that we have the right color scheme, that image optimization is on, and configure the default background image.
+
+```bash
+colorScheme = "neon"
+disableImageOptimization = false
+defaultBackgroundImage = "image.jpg" # used as default for background images 
+```
+
+Next, let's configure our homepage. We’re going with the _background_ layout, configuring the homepage image and recent items. Furthermore, we are using the **card view** for items in the recent category. Finally, let’s configure the header to be fixed.
+
+```bash
+[homepage]
+  layout = "background" # valid options: page, profile, hero, card, background, custom
+  homepageImage = "image.jpg" # used in: hero, and card
+  showRecent = true
+  showRecentItems = 6
+  showMoreLink = true
+  showMoreLinkDest = "/posts"
+  cardView = true
+  cardViewScreenWidth = false
+  layoutBackgroundBlur = true # only used when layout equals background
+
+[header]
+  layout = "fixed"
+```
+
+Now configure how the article and list pages will look. Here are the configurations for those. 
+
+```bash
+[article]
+  showHero = true
+  heroStyle = "background" 
+  showSummary = true
+  showTableOfContents = true
+  showRelatedContent = true
+  relatedContentLimit = 3
+
+[list]
+  showCards = true
+  groupByYear = false
+  cardView = true
+```
+
+
+If you run **hugo server** again, you should see something like the image below.
+
+
+![blowfish no articles](img/blowfishnoarticles.png)
+
+
+
+## Adding content to your site
+
+Create a folder to place your posts in  `/content/posts`. This was also the directory configured in your menu to list all the articles. Within that folder, let’s create a new directory and give it the name **myfirstpost**. Within it create an **index.md** file – your article and place a featured.jpg or .png for in the same directory as the thumbnail for the article. Use the example below to get started. The first lines in the file are the Front Matter, which tell Hugo what the look and experience of the article will be – different themes support different params for this. Check the [docs](https://blowfish.page/docs/front-matter/) for more info.
+
+```md
+---
+title: "My first post"
+date: 2023-08-14
+draft: false
+summary: "This is my first post on my site"
+tags: ["space"]
+---
+
+## A sub-title
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nibh nisl, vulputate eu lacus vitae, maximus molestie libero. Vestibulum laoreet, odio et sollicitudin sollicitudin, quam ligula tempus urna, sed sagittis eros eros ac felis. In tristique tortor vitae lacinia commodo. Mauris venenatis ultrices purus nec fermentum. Nunc sit amet aliquet metus. Morbi nisl felis, gravida ac consequat vitae, blandit eu libero. Curabitur porta est in dui elementum porttitor. Maecenas fermentum, tortor ac feugiat fringilla, orci sem sagittis massa, a congue risus ipsum vel massa. Aliquam sit amet nunc vulputate, facilisis neque in, faucibus nisl.
+```
+
+You can create additional articles to see what your site will look like once there is content in it. Your site should look like the images below. The main page shows the recent articles, each article is connected through others automatically via related section, you have tag aggregation, and full-text search. 
+
+{{< gallery >}}
+  <img src="img/blowfishrecent.png" class="grid-w50" />
+  <img src="img/article.png" class="grid-w50" />
+  <img src="img/search.png" class="grid-w50" />
+  <img src="img/tag.png" class="grid-w50" />
+{{< /gallery >}}
+
+
+## Ship it
+
+The only thing missing is to ship your site. I will be using [Firebase](https://firebase.google.com/) for hosting - it’s a free alternative and provides more advanced features if you are creating something more complex. Go to firebase and create a new project. Once that is done, let’s switch to the CLI as it will make it easier to configure everything.
+
+Let’s install firebase’s CLI - if not on Mac check [install instructions on Firebase](https://firebase.google.com/docs/cli).
+```bash
+brew install firebase
+```
+
+Now log in and init firebase hosting for the project.
+
+```bash
+firebase login
+firebase init
+```
+
+Select hosting and proceed.
+
+![firebase init](img/firebasecli.png)
+
+Follow the image below for the options I recommend. Make sure to set up the workflow files for GitHub actions. These will guarantee that your code will be deployed once there is a change to the repo.
+
+![firebase options](img/firebaseoptions.png)
+
+However, those files will not work out-of-box, as Hugo requires extra steps for the build to work. Please copy and paste the code blocks below to the respective files within the **.github** folder, but keep the original **projectId** in the files generated by firebase.
+
+### firebase-hosting-merge.yml
+```yaml
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on merge
+'on':
+  push:
+    branches:
+      - main
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Hugo setup
+        uses: peaceiris/actions-hugo@v2.6.0
+        env:
+          ACTIONS_ALLOW_UNSECURE_COMMANDS: 'true'
+
+      - name: Check out code into the Go module directory
+        uses: actions/checkout@v4
+        with:
+          submodules: true  # Fetch Hugo themes (true OR recursive)
+          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod
+
+      - name: Build with Hugo
+        env:
+          # For maximum backward compatibility with Hugo modules
+          HUGO_ENVIRONMENT: production
+          HUGO_ENV: production
+        run: hugo -E -F --minify -d public
+
+      - name: Deploy Production
+        uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_BLOWFISH_TUTORIAL }}'
+          channelId: live
+          projectId: blowfish-tutorial
+
+```
+
+
+### firebase-hosting-pull-request.yml
+```yaml
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on PR
+'on': pull_request
+jobs:
+  build_and_preview:
+    if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Hugo setup
+        uses: peaceiris/actions-hugo@v2.6.0
+        env:
+          ACTIONS_ALLOW_UNSECURE_COMMANDS: 'true'
+
+      - name: Check out code into the Go module directory
+        uses: actions/checkout@v4
+        with:
+          submodules: true  # Fetch Hugo themes (true OR recursive)
+          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod
+
+      - name: Build with Hugo
+        env:
+          # For maximum backward compatibility with Hugo modules
+          HUGO_ENVIRONMENT: production
+          HUGO_ENV: production
+        run:  hugo -E -F --minify -d public
+
+      - name: Deploy preview
+        uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_BLOWFISH_TUTORIAL }}'
+          expires: 30d
+          channelId: preview-${{ github.event.number }}
+          projectId: blowfish-tutorial
+```
+
+
+The last step is committing your code to GitHub and let the workflows you created take care of deploying your site. Since we configured GitHub actions, this will trigger a job that will configure and deploy your site automatically.
+
+```bash
+git add .
+git commit -m "add github actions workflows"  
+git push  
+```
+
+If the actions tab for your repo, you should see something like this.
+
+![gh actions](img/githubactions.png)
+
+Once all the steps finish, your Firebase console should show something like the image below - including the links to see your app – I got a version of this tutorial running on [https://blowfish-tutorial.web.app/](https://blowfish-tutorial.web.app/).
+
+![firebase console](img/firebaseconsole.png)
+
+
+## Conclusion and Next Steps
+
+Now you have your first version of your homepage. You can make changes locally and once you commit your code they will automatically be reflected online. What shall you do next? I’ll leave you with some useful links to get you inspired and learn more about Blowfish and Hugo. 
+
+- https://blowfish.page/docs/
+- https://blowfish.page/docs/configuration/
+- https://blowfish.page/docs/shortcodes/
+- https://blowfish.page/examples/
+- https://blowfish.page/users/
+- https://gohugo.io/documentation/
+
+![blowfish final](img/01.png)

exampleSite/content/guides/202310-blowfish-tutorial/index.zh-cn.md

@@ -0,0 +1,410 @@
+---
+title: "Build your homepage using Blowfish and Hugo"
+summary: "Just one year ago, I created Blowfish, a Hugo theme crafted to build my unique vision for my personal homepage. I also decided to make it an open-source project. Fast-forward to today, and Blowfish has transformed into a thriving open-source project with over 600 stars on GitHub and a user base of hundreds. In this tutorial, I’ll show you how to get started and have your website running in a couple of minutes."
+description: "Just one year ago, I created Blowfish, a Hugo theme crafted to build my unique vision for my personal homepage. I also decided to make it an open-source project. Fast-forward to today, and Blowfish has transformed into a thriving open-source project with over 600 stars on GitHub and a user base of hundreds. In this tutorial, I’ll show you how to get started and have your website running in a couple of minutes."
+categories: ["Open-Source", "Blowfish"]
+tags: ["tutorial", "blowfish", "hugo"]
+externalUrl: "https://nunocoracao.com/posts/202310-blowfish-tutorial/"
+date: 2023-10-04
+draft: false
+showauthor: false
+authors:
+  - nunocoracao
+---
+
+Just one year ago, I created[Blowfish](https://blowfish.page/), a [Hugo](https://gohugo.io/) theme crafted to build my unique vision for my personal homepage. I also decided to make it an open-source project. Fast-forward to today, and Blowfish has transformed into a thriving open-source project with over 600 stars on GitHub and a user base of hundreds. In this tutorial, I’ll show you how to get started and have your website running in a couple of minutes.
+
+{{< github repo="nunocoracao/blowfish" >}}
+
+## TL;DR
+
+The goal of this guide is to walk a newcomer to Hugo on how to install, manage, and publish your own website. The final version of the code is available in this [repo](https://github.com/nunocoracao/blowfish-tutorial/tree/main) - for those that would like to jump to the end. 
+
+![Tutorial example](img/01.png)
+
+The visual style is just one of the many possibilities available in Blowfish. Users are encouraged to check the [documentation page](https://blowfish.page/) and learn how to customize the theme to their needs. Additionally, there are already [great examples](https://blowfish.page/users/) of the theme from other users available for inspiration. Blowfish also offers several extra features in the form of `shortcodes` available out of the box in the theme - check them out [here](https://blowfish.page/docs/shortcodes/) and get inspired. 
+
+## Setup your environment
+
+Let’s begin by installing all the tools you need. This guide will cover the steps for Mac so these instructions might not apply to your hardware and OS. If you are on Windows or Linux, please consult the guides on how to [install Hugo](https://gohugo.io/installation/), and [GitHub’s CLI](https://cli.github.com/) for your OS.
+
+Anyway, if you are using MacOS let’s install `brew` - a package manager for mac - as that will help installing and managing the other tools.
+
+```bash
+/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
+```
+
+Once `brew` is installed let’s install Git, Hugo and GitHub’s CLI.
+```bash
+brew install git
+brew install hugo
+brew install gh
+```
+
+Create a folder for your code and open a terminal session into it (I chose _blowfish-tutorial_ in the commands below, feel free to call the folder whatever you want).
+```bash
+mkdir blowfish-tutorial
+cd blowfish-tutorial
+```
+
+Once inside the folder, the next step is to initialize your local `git`  repo.
+```bash
+git init -b main
+```
+
+Now, let’s create and sync the local repo to a GitHub repo so that your code is stored remotely.
+```bash
+gh auth login
+gh repo create
+git push --set-upstream origin main
+```
+
+Check the image below for the options I selected for this guide, again feel free to change names and description to your use-case.
+
+![gh repo create example](img/ghcreate.png)
+
+
+Finally, create a **.gitignore** file which allows you to exclude certain files from your repo automatically. I would start with something like the example below.
+
+```bash
+#others
+node_modules
+.hugo_build.lock
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+
+# Hugo
+public
+```
+
+The last step is to save all the changes to the repo.
+```bash
+git add .
+git commit -m “initial commit”
+git push
+```
+
+
+## Create site and configure it
+
+With all the tools ready, creating and configuring your site will be easy. Still within the folder you created in the last section, let’s create an empty Hugo website (_with no theme_).
+
+```bash
+hugo new site --force .
+```
+
+Once the scaffolding finishes, try the command below to run your page. Open a browser on _[https://localhost:1313](https://localhost:1313)_ to see your site…
+ 
+```bash
+hugo server
+```
+
+ Ups… Page not found – right? 
+This was expected, even though you created a website, Hugo doesn’t give any default experience – aka your site doesn’t have any page to show.  
+
+Next step, let's install Blowfish using `git submodules` which will make it easier to manage and upgrade to new versions in the future.
+ 
+```bash
+git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish
+```
+
+Next, create the following folder structure at the root of your code directory - `config/_default/`. Now you will need to download [these files](https://minhaskamal.github.io/DownGit/#/home?url=https:%2F%2Fgithub.com%2Fnunocoracao%2Fblowfish%2Ftree%2Fmain%2Fconfig%2F%5C_default) and place them in _\_default_ folder you just created. The final structure should look something like this.
+
+```md
+config/_default/
+├─ config.toml
+├─ languages.en.toml
+├─ markup.toml
+├─ menus.en.toml
+└─ params.toml
+`
+```
+
+
+Open the **config.toml** and uncomment the line **theme = "blowfish”** and you are ready to go. Try the running the site again and check the result at _[https://localhost:1313](https://localhost:1313)_
+
+```bash
+hugo server
+```
+
+You should see something like the image below. Not much yet as we didn’t add any content, but the main skeleton for Blowfish is already in place - just requires configuration. 
+
+![blowfish empty site](img/blowfishempty.png)
+
+Now let’s configure the theme. 
+
+{{< alert  d>}}
+**FYI** This guide will not cover in detail what each parameter available in Blowfish does – for everything available and how to use it, check [Blowfish documentation](https://blowfish.page/docs/configuration/#theme-parameters) for every option in every file.
+{{< /alert >}}
+
+### menus.en.toml
+This file defines your menu structure, for the top banner and the footer. For this guide, let’s create two menu sections: one for _Posts_ and one for _Tags_. 
+- **Posts** - will display the full list of entries
+- **Tags** - automatically generated based on tags placed on each article
+
+To achieve this, make sure the following entries exist in the **menus.en.toml** file. Once the changes are done, you should see the menus appearing by re-running **hugo server**.
+
+```toml
+[[main]]
+  name = "Posts"
+  pageRef = "posts"
+  weight = 10
+
+[[main]]
+  name = "Tags"
+  pageRef = "tags"
+  weight = 30
+```
+
+
+### languages.en.toml
+
+This file will configure your main details as the author of the website. Change the section below to reflect your details.
+
+```bash
+[author]
+   name = "Your name here"
+   image = "profile.jpg"
+   headline = "I'm only human"
+   bio = "A little bit about you" # appears in author card for each article
+```
+
+The images for the website should be placed in the _assets_ folder. For this step, please add a profile picture to that folder named _profile.jpg_ or change the configuration above to the filename you chose. If you don’t have a profile image available, you can use the one below for the tutorial.
+
+![profile](img/profile.jpg "assets/profile.jpg")
+
+The last step is configuring your links – social media, GitHub, etc. The file includes all the supported options, but they are commented. You are welcome to uncomment everything and delete the ones you would rather not use. Replace the right links on the ones you decided to keep. You can also change the order.
+
+
+
+### params.toml
+
+This is the main configuration file for Blowfish. Most of the visual options or customization available can be configured using it, and it covers several areas of the theme. For this tutorial, I decided to use a **background** layout - [check other layouts for Blowfish’s landing page](https://blowfish.page/) - with the **Neon** color scheme - you can pick a different color scheme if you want to - check [this list](https://blowfish.page/docs/getting-started/#colour-schemes) or [create your own](https://blowfish.page/docs/advanced-customisation/#colour-schemes).
+
+Add an **image.jpg** to the assets folder which will be the background for the site. You can also download the examples I am using in this tutorial.
+
+![background](img/background.jpg "assets/image.jpg")
+
+Now let’s jump into the _params.toml_ and start configuring the file. I will focus only on the values that need to be changed, don’t delete the rest of the file without reading the docs. Let’s begin by making sure that we have the right color scheme, that image optimization is on, and configure the default background image.
+
+```bash
+colorScheme = "neon"
+disableImageOptimization = false
+defaultBackgroundImage = "image.jpg" # used as default for background images 
+```
+
+Next, let's configure our homepage. We’re going with the _background_ layout, configuring the homepage image and recent items. Furthermore, we are using the **card view** for items in the recent category. Finally, let’s configure the header to be fixed.
+
+```bash
+[homepage]
+  layout = "background" # valid options: page, profile, hero, card, background, custom
+  homepageImage = "image.jpg" # used in: hero, and card
+  showRecent = true
+  showRecentItems = 6
+  showMoreLink = true
+  showMoreLinkDest = "/posts"
+  cardView = true
+  cardViewScreenWidth = false
+  layoutBackgroundBlur = true # only used when layout equals background
+
+[header]
+  layout = "fixed"
+```
+
+Now configure how the article and list pages will look. Here are the configurations for those. 
+
+```bash
+[article]
+  showHero = true
+  heroStyle = "background" 
+  showSummary = true
+  showTableOfContents = true
+  showRelatedContent = true
+  relatedContentLimit = 3
+
+[list]
+  showCards = true
+  groupByYear = false
+  cardView = true
+```
+
+
+If you run **hugo server** again, you should see something like the image below.
+
+
+![blowfish no articles](img/blowfishnoarticles.png)
+
+
+
+## Adding content to your site
+
+Create a folder to place your posts in  `/content/posts`. This was also the directory configured in your menu to list all the articles. Within that folder, let’s create a new directory and give it the name **myfirstpost**. Within it create an **index.md** file – your article and place a featured.jpg or .png for in the same directory as the thumbnail for the article. Use the example below to get started. The first lines in the file are the Front Matter, which tell Hugo what the look and experience of the article will be – different themes support different params for this. Check the [docs](https://blowfish.page/docs/front-matter/) for more info.
+
+```md
+---
+title: "My first post"
+date: 2023-08-14
+draft: false
+summary: "This is my first post on my site"
+tags: ["space"]
+---
+
+## A sub-title
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nibh nisl, vulputate eu lacus vitae, maximus molestie libero. Vestibulum laoreet, odio et sollicitudin sollicitudin, quam ligula tempus urna, sed sagittis eros eros ac felis. In tristique tortor vitae lacinia commodo. Mauris venenatis ultrices purus nec fermentum. Nunc sit amet aliquet metus. Morbi nisl felis, gravida ac consequat vitae, blandit eu libero. Curabitur porta est in dui elementum porttitor. Maecenas fermentum, tortor ac feugiat fringilla, orci sem sagittis massa, a congue risus ipsum vel massa. Aliquam sit amet nunc vulputate, facilisis neque in, faucibus nisl.
+```
+
+You can create additional articles to see what your site will look like once there is content in it. Your site should look like the images below. The main page shows the recent articles, each article is connected through others automatically via related section, you have tag aggregation, and full-text search. 
+
+{{< gallery >}}
+  <img src="img/blowfishrecent.png" class="grid-w50" />
+  <img src="img/article.png" class="grid-w50" />
+  <img src="img/search.png" class="grid-w50" />
+  <img src="img/tag.png" class="grid-w50" />
+{{< /gallery >}}
+
+
+## Ship it
+
+The only thing missing is to ship your site. I will be using [Firebase](https://firebase.google.com/) for hosting - it’s a free alternative and provides more advanced features if you are creating something more complex. Go to firebase and create a new project. Once that is done, let’s switch to the CLI as it will make it easier to configure everything.
+
+Let’s install firebase’s CLI - if not on Mac check [install instructions on Firebase](https://firebase.google.com/docs/cli).
+```bash
+brew install firebase
+```
+
+Now log in and init firebase hosting for the project.
+
+```bash
+firebase login
+firebase init
+```
+
+Select hosting and proceed.
+
+![firebase init](img/firebasecli.png)
+
+Follow the image below for the options I recommend. Make sure to set up the workflow files for GitHub actions. These will guarantee that your code will be deployed once there is a change to the repo.
+
+![firebase options](img/firebaseoptions.png)
+
+However, those files will not work out-of-box, as Hugo requires extra steps for the build to work. Please copy and paste the code blocks below to the respective files within the **.github** folder, but keep the original **projectId** in the files generated by firebase.
+
+### firebase-hosting-merge.yml
+```yaml
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on merge
+'on':
+  push:
+    branches:
+      - main
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Hugo setup
+        uses: peaceiris/actions-hugo@v2.6.0
+        env:
+          ACTIONS_ALLOW_UNSECURE_COMMANDS: 'true'
+
+      - name: Check out code into the Go module directory
+        uses: actions/checkout@v4
+        with:
+          submodules: true  # Fetch Hugo themes (true OR recursive)
+          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod
+
+      - name: Build with Hugo
+        env:
+          # For maximum backward compatibility with Hugo modules
+          HUGO_ENVIRONMENT: production
+          HUGO_ENV: production
+        run: hugo -E -F --minify -d public
+
+      - name: Deploy Production
+        uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_BLOWFISH_TUTORIAL }}'
+          channelId: live
+          projectId: blowfish-tutorial
+
+```
+
+
+### firebase-hosting-pull-request.yml
+```yaml
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on PR
+'on': pull_request
+jobs:
+  build_and_preview:
+    if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Hugo setup
+        uses: peaceiris/actions-hugo@v2.6.0
+        env:
+          ACTIONS_ALLOW_UNSECURE_COMMANDS: 'true'
+
+      - name: Check out code into the Go module directory
+        uses: actions/checkout@v4
+        with:
+          submodules: true  # Fetch Hugo themes (true OR recursive)
+          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod
+
+      - name: Build with Hugo
+        env:
+          # For maximum backward compatibility with Hugo modules
+          HUGO_ENVIRONMENT: production
+          HUGO_ENV: production
+        run:  hugo -E -F --minify -d public
+
+      - name: Deploy preview
+        uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_BLOWFISH_TUTORIAL }}'
+          expires: 30d
+          channelId: preview-${{ github.event.number }}
+          projectId: blowfish-tutorial
+```
+
+
+The last step is committing your code to GitHub and let the workflows you created take care of deploying your site. Since we configured GitHub actions, this will trigger a job that will configure and deploy your site automatically.
+
+```bash
+git add .
+git commit -m "add github actions workflows"  
+git push  
+```
+
+If the actions tab for your repo, you should see something like this.
+
+![gh actions](img/githubactions.png)
+
+Once all the steps finish, your Firebase console should show something like the image below - including the links to see your app – I got a version of this tutorial running on [https://blowfish-tutorial.web.app/](https://blowfish-tutorial.web.app/).
+
+![firebase console](img/firebaseconsole.png)
+
+
+## Conclusion and Next Steps
+
+Now you have your first version of your homepage. You can make changes locally and once you commit your code they will automatically be reflected online. What shall you do next? I’ll leave you with some useful links to get you inspired and learn more about Blowfish and Hugo. 
+
+- https://blowfish.page/docs/
+- https://blowfish.page/docs/configuration/
+- https://blowfish.page/docs/shortcodes/
+- https://blowfish.page/examples/
+- https://blowfish.page/users/
+- https://gohugo.io/documentation/
+
+![blowfish final](img/01.png)

exampleSite/content/guides/_index.it.md

@@ -0,0 +1,19 @@
+---
+title: "Recipes"
+description: "Recipes, guides, and tutorials for Blowfish"
+
+cascade:
+  showDate: false
+  showAuthor: false
+  invertPagination: true
+---
+
+{{< lead >}}
+Recipes, guides, and tutorials for Blowfish
+{{< /lead >}}
+
+**Blowfish user?** To add your guide to this list, [check the template](/guides/template/).
+
+This section contains guides for a variety of scenarios on how to configure your theme. If you're new, check out the [Installation]({{< ref "docs/installation" >}}) guide to begin or visit the [Samples]({{< ref "samples" >}}) section to see what Blowfish can do.
+
+---

exampleSite/content/guides/_index.zh-cn.md

@@ -0,0 +1,19 @@
+---
+title: "Recipes"
+description: "Recipes, guides, and tutorials for Blowfish"
+
+cascade:
+  showDate: false
+  showAuthor: false
+  invertPagination: true
+---
+
+{{< lead >}}
+Recipes, guides, and tutorials for Blowfish
+{{< /lead >}}
+
+**Blowfish user?** To add your guide to this list, [check the template](/guides/template/).
+
+This section contains guides for a variety of scenarios on how to configure your theme. If you're new, check out the [Installation]({{< ref "docs/installation" >}}) guide to begin or visit the [Samples]({{< ref "samples" >}}) section to see what Blowfish can do.
+
+---

exampleSite/content/guides/template/index.it.md

@@ -0,0 +1,36 @@
+---
+title: "Recipe Template"
+date: 1987-12-22
+draft: false
+description: "Template for creating a recipe for Blowfish theme"
+tags: ["template"]
+---
+
+Thank you for wanting to contribute to Blowfish's community.
+
+## How to start?
+This is a template article that will explain how to create a new article for Blowfish's guide section.
+
+## Clone Blowfish
+Clone this repo with the following command:
+
+```bash
+git clone https://github.com/nunocoracao/blowfish.git
+```
+
+## Setup your files
+Copy and paste the entire folder where this `.md` file is.
+
+Name it using the following convention `YYYYMM-title`, no white spaces are allowed.
+
+## Write your guide
+Write your guide :)
+
+Use the `img` folder to place your images and use them:
+
+![]()
+
+![Example](img/example.jpg "Image caption")
+
+## Open a PR
+Open a PR and thanks in advance for your contribution.

exampleSite/content/guides/template/index.zh-cn.md

@@ -0,0 +1,36 @@
+---
+title: "Recipe Template"
+date: 1987-12-22
+draft: false
+description: "Template for creating a recipe for Blowfish theme"
+tags: ["template"]
+---
+
+Thank you for wanting to contribute to Blowfish's community.
+
+## How to start?
+This is a template article that will explain how to create a new article for Blowfish's guide section.
+
+## Clone Blowfish
+Clone this repo with the following command:
+
+```bash
+git clone https://github.com/nunocoracao/blowfish.git
+```
+
+## Setup your files
+Copy and paste the entire folder where this `.md` file is.
+
+Name it using the following convention `YYYYMM-title`, no white spaces are allowed.
+
+## Write your guide
+Write your guide :)
+
+Use the `img` folder to place your images and use them:
+
+![]()
+
+![Example](img/example.jpg "Image caption")
+
+## Open a PR
+Open a PR and thanks in advance for your contribution.

exampleSite/content/posts/_index.it.md

@@ -0,0 +1,18 @@
+---
+title: "Posts"
+date: 2022-06-13T20:55:37+01:00
+draft: false
+
+showDate : false
+showDateUpdated : false
+showHeadingAnchors : false
+showPagination : false
+showReadingTime : false
+showTableOfContents : true
+showTaxonomies : false 
+showWordCount : false
+showSummary : false
+sharingLinks : false
+
+---
+

exampleSite/content/posts/_index.zh-cn.md

@@ -0,0 +1,18 @@
+---
+title: "Posts"
+date: 2022-06-13T20:55:37+01:00
+draft: false
+
+showDate : false
+showDateUpdated : false
+showHeadingAnchors : false
+showPagination : false
+showReadingTime : false
+showTableOfContents : true
+showTaxonomies : false 
+showWordCount : false
+showSummary : false
+sharingLinks : false
+
+---
+

exampleSite/content/samples/_index.it.md

@@ -0,0 +1,19 @@
+---
+title: "Samples"
+description: "See what's possible with Blowfish."
+
+cascade:
+  showEdit: false
+  showSummary: false
+  hideFeatureImage: true
+---
+
+{{< lead >}}
+Blowfish brings your content to life. :heart_eyes:
+{{< /lead >}}
+
+This section contains some demo pages that show how Blowfish renders different types of content. You can also see an example [taxonomy listing]({{< ref "tags" >}}) page.
+
+_**Sidenote:** This page is just a standard Blowfish article listing and Hugo has been configured to generate a `samples` content type and display article summaries._
+
+---

exampleSite/content/samples/_index.zh-cn.md

@@ -0,0 +1,19 @@
+---
+title: "Samples"
+description: "See what's possible with Blowfish."
+
+cascade:
+  showEdit: false
+  showSummary: false
+  hideFeatureImage: true
+---
+
+{{< lead >}}
+Blowfish brings your content to life. :heart_eyes:
+{{< /lead >}}
+
+This section contains some demo pages that show how Blowfish renders different types of content. You can also see an example [taxonomy listing]({{< ref "tags" >}}) page.
+
+_**Sidenote:** This page is just a standard Blowfish article listing and Hugo has been configured to generate a `samples` content type and display article summaries._
+
+---

exampleSite/content/samples/charts/index.it.md

@@ -0,0 +1,87 @@
+---
+title: "Charts"
+date: 2019-03-06
+description: "Guide to Chart.js usage in Blowfish"
+summary: "Blowfish includes Chart.js for powerful charts and data visualisations."
+tags: ["chart", "sample", "graph", "shortcodes"]
+showDate: false
+type: 'sample'
+---
+
+Blowfish includes support for Chart.js using the `chart` shortcode. Simply wrap the chart markup within the shortcode. Blowfish automatically themes charts to match the configured `colorScheme` parameter, however the colours can be customised using normal Chart.js syntax.
+
+Refer to the [chart shortcode]({{< ref "docs/shortcodes#chart" >}}) docs for more details.
+
+The examples below are a small selection taken from the [official Chart.js docs](https://www.chartjs.org/docs/latest/samples). You can also [view the page source](https://raw.githubusercontent.com/nunocoracao/blowfish/main/exampleSite/content/samples/charts/index.md) on GitHub to see the markup.
+
+## Bar chart
+
+<!-- prettier-ignore-start -->
+{{< chart >}}
+type: 'bar',
+data: {
+  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+  datasets: [{
+    label: 'My First Dataset',
+    data: [65, 59, 80, 81, 56, 55, 40],
+    backgroundColor: [
+      'rgba(255, 99, 132, 0.2)',
+      'rgba(255, 159, 64, 0.2)',
+      'rgba(255, 205, 86, 0.2)',
+      'rgba(75, 192, 192, 0.2)',
+      'rgba(54, 162, 235, 0.2)',
+      'rgba(153, 102, 255, 0.2)',
+      'rgba(201, 203, 207, 0.2)'
+    ],
+    borderColor: [
+      'rgb(255, 99, 132)',
+      'rgb(255, 159, 64)',
+      'rgb(255, 205, 86)',
+      'rgb(75, 192, 192)',
+      'rgb(54, 162, 235)',
+      'rgb(153, 102, 255)',
+      'rgb(201, 203, 207)'
+    ],
+    borderWidth: 1
+  }]
+}
+{{< /chart >}}
+<!-- prettier-ignore-end -->
+
+## Line chart
+
+<!-- prettier-ignore-start -->
+{{< chart >}}
+type: 'line',
+data: {
+  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+  datasets: [{
+    label: 'My First Dataset',
+    data: [65, 59, 80, 81, 56, 55, 40],
+    tension: 0.2
+  }]
+}
+{{< /chart >}}
+<!-- prettier-ignore-end -->
+
+## Doughnut chart
+
+<!-- prettier-ignore-start -->
+{{< chart >}}
+type: 'doughnut',
+data: {
+  labels: ['Red', 'Blue', 'Yellow'],
+  datasets: [{
+    label: 'My First Dataset',
+    data: [300, 50, 100],
+    backgroundColor: [
+      'rgba(255, 99, 132, 0.7)',
+      'rgba(54, 162, 235, 0.7)',
+      'rgba(255, 205, 86, 0.7)'
+    ],
+    borderWidth: 0,
+    hoverOffset: 4
+  }]
+}
+{{< /chart >}}
+<!-- prettier-ignore-end -->

exampleSite/content/samples/charts/index.ja.md

@@ -0,0 +1,87 @@
+---
+title: "Charts"
+date: 2019-03-06
+description: "Guide to Chart.js usage in Blowfish"
+summary: "Blowfish includes Chart.js for powerful charts and data visualisations."
+tags: ["chart", "sample", "graph", "shortcodes"]
+showDate: false
+type: 'sample'
+---
+
+Blowfish includes support for Chart.js using the `chart` shortcode. Simply wrap the chart markup within the shortcode. Blowfish automatically themes charts to match the configured `colorScheme` parameter, however the colours can be customised using normal Chart.js syntax.
+
+Refer to the [chart shortcode]({{< ref "docs/shortcodes#chart" >}}) docs for more details.
+
+The examples below are a small selection taken from the [official Chart.js docs](https://www.chartjs.org/docs/latest/samples). You can also [view the page source](https://raw.githubusercontent.com/nunocoracao/blowfish/main/exampleSite/content/samples/charts/index.md) on GitHub to see the markup.
+
+## Bar chart
+
+<!-- prettier-ignore-start -->
+{{< chart >}}
+type: 'bar',
+data: {
+  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+  datasets: [{
+    label: 'My First Dataset',
+    data: [65, 59, 80, 81, 56, 55, 40],
+    backgroundColor: [
+      'rgba(255, 99, 132, 0.2)',
+      'rgba(255, 159, 64, 0.2)',
+      'rgba(255, 205, 86, 0.2)',
+      'rgba(75, 192, 192, 0.2)',
+      'rgba(54, 162, 235, 0.2)',
+      'rgba(153, 102, 255, 0.2)',
+      'rgba(201, 203, 207, 0.2)'
+    ],
+    borderColor: [
+      'rgb(255, 99, 132)',
+      'rgb(255, 159, 64)',
+      'rgb(255, 205, 86)',
+      'rgb(75, 192, 192)',
+      'rgb(54, 162, 235)',
+      'rgb(153, 102, 255)',
+      'rgb(201, 203, 207)'
+    ],
+    borderWidth: 1
+  }]
+}
+{{< /chart >}}
+<!-- prettier-ignore-end -->
+
+## Line chart
+
+<!-- prettier-ignore-start -->
+{{< chart >}}
+type: 'line',
+data: {
+  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+  datasets: [{
+    label: 'My First Dataset',
+    data: [65, 59, 80, 81, 56, 55, 40],
+    tension: 0.2
+  }]
+}
+{{< /chart >}}
+<!-- prettier-ignore-end -->
+
+## Doughnut chart
+
+<!-- prettier-ignore-start -->
+{{< chart >}}
+type: 'doughnut',
+data: {
+  labels: ['Red', 'Blue', 'Yellow'],
+  datasets: [{
+    label: 'My First Dataset',
+    data: [300, 50, 100],
+    backgroundColor: [
+      'rgba(255, 99, 132, 0.7)',
+      'rgba(54, 162, 235, 0.7)',
+      'rgba(255, 205, 86, 0.7)'
+    ],
+    borderWidth: 0,
+    hoverOffset: 4
+  }]
+}
+{{< /chart >}}
+<!-- prettier-ignore-end -->

exampleSite/content/samples/charts/index.zh-cn.md

@@ -0,0 +1,87 @@
+---
+title: "Charts"
+date: 2019-03-06
+description: "Guide to Chart.js usage in Blowfish"
+summary: "Blowfish includes Chart.js for powerful charts and data visualisations."
+tags: ["chart", "sample", "graph", "shortcodes"]
+showDate: false
+type: 'sample'
+---
+
+Blowfish includes support for Chart.js using the `chart` shortcode. Simply wrap the chart markup within the shortcode. Blowfish automatically themes charts to match the configured `colorScheme` parameter, however the colours can be customised using normal Chart.js syntax.
+
+Refer to the [chart shortcode]({{< ref "docs/shortcodes#chart" >}}) docs for more details.
+
+The examples below are a small selection taken from the [official Chart.js docs](https://www.chartjs.org/docs/latest/samples). You can also [view the page source](https://raw.githubusercontent.com/nunocoracao/blowfish/main/exampleSite/content/samples/charts/index.md) on GitHub to see the markup.
+
+## Bar chart
+
+<!-- prettier-ignore-start -->
+{{< chart >}}
+type: 'bar',
+data: {
+  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+  datasets: [{
+    label: 'My First Dataset',
+    data: [65, 59, 80, 81, 56, 55, 40],
+    backgroundColor: [
+      'rgba(255, 99, 132, 0.2)',
+      'rgba(255, 159, 64, 0.2)',
+      'rgba(255, 205, 86, 0.2)',
+      'rgba(75, 192, 192, 0.2)',
+      'rgba(54, 162, 235, 0.2)',
+      'rgba(153, 102, 255, 0.2)',
+      'rgba(201, 203, 207, 0.2)'
+    ],
+    borderColor: [
+      'rgb(255, 99, 132)',
+      'rgb(255, 159, 64)',
+      'rgb(255, 205, 86)',
+      'rgb(75, 192, 192)',
+      'rgb(54, 162, 235)',
+      'rgb(153, 102, 255)',
+      'rgb(201, 203, 207)'
+    ],
+    borderWidth: 1
+  }]
+}
+{{< /chart >}}
+<!-- prettier-ignore-end -->
+
+## Line chart
+
+<!-- prettier-ignore-start -->
+{{< chart >}}
+type: 'line',
+data: {
+  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+  datasets: [{
+    label: 'My First Dataset',
+    data: [65, 59, 80, 81, 56, 55, 40],
+    tension: 0.2
+  }]
+}
+{{< /chart >}}
+<!-- prettier-ignore-end -->
+
+## Doughnut chart
+
+<!-- prettier-ignore-start -->
+{{< chart >}}
+type: 'doughnut',
+data: {
+  labels: ['Red', 'Blue', 'Yellow'],
+  datasets: [{
+    label: 'My First Dataset',
+    data: [300, 50, 100],
+    backgroundColor: [
+      'rgba(255, 99, 132, 0.7)',
+      'rgba(54, 162, 235, 0.7)',
+      'rgba(255, 205, 86, 0.7)'
+    ],
+    borderWidth: 0,
+    hoverOffset: 4
+  }]
+}
+{{< /chart >}}
+<!-- prettier-ignore-end -->

exampleSite/content/samples/diagrams-flowcharts/index.it.md

@@ -0,0 +1,102 @@
+---
+title: "Diagrams and Flowcharts"
+date: 2019-03-06
+description: "Guide to Mermaid usage in Blowfish"
+summary: "It's easy to add diagrams and flowcharts to articles using Mermaid."
+tags: ["mermaid", "sample", "diagram", "shortcodes"]
+type: 'sample'
+---
+
+Mermaid diagrams are supported in Blowfish using the `mermaid` shortcode. Simply wrap the diagram markup within the shortcode. Blowfish automatically themes Mermaid diagrams to match the configured `colorScheme` parameter.
+
+Refer to the [mermaid shortcode]({{< ref "docs/shortcodes#mermaid" >}}) docs for more details.
+
+The examples below are a small selection taken from the [official Mermaid docs](https://mermaid-js.github.io/mermaid/). You can also [view the page source](https://raw.githubusercontent.com/nunocoracao/blowfish/main/exampleSite/content/samples/diagrams-flowcharts/index.md) on GitHub to see the markup.
+
+## Flowchart
+
+<div style="background-color:white; padding: 20px">
+{{< mermaid >}}
+graph TD
+A[Christmas] -->|Get money| B(Go shopping)
+B --> C{Let me think}
+B --> G[/Another/]
+C ==>|One| D[Laptop]
+C -->|Two| E[iPhone]
+C -->|Three| F[Car]
+subgraph Section
+C
+D
+E
+F
+G
+end
+{{< /mermaid >}}
+</div>
+
+## Sequence diagram
+
+<div style="background-color:white; padding: 20px">
+{{< mermaid >}}
+sequenceDiagram
+autonumber
+par Action 1
+Alice->>John: Hello John, how are you?
+and Action 2
+Alice->>Bob: Hello Bob, how are you?
+end
+Alice->>+John: Hello John, how are you?
+Alice->>+John: John, can you hear me?
+John-->>-Alice: Hi Alice, I can hear you!
+Note right of John: John is perceptive
+John-->>-Alice: I feel great!
+loop Every minute
+John-->Alice: Great!
+end
+{{< /mermaid >}}
+</div>
+
+## Class diagram
+
+<div style="background-color:white; padding: 20px">
+{{< mermaid >}}
+classDiagram
+Animal "1" <|-- Duck
+Animal <|-- Fish
+Animal <--o Zebra
+Animal : +int age
+Animal : +String gender
+Animal: +isMammal()
+Animal: +mate()
+class Duck{
++String beakColor
++swim()
++quack()
+}
+class Fish{
+-int sizeInFeet
+-canEat()
+}
+class Zebra{
++bool is_wild
++run()
+}
+{{< /mermaid >}}
+</div>
+
+## Entity relationship diagram
+
+<div style="background-color:white; padding: 20px">
+{{< mermaid >}}
+erDiagram
+CUSTOMER }|..|{ DELIVERY-ADDRESS : has
+CUSTOMER ||--o{ ORDER : places
+CUSTOMER ||--o{ INVOICE : "liable for"
+DELIVERY-ADDRESS ||--o{ ORDER : receives
+INVOICE ||--|{ ORDER : covers
+ORDER ||--|{ ORDER-ITEM : includes
+PRODUCT-CATEGORY ||--|{ PRODUCT : contains
+PRODUCT ||--o{ ORDER-ITEM : "ordered in"
+{{< /mermaid >}}
+</div>
+

exampleSite/content/samples/diagrams-flowcharts/index.ja.md

@@ -0,0 +1,102 @@
+---
+title: "Diagrams and Flowcharts"
+date: 2019-03-06
+description: "Guide to Mermaid usage in Blowfish"
+summary: "It's easy to add diagrams and flowcharts to articles using Mermaid."
+tags: ["mermaid", "sample", "diagram", "shortcodes"]
+type: 'sample'
+---
+
+Mermaid diagrams are supported in Blowfish using the `mermaid` shortcode. Simply wrap the diagram markup within the shortcode. Blowfish automatically themes Mermaid diagrams to match the configured `colorScheme` parameter.
+
+Refer to the [mermaid shortcode]({{< ref "docs/shortcodes#mermaid" >}}) docs for more details.
+
+The examples below are a small selection taken from the [official Mermaid docs](https://mermaid-js.github.io/mermaid/). You can also [view the page source](https://raw.githubusercontent.com/nunocoracao/blowfish/main/exampleSite/content/samples/diagrams-flowcharts/index.md) on GitHub to see the markup.
+
+## Flowchart
+
+<div style="background-color:white; padding: 20px">
+{{< mermaid >}}
+graph TD
+A[Christmas] -->|Get money| B(Go shopping)
+B --> C{Let me think}
+B --> G[/Another/]
+C ==>|One| D[Laptop]
+C -->|Two| E[iPhone]
+C -->|Three| F[Car]
+subgraph Section
+C
+D
+E
+F
+G
+end
+{{< /mermaid >}}
+</div>
+
+## Sequence diagram
+
+<div style="background-color:white; padding: 20px">
+{{< mermaid >}}
+sequenceDiagram
+autonumber
+par Action 1
+Alice->>John: Hello John, how are you?
+and Action 2
+Alice->>Bob: Hello Bob, how are you?
+end
+Alice->>+John: Hello John, how are you?
+Alice->>+John: John, can you hear me?
+John-->>-Alice: Hi Alice, I can hear you!
+Note right of John: John is perceptive
+John-->>-Alice: I feel great!
+loop Every minute
+John-->Alice: Great!
+end
+{{< /mermaid >}}
+</div>
+
+## Class diagram
+
+<div style="background-color:white; padding: 20px">
+{{< mermaid >}}
+classDiagram
+Animal "1" <|-- Duck
+Animal <|-- Fish
+Animal <--o Zebra
+Animal : +int age
+Animal : +String gender
+Animal: +isMammal()
+Animal: +mate()
+class Duck{
++String beakColor
++swim()
++quack()
+}
+class Fish{
+-int sizeInFeet
+-canEat()
+}
+class Zebra{
++bool is_wild
++run()
+}
+{{< /mermaid >}}
+</div>
+
+## Entity relationship diagram
+
+<div style="background-color:white; padding: 20px">
+{{< mermaid >}}
+erDiagram
+CUSTOMER }|..|{ DELIVERY-ADDRESS : has
+CUSTOMER ||--o{ ORDER : places
+CUSTOMER ||--o{ INVOICE : "liable for"
+DELIVERY-ADDRESS ||--o{ ORDER : receives
+INVOICE ||--|{ ORDER : covers
+ORDER ||--|{ ORDER-ITEM : includes
+PRODUCT-CATEGORY ||--|{ PRODUCT : contains
+PRODUCT ||--o{ ORDER-ITEM : "ordered in"
+{{< /mermaid >}}
+</div>
+

exampleSite/content/samples/diagrams-flowcharts/index.zh-cn.md

@@ -0,0 +1,102 @@
+---
+title: "Diagrams and Flowcharts"
+date: 2019-03-06
+description: "Guide to Mermaid usage in Blowfish"
+summary: "It's easy to add diagrams and flowcharts to articles using Mermaid."
+tags: ["mermaid", "sample", "diagram", "shortcodes"]
+type: 'sample'
+---
+
+Mermaid diagrams are supported in Blowfish using the `mermaid` shortcode. Simply wrap the diagram markup within the shortcode. Blowfish automatically themes Mermaid diagrams to match the configured `colorScheme` parameter.
+
+Refer to the [mermaid shortcode]({{< ref "docs/shortcodes#mermaid" >}}) docs for more details.
+
+The examples below are a small selection taken from the [official Mermaid docs](https://mermaid-js.github.io/mermaid/). You can also [view the page source](https://raw.githubusercontent.com/nunocoracao/blowfish/main/exampleSite/content/samples/diagrams-flowcharts/index.md) on GitHub to see the markup.
+
+## Flowchart
+
+<div style="background-color:white; padding: 20px">
+{{< mermaid >}}
+graph TD
+A[Christmas] -->|Get money| B(Go shopping)
+B --> C{Let me think}
+B --> G[/Another/]
+C ==>|One| D[Laptop]
+C -->|Two| E[iPhone]
+C -->|Three| F[Car]
+subgraph Section
+C
+D
+E
+F
+G
+end
+{{< /mermaid >}}
+</div>
+
+## Sequence diagram
+
+<div style="background-color:white; padding: 20px">
+{{< mermaid >}}
+sequenceDiagram
+autonumber
+par Action 1
+Alice->>John: Hello John, how are you?
+and Action 2
+Alice->>Bob: Hello Bob, how are you?
+end
+Alice->>+John: Hello John, how are you?
+Alice->>+John: John, can you hear me?
+John-->>-Alice: Hi Alice, I can hear you!
+Note right of John: John is perceptive
+John-->>-Alice: I feel great!
+loop Every minute
+John-->Alice: Great!
+end
+{{< /mermaid >}}
+</div>
+
+## Class diagram
+
+<div style="background-color:white; padding: 20px">
+{{< mermaid >}}
+classDiagram
+Animal "1" <|-- Duck
+Animal <|-- Fish
+Animal <--o Zebra
+Animal : +int age
+Animal : +String gender
+Animal: +isMammal()
+Animal: +mate()
+class Duck{
++String beakColor
++swim()
++quack()
+}
+class Fish{
+-int sizeInFeet
+-canEat()
+}
+class Zebra{
++bool is_wild
++run()
+}
+{{< /mermaid >}}
+</div>
+
+## Entity relationship diagram
+
+<div style="background-color:white; padding: 20px">
+{{< mermaid >}}
+erDiagram
+CUSTOMER }|..|{ DELIVERY-ADDRESS : has
+CUSTOMER ||--o{ ORDER : places
+CUSTOMER ||--o{ INVOICE : "liable for"
+DELIVERY-ADDRESS ||--o{ ORDER : receives
+INVOICE ||--|{ ORDER : covers
+ORDER ||--|{ ORDER-ITEM : includes
+PRODUCT-CATEGORY ||--|{ PRODUCT : contains
+PRODUCT ||--o{ ORDER-ITEM : "ordered in"
+{{< /mermaid >}}
+</div>
+

exampleSite/content/samples/emoji/index.it.md

@@ -0,0 +1,20 @@
+---
+title: "Emoji :parachute:"
+date: 2019-03-05
+description: "Guide to Emoji usage in Blowfish"
+summary: "📖🏞️🧗🏽🐉🧙🏽‍♂️🧚🏽👸"
+tags: ["emoji", "sample"]
+type: 'sample'
+---
+
+Emoji is supported throughout Blowfish by default. Emoji can be used in titles, menu items and article content.
+
+{{< alert >}}
+**Note:** The rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack.
+{{< /alert >}}
+
+Emoji replacements are automatic throughout Blowfish, so you can use shorthand codes in your content and front matter and they will be converted to their corresponding symbols at build time.
+
+**Example:** `see_no_evil` :see_no_evil:, `hear_no_evil` :hear_no_evil:, `speak_no_evil` :speak_no_evil:.
+
+The [Emoji cheat sheet](http://www.emoji-cheat-sheet.com/) is a useful reference for emoji shorthand codes.

exampleSite/content/samples/emoji/index.ja.md

@@ -0,0 +1,20 @@
+---
+title: "Emoji :parachute:"
+date: 2019-03-05
+description: "Guide to Emoji usage in Blowfish"
+summary: "📖🏞️🧗🏽🐉🧙🏽‍♂️🧚🏽👸"
+tags: ["emoji", "sample"]
+type: 'sample'
+---
+
+Emoji is supported throughout Blowfish by default. Emoji can be used in titles, menu items and article content.
+
+{{< alert >}}
+**Note:** The rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack.
+{{< /alert >}}
+
+Emoji replacements are automatic throughout Blowfish, so you can use shorthand codes in your content and front matter and they will be converted to their corresponding symbols at build time.
+
+**Example:** `see_no_evil` :see_no_evil:, `hear_no_evil` :hear_no_evil:, `speak_no_evil` :speak_no_evil:.
+
+The [Emoji cheat sheet](http://www.emoji-cheat-sheet.com/) is a useful reference for emoji shorthand codes.

exampleSite/content/samples/emoji/index.zh-cn.md

@@ -0,0 +1,20 @@
+---
+title: "Emoji :parachute:"
+date: 2019-03-05
+description: "Guide to Emoji usage in Blowfish"
+summary: "📖🏞️🧗🏽🐉🧙🏽‍♂️🧚🏽👸"
+tags: ["emoji", "sample"]
+type: 'sample'
+---
+
+Emoji is supported throughout Blowfish by default. Emoji can be used in titles, menu items and article content.
+
+{{< alert >}}
+**Note:** The rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack.
+{{< /alert >}}
+
+Emoji replacements are automatic throughout Blowfish, so you can use shorthand codes in your content and front matter and they will be converted to their corresponding symbols at build time.
+
+**Example:** `see_no_evil` :see_no_evil:, `hear_no_evil` :hear_no_evil:, `speak_no_evil` :speak_no_evil:.
+
+The [Emoji cheat sheet](http://www.emoji-cheat-sheet.com/) is a useful reference for emoji shorthand codes.

exampleSite/content/samples/external/index.it.md

@@ -0,0 +1,15 @@
+---
+title: "An External Article"
+date: 2019-01-24
+externalUrl: "https://nunocoracao.com/projects/"
+summary: "The `externalUrl` front matter parameter can link to any URL."
+showReadingTime: true
+_build:
+  render: "false"
+  list: "local"
+type: 'sample'
+---
+
+This page uses the `externalUrl` front matter parameter to link to an article outside of this Hugo website.
+
+It's great for things like linking to posts on Medium or to research papers you may have hosted on third party websites.

exampleSite/content/samples/external/index.ja.md

@@ -0,0 +1,15 @@
+---
+title: "An External Article"
+date: 2019-01-24
+externalUrl: "https://nunocoracao.com/projects/"
+summary: "The `externalUrl` front matter parameter can link to any URL."
+showReadingTime: true
+_build:
+  render: "false"
+  list: "local"
+type: 'sample'
+---
+
+This page uses the `externalUrl` front matter parameter to link to an article outside of this Hugo website.
+
+It's great for things like linking to posts on Medium or to research papers you may have hosted on third party websites.

exampleSite/content/samples/external/index.zh-cn.md

@@ -0,0 +1,15 @@
+---
+title: "An External Article"
+date: 2019-01-24
+externalUrl: "https://nunocoracao.com/projects/"
+summary: "The `externalUrl` front matter parameter can link to any URL."
+showReadingTime: true
+_build:
+  render: "false"
+  list: "local"
+type: 'sample'
+---
+
+This page uses the `externalUrl` front matter parameter to link to an article outside of this Hugo website.
+
+It's great for things like linking to posts on Medium or to research papers you may have hosted on third party websites.