A powerful, lightweight theme for Hugo built with Tailwind CSS.

  • By James Panther
  • Last update: Jan 3, 2023
  • Comments: 15

Congo

Congo is designed to be a powerful, lightweight theme for Hugo. It's built using Tailwind CSS with a clean and minimalist design that prioritises to your content.

🌏 Demo site
📑 Theme documentation
🐛 Bug reports & issues
💡 Questions & feature requests

Screenshot

Features

  • Fully responsive layout built with Tailwind CSS 3.0
  • Multiple colour schemes (or fully customise your own)
  • Dark mode (forced on/off or auto-switching with user toggle)
  • Highly customisable configuration
  • Multiple homepage layouts
  • Flexible with any content types, taxonomies and menus
  • Multilingual content support inlcuding support for RTL languages
  • Ability to link to posts on third-party websites
  • Client-side site search powered by Fuse.js
  • Diagrams and visualisations using Mermaid
  • Charts using Chart.js
  • Mathematical notation using KaTeX
  • SVG icons from FontAwesome 5
  • Automatic image resizing using Hugo Pipes
  • Heading anchors, Tables of Contents, Code copy, Buttons, Badges and more
  • HTML and Emoji support in articles 🎉
  • SEO friendly with links for sharing to social media
  • Fathom Analytics and Google Analytics support
  • RSS feeds, Favicons and comments support
  • Advanced customisation using simple Tailwind colour definitions and styles
  • Optimised for performance and accessibility with perfect Lighthouse scores
  • Fully documented with regular updates

Documentation

Congo has extensive documentation that covers all aspects of the theme. Be sure to read the docs to learn more about how to use the theme and its features.

Installation

Congo supports several installation methods - as a Hugo Module (easiest), a git submodule, or as a completely manual install.

Detailed instructions for each method can be found in the Installation docs. You should consult the documentation for the simplest setup experience. Below is a quick start guide using Hugo modules if you're already confident installing Hugo themes.

Quick start using Hugo

Note: Ensure you have Go and Hugo installed, and that you have created a new Hugo project before proceeding.

  1. From your project directory, initialise Hugo Modules:

    hugo mod init github.com/<username>/<repo-name>

  2. Create config/_default/module.toml and add the following:

    [[imports]]
path = "github.com/jpanther/congo/v2"

  3. Start your server using hugo server and the theme will be downloaded automatically.

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

    Note: Do not overwrite the module.toml file you created above!

    You will find these theme config files in the Hugo cache directory, or download a copy from GitHub.

  5. Follow the Getting Started instructions to configure your website.

Installing theme updates

As new releases are posted, you can update the theme using Hugo. Simply run hugo mod get -u from your project directory and the theme will automatically update to the latest release.

Detailed update instructions are available in the docs.

Contributing

Congo is expected to evolve over time. I intend to keep adding features and making changes as required.

Feel free to get in touch with any issues or suggestions for new features you'd like to see.

If you're able to fix a bug or implement a new feature, I welcome PRs for this purpose. Learn more in the contributing guidelines.

Github

https://github.com/jpanther/congo

