🔖 Release v1.2.0

.github/workflows/test-build.yml

@@ -0,0 +1,24 @@
+name: Test Build
+
+on: [push, pull_request]
+
+jobs:
+  build:
+    runs-on: ubuntu-20.04
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.ref }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          submodules: true
+          fetch-depth: 0
+
+      - name: Setup Hugo
+        uses: peaceiris/actions-hugo@v2
+        with:
+          hugo-version: "latest"
+
+      - name: Build
+        working-directory: ./exampleSite
+        run: hugo --minify --themesDir ../.. --baseURL https://jpanther.github.io/congo/

CHANGELOG.md

@@ -1,12 +1,32 @@
 # Changelog
 
-All notable changes to Congo will be documented in this file.
+All notable changes to Congo will be documented in this file. Things that need attention when upgrading from a prior version are marked ⚠️.
-
-Things that need attention when upgrading from a prior version are marked ⚠️.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
----
+## [Unreleased]
+
+## [1.2.0] - 2021-08-22
+
+### Added
+
+- Multiple colour schemes
+- Edit links on article pages
+- Icons for Foursquare and Pinterest
+- Asset fingerprinting and SRI
+- CSS minification for custom stylesheets
+
+### Changed
+
+- Static assets are now managed through Hugo Pipelines
+
+### Fixed
+
+- Minor style issue with `button` shortcode
+- Hugo Modules would fail when using default theme config file
+- Some content not centred correctly on the profile homepage layout
+- Some links missing the correct styles when in Firefox
+- `externalUrl` front matter not working on some list pages
 
 ## [1.1.1] - 2020-08-19
 
@@ -38,7 +58,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [1.0.0] - 2020-08-16
 
-### Initial release 🎉
+### Added
 
 - Built with Tailwind CSS JIT for minified stylesheets without any excess code
 - Fully responsive layout
@@ -59,7 +79,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Advanced customisation using simple Tailwind colour definitions and styles
 - Fully documented
 
-[unreleased]: https://github.com/jpanther/congo/compare/v1.1.1...HEAD
+[unreleased]: https://github.com/jpanther/Congo/compare/v1.2.0...HEAD
+[1.2.0]: https://github.com/jpanther/Congo/compare/v1.1.1...v1.2.0
 [1.1.1]: https://github.com/jpanther/congo/compare/v1.1.0...v1.1.1
 [1.1.0]: https://github.com/jpanther/congo/compare/v1.0.0...v1.1.0
 [1.0.0]: https://github.com/jpanther/congo/releases/tag/v1.0.0

README.md

