📝 Add instructions for Hugo Modules installation

CHANGELOG.md

@@ -12,7 +12,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Fixed
 
-- Fix style issue with `button` shortcode
+- Minor style issue with `button` shortcode
+- Hugo Modules would fail when using default theme config file
 
 ## [1.1.1] - 2020-08-19
 

README.md

@@ -36,7 +36,28 @@ Congo is designed to be a simple, lightweight theme for [Hugo](https://gohugo.io
 
 This is a simplified set of instructions and assumes a basic understanding of building Hugo sites and installing themes. For detailed instructions, refer to the full [theme documentation](https://jpanther.github.io/congo/docs/).
 
-There are a couple of ways to install the Congo theme into your Hugo website. The git method is the easiest to keep the theme up-to-date, but you can also download and install manually if you don't have git available.
+There are a few ways to install the Congo theme into your Hugo website.
+
+### Install using Hugo
+
+This method is the quickest and easiest for keeping the theme up-to-date. Hugo Modules uses Go to initialise and manage modules so you need to ensure you have Go installed before proceeding.
+
+1. [Download](https://golang.org/dl/) and install Go. You can check if it's already installed by using the command `go version`.
+2. From your Hugo project's directory, initiate the Hugo Modules system for your website:
+
+   ```shell
+   hugo mod init github.com/<username>/<repo-name>
+   ```
+
+3. Add the theme to your configuration by creating a new file `config/_default/module.toml` and adding the following:
+
+   ```toml
+   [[imports]]
+   path = "github.com/jpanther/congo"
+   ```
+
+4. Start your server using `hugo server` and the theme will be downloaded automatically.
+5. Continue to [set up the theme configuration files](#set-up-theme-configuration-files).
 
 ### Install using git
 
@@ -48,15 +69,26 @@ git init
 git submodule add -b stable https://github.com/jpanther/congo.git themes/congo
 ```
 
+Then continue to [set up the theme configuration files](#set-up-theme-configuration-files).
+
 ### Install manually
 
-Download the latest release of the theme from: [https://github.com/jpanther/congo/releases](https://github.com/jpanther/congo/releases)
+Download the latest release of the theme from: [https://github.com/jpanther/congo/releases/latest](https://github.com/jpanther/congo/releases/latest)
 
 Extract the archive, rename the folder to `congo` and move it to the `themes/` directory inside your Hugo project.
 
-### Set up your configuration files
+Then continue to [set up the theme configuration files](#set-up-theme-configuration-files).
 
-In the root folder of your website, delete the `config.toml` file that was generated by Hugo. Copy the entire `config` folder from `themes/congo/config/` into the root of your website. This will ensure you have all the correct theme settings and will enable you to easily customise the theme.
+### Set up theme configuration files
+
+In the root folder of your website, delete the `config.toml` file that was generated by Hugo. Copy the `*.toml` config files from the theme into your `config/_default/` folder. This will ensure you have all the correct theme settings and will enable you to easily customise the theme.
+
+Depending on how you installed the theme you will find the theme config files in different places:
+
+- **Hugo Modules:** In the Hugo cache directory, or [download a copy](https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/jpanther/congo/tree/stable/config/_default) from GitHub
+- **Git submodule or Manual install:** `themes/congo/config/_default`
+
+> **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.
 
 You're now all set up to use Congo. From here you can add some content and start the Hugo server.
 

exampleSite/content/_index.md

@@ -7,14 +7,14 @@ description: "This is a demo of the Congo theme for Hugo."
 A simple, lightweight theme for Hugo built with Tailwind CSS.
 {{< /lead >}}
 
-<div class="flex px-4 py-1 mb-8 text-base rounded-md bg-primary-100 dark:bg-primary-900">
+<div class="flex px-4 py-2 mb-8 text-base rounded-md bg-primary-100 dark:bg-primary-900">
   <span class="flex items-center pr-3 text-primary-400">
     {{< icon "exclamation-triangle" >}}
   </span>
   <span class="flex items-center justify-between flex-grow dark:text-gray-300">
     <span class="prose dark:text-white">This is a demo of the <code id="layout">page</code> layout.</span>
     <button
-      class="px-4 py-1 !text-white !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
+      class="px-4 !text-white !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
       onclick="switchLayout()"
     >
       Switch layout &orarr;

exampleSite/content/docs/installation.md

@@ -25,7 +25,32 @@ Run the command `hugo new site mywebsite` to create a new Hugo site in a folder
 
 ## Download the Congo theme
 
-There are a couple of ways to install the Congo theme into your Hugo website. The git method is the easiest to keep the theme up-to-date, but you can also download and install manually if you don't have git available.
+There are a couple of ways to install the Congo theme into your Hugo website. The Hugo Modules method is the easiest, then the git method if you're familiar with submodules, but you can also download and install manually if you don't have `go` or `git` available.
+
+### Install using Hugo
+
+This method is the quickest and easiest for keeping the theme up-to-date. Hugo Modules uses Go to initialise and manage modules so you need to ensure you have Go installed before proceeding.
+
+1. [Download](https://golang.org/dl/) and install Go. You can check if it's already installed by using the command `go version`.
+2. From your Hugo project's directory, initiate the Hugo Modules system for your website:
+
+   ```shell
+   # If you're managing your project on GitHub
+   hugo mod init github.com/<username>/<repo-name>
+
+   # If you're managing your project locally
+   hugo mod init my-project
+   ```
+
+3. Add the theme to your configuration by creating a new file `config/_default/module.toml` and adding the following:
+
+   ```toml
+   [[imports]]
+   path = "github.com/jpanther/congo"
+   ```
+
+4. Start your server using `hugo server` and the theme will be downloaded automatically.
+5. Continue to [set up the theme configuration files](#set-up-theme-configuration-files).
 
 ### Install using git
 
@@ -38,25 +63,44 @@ git submodule add -b stable https://github.com/jpanther/congo.git themes/congo
 ```
 
 {{< alert >}}
-**Note:** You need to substitute `mywebsite` for the correct folder name you used in Step 2.
+**Note:** You need to substitute `mywebsite` for the correct folder name you used when creating your Hugo site.
 {{< /alert >}}
 
+Then continue to [set up the theme configuration files](#set-up-theme-configuration-files).
+
 ### Install manually
 
-Download the latest release of the theme.
+1. Download the latest release of the theme source code.
 
-{{< button href="https://github.com/jpanther/congo/releases" target="_blank" >}}Download from Github{{< /button >}}
+   {{< button href="https://github.com/jpanther/congo/releases/latest" target="_blank" >}}Download from Github{{< /button >}}
 
-Extract the archive, rename the folder to `congo` and move it to the `themes/` directory inside your your `mywebsite` folder.
+2. Extract the archive, rename the folder to `congo` and move it to the `themes/` directory inside your Hugo project's root folder.
+3. Continue to [set up the theme configuration files](#set-up-theme-configuration-files).
+
+## Set up theme configuration files
+
+In the root folder of your website, delete the `config.toml` file that was generated by Hugo. Copy the `*.toml` config files from the theme into your `config/_default/` folder. This will ensure you have all the correct theme settings and will enable you to easily customise the theme.
+
+Depending on how you installed the theme you will find the theme config files in different places:
+
+- **Hugo Modules:** In the Hugo cache directory, or [download a copy](https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/jpanther/congo/tree/stable/config/_default) from GitHub
+- **Git submodule or Manual install:** `themes/congo/config/_default`
+
+Once you've copied the files, your config folder should look like this:
+
+```shell
+config/_default/
+├─ config.toml
+├─ markup.toml
+├─ menus.toml
+├─ module.toml  # if you installed using Hugo Modules
+└─ params.toml
+```
 
 {{< alert >}}
-**Note:** You need to substitute `mywebsite` for the correct folder name you used in Step 2.
+**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.
 {{< /alert >}}
 
-## Set up your configuration files
-
-In the root folder of your website, delete the `config.toml` file that was generated by Hugo. Copy the entire `config` folder from `themes/congo/config/` into the root of your website. This will ensure you have all the correct theme settings and will enable you to easily customise the theme.
-
 You're now all set up to use Congo. From here you can add some content and start the Hugo server.
 
 Refer to the Hugo docs for more information or read the next section to learn more about configuring the theme.