Comments(15)

  • 1

    Is my disableHugoGeneratorInject config overridden by Congo?

    What happened?

    I have disableHugoGeneratorInject = true present in my config/_default/config.toml folder and yet the generator meta tag is still inserted both locally and in production.

    Theme version

    v2.1.1

    Hugo version

    v0.96.0+extended linux/amd64

    What browsers are you seeing the problem on?

    Firefox

    Relevant Hugo log output

    No response

  • 2

    Error on inline image using standard markdown notation

    What happened?

    I have a markdown file with an inline reference to an image. It looks like this:

    ![image-2.png](/obsidian/image-2.png)

    when I try to generate the site or serve locally, I get the following error message:

    ERROR 2022/02/16 13:17:04 [CONGO] Markdown image error in "obsidian/write-test.md": Resource "/obsidian/image-2.png" not found. Check the path is correct or remove the image from the content. Error: Error building site: logged 1 error(s)

    I've tried putting the file in the correct static dir, and in the content dir, and cannot seem to make this work. I'm assuming this is Congo specific based on the error message, and when I test with a different theme (hugo-bearblog) the image renders correctly with no error messages.

    Theme version

    2.0.4

    Hugo version

    0.92.2

    What browsers are you seeing the problem on?

    No response

    Relevant Hugo log output

    `ERROR 2022/02/16 13:17:04 [CONGO] Markdown image error in "obsidian/write-test.md": Resource "/obsidian/image-2.png" not found. Check the path is correct or remove the image from the content.
Error: Error building site: logged 1 error(s)`
  • 3

    Code highlight gets cut when scroll is available

    What happened?

    When we use the highlight for a code snippet it gets cut off on the "overflowing scrolling part(?)"

    I noticed this on Google chrome on my pixel 4a Screenshot_20221116-174823

    Theme version

    2.4.1

    Hugo version

    0.15

    What browsers are you seeing the problem on?

    Chrome

    Relevant Hugo log output

    No response

  • 4

    Code copy doesn't work when set `highlight.noClasses = true`

    What happened?

    When I set enableCodeCopy = true, the copy button in the code blocks stuck and prompts the following in the browser console:

    Uncaught (in promise) TypeError: Cannot read properties of null (reading 'innerText') at copyCodeToClipboard (main.bundle.min.998bd658c4cc3498df01180704ad0ea16bb3c0d6d118eb8ac6f557a59c86d1304d69e51ba7df5a9d203e2698d28571a422b4cf20f830810d571fee19fbcb55fc.js:11:695) at HTMLButtonElement. (main.bundle.min.998bd658c4cc3498df01180704ad0ea16bb3c0d6d118eb8ac6f557a59c86d1304d69e51ba7df5a9d203e2698d28571a422b4cf20f830810d571fee19fbcb55fc.js:11:550)

    Theme version

    2.1.0

    Hugo version

    v0.94.2

    What browsers are you seeing the problem on?

    Chrome, Safari

    Relevant Hugo log output

    No response

  • 5

    Dark and light mode

    What happened?

    In video:

    https://user-images.githubusercontent.com/17910063/152449177-df01d9bb-51f1-49de-93e4-52b882c044c0.mov

    My default mode is dark. When I am in light mode (because I forced it by clicking on the sun icon) and then visit another page, the mode goes back to the initial mode (dark in my case). It is as if it doesn't remember that my choice is light mode.

    Is it possible to implement the mode toggle such that it "remembers" my choice ?

    FYI my repo is https://github.com/AntoineSoetewey/antoinesoetewey.com

    Regards, Antoine

    Theme version

    v2.0.1

    Hugo version

    last

    What browsers are you seeing the problem on?

    Chrome, Safari

    Relevant Hugo log output

    No response

  • 6

    Back to top button glitches with Firefox

    What happened?

    Hi, First, thanks for Congo, which is a great theme ! I read Congo documentation on my phone with the latest Firefox. But the "back to top" button glitches. There was some slowness when scrolling the page, which was not present when this button was not present (like on small pages). Here is a video : https://drive.google.com/file/d/13_cR24L0UKwvkEeTHVL2Wtj2TTIDBevu/view?usp=sharing

    Theme version

    2.3.1 ?

    Hugo version

    yours

    What browsers are you seeing the problem on?

    Firefox

    Relevant Hugo log output

    No response

  • 7

    Add a new header type: hybrid so that the UI can switch between bas…

    …ic and hamburger depending on device screen size.

    Created new partial to support use-case Updated CSS to include the hide classes to be used depending on the screen size Updated the search.js code to support two different buttons at the same time in the UI

  • 8

    Adds note box ✨ 🧙

    :book: Summary

    Adds an additional al note box.

    Files added/ changed:

    • added comment.svg icon
    • added notes shortcode
    • added comment icon in icon samples post
    • added note section in shortcote post

    :bookmark_tabs: Test Plan

    :bulb: Select your test plan for the code changes.

    • [x] Tested locally
    • [x] Tested via Example page
    • [x] Tested with Netlify test build
    Details / Justification

    :books: Additional Notes

    • Already in use at OCram85.com
      • Currently updating to Congo 2

    A word about boxes:

    I think there could be 2 approaches for multiple notification box types:

    A generic one which could be implemented like this

    There should be one box type shortcode with multiple params:

    - bg-color
