✨ Add support for article summaries

CHANGELOG.md

@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Added
 
 - Footer menu
+- Article summary support
 - Slate colour scheme ([#9](https://github.com/jpanther/congo/pull/9))
 - Icons for ORCID and ResearchGate ([#9](https://github.com/jpanther/congo/pull/9))
 

assets/css/compiled/main.css

@@ -2299,6 +2299,11 @@ body a, body button {
   padding-right: 0.25rem;
 }
 
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
 .py-\[1px\] {
   padding-top: 1px;
   padding-bottom: 1px;

config/_default/config.toml

@@ -12,6 +12,8 @@ title = "Congo"
 enableEmoji = true
 enableRobotsTXT = true
 
+summaryLength = 0
+
 [author]
   # name = "Your name here"
   # image = "img/author.jpg"

config/_default/params.toml

@@ -31,6 +31,7 @@ colorScheme = "congo"
 
 [list]
   showBreadcrumbs = false
+  showSummary = false
   groupByYear = true
 
 [taxonomy]

exampleSite/config.toml

@@ -12,6 +12,7 @@ languageCode = "en-AU"
 defaultContentLanguage = "en"
 title = "Congo"
 enableEmoji = true
+summaryLength = 0
 
 [author]
   name = "Congo"

exampleSite/content/docs/configuration.md

@@ -38,6 +38,7 @@ Note that the variable names provided in this table use dot notation to simplify
 |`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.|
+|`summaryLength`|integer|`0`|The number of words that are used to generate the article summary when one is not provided in the [front matter]({{< ref "front-matter" >}}). A value of `0` will use the first sentence. This value has no effect when summaries are hidden.|
 |`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/`.|
@@ -74,6 +75,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 |`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.showBreadcrumbs`|boolean|`false`|Whether or not breadcrumbs are displayed in the header on list pages.|
+|`list.showSummary`|boolean|`false`|Whether or not article summaries are displayed on list pages. If a summary is not provided in the [front matter]({{< ref "front-matter" >}}), one will be auto generated using the `summaryLength` parameter in the [site configuration](#site-configuration).|
 |`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.|

exampleSite/content/docs/front-matter.md

@@ -14,16 +14,19 @@ Front matter parameter default values are inherited from the theme's [base confi
 <!-- prettier-ignore-start -->
 |Name|Type|Default|Description|
 | --- | --- | --- | --- |
+|`description`|string|_Not set_|The text description for the article. It is used in the HTML metadata.|
 |`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`.|
 |`menu`|string or array|_Not set_|When a value is provided, a link to this article will appear in the named menus. Valid values are `main` or `footer`.|
 |`robots`|string|_Not set_|String that indicates how robots should handle this article. If set, it will be output in the page head. Refer to [Google's docs](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) for valid values.|
+|`showAuthor`|boolean|`article.showAuthor`|Whether or not the author box is displayed in the article footer.|
+|`showDate`|boolean|`article.showDate`|Whether or not article dates are displayed.|
+|`showEdit`|boolean|`article.showEdit`|Whether or not the link to edit the article content should be displayed.|
 |`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.|
+|`showSummary`|boolean|`list.showSummary`|Whether or not the article summary should be displayed on list pages.|
+|`summary`|string|_Auto generated using `summaryLength` (see [site configuration]({{< ref "configuration#site-configuration" >}}))_|When `showSummary` is enabled, this is the Markdown string to be used as the summary for this article.|
 |`xml`|boolean|`true` unless excluded by `sitemap.excludedKinds`|Whether or not this article is included in the generated `/sitemap.xml` file.|
 <!-- prettier-ignore-end -->

exampleSite/content/samples/_index.md

@@ -4,6 +4,7 @@ description: "See what's possible with Congo."
 
 cascade:
   showEdit: false
+  showSummary: true
 ---
 
 {{< lead >}}
@@ -14,6 +15,6 @@ This section contains some demo pages that show how Congo renders different type
 
 You can also see an example [taxonomy listing]({{< ref "tags" >}}) page.
 
-_**Sidenote:** This page is just a standard Congo article listing and Hugo has been configured to generate a `samples` content type._
+_**Sidenote:** This page is just a standard Congo article listing and Hugo has been configured to generate a `samples` content type and display article summaries._
 
 ---

exampleSite/content/samples/emoji-support.md

@@ -2,13 +2,12 @@
 title: "Emoji Support"
 date: 2019-03-05
 description: "Guide to emoji usage in Hugo"
+summary: "📖🏞️🧗🏽🪂🐉🧙🏽‍♂️🧚🏽👸"
 tags: ["emoji", "sample"]
 ---
 
 Emoji can be enabled in a Hugo project in a number of ways.
 
-<!--more-->
-
 The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes).
 
 To enable emoji globally, set `enableEmoji` to `true` in your site's [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files; e.g.

exampleSite/content/samples/rich-content.md

@@ -2,13 +2,12 @@
 title: "Rich Content"
 date: 2019-03-10
 description: "A brief description of Hugo Shortcodes"
+summary: "This is an _example_ of a **rich** content summary."
 tags: ["shortcodes", "privacy", "sample"]
 ---
 
 Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-management/shortcodes/#use-hugos-built-in-shortcodes) for rich content, along with a [Privacy Config](https://gohugo.io/about/hugo-and-gdpr/) and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.
 
-## <!--more-->
-
 ## YouTube Privacy Enhanced Shortcode
 
 {{< youtube ZJthWmvUzzc >}}

layouts/partials/article-link.html

@@ -33,4 +33,9 @@
   <div class="text-sm text-neutral-400 dark:text-neutral-500">
     {{ partial "article-meta.html" . }}
   </div>
+  {{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }}
+    <div class="py-1 prose">
+      {{ .Summary | emojify }}
+    </div>
+  {{ end }}
 </article>