Merge branch 'dev' into dev

CHANGELOG.md

@@ -8,20 +8,25 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Added
 
+- Support for article thumbnails, covers and featured images
+- Hybrid header layout that switches between the hamburger and basic menus at appropriate viewport sizes
 - 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
+- Site title display can be toggled on or off independently, allowing for it to be displayed alongside the site logo or removed entirely
 - Tailwind plugin for Prettier to standardise the order of CSS classes ([#268](https://github.com/jpanther/congo/pull/268))
 - External links in article content will now open in a new browser tab ([#312](https://github.com/jpanther/congo/pull/312))
 - Independent control over the display of taxonomy listings on article and list pages ([#326](https://github.com/jpanther/congo/pull/326))
 - Button shortcode now supports an optional `download` parameter to instruct browsers to directly download resources rather than navigate to a URL ([#349](https://github.com/jpanther/congo/pull/349))
+- Minor style and layout improvements
 
 ### Changed
 
+- ⚠️ The `logo` parameter has moved under the `header` group and is now set using `header.logo`
 - ⚠️ Simplified Chinese (China) language code has changed from `zh` to `zh-cn`
 - Site logo is now in its own `logo.html` partial to allow it to be easily overridden ([#322](https://github.com/jpanther/congo/pull/322))
 - Upgrade to Chart.js v3.9.1 ([#261](https://github.com/jpanther/congo/pull/261))
 - Upgrade to Tailwind v3.2.2 ([#265](https://github.com/jpanther/congo/pull/265), [#333](https://github.com/jpanther/congo/pull/333), [#352](https://github.com/jpanther/congo/pull/352))
-- Upgrade to Mermaid v9.2.0 ([#272](https://github.com/jpanther/congo/pull/272), [#279](https://github.com/jpanther/congo/pull/279), [#296](https://github.com/jpanther/congo/pull/296), [#339](https://github.com/jpanther/congo/pull/339))
+- Upgrade to Mermaid v9.2.2 ([#272](https://github.com/jpanther/congo/pull/272), [#279](https://github.com/jpanther/congo/pull/279), [#296](https://github.com/jpanther/congo/pull/296), [#339](https://github.com/jpanther/congo/pull/339), [#360](https://github.com/jpanther/congo/pull/360))
 - Upgrade to KaTeX v0.16.3 ([#284](https://github.com/jpanther/congo/pull/284), [#334](https://github.com/jpanther/congo/pull/334))
 - Upgrade to Typography v0.5.8 ([#287](https://github.com/jpanther/congo/pull/287), [#292](https://github.com/jpanther/congo/pull/292), [#353](https://github.com/jpanther/congo/pull/353))
 

assets/css/compiled/main.css

@@ -1799,12 +1799,20 @@ body:has(#menu-controller:checked) {
   margin-top: 1.5rem;
 }
 
-.mr-3 {
-  margin-right: 0.75rem;
+.mb-6 {
+  margin-bottom: 1.5rem;
 }
 
-.ml-3 {
-  margin-left: 0.75rem;
+.-mt-4 {
+  margin-top: -1rem;
+}
+
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.ml-2 {
+  margin-left: 0.5rem;
 }
 
 .mt-\[0\.1rem\] {
@@ -1831,14 +1839,6 @@ body:has(#menu-controller:checked) {
   margin-bottom: -0.25rem;
 }
 
-.ml-2 {
-  margin-left: 0.5rem;
-}
-
-.mr-2 {
-  margin-right: 0.5rem;
-}
-
 .\!mb-9 {
   margin-bottom: 2.25rem !important;
 }
@@ -2010,6 +2010,10 @@ body:has(#menu-controller:checked) {
   flex-wrap: wrap;
 }
 
+.items-start {
+  align-items: flex-start;
+}
+
 .items-center {
   align-items: center;
 }
@@ -2240,6 +2244,10 @@ body:has(#menu-controller:checked) {
   padding-top: 0.75rem;
 }
 
+.pr-4 {
+  padding-right: 1rem;
+}
+
 .pl-2 {
   padding-left: 0.5rem;
 }
@@ -2431,6 +2439,12 @@ body:has(#menu-controller:checked) {
           backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .transition-opacity {
   transition-property: opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2441,6 +2455,12 @@ body:has(#menu-controller:checked) {
   margin-top: 2rem;
 }
 
+.hover\:scale-125:hover {
+  --tw-scale-x: 1.25;
+  --tw-scale-y: 1.25;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .hover\:border-primary-300:hover {
   --tw-border-opacity: 1;
   border-color: rgba(var(--color-primary-300), var(--tw-border-opacity));
@@ -2524,6 +2544,16 @@ body:has(#menu-controller:checked) {
   outline-color: transparent;
 }
 
+.group:hover .group-hover\:-translate-x-\[2px\] {
+  --tw-translate-x: -2px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.group:hover .group-hover\:translate-x-\[2px\] {
+  --tw-translate-x: 2px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .group:hover .group-hover\:text-primary-600 {
   --tw-text-opacity: 1;
   color: rgba(var(--color-primary-600), var(--tw-text-opacity));
@@ -2850,14 +2880,30 @@ body:has(#menu-controller:checked) {
     margin-bottom: 0px;
   }
 
+  .sm\:flex {
+    display: flex;
+  }
+
+  .sm\:hidden {
+    display: none;
+  }
+
   .sm\:w-1\/2 {
     width: 50%;
   }
 
+  .sm\:w-40 {
+    width: 10rem;
+  }
+
   .sm\:flex-row {
     flex-direction: row;
   }
 
+  .sm\:items-center {
+    align-items: center;
+  }
+
   .sm\:p-6 {
     padding: 1.5rem;
   }
@@ -2872,6 +2918,10 @@ body:has(#menu-controller:checked) {
     padding-bottom: 2.5rem;
   }
 
+  .sm\:pr-6 {
+    padding-right: 1.5rem;
+  }
+
   .sm\:pt-10 {
     padding-top: 2.5rem;
   }

assets/js/search.js

@@ -1,5 +1,5 @@
 var fuse;
-var showButton = document.getElementById("search-button");
+var showButtons = document.querySelectorAll("[id^='search-button']");
 var hideButton = document.getElementById("close-search-button");
 var wrapper = document.getElementById("search-wrapper");
 var modal = document.getElementById("search-modal");
@@ -12,7 +12,9 @@ var indexed = false;
 var hasResults = false;
 
 // Listen for events
-showButton.addEventListener("click", displaySearch);
+showButtons.forEach((button) => {
+  button.addEventListener("click", displaySearch);
+});
 hideButton.addEventListener("click", hideSearch);
 wrapper.addEventListener("click", hideSearch);
 modal.addEventListener("click", function (event) {
@@ -107,7 +109,7 @@ function fetchJSON(path, callback) {
 
 function buildIndex() {
   var baseURL = wrapper.getAttribute("data-url");
-  baseURL = baseURL.replace(/\/?$/, '/');
+  baseURL = baseURL.replace(/\/?$/, "/");
   fetchJSON(baseURL + "index.json", function (data) {
     var options = {
       shouldSort: true,

config/_default/params.toml

@@ -16,7 +16,9 @@ enableCodeCopy = false
 # robots = ""
 
 [header]
-  layout = "basic" # valid options: basic, hamburger, custom
+  layout = "basic" # valid options: basic, hamburger, hybrid, custom
+  # logo = "img/logo.jpg"
+  showTitle = true
 
 [footer]
   showCopyright = true

exampleSite/config/_default/params.toml

@@ -16,7 +16,9 @@ mainSections = ["samples"]
 # robots = ""
 
 [header]
-  layout = "basic" # valid options: basic, hamburger, custom
+  layout = "basic" # valid options: basic, hamburger, hybrid, custom
+  # logo = "img/logo.jpg"
+  showTitle = true
 
 [footer]
   showCopyright = true

exampleSite/content/docs/configuration.md

@@ -120,10 +120,11 @@ Many of the article defaults here can be overridden on a per article basis by sp
 |`autoSwitchAppearance`|`true`|Whether the theme appearance automatically switches based upon the visitor's operating system preference. Set to `false` to force the site to always use the `defaultAppearance`.|
 |`enableSearch`|`false`|Whether site search is enabled. Set to `true` to enable search functionality. Note that the search feature depends on the `outputs.home` setting in the [site configuration](#site-configuration) being set correctly.|
 |`enableCodeCopy`|`false`|Whether copy-to-clipboard buttons are enabled for `<code>` blocks. The `highlight.noClasses` parameter must be set to `false` for code copy to function correctly. Read more about [other configuration files](#other-configuration-files) below.|
-|`logo`|_Not set_|The relative path to the site logo file within the `assets/` folder. The logo file should be provided at 2x resolution and supports any image dimensions.|
 |`mainSections`|_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.|
 |`robots`|_Not set_|String that indicates how robots should handle your site. 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.|
-|`header.layout`|`"basic"`|The layout of the page header and menu. Valid values are `basic`, `hamburger` or `custom`. When set to `custom`, you must provide your own layout by creating a `/layouts/partials/header/custom.html` file.|
+|`header.layout`|`"basic"`|The layout of the page header and menu. Valid values are `basic`, `hamburger`, `hybrid` or `custom`. When set to `custom`, you must provide your own layout by creating a `/layouts/partials/header/custom.html` file.|
+|`header.logo`|_Not set_|The relative path to the site logo file within the `assets/` folder. The logo file should be provided at 2x resolution and supports any image dimensions.|
+|`header.showTitle`|`true`|Whether the site title is displayed in the header.|
 |`footer.showCopyright`|`true`|Whether or not to show the copyright string in the site footer. Note that the string itself can be customised using the `copyright` parameter in the [languages configuration](#language-and-i18n).|
 |`footer.showThemeAttribution`|`true`|Whether or not to show the "powered by" theme attribution in the site footer. If you choose to disable this message, please consider attributing the theme somewhere else on your site (for example, on your about page).|
 |`footer.showAppearanceSwitcher`|`false`|Whether or not to show the appearance switcher in the site footer. The browser's local storage is used to persist the visitor's preference.|

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:

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"
 ---
 

exampleSite/content/users.md

@@ -45,6 +45,7 @@ Real websites that are built with Congo.
 | [medical-humanities](https://medical-humanities.org)                   | Academic site                |
 | [boyersnet.com](https://boyersnet.com)                                 | Personal site and Blog       |
 | [major.io](https://major.io)                                           | Personal site and Blog       |
-| [bayas.dev](https://bayas.dev)                                           | Personal site and Blog       |
+| [bayas.dev](https://bayas.dev)                                         | Personal site and Blog       |
+| [顾宇的博客](https://www.guyu.me/)                                     | Personal Blog (in Chinese)   |
 
 **Congo user?** To add your site to this list, [submit a pull request](https://github.com/jpanther/congo/blob/dev/exampleSite/content/users.md).

layouts/_default/single.html

@@ -1,4 +1,7 @@
 {{ define "main" }}
+  {{- $images := .Resources.ByType "image" }}
+  {{- $cover := $images.GetMatch "*cover*" }}
+  {{- $feature := $images.GetMatch "*feature*" | default $cover }}
   <article>
     <header class="max-w-prose">
       {{ if .Params.showBreadcrumbs | default (.Site.Params.article.showBreadcrumbs | default false) }}
@@ -10,6 +13,17 @@
       <div class="mt-8 mb-12 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
         {{ partial "article-meta.html" (dict "context" . "scope" "single") }}
       </div>
+      {{ with $feature }}
+        <img
+          class="mb-6 -mt-4 rounded-md"
+          srcset="
+                {{- (.Resize "330x").RelPermalink }} 330w,
+                {{- (.Resize "660x").RelPermalink }} 660w,
+                {{- (.Resize "1024x").RelPermalink }} 1024w,
+                {{- (.Resize "1320x").RelPermalink }} 2x"
+          src="{{ (.Resize "660x").RelPermalink }}"
+        />
+      {{ end }}
     </header>
     <section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row">
       {{ if and (.Params.showTableOfContents | default (.Site.Params.article.showTableOfContents | default false)) (in .TableOfContents "<ul") }}

layouts/partials/article-link.html

@@ -1,44 +1,68 @@
-<article>
-  <h3 class="flex items-center mt-6 text-xl font-semibold">
-    {{ with .Params.externalUrl }}
-      <div>
+<article class="flex flex-row mt-6 max-w-prose">
+  {{- $images := $.Resources.ByType "image" }}
+  {{- $thumbnail := $images.GetMatch "*thumb*" }}
+  {{- $feature := $images.GetMatch "*feature*" | default $thumbnail }}
+  {{- with $feature }}
+    <div class="flex-none pr-4 sm:pr-6 ">
+      <a
+        href="{{ with $.Params.externalUrl }}
+          {{ . }}
+        {{ else }}
+          {{ $.RelPermalink }}
+        {{ end }}"
+      >
+        <img
+          class="w-24 rounded-md sm:w-40"
+          srcset="
+          {{- (.Fill "160x120 smart").RelPermalink }} 160w,
+          {{- (.Fill "320x240 smart").RelPermalink }} 2x"
+          src="{{ (.Fill "160x120 smart").RelPermalink }}"
+        />
+      </a>
+    </div>
+  {{- end }}
+  <div>
+    <h3 class="flex items-center text-xl font-semibold">
+      {{ with .Params.externalUrl }}
+        <div>
+          <a
+            class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
+            href="{{ . }}"
+            target="_blank"
+            rel="external"
+            >{{ $.Title | emojify }}</a
+          >
+          <span
+            class="text-xs align-top cursor-default text-neutral-400 dark:text-neutral-500"
+            title="{{ i18n "list.externalurl_title" }}"
+          >
+            <span class="rtl:hidden">&#8599;</span>
+            <span class="ltr:hidden">&#8598;</span>
+          </span>
+        </div>
+      {{ else }}
         <a
           class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
-          href="{{ . }}"
-          target="_blank"
-          rel="external"
-          >{{ $.Title | emojify }}</a
+          href="{{ .RelPermalink }}"
+          >{{ .Title | emojify }}</a
         >
-        <span
-          class="text-xs align-top cursor-default text-neutral-400 dark:text-neutral-500"
-          title="{{ i18n "list.externalurl_title" }}"
-        >
-          <span class="rtl:hidden">&#8599;</span>
-          <span class="ltr:hidden">&#8598;</span>
-        </span>
-      </div>
-    {{ else }}
-      <a
-        class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
-        href="{{ .RelPermalink }}"
-        >{{ .Title | emojify }}</a
-      >
-    {{ end }}
-    {{ if and .Draft .Site.Params.article.showDraftLabel }}
-      <div class=" ltr:ml-2 rtl:mr-2">
-        {{ partial "badge.html" (i18n "article.draft" | emojify) }}
-      </div>
-    {{ end }}
-    {{ if templates.Exists "partials/extend-article-link.html" }}
-      {{ partial "extend-article-link.html" . }}
-    {{ end }}
-  </h3>
-  <div class="text-sm text-neutral-500 dark:text-neutral-400">
-    {{ partial "article-meta.html" . }}
-  </div>
-  {{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }}
-    <div class="py-1 prose dark:prose-invert">
-      {{ .Summary | emojify }}
+      {{ end }}
+      {{ if and .Draft .Site.Params.article.showDraftLabel }}
+        <div class=" ltr:ml-2 rtl:mr-2">
+          {{ partial "badge.html" (i18n "article.draft" | emojify) }}
+        </div>
+      {{ end }}
+      {{ if templates.Exists "partials/extend-article-link.html" }}
+        {{ partial "extend-article-link.html" . }}
+      {{ end }}
+    </h3>
+    <div class="text-sm text-neutral-500 dark:text-neutral-400">
+      {{ partial "article-meta.html" . }}
     </div>
-  {{ end }}
+    {{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }}
+      <div class="py-1 prose dark:prose-invert">
+        {{ .Summary | emojify }}
+      </div>
+    {{ end }}
+  </div>
 </article>

layouts/partials/article-meta.html

@@ -32,7 +32,6 @@
     {{ $meta.Add "partials" (slice (partial "meta/edit.html" .)) }}
   {{ end }}
 
-
   <div class="flex flex-row flex-wrap items-center">
     {{/* Output partials */}}
     {{ with ($meta.Get "partials") }}

layouts/partials/article-pagination.html

@@ -11,13 +11,13 @@
       <div class="flex justify-between pt-3">
         <span>
           {{ if $prev }}
-            <a class="flex group" href="{{ $prev.RelPermalink }}">
+            <a class="group flex" href="{{ $prev.RelPermalink }}">
               <span
-                class="mr-3 text-neutral-700 group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400"
+                class="mr-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400"
                 >&larr;</span
               >
               <span
-                class="ml-3 text-neutral-700 group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400"
+                class="ml-2 text-neutral-700 transition-transform group-hover:translate-x-[2px] group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400"
                 >&rarr;</span
               >
               <span class="flex flex-col">
@@ -36,7 +36,7 @@
         </span>
         <span>
           {{ if $next }}
-            <a class="flex text-right group" href="{{ $next.RelPermalink }}">
+            <a class="group flex text-right" href="{{ $next.RelPermalink }}">
               <span class="flex flex-col">
                 <span
                   class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500"
@@ -49,11 +49,11 @@
                 </span>
               </span>
               <span
-                class="ml-3 text-neutral-700 group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400"
+                class="ml-2 text-neutral-700 transition-transform group-hover:translate-x-[2px] group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400"
                 >&rarr;</span
               >
               <span
-                class="mr-3 text-neutral-700 group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400"
+                class="mr-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400"
                 >&larr;</span
               >
             </a>

layouts/partials/author-links.html

@@ -3,7 +3,7 @@
     {{ range $links := . }}
       {{ range $name, $url := $links }}
         <a
-          class="px-1 hover:text-primary-700 dark:hover:text-primary-400"
+          class="px-1 transition-transform hover:scale-125 hover:text-primary-700 dark:hover:text-primary-400"
           href="{{ $url }}"
           target="_blank"
           aria-label="{{ $name | title }}"

layouts/partials/functions/warnings.html

@@ -4,3 +4,6 @@
 {{ if ne .Site.Params.showScrollToTop nil }}
   {{ warnf "[CONGO] Theme parameter `showScrollToTop` has been renamed to `footer.showScrollToTop`. Please update your site configuration." }}
 {{ end }}
+{{ if ne .Site.Params.logo nil }}
+  {{ warnf "[CONGO] Theme parameter `logo` has been renamed to `header.logo`. Please update your site configuration." }}
+{{ end }}

layouts/partials/header/basic.html

@@ -1,13 +1,13 @@
 <header class="py-6 font-semibold text-neutral-900 dark:text-neutral print:hidden sm:py-10">
-  <nav class="flex justify-between">
+  <nav class="flex items-start justify-between sm:items-center">
     {{/* Site logo/title */}}
-    <div class="flex flex-row">
+    <div class="flex flex-row items-center">
       {{ partial "logo.html" . }}
       {{ partial "translations.html" . }}
     </div>
     {{/* Main menu */}}
     {{ if or .Site.Menus.main (.Site.Params.enableSearch | default false) }}
-      <ul class="flex flex-col list-none ltr:text-right rtl:text-left sm:flex-row">
+      <ul class="flex list-none flex-col ltr:text-right rtl:text-left sm:flex-row">
         {{ if .Site.Menus.main }}
           {{ range .Site.Menus.main }}
             <li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0">

layouts/partials/header/hamburger.html

@@ -1,7 +1,7 @@
 <header class="py-6 font-semibold text-neutral-900 dark:text-neutral print:hidden sm:py-10">
-  <nav class="flex justify-between">
+  <nav class="flex items-start justify-between sm:items-center">
     {{/* Site logo/title */}}
-    <div class="z-40 flex flex-row">
+    <div class="z-40 flex flex-row items-center">
       {{ partial "logo.html" . }}
       {{ partial "translations.html" . }}
     </div>
@@ -14,10 +14,10 @@
         </div>
         <div
           id="menu-wrapper"
-          class="fixed inset-0 z-30 invisible w-screen h-screen m-auto overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50"
+          class="invisible fixed inset-0 z-30 m-auto h-screen w-screen cursor-default overflow-auto bg-neutral-100/50 opacity-0 backdrop-blur-sm transition-opacity dark:bg-neutral-900/50"
         >
           <ul
-            class="flex flex-col w-full px-6 py-6 mx-auto overflow-visible list-none max-w-7xl ltr:text-right rtl:text-left sm:px-14 sm:py-10 sm:pt-10 md:px-24 lg:px-32"
+            class="mx-auto flex w-full max-w-7xl list-none flex-col overflow-visible px-6 py-6 ltr:text-right rtl:text-left sm:px-14 sm:py-10 sm:pt-10 md:px-24 lg:px-32"
           >
             <li class="mb-1">
               <span class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400"

layouts/partials/header/hybrid.html

@@ -0,0 +1,81 @@
+<header class="py-6 font-semibold text-neutral-900 dark:text-neutral print:hidden sm:py-10">
+  <nav class="flex items-start justify-between sm:items-center">
+    {{/* Site logo/title */}}
+    <div class="z-40 flex flex-row items-center">
+      {{ partial "logo.html" . }}
+      {{ partial "translations.html" . }}
+    </div>
+    {{ if or .Site.Menus.main (.Site.Params.enableSearch | default false) }}
+      {{/* Hamburger menu */}}
+      <label id="menu-button" for="menu-controller" class="block sm:hidden">
+        <input type="checkbox" id="menu-controller" class="hidden" />
+        <div class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400">
+          {{ partial "icon.html" "bars" }}
+        </div>
+        <div
+          id="menu-wrapper"
+          class="invisible fixed inset-0 z-30 m-auto h-screen w-screen cursor-default overflow-auto bg-neutral-100/50 opacity-0 backdrop-blur-sm transition-opacity dark:bg-neutral-900/50"
+        >
+          <ul
+            class="mx-auto flex w-full max-w-7xl list-none flex-col overflow-visible px-6 py-6 ltr:text-right rtl:text-left sm:px-14 sm:py-10 sm:pt-10 md:px-24 lg:px-32"
+          >
+            <li class="mb-1">
+              <span class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400"
+                >{{ partial "icon.html" "xmark" }}</span
+              >
+            </li>
+            {{ if .Site.Menus.main }}
+              {{ range .Site.Menus.main }}
+                <li class="mb-1">
+                  <a
+                    class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
+                    href="{{ .URL }}"
+                    title="{{ .Title }}"
+                    >{{ .Name | markdownify | emojify }}</a
+                  >
+                </li>
+              {{ end }}
+            {{ end }}
+            {{ if .Site.Params.enableSearch | default false }}
+              <li>
+                <button
+                  id="search-button-2"
+                  class="text-base hover:text-primary-600 dark:hover:text-primary-400"
+                  title="{{ i18n "search.open_button_title" }}"
+                >
+                  {{ partial "icon.html" "search" }}
+                </button>
+              </li>
+            {{ end }}
+          </ul>
+        </div>
+      </label>
+      {{/* Basic menu */}}
+      <ul class="hidden list-none flex-row ltr:text-right rtl:text-left sm:flex">
+        {{ if .Site.Menus.main }}
+          {{ range .Site.Menus.main }}
+            <li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0">
+              <a
+                class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
+                href="{{ .URL }}"
+                title="{{ .Title }}"
+                >{{ .Name | markdownify | emojify }}</a
+              >
+            </li>
+          {{ end }}
+        {{ end }}
+        {{ if .Site.Params.enableSearch | default false }}
+          <li class="ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0">
+            <button
+              id="search-button-1"
+              class="text-base hover:text-primary-600 dark:hover:text-primary-400"
+              title="{{ i18n "search.open_button_title" }}"
+            >
+              {{ partial "icon.html" "search" }}
+            </button>
+          </li>
+        {{ end }}
+      </ul>
+    {{ end }}
+  </nav>
+</header>

layouts/partials/logo.html

@@ -1,7 +1,7 @@
-{{ if .Site.Params.Logo -}}
-  {{ $logo := resources.Get .Site.Params.Logo }}
-  {{ if $logo }}
-    <a href="{{ "" | relLangURL }}">
+{{- if .Site.Params.header.logo }}
+  {{- $logo := resources.Get .Site.Params.header.logo }}
+  {{- if $logo }}
+    <a href="{{ "" | relLangURL }}" class="mr-2">
       <img
         src="{{ $logo.RelPermalink }}"
         width="{{ div $logo.Width 2 }}"
@@ -10,8 +10,9 @@
         alt="{{ .Site.Title }}"
       />
     </a>
-  {{ end }}
-{{ else }}
+  {{- end }}
+{{- end }}
+{{- if .Site.Params.header.showTitle | default true }}
   <a
     class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
     rel="me"

package-lock.json

@@ -14,7 +14,7 @@
         "chart.js": "^3.9.1",
         "fuse.js": "^6.6.2",
         "katex": "^0.16.3",
-        "mermaid": "^9.2.0",
+        "mermaid": "^9.2.2",
         "prettier": "^2.7.1",
         "prettier-plugin-go-template": "^0.0.13",
         "prettier-plugin-tailwindcss": "^0.1.13",
@@ -1357,9 +1357,9 @@
       }
     },
     "node_modules/mermaid": {
-      "version": "9.2.0",
-      "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-9.2.0.tgz",
-      "integrity": "sha512-iWKTBjHoPUSs+mJMpZ5+K9xg97KflKjbv91Bu42yK2jjz4wX4Nt1eshi+bmmFWAhn7f2R0X55hlxxbSxdp0QYA==",
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-9.2.2.tgz",
+      "integrity": "sha512-6s7eKMqFJGS+0MYjmx8f6ZigqKBJVoSx5ql2gw6a4Aa+WJ49QiEJg7gPwywaBg3DZMs79UP7trESp4+jmaQccw==",
       "dev": true,
       "dependencies": {
         "@braintree/sanitize-url": "^6.0.0",
@@ -3054,9 +3054,9 @@
       "dev": true
     },
     "mermaid": {
-      "version": "9.2.0",
-      "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-9.2.0.tgz",
-      "integrity": "sha512-iWKTBjHoPUSs+mJMpZ5+K9xg97KflKjbv91Bu42yK2jjz4wX4Nt1eshi+bmmFWAhn7f2R0X55hlxxbSxdp0QYA==",
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-9.2.2.tgz",
+      "integrity": "sha512-6s7eKMqFJGS+0MYjmx8f6ZigqKBJVoSx5ql2gw6a4Aa+WJ49QiEJg7gPwywaBg3DZMs79UP7trESp4+jmaQccw==",
       "dev": true,
       "requires": {
         "@braintree/sanitize-url": "^6.0.0",

package.json

@@ -33,7 +33,7 @@
     "chart.js": "^3.9.1",
     "fuse.js": "^6.6.2",
     "katex": "^0.16.3",
-    "mermaid": "^9.2.0",
+    "mermaid": "^9.2.2",
     "prettier": "^2.7.1",
     "prettier-plugin-go-template": "^0.0.13",
     "prettier-plugin-tailwindcss": "^0.1.13",