- icon
- prefix
- text
    • 👍 reduces overall code duplication
    • 👍 gives max flexibility to users how to use the boxes
    • 👎 The will be not unique usage. I see a mix of icons and prefixes
    Multiple static ones

    Specific boxes for use cases. There is just the content/message as param.

    • 👍 Simplified usage
    • 👍 Unique look and feel
    • 👎 Less flexibility for users
  • 9

    docs: :notebook: add sfz.dev to exampleSite/content/users.md

    Hi @jpanther

    Thank you for all your great themes. I have created a website for my company using Congo. I would be happy if you could add it to the use case.

    2022-08-09 01 42 31 sfz dev 8d4063d3fcf6 IMG_A8CD90C669D7-1

    My challenges in creating this website are as follows.

    • Made the switching between the normal menu and the hamburger menu responsive.
    • Added a shortcode for images to spread across the full width of the site.
    • Made some design tweaks related to switching between Japanese and English.
    • Used Vanta.js for the background.
    • Embedded maps using Mapbox.
    • Added thumbnail display to list.html.

    I would like to continue to support you. Best regards.

  • 10

    Building Congo v2.1.0 on Cloudflare Pages

    What happened?

    Hello,

    I'm having a trouble building Congo (manual install method) on Cloudflare Pages.

    Build command = npm run build Build output directory = public

    Please see the attached build log.

    Would appreciate your comment, please.

    Thank you!

    Theme version

    v2.1.0

    Hugo version

    v0.95.0

    What browsers are you seeing the problem on?

    Safari

    Relevant Hugo log output

    13:29:06.903	Initializing build environment. This may take up to a few minutes to complete
