🔖 Release v1.1.0

.prettierrc

@@ -1,5 +1,9 @@
 {
+  "htmlWhitespaceSensitivity": "css",
   "printWidth": 100,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
   "overrides": [
     {
       "files": ["*.html"],

CHANGELOG.md

@@ -0,0 +1,58 @@
+# Changelog
+
+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).
+
+---
+
+## [1.1.0] - 2020-08-18
+
+### Added
+
+- Breadcrumbs
+- i18n support
+- Recent articles partial
+- CSS transitions
+- Hugo module support
+- JSON-LD structured metadata
+
+### Changed
+
+- ⚠️ Renamed parameter: `homepage.showList` -> `homepage.showRecent`
+- ⚠️ Renamed parameter: `homepage.listSections` -> `mainSections`
+- ⚠️ Consolidated author configuration parameters into `config.toml`
+- General style tweaks to enhance design consistency
+
+### Fixed
+
+- URLs being incorrect in some cases when the site is deployed in a subfolder
+
+## [1.0.0] - 2020-08-16
+
+### Initial release 🎉
+
+- Built with Tailwind CSS JIT for minified stylesheets without any excess code
+- Fully responsive layout
+- Dark mode (auto-switching based upon browser)
+- Highly customisable configuration
+- Multiple homepage layouts
+- Flexible with any content types, taxonomies and menus
+- Ability to link to posts on third-party websites
+- Diagrams and visualisations using Mermaid JS
+- SVG icons from FontAwesome 5
+- Heading anchors, Buttons, Badges and more
+- HTML and Emoji support in articles
+- SEO friendly with links for sharing to social media
+- RSS feeds
+- Fathom Analytics and Google Analytics support
+- Favicons support
+- Comments support
+- Advanced customisation using simple Tailwind colour definitions and styles
+- Fully documented
+
+[unreleased]: https://github.com/jpanther/Congo/compare/v1.1.0...HEAD
+[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

@@ -69,19 +69,12 @@ A few things you need to set for a new installation:
 
 baseURL = "https://your_domain.com"
 languageCode = "en-AU"
-
 title = "My awesome website"
-```
-
-It's also useful to set the author configuration in the `config/_default/author.toml` file. You can also add links to your profiles here to enable them in the theme.
-
-```toml
-# config/_default/author.toml
 
 [author]
 name = "Your name"
 links = [
-  { twitter = "https://twitter.com/username" }
+  { twitter = "https://twitter.com/jpanther" }
 ]
 ```
 

assets/css/main.css

@@ -1,6 +1,11 @@
 @tailwind base;
 @tailwind components;
 
+body a,
+body button {
+  @apply transition;
+}
+
 /* Scale SVG icons to text size */
 .icon svg {
   height: 1em;
@@ -29,6 +34,15 @@
   @apply mt-0 last:mb-0;
 }
 
+/* Article pagination */
+.article-pagination a:hover .article-pagination-title {
+  @apply underline underline-primary-500;
+}
+
+.article-pagination a:hover .article-pagination-direction {
+  @apply text-primary-700 dark:text-primary-400;
+}
+
 /* -- Chroma Highlight -- */
 /* Background */
 .prose .chroma {

config/_default/config.toml

@@ -1,23 +1,45 @@
 # -- Site Configuration --
+# Refer to the theme docs for more details about each of these parameters.
+# https://jpanther.github.io/Congo/docs/getting-started/
+
 theme = "congo"
 
-# Speficiy the base URL for the website.
 # baseURL = "https://your_domain.com/"
-
-# The language code of the language that the website is written in.
-# This can be a base language (ie. "en") or a specific variant (ie. "en-AU").
 languageCode = "en"
+defaultContentLanguage = "en"
 
-# The website title. This will be displayed in the site header.
 title = "Congo"
-
-# A default copyright message is generated automatically.
-# Uncomment the line below to provide a custom copyright Markdown string.
 # copyright = "Copy, _right?_ :thinking_face:"
 
-# To automatically convert strings such as :bang: to emoji, set this to true.
 enableEmoji = true
-
-# Congo will generate a robots file that allows search engines to index
-# the entire site. If you don't want a robots file, set this to false.
 enableRobotsTXT = true
+
+[author]
+  # name = "Your name here"
+  # image = "img/author.jpg"
+  # links = [
+  #   { email = "mailto:hello@your_domain.com" },
+  #   { link = "https://link-to-some-website.com/" },
+  #   { codepen = "https://codepen.io/username" },
+  #   { dev = "https://dev.to/username" },
+  #   { discord = "https://discord.gg/invitecode" },
+  #   { dribbble = "https://dribbble.com/username" },
+  #   { facebook = "https://facebook.com/username" },
+  #   { github = "https://github.com/username" },
+  #   { gitlab = "https://gitlab.com/username" },
+  #   { instagram = "https://instagram.com/username" },
+  #   { keybase = "https://keybase.io/username" },
+  #   { lastfm = "https://lastfm.com/user/username" },
+  #   { linkedin = "https://linkedin.com/in/username" },
+  #   { mastodon = "https://mastodon.instance/@username" },
+  #   { medium = "https://medium.com/username" },
+  #   { reddit = "https://reddit.com/user/username" },
+  #   { slack = "https://workspace.url/team/userid" },
+  #   { snapchat = "https://snapchat.com/add/username" },
+  #   { soundcloud = "https://soundcloud.com/username" },
+  #   { steam = "https://steamcommunity.com/profiles/userid" },
+  #   { tiktok = "https://tiktok.com/@username" },
+  #   { twitch = "https://twitch.tv/username" },
+  #   { twitter = "https://twitter.com/username" },
+  #   { youtube = "https://youtube.com/username" },
+  # ]

config/_default/params.toml

@@ -2,24 +2,29 @@
 # These options control how the theme functions and allow you to
 # customise the display of your website.
 #
-# Refer to the README for more details about each of these parameters.
+# Refer to the theme docs for more details about each of these parameters.
+# https://jpanther.github.io/Congo/docs/configuration/#theme-parameters
+
+# description = "My awesome website"
+# mainSections = ["section1", "section2"]
 
 [homepage]
   layout = "page" # valid options: page, profile, custom
-  showList = false
-  listSections = ["blog"]
+  showRecent = false
 
 [article]
   showDate = true
   dateFormat = "2 January 2006"
   showAuthor = true
+  showBreadcrumbs = false
   showDraftLabel = true
   showHeadingAnchors = true
   showPagination = true
   showReadingTime = true
   # sharingLinks = ["facebook", "twitter", "reddit", "linkedin", "email"]
 
 [list]
+  showBreadcrumbs = false
   groupByYear = true
 
 [taxonomy]

data/sharing.json

@@ -1,27 +1,27 @@
 {
   "email": {
     "icon": "email",
-    "title": "Send via email",
+    "title": "sharing.email",
     "url": "mailto:?body=%s&subject=%s"
   },
   "facebook": {
     "icon": "facebook",
-    "title": "Share on Facebook",
+    "title": "sharing.facebook",
     "url": "https://www.facebook.com/sharer/sharer.php?u=%s&quote=%s"
   },
   "linkedin": {
     "icon": "linkedin",
-    "title": "Share on LinkedIn",
+    "title": "sharing.linkedin",
     "url": "https://www.linkedin.com/shareArticle?mini=true&url=%s&title=%s"
   },
   "reddit": {
     "icon": "reddit",
-    "title": "Submit to Reddit",
+    "title": "sharing.reddit",
     "url": "https://reddit.com/submit/?url=%s&resubmit=true&title=%s"
   },
   "twitter": {
     "icon": "twitter",
-    "title": "Tweet on Twitter",
+    "title": "sharing.twitter",
     "url": "https://twitter.com/intent/tweet/?url=%s&text=%s"
   }
 }

exampleSite/config.toml

@@ -4,14 +4,16 @@
 # as it does not contain all the required theme settings!
 #
 # Refer to the theme docs for configuration instructions if you're unsure.
-# https://github.com/jpanther/Congo#readme
+# https://jpanther.github.io/Congo/docs/
 # --------------------------------------------------------------------------
 
-baseURL = "https://example.com"
+baseURL = "https://jpanther.github.io/Congo/"
 theme = "Congo"
 languageCode = "en-AU"
+defaultContentLanguage = "en"
 title = "Congo"
 enableEmoji = true
+relativeURLs = true
 
 [author]
   name = "Congo"
@@ -28,11 +30,15 @@ enableEmoji = true
 
 [params.homepage]
   layout = "custom"
-  showList = true
-  listSections = "samples"
+  showRecent = true
+  mainSections = ["samples"]
 
 [params.list]
   groupByYear = false
+  showBreadcrumbs = true
+
+[params.article]
+  showBreadcrumbs = true
 
 [[menu.main]]
   name = "Docs"

exampleSite/content/_index.md

@@ -7,6 +7,21 @@ 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">
+  <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">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"
+      onclick="switchLayout()"
+    >
+      Switch layout &orarr;
+    </button>
+  </span>
+</div>
+
 This is a demo site built entirely using Congo. It also contains a complete set of [theme documentation](/docs/). Congo is flexible and is great for both static page-based content (like this demo) or a traditional blog with a feed of recent posts.
 
 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.

exampleSite/content/docs/configuration.md

@@ -21,7 +21,33 @@ The default theme configuration is documented in each file so you can freely adj
 As outlined in the [installation instructions](/docs/installation/#set-up-your-configuration-files), you should adjust your theme configuration by modifying the files in the `config/_default/` folder of your Hugo project and delete the `config.toml` file in your project root.
 {{< /alert >}}
 
-## Parameters
+## Site Configuration
+
+Standard Hugo configuration variables are respected throughout the theme, however there are some specific things that should be configured for the best experience.
+
+The site configuration is managed through the `config/_default/config.toml` file. The table below outlines all the settings that the Congo takes advantage of.
+
+Note that the variable names provided in this table use dot notation to simplify the TOML data structure (ie. `author.name` refers to `[author] name`).
+
+<!-- prettier-ignore-start -->
+|Name|Type|Default|Description|
+| --- | --- | --- | --- |
+|`theme`|string|`"congo"`|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"`)."|
+|`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`.
+|`enableEmoji`|boolean|`true`|Whether emoji strings in content should be converted to emoji symbols.|
+|`enableRobotsTXT`|boolean|`true`|When enabled a `robots.txt` file will be created in the site root that allows search engines to crawl the entire site. Set to `false` if you wish to provide your own file.|
+|`author.name`|string|_Not set_|The author's name. This will be displayed in article footers, and on the homepage when the profile layout is used.|
+|`author.image`|string|_Not set_|Path to the image file of the author. The image should be a 1:1 aspect ratio and placed in the site's `static/` folder.|
+|`author.links`|array of objects|_Not set_|The links to display alongside the author's details. The config file contains example links which can simply be uncommented to enable. The order that the links are displayed is determined by the order they appear in the array. Custom links can be added by providing corresponding SVG icon assets in `assets/icons/`.|
+|`[permalinks]`||_Not set_|Refer to the [Hugo docs](https://gohugo.io/content-management/urls/#permalinks) for permalink configuration.|
+|`[taxonomies]`||_Not set_|Refer to the [Hugo docs](https://gohugo.io/content-management/taxonomies/) for taxonomy configuration.|
+<!-- prettier-ignore-end -->
+
+## Theme Parameters
 
 Congo provides a large number of configuration parameters that control how the theme functions. The table below outlines every available parameter in the `config/_default/params.toml` file.
 
@@ -30,18 +56,21 @@ Many of the article defaults here can be overridden on a per article basis by sp
 <!-- prettier-ignore-start -->
 |Name|Type|Default|Description|
 | --- | --- | --- | --- |
+|`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.|
-|`homepage.showList`|boolean|`false`|Whether or not recent articles are listed on the homepage beneath the page content. Refer to the [Recent Articles](/docs/homepage-layout/#recent-articles) docs for more details.|
-|`homepage.listSections`|array of strings|`["blog"]`|The sections of content to include in the recent list when `homepage.showList` is `true`.|
+|`homepage.showRecent`|boolean|`false`|Whether or not to display the recent articles list on the homepage.|
 |`article.showDate`|boolean|`true`|Whether or not article dates are displayed.|
 |`article.dateFormat`|string|`"2 January 2006"`|How article dates are formatted. Refer to the [Hugo docs](https://gohugo.io/functions/format/#gos-layout-string) for acceptable formats.|
 |`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.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.|
 |`article.sharingLinks`|array of strings|_Not set_|Which sharing links to display at the end of each article. When not provided, or set to `false` no links will be displayed.|
-|`list.groupByYear`|boolean|`true`|Whether or not articles are grouped under years in the article listing.|
+|`list.showBreadcrumbs`|boolean|`false`|Whether or not breadcrumbs are displayed in the header on list pages.|
+|`list.groupByYear`|boolean|`true`|Whether or not articles are grouped by year on list pages.|
 |`sitemap.excludedKinds`|array of strings|`["taxonomy", "term"]`|Kinds of content that should be excluded from the generated `/sitemap.xml` file. Refer to the [Hugo docs](https://gohugo.io/templates/section-templates/#page-kinds) for acceptable values.|
 |`taxonomy.showTermCount`|boolean|`true`|Whether or not the number of articles within a taxonomy term is displayed on the taxonomy listing.|
 |`fathomAnalytics.site`|string|_Not set_|The site code generated by Fathom Analytics for the website. Refer to the [Analytics docs](#analyticshtml) below for more details.|