@@ -13,6 +13,7 @@ Congo is designed to be a simple, lightweight theme for [Hugo](https://gohugo.io
 
 - Built with Tailwind CSS JIT for minified stylesheets without any excess code
 - Fully responsive layout
+- Multiple colour schemes (or fully customise your own)
 - Dark mode (auto-switching based upon browser)
 - Highly customisable configuration
 - Multiple homepage layouts
@@ -36,7 +37,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 +70,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. If you installed using Hugo Modules, you should not copy the `module.toml` file! 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.
 
@@ -82,58 +115,7 @@ links = [
 
 ## Advanced customisation
 
-There are a couple of ways you can make style changes to Congo.
+Refer to the [theme documentation](https://jpanther.github.io/congo/docs/advanced-customisation/) for details on customising Congo, including rebuilding the theme from scratch.
-
-If you just need to add or override some simple styles, you can do so by creating a `custom.css` file in your project's `static/css/` folder. This file will be loaded automatically after the theme's default styles.
-
-Alternatively, 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.
-
-> **Note:** Building the theme manually is intended for advanced users.
-
-Change into the `themes/congo/` folder and install the project dependencies.
-
-```bash
-npm install
-```
-
-Once installed, you can edit the `themes/congo/tailwind.config.js` to change the styles that are applied throughout the theme. You can also adjust specific styles in `themes/congo/assets/css/main.css`.
-
-To allow for easy theme colour changes, Congo defines a `primary` and `secondary` colour palette that is used throughout the theme. In order to change the colour across the entire theme, simply edit the `tailwind.config.js` file accordingly.
-
-For example, to change to a green colour scheme, you could apply these changes:
-
-```js
-  // themes/congo/tailwind.config.js
-
-  theme: {
-    colors: {
-      transparent: "transparent",
-      white: colors.white,
-      gray: colors.gray,
-      primary: colors.lime,
-      secondary: colors.teal,
-    },
-    ...
-  }
-```
-
-For a full list of colours available, and their corresponding configuration values, see the official [Tailwind docs](https://tailwindcss.com/docs/customizing-colors#color-palette-reference).
-
-After editing the configuration, you need to rebuild the theme's stylesheets.
-
-```bash
-npm run build
-```
-
-This will automatically output a minified CSS file to `/themes/congo/static/css/main.css`.
-
-To aid with testing style changes, you can also run the Tailwind JIT comiler in watch mode.
-
-```bash
-npm run dev
-```
-
-Now whenever you make a change, the (non-minified) CSS files will be rebuilt automatically. This mode is useful to run when using `hugo server` to preview your site during development. Remember to perform a full build before publishing your website.
 
 ---
 

assets/css/main.css

@@ -1,3 +1,5 @@
+/*! Congo v1.2.0 | MIT License | https://github.com/jpanther/congo */
+
 @tailwind base;
 @tailwind components;
 
@@ -46,7 +48,7 @@ body button {
 /* -- Chroma Highlight -- */
 /* Background */
 .prose .chroma {
-  @apply text-gray-700 rounded-md bg-gray-50 dark:bg-gray-700 dark:text-gray-200;
+  @apply rounded-md text-neutral-700 bg-neutral-50 dark:bg-neutral-700 dark:text-neutral-200;
 }
 /* Other */
 .chroma .x {
@@ -73,13 +75,13 @@ body button {
 }
 /* LineNumbersTable */
 .chroma .lnt {
-  @apply text-gray-600 dark:text-gray-300;
+  @apply text-neutral-600 dark:text-neutral-300;
   margin-right: 0.4em;
   padding: 0 0.4em 0 0.4em;
 }
 /* LineNumbers */
 .chroma .ln {
-  @apply text-gray-600 dark:text-gray-300;
+  @apply text-neutral-600 dark:text-neutral-300;
   margin-right: 0.4em;
   padding: 0 0.4em 0 0.4em;
 }
@@ -300,31 +302,31 @@ body button {
 }
 /* Comment */
 .chroma .c {
-  @apply italic text-gray-400 dark:text-gray-500;
+  @apply italic text-neutral-400 dark:text-neutral-500;
 }
 /* CommentHashbang */
 .chroma .ch {
-  @apply italic font-semibold text-gray-400 dark:text-gray-500;
+  @apply italic font-semibold text-neutral-400 dark:text-neutral-500;
 }
 /* CommentMultiline */
 .chroma .cm {
-  @apply italic text-gray-400 dark:text-gray-500;
+  @apply italic text-neutral-400 dark:text-neutral-500;
 }
 /* CommentSingle */
 .chroma .c1 {
-  @apply italic text-gray-400 dark:text-gray-500;
+  @apply italic text-neutral-400 dark:text-neutral-500;
 }
 /* CommentSpecial */
 .chroma .cs {
-  @apply italic text-gray-400 dark:text-gray-500;
+  @apply italic text-neutral-400 dark:text-neutral-500;
 }
 /* CommentPreproc */
 .chroma .cp {
-  @apply italic text-gray-400 dark:text-gray-500;
+  @apply italic text-neutral-400 dark:text-neutral-500;
 }
 /* CommentPreprocFile */
 .chroma .cpf {
-  @apply italic text-gray-400 dark:text-gray-500;
+  @apply italic text-neutral-400 dark:text-neutral-500;
 }
 /* Generic */
 .chroma .g {
@@ -341,7 +343,7 @@ body button {
 }
 /* GenericHeading */
 .chroma .gh {
-  @apply font-semibold text-gray-500;
+  @apply font-semibold text-neutral-500;
 }
 /* GenericInserted */
 .chroma .gi {
@@ -361,11 +363,11 @@ body button {
 }
 /* GenericSubheading */
 .chroma .gu {
-  @apply text-gray-500;
+  @apply text-neutral-500;
 }
 /* GenericTraceback */
 .chroma .gt {
-  @apply text-gray-500;
+  @apply text-neutral-500;
 }
 /* GenericUnderline */
 .chroma .gl {

assets/css/schemes/avocado.css

@@ -0,0 +1,37 @@
+/* Avocado scheme */
+:root {
+  --color-neutral: #fff;
+  /* Warm Gray */
+  --color-neutral-50: #fafaf9;
+  --color-neutral-100: #f5f5f4;
+  --color-neutral-200: #e7e5e4;
+  --color-neutral-300: #d6d3d1;
+  --color-neutral-400: #a8a29e;
+  --color-neutral-500: #78716c;
+  --color-neutral-600: #57534e;
+  --color-neutral-700: #44403c;
+  --color-neutral-800: #292524;
+  --color-neutral-900: #1c1917;
+  /* Lime */
+  --color-primary-50: #f7fee7;
+  --color-primary-100: #ecfccb;
+  --color-primary-200: #d9f99d;
+  --color-primary-300: #bef264;
+  --color-primary-400: #a3e635;
+  --color-primary-500: #84cc16;
+  --color-primary-600: #65a30d;
+  --color-primary-700: #4d7c0f;
+  --color-primary-800: #3f6212;
+  --color-primary-900: #365314;
+  /* Emerald */
+  --color-secondary-50: #ecfdf5;
+  --color-secondary-100: #d1fae5;
+  --color-secondary-200: #a7f3d0;
+  --color-secondary-300: #6ee7b7;
+  --color-secondary-400: #34d399;
+  --color-secondary-500: #10b981;
+  --color-secondary-600: #059669;
+  --color-secondary-700: #047857;
+  --color-secondary-800: #065f46;
+  --color-secondary-900: #064e3b;
+}

assets/css/schemes/congo.css

@@ -0,0 +1,37 @@
+/* Congo scheme */
+:root {
+  --color-neutral: #fff;
+  /* Gray */
+  --color-neutral-50: #fafafa;
+  --color-neutral-100: #f4f4f5;
+  --color-neutral-200: #e4e4e7;
+  --color-neutral-300: #d4d4d8;
+  --color-neutral-400: #a1a1aa;
+  --color-neutral-500: #71717a;
+  --color-neutral-600: #52525b;
+  --color-neutral-700: #3f3f46;
+  --color-neutral-800: #27272a;
+  --color-neutral-900: #18181b;
+  /* Violet */
+  --color-primary-50: #f5f3ff;
+  --color-primary-100: #ede9fe;
+  --color-primary-200: #ddd6fe;
+  --color-primary-300: #c4b5fd;
+  --color-primary-400: #a78bfa;
+  --color-primary-500: #8b5cf6;
+  --color-primary-600: #7c3aed;
+  --color-primary-700: #6d28d9;
+  --color-primary-800: #5b21b6;
+  --color-primary-900: #4c1d95;
+  /* Fuchsia */
+  --color-secondary-50: #fdf4ff;
+  --color-secondary-100: #fae8ff;
+  --color-secondary-200: #f5d0fe;
+  --color-secondary-300: #f0abfc;
+  --color-secondary-400: #e879f9;
+  --color-secondary-500: #d946ef;
+  --color-secondary-600: #c026d3;
+  --color-secondary-700: #a21caf;
+  --color-secondary-800: #86198f;
+  --color-secondary-900: #701a75;
+}

assets/css/schemes/fire.css

@@ -0,0 +1,37 @@
+/* Fire scheme */
+:root {
+  --color-neutral: #fff;
+  /* Warm Gray */
+  --color-neutral-50: #fafaf9;
+  --color-neutral-100: #f5f5f4;
+  --color-neutral-200: #e7e5e4;
+  --color-neutral-300: #d6d3d1;
+  --color-neutral-400: #a8a29e;
+  --color-neutral-500: #78716c;
+  --color-neutral-600: #57534e;
+  --color-neutral-700: #44403c;
+  --color-neutral-800: #292524;
+  --color-neutral-900: #1c1917;
+  /* Orange */
+  --color-primary-50: #fff7ed;
+  --color-primary-100: #ffedd5;
+  --color-primary-200: #fed7aa;
+  --color-primary-300: #fdba74;
+  --color-primary-400: #fb923c;
+  --color-primary-500: #f97316;
+  --color-primary-600: #ea580c;
+  --color-primary-700: #c2410c;
+  --color-primary-800: #9a3412;
+  --color-primary-900: #7c2d12;
+  /* Rose */
+  --color-secondary-50: #fff1f2;
+  --color-secondary-100: #ffe4e6;
+  --color-secondary-200: #fecdd3;
+  --color-secondary-300: #fda4af;
+  --color-secondary-400: #fb7185;
+  --color-secondary-500: #f43f5e;
+  --color-secondary-600: #e11d48;
+  --color-secondary-700: #be123c;
+  --color-secondary-800: #9f1239;
+  --color-secondary-900: #881337;
+}

assets/css/schemes/ocean.css

@@ -0,0 +1,37 @@
+/* Ocean scheme */
+:root {
+  --color-neutral: #fff;
+  /* Cool Gray */
+  --color-neutral-50: #f8fafc;
+  --color-neutral-100: #f1f5f9;
+  --color-neutral-200: #e2e8f0;
+  --color-neutral-300: #cbd5e1;
+  --color-neutral-400: #94a3b8;
+  --color-neutral-500: #64748b;
+  --color-neutral-600: #475569;
+  --color-neutral-700: #334155;
+  --color-neutral-800: #1e293b;
+  --color-neutral-900: #0f172a;
+  /* Blue */
+  --color-primary-50: #eff6ff;
+  --color-primary-100: #dbeafe;
+  --color-primary-200: #bfdbfe;
+  --color-primary-300: #93c5fd;
+  --color-primary-400: #60a5fa;
+  --color-primary-500: #3b82f6;
+  --color-primary-600: #2563eb;
+  --color-primary-700: #1d4ed8;
+  --color-primary-800: #1e40af;
+  --color-primary-900: #1e3a8a;
+  /* Cyan */
+  --color-secondary-50: #ecfeff;
+  --color-secondary-100: #cffafe;
+  --color-secondary-200: #a5f3fc;
+  --color-secondary-300: #67e8f9;
+  --color-secondary-400: #22d3ee;
+  --color-secondary-500: #06b6d4;
+  --color-secondary-600: #0891b2;
+  --color-secondary-700: #0e7490;
+  --color-secondary-800: #155e75;
+  --color-secondary-900: #164e63;
+}

assets/icons/edit.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="edit" class="svg-inline--fa fa-edit fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z"></path></svg>

assets/icons/foursquare.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="foursquare" class="svg-inline--fa fa-foursquare fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 368 512"><path fill="currentColor" d="M323.1 3H49.9C12.4 3 0 31.3 0 49.1v433.8c0 20.3 12.1 27.7 18.2 30.1 6.2 2.5 22.8 4.6 32.9-7.1C180 356.5 182.2 354 182.2 354c3.1-3.4 3.4-3.1 6.8-3.1h83.4c35.1 0 40.6-25.2 44.3-39.7l48.6-243C373.8 25.8 363.1 3 323.1 3zm-16.3 73.8l-11.4 59.7c-1.2 6.5-9.5 13.2-16.9 13.2H172.1c-12 0-20.6 8.3-20.6 20.3v13c0 12 8.6 20.6 20.6 20.6h90.4c8.3 0 16.6 9.2 14.8 18.2-1.8 8.9-10.5 53.8-11.4 58.8-.9 4.9-6.8 13.5-16.9 13.5h-73.5c-13.5 0-17.2 1.8-26.5 12.6 0 0-8.9 11.4-89.5 108.3-.9.9-1.8.6-1.8-.3V75.9c0-7.7 6.8-16.6 16.6-16.6h219c8.2 0 15.6 7.7 13.5 17.5z"></path></svg>

assets/icons/pinterest.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="pinterest" class="svg-inline--fa fa-pinterest fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z"></path></svg>

config/_default/config.toml

@@ -2,8 +2,6 @@
 # Refer to the theme docs for more details about each of these parameters.
 # https://jpanther.github.io/congo/docs/getting-started/
 
-theme = "congo"
-
 # baseURL = "https://your_domain.com/"
 languageCode = "en"
 defaultContentLanguage = "en"
@@ -25,6 +23,7 @@ enableRobotsTXT = true
   #   { discord = "https://discord.gg/invitecode" },
   #   { dribbble = "https://dribbble.com/username" },
   #   { facebook = "https://facebook.com/username" },
+  #   { foursquare = "https://foursquare.com/username" },
   #   { github = "https://github.com/username" },
   #   { gitlab = "https://gitlab.com/username" },
   #   { instagram = "https://instagram.com/username" },
@@ -33,6 +32,7 @@ enableRobotsTXT = true
   #   { linkedin = "https://linkedin.com/in/username" },
   #   { mastodon = "https://mastodon.instance/@username" },
   #   { medium = "https://medium.com/username" },
+  #   { pinterest = "https://pinterest.com/username" },
   #   { reddit = "https://reddit.com/user/username" },
   #   { slack = "https://workspace.url/team/userid" },
   #   { snapchat = "https://snapchat.com/add/username" },

config/_default/module.toml

@@ -0,0 +1,3 @@
+[hugoVersion]
+  extended = false
+  min = "0.86.1"

config/_default/params.toml

@@ -5,6 +5,7 @@
 # Refer to the theme docs for more details about each of these parameters.
 # https://jpanther.github.io/congo/docs/configuration/#theme-parameters
 
+colorScheme = "congo"
 # description = "My awesome website"
 # mainSections = ["section1", "section2"]
 
@@ -18,6 +19,9 @@
   showAuthor = true
   showBreadcrumbs = false
   showDraftLabel = true
+  showEdit = false
+  # editURL = "https://github.com/username/repo/"
+  editAppendPath = true
   showHeadingAnchors = true
   showPagination = true
   showReadingTime = true

exampleSite/config.toml

@@ -39,6 +39,9 @@ relativeURLs = true
 
 [params.article]
   showBreadcrumbs = true
+  showEdit = true
+  editURL = "https://github.com/jpanther/congo/tree/dev/exampleSite/content/"
+  editAppendPath = true
 
 [[menu.main]]
   name = "Docs"

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="flex items-center justify-between flex-grow dark:text-neutral-300">
-    <span class="prose dark:text-white">This is a demo of the <code id="layout">page</code> layout.</span>
+    <span class="prose dark:text-neutral">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-neutral !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;
@@ -26,4 +26,4 @@ This is a demo site built entirely using Congo. It also contains a complete set
 
 Explore the [sample pages](/samples/) to get a feel for what Congo can do. If you like what you see, check out the project on [Github](https://github.com/jpanther/congo) or read the [Installation guide](/docs/installation/) to get started.
 
-{{< figure src="mountains.jpg" caption="Photo by [Anna Scarfiello](https://unsplash.com/@little_anne?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)." >}}
+{{< figure src="mountains.jpg" width="1200" height="800" caption="Photo by [Anna Scarfiello](https://unsplash.com/@little_anne?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)." >}}

exampleSite/content/docs/advanced-customisation.md

@@ -9,11 +9,27 @@ showDate: false
 showAuthor: false
 ---
 
-There are a couple of ways you can make style changes to Congo.
+There are a few ways you can make style changes to Congo.
 
-If you just need to add or override some simple styles, you can do so by creating a `custom.css` file in your project's `static/css/` folder. This file will be loaded automatically after the theme's default styles.
+## Colour schemes
 
-Alternatively, 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.
+Congo ships with a few colour schemes out of the box. To change the basic colour scheme, you can set the `colorScheme` theme parameter to one of the default configurations. Valid options are `congo` (the default), `avocado`, `fire` and `ocean`.
+
+In addition to the default scheme, you can also create your own and restyle 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.
+
+Use one of the existing theme stylesheets as a template. You are free to define your own colours, but for some inspiration, check out the official [Tailwind colour palette reference](https://tailwindcss.com/docs/customizing-colors#color-palette-reference).
+
+## Overriding the stylesheet
+
+Sometimes you need to add a custom style to style your own HTML elements. Congo provides for this scenario by allowing you to overrid 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.
+
+## Building from source
+
+If you'd like to make a major change, you can take advantage of Tailwind CSS's JIT compiler and rebuild the entire theme CSS from scratch.
 
 {{< alert >}}
 **Note:** Building the theme manually is intended for advanced users.
@@ -27,39 +43,20 @@ npm install
 
 Once installed, you can edit the `themes/congo/tailwind.config.js` to change the styles that are applied throughout the theme. You can also adjust specific styles in `themes/congo/assets/css/main.css`.
 
-To allow for easy theme colour changes, Congo defines a `primary` and `secondary` colour palette that is used throughout the theme. In order to change the colour across the entire theme, simply edit the `tailwind.config.js` file accordingly.
+To allow for easy theme colour changes, 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. In order to change the colour across the entire theme, simply edit the `tailwind.config.js` file accordingly.
-
-For example, to change to a green colour scheme, you could apply these changes:
-
-```js
-  // themes/congo/tailwind.config.js
-
-  theme: {
-    colors: {
-      transparent: "transparent",
-      white: colors.white,
-      gray: colors.gray,
-      primary: colors.lime,
-      secondary: colors.teal,
-    },
-    ...
-  }
-```
 
 For a full list of colours available, and their corresponding configuration values, see the official [Tailwind docs](https://tailwindcss.com/docs/customizing-colors#color-palette-reference).
 
-After editing the configuration, you need to rebuild the theme's stylesheets.
+After editing the configuration, you need to rebuild the theme's stylesheets. This will run the Tailwind JIT compiler in watch mode which aids with testing style changes.
-
-```bash
-npm run build
-```
-
-This will automatically output a minified CSS file to `/themes/congo/static/css/main.css`.
-
-To aid with testing style changes, you can also run the Tailwind JIT comiler in watch mode.
 
 ```bash
 npm run dev
 ```
 
-Now whenever you make a change, the (non-minified) CSS files will be rebuilt automatically. This mode is useful to run when using `hugo server` to preview your site during development. Remember to perform a full build before publishing your website.
+This will automatically output a CSS file to `/themes/congo/assets/css/compiled/main.css`.
+
+{{< alert >}}
+**Note:** You should make manual edits to the compiled CSS file.
+{{< /alert >}}
+
+Now whenever you make a change, the CSS files will be rebuilt automatically. This mode is useful to run when using `hugo server` to preview your site during development. Asset files will be minified by Hugo at site build time.

exampleSite/content/docs/configuration.md

@@ -32,9 +32,9 @@ Note that the variable names provided in this table use dot notation to simplify
 <!-- prettier-ignore-start -->
 |Name|Type|Default|Description|
 | --- | --- | --- | --- |
-|`theme`|string|`"congo"`|This must be set to `"congo"` for the theme to function.|
+|`theme`|string|`"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`|string|_Not set_|The URL to the root of the website.|
-|`languageCode`|string|`"en"`|The language of the website for site metadata purposes. It can be a top-level language (ie. `"en"`) or a sub-variant (ie. `"en-AU"`)."|
+|`languageCode`|string|`en`|The language of the website for site metadata purposes. It can be a top-level language (ie. `"en"`) or a sub-variant (ie. `en-AU`)."|
 |`defaultContentLanguage`|string|`"en"`|This value determines the language of theme components."|
 |`title`|string|`"Congo"`|The title of the website. This will be displayed in the site header and footer.|
 |`copyright`|string|_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`.
@@ -56,6 +56,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 <!-- prettier-ignore-start -->
 |Name|Type|Default|Description|
 | --- | --- | --- | --- |
+|`colorScheme`|string|`"congo"`|The theme colour scheme to use. Valid values are `congo` (default), `avocado`, `ocean` and `fire`.|
 |`description`|string|_Not set_|The description of the website for metadata purposes.|
 |`mainSections`|array of strings|_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.|
 |`homepage.layout`|string|`"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](/docs/homepage-layout/) section for more details.|
@@ -65,6 +66,9 @@ Many of the article defaults here can be overridden on a per article basis by sp
 |`article.showAuthor`|boolean|`true`|Whether or not the author box is displayed in the article footer.|
 |`article.showBreadcrumbs`|boolean|`false`|Whether or not breadcrumbs are displayed in the article header.|
 |`article.showDraftLabel`|boolean|`true`|Whether or not the draft indicator is shown next to articles when site is built with `--buildDrafts`.|
+|`article.showEdit`|boolean|`false`|Whether or not the link to edit the article content should be displayed.|
+|`article.editURL`|string|_Not set_|When `article.showEdit` is active, the URL for the edit link.|
+|`article.editAppendPath`|boolean|`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`|boolean|`true`|Whether or not heading anchor links are displayed alongside headings within articles.|
 |`article.showPagination`|boolean|`true`|Whether or not the next/previous article links are displayed in the article footer.|
 |`article.showReadingTime`|boolean|`true`|Whether or not article reading times are displayed.|

exampleSite/content/docs/front-matter.md

@@ -19,6 +19,9 @@ Front matter parameter default values are inherited from the theme's [base confi
 |`externalUrl`|string|_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.|
 |`showDate`|boolean|`article.showDate`|Whether or not article dates are displayed.|
 |`showAuthor`|boolean|`article.showAuthor`|Whether or not the author box is displayed in the article footer.|
+|`showEdit`|boolean|`article.showEdit`|Whether or not the link to edit the article content should be displayed.|
+|`editURL`|string|`article.editURL`|When `showEdit` is active, the URL for the edit link.|
+|`editAppendPath`|boolean|`article.editAppendPath`|When `showEdit` is active, whether or not the path to the current article should be appended to the URL set at `editURL`.|
 |`showHeadingAnchors`|boolean|`article.showHeadingAnchors`|Whether or not heading anchor links are displayed alongside headings within this article.|
 |`showPagination`|boolean|`article.showPagination`|Whether or not the next/previous article links are displayed in the article footer.|
 |`showReadingTime`|boolean|`article.showReadingTime`|Whether or not article reading times are displayed.|

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. If you installed using Hugo Modules, you should not copy the `module.toml` file! 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.

exampleSite/content/samples/emoji-support.md

@@ -20,28 +20,4 @@ The [Emoji cheat sheet](http://www.emoji-cheat-sheet.com/) is a useful reference
 
 ---
 
-**N.B.** The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack; e.g.
+**N.B.** The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack.
-
-{{< highlight html >}}
-.emoji {
-font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
-}
-{{< /highlight >}}
-
-{{< css.inline >}}
-
-<style>
-.emojify {
-	font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
-	font-size: 2rem;
-	vertical-align: middle;
-}
-@media screen and (max-width:650px) {
-  .nowrap {
-    display: block;
-    margin: 25px 0;
-  }
-}
-</style>
-
-{{< /css.inline >}}

i18n/en.yaml

@@ -1,6 +1,7 @@
 article:
   anchor_label: "Anchor"
   draft: "Draft"
+  edit_title: "Edit content"
   reading_time:
     one: "{{ .Count }} min"
     other: "{{ .Count }} mins"

layouts/404.html

@@ -1,6 +1,8 @@
 {{ define "main" }}
   <h1 class="mb-3 text-4xl font-extrabold">{{ i18n "error.404_title" | emojify }}</h1>
-  <p class="mt-8 mb-12 text-gray-400 dark:text-gray-500">{{ i18n "error.404_error" | emojify }}</p>
+  <p class="mt-8 mb-12 text-neutral-400 dark:text-neutral-500">
+    {{ i18n "error.404_error" | emojify }}
+  </p>
   <div class="prose dark:prose-light">
     <p>{{ i18n "error.404_description" | emojify }}</p>
   </div>

layouts/_default/baseof.html

@@ -2,7 +2,7 @@
 <html lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en{{ end }}">
   {{- partial "head.html" . -}}
   <body
-    class="flex flex-col h-screen px-6 m-auto text-lg leading-7 bg-white text-grey-900 sm:px-14 md:px-24 lg:px-32 dark:bg-gray-800 dark:text-white max-w-7xl"
+    class="flex flex-col h-screen px-6 m-auto text-lg leading-7 bg-neutral text-neutral-900 sm:px-14 md:px-24 lg:px-32 dark:bg-neutral-800 dark:text-neutral max-w-7xl"
   >
     {{- partial "header.html" . -}}
     <main class="flex-grow">{{- block "main" . }}{{- end }}</main>

layouts/_default/list.html

@@ -4,8 +4,8 @@
     <section>
       {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
         {{ if $.Site.Params.list.groupByYear }}
-          <h2 class="mt-12 text-2xl font-bold first:mt-8">{{ .Key }}</h2>
+          <h2 class="mt-12 text-2xl font-bold first:mt-8 text-neutral-800">{{ .Key }}</h2>
-          <hr class="border-gray-400 border-dotted w-36" />
+          <hr class="border-dotted border-neutral-400 w-36" />
         {{ end }}
         {{ range .Pages }}
           {{ partial "article-link.html" . }}

layouts/_default/single.html

@@ -4,12 +4,11 @@
       {{ if .Site.Params.article.showBreadcrumbs | default false }}
         {{ partial "breadcrumbs.html" . }}
       {{ end }}
-      <h1 class="mt-0 text-4xl font-extrabold">{{ .Title | emojify }}</h1>
+      <h1 class="mt-0 text-4xl font-extrabold text-neutral-800 dark:text-neutral">
-      <div class="mt-8 mb-12 text-base text-gray-400 dark:text-gray-500">
+        {{ .Title | emojify }}
-        {{ partial "article-meta.html" . }}
+      </h1>
-        {{ if and .Draft .Site.Params.article.showDraftLabel }}
+      <div class="mt-8 mb-12 text-base text-neutral-400 dark:text-neutral-500">
-          <span class="pl-2">{{ partial "badge.html" (i18n "article.draft" | emojify) }}</span>
+        {{ partial "article-meta.html" (dict "context" . "scope" "single") }}
-        {{ end }}
       </div>
     </header>
     <section class="prose dark:prose-light">
@@ -20,7 +19,6 @@
       {{ partial "sharing-links.html" . }}
       {{ partial "article-pagination.html" . }}
     </footer>
-    {{/* Comments */}}
     {{ if templates.Exists "partials/comments.html" }}
       {{ partial "comments.html" . }}
     {{ end }}

layouts/_default/taxonomy.html

@@ -5,12 +5,12 @@
       <article class="w-full px-2 my-3 overflow-hidden sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5">
         <h2>
           <a
-            class="text-xl font-medium hover:underline underline-primary-500"
+            class="text-xl font-medium hover:underline hover:underline-primary-500 hover:underline-offset-small"
             href="{{ .Page.Permalink }}"
             >{{ .Page.Title }}</a
           >
           {{ if $.Site.Params.taxonomy.showTermCount | default true }}
-            <span class="text-base text-gray-400">
+            <span class="text-base text-neutral-400">
               <span class="px-1 text-primary-500">&middot;</span>
               {{ .Count }}
             </span>

layouts/_default/term.html

@@ -3,7 +3,7 @@
   <section>
     {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
       <h2 class="mt-12 text-2xl font-bold first:mt-8">{{ .Key }}</h2>
-      <hr class="border-gray-400 border-dotted w-36" />
+      <hr class="border-dotted border-neutral-400 w-36" />
       {{ range .Pages }}
         {{ partial "article-link.html" . }}
       {{ end }}

layouts/partials/article-link.html

@@ -1,26 +1,36 @@
 <article>
-  <h3 class="mt-6 text-xl font-semibold">
+  <h3 class="flex items-center mt-6 text-xl font-semibold">
-    {{ if isset .Params "externalUrl" }}
+    {{ with .Params.externalUrl }}
-      <a class="hover:underline" href="{{ .Params.externalUrl }}" target="_blank" rel="external"
+      <a
-        >{{ .Title }}</a
+        class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral"
+        href="{{ . }}"
+        target="_blank"
+        rel="external"
+        >{{ $.Title }}</a
       >
       <span
-        class="text-sm cursor-default"
+        class="-mt-2 text-xs cursor-default text-neutral-400 dark:text-neutral-500"
-        style="vertical-align: super;"
         title="{{ i18n "list.externalurl_title" }}"
-        >&#8599;</span
       >
+        &#8599;
+      </span>
     {{ else }}
-      <a class="hover:underline underline-primary-500" href="{{ .Permalink }}">{{ .Title }}</a>
+      <a
+        class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral"
+        href="{{ .Permalink }}"
+        >{{ .Title }}</a
+      >
     {{ end }}
     {{ if and .Draft .Site.Params.article.showDraftLabel }}
+      <div class="ml-2">
         {{ partial "badge.html" "Draft" }}
+      </div>
     {{ end }}
     {{ if templates.Exists "partials/extend-article-link.html" }}
       {{ partial "extend-article-link.html" . }}
     {{ end }}
   </h3>
-  <div class="text-sm text-gray-400 dark:text-gray-500">
+  <div class="text-sm text-neutral-400 dark:text-neutral-500">
     {{ partial "article-meta.html" . }}
   </div>
 </article>

layouts/partials/article-meta.html

@@ -1,17 +1,39 @@
-{{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }}
+{{/* Determine the correct context and scope */}}
-  <time datetime="{{ .Date }}">
+{{/* This allows for different logic depending on where the partial is called */}}
-    {{ .Date.Format .Site.Params.article.dateFormat | default "2 January 2006" }}
+{{ $context := . }}
-  </time>
+{{ $scope := default nil }}
+
+{{ if (reflect.IsMap . ) }}
+  {{ $context = .context }}
+  {{ $scope = cond (not .scope) nil .scope }}
 {{ end }}
-{{ if and
+
-  (.Params.showDate | default (.Site.Params.article.showDate | default true))
+{{ with $context }}
-  (.Params.showReadingTime | default (.Site.Params.article.showReadingTime | default true))
+  {{ $meta := newScratch }}
-  (ne .ReadingTime 0)
+
-}}
+  {{/* Gather partials for this context */}}
-  <span class="px-1 text-primary-500">&middot;</span>
+  {{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }}
-{{ end }}
+    {{ $meta.Add "partials" (slice (partial "meta/date.html" .)) }}
-{{ if and (.Params.showReadingTime | default (.Site.Params.article.showReadingTime | default true)) (ne .ReadingTime 0) }}
+  {{ end }}
-  <span title="{{ i18n "article.reading_time_title" }}">
+
-    {{ i18n "article.reading_time" .ReadingTime | emojify }}
+  {{ if and (.Params.showReadingTime | default (.Site.Params.article.showReadingTime | default true)) (ne .ReadingTime 0) }}
-  </span>
+    {{ $meta.Add "partials" (slice (partial "meta/reading-time.html" .)) }}
+  {{ end }}
+
+  {{ if and (eq $scope "single") (.Params.showEdit | default (.Site.Params.article.showEdit | default false)) }}
+    {{ $meta.Add "partials" (slice (partial "meta/edit.html" .)) }}
+  {{ end }}
+
+
+  <div class="flex flex-row items-center">
+    {{/* Output partials */}}
+    {{ with ($meta.Get "partials") }}
+      {{ delimit . "<span class=\"px-2 text-primary-500\">&middot;</span>" }}
+    {{ end }}
+
+    {{/* Output draft label */}}
+    {{ if and (eq $scope "single") (and .Draft .Site.Params.article.showDraftLabel) }}
+      <span class="pl-2">{{ partial "badge.html" (i18n "article.draft" | emojify) }}</span>
+    {{ end }}
+  </div>
 {{ end }}

layouts/partials/article-pagination.html

@@ -1,7 +1,7 @@
 {{ if .Params.showPagination | default (.Site.Params.article.showPagination | default true) }}
   {{ if or .NextInSection .PrevInSection }}
     <div class="pt-8 article-pagination">
-      <hr class="border-gray-300 border-dotted dark:border-gray-600" />
+      <hr class="border-dotted border-neutral-300 dark:border-neutral-600" />
       <div class="flex justify-between pt-3">
         <span>
           {{ if .NextInSection }}
@@ -9,15 +9,12 @@
               <span class="mr-3 article-pagination-direction">&larr;</span>
               <span class="flex flex-col">
                 <span class="article-pagination-title">{{ .NextInSection.Title }}</span>
+                <span class="-mt-1 text-xs text-neutral-400 dark:text-neutral-500">
                   {{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }}
-                  <time
+                    {{ partial "meta/date.html" . }}
-                    class="-mt-1 text-xs text-gray-400 dark:text-gray-500"
-                    datetime="{{ .Date }}"
-                  >
-                    {{ .Date.Format .Site.Params.article.dateFormat | default "2 January 2006" }}
-                  </time>
                   {{ end }}
                 </span>
+              </span>
             </a>
           {{ end }}
         </span>
@@ -26,15 +23,12 @@
             <a class="flex text-right" href="{{ .PrevInSection.Permalink }}">
               <span class="flex flex-col">
                 <span class="article-pagination-title">{{ .PrevInSection.Title }}</span>
+                <span class="-mt-1 text-xs text-neutral-400 dark:text-neutral-500">
                   {{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }}
-                  <time
+                    {{ partial "meta/date.html" . }}
-                    class="-mt-1 text-xs text-gray-400 dark:text-gray-500"
-                    datetime="{{ .Date }}"
-                  >
-                    {{ .Date.Format .Site.Params.article.dateFormat | default "2 January 2006" }}
-                  </time>
                   {{ end }}
                 </span>
+              </span>
               <span class="ml-3 article-pagination-direction">&rarr;</span>
             </a>
           {{ end }}

layouts/partials/author-links.html

@@ -1,5 +1,5 @@
 {{ with .Site.Author.links }}
-  <div class="flex flex-wrap text-gray-400 dark:text-gray-500">
+  <div class="flex flex-wrap text-neutral-400 dark:text-neutral-500">
     {{ range $links := . }}
       {{ range $name, $url := $links }}
         <a
@@ -7,7 +7,7 @@
           href="{{ $url }}"
           target="_blank"
           alt="{{ $name | title }}"
-          rel="me"
+          rel="me noopener noreferrer"
           >{{ partial "icon.html" $name }}</a
         >
       {{ end }}

layouts/partials/author.html

@@ -5,10 +5,10 @@
     {{ end }}
     <div>
       {{ with .Site.Author.name }}
-        <div class="text-[0.6rem] leading-3 text-gray-400 dark:text-gray-500 uppercase">
+        <div class="text-[0.6rem] leading-3 text-neutral-400 dark:text-neutral-500 uppercase">
           {{ i18n "author.byline_title" | emojify }}
         </div>
-        <div class="font-semibold leading-6 text-gray-800 dark:text-gray-300">
+        <div class="font-semibold leading-6 text-neutral-800 dark:text-neutral-300">
           {{ . }}
         </div>
       {{ end }}

layouts/partials/badge.html

@@ -1,5 +1,7 @@
-<span
+<span class="flex">
-  class="ml-1 px-1 py-[1px] text-xs font-normal border rounded-md text-primary-700 dark:text-primary-400 border-primary-400 dark:border-primary-600 inline-block align-middle mb-1"
+  <span
->
+    class="ml-1 px-1 py-[1px] text-xs font-normal border rounded-md text-primary-700 dark:text-primary-400 border-primary-400 dark:border-primary-600"
+  >
     {{ . }}
+  </span>
 </span>

layouts/partials/breadcrumbs.html

@@ -1,4 +1,4 @@
-<ol class="text-sm text-gray-400 dark:text-gray-500">
+<ol class="text-sm text-neutral-400 dark:text-neutral-500">
   {{ template "crumb" (dict "p1" . "p2" .) }}
 </ol>
 {{ define "crumb" }}
@@ -8,7 +8,9 @@
     {{ template "crumb" (dict "p1" .p1.Site.Home "p2" .p2 ) }}
   {{ end }}
   <li class="inline {{ if or (eq .p1 .p2) (.p1.IsHome) }}hidden{{ end }}">
-    <a class="hover:underline underline-gray-300 dark:underline-gray-600" href="{{ .p1.Permalink }}"
+    <a
+      class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600"
+      href="{{ .p1.Permalink }}"
       >{{ .p1.Title }}</a
     ><span class="px-1 text-primary-500">/</span>
   </li>

layouts/partials/footer.html

@@ -1,6 +1,6 @@
 <footer class="py-10 text-sm">
   {{/* Copyright */}}
-  <p class="text-gray-400 dark:text-gray-500">
+  <p class="text-neutral-400 dark:text-neutral-500">
     {{- with .Site.Copyright }}
       {{ . | emojify | markdownify }}
     {{- else }}
@@ -11,19 +11,21 @@
   </p>
   {{/* Theme attribution */}}
   {{ if .Site.Params.attribution | default true }}
-    <p class="text-xs text-gray-300 dark:text-gray-600">
+    <p class="text-xs text-neutral-300 dark:text-neutral-600">
       {{ i18n "footer.powered_by" }}
       <a
-        class="hover:underline underline-primary-300 hover:text-primary-400"
+        class="hover:underline hover:underline-primary-300 hover:text-primary-400"
         href="https://gohugo.io/"
         target="_blank"
+        rel="noopener noreferrer"
         >Hugo</a
       >
       &amp;
       <a
-        class="hover:underline underline-primary-300 hover:text-primary-400"
+        class="hover:underline hover:underline-primary-300 hover:text-primary-400"
         href="https://git.io/hugo-congo"
         target="_blank"
+        rel="noopener noreferrer"
         >Congo</a
       >
     </p>
@@ -35,7 +37,7 @@
 </footer>
 
 {{/* Include mermaid.js only on pages that use the shortcode */}}
-{{- if (in (string .Content) "class=\"mermaid\"") -}}
+{{- if .Page.HasShortcode "mermaid" -}}
   <script src="https://unpkg.com/mermaid@8.11.4/dist/mermaid.min.js"></script>
   <script>
     mermaid.initialize({ theme: "default" });

layouts/partials/head.html

@@ -27,10 +27,35 @@
     {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
   {{ end -}}
   {{/* Styles */}}
-  <link type="text/css" rel="stylesheet" href="{{ "css/main.css" | absURL }}" />
+  {{ $schemeCSS := resources.Get (printf "css/schemes/%s.css" (.Site.Params.colorScheme | default "congo")) }}
-  {{ if (fileExists "static/css/custom.css") -}}
+  {{ if not $schemeCSS }}
-    <link type="text/css" rel="stylesheet" href="{{ "css/custom.css" | absURL }}" />
+    {{ $schemeCSS = resources.Get "css/schemes/congo.css" }}
-  {{- end }}
+  {{ end }}
+  {{ $schemeStyles := $schemeCSS | resources.Minify | resources.Fingerprint "sha512" }}
+  <link
+    type="text/css"
+    rel="stylesheet"
+    href="{{ $schemeStyles.Permalink }}"
+    integrity="{{ $schemeStyles.Data.Integrity }}"
+  />
+  {{ $mainCSS := resources.Get "css/compiled/main.css" }}
+  {{ $mainStyles := $mainCSS | resources.Minify | resources.Fingerprint "sha512" }}
+  <link
+    type="text/css"
+    rel="stylesheet"
+    href="{{ $mainStyles.Permalink }}"
+    integrity="{{ $mainStyles.Data.Integrity }}"
+  />
+  {{ $customCSS := resources.Get "css/custom.css" }}
+  {{ if $customCSS }}
+    {{ $customStyles := $customCSS | resources.Minify | resources.Fingerprint "sha512" }}
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="{{ $customStyles.Permalink }}"
+      integrity="{{ $customStyles.Data.Integrity }}"
+    />
+  {{ end }}
   {{/* Icons */}}
   {{ if templates.Exists "partials/favicons.html" }}
     {{ partialCached "favicons.html" .Site }}

layouts/partials/header.html

@@ -1,7 +1,7 @@
-<header class="flex justify-between py-6 font-semibold sm:py-10">
+<header class="flex justify-between py-6 font-semibold sm:py-10 text-neutral-800 dark:text-neutral">
   <div>
     <a
-      class="hover:underline underline-primary-500 underline-thickness-bold underline-offset-small"
+      class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small"
       rel="me"
       href="{{ .Site.BaseURL }}"
       >{{ .Site.Title }}</a
@@ -10,9 +10,9 @@
   <nav>
     <ul class="flex flex-col list-none sm:flex-row">
       {{ range .Site.Menus.main }}
-        <li class="text-right sm:mr-7 sm:last:mr-0">
+        <li class="mb-1 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
           <a
-            class="hover:underline underline-primary-500 underline-thickness-bold underline-offset-small"
+            class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small"
             href="{{ .URL | absURL }}"
             title="{{ .Title }}"
             >{{ .Name }}</a

layouts/partials/home/profile.html

@@ -3,7 +3,7 @@
     h-full
   {{ end }}"
 >
-  <header class="flex flex-col mb-3">
+  <header class="flex flex-col items-center mb-3">
     {{ with .Site.Author.image }}
       <img class="mb-2 rounded-full w-36 h-36" src="{{ . | absURL }}" />
     {{ end }}

layouts/partials/meta/date.html

@@ -0,0 +1,4 @@
+<time datetime="{{ .Date }}">
+  {{- .Date.Format .Site.Params.article.dateFormat | default "2 January 2006" -}}
+</time>
+{{- /* Trim EOF */ -}}

layouts/partials/meta/edit.html

@@ -0,0 +1,19 @@
+{{ $url := .Params.editURL | default (.Site.Params.article.editURL | default "#") }}
+{{ $slash := "" }}
+{{ if .Params.editAppendPath | default ( .Site.Params.article.editAppendPath | default false ) }}
+  {{ if ne (substr $url -1 1) "/" }}
+    {{ $slash = "/" }}
+  {{ end }}
+  {{ $url = printf "%s%s%s" $url $slash (path.Join .File.Path) }}
+{{ end }}
+<span class="mb-[2px]">
+  <a
+    href="{{ $url }}"
+    class="text-lg hover:text-primary-500"
+    rel="noopener noreferrer"
+    target="_blank"
+    title="{{ i18n "article.edit_title" }}"
+    >{{ partial "icon.html" "edit" }}</a
+  >
+</span>
+{{- /* Trim EOF */ -}}

layouts/partials/meta/reading-time.html

@@ -0,0 +1,4 @@
+<span title="{{ i18n "article.reading_time_title" }}">
+  {{- i18n "article.reading_time" .ReadingTime | emojify -}}
+</span>
+{{- /* Trim EOF */ -}}

layouts/partials/pagination.html

@@ -5,7 +5,7 @@
       <li>
         <a
           href="{{ $paginator.Prev.URL }}"
-          class="mx-1 block min-w-[1.8rem] text-center hover:bg-primary-600 hover:text-white rounded"
+          class="mx-1 block min-w-[1.8rem] text-center hover:bg-primary-600 hover:text-neutral rounded"
           rel="prev"
         >
           &larr;
@@ -16,8 +16,8 @@
       <li>
         <a
           href="{{ .URL }}"
-          class="mx-1 block min-w-[1.8rem] text-center hover:bg-primary-600 hover:text-white rounded {{ if eq . $paginator }}
+          class="mx-1 block min-w-[1.8rem] text-center hover:bg-primary-600 hover:text-neutral rounded {{ if eq . $paginator }}
-            bg-primary-200 dark:bg-primary-400 dark:text-gray-800
+            bg-primary-200 dark:bg-primary-400 dark:text-neutral-800
           {{ end }}"
         >
           {{ .PageNumber }}
@@ -28,7 +28,7 @@
       <li>
         <a
           href="{{ $paginator.Next.URL }}"
-          class="mx-1 block min-w-[1.8rem] text-center hover:bg-primary-600 hover:text-white rounded"
+          class="mx-1 block min-w-[1.8rem] text-center hover:bg-primary-600 hover:text-neutral rounded"
           rel="next"
         >
           &rarr;

layouts/partials/section-header.html

@@ -3,7 +3,7 @@
     {{ partial "breadcrumbs.html" . }}
   {{ end }}
   <section class="prose dark:prose-light">
-    <h1 class="mb-3 text-4xl font-extrabold">{{ .Title }}</h1>
+    <h1 class="mb-3 text-4xl font-extrabold text-neutral-800">{{ .Title }}</h1>
     <section>{{ .Content }}</section>
   </section>
 </header>

layouts/partials/sharing-links.html

@@ -4,7 +4,7 @@
     {{ range . }}
       {{ with index $links . }}
         <a
-          class="bg-gray-300 text-gray-700 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-primary-400 dark:hover:text-gray-800 m-1 hover:bg-primary-500 hover:text-white rounded min-w-[2.4rem] inline-block text-center p-1"
+          class="bg-neutral-300 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800 m-1 hover:bg-primary-500 hover:text-neutral rounded min-w-[2.4rem] inline-block text-center p-1"
           href="{{ printf .url $.Permalink $.Title }}"
           title="{{ i18n .title }}"
           >{{ partial "icon.html" .icon }}</a

layouts/shortcodes/alert.html

@@ -2,7 +2,7 @@
   <span class="pr-3 text-primary-400">
     {{ partial "icon.html" "exclamation-triangle" }}
   </span>
-  <span class="no-prose dark:text-gray-300">
+  <span class="no-prose dark:text-neutral-300">
     {{- .Inner | markdownify -}}
   </span>
 </div>

layouts/shortcodes/button.html

@@ -1,8 +1,8 @@
-<button
+<a
-  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 py-2 !text-neutral !no-underline !rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
   {{ with .Get "href" }}href="{{ . }}"{{ end }}
   {{ with .Get "target" }}target="{{ . }}"{{ end }}
   role="button"
 >
   {{ .Inner }}
-</button>
+</a>

layouts/shortcodes/lead.html

@@ -1,3 +1,3 @@
-<p class="!mb-9 text-xl">
+<p class="!mb-9 text-xl text-neutral-400 dark:text-neutral-500">
   {{ .Inner }}
 </p>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "hugo-congo-theme",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "hugo-congo-theme",
-      "version": "1.0.0",
+      "version": "1.1.1",
       "license": "MIT",
       "devDependencies": {
         "@tailwindcss/typography": "^0.4.1",

package.json

@@ -1,11 +1,11 @@
 {
   "name": "hugo-congo-theme",
-  "version": "1.1.1",
+  "version": "v1.2.0",
   "description": "Congo theme for Hugo",
   "main": "index.js",
   "scripts": {
-    "dev": "NODE_ENV=development ./node_modules/tailwindcss/lib/cli.js -i ./assets/css/main.css -o ./static/css/main.css --jit -w",
+    "dev": "NODE_ENV=development ./node_modules/tailwindcss/lib/cli.js -i ./assets/css/main.css -o ./assets/css/compiled/main.css --jit -w",
-    "build": "NODE_ENV=production ./node_modules/tailwindcss/lib/cli.js -i ./assets/css/main.css -o ./static/css/main.css --jit --minify",
+    "build": "NODE_ENV=production ./node_modules/tailwindcss/lib/cli.js -i ./assets/css/main.css -o ./assets/css/compiled/main.css --jit",
     "example": "hugo server --source exampleSite --themesDir ../.. --buildDrafts"
   },
   "repository": {

release.sh

@@ -6,15 +6,37 @@ branch=$(git symbolic-ref HEAD | sed -e 's,.*/\(.*\),\1,')
 # push any local changes
 git push
 
-# checkout stable branch (this will catch uncommitted changes)
+# run a build to catch any uncommitted updates
-git checkout stable || exit 1
+npm run build
 
 # branch validation
 if [ $branch = "dev" ]; then
+	# check current branch is clean
+	if output=$(git status --porcelain) && [ -z "$output" ]; then
+		
+		# get the version number
 		echo "Enter the release version (eg. v1.0.0):"
 		read version
 
-	echo "Started releasing $version for Congo..."
+		echo "Started releasing Congo $version..."
+
+		# update package version
+		jq --arg version "$version" '.version=$version' package.json > package.tmp && mv package.tmp package.json
+		sed -i -e "1s/^\(\/\*! Congo \)v[0-9]\{1,\}\.[0-9]\{1,\}\.[0-9]\{1,\}/\1$version/" assets/css/main.css
+
+		# update changelog
+		chan release $version || exit
+		npx prettier --write CHANGELOG.md
+
+		# build project
+		npm run build
+
+		# commit version updates
+		git commit -a -m "🔨 Preparing release $version"
+		git push
+
+		# switch to stable branch
+		git checkout stable
 
 		# pull latest from stable
 		git pull
@@ -29,11 +51,18 @@ if [ $branch = "dev" ]; then
 		git push
 		git push --tags
 
-	echo "$version successfully released!"
+		# publish GitHub release
+		timeout 2 chan gh-release $version
+
+		echo "Congo $version successfully released! 🎉"
 		echo "Returning to dev branch..."
 
 		git checkout dev
 
+	else	
+		echo "ERROR: There are unstaged changes in development!"
+		echo "Clean the working directory and try again."
+	fi
 else 
-	echo "Releases can only be published from the dev branch!"
+	echo "ERROR: Releases can only be published from the dev branch!"
 fi

tailwind.config.js

@@ -14,10 +14,43 @@ module.exports = {
   theme: {
     colors: {
       transparent: "transparent",
-      white: colors.white,
+      neutral: {
-      gray: colors.gray,
+        DEFAULT: "var(--color-neutral)",
-      primary: colors.violet,
+        50: "var(--color-neutral-50)",
-      secondary: colors.fuchsia,
+        100: "var(--color-neutral-100)",
+        200: "var(--color-neutral-200)",
+        300: "var(--color-neutral-300)",
+        400: "var(--color-neutral-400)",
+        500: "var(--color-neutral-500)",
+        600: "var(--color-neutral-600)",
+        700: "var(--color-neutral-700)",
+        800: "var(--color-neutral-800)",
+        900: "var(--color-neutral-900)",
+      },
+      primary: {
+        50: "var(--color-primary-50)",
+        100: "var(--color-primary-100)",
+        200: "var(--color-primary-200)",
+        300: "var(--color-primary-300)",
+        400: "var(--color-primary-400)",
+        500: "var(--color-primary-500)",
+        600: "var(--color-primary-600)",
+        700: "var(--color-primary-700)",
+        800: "var(--color-primary-800)",
+        900: "var(--color-primary-900)",
+      },
+      secondary: {
+        50: "var(--color-secondary-50)",
+        100: "var(--color-secondary-100)",
+        200: "var(--color-secondary-200)",
+        300: "var(--color-secondary-300)",
+        400: "var(--color-secondary-400)",
+        500: "var(--color-secondary-500)",
+        600: "var(--color-secondary-600)",
+        700: "var(--color-secondary-700)",
+        800: "var(--color-secondary-800)",
+        900: "var(--color-secondary-900)",
+      },
     },
     underlineOffset: {
       small: "2px",
@@ -30,6 +63,7 @@ module.exports = {
         DEFAULT: {
           css: [
             {
+              color: theme("colors.neutral.700"),
               a: {
                 color: theme("colors.primary.700"),
                 textDecoration: "underline",
@@ -38,33 +72,64 @@ module.exports = {
                 "&:hover": {
                   backgroundColor: theme("colors.primary.600"),
                   borderRadius: "0.09rem",
-                  color: theme("colors.white"),
+                  color: theme("colors.neutral.DEFAULT"),
                   textDecoration: "none",
                 },
               },
+              strong: {
+                color: theme("colors.neutral.900"),
+              },
+              "ol > li::before": {
+                color: theme("colors.neutral.800"),
+              },
+              "ul > li::before": {
+                backgroundColor: theme("colors.neutral.500"),
+              },
+              hr: {
+                borderColor: theme("colors.neutral.200"),
+              },
               blockquote: {
+                color: theme("colors.neutral.800"),
                 borderLeftColor: theme("colors.primary.200"),
               },
+              h1: {
+                color: theme("colors.neutral.800"),
+                position: "relative",
+              },
               h2: {
+                color: theme("colors.neutral.800"),
                 position: "relative",
               },
               h3: {
+                color: theme("colors.neutral.800"),
                 position: "relative",
               },
               h4: {
+                color: theme("colors.neutral.800"),
                 position: "relative",
               },
               code: {
                 color: theme("colors.secondary.700"),
               },
               "pre code": {
-                color: theme("colors.gray.700"),
+                color: theme("colors.neutral.700"),
               },
               pre: {
-                backgroundColor: theme("colors.gray.50"),
+                color: theme("colors.neutral.700"),
+                backgroundColor: theme("colors.neutral.50"),
+              },
+              "pre code": {
+                color: theme("colors.neutral.700"),
+              },
+              thead: {
+                color: theme("colors.neutral.800"),
+                borderBottomColor: theme("colors.neutral.500"),
+              },
+              "tbody tr": {
+                borderBottomColor: theme("colors.neutral.300"),
               },
               kbd: {
-                backgroundColor: theme("colors.gray.200"),
+                backgroundColor: theme("colors.neutral.200"),
                 padding: "0.1rem 0.4rem",
                 borderRadius: "0.25rem",
                 fontSize: "0.9rem",
@@ -81,65 +146,65 @@ module.exports = {
         light: {
           css: [
             {
-              color: theme("colors.gray.400"),
+              color: theme("colors.neutral.400"),
               a: {
                 color: theme("colors.primary.400"),
-                textDecorationColor: theme("colors.gray.500"),
+                textDecorationColor: theme("colors.neutral.500"),
               },
               strong: {
-                color: theme("colors.white"),
+                color: theme("colors.neutral.DEFAULT"),
               },
               "ol > li::before": {
-                color: theme("colors.gray.400"),
+                color: theme("colors.neutral.400"),
               },
               "ul > li::before": {
-                backgroundColor: theme("colors.gray.600"),
+                backgroundColor: theme("colors.neutral.600"),
               },
               hr: {
-                borderColor: theme("colors.gray.200"),
+                borderColor: theme("colors.neutral.500"),
               },
               blockquote: {
-                color: theme("colors.gray.200"),
+                color: theme("colors.neutral.200"),
                 borderLeftColor: theme("colors.primary.900"),
               },
               h1: {
-                color: theme("colors.white"),
+                color: theme("colors.neutral.DEFAULT"),
               },
               h2: {
-                color: theme("colors.white"),
+                color: theme("colors.neutral.DEFAULT"),
               },
               h3: {
-                color: theme("colors.white"),
+                color: theme("colors.neutral.DEFAULT"),
               },
               h4: {
-                color: theme("colors.white"),
+                color: theme("colors.neutral.DEFAULT"),
               },
               "figure figcaption": {
-                color: theme("colors.gray.400"),
+                color: theme("colors.neutral.400"),
               },
               code: {
                 color: theme("colors.secondary.400"),
               },
               "a code": {
-                color: theme("colors.white"),
+                color: theme("colors.neutral.DEFAULT"),
               },
               pre: {
-                color: theme("colors.gray.200"),
+                color: theme("colors.neutral.200"),
-                backgroundColor: theme("colors.gray.700"),
+                backgroundColor: theme("colors.neutral.700"),
               },
               "pre code": {
-                color: theme("colors.gray.200"),
+                color: theme("colors.neutral.200"),
               },
               thead: {
-                color: theme("colors.white"),
+                color: theme("colors.neutral.DEFAULT"),
-                borderBottomColor: theme("colors.gray.400"),
+                borderBottomColor: theme("colors.neutral.500"),
               },
               "tbody tr": {
-                borderBottomColor: theme("colors.gray.600"),
+                borderBottomColor: theme("colors.neutral.700"),
               },
               kbd: {
-                backgroundColor: theme("colors.gray.700"),
+                backgroundColor: theme("colors.neutral.700"),
-                color: theme("colors.gray.300"),
+                color: theme("colors.neutral.300"),
               },
               mark: {
                 backgroundColor: theme("colors.secondary.400"),

theme.toml

@@ -5,8 +5,6 @@ license = "MIT"
 licenselink = "https://github.com/jpanther/congo/blob/master/LICENSE"
 description = "A simple, lightweight theme for Hugo built with Tailwind CSS."
 
-min_version = "0.86.1"
-
 homepage = "https://github.com/jpanther/congo/"
 demosite = "https://jpanther.github.io/congo/"