I’ve been building and shipping products across multiple roles and industries, from video streaming applications to API platforms. As a product person, my main goal is to understand my users and their specific needs, in order to deliver a product that truly improves their lives.
+
I’ve worked for several years in big companies and recently decided to trade that for the opportunity of working in smaller teams. Definitely prefer the latter where one can succeed/fail faster, learn faster, and overall have a way bigger impact.
+
Currently, I am focused on improving the lives of developers worldwide. I’m trying to write more about my previous experiences / random thoughts and would love to gather your feedback on it. I also love to dedicate my time to helping and mentoring other PMs or people that want to get into product.
+
Recently I’ve also joined AWS Loft to help Startups and their founders with their product strategy.
+
+
diff --git a/exampleSite/docs/categories/product/index.xml b/exampleSite/docs/categories/product/index.xml
new file mode 100644
index 00000000..61440f22
--- /dev/null
+++ b/exampleSite/docs/categories/product/index.xml
@@ -0,0 +1,56 @@
+
+
+
+ Product on Blowfish
+ https://nunocoracao.github.io/blowfish/categories/product/
+ Recent content in Product on Blowfish
+ Hugo -- gohugo.io
+ en
+ Sun, 04 Sep 2022 00:00:00 +0000
+
+ Streaming Wars and What Comes After…
+ https://nunocoracao.github.io/blowfish/posts/202209-streaming-wars/
+ Sun, 04 Sep 2022 00:00:00 +0000
+
+ https://nunocoracao.github.io/blowfish/posts/202209-streaming-wars/
+ Last July and for the first time ever, streaming viewership surpassed cable. The streaming wars began around 2010 when Netflix introduced their first streaming-only plan with no DVD rentals, other players laughed at the time… little did they know. A decade after, there’s a multitude of streaming services available for mainstream entertainment and also for specific niches. What will happen next?
+
+
+
+ Bulk User Add for Docker Business and Teams
+ https://nunocoracao.github.io/blowfish/posts/202207-docker-bulk-add/
+ Wed, 27 Jul 2022 00:00:00 +0000
+
+ https://nunocoracao.github.io/blowfish/posts/202207-docker-bulk-add/
+ Forget manually inviting team members to Docker Desktop. With Bulk Add for Docker Business, invite your entire team with a CSV file or their Docker IDs!
+
+
+
+ Nuno Coração – Meet the Mentor
+ https://nunocoracao.github.io/blowfish/posts/202206-mentorcruise-interview-copy/
+ Sun, 26 Jun 2022 00:00:00 +0000
+
+ https://nunocoracao.github.io/blowfish/posts/202206-mentorcruise-interview-copy/
+ Nuno Coração is one of our professional mentors on MentorCruise and works as Staff Product Manager at Docker.
+
+
+
+ Nuno Coração – Meet the Mentor
+ https://nunocoracao.github.io/blowfish/posts/202206-mentorcruise-interview/
+ Sun, 26 Jun 2022 00:00:00 +0000
+
+ https://nunocoracao.github.io/blowfish/posts/202206-mentorcruise-interview/
+ Nuno Coração is one of our professional mentors on MentorCruise and works as Staff Product Manager at Docker.
+
+
+
+ The Future of the Nintendo Switch
+ https://nunocoracao.github.io/blowfish/posts/202109-the-future-of-nintendo/
+ Thu, 09 Sep 2021 00:00:00 +0000
+
+ https://nunocoracao.github.io/blowfish/posts/202109-the-future-of-nintendo/
+ Nintendo achieved something truly amazing with the launch of the Switch. It was able to disrupt itself and the entire gaming industry while saving itself from doom. How exactly was Nintendo able to do it and what comes next in that story?
+
+
+
+
diff --git a/exampleSite/docs/categories/product/page/1/index.html b/exampleSite/docs/categories/product/page/1/index.html
new file mode 100644
index 00000000..1634e00d
--- /dev/null
+++ b/exampleSite/docs/categories/product/page/1/index.html
@@ -0,0 +1,10 @@
+
+
+
+ https://nunocoracao.github.io/blowfish/categories/product/
+
+
+
+
+
+
diff --git a/exampleSite/docs/categories/strategy/index.html b/exampleSite/docs/categories/strategy/index.html
new file mode 100644
index 00000000..40a66299
--- /dev/null
+++ b/exampleSite/docs/categories/strategy/index.html
@@ -0,0 +1,485 @@
+
+
+
+
+
+
+
+
+
+
+
+ Strategy · Blowfish
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/exampleSite/docs/categories/strategy/index.xml b/exampleSite/docs/categories/strategy/index.xml
new file mode 100644
index 00000000..afa87006
--- /dev/null
+++ b/exampleSite/docs/categories/strategy/index.xml
@@ -0,0 +1,29 @@
+
+
+
+ Strategy on Blowfish
+ https://nunocoracao.github.io/blowfish/categories/strategy/
+ Recent content in Strategy on Blowfish
+ Hugo -- gohugo.io
+ en
+ Sun, 04 Sep 2022 00:00:00 +0000
+
+ Streaming Wars and What Comes After…
+ https://nunocoracao.github.io/blowfish/posts/202209-streaming-wars/
+ Sun, 04 Sep 2022 00:00:00 +0000
+
+ https://nunocoracao.github.io/blowfish/posts/202209-streaming-wars/
+ Last July and for the first time ever, streaming viewership surpassed cable. The streaming wars began around 2010 when Netflix introduced their first streaming-only plan with no DVD rentals, other players laughed at the time… little did they know. A decade after, there’s a multitude of streaming services available for mainstream entertainment and also for specific niches. What will happen next?
+
+
+
+ The Future of the Nintendo Switch
+ https://nunocoracao.github.io/blowfish/posts/202109-the-future-of-nintendo/
+ Thu, 09 Sep 2021 00:00:00 +0000
+
+ https://nunocoracao.github.io/blowfish/posts/202109-the-future-of-nintendo/
+ Nintendo achieved something truly amazing with the launch of the Switch. It was able to disrupt itself and the entire gaming industry while saving itself from doom. How exactly was Nintendo able to do it and what comes next in that story?
+
+
+
+
diff --git a/exampleSite/docs/categories/strategy/page/1/index.html b/exampleSite/docs/categories/strategy/page/1/index.html
new file mode 100644
index 00000000..f612f22a
--- /dev/null
+++ b/exampleSite/docs/categories/strategy/page/1/index.html
@@ -0,0 +1,10 @@
+
+
+
+ https://nunocoracao.github.io/blowfish/categories/strategy/
+
+
+
+
+
+
diff --git a/exampleSite/docs/categories/tutorial/index.html b/exampleSite/docs/categories/tutorial/index.html
new file mode 100644
index 00000000..cf62650c
--- /dev/null
+++ b/exampleSite/docs/categories/tutorial/index.html
@@ -0,0 +1,409 @@
+
+
+
+
+
+
+
+
+
+
+
+ Tutorial · Blowfish
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
There are many ways you can make advanced changes to Congo. Read below to learn more about what can be customised and the best way of achieving your desired result.
Before leaping into it, first a quick note about Hugo project structure and best practices for managing your content and theme customisations.
+
+
+
+
+
+
+
+
+
+
+
+ In summary: Never directly edit the theme files. Only make customisations in your Hugo project’s sub-directories, not in the themes directory itself.
+
+
+
Congo 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 overriden 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. 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 Congo, 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.
Congo 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 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.
+
Congo 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 by providing the red, green and blue colour values.
+
: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.
Sometimes you need to add a custom style to style your own HTML elements. Congo 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.
Changing the font size of your website is one example of overriding the default stylesheet. Congo 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 and add the following CSS declaration:
+
/* 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.
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.
+
+
+
+
+
+
+
+
+
+
+
+ Note: Building the theme manually is intended for advanced users.
+
+
+
Let’s step through how building the Tailwind CSS works.
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:
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 Congo in your project as a subdirectory at themes/congo/. 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 explain how to install the theme using either of these methods.
In order to take advantage of the default configuration, your project should look something like this…
+
.
+├── 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.html
+│ ├── projects
+│ │ └── list.html
+│ └── shortcodes
+│ └── disclaimer.html
+└── themes
+ └── congo # 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.
In order for this to work you’ll need to change into the themes/congo/ directory and install the project dependencies. You’ll need npm on your local machine for this step.
With the dependencies installed all that’s left is to use Tailwind CLI to invoke the JIT compiler. Navigate back to the root of your Hugo project and issue the following command:
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.
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…
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.
Congo 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.
+
+
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.
+
+
+
+
+
+
+
+
+
+
+
+ As outlined in the installation instructions, 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.
+
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 Congo 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).
+
+
+
+
+
Name
+
Default
+
Description
+
+
+
+
+
theme
+
"congo"
+
When using Hugo Modules this config value should be removed. For all other installation types, this must be set to congo 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 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 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. 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. Congo requires HTML, RSS and JSON for all theme components to work correctly.
+
+
+
permalinks
+
Not set
+
Refer to the Hugo docs for permalink configuration.
Congo 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
+
+
+
+
+
🇬🇧 English
+
en
+
+
+
🇧🇩 Bengali
+
bn
+
+
+
🇨🇳 Simplified Chinese (China)
+
zh-cn
+
+
+
🇹🇼 Traditional Chinese (Taiwan)
+
zh-tw
+
+
+
🇫🇮 Finnish
+
fi
+
+
+
🇫🇷 French
+
fr
+
+
+
🇩🇪 German
+
de
+
+
+
🇮🇱 Hebrew
+
he
+
+
+
🇭🇺 Hungarian
+
hu
+
+
+
🇮🇹 Italian
+
it
+
+
+
🇯🇵 Japanese
+
ja
+
+
+
🇧🇷 Portuguese (Brazil)
+
pt-br
+
+
+
🇵🇹 Portuguese (Portugal)
+
pt-pt
+
+
+
🇷🇴 Romanian
+
ro
+
+
+
🇪🇸 Spanish (Spain)
+
es
+
+
+
🇹🇷 Turkish
+
tr
+
+
+
+
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.
In order to be as flexible as possible, a language configuration file needs to be created for each language on the website. By default Congo 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.
+
+
+
+
+
+
+
+
+
+
+
+ Note: Ensure the defaultContentLanguage parameter in the site configuration matches the language code in your language config filename.
+
+
+
+
+
+
+
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.
+
+
+
displayName
+
"EN"
+
The name used when the language appears on the website.
+
+
+
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).
+
+
+
weight
+
1
+
The weight determines the order of languages when building multilingual sites.
+
+
+
rtl
+
false
+
Whether or not this is a RTL language. Set to true to reflow content from right-to-left. Congo fully supports using RTL and LTR languages at the same time and will dynamically adjust to both.
+
+
+
dateFormat
+
"2 January 2006"
+
How dates are formatted in this language. Refer to the Hugo docs for acceptable formats.
+
+
+
title
+
"Congo"
+
The title of the website. This will be displayed in the site header and footer.
+
+
+
description
+
Not set
+
The website description. This will be used in the site metadata.
+
+
+
copyright
+
Not set
+
A Markdown string containing the copyright message to be displayed in the site footer. If none is provided, Congo will automatically generate a copyright string using the site title.
+
+
+
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 and placed in the site’s assets/ folder.
+
+
+
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/.
Congo 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 section explains more about the structure of this file. You can also refer to the Hugo menu docs for more configuration examples.
Congo 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 section for further details.
+
+
+
+
+
Name
+
Default
+
Description
+
+
+
+
+
colorScheme
+
"congo"
+
The theme colour scheme to use. Valid values are congo (default), avocado, ocean, fire and slate. Refer to the 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 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 below.
+
+
+
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.
+
+
+
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.
+
+
+
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 for valid values.
+
+
+
header.layout
+
"basic"
+
The layout of the page header and menu. Valid values are basic, hamburger or custom. When set to custom, you must provide your own layout by creating a /layouts/partials/header/custom.html 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.
+
+
+
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.layout
+
"page"
+
The layout of the homepage. Valid values are page, profile 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 section for more details.
+
+
+
homepage.showRecent
+
false
+
Whether or not to display the recent articles list on the homepage.
+
+
+
article.showDate
+
true
+
Whether or not article dates are displayed.
+
+
+
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.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.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.showTaxonomies
+
false
+
Whether or not the taxonomies related to this article are displayed.
+
+
+
article.showWordCount
+
false
+
Whether or not article word counts are displayed.
+
+
+
article.showComments
+
false
+
Whether or not the comments partial 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.
+
+
+
list.showBreadcrumbs
+
false
+
Whether or not breadcrumbs are displayed in the header on list pages.
+
+
+
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, one will be auto generated using the summaryLength parameter in the site configuration.
+
+
+
list.groupByYear
+
true
+
Whether or not articles are grouped by year on list pages.
+
+
+
sitemap.excludedKinds
+
["taxonomy", "term"]
+
Kinds of content that should be excluded from the generated /sitemap.xml file. Refer to the Hugo docs for acceptable values.
+
+
+
taxonomy.showTermCount
+
true
+
Whether or not the number of articles within a taxonomy term is displayed on the taxonomy listing.
+
+
+
fathomAnalytics.site
+
Not set
+
The site code generated by Fathom Analytics for the website. Refer to the Analytics docs 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.
+
+
+
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.
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 Congo.
+
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 fucntion incorrectly and could result in unintended behaviour.
If you’ve been reading the documentation in order, you should now know about all the features and configurations available in Congo. This page is designed to pull everything together and offer some worked examples that you might like to use in your Hugo project.
+
+
+
+
+
+
+
+
+
+
+
+ Tip: If you’re new to Hugo, be sure to check out the official docs to learn more about the concept of page bundles and resources.
+
+
+
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 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.
+
Congo 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.
The homepage in Congo 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 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:
+
---
+title:"Welcome to Congo!"
+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 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.
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. Congo will then list any pages in this section below the content.
+
Example:
+
---
+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 of this site is an example of a list page.
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.
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:
+
---
+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 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.
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”.
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.mdwithout 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.
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:
+
---
+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 parameters that can be used to customise how they are displayed.
Congo 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:
+
---
+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 Congo 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.
Congo 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 variables.
+
To enable the simple layout on a particular page, add the layout front matter variable with a value of "simple":
+
---
+title:"My landing page"
+date:2022-03-08
+layout:"simple"
+---
+This page content is now full-width.
+
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.
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.
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.
+
---
+title:"Congo"
+date:2021-08-11
+icon:"github"
+description:"A theme for Hugo built with Tailwind CSS."
+topics:["Hugo","Web","Tailwind"]
+externalUrl:"https://github.com/jpanther/congo/"
+---
+
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.
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 section.
+
When making custom templates like this one, it’s always easiest to take a look at how the default Congo template works and then use that as a guide. Remember, the Hugo docs are a great resource to learn more about creating templates too.
In addition to the default Hugo front matter parameters, Congo 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, so you only need to specify these parameters in your front matter when you want to override the default.
+
+
+
+
+
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 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 is displayed in the article footer.
+
+
+
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 is included after the article footer.
+
+
+
showSummary
+
list.showSummary
+
Whether or not the article summary should be displayed on list pages.
The config files that ship with Congo 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.
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.
The next step is to configure the language settings. Although Congo 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.
+
+
+
+
+
+
+
+
+
+
+
+ Note that the language code in the language config filename should match the languageCode setting in config.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 section.
Congo ships with a number of colour schemes out of the box. To change the scheme, simply set the colorScheme theme parameter. Valid options are congo (default), avocado, fire, ocean and slate.
Congo 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.
By default, Congo 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 Congo project. All content is placed within the content folder:
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 for more information.
+
Congo 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:
Congo 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.
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.
+
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.
The steps above are the bare minimum configuration. If you now run hugo server you will be presented with a blank Congo website. Detailed configuration is covered in the Configuration section.
Congo 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.
The default layout is the page layout. It’s simply a normal content page that displays your Markdown content. It’s great for static websites and provides a lot of flexibility.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
To enable the page layout, set homepage.layout = "page" in the params.toml configuration file.
The profile layout 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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
The author information is provided in the languages configuration file. Refer to the Getting Started and Language Configuration 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.
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 on the custom layout, use the recent-articles.html partial.
+
As an example, the homepage on this site uses the custom layout to allow toggling between the profile and page layouts. Visit the GitHub repo to see how it works.
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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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"].
There are many ways to deploy your Hugo website built with Congo. The theme is designed to be flexible in almost any deployment scenario.
+
Congo 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 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.
GitHub allows hosting on 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.
+
+
+
+
+
+
+
+
+
+
+
+ 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.
+
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.
+
+
+
+
+
+
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.
To deploy to Netlify, 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.
+
+
+
+
+
+
Then in the root of your site repository, create a netlify.toml file:
+
# 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.100.2"
+HUGO_ENV="production"
+
+[context.deploy-preview.environment]
+HUGO_VERSION="0.100.2"
+
This configuration assumes you are deploying Congo 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.
Deploying to Render 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.
+
+
+
+
+
+
The site will automatically build and deploy whenever you push a change to your repo.
Cloudflare offers the Pages 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 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.
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 or DigitalOcean. Signing up using these affiliate links will give you up to $100 in free credit so you can try the service.
+ Simple, yet powerful. Learn how to use Congo and its features.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
This section contains everything you need to know about Congo. If you’re new, check out the Installation guide to begin or visit the Samples section to see what Congo can do.
+
+
diff --git a/exampleSite/docs/docs/index.xml b/exampleSite/docs/docs/index.xml
new file mode 100644
index 00000000..ee811385
--- /dev/null
+++ b/exampleSite/docs/docs/index.xml
@@ -0,0 +1,106 @@
+
+
+
+ Documentation on Blowfish
+ https://nunocoracao.github.io/blowfish/docs/
+ Recent content in Documentation on Blowfish
+ Hugo -- gohugo.io
+ en
+ Thu, 20 Jan 2022 00:00:00 +0000
+
+ Installation
+ https://nunocoracao.github.io/blowfish/docs/installation/
+ Sun, 16 Aug 2020 00:00:00 +0000
+
+ https://nunocoracao.github.io/blowfish/docs/installation/
+ Simply follow the standard Hugo Quick Start procedure to get up and running quickly.
+Detailed installation instructions can be found below. Instructions for updating the theme are also available.
+Installation # These instructions will get you up and running using Hugo and Congo from a completely blank state.
+
+
+
+ Getting Started
+ https://nunocoracao.github.io/blowfish/docs/getting-started/
+ Sat, 15 Aug 2020 00:00:00 +0000
+
+ https://nunocoracao.github.io/blowfish/docs/getting-started/
+ This section assumes you have already installed the Congo theme. The config files that ship with Congo 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.
+
+
+
+ Configuration
+ https://nunocoracao.github.io/blowfish/docs/configuration/
+ Fri, 14 Aug 2020 00:00:00 +0000
+
+ https://nunocoracao.github.io/blowfish/docs/configuration/
+ Congo 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.
+
+
+
+ Homepage Layout
+ https://nunocoracao.github.io/blowfish/docs/homepage-layout/
+ Thu, 13 Aug 2020 00:00:00 +0000
+
+ https://nunocoracao.github.io/blowfish/docs/homepage-layout/
+ Congo 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.
+
+
+
+ Front Matter
+ https://nunocoracao.github.io/blowfish/docs/front-matter/
+ Wed, 12 Aug 2020 00:00:00 +0000
+
+ https://nunocoracao.github.io/blowfish/docs/front-matter/
+ In addition to the default Hugo front matter parameters, Congo adds a number of additional options to customise the presentation of individual articles. All the available theme front matter parameters are listed below.
+
+
+
+ Shortcodes
+ https://nunocoracao.github.io/blowfish/docs/shortcodes/
+ Tue, 11 Aug 2020 00:00:00 +0000
+
+ https://nunocoracao.github.io/blowfish/docs/shortcodes/
+ In addition to all the default Hugo shortcodes, Congo 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.
+
+
+
+ Partials
+ https://nunocoracao.github.io/blowfish/docs/partials/
+ Mon, 10 Aug 2020 00:00:00 +0000
+
+ https://nunocoracao.github.io/blowfish/docs/partials/
+ Analytics # Congo provides built-in support for Fathom Analytics and Google Analytics. Fathom is a paid alternative to Google Analytics that respects user privacy. If you’re interested you can use this affiliate link to receive $10 credit and try the service.
+
+
+
+ Content Examples
+ https://nunocoracao.github.io/blowfish/docs/content-examples/
+ Sun, 09 Aug 2020 00:00:00 +0000
+
+ https://nunocoracao.github.io/blowfish/docs/content-examples/
+ If you’ve been reading the documentation in order, you should now know about all the features and configurations available in Congo. This page is designed to pull everything together and offer some worked examples that you might like to use in your Hugo project.
+
+
+
+ Advanced Customisation
+ https://nunocoracao.github.io/blowfish/docs/advanced-customisation/
+ Sat, 08 Aug 2020 00:00:00 +0000
+
+ https://nunocoracao.github.io/blowfish/docs/advanced-customisation/
+ There are many ways you can make advanced changes to Congo. Read below to learn more about what can be customised and the best way of achieving your desired result.
+
+
+
+ Hosting & Deployment
+ https://nunocoracao.github.io/blowfish/docs/hosting-deployment/
+ Fri, 07 Aug 2020 00:00:00 +0000
+
+ https://nunocoracao.github.io/blowfish/docs/hosting-deployment/
+ There are many ways to deploy your Hugo website built with Congo. The theme is designed to be flexible in almost any deployment scenario.
+Congo is built using relative URLs throughout the theme.
+
+
+
+
diff --git a/exampleSite/docs/docs/installation/index.html b/exampleSite/docs/docs/installation/index.html
new file mode 100644
index 00000000..7f8be592
--- /dev/null
+++ b/exampleSite/docs/docs/installation/index.html
@@ -0,0 +1,884 @@
+
+
+
+
+
+
+
+
+
+
+
+ Installation · Blowfish
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
These instructions will get you up and running using Hugo and Congo 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.
If you haven’t used Hugo before, you will need to install it onto your local machine. You can check if it’s already installed by running the command hugo version.
+
+
+
+
+
+
+
+
+
+
+
+ Make sure you are using Hugo version 0.87.0 or later as the theme takes advantage of some of the latest Hugo features.
+
+
+
You can find detailed installation instructions for your platform in the Hugo docs.
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.
This method is the quickest and easiest for keeping the theme up-to-date. Hugo uses Go to initialise and manage modules so you need to ensure you have go installed before proceeding.
+
+
+
Download and install Go. You can check if it’s already installed by using the command go version.
+
+
+
+
+
+
+
+
+
+
+
+ Make sure you are using Go version 1.12 or later as Hugo requires this for modules to work correctly.
+
+
+
+
+
From your Hugo project directory (that you created above), initialise modules for your website:
+
# 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
+
+
+
Add the theme to your configuration by creating a new file config/_default/module.toml and adding the following:
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.
+
+
+
+
+
+
+
+
+
+
+
+ Note: You should not overwrite the module.toml file if one already exists in your project!
+
+
+
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 from GitHub
+
Git submodule or Manual install:themes/congo/config/_default
+
+
Once you’ve copied the files, your config folder should look like this:
+
config/_default/
+├─ config.toml
+├─ markup.toml
+├─ menus.toml
+├─ module.toml # if you installed using Hugo Modules
+└─ params.toml
+
+
+
+
+
+
+
+
+
+
+
+ Important: If you didn’t use Hugo Modules to install Congo, you must add the line theme = "congo" to the top of your config.toml file.
+
From time to time there will be new 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.
Hugo makes updating modules super easy. Simply change into your project directory and execute the following command:
+
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.
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:
+
git submodule update --remote --merge
+
Once the submodule has been updated, rebuild your site and check everything works as expected.
Extract the archive, rename the folder to congo 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.
+
+
+
Rebuild your site and check everything works as expected.
Congo provides built-in support for Fathom Analytics and Google Analytics. Fathom is a paid alternative to Google Analytics that respects user privacy. If you’re interested you can use this affiliate link to receive $10 credit and try the service.
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.
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:
+
# config/_default/config.toml
+
+# version 3
+googleAnalytics="UA-PROPERTY_ID"
+# version 4
+googleAnalytics="G-MEASUREMENT_ID"
+
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/analytics.html in your project and it will automatically include it in the <head> of the website.
To add comments to your articles, Congo 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 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.tomlconfig file, or on a per-article basis by including it in the 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.
Congo 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.
+
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, these will be the filenames that are automatically generated for you, but you can provide your own assets if you wish.
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.
Similar to the icon shortcode, you can include icons in your own templates and partials by using Congo’s icon.html partial. The partial takes one parameter which is the name of the icon to be included.
+
Example:
+
{{partial"icon.html""github"}}
+
Icons are populated using Hugo pipelines which makes them very flexible. Congo includes a number of built-in icons for social, links and other purposes. Check the icon samples 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.
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 shortcode which can be used to highlight metadata for certain articles.
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.
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.
+
The input is written in Markdown so you can format it however you please.
+
By default, the alert is presented with an exclaimation triangle icon. To change the icon, include the icon name in the shortcode. Check out the icon shortcode for more details on using icons.
+
Example:
+
{{<alert>}}
+**Warning!** This action is destructive!
+{{</alert>}}
+
+{{<alert"twitter">}}
+Don't forget to [follow me](https://twitter.com/jpanther) on Twitter.
+{{</alert>}}
+
+
+
+
+
+
+
+
+
+
+
+ Warning! This action is destructive!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Don’t forget to follow me on Twitter.
+
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:
+
{{<buttonhref="#button"target="_self">}}
+Call to action
+{{</button>}}
+
chart uses the Chart.js library to embed charts into articles using simple structured data. It supports a number of different chart styles 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.
Congo 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:
+
+
+
+
+
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 bundled with the page; then an asset in the assets/ directory; then finally, a static image in the static/ directory.
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.
+
+
+
default
+
Special parameter to revert to default Hugo figure behaviour. Simply provide default=true and then use normal Hugo shortcode syntax.
+
+
+
+
+
Congo also supports automatic conversion of images included using standard Markdown syntax. Simply use the following format and the theme will handle the rest:
+
![Alt text](image.jpg "Image caption")
+
Example:
+
{{<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/)")
+
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:
+
{{<icon"github">}}
+
Output:
+
+
+
+
+
+
+
+
Icons are populated using Hugo pipelines which makes them very flexible. Congo includes a number of built-in icons for social, links and other purposes. Check the icon samples 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.
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 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.
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:
+
{{<lead>}}
+When life gives you lemons, make lemonade.
+{{</lead>}}
+
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 for details on syntax and supported diagram types.
+ Congo 2.0 is packed with tons of new features and optimisations.
+
+
+
The original aim of Congo was to develop a theme that was simple and lightweight. Version 2 takes this one step further and makes the theme even more powerful while still maintaining its lightweight footprint.
+
Continue reading below to discover what’s new. When you’re ready to upgrade, check out the guide to upgrading.
Tailwind CSS is at the heart of Congo and this new release contains the very latest Tailwind CSS version 3. It brings with it performance optimisations and support for some great new CSS features.
+
+
+
+
+
+
Implementing this new version has also removed some Tailwind plugin dependencies from the theme, allowing the overall footprint to remain lightweight.
A highly requested feature, Congo is now multilingual! If you publish your content in multiple languages, the site will be built with all the translations available.
+
🇬🇧 🇩🇪 🇫🇷 🇪🇸 🇨🇳 🇧🇷 🇹🇷 🇧🇩
+
Thanks to submissions from the community, Congo has already been translated into eight languages with more to be added over time. By the way, pull requests for new languages are always welcome!
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.
A big change in Congo 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.
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.
This update packs performance improvements throughout. A key objective for this release was to improve Lighthouse scores and Congo now scores a perfect 100 on all four metrics.
+
+
+
+
+
+
There’s too many individual changes to highlight them here but the results speak for themselves. If you want to dig deeper, you can view the Lighthouse report. Real world performance will vary based upon server configuration.
Powered by Fuse.js, 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!
A highly requested feature, Congo 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.
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.
There’s countless other minor changes 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 strucured data which further optimises SEO performance. Plus the entire theme has had extra polish to ensure a consistent design language.
+
+
diff --git a/exampleSite/docs/docs/version-2/index.xml b/exampleSite/docs/docs/version-2/index.xml
new file mode 100644
index 00000000..99ecbcc1
--- /dev/null
+++ b/exampleSite/docs/docs/version-2/index.xml
@@ -0,0 +1,21 @@
+
+
+
+ What's New in 2.0 ✨ on Blowfish
+ https://nunocoracao.github.io/blowfish/docs/version-2/
+ Recent content in What's New in 2.0 ✨ on Blowfish
+ Hugo -- gohugo.io
+ en
+ Wed, 19 Jan 2022 00:00:00 +0000
+
+ Upgrading from Congo 1.x
+ https://nunocoracao.github.io/blowfish/docs/version-2/upgrade/
+ Thu, 20 Jan 2022 00:00:00 +0000
+
+ https://nunocoracao.github.io/blowfish/docs/version-2/upgrade/
+ Although Congo 2.0 contains a large number of changes, the theme has been designed to minimise the effort required to upgrade to the latest release.
+That said, there are some changes that require adjustments to existing sites that are built with Congo version 1.
+
+
+
+
diff --git a/exampleSite/docs/docs/version-2/lighthouse.html b/exampleSite/docs/docs/version-2/lighthouse.html
new file mode 100644
index 00000000..1a72b63c
--- /dev/null
+++ b/exampleSite/docs/docs/version-2/lighthouse.html
@@ -0,0 +1,11700 @@
+
+
+
+
+ Lighthouse Report
+
+
+
+
+
OpportunitiesThese suggestions can help your page load faster. They don't directly affect the Performance score.
+
Opportunity
+
Estimated Savings
+
+
+
+
+
+
+
+
Reduce unused CSS
+
+
+
+
+
+
0.29 s
+
+
+
+
+
+
Reduce unused rules from stylesheets and defer CSS not used for above-the-fold content to decrease bytes consumed by network activity. Learn more.FCPLCP
The Critical Request Chains below show you what resources are loaded with a high priority. Consider reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load. Learn more.FCPLCP
+
+
+ Eliminate render-blocking resources
+ Potential savings of 0 ms
+
+
+
+
+
Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles. Learn more.FCPLCP
Serve images that are appropriately-sized to save cellular data and improve load time. Learn more.
+
+
+
+
+
+
+
+
+ Defer offscreen images
+
+
+
+
+
+
Consider lazy-loading offscreen and hidden images after all critical resources have finished loading to lower time to interactive. Learn more.
+
+
+
+
+
+
+
+
+ Minify CSS
+
+
+
+
+
+
Minifying CSS files can reduce network payload sizes. Learn more.FCPLCP
+
+
+
+
+
+
+
+
+ Minify JavaScript
+
+
+
+
+
+
Minifying JavaScript files can reduce payload sizes and script parse time. Learn more.FCPLCP
+
+
+
+
+
+
+
+
+ Efficiently encode images
+
+
+
+
+
+
Optimized images load faster and consume less cellular data. Learn more.
+
+
+
+
+
+
+
+
+ Serve images in next-gen formats
+
+
+
+
+
+
Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption. Learn more.
+
+
+
+
+
+
+
+
+ Preconnect to required origins
+
+
+
+
+
+
Consider adding `preconnect` or `dns-prefetch` resource hints to establish early connections to important third-party origins. Learn more.FCPLCP
+
+
+
+
+
+
+
+
+ Initial server response time was short
+ Root document took 0 ms
+
+
+
+
+
Keep the server response time for the main document short because all other requests depend on it. Learn more.FCPLCP
Redirects introduce additional delays before the page can be loaded. Learn more.FCPLCP
+
+
+
+
+
+
+
+
+ Preload key requests
+
+
+
+
+
+
Consider using `<link rel=preload>` to prioritize fetching resources that are currently requested later in page load. Learn more.FCPLCP
+
+
+
+
+
+
+
+
+ Use HTTP/2
+
+
+
+
+
+
HTTP/2 offers many benefits over HTTP/1.1, including binary headers and multiplexing. Learn more.
+
+
+
+
+
+
+
+
+ Use video formats for animated content
+
+
+
+
+
+
Large GIFs are inefficient for delivering animated content. Consider using MPEG4/WebM videos for animations and PNG/WebP for static images instead of GIF to save network bytes. Learn moreLCP
Remove large, duplicate JavaScript modules from bundles to reduce unnecessary bytes consumed by network activity. TBT
+
+
+
+
+
+
+
+
+ Avoid serving legacy JavaScript to modern browsers
+ Potential savings of 0 KiB
+
+
+
+
+
Polyfills and transforms enable legacy browsers to use new JavaScript features. However, many aren't necessary for modern browsers. For your bundled JavaScript, adopt a modern script deployment strategy using module/nomodule feature detection to reduce the amount of code shipped to modern browsers, while retaining support for legacy browsers. Learn MoreTBT
Consider reducing the time spent parsing, compiling and executing JS. You may find delivering smaller JS payloads helps with this. Learn moreTBT
+
+
Category
Time Spent
Style & Layout
1,117 ms
Rendering
252 ms
Other
53 ms
Script Evaluation
20 ms
Parse HTML & CSS
8 ms
Script Parsing & Compilation
3 ms
+
+
+
+
+
+
+ All text remains visible during webfont loads
+
+
+
+
+
+
Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading. Learn more.FCPLCP
+
+
+
+
+
+
+
+
+ Minimize third-party usage
+
+
+
+
+
+
Third-party code can significantly impact load performance. Limit the number of redundant third-party providers and try to load third-party code after your page has primarily finished loading. Learn more.TBT
These checks highlight opportunities to improve the accessibility of your web app. Only a subset of accessibility issues can be automatically detected so manual testing is also encouraged.
+
+
+
+
+
+ Additional items to manually check
+ (10)
+
+
+ These items address areas which an automated testing tool cannot cover. Learn more in our guide on conducting an accessibility review.
+
+
+
+
+
+
+
+
+
+ The page has a logical tab order
+
+
+
+
+
+
Tabbing through the page follows the visual layout. Users cannot focus elements that are offscreen. Learn more.
Custom interactive controls have associated labels, provided by aria-label or aria-labelledby. Learn more.
+
+
+
+
+
+
+
+
+ Custom controls have ARIA roles
+
+
+
+
+
+
Custom interactive controls have appropriate ARIA roles. Learn more.
+
+
+
+
+
+
+
+
+ Visual order on the page follows DOM order
+
+
+
+
+
+
DOM order matches the visual order, improving navigation for assistive technology. Learn more.
+
+
+
+
+
+
+
+
+ Offscreen content is hidden from assistive technology
+
+
+
+
+
+
Offscreen content is hidden with display: none or aria-hidden=true. Learn more.
+
+
+
+
+
+
+
+
+ HTML5 landmark elements are used to improve navigation
+
+
+
+
+
+
Landmark elements (<main>, <nav>, etc.) are used to improve the keyboard navigation of the page for assistive technology. Learn more.
+
+
+
+
+
+
+ Passed audits
+ (18)
+
+
+
+
+
+
+
+
+
+
+
+
+ [aria-*] attributes match their roles
+
+
+
+
+
+
Each ARIA `role` supports a specific subset of `aria-*` attributes. Mismatching these invalidates the `aria-*` attributes. Learn more.
+
+
+
+
+
+
+
+
+ [aria-hidden="true"] is not present on the document <body>
+
+
+
+
+
+
Assistive technologies, like screen readers, work inconsistently when `aria-hidden="true"` is set on the document `<body>`. Learn more.
+
+
+
+
+
+
+
+
+ [aria-hidden="true"] elements do not contain focusable descendents
+
+
+
+
+
+
Focusable descendents within an `[aria-hidden="true"]` element prevent those interactive elements from being available to users of assistive technologies like screen readers. Learn more.
Assistive technologies, like screen readers, can't interpret ARIA attributes with invalid values. Learn more.
+
+
+
+
+
+
+
+
+ [aria-*] attributes are valid and not misspelled
+
+
+
+
+
+
Assistive technologies, like screen readers, can't interpret ARIA attributes with invalid names. Learn more.
+
+
+
+
+
+
+
+
+ Buttons have an accessible name
+
+
+
+
+
+
When a button doesn't have an accessible name, screen readers announce it as "button", making it unusable for users who rely on screen readers. Learn more.
+
+
+
+
+
+
+
+
+ The page contains a heading, skip link, or landmark region
+
+
+
+
+
+
Adding ways to bypass repetitive content lets keyboard users navigate the page more efficiently. Learn more.
+
+
+
+
+
+
+
+
+ Background and foreground colors have a sufficient contrast ratio
+
+
+
+
+
+
Low-contrast text is difficult or impossible for many users to read. Learn more.
+
+
+
+
+
+
+
+
+ Document has a <title> element
+
+
+
+
+
+
The title gives screen reader users an overview of the page, and search engine users rely on it heavily to determine if a page is relevant to their search. Learn more.
+
+
+
+
+
+
+
+
+ [id] attributes on active, focusable elements are unique
+
+
+
+
+
+
All focusable elements must have a unique `id` to ensure that they're visible to assistive technologies. Learn more.
+
+
+
+
+
+
+
+
+ Heading elements appear in a sequentially-descending order
+
+
+
+
+
+
Properly ordered headings that do not skip levels convey the semantic structure of the page, making it easier to navigate and understand when using assistive technologies. Learn more.
+
+
+
+
+
+
+
+
+ <html> element has a [lang] attribute
+
+
+
+
+
+
If a page doesn't specify a lang attribute, a screen reader assumes that the page is in the default language that the user chose when setting up the screen reader. If the page isn't actually in the default language, then the screen reader might not announce the page's text correctly. Learn more.
+
+
+
+
+
+
+
+
+ <html> element has a valid value for its [lang] attribute
+
+
+
+
+
+
+ Image elements have [alt] attributes
+
+
+
+
+
+
Informative elements should aim for short, descriptive alternate text. Decorative elements can be ignored with an empty alt attribute. Learn more.
+
+
+
+
+
+
+
+
+ Links have a discernible name
+
+
+
+
+
+
Link text (and alternate text for images, when used as links) that is discernible, unique, and focusable improves the navigation experience for screen reader users. Learn more.
+
+
+
+
+
+
+
+
+ Lists contain only <li> elements and script supporting elements (<script> and <template>).
+
+
+
+
+
+
Screen readers have a specific way of announcing lists. Ensuring proper list structure aids screen reader output. Learn more.
+
+
+
+
+
+
+
+
+ List items (<li>) are contained within <ul> or <ol> parent elements
+
+
+
+
+
+
Screen readers require list items (`<li>`) to be contained within a parent `<ul>` or `<ol>` to be announced properly. Learn more.
+
+
+
+
+
+
+
+
+ [user-scalable="no"] is not used in the <meta name="viewport"> element and the [maximum-scale] attribute is not less than 5.
+
+
+
+
+
+
Disabling zooming is problematic for users with low vision who rely on screen magnification to properly see the contents of a web page. Learn more.
+
+
+
+
+
+
+ Not applicable
+ (26)
+
+
+
+
+
+
+
+
+
+
+
+
+ [accesskey] values are unique
+
+
+
+
+
+
Access keys let users quickly focus a part of the page. For proper navigation, each access key must be unique. Learn more.
+
+
+
+
+
+
+
+
+ button, link, and menuitem elements have accessible names
+
+
+
+
+
+
When an element doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. Learn more.
When an input field doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. Learn more.
+
+
+
+
+
+
+
+
+ ARIA meter elements have accessible names
+
+
+
+
+
+
When an element doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. Learn more.
+
+
+
+
+
+
+
+
+ ARIA progressbar elements have accessible names
+
+
+
+
+
+
When an element doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. Learn more.
+
+
+
+
+
+
+
+
+ [role]s have all required [aria-*] attributes
+
+
+
+
+
+
Some ARIA roles have required attributes that describe the state of the element to screen readers. Learn more.
+
+
+
+
+
+
+
+
+ Elements with an ARIA [role] that require children to contain a specific [role] have all required children.
+
+
+
+
+
+
Some ARIA parent roles must contain specific child roles to perform their intended accessibility functions. Learn more.
+
+
+
+
+
+
+
+
+ [role]s are contained by their required parent element
+
+
+
+
+
+
Some ARIA child roles must be contained by specific parent roles to properly perform their intended accessibility functions. Learn more.
+
+
+
+
+
+
+
+
+ [role] values are valid
+
+
+
+
+
+
ARIA roles must have valid values in order to perform their intended accessibility functions. Learn more.
When a toggle field doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. Learn more.
+
+
+
+
+
+
+
+
+ ARIA tooltip elements have accessible names
+
+
+
+
+
+
When an element doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. Learn more.
+
+
+
+
+
+
+
+
+ ARIA treeitem elements have accessible names
+
+
+
+
+
+
When an element doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. Learn more.
+
+
+
+
+
+
+
+
+ <dl>'s contain only properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements.
+
+
+
+
+
+
When definition lists are not properly marked up, screen readers may produce confusing or inaccurate output. Learn more.
+
+
+
+
+
+
+
+
+ Definition list items are wrapped in <dl> elements
+
+
+
+
+
+
Definition list items (`<dt>` and `<dd>`) must be wrapped in a parent `<dl>` element to ensure that screen readers can properly announce them. Learn more.
+
+
+
+
+
+
+
+
+ ARIA IDs are unique
+
+
+
+
+
+
The value of an ARIA ID must be unique to prevent other instances from being overlooked by assistive technologies. Learn more.
+
+
+
+
+
+
+
+
+ No form fields have multiple labels
+
+
+
+
+
+
Form fields with multiple labels can be confusingly announced by assistive technologies like screen readers which use either the first, the last, or all of the labels. Learn more.
+
+
+
+
+
+
+
+
+ <frame> or <iframe> elements have a title
+
+
+
+
+
+
Screen reader users rely on frame titles to describe the contents of frames. Learn more.
+
+
+
+
+
+
+
+
+ <input type="image"> elements have [alt] text
+
+
+
+
+
+
When an image is being used as an `<input>` button, providing alternative text can help screen reader users understand the purpose of the button. Learn more.
+
+
+
+
+
+
+
+
+ Form elements have associated labels
+
+
+
+
+
+
Labels ensure that form controls are announced properly by assistive technologies, like screen readers. Learn more.
+
+
+
+
+
+
+
+
+ The document does not use <meta http-equiv="refresh">
+
+
+
+
+
+
Users do not expect a page to refresh automatically, and doing so will move focus back to the top of the page. This may create a frustrating or confusing experience. Learn more.
+
+
+
+
+
+
+
+
+ <object> elements have [alt] text
+
+
+
+
+
+
Screen readers cannot translate non-text content. Adding alt text to `<object>` elements helps screen readers convey meaning to users. Learn more.
+
+
+
+
+
+
+
+
+ No element has a [tabindex] value greater than 0
+
+
+
+
+
+
A value greater than 0 implies an explicit navigation ordering. Although technically valid, this often creates frustrating experiences for users who rely on assistive technologies. Learn more.
+
+
+
+
+
+
+
+
+ Cells in a <table> element that use the [headers] attribute refer to table cells within the same table.
+
+
+
+
+
+
Screen readers have features to make navigating tables easier. Ensuring `<td>` cells using the `[headers]` attribute only refer to other cells in the same table may improve the experience for screen reader users. Learn more.
+
+
+
+
+
+
+
+
+ <th> elements and elements with [role="columnheader"/"rowheader"] have data cells they describe.
+
+
+
+
+
+
Screen readers have features to make navigating tables easier. Ensuring table headers always refer to some set of cells may improve the experience for screen reader users. Learn more.
+
+
+
+
+
+
+
+
+ [lang] attributes have a valid value
+
+
+
+
+
+
Specifying a valid BCP 47 language on elements helps ensure that text is pronounced correctly by a screen reader. Learn more.
+
+
+
+
+
+
+
+
+ <video> elements contain a <track> element with [kind="captions"]
+
+
+
+
+
+
When a video provides a caption it is easier for deaf and hearing impaired users to access its information. Learn more.
+
+
+ Ensure CSP is effective against XSS attacks
+
+
+
+
+
+
A strong Content Security Policy (CSP) significantly reduces the risk of cross-site scripting (XSS) attacks. Learn more
+
+
Description
Directive
Severity
No CSP found in enforcement mode
High
+
+
+
+
+ Passed audits
+ (17)
+
+
+
+
+
+
+
+
+
+
+
+
+ Uses HTTPS
+
+
+
+
+
+
All sites should be protected with HTTPS, even ones that don't handle sensitive data. This includes avoiding mixed content, where some resources are loaded over HTTP despite the initial request being served over HTTPS. HTTPS prevents intruders from tampering with or passively listening in on the communications between your app and your users, and is a prerequisite for HTTP/2 and many new web platform APIs. Learn more.
+
+
+
+
+
+
+
+
+ Links to cross-origin destinations are safe
+
+
+
+
+
+
Add `rel="noopener"` or `rel="noreferrer"` to any external links to improve performance and prevent security vulnerabilities. Learn more.
+
+
+
+
+
+
+
+
+ Avoids requesting the geolocation permission on page load
+
+
+
+
+
+
Users are mistrustful of or confused by sites that request their location without context. Consider tying the request to a user action instead. Learn more.
+
+
+
+
+
+
+
+
+ Avoids requesting the notification permission on page load
+
+
+
+
+
+
Users are mistrustful of or confused by sites that request to send notifications without context. Consider tying the request to user gestures instead. Learn more.
+
+
+
+
+
+
+
+
+ Avoids front-end JavaScript libraries with known security vulnerabilities
+
+
+
+
+
+
Some third-party scripts may contain known security vulnerabilities that are easily identified and exploited by attackers. Learn more.
+
+
+
+
+
+
+
+
+ Allows users to paste into password fields
+
+
+
+
+
+
Preventing password pasting undermines good security policy. Learn more.
+
+
+
+
+
+
+
+
+ Displays images with correct aspect ratio
+
+
+
+
+
+
Image display dimensions should match natural aspect ratio. Learn more.
Image natural dimensions should be proportional to the display size and the pixel ratio to maximize image clarity. Learn more.
+
+
+
+
+
+
+
+
+ Page has the HTML doctype
+
+
+
+
+
+
Specifying a doctype prevents the browser from switching to quirks-mode. Learn more.
+
+
+
+
+
+
+
+
+ Properly defines charset
+
+
+
+
+
+
A character encoding declaration is required. It can be done with a `<meta>` tag in the first 1024 bytes of the HTML or in the Content-Type HTTP response header. Learn more.
+
+
+
+
+
+
+
+
+ Avoids unload event listeners
+
+
+
+
+
+
The `unload` event does not fire reliably and listening for it can prevent browser optimizations like the Back-Forward Cache. Consider using the `pagehide` or `visibilitychange` events instead. Learn more
All front-end JavaScript libraries detected on the page. Learn more.
+
+
Name
Version
FuseJS
+
+
+
+
+
+
+ Avoids deprecated APIs
+
+
+
+
+
+
Deprecated APIs will eventually be removed from the browser. Learn more.
+
+
+
+
+
+
+
+
+ No browser errors logged to the console
+
+
+
+
+
+
Errors logged to the console indicate unresolved problems. They can come from network request failures and other browser concerns. Learn more
+
+
+
+
+
+
+
+
+ Page has valid source maps
+
+
+
+
+
+
Source maps translate minified code to the original source code. This helps developers debug in production. In addition, Lighthouse is able to provide further insights. Consider deploying source maps to take advantage of these benefits. Learn more.
+
+
+
+
+
+
+
+
+ No issues in the Issues panel in Chrome Devtools
+
+
+
+
+
+
Issues logged to the `Issues` panel in Chrome Devtools indicate unresolved problems. They can come from network request failures, insufficient security controls, and other browser concerns. Open up the Issues panel in Chrome DevTools for more details on each issue.
+
+
+
+
+
+
+ Not applicable
+ (1)
+
+
+
+
+
+
+
+
+
+
+
+
+ Fonts with font-display: optional are preloaded
+
+
+
+
+
+
Preload `optional` fonts so first-time visitors may use them. Learn more
These checks ensure that your page is optimized for search engine results ranking. There are additional factors Lighthouse does not check that may affect your search ranking. Learn more.
+
+
+
+
+
+ Additional items to manually check
+ (1)
+
+
+ Run these additional validators on your site to check additional SEO best practices.
+
+
+ Has a <meta name="viewport"> tag with width or initial-scale
+
+
+
+
+
+
Add a `<meta name="viewport">` tag to optimize your app for mobile screens. Learn more.
+
+
+
+
+
+
+
+
+ Document has a <title> element
+
+
+
+
+
+
The title gives screen reader users an overview of the page, and search engine users rely on it heavily to determine if a page is relevant to their search. Learn more.
+
+
+
+
+
+
+
+
+ Document has a meta description
+
+
+
+
+
+
Meta descriptions may be included in search results to concisely summarize page content. Learn more.
+
+
+
+
+
+
+
+
+ Page has successful HTTP status code
+
+
+
+
+
+
Pages with unsuccessful HTTP status codes may not be indexed properly. Learn more.
+
+
+
+
+
+
+
+
+ Links have descriptive text
+
+
+
+
+
+
Descriptive link text helps search engines understand your content. Learn more.
+
+
+
+
+
+
+
+
+ Links are crawlable
+
+
+
+
+
+
Search engines may use `href` attributes on links to crawl websites. Ensure that the `href` attribute of anchor elements links to an appropriate destination, so more pages of the site can be discovered. Learn More
+
+
+
+
+
+
+
+
+ Page isn’t blocked from indexing
+
+
+
+
+
+
Search engines are unable to include your pages in search results if they don't have permission to crawl them. Learn more.
+
+
+
+
+
+
+
+
+ Image elements have [alt] attributes
+
+
+
+
+
+
Informative elements should aim for short, descriptive alternate text. Decorative elements can be ignored with an empty alt attribute. Learn more.
+
+
+
+
+
+
+
+
+ Document has a valid hreflang
+
+
+
+
+
+
hreflang links tell search engines what version of a page they should list in search results for a given language or region. Learn more.
+
+
+
+
+
+
+
+
+ Document has a valid rel=canonical
+
+
+
+
+
+
Canonical links suggest which URL to show in search results. Learn more.
+
+
+
+
+
+
+
+
+ Document uses legible font sizes
+ 99.75% legible text
+
+
+
+
+
Font sizes less than 12px are too small to be legible and require mobile visitors to “pinch to zoom” in order to read. Strive to have >60% of page text ≥12px. Learn more.
Search engines can't index plugin content, and many devices restrict plugins or don't support them. Learn more.
+
+
+
+
+
+
+
+
+ Tap targets are sized appropriately
+ 100% appropriately sized tap targets
+
+
+
+
+
Interactive elements like buttons and links should be large enough (48x48px), and have enough space around them, to be easy enough to tap without overlapping onto other elements. Learn more.
+
+
+
+
+
+
+ Not applicable
+ (1)
+
+
+
+
+
+
+
+
+
+
+
+
+ robots.txt is valid
+
+
+
+
+
+
If your robots.txt file is malformed, crawlers may not be able to understand how you want your website to be crawled or indexed. Learn more.
These checks validate the aspects of a Progressive Web App. Learn more.
+
+
Installable
+
+
+
+
+
+ Web app manifest and service worker meet the installability requirements
+
+
+
+
+
+
Service worker is the technology that enables your app to use many Progressive Web App features, such as offline, add to homescreen, and push notifications. With proper service worker and manifest implementations, browsers can proactively prompt users to add your app to their homescreen, which can lead to higher engagement. Learn more.
+
+
+
PWA Optimized
+
+
+
+
+
+ Does not register a service worker that controls page and start_url
+
+
+
+
+
+
The service worker is the technology that enables your app to use many Progressive Web App features, such as offline, add to homescreen, and push notifications. Learn more.
+
+
+
+
+
+
+
+
+ Redirects HTTP traffic to HTTPS
+
+
+
+
+
+
If you've already set up HTTPS, make sure that you redirect all HTTP traffic to HTTPS in order to enable secure web features for all your users. Learn more.
+
+
+
+
+
+
+
+
+ Configured for a custom splash screen
+
+
+
+
+
+
A themed splash screen ensures a high-quality experience when users launch your app from their homescreens. Learn more.
+
+
+
+
+
+
+
+
+ Does not set a theme color for the address bar.
Failures: No `<meta name="theme-color">` tag found.
+
+
+
+
+
+
The browser address bar can be themed to match your site. Learn more.
+
+
+
+
+
+
+
+
+ Content is sized correctly for the viewport
+
+
+
+
+
+
If the width of your app's content doesn't match the width of the viewport, your app might not be optimized for mobile screens. Learn more.
+
+
+
+
+
+
+
+
+ Has a <meta name="viewport"> tag with width or initial-scale
+
+
+
+
+
+
Add a `<meta name="viewport">` tag to optimize your app for mobile screens. Learn more.
+
+
+
+
+
+
+
+
+ Provides a valid apple-touch-icon
+
+
+
+
+
+
For ideal appearance on iOS when users add a progressive web app to the home screen, define an `apple-touch-icon`. It must point to a non-transparent 192px (or 180px) square PNG. Learn More.
+
+
+
+
+
+
+
+
+ Manifest has a maskable icon
+
+
+
+
+
+
A maskable icon ensures that the image fills the entire shape without being letterboxed when installing the app on a device. Learn more.
+
+
+
+
+
+
+ Additional items to manually check
+ (3)
+
+
+ These checks are required by the baseline PWA Checklist but are not automatically checked by Lighthouse. They do not affect your score but it's important that you verify them manually.
+
+
+
+
+
+
+
+
+
+ Site works cross-browser
+
+
+
+
+
+
To reach the most number of users, sites should work across every major browser. Learn more.
+
+
+
+
+
+
+
+
+ Page transitions don't feel like they block on the network
+
+
+
+
+
+
Transitions should feel snappy as you tap around, even on a slow network. This experience is key to a user's perception of performance. Learn more.
+
+
+
+
+
+
+
+
+ Each page has a URL
+
+
+
+
+
+
Ensure individual pages are deep linkable via URL and that URLs are unique for the purpose of shareability on social media. Learn more.
Although Congo 2.0 contains a large number of changes, the theme has been designed to minimise the effort required to upgrade to the latest release.
+
That said, there are some changes that require adjustments to existing sites that are built with Congo version 1.x. This guide will step you through the process and highlight things you need to consider.
To upgrade a go module to a new major release, the modules.toml and go.mod files need to be updated. In each file, update the path to the theme from github.com/jpanther/congo to github.com/jpanther/congo/v2.
+
Then change into your project directory and execute the following command:
+
hugo mod get -u
+
Note that in some circumstances there may be issues with this step due to the way that Hugo locally caches modules. If the command above doesn’t work, try using hugo mod clean to clear out the local cache and re-download any modules.
+
Once the theme has been upgraded, continue to the next section.
Git submodules can be upgraded using the git command. Simply execute the following command and the latest version of the theme will be downloaded into your local repository:
+
git submodule update --remote --merge
+
Once the submodule has been upgraded, continue to the next section.
Extract the archive, rename the folder to congo 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.
Congo 2.0 introduces a number of new theme configuration parameters. Although the theme will adapt to existing version 1 configurations, in order to take advantage of some of the newer theme features, you will need to adjust your existing configuration.
+
The simplest way to do this is to take a copy of the theme’s default configuration and compare it to your existing files. The process is outlined in greater detail below.
In order to provide multilingual support, language-specific theme parameters have been moved to a new config file languages.[lang-code].toml. The theme comes with a template languages.en.toml file which can be used as a guide.
+
+
+
+
+
+
+
+
+
+
+
+ This step is optional if you do not need multilingual support, although completing it now will make future theme upgrades easier.
+
+
+
The languages config file follows this structure:
+
# config/_default/languagues.en.toml
+
+languageCode="en"
+languageName="English"
+displayName="EN"
+htmlCode="en"
+weight=1
+rtl=false
+
+# Language-specific parameters go here
+
Using your preferred language, simply create this new file in config/_default/ and then move the language-specific parameters from any existing config files over to this new file. The table below outlines the parameters that need to be moved.
+
+
+
+
Parameter
+
Old location
+
+
+
+
+
title
+
config.toml
+
+
+
description
+
params.toml
+
+
+
copyright
+
config.toml
+
+
+
dateFormat
+
params.toml
+
+
+
[author]
+
config.toml
+
+
+
+
Once the values have been moved to the new location, these parameters should be deleted from their original locations.
As the theme is now aware of languages, the menus.toml file should also be renamed to include a language code. Rename the existing menus.toml to menus.[lang-code].toml, where the language code matches the code used in the languages.toml file in the previous section.
The config.toml file now only contains base Hugo configuration values. Other than removing the language-specific strings above, there are only two changes to consider.
+
If you’re using a language other than English, provide a defaultContentLanguage value that matches the language code in the config file you created for your language. Secondly, to take advange of the new site search in Congo 2.0, an [outputs] block needs to be provided.
Congo 2.0 adds support for tables of contents on article pages. Although Hugo ships with default settings for generating contents listings, you can adjust this behaviour by adding a new [tableOfContents] block to your markup.toml file.
+
The recommended settings are as follows, which includes any headings in the Markdown content at levels 2, 3 and 4:
A number of new theme parameters have been introduced in Congo 2.0. Some minor changes are requried to existing configurations. Remember, the theme will always revert to a sensible default if a parameter is not provided.
+
The way that dark mode works in Congo has been changed to allow greater flexibility around configuration. The old darkMode and darkToggle parameters have been removed and replaced by three new parameters. These new options operate independently of each other, making it possible to force the appearance while still allowing the user to override.
+
+
+
+
+
New parameter
+
Type
+
Default
+
Description
+
+
+
+
+
defaultAppearance
+
String
+
"light"
+
Default theme appearance; either light or dark. ⚠️ Setting this to light replicates the old darkMode = false setting, while dark replicates darkMode = true.
+
+
+
autoSwitchAppearance
+
Boolean
+
true
+
Whether the theme appearance automatically switches based upon the operating system preference. Set to false to force the site to always use the defaultAppearance. ⚠️ Setting this to true replicates the old darkMode = "auto" setting.
+
+
+
showAppearanceSwitcher
+
Boolean
+
false
+
Whether the theme appearance switcher is dispalyed in the site footer. ⚠️ This parameter replaces darkToggle.
+
+
+
+
+
The following table outlines some other key new parameters that control new features in version 2:
+
+
+
+
New parameter
+
Type
+
Default
+
+
+
+
+
enableSearch
+
Boolean
+
false
+
+
+
showScrollToTop
+
Boolean
+
true
+
+
+
article.showTaxonomies
+
Boolean
+
false
+
+
+
article.showTableOfContents
+
Boolean
+
false
+
+
+
list.showTableOfContents
+
Boolean
+
false
+
+
+
+
For the full list of supported parameters, refer to the Configuration docs.
All site assets, with the exception of favicons, now use Hugo Pipes to build an optimised version of your project. In order for the theme to locate your files, any previously static theme assets need to be moved to the Hugo assets folder. Primarily this is the author image and site logo:
If you have provided an author image or site logo, simply move these assets from static/ to assets/. If you use the same directory structure the theme will know where to find these files automatically. If you would like to provide a new path, update the logo and author.image config values accordingly.
+
Note that this step does not apply to any assets in your project that are actually static. For example, a PDF file that you link directly to from within an article is a static asset. These files should remain in the static/ directory to ensure they are copied to the output folder when Hugo builds the site.
The behavior of the figure shortcode is different in version 2. If you are using figure in your content and have advanced use cases, you may need to adjust the parameters you are providing.
+
Consult the shortcode docs to learn more about supported parameters.
Now that all the configuration changes are complete, it’s time to rebuild the site. Run hugo, or your build command, and check that everything works as expected.
+
If you come across any errors, check the configuration is correct and refer to the full documentation for further guidance. Remember, the example config files bundled with the theme contain all the default parameters and are a great starting point.
+
🙋♀️ If you still need help, feel free to ask your question on GitHub Discussions.
I started learning music by myself at the age of 14. I play several instruments and I love to record, compose and produce my own music. I’ve been releasing my songs under the name “Doppler Effect” in the usual streaming services. Here are the links if you want to listen.