diff --git a/.prettierrc b/.prettierrc index f5f5a075..3031bfbc 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,5 +1,9 @@ { + "htmlWhitespaceSensitivity": "css", "printWidth": 100, + "singleQuote": false, + "tabWidth": 2, + "trailingComma": "es5", "overrides": [ { "files": ["*.html"], diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 00000000..22390215 --- /dev/null +++ b/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 diff --git a/README.md b/README.md index 6ceb5aa5..511be018 100644 --- a/README.md +++ b/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" } ] ``` diff --git a/assets/css/main.css b/assets/css/main.css index daf510e1..9cbcfe92 100644 --- a/assets/css/main.css +++ b/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 { diff --git a/config/_default/author.toml b/config/_default/author.toml deleted file mode 100644 index 5aa0e4f9..00000000 --- a/config/_default/author.toml +++ /dev/null @@ -1,34 +0,0 @@ -# -- Site Author Details -- -# To display the author box below each article, configure the settings below. -# The author image should be placed inside the `/static` folder. -# Uncomment any links to enable them. The icons will be displayed in the order listed. - -[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" }, - # ] diff --git a/config/_default/config.toml b/config/_default/config.toml index fda0ff81..07f63055 100644 --- a/config/_default/config.toml +++ b/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" }, + # ] diff --git a/config/_default/params.toml b/config/_default/params.toml index 99730681..7648c2cc 100644 --- a/config/_default/params.toml +++ b/config/_default/params.toml @@ -2,17 +2,21 @@ # 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 @@ -20,6 +24,7 @@ # sharingLinks = ["facebook", "twitter", "reddit", "linkedin", "email"] [list] + showBreadcrumbs = false groupByYear = true [taxonomy] diff --git a/data/sharing.json b/data/sharing.json index 327c9b1d..ff9dbc54 100644 --- a/data/sharing.json +++ b/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"e=%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" } } diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 97990d99..857fd1cf 100755 --- a/exampleSite/config.toml +++ b/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" diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md index f228f37f..273d66f8 100755 --- a/exampleSite/content/_index.md +++ b/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 >}} +
+ + {{< icon "exclamation-triangle" >}} + + + This is a demo of the page layout. + + +
+ 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. diff --git a/exampleSite/content/docs/configuration.md b/exampleSite/content/docs/configuration.md index f0720377..b5f20820 100644 --- a/exampleSite/content/docs/configuration.md +++ b/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`). + + +|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.| + + +## 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 |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.| diff --git a/exampleSite/content/docs/getting-started.md b/exampleSite/content/docs/getting-started.md index 6dd36e4a..9ddc2d7f 100644 --- a/exampleSite/content/docs/getting-started.md +++ b/exampleSite/content/docs/getting-started.md @@ -22,22 +22,20 @@ 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" +image = "img/author.jpg" links = [ { twitter = "https://twitter.com/username" } ] ``` +The `[author]` configuration determines how the author information is displayed on the website. The image should be placed in the site's `static/` folder. Links will be displayed in the order they are listed. + +Further detail about these configuration options is covered in the [Configuration](/docs/configuration/) section. + ## Organising content By default, Congo doesn't force you to use a particular content type. In doing so you are free to define your content as you wish. You might prefer _pages_ for a static site, _posts_ for a blog, or _projects_ for a portfolio. diff --git a/exampleSite/content/docs/homepage-layout/index.md b/exampleSite/content/docs/homepage-layout/index.md index 7a54895c..0e84ca41 100644 --- a/exampleSite/content/docs/homepage-layout/index.md +++ b/exampleSite/content/docs/homepage-layout/index.md @@ -39,9 +39,11 @@ To enable the custom layout, set `homepage.layout = "custom"` in the `params.tom With the configuration value set, create a new `custom.html` file and place it in `layouts/partials/home/custom.html`. Now whatever is in the `custom.html` file will be placed in the content area of the site homepage. You can use whatever HTML, Tailwind, or Hugo templating functions to define your layout. +To include recent articles on the custom layout, use the `recent-articles.html` partial. + ## Recent articles -All homepage layouts have the option of displaying recent articles below the main page content. To enable this, simply set the `homepage.showList` setting to `true` in the `params.toml` configuration file. +All homepage layouts have the option of displaying recent articles below the main page content. To enable this, simply set the `homepage.showRecent` setting to `true` in the `params.toml` configuration file. ![Profile layout with recent articles](home-profile-list.jpg) diff --git a/exampleSite/layouts/partials/home/custom.html b/exampleSite/layouts/partials/home/custom.html index 440c44a2..b301686a 100644 --- a/exampleSite/layouts/partials/home/custom.html +++ b/exampleSite/layouts/partials/home/custom.html @@ -1,38 +1,27 @@ - - -
- - {{ partial "icon.html" "exclamation-triangle" }} - - - This is a demo of the `page` layout. - - -
-
{{ partial "partials/home/page.html" . }}
-