13:29:09.016	Success: Finished initializing build environment
13:29:09.016	Cloning repository...
13:29:10.984	Success: Finished cloning repository files
13:29:11.265	Installing dependencies
13:29:11.277	Python version set to 2.7
13:29:13.528	Attempting node version 'v16.14.2' from .nvmrc
13:29:15.225	Downloading and installing node v16.14.2...
13:29:15.702	Downloading https://nodejs.org/dist/v16.14.2/node-v16.14.2-linux-x64.tar.xz...
13:29:16.130	Computing checksum with sha256sum
13:29:16.263	Checksums matched!
13:29:20.726	Now using node v16.14.2 (npm v8.5.0)
13:29:21.319	Started restoring cached build plugins
13:29:21.335	Finished restoring cached build plugins
13:29:22.061	Attempting ruby version 2.7.1, read from environment
13:29:27.978	Using ruby version 2.7.1
13:29:28.341	Using PHP version 5.6
13:29:28.518	5.2 is already installed.
13:29:28.546	Using Swift version 5.2
13:29:28.547	Started restoring cached node modules
13:29:28.567	Finished restoring cached node modules
13:29:29.037	Installing NPM modules using NPM version 8.5.0
13:29:32.689	npm WARN deprecated @braintree/[email protected]: Potential XSS vulnerability patched in v6.0.0.
13:29:34.506	
13:29:34.506	> [email protected] preinstall
13:29:34.506	> rimraf assets/vendor
13:29:34.506	
13:29:34.615	
13:29:34.615	> [email protected] postinstall
13:29:34.615	> vendor-copy
13:29:34.615	
13:29:34.718	/opt/buildhome/repo/node_modules/mermaid/dist/mermaid.min.js => /opt/buildhome/repo/assets/lib/mermaid/mermaid.min.js
13:29:34.718	/opt/buildhome/repo/node_modules/chart.js/dist/chart.min.js => /opt/buildhome/repo/assets/lib/chart/chart.min.js
13:29:34.718	/opt/buildhome/repo/node_modules/katex/dist/katex.min.js => /opt/buildhome/repo/assets/lib/katex/katex.min.js
13:29:34.718	/opt/buildhome/repo/node_modules/katex/dist/katex.min.css => /opt/buildhome/repo/assets/lib/katex/katex.min.css
13:29:34.718	/opt/buildhome/repo/node_modules/katex/dist/contrib/auto-render.min.js => /opt/buildhome/repo/assets/lib/katex/auto-render.min.js
13:29:34.718	/opt/buildhome/repo/node_modules/katex/dist/fonts/ => /opt/buildhome/repo/assets/lib/katex/fonts/
13:29:34.718	/opt/buildhome/repo/node_modules/fuse.js/dist/fuse.min.js => /opt/buildhome/repo/assets/lib/fuse/fuse.min.js
13:29:34.749	
13:29:34.750	added 203 packages, and audited 204 packages in 5s
13:29:34.750	
13:29:34.750	23 packages are looking for funding
13:29:34.750	  run `npm fund` for details
13:29:34.757	
13:29:34.757	3 vulnerabilities (2 moderate, 1 high)
13:29:34.757	
13:29:34.757	To address issues that do not require attention, run:
13:29:34.757	  npm audit fix
13:29:34.757	
13:29:34.757	To address all issues (including breaking changes), run:
13:29:34.757	  npm audit fix --force
13:29:34.757	
13:29:34.757	Run `npm audit` for details.
13:29:34.768	NPM modules installed
13:29:35.306	Installing Hugo 0.95.0
13:29:36.533	hugo v0.95.0-9F2E76AF+extended linux/amd64 BuildDate=2022-03-16T14:20:19Z VendorInfo=gohugoio
13:29:36.538	Started restoring cached go cache
13:29:36.561	Finished restoring cached go cache
13:29:36.720	go version go1.14.4 linux/amd64
13:29:36.741	go version go1.14.4 linux/amd64
13:29:36.745	Installing missing commands
13:29:36.745	Verify run directory
13:29:36.745	Executing user command: npm run build
13:29:37.217	
13:29:37.217	> [email protected] build
13:29:37.217	> NODE_ENV=production ./node_modules/tailwindcss/lib/cli.js -i ./assets/css/main.css -o ./assets/css/compiled/main.css --jit
13:29:37.217	
13:29:38.426	
13:29:38.426	warn - The RTL features in Tailwind CSS are currently in preview.
13:29:38.427	warn - Preview features are not covered by semver, and may be improved in breaking ways at any time.
13:29:38.676	
13:29:38.676	Done in 599ms.
13:29:38.704	Finished
13:29:38.705	Note: No functions dir at /functions found. Skipping.
13:29:38.705	Validating asset output directory
13:29:38.705	Error: Output directory "public" not found.
  • 11

    💄 Adjust metadata output

    Hi @jpanther! Per discussion #88:

    I have submitted two commits:

    1. Add i18n 'Updated' strings: I have added the article.updated string to the different languages available, making possible the translations to the last updated date in article's metadata. I've also updated the missing spanish translations of "word" and "words".
    2. Adjust metadata output: I have created a new partial called date-updated.html which adds the 'Updated' localized string and then calls the date.html partial. The new simplified date.html also solves a little problem where before it displayed both the date and the updated date on pagination. Then, in article-meta.html, instead of showing the last updated date in parentheses, I have treated it like another meta parameter.

    This is my first ever pull request, I'm sorry if I did something wrong :sweat_smile:

  • 12

    👷 Bump actions/stale from 6 to 7

    Bumps actions/stale from 6 to 7.

    Release notes

    Sourced from actions/stale's releases.

    v7.0.0

    ⚠️ This version contains breaking changes ⚠️

    What's Changed

    Breaking Changes

    • In this release we prevent this action from managing the stale label on items included in exempt-issue-labels and exempt-pr-labels
    • We decided that this is outside of the scope of this action, and to be left up to the maintainer

    New Contributors

    Full Changelog: https://github.com/actions/stale/compare/v6...v7.0.0

    v6.0.1

    Update @​actions/core to 1.10.0 #839

    Full Changelog: https://github.com/actions/stale/compare/v6.0.0...v6.0.1

    Changelog

    Sourced from actions/stale's changelog.

    Changelog

    [7.0.0]

    :warning: Breaking change :warning:

    [6.0.1]

    Update @​actions/core to v1.10.0 (#839)

    [6.0.0]

    :warning: Breaking change :warning:

    Issues/PRs default close-issue-reason is now not_planned(#789)

    [5.1.0]

    Don't process stale issues right after they're marked stale [Add close-issue-reason option]#764#772 Various dependabot/dependency updates

    4.1.0 (2021-07-14)

    Features

    4.0.0 (2021-07-14)

    Features

    Bug Fixes

    • dry-run: forbid mutations in dry-run (#500) (f1017f3), closes #499
    • logs: coloured logs (#465) (5fbbfba)
    • operations: fail fast the current batch to respect the operations limit (#474) (5f6f311), closes #466
    • label comparison: make label comparison case insensitive #517, closes #516
    • filtering comments by actor could have strange behavior: "stale" comments are now detected based on if the message is the stale message not who made the comment(#519), fixes #441, #509, #518

    Breaking Changes

    ... (truncated)

    Commits
    • 6f05e42 draft release for v7.0.0 (#888)
    • eed91cb Update how stale handles exempt items (#874)
    • 10dc265 Merge pull request #880 from akv-platform/update-stale-repo
    • 9c1eb3f Update .md files and allign build-test.yml with the current test.yml
    • bc357bd Update .github/workflows/release-new-action-version.yml
    • 690ede5 Update .github/ISSUE_TEMPLATE/bug_report.md
    • afbcabf Merge branch 'main' into update-stale-repo
    • e364411 Update name of codeql.yml file
    • 627cef3 fix print outputs step (#859)
    • 975308f Merge pull request #876 from jongwooo/chore/use-cache-in-check-dist
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
  • 13

    custom css scheme not working after updating to v2.4.2

    What happened?

    custom css scheme not working after updating to v2.4.2

    custom theme works when running hugo server locally on my machine, but once I push the code to the host service the site always defaults back to the Congo theme

    I have the .css files located in the assets/css/schemes/ directory image

    Theme version

    2.4.2

    Hugo version

    v0.90.1-48907889

    What browsers are you seeing the problem on?

    Firefox, Chrome, Safari, Microsoft Edge

    Relevant Hugo log output

    No response

  • 14

    Some images are rotated in site build vs. how they are on filesystem

    What happened?

    On a few of my posts, some images are rotated from their original orientation. On my filesystem they are all in the correct orientation.

    I've tried rotating them and rebuilding the site but they remain in the same orientation. It's also a mix of portrait and landscape images.

    Github repo for that post.

    Any suggestions? Thanks.

    Theme version

    v2.4.2

    Hugo version

    v.0.108.0+extended

    What browsers are you seeing the problem on?

    Firefox, Chrome, Safari

    Relevant Hugo log output

    INFO 2022/12/19 22:21:51 syncing static files to /
LOG:   2022/12/19 22:21:51 Built in 112 ms
LOG:   2022/12/19 22:21:51 Watching for config changes in /home/alex/dev/alexjj.com/config/_default, /home/alex/dev/alexjj.com/config/_default/resources, /home/alex/dev/alexjj.com/config/_default/resources/_gen, /home/alex/dev/alexjj.com/config/_default/resources/_gen/assets, /home/alex/dev/alexjj.com/config/_default/resources/_gen/images, /home/alex/dev/alexjj.com/go.mod
  • 15

    📌 Bump chart.js from 4.0.1 to 4.1.1

    Bumps chart.js from 4.0.1 to 4.1.1.

    Release notes

    Sourced from chart.js's releases.

    v4.1.1

    Essential Links

    • #10988 chore: Revert "Add Product Hunt button (temporarily)"

    Bugs Fixed

    • #10971 fix: avoid resize loop when browser zoom is set to 90%
    • #10993 fix: move types to src dir to escape src / dist dirs in paths
    • #10992 fix: hotfix chart.js/auto for commonjs

    Types

    • #10993 fix: move types to src dir to escape src / dist dirs in paths

    Development

    Thanks to @​dangreen, @​etimberg, @​gbaron and @​igorlukanin

    v4.1.0

    Essential Links

    • #10980 chore: Add Product Hunt button (temporarily)
    • #10917 fix: move @kurkle/color to dependencies

    Enhancements

    • #10966 add getLabelItems public method
    • #10984 feat: restore commonjs bundle
    • #10964 Allow dynamic datasets to be colored
    • #10904 Allow color plugin to work with custom dataset controllers
    • #10870 feat: colors for mixed charts
    • #10886 Pointstyle false

    Bugs Fixed

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

Popular Tag

Related