✨ Add edit links on article pages

CHANGELOG.md

@@ -13,6 +13,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Added
 
 - Multiple colour schemes
+- Edit links on article pages
 - Icons for Foursquare and Pinterest
 
 ### Fixed

assets/icons/edit.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="edit" class="svg-inline--fa fa-edit fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z"></path></svg>

config/_default/params.toml

@@ -19,6 +19,9 @@ colorScheme = "congo"
   showAuthor = true
   showBreadcrumbs = false
   showDraftLabel = true
+  showEdit = false
+  # editURL = "https://github.com/username/repo/"
+  editAppendPath = true
   showHeadingAnchors = true
   showPagination = true
   showReadingTime = true

exampleSite/config.toml

@@ -39,6 +39,9 @@ relativeURLs = true
 
 [params.article]
   showBreadcrumbs = true
+  showEdit = true
+  editURL = "https://github.com/jpanther/congo/tree/dev/exampleSite/content/"
+  editAppendPath = true
 
 [[menu.main]]
   name = "Docs"

exampleSite/content/docs/configuration.md

@@ -66,6 +66,9 @@ Many of the article defaults here can be overridden on a per article basis by sp
 |`article.showAuthor`|boolean|`true`|Whether or not the author box is displayed in the article footer.|
 |`article.showBreadcrumbs`|boolean|`false`|Whether or not breadcrumbs are displayed in the article header.|
 |`article.showDraftLabel`|boolean|`true`|Whether or not the draft indicator is shown next to articles when site is built with `--buildDrafts`.|
+|`article.showEdit`|boolean|`false`|Whether or not the link to edit the article content should be displayed.|
+|`article.editURL`|string|_Not set_|When `article.showEdit` is active, the URL for the edit link.|
+|`article.editAppendPath`|boolean|`true`|When `article.showEdit` is active, whether or not the path to the current article should be appended to the URL set at `article.editURL`.|
 |`article.showHeadingAnchors`|boolean|`true`|Whether or not heading anchor links are displayed alongside headings within articles.|
 |`article.showPagination`|boolean|`true`|Whether or not the next/previous article links are displayed in the article footer.|
 |`article.showReadingTime`|boolean|`true`|Whether or not article reading times are displayed.|

exampleSite/content/docs/front-matter.md

@@ -19,6 +19,9 @@ Front matter parameter default values are inherited from the theme's [base confi
 |`externalUrl`|string|_Not set_|If this article is published on a third-party website, the URL to this article. Providing a URL will prevent a content page being generated and any references to this article will link directly to the third-party website.|
 |`showDate`|boolean|`article.showDate`|Whether or not article dates are displayed.|
 |`showAuthor`|boolean|`article.showAuthor`|Whether or not the author box is displayed in the article footer.|
+|`showEdit`|boolean|`article.showEdit`|Whether or not the link to edit the article content should be displayed.|
+|`editURL`|string|`article.editURL`|When `showEdit` is active, the URL for the edit link.|
+|`editAppendPath`|boolean|`article.editAppendPath`|When `showEdit` is active, whether or not the path to the current article should be appended to the URL set at `editURL`.|
 |`showHeadingAnchors`|boolean|`article.showHeadingAnchors`|Whether or not heading anchor links are displayed alongside headings within this article.|
 |`showPagination`|boolean|`article.showPagination`|Whether or not the next/previous article links are displayed in the article footer.|
 |`showReadingTime`|boolean|`article.showReadingTime`|Whether or not article reading times are displayed.|

i18n/en.yaml

@@ -1,6 +1,7 @@
 article:
   anchor_label: "Anchor"
   draft: "Draft"
+  edit_title: "Edit content"
   reading_time:
     one: "{{ .Count }} min"
     other: "{{ .Count }} mins"

layouts/_default/single.html

@@ -8,10 +8,7 @@
         {{ .Title | emojify }}
       </h1>
       <div class="mt-8 mb-12 text-base text-neutral-400 dark:text-neutral-500">
-        {{ partial "article-meta.html" . }}
+        {{ partial "article-meta.html" (dict "context" . "scope" "single") }}
-        {{ if and .Draft .Site.Params.article.showDraftLabel }}
-          <span class="pl-2">{{ partial "badge.html" (i18n "article.draft" | emojify) }}</span>
-        {{ end }}
       </div>
     </header>
     <section class="prose dark:prose-light">
@@ -22,7 +19,6 @@
       {{ partial "sharing-links.html" . }}
       {{ partial "article-pagination.html" . }}
     </footer>
-    {{/* Comments */}}
     {{ if templates.Exists "partials/comments.html" }}
       {{ partial "comments.html" . }}
     {{ end }}

layouts/partials/article-link.html

@@ -1,5 +1,5 @@
 <article>
-  <h3 class="mt-6 text-xl font-semibold">
+  <h3 class="flex items-center mt-6 text-xl font-semibold">
     {{ if isset .Params "externalUrl" }}
       <a
         class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral"
@@ -22,7 +22,9 @@
       >
     {{ end }}
     {{ if and .Draft .Site.Params.article.showDraftLabel }}
+      <div class="ml-2">
         {{ partial "badge.html" "Draft" }}
+      </div>
     {{ end }}
     {{ if templates.Exists "partials/extend-article-link.html" }}
       {{ partial "extend-article-link.html" . }}

layouts/partials/article-meta.html

@@ -1,17 +1,39 @@
-{{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }}
+{{/* Determine the correct context and scope */}}
-  <time datetime="{{ .Date }}">
+{{/* This allows for different logic depending on where the partial is called */}}
-    {{ .Date.Format .Site.Params.article.dateFormat | default "2 January 2006" }}
+{{ $context := . }}
-  </time>
+{{ $scope := default nil }}
+
+{{ if (reflect.IsMap . ) }}
+  {{ $context = .context }}
+  {{ $scope = cond (not .scope) nil .scope }}
 {{ end }}
