diff --git a/CHANGELOG.md b/CHANGELOG.md index 8910f6b6..fbd4126a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ### Added +- Support for article thumbnails, covers and featured images - Traditional Chinese (Taiwan) translation ([#262](https://github.com/jpanther/congo/pull/262)) - New `list.paginationWidth` parameter to specify how many pagination links are generated before they are truncated - Tailwind plugin for Prettier to standardise the order of CSS classes ([#268](https://github.com/jpanther/congo/pull/268)) diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index 6287d76a..f20565a9 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -1799,6 +1799,14 @@ body:has(#menu-controller:checked) { margin-top: 1.5rem; } +.mb-6 { + margin-bottom: 1.5rem; +} + +.-mt-4 { + margin-top: -1rem; +} + .mr-3 { margin-right: 0.75rem; } @@ -2240,6 +2248,10 @@ body:has(#menu-controller:checked) { padding-top: 0.75rem; } +.pr-4 { + padding-right: 1rem; +} + .pl-2 { padding-left: 0.5rem; } @@ -2854,6 +2866,10 @@ body:has(#menu-controller:checked) { width: 50%; } + .sm\:w-40 { + width: 10rem; + } + .sm\:flex-row { flex-direction: row; } @@ -2872,6 +2888,10 @@ body:has(#menu-controller:checked) { padding-bottom: 2.5rem; } + .sm\:pr-6 { + padding-right: 1.5rem; + } + .sm\:pt-10 { padding-top: 2.5rem; } diff --git a/exampleSite/content/docs/getting-started/article-screenshot.jpg b/exampleSite/content/docs/getting-started/article-screenshot.jpg new file mode 100644 index 00000000..9a7d7213 Binary files /dev/null and b/exampleSite/content/docs/getting-started/article-screenshot.jpg differ diff --git a/exampleSite/content/docs/getting-started.md b/exampleSite/content/docs/getting-started/index.md similarity index 74% rename from exampleSite/content/docs/getting-started.md rename to exampleSite/content/docs/getting-started/index.md index 06ec23bd..35c66141 100644 --- a/exampleSite/content/docs/getting-started.md +++ b/exampleSite/content/docs/getting-started/index.md @@ -89,6 +89,8 @@ Although these are the default schemes, you can also create your own. Refer to t 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. +### Directory structure + Here's a quick overview of a basic Congo project. All content is placed within the `content` folder: ```shell @@ -111,8 +113,45 @@ Here's a quick overview of a basic Congo project. All content is placed within t └── congo ``` +{{< alert >}} +The key thing to note here is that within the content directory, normal article pages are named `index.md` while list pages are named `_index.md`. Any assets that go along with the article should be placed in a sub-directory alongside the index file. +{{< /alert >}} + It's important to have a firm grasp of how Hugo expects content to be organised as the theme is designed to take full advantage of Hugo page bundles. Be sure to read the [official Hugo docs](https://gohugo.io/content-management/organization/) for more information. +### Feature, cover and thumbnail images + +The Congo theme supports displaying images on article listings and at the top of individual article pages. There are three types of images supported, each with their own use case: `feature`, `cover` and `thumb`. + +In the example below, a cover and thumb image have been provided for the `first-post` article: + +```shell +. +└── content + └── posts + ├── _index.md + └── first-post + ├── cover.jpg + ├── index.md + └── thumb.jpg +``` + +The `thumb` image is used as the article thumbnail and will be displayed in article lists, and the `cover` image will be displayed at the top of the article content on individual article pages. + +![A screenshot of an article with a thumbnail image](article-screenshot.jpg "This example shows an article with a thumbnail image.") + +{{< alert >}} +In order to provide maximum performance, thumbnail images are automatically cropped and resized to a 4:3 ratio. Cover images will be automatically resized to fit their content, but any ratio is permitted. +{{< /alert >}} + +The `feature` image is a special type, and when present, it will be used in place of _both_ the `thumb` and `cover` images. Feature images are also present in the article metadata, which is included when content is shared to third-party networks like Facebook and Twitter. + +The theme will intelligently detect article images and automatically add them to your site. You don't have to refer to them in the front matter and simply need to place an appropriately named file within the page resources. If the term `feature`, `cover` or `thumb` is found anywhere in the image filename, then it will be used for that purpose. + +The [Samples section]({{< ref "samples" >}}) provides a number of examples of these images (and you can view the [source code](https://github.com/jpanther/congo/tree/dev/exampleSite/content/samples) to see the file structure). + +### Taxonomies + Congo is also flexible when it comes to taxonomies. Some people prefer to use _tags_ and _categories_ to group their content, others prefer to use _topics_. Hugo defaults to using posts, tags and categories out of the box and this will work fine if that's what you want. If you wish to customise this, however, you can do so by creating a `taxonomies.toml` configuration file: diff --git a/exampleSite/content/samples/charts.md b/exampleSite/content/samples/charts/index.md similarity index 100% rename from exampleSite/content/samples/charts.md rename to exampleSite/content/samples/charts/index.md diff --git a/exampleSite/content/samples/charts/thumb-jason-coudriet-eQux_nmDew0-unsplash.jpg b/exampleSite/content/samples/charts/thumb-jason-coudriet-eQux_nmDew0-unsplash.jpg new file mode 100644 index 00000000..697cb369 Binary files /dev/null and b/exampleSite/content/samples/charts/thumb-jason-coudriet-eQux_nmDew0-unsplash.jpg differ diff --git a/exampleSite/content/samples/diagrams-flowcharts.md b/exampleSite/content/samples/diagrams-flowcharts/index.md similarity index 100% rename from exampleSite/content/samples/diagrams-flowcharts.md rename to exampleSite/content/samples/diagrams-flowcharts/index.md diff --git a/exampleSite/content/samples/diagrams-flowcharts/thumb-christina-wocintechchat-com-tYVkjjMYFBo-unsplash.jpg b/exampleSite/content/samples/diagrams-flowcharts/thumb-christina-wocintechchat-com-tYVkjjMYFBo-unsplash.jpg new file mode 100644 index 00000000..1ecd8131 Binary files /dev/null and b/exampleSite/content/samples/diagrams-flowcharts/thumb-christina-wocintechchat-com-tYVkjjMYFBo-unsplash.jpg differ diff --git a/exampleSite/content/samples/emoji/feature-domingo-alvarez-e-Cs3y8Mn6-Gk-unsplash.jpg b/exampleSite/content/samples/emoji/feature-domingo-alvarez-e-Cs3y8Mn6-Gk-unsplash.jpg new file mode 100644 index 00000000..3abb4c52 Binary files /dev/null and b/exampleSite/content/samples/emoji/feature-domingo-alvarez-e-Cs3y8Mn6-Gk-unsplash.jpg differ diff --git a/exampleSite/content/samples/emoji.md b/exampleSite/content/samples/emoji/index.md similarity index 100% rename from exampleSite/content/samples/emoji.md rename to exampleSite/content/samples/emoji/index.md diff --git a/exampleSite/content/samples/external.md b/exampleSite/content/samples/external/index.md similarity index 71% rename from exampleSite/content/samples/external.md rename to exampleSite/content/samples/external/index.md index 1d5de6a3..7fe42574 100755 --- a/exampleSite/content/samples/external.md +++ b/exampleSite/content/samples/external/index.md @@ -1,11 +1,11 @@ --- -title: "An External Article" +title: "External Article - Why I switched to Fathom Analytics" date: 2019-01-24 externalUrl: "https://jamespanther.com/writings/i-switched-from-google-analytics-to-fathom-analytics/" -summary: "The `externalUrl` front matter parameter can link to any URL." +summary: "The `externalUrl` front matter parameter can link to any URL. This article looks just like any other, but will link to a post that is outside the Hugo project." showReadingTime: false _build: - render: "false" + render: "never" list: "local" --- diff --git a/exampleSite/content/samples/external/thumb-clint-adair-BW0vK-FA3eg-unsplash.jpg b/exampleSite/content/samples/external/thumb-clint-adair-BW0vK-FA3eg-unsplash.jpg new file mode 100644 index 00000000..b1031d19 Binary files /dev/null and b/exampleSite/content/samples/external/thumb-clint-adair-BW0vK-FA3eg-unsplash.jpg differ diff --git a/exampleSite/content/samples/icons.md b/exampleSite/content/samples/icons/index.md similarity index 100% rename from exampleSite/content/samples/icons.md rename to exampleSite/content/samples/icons/index.md diff --git a/exampleSite/content/samples/icons/thumb-harpal-singh-_zKxPsGOGKg-unsplash-2.jpg b/exampleSite/content/samples/icons/thumb-harpal-singh-_zKxPsGOGKg-unsplash-2.jpg new file mode 100644 index 00000000..7df16682 Binary files /dev/null and b/exampleSite/content/samples/icons/thumb-harpal-singh-_zKxPsGOGKg-unsplash-2.jpg differ diff --git a/exampleSite/content/samples/markdown.md b/exampleSite/content/samples/markdown/index.md similarity index 100% rename from exampleSite/content/samples/markdown.md rename to exampleSite/content/samples/markdown/index.md diff --git a/exampleSite/content/samples/markdown/thumb-surendran-mp-IhWYiwSxm8g-unsplash.jpg b/exampleSite/content/samples/markdown/thumb-surendran-mp-IhWYiwSxm8g-unsplash.jpg new file mode 100644 index 00000000..8bd2a0c4 Binary files /dev/null and b/exampleSite/content/samples/markdown/thumb-surendran-mp-IhWYiwSxm8g-unsplash.jpg differ diff --git a/exampleSite/content/samples/mathematical-notation/feature-artturi-jalli-gYrYa37fAKI-unsplash.jpg b/exampleSite/content/samples/mathematical-notation/feature-artturi-jalli-gYrYa37fAKI-unsplash.jpg new file mode 100644 index 00000000..640b4d75 Binary files /dev/null and b/exampleSite/content/samples/mathematical-notation/feature-artturi-jalli-gYrYa37fAKI-unsplash.jpg differ diff --git a/exampleSite/content/samples/mathematical-notation.md b/exampleSite/content/samples/mathematical-notation/index.md similarity index 100% rename from exampleSite/content/samples/mathematical-notation.md rename to exampleSite/content/samples/mathematical-notation/index.md diff --git a/exampleSite/content/samples/placeholder-text.md b/exampleSite/content/samples/placeholder-text/index.md similarity index 100% rename from exampleSite/content/samples/placeholder-text.md rename to exampleSite/content/samples/placeholder-text/index.md diff --git a/exampleSite/content/samples/placeholder-text/thumb-kelly-sikkema-NBkMT8duVSI-unsplash.jpg b/exampleSite/content/samples/placeholder-text/thumb-kelly-sikkema-NBkMT8duVSI-unsplash.jpg new file mode 100644 index 00000000..4162e513 Binary files /dev/null and b/exampleSite/content/samples/placeholder-text/thumb-kelly-sikkema-NBkMT8duVSI-unsplash.jpg differ diff --git a/exampleSite/content/samples/rich-content/feature-alexander-shatov-mr4JG4SYOF8-unsplash.jpg b/exampleSite/content/samples/rich-content/feature-alexander-shatov-mr4JG4SYOF8-unsplash.jpg new file mode 100644 index 00000000..31e6d5f4 Binary files /dev/null and b/exampleSite/content/samples/rich-content/feature-alexander-shatov-mr4JG4SYOF8-unsplash.jpg differ diff --git a/exampleSite/content/samples/rich-content.md b/exampleSite/content/samples/rich-content/index.md similarity index 100% rename from exampleSite/content/samples/rich-content.md rename to exampleSite/content/samples/rich-content/index.md diff --git a/layouts/_default/_markup/render-link.html b/layouts/_default/_markup/render-link.html index ecf655ea..9ab61ac4 100644 --- a/layouts/_default/_markup/render-link.html +++ b/layouts/_default/_markup/render-link.html @@ -1,3 +1,3 @@ {{- .Text | safeHTML -}} - + \ No newline at end of file diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 005fea4d..fcf09b8b 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,4 +1,7 @@ {{ define "main" }} + {{- $images := .Resources.ByType "image" }} + {{- $cover := $images.GetMatch "*cover*" }} + {{- $feature := $images.GetMatch "*feature*" | default $cover }}
{{ if .Params.showBreadcrumbs | default (.Site.Params.article.showBreadcrumbs | default false) }} @@ -10,6 +13,17 @@
{{ partial "article-meta.html" (dict "context" . "scope" "single") }}
+ {{ with $feature }} + + {{ end }}
{{ if and (.Params.showTableOfContents | default (.Site.Params.article.showTableOfContents | default false)) (in .TableOfContents " -

- {{ with .Params.externalUrl }} -
+
+ {{- $images := $.Resources.ByType "image" }} + {{- $thumbnail := $images.GetMatch "*thumb*" }} + {{- $feature := $images.GetMatch "*feature*" | default $thumbnail }} + {{- with $feature }} +
+ + + +
+ {{- end }} +
+

+ {{ with .Params.externalUrl }} +
+ {{ $.Title | emojify }} + + ↗ + ↖ + +
+ {{ else }} {{ $.Title | emojify }}{{ .Title | emojify }} - - ↗ - ↖ - -

- {{ else }} - {{ .Title | emojify }} - {{ end }} - {{ if and .Draft .Site.Params.article.showDraftLabel }} -
- {{ partial "badge.html" (i18n "article.draft" | emojify) }} -
- {{ end }} - {{ if templates.Exists "partials/extend-article-link.html" }} - {{ partial "extend-article-link.html" . }} - {{ end }} -

-
- {{ partial "article-meta.html" . }} -
- {{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }} -
- {{ .Summary | emojify }} + {{ end }} + {{ if and .Draft .Site.Params.article.showDraftLabel }} +
+ {{ partial "badge.html" (i18n "article.draft" | emojify) }} +
+ {{ end }} + {{ if templates.Exists "partials/extend-article-link.html" }} + {{ partial "extend-article-link.html" . }} + {{ end }} + +
+ {{ partial "article-meta.html" . }}
- {{ end }} + {{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }} +
+ {{ .Summary | emojify }} +
+ {{ end }} +
diff --git a/layouts/partials/article-meta.html b/layouts/partials/article-meta.html index 190811ec..be6ccf20 100644 --- a/layouts/partials/article-meta.html +++ b/layouts/partials/article-meta.html @@ -32,7 +32,6 @@ {{ $meta.Add "partials" (slice (partial "meta/edit.html" .)) }} {{ end }} -
{{/* Output partials */}} {{ with ($meta.Get "partials") }}