marcel
/
congo
mirror of https://github.com/jpanther/congo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

🔖 Release v1.2.0

pull/155/head v1.2.0
James Panther 2021-08-22 17:24:19 +10:00
parent d31e593574 d20e092400
commit 095459ff3b
No known key found for this signature in database
GPG Key ID: D36F789E45745D17
57 changed files with 3431 additions and 296 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
.github/workflows/test-build.yml vendored 100644
View File

@ -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/

33
CHANGELOG.md
View File

@ -1,12 +1,32 @@
# Changelog
All notable changes to Congo will be documented in this file.
Things that need attention when upgrading from a prior version are marked ⚠️.
All notable changes to Congo will be documented in this file. 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

94
README.md
View File

@ -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.
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.
Refer to the [theme documentation](https://jpanther.github.io/congo/docs/advanced-customisation/) for details on customising Congo, including rebuilding the theme from scratch.
---

2745
assets/css/compiled/main.css 100644
View File

File diff suppressed because it is too large Load Diff

28
assets/css/main.css
View File

@ -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 {

37
assets/css/schemes/avocado.css 100644
View File

@ -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;
}

37
assets/css/schemes/congo.css 100644
View File

@ -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;
}

37
assets/css/schemes/fire.css 100644
View File

@ -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;
}

37
assets/css/schemes/ocean.css 100644
View File

@ -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;
}

1
assets/icons/edit.svg 100644
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 747 B

1
assets/icons/foursquare.svg 100644
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 783 B

1
assets/icons/pinterest.svg 100644
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 904 B

4
config/_default/config.toml
View File

@ -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" },

3
config/_default/module.toml 100644
View File

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

4
config/_default/params.toml
View File

@ -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

3
exampleSite/config.toml
View File

@ -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"

10
exampleSite/content/_index.md
View File

@ -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>
<span class="flex items-center justify-between flex-grow dark:text-neutral-300">
<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)." >}}

59
exampleSite/content/docs/advanced-customisation.md
View File