-{{ if and
+
-  (.Params.showDate | default (.Site.Params.article.showDate | default true))
+{{ with $context }}
-  (.Params.showReadingTime | default (.Site.Params.article.showReadingTime | default true))
+  {{ $meta := newScratch }}
-  (ne .ReadingTime 0)
+
-}}
+  {{/* Gather partials for this context */}}
-  <span class="px-1 text-primary-500">&middot;</span>
+  {{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }}
-{{ end }}
+    {{ $meta.Add "partials" (slice (partial "meta/date.html" .)) }}
-{{ if and (.Params.showReadingTime | default (.Site.Params.article.showReadingTime | default true)) (ne .ReadingTime 0) }}
+  {{ end }}
-  <span title="{{ i18n "article.reading_time_title" }}">
+
-    {{ i18n "article.reading_time" .ReadingTime | emojify }}
+  {{ if and (.Params.showReadingTime | default (.Site.Params.article.showReadingTime | default true)) (ne .ReadingTime 0) }}
-  </span>
+    {{ $meta.Add "partials" (slice (partial "meta/reading-time.html" .)) }}
+  {{ end }}
+
+  {{ if and (eq $scope "single") (.Params.showEdit | default (.Site.Params.article.showEdit | default false)) }}
+    {{ $meta.Add "partials" (slice (partial "meta/edit.html" .)) }}
+  {{ end }}
+
+
+  <div class="flex flex-row items-center">
+    {{/* Output partials */}}
+    {{ with ($meta.Get "partials") }}
+      {{ delimit . "<span class=\"px-2 text-primary-500\">&middot;</span>" }}
+    {{ end }}
+
+    {{/* Output draft label */}}
+    {{ if and (eq $scope "single") (and .Draft .Site.Params.article.showDraftLabel) }}
+      <span class="pl-2">{{ partial "badge.html" (i18n "article.draft" | emojify) }}</span>
+    {{ end }}
+  </div>
 {{ end }}

layouts/partials/article-pagination.html

@@ -9,15 +9,12 @@
               <span class="mr-3 article-pagination-direction">&larr;</span>
               <span class="flex flex-col">
                 <span class="article-pagination-title">{{ .NextInSection.Title }}</span>
+                <span class="-mt-1 text-xs text-neutral-400 dark:text-neutral-500">
                   {{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }}
-                  <time
+                    {{ partial "meta/date.html" . }}
-                    class="-mt-1 text-xs text-neutral-400 dark:text-neutral-500"
-                    datetime="{{ .Date }}"
-                  >
-                    {{ .Date.Format .Site.Params.article.dateFormat | default "2 January 2006" }}
-                  </time>
                   {{ end }}
                 </span>
+              </span>
             </a>
           {{ end }}
         </span>
@@ -26,15 +23,12 @@
             <a class="flex text-right" href="{{ .PrevInSection.Permalink }}">
               <span class="flex flex-col">
                 <span class="article-pagination-title">{{ .PrevInSection.Title }}</span>
+                <span class="-mt-1 text-xs text-neutral-400 dark:text-neutral-500">
                   {{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }}
-                  <time
+                    {{ partial "meta/date.html" . }}
-                    class="-mt-1 text-xs text-neutral-400 dark:text-neutral-500"
-                    datetime="{{ .Date }}"
-                  >
-                    {{ .Date.Format .Site.Params.article.dateFormat | default "2 January 2006" }}
-                  </time>
                   {{ end }}
                 </span>
+              </span>
               <span class="ml-3 article-pagination-direction">&rarr;</span>
             </a>
           {{ end }}

layouts/partials/badge.html

@@ -1,5 +1,5 @@
 <span
-  class="ml-1 px-1 py-[1px] text-xs font-normal border rounded-md text-primary-700 dark:text-primary-400 border-primary-400 dark:border-primary-600 inline-block align-middle mb-1"
+  class="ml-1 px-1 py-[1px] text-xs font-normal border rounded-md text-primary-700 dark:text-primary-400 border-primary-400 dark:border-primary-600 flex"
 >
   {{ . }}
 </span>

layouts/partials/meta/date.html

@@ -0,0 +1,4 @@
+<time datetime="{{ .Date }}">
+  {{- .Date.Format .Site.Params.article.dateFormat | default "2 January 2006" -}}
+</time>
+{{- /* Trim EOF */ -}}

layouts/partials/meta/edit.html

@@ -0,0 +1,19 @@
+{{ $url := .Params.editURL | default (.Site.Params.article.editURL | default "#") }}
+{{ $slash := "" }}
+{{ if .Params.editAppendPath | default ( .Site.Params.article.editAppendPath | default false ) }}
+  {{ if ne (substr $url -1 1) "/" }}
+    {{ $slash = "/" }}
+  {{ end }}
+  {{ $url = printf "%s%s%s" $url $slash (path.Join .File.Path) }}
+{{ end }}
+<span class="mb-[2px]">
+  <a
+    href="{{ $url }}"
+    class="text-lg hover:text-primary-500"
+    rel="noopener noreferrer"
+    target="_blank"
+    title="{{ i18n "article.edit_title" }}"
+    >{{ partial "icon.html" "edit" }}</a
+  >
+</span>
+{{- /* Trim EOF */ -}}

layouts/partials/meta/reading-time.html

@@ -0,0 +1,4 @@
+<span title="{{ i18n "article.reading_time_title" }}">
+  {{- i18n "article.reading_time" .ReadingTime | emojify -}}
+</span>
+{{- /* Trim EOF */ -}}