✨ Add option to add a site logo

CHANGELOG.md

@@ -8,6 +8,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Added
 
+- Site logo support
 - Chinese translation ([#2](https://github.com/jpanther/congo/pull/2))
 
 ## [1.2.1] - 2021-08-26

assets/css/compiled/main.css

@@ -2701,6 +2701,10 @@ body a, body button {
     flex-direction: row;
   }
 
+  .sm\:items-center {
+    align-items: center;
+  }
+
   .sm\:px-14 {
     padding-left: 3.5rem;
     padding-right: 3.5rem;

config/_default/params.toml

@@ -6,6 +6,7 @@
 # https://jpanther.github.io/congo/docs/configuration/#theme-parameters
 
 colorScheme = "congo"
+# logo = "img/logo.jpg"
 # description = "My awesome website"
 # mainSections = ["section1", "section2"]
 # robots = ""

exampleSite/content/docs/configuration.md

@@ -55,6 +55,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 |Name|Type|Default|Description|
 | --- | --- | --- | --- |
 |`colorScheme`|string|`"congo"`|The theme colour scheme to use. Valid values are `congo` (default), `avocado`, `ocean` and `fire`.|
+|`logo`|string|_Not set_|The relative path to the site logo file within the Hugo assets folder. The logo file should be provided at 2x resolution and supports any image dimensions.|
 |`description`|string|_Not set_|The description of the website for metadata purposes.|
 |`mainSections`|array of strings|_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`|string|_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.|

layouts/partials/header.html

@@ -1,11 +1,25 @@
-<header class="flex justify-between py-6 font-semibold sm:py-10 text-neutral-800 dark:text-neutral">
+<header
+  class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-800 dark:text-neutral"
+>
   <div>
-    <a
+    {{ if .Site.Params.Logo -}}
-      class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small"
+      {{ $logo := resources.Get .Site.Params.Logo }}
-      rel="me"
+      {{ if $logo }}
-      href="{{ "/" | relURL }}"
+        <img
-      >{{ .Site.Title }}</a
+          src="{{ $logo.RelPermalink }}"
-    >
+          width="{{ div $logo.Width 2 }}"
+          height="{{ div $logo.Height 2 }}"
+          alt="{{ .Site.Title }}"
+        />
+      {{ end }}
+    {{ else }}
+      <a
+        class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small"
+        rel="me"
+        href="{{ "/" | relURL }}"
+        >{{ .Site.Title }}</a
+      >
+    {{- end }}
   </div>
   <nav>
     <ul class="flex flex-col list-none sm:flex-row">