✨ Add site title display toggle

CHANGELOG.md

@@ -12,6 +12,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - 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))
@@ -19,6 +20,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### 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))

assets/css/compiled/main.css

@@ -1831,6 +1831,10 @@ body:has(#menu-controller:checked) {
   margin-bottom: 0.25rem;
 }
 
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -1843,10 +1847,6 @@ body:has(#menu-controller:checked) {
   margin-left: 0.5rem;
 }
 
-.mr-2 {
-  margin-right: 0.5rem;
-}
-
 .\!mb-9 {
   margin-bottom: 2.25rem !important;
 }
@@ -2018,6 +2018,10 @@ body:has(#menu-controller:checked) {
   flex-wrap: wrap;
 }
 
+.items-start {
+  align-items: flex-start;
+}
+
 .items-center {
   align-items: center;
 }
@@ -2882,6 +2886,10 @@ body:has(#menu-controller:checked) {
     flex-direction: row;
   }
 
+  .sm\:items-center {
+    align-items: center;
+  }
+
   .sm\:p-6 {
     padding: 1.5rem;
   }

config/_default/params.toml

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

exampleSite/config/_default/params.toml

@@ -17,6 +17,8 @@ mainSections = ["samples"]
 
 [header]
   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`, `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.|

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

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

layouts/partials/logo.html

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