✨ Add author bio to article footer

CHANGELOG.md

@@ -12,6 +12,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - KaTeX support using `katex` shortcode
 - Dark mode toggle with new theme parameters for managing light/dark appearance
 - French translation ([#18](https://github.com/jpanther/congo/pull/18))
+- Author bio in article footer
 - Grouping by year can now be specificed in front matter on list pages
 
 ### Changed

assets/css/compiled/main.css

@@ -2088,6 +2088,10 @@ body a, body button {
   justify-content: space-between;
 }
 
+.place-self-center {
+  place-self: center;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -2586,6 +2590,10 @@ body a, body button {
   color: var(--color-neutral-300);
 }
 
+.dark .dark\:text-neutral-400 {
+  color: var(--color-neutral-400);
+}
+
 .dark .dark\:text-primary-400 {
   color: var(--color-primary-400);
 }

config/_default/config.toml

@@ -17,6 +17,7 @@ summaryLength = 0
 [author]
   # name = "Your name here"
   # image = "img/author.jpg"
+  # bio = "A little bit about you"
   # links = [
   #   { email = "mailto:hello@your_domain.com" },
   #   { link = "https://link-to-some-website.com/" },

exampleSite/config.toml

@@ -17,6 +17,7 @@ summaryLength = 0
 [author]
   name = "Congo"
   image = "img/author.jpg"
+  bio = "This is an example author bio, and although there's a stock photo of a dog here, this article was actually created by a human. :dog:"
   links = [
     { twitter = "https://twitter.com/" },
     { facebook = "https://facebook.com/" },

exampleSite/content/docs/configuration.md

@@ -41,6 +41,7 @@ Note that the variable names provided in this table use dot notation to simplify
 |`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.bio`|string|_Not set_|A Markdown string containing the author's bio. It will be displayed in article footers.|
 |`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 [Organising content]({{< ref "getting-started#organising-content" >}}) section for taxonomy configuration.|

exampleSite/content/docs/getting-started.md

@@ -23,8 +23,9 @@ languageCode = "en-AU"
 title = "My awesome website"
 
 [author]
-name = "Your name"
+name = "My name"
 image = "img/author.jpg"
+bio = "A little bit about me"
 links = [
   { twitter = "https://twitter.com/username" }
 ]

layouts/partials/author.html

@@ -1,9 +1,9 @@
 {{ if .Params.showAuthor | default (.Site.Params.article.showAuthor | default true) }}
-  <div class="flex items-center">
+  <div class="flex">
     {{ with .Site.Author.image }}
       <img class="w-24 h-24 !mt-0 !mb-0 mr-4 rounded-full" src="{{ . | relURL }}" />
     {{ end }}
-    <div>
+    <div class="place-self-center">
       {{ with .Site.Author.name | markdownify | emojify }}
         <div class="text-[0.6rem] leading-3 text-neutral-400 dark:text-neutral-500 uppercase">
           {{ i18n "author.byline_title" | markdownify | emojify }}
@@ -12,6 +12,9 @@
           {{ . }}
         </div>
       {{ end }}
+      {{ with .Site.Author.bio | markdownify | emojify }}
+        <div class="text-sm text-neutral-700 dark:text-neutral-400">{{ . }}</div>
+      {{ end }}
       {{ partialCached "author-links.html" . }}
     </div>
   </div>