✨ Add profile shortcode

CHANGELOG.md

@@ -8,6 +8,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Added
 
+- New `profile` shortcode
 - Umami Analytics support ([#832](https://github.com/jpanther/congo/pull/832))
 - Theme parameter to set a default HTML theme colour ([#849](https://github.com/jpanther/congo/pull/849))
 - New icon for `bluesky` ([#851](https://github.com/jpanther/congo/pull/851))

assets/css/compiled/main.css

@@ -2162,6 +2162,10 @@ code {
   align-items: flex-start;
 }
 
+.items-end {
+  align-items: flex-end;
+}
+
 .items-center {
   align-items: center;
 }

exampleSite/content/docs/shortcodes/index.md

@@ -234,3 +234,23 @@ B-->C[Profit]
 {{< /mermaid >}}
 
 You can see some additional Mermaid examples on the [diagrams and flowcharts samples]({{< ref "diagrams-flowcharts" >}}) page.
+
+## Profile
+
+The `profile` shortcode inserts a block displaying the site author's details. The same template is used on Congo's homepage layouts, but can also be inserted in any article content. It has one optional parameter:
+
+<!-- prettier-ignore-start -->
+|Parameter|Description|
+|---|---|
+|`align`|The alignment of the profile elements - valid options include `start`, `center` and `end`. If no value is provided, the `center` alignment will be used.|
+<!-- prettier-ignore-end -->
+
+The template is populated using the author parameters set in the [Language Configuration]({{< ref "configuration#configuration" >}}).
+
+**Example:**
+
+```md
+{{</* profile align="center" */>}}
+```
+
+{{< profile align="center" >}}

layouts/partials/author-links.html

@@ -1,4 +1,4 @@
-{{ with .Site.Language.Params.Author.links }}
+{{ with site.Language.Params.Author.links }}
   <div class="flex flex-wrap text-neutral-400 dark:text-neutral-500">
     {{ range $links := . }}
       {{ range $name, $url := $links }}

layouts/partials/home/profile.html

@@ -3,28 +3,7 @@
     h-full
   {{ end }} flex flex-col items-center justify-center text-center"
 >
-  <header class="mb-3 flex flex-col items-center">
-    {{ $lazy := .Params.enableImageLazyLoading | default .Site.Params.enableImageLazyLoading | default true }}
-    {{ $altText := ($.Site.Language.Params.Author.name | default "Author") }}
-    {{ with .Site.Language.Params.Author.image }}
-      {{ $authorImage := resources.Get . }}
-      {{ if $authorImage }}
-        {{ $imgClass := "mb-2 h-auto w-36 rounded-full" }}
-        {{ partial "picture.html" (dict "img" $authorImage "alt" $altText "class" $imgClass "lazy" $lazy) }}
-      {{ end }}
-    {{ end }}
-    <h1 class="text-4xl font-extrabold">
-      {{ .Site.Language.Params.Author.name | default .Site.Title }}
-    </h1>
-    {{ with .Site.Language.Params.Author.headline }}
-      <h2 class="text-xl text-neutral-500 dark:text-neutral-400">
-        {{ . | markdownify | emojify }}
-      </h2>
-    {{ end }}
-    <div class="mt-1 text-2xl">
-      {{ partialCached "author-links.html" . }}
-    </div>
-  </header>
+  {{ partial "profile.html" }}
   <section class="prose dark:prose-invert">{{ .Content | emojify }}</section>
 </article>
 <section>

layouts/partials/profile.html

@@ -0,0 +1,31 @@
+{{ $align := .align | default "center" }}
+<section
+  class="not-prose {{ if eq $align "start" }}
+    items-start
+  {{ else if eq $align "end" }}
+    items-end
+  {{ else }}
+    items-center
+  {{ end }} mb-3 flex flex-col"
+>
+  {{ $lazy := site.Params.enableImageLazyLoading | default true }}
+  {{ $altText := (site.Language.Params.Author.name | default "Author") }}
+  {{ with site.Language.Params.Author.image }}
+    {{ $authorImage := resources.Get . }}
+    {{ if $authorImage }}
+      {{ $imgClass := "mb-2 h-auto w-36 rounded-full" }}
+      {{ partial "picture.html" (dict "img" $authorImage "alt" $altText "class" $imgClass "lazy" $lazy) }}
+    {{ end }}
+  {{ end }}
+  <h1 class="text-4xl font-extrabold">
+    {{ site.Language.Params.Author.name | default site.Title }}
+  </h1>
+  {{ with site.Language.Params.Author.headline }}
+    <h2 class="text-xl text-neutral-500 dark:text-neutral-400">
+      {{ . | markdownify | emojify }}
+    </h2>
+  {{ end }}
+  <div class="mt-1 text-2xl">
+    {{ partialCached "author-links.html" . }}
+  </div>
+</section>

layouts/shortcodes/profile.html

@@ -0,0 +1,2 @@
+{{ $align := default "center" (.Get "align") }}
+{{ partial "profile.html" (dict "align" $align) }}