@ -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.
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,
},
...
}
```
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 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.
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 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.

8
exampleSite/content/docs/configuration.md
View File

@ -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.|

3
exampleSite/content/docs/front-matter.md
View File

@ -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.|

64
exampleSite/content/docs/installation.md
View File

@ -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.

BIN
exampleSite/content/mountains.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 669 KiB

After

Width:  |  Height:  |  Size: 106 KiB

26
exampleSite/content/samples/emoji-support.md
View File

@ -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.
{{< 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 >}}
**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.

BIN
exampleSite/static/img/author.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 114 KiB

After

Width:  |  Height:  |  Size: 28 KiB

1
i18n/en.yaml
View File

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

4
layouts/404.html
View File

@ -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>

2
layouts/_default/baseof.html
View File

@ -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>

4
layouts/_default/list.html
View File

@ -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>
<hr class="border-gray-400 border-dotted w-36" />
<h2 class="mt-12 text-2xl font-bold first:mt-8 text-neutral-800">{{ .Key }}</h2>
<hr class="border-dotted border-neutral-400 w-36" />
{{ end }}
{{ range .Pages }}
{{ partial "article-link.html" . }}

12
layouts/_default/single.html
View File

@ -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>
<div class="mt-8 mb-12 text-base text-gray-400 dark:text-gray-500">
{{ partial "article-meta.html" . }}
{{ if and .Draft .Site.Params.article.showDraftLabel }}
<span class="pl-2">{{ partial "badge.html" (i18n "article.draft" | emojify) }}</span>
{{ end }}
<h1 class="mt-0 text-4xl font-extrabold text-neutral-800 dark:text-neutral">
{{ .Title | emojify }}
</h1>
<div class="mt-8 mb-12 text-base text-neutral-400 dark:text-neutral-500">
{{ partial "article-meta.html" (dict "context" . "scope" "single") }}
</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 }}

4
layouts/_default/taxonomy.html
View File

@ -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>

2
layouts/_default/term.html
View File

@ -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 }}

30
layouts/partials/article-link.html
View File

@ -1,26 +1,36 @@
<article>
<h3 class="mt-6 text-xl font-semibold">
{{ if isset .Params "externalUrl" }}
<a class="hover:underline" href="{{ .Params.externalUrl }}" target="_blank" rel="external"
>{{ .Title }}</a
<h3 class="flex items-center mt-6 text-xl font-semibold">
{{ with .Params.externalUrl }}
<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"
style="vertical-align: super;"
class="-mt-2 text-xs cursor-default text-neutral-400 dark:text-neutral-500"
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 }}
{{ partial "badge.html" "Draft" }}
<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>

52
layouts/partials/article-meta.html
View File

@ -1,17 +1,39 @@
{{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }}
<time datetime="{{ .Date }}">
{{ .Date.Format .Site.Params.article.dateFormat | default "2 January 2006" }}
</time>
{{/* Determine the correct context and scope */}}
{{/* This allows for different logic depending on where the partial is called */}}
{{ $context := . }}
{{ $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))
(.Params.showReadingTime | default (.Site.Params.article.showReadingTime | default true))
(ne .ReadingTime 0)
}}
<span class="px-1 text-primary-500">&middot;</span>
{{ end }}
{{ if and (.Params.showReadingTime | default (.Site.Params.article.showReadingTime | default true)) (ne .ReadingTime 0) }}
<span title="{{ i18n "article.reading_time_title" }}">
{{ i18n "article.reading_time" .ReadingTime | emojify }}
</span>
{{ with $context }}
{{ $meta := newScratch }}
{{/* Gather partials for this context */}}
{{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }}
{{ $meta.Add "partials" (slice (partial "meta/date.html" .)) }}
{{ end }}
{{ if and (.Params.showReadingTime | default (.Site.Params.article.showReadingTime | default true)) (ne .ReadingTime 0) }}
{{ $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 }}

28
layouts/partials/article-pagination.html
View File

@ -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,14 +9,11 @@
<span class="mr-3 article-pagination-direction">&larr;</span>
<span class="flex flex-col">
<span class="article-pagination-title">{{ .NextInSection.Title }}</span>
{{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }}
<time
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 class="-mt-1 text-xs text-neutral-400 dark:text-neutral-500">
{{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }}
{{ partial "meta/date.html" . }}
{{ end }}
</span>
</span>
</a>
{{ end }}
@ -26,14 +23,11 @@
<a class="flex text-right" href="{{ .PrevInSection.Permalink }}">
<span class="flex flex-col">
<span class="article-pagination-title">{{ .PrevInSection.Title }}</span>
{{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }}
<time
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 class="-mt-1 text-xs text-neutral-400 dark:text-neutral-500">
{{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }}
{{ partial "meta/date.html" . }}
{{ end }}
</span>
</span>
<span class="ml-3 article-pagination-direction">&rarr;</span>
</a>

4
layouts/partials/author-links.html
View File

@ -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 }}

4
layouts/partials/author.html
View File

@ -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 }}

10
layouts/partials/badge.html
View File

@ -1,5 +1,7 @@
<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 inline-block align-middle mb-1"
>
{{ . }}
<span class="flex">
<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>

6
layouts/partials/breadcrumbs.html
View File

@ -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>

12
layouts/partials/footer.html
View File

@ -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" });

33
layouts/partials/head.html
View File

@ -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 }}" />
{{ if (fileExists "static/css/custom.css") -}}
<link type="text/css" rel="stylesheet" href="{{ "css/custom.css" | absURL }}" />
{{- end }}
{{ $schemeCSS := resources.Get (printf "css/schemes/%s.css" (.Site.Params.colorScheme | default "congo")) }}
{{ if not $schemeCSS }}
{{ $schemeCSS = resources.Get "css/schemes/congo.css" }}
{{ 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 }}

8
layouts/partials/header.html
View File

@ -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

2
layouts/partials/home/profile.html
View File

@ -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 }}

4
layouts/partials/meta/date.html 100644
View File

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

19
layouts/partials/meta/edit.html 100644
View File

@ -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 */ -}}

4
layouts/partials/meta/reading-time.html 100644
View File

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

8
layouts/partials/pagination.html
View File

@ -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 }}
bg-primary-200 dark:bg-primary-400 dark:text-gray-800
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-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;

2
layouts/partials/section-header.html
View File

@ -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>

2
layouts/partials/sharing-links.html
View File

@ -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

2
layouts/shortcodes/alert.html
View File

@ -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>

6
layouts/shortcodes/button.html
View File

@ -1,8 +1,8 @@
<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"
<a
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>

2
layouts/shortcodes/lead.html
View File

@ -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>

4
package-lock.json generated
View File

@ -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",

6
package.json
View File

@ -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",
"build": "NODE_ENV=production ./node_modules/tailwindcss/lib/cli.js -i ./assets/css/main.css -o ./static/css/main.css --jit --minify",
"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 ./assets/css/compiled/main.css --jit",
"example": "hugo server --source exampleSite --themesDir ../.. --buildDrafts"
},
"repository": {

65
release.sh
View File

@ -6,34 +6,63 @@ branch=$(git symbolic-ref HEAD | sed -e 's,.*/\(.*\),\1,')
# push any local changes
git push
# checkout stable branch (this will catch uncommitted changes)
git checkout stable || exit 1
# run a build to catch any uncommitted updates
npm run build
# branch validation
if [ $branch = "dev" ]; then
echo "Enter the release version (eg. v1.0.0):"
read version
# 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..."
# pull latest from stable
git pull
# 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
# merge in changes from dev branch
git merge --no-ff dev -m "🔖 Release $version"
# update changelog
chan release $version || exit
npx prettier --write CHANGELOG.md
# create tag
git tag $version
# build project
npm run build
# push commit and tag to remote
git push
git push --tags
# commit version updates
git commit -a -m "🔨 Preparing release $version"
git push
echo "$version successfully released!"
echo "Returning to dev branch..."
# switch to stable branch
git checkout stable
git checkout dev
# pull latest from stable
git pull
# merge in changes from dev branch
git merge --no-ff dev -m "🔖 Release $version"
# create tag
git tag $version
# push commit and tag to remote
git push
git push --tags
# 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

1
static/css/main.css
View File

File diff suppressed because one or more lines are too long

123
tailwind.config.js
View File

@ -14,10 +14,43 @@ module.exports = {
theme: {
colors: {
transparent: "transparent",
white: colors.white,
gray: colors.gray,
primary: colors.violet,
secondary: colors.fuchsia,
neutral: {
DEFAULT: "var(--color-neutral)",
50: "var(--color-neutral-50)",
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"),
backgroundColor: theme("colors.gray.700"),
color: theme("colors.neutral.200"),
backgroundColor: theme("colors.neutral.700"),
},
"pre code": {
color: theme("colors.gray.200"),
color: theme("colors.neutral.200"),
},
thead: {
color: theme("colors.white"),
borderBottomColor: theme("colors.gray.400"),
color: theme("colors.neutral.DEFAULT"),
borderBottomColor: theme("colors.neutral.500"),
},
"tbody tr": {
borderBottomColor: theme("colors.gray.600"),
borderBottomColor: theme("colors.neutral.700"),
},
kbd: {
backgroundColor: theme("colors.gray.700"),
color: theme("colors.gray.300"),
backgroundColor: theme("colors.neutral.700"),
color: theme("colors.neutral.300"),
},
mark: {
backgroundColor: theme("colors.secondary.400"),

2
theme.toml
View File

@ -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/"