Merge 74f82dae95 into 12fcf5f692

Portable markdown links

CHANGELOG.md

@@ -6,6 +6,15 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+- Minor refactor to improve memory efficiency in search results ([#650](https://github.com/jpanther/congo/pull/650))
+- Links in Markdown content are now portable ([#655](https://github.com/jpanther/congo/pull/655))
+
+### Fixed
+
+- JavaScript error setting theme colour when site is loaded in dark mode ([#676](https://github.com/jpanther/congo/issues/676))
+
 ## [2.7.0] - 2023-10-23
 
 ### Added

assets/js/search.js

@@ -133,21 +133,19 @@ function executeQuery(term) {
   let resultsHTML = "";
 
   if (results.length > 0) {
-    results.forEach(function (value, key) {
+    resultsHTML = results.map(function (value, key) {
-      resultsHTML =
+      return `<li class="mb-2">
-        resultsHTML +
+        <a class="flex items-center px-3 py-2 rounded-md appearance-none bg-neutral-100 dark:bg-neutral-700 focus:bg-primary-100 hover:bg-primary-100 dark:hover:bg-primary-900 dark:focus:bg-primary-900 focus:outline-dotted focus:outline-transparent focus:outline-2" href="${value.item.permalink}" tabindex="0">
-        `<li class="mb-2">
+          <div class="grow">
-          <a class="flex items-center px-3 py-2 rounded-md appearance-none bg-neutral-100 dark:bg-neutral-700 focus:bg-primary-100 hover:bg-primary-100 dark:hover:bg-primary-900 dark:focus:bg-primary-900 focus:outline-dotted focus:outline-transparent focus:outline-2" href="${value.item.permalink}" tabindex="0">
+            <div class="-mb-1 text-lg font-bold">${value.item.title}</div>
-            <div class="grow">
+            <div class="text-sm text-neutral-500 dark:text-neutral-400">${value.item.section}${value.item.date == null ? '' : `<span class="px-2 text-primary-500">&middot;</span>${value.item.date}</span>`}</div>
-              <div class="-mb-1 text-lg font-bold">${value.item.title}</div>
+            <div class="text-sm italic">${value.item.summary}</div>
-              <div class="text-sm text-neutral-500 dark:text-neutral-400">${value.item.section}${value.item.date == null ? '' : `<span class="px-2 text-primary-500">&middot;</span>${value.item.date}</span>`}</div>
+          </div>
-              <div class="text-sm italic">${value.item.summary}</div>
+          <div class="ml-2 ltr:block rtl:hidden text-neutral-500">&rarr;</div>
-            </div>
+          <div class="mr-2 ltr:hidden rtl:block text-neutral-500">&larr;</div>
-            <div class="ml-2 ltr:block rtl:hidden text-neutral-500">&rarr;</div>
+        </a>
-            <div class="mr-2 ltr:hidden rtl:block text-neutral-500">&larr;</div>
+      </li>`;
-          </a>
+    }).join("");
-        </li>`;
-    });
     hasResults = true;
   } else {
     resultsHTML = "";

exampleSite/config/_default/params.toml

@@ -12,6 +12,7 @@ autoSwitchAppearance = true
 enableSearch = true
 enableCodeCopy = true
 enableImageLazyLoading = true
+enableWebp = true
 
 # robots = ""
 fingerprintAlgorithm = "sha256"

exampleSite/content/samples/markdown/index.md

@@ -9,6 +9,10 @@ This article offers a sample of basic Markdown formatting that can be used in Co
 
 <!--more-->
 
+## Image
+
+![sample image](thumb-surendran-mp-IhWYiwSxm8g-unsplash.jpg)
+
 ## Headings
 
 The following HTML `<h1>`—`<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest.

layouts/_default/_markup/render-image.html

@@ -1,64 +1,4 @@
-{{ $url := urls.Parse .Destination }}
+<figure>
-{{ $altText := .Text }}
+  {{ partial "picture.html" (dict "context" . "src" .Destination "alt" .Text) }}
-{{ $caption := .Title }}
+  {{ with .Title }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
-{{ $lazyLoad := $.Page.Site.Params.enableImageLazyLoading | default true }}
+</figure>
-{{ if findRE "^https?" $url.Scheme }}
-  <figure>
-    <img
-      class="mx-auto my-0 rounded-md"
-      src="{{ $url.String }}"
-      alt="{{ $altText }}" 
-      {{ if $lazyLoad }}
-        loading="lazy"
-      {{ end }}
-    />
-    {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
-  </figure>
-{{ else }}
-  {{ $resource := "" }}
-  {{ if $.Page.Resources.GetMatch ($url.String) }}
-    {{ $resource = $.Page.Resources.GetMatch ($url.String) }}
-  {{ else if resources.GetMatch ($url.String) }}
-    {{ $resource = resources.Get ($url.String) }}
-  {{ end }}
-  {{ with $resource }}
-    <figure>
-      <img
-        class="mx-auto my-0 rounded-md"
-        {{ if eq .MediaType.SubType "svg" }}
-          src="{{ .RelPermalink }}"
-        {{ else }}
-          width="{{ .Width }}"
-          height="{{ .Height }}"
-          {{ if lt .Width 660 }}
-            src="{{ .RelPermalink }}"
-          {{ else }}
-            srcset="
-            {{- (.Resize "330x").RelPermalink }} 330w,
-            {{- (.Resize "660x").RelPermalink }} 660w,
-            {{- (.Resize "1024x").RelPermalink }} 1024w,
-            {{- (.Resize "1320x").RelPermalink }} 2x"
-            src="{{ (.Resize "660x").RelPermalink }}"
-          {{ end }}
-        {{ end }}
-        alt="{{ $altText }}"
-        {{ if $lazyLoad }}
-          loading="lazy"
-        {{ end }}
-      />
-      {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
-    </figure>
-  {{ else }}
-    <figure>
-      <img
-        class="mx-auto my-0 rounded-md"
-        src="{{ $url.String }}"
-        alt="{{ $altText }}"
-        {{ if $lazyLoad }}
-          loading="lazy"
-        {{ end }}
-      />
-      {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
-    </figure>
-  {{ end }}
-{{ end }}

layouts/_default/_markup/render-link.html

@@ -1,7 +1,10 @@
-<a
+{{ $link := .Destination }}
-  href="{{ .Destination | safeURL }}"
+{{ $isRemote := strings.HasPrefix $link "http" }}
-  {{ with .Title }}title="{{ . }}"{{ end }}
+{{- if not $isRemote -}}
-  {{ if strings.HasPrefix .Destination "http" }}target="_blank" rel="noreferrer noopener"{{ end }}
+{{ $url := urls.Parse .Destination }}
->
+{{- if $url.Path -}}
-  {{- .Text | safeHTML -}}
+{{ $fragment := "" }}
-</a>
+{{- with $url.Fragment }}{{ $fragment = printf "#%s" . }}{{ end -}}
+{{- with .Page.GetPage $url.Path }}{{ $link = printf "%s%s" .RelPermalink $fragment }}{{ end }}{{ end -}}
+{{- end -}}
+<a href="{{ $link | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if $isRemote }} target="_blank" rel="noreferrer"{{ end }}>{{ .Text | safeHTML }}</a>

layouts/_default/single.html

@@ -13,27 +13,10 @@
       <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 }}
+      {{ if $feature }}
         <div class="prose">
-          <img
+          {{ $alt := $.Params.featureAlt | default $.Params.coverAlt | default "" }}
-            class="mb-6 -mt-4 rounded-md"
+          {{ partial "picture.html" (dict "context" . "resource" $feature "alt" $alt "class" "mb-6 -mt-4 rounded-md") }}
-            {{ if eq .MediaType.SubType "svg" }}
-              src="{{ .RelPermalink }}"
-            {{ else }}
-              width="{{ .Width }}"
-              height="{{ .Height }}"
-              {{ if lt .Width 660 }}
-                src="{{ .RelPermalink }}"
-              {{ else }}
-                srcset="
-                {{- (.Resize "330x").RelPermalink }} 330w,
-                {{- (.Resize "660x").RelPermalink }} 660w,
-                {{- (.Resize "1024x").RelPermalink }} 1024w,
-                {{- (.Resize "1320x").RelPermalink }} 2x"
-              {{ end }}
-            {{ end }}
-            alt="{{ $.Params.featureAlt | default $.Params.coverAlt | default "" }}"
-          />
           {{ with $.Params.coverCaption }}
             <figcaption class="mb-6 -mt-3 text-center">{{ . | markdownify }}</figcaption>
           {{ end }}

layouts/partials/head.html

@@ -1,6 +1,7 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="theme-color" content="rgb(255,255,255)" />
   {{/* Title */}}
   {{ if .IsHome -}}
     <title>{{ .Site.Title | emojify }}</title>
@@ -97,7 +98,6 @@
     <link rel="icon" type="image/png" sizes="16x16" href="{{ "favicon-16x16.png" | relURL }}" />
     <link rel="manifest" href="{{ "site.webmanifest" | relURL }}" />
   {{ end }}
-  <meta name="theme-color" content="rgb(255,255,255)" />
   {{/* Site Verification */}}
   {{ with .Site.Params.verification.google }}
     <meta name="google-site-verification" content="{{ . }}" />

layouts/partials/picture.html

@@ -0,0 +1,82 @@
+{{ $url := urls.Parse .src }}
+{{ $altText := .alt }}
+{{ $class := .class | default "mx-auto my-0 rounded-md" }}
+
+{{ $lazyLoad := .context.Page.Site.Params.enableImageLazyLoading | default true }}
+{{ $webp := .context.Page.Site.Params.enableWebp | default true }}
+
+{{ if findRE "^https?" $url.Scheme }}
+  <img
+    class="{{ $class }}"
+    src="{{ $url.String }}"
+    alt="{{ $altText }}" 
+    {{ if $lazyLoad }}
+      loading="lazy"
+    {{ end }}
+  />
+{{ else }}
+  {{ $resource := "" }}
+  {{ if .resource }}
+    {{ $resource = .resource }}
+  {{ else if .context.Page.Resources.GetMatch ($url.String) }}
+    {{ $resource = .context.Page.Resources.GetMatch ($url.String) }}
+  {{ else if resources.GetMatch ($url.String) }}
+    {{ $resource = resources.Get ($url.String) }}
+  {{ end }}
+  {{ with $resource }}
+    <picture>
+      {{ if (and (ne .MediaType.SubType "svg") $webp) }}
+        <source 
+          {{ if lt .Width 660 }}
+            {{ with .Resize (printf "%dx%d webp" .Width .Height) }}
+              src="{{ .RelPermalink }}"
+            {{ end }}
+          {{ else }}
+            srcset="
+              {{- (.Resize "330x webp").RelPermalink }} 330w,
+              {{- (.Resize "660x webp").RelPermalink }} 660w,
+              {{- (.Resize "1024x webp").RelPermalink }} 1024w,
+              {{- (.Resize "1320x webp").RelPermalink }} 2x"
+            src="{{ (.Resize "660x webp").RelPermalink }}" 
+          {{ end }}
+          type="image/webp" 
+        />
+      {{ end }}
+      <img
+        class="{{ $class }}"
+        {{ if eq .MediaType.SubType "svg" }}
+          src="{{ .RelPermalink }}"
+        {{ else }}
+          width="{{ .Width }}"
+          height="{{ .Height }}"
+          decoding="async"
+          {{ if lt .Width 660 }}
+            src="{{ .RelPermalink }}"
+          {{ else }}
+            srcset="
+            {{- (.Resize "330x").RelPermalink }} 330w,
+            {{- (.Resize "660x").RelPermalink }} 660w,
+            {{- (.Resize "1024x").RelPermalink }} 1024w,
+            {{- (.Resize "1320x").RelPermalink }} 2x"
+            src="{{ (.Resize "660x").RelPermalink }}"
+          {{ end }}
+        {{ end }}
+        alt="{{ $altText }}"
+        {{ if $lazyLoad }}
+          loading="lazy"
+        {{ end }}
+      />
+    </picture>
+  {{ else }}
+    <img
+      class="{{ $class }}"
+      src="{{ $url.String }}"
+      alt="{{ $altText }}"
+      {{ if $lazyLoad }}
+        loading="lazy"
+      {{ end }}
+    />
+  {{ end }}
+{{ end }}
+
+

layouts/shortcodes/figure.html

@@ -1,50 +1,14 @@
 {{ if .Get "default" }}
   {{ template "_internal/shortcodes/figure.html" . }}
 {{ else }}
-  {{ $url := urls.Parse (.Get "src") }}
+  {{ $src := .Get "src" }}
-  {{ $altText := .Get "alt" }}
+  {{ $alt := .Get "alt" }}
   {{ $caption := .Get "caption" }}
   {{ $href := .Get "href" }}
   {{ $class := .Get "class" }}
   <figure{{ with $class }} class="{{ . }}"{{ end }}>
     {{ with $href }}<a href="{{ . }}">{{ end }}
-    <img
+    {{ partial "picture.html" (dict "context" . "src" $src "alt" $alt) }}
-      class="mx-auto my-0 rounded-md"
-      alt="{{ $altText }}"
-      {{ if .Site.Params.enableImageLazyLoading | default true }}
-        loading="lazy"
-      {{ end }}
-      {{ if findRE "^https?" $url.Scheme }}
-        src="{{ $url.String }}"
-      {{ else }}
-        {{ $resource := "" }}
-        {{ if $.Page.Resources.GetMatch ($url.String) }}
-          {{ $resource = $.Page.Resources.GetMatch ($url.String) }}
-        {{ else if resources.GetMatch ($url.String) }}
-          {{ $resource = resources.Get ($url.String) }}
-        {{ end }}
-        {{ with $resource }}
-          {{ if eq .MediaType.SubType "svg" }}
-            src="{{ .RelPermalink }}"
-          {{ else }}
-            width="{{ .Width }}"
-            height="{{ .Height }}"
-            {{ if lt .Width 660 }}
-              src="{{ .RelPermalink }}"
-            {{ else }}
-              srcset="
-              {{- (.Resize "330x").RelPermalink }} 330w,
-              {{- (.Resize "660x").RelPermalink }} 660w,
-              {{- (.Resize "1024x").RelPermalink }} 1024w,
-              {{- (.Resize "1320x").RelPermalink }} 2x"
-              src="{{ (.Resize "660x").RelPermalink }}"
-            {{ end }}
-          {{ end }}
-        {{ else }}
-          src="{{ $url.String }}"
-        {{ end }}
-      {{ end }}
-    />
     {{ with $href }}</a>{{ end }}
     {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
   </figure>