From 590de1357a056a32f55370c3a87b713f7aa5da52 Mon Sep 17 00:00:00 2001
From: George Cushen <gcushen@users.noreply.github.com>
Date: Thu, 26 Oct 2023 20:36:51 +0100
Subject: [PATCH] feat: port Author Profile Block to Tailwind

---
 .../layouts/_default/list.html                |  4 +-
 .../layouts/partials/page_author_card.html    | 49 ++++++++++++++-----
 .../layouts/partials/page_footer.html         |  2 +-
 .../layouts/partials/social_links.html        | 29 ++++++-----
 .../layouts/partials/views/card.html          |  4 +-
 5 files changed, 57 insertions(+), 31 deletions(-)

diff --git a/modules/wowchemy-tailwind/layouts/_default/list.html b/modules/wowchemy-tailwind/layouts/_default/list.html
index 277f4362..9b39602d 100644
--- a/modules/wowchemy-tailwind/layouts/_default/list.html
+++ b/modules/wowchemy-tailwind/layouts/_default/list.html
@@ -22,8 +22,8 @@
         {{end}}
       </div>
       <div class="p-8">
-        <div class="uppercase tracking-wide text-sm text-indigo-700 dark:text-indigo-200 font-semibold">{{ .Title }}</div>
-        <p class="block mt-1 text-md leading-tight font-medium text-black dark:text-white">
+        <div class="uppercase tracking-wide text-md text-indigo-700 dark:text-indigo-200 font-semibold">{{ .Title }}</div>
+        <p class="block mt-1 text-sm leading-tight font-medium text-black dark:text-white">
           {{ (.Params.summary | default .Summary) | plainify | htmlUnescape | chomp -}}
         </p>
         <p class="mt-2 text-gray-500 dark:text-gray-400">
diff --git a/modules/wowchemy-tailwind/layouts/partials/page_author_card.html b/modules/wowchemy-tailwind/layouts/partials/page_author_card.html
index 06027aa8..ce59735c 100644
--- a/modules/wowchemy-tailwind/layouts/partials/page_author_card.html
+++ b/modules/wowchemy-tailwind/layouts/partials/page_author_card.html
@@ -12,19 +12,46 @@
   {{ end }}
   {{ $avatar := ($author_page.Resources.ByType "image").GetMatch "*avatar*" }}
   {{ $avatar_shape := site.Params.features.avatar.shape | default "circle" }}
-  <div class="media author-card content-widget-hr">
-    {{ if and site.Params.features.avatar.gravatar $author_page.Params.email }}
-      {{if $profile_url}}<a href="{{$profile_url}}">{{end}}<img class="avatar mr-3 {{if eq $avatar_shape "square"}}avatar-square{{else}}avatar-circle{{end}}" src="https://s.gravatar.com/avatar/{{ md5 $author_page.Params.email }}?s=200" alt="{{$author_page.Title}}">{{if $profile_url}}</a>{{end}}
-    {{ else if $avatar }}
-      {{ $avatar_image := $avatar.Fill "270x270 Center" }}
-      {{if $profile_url}}<a href="{{$profile_url}}">{{end}}<img class="avatar mr-3 {{if eq $avatar_shape "square"}}avatar-square{{else}}avatar-circle{{end}}" src="{{ $avatar_image.RelPermalink }}" alt="{{$author_page.Title}}">{{if $profile_url}}</a>{{end}}
+
+<div class="flex">
+  {{ if $avatar }}
+  {{ $authorImage := $avatar.Fill "192x192 Center" }}
+  <img
+    class="mr-4 h-24 w-24 {{if ne $avatar_shape "square"}}rounded-full{{end}}"
+    width="96"
+    height="96"
+    alt="{{$author_page.Title}}"
+  src="{{ $authorImage.RelPermalink }}"
+  loading="lazy"
+  />
+  {{ end }}
+  <div class="place-self-center">
+    <div class="text-[0.6rem] uppercase leading-3 text-neutral-500 dark:text-neutral-400">
+      {{ i18n "authors" }}
+    </div>
+    <div class="font-semibold leading-6 text-neutral-800 dark:text-neutral-300">
+      {{if $profile_url}}<a href="{{$profile_url}}" class="no-underline">{{end}}
+      {{$author_page.Title}}
+      {{if $profile_url}}</a>{{end}}
+    </div>
+
+    {{ with $author_page.Params.role }}
+    <div class="text-sm font-bold text-neutral-700 dark:text-neutral-300">
+    {{. | markdownify | emojify}}
+    </div>
+    {{end}}
+
+
+    {{ with $author_page.Params.bio }}
+    <div class="text-sm text-neutral-700 dark:text-neutral-300">{{ . | markdownify | emojify }}</div>
     {{ end }}
 
-    <div class="media-body">
-      <h5 class="card-title">{{if $profile_url}}<a href="{{$profile_url}}">{{end}}{{$author_page.Title}}{{if $profile_url}}</a>{{end}}</h5>
-      {{ with $author_page.Params.role }}<h6 class="card-subtitle">{{. | markdownify | emojify}}</h6>{{end}}
-      {{ with $author_page.Params.bio }}<p class="card-text">{{. | markdownify | emojify}}</p>{{end}}
+    <div class="text-2xl sm:text-lg pt-1">
+
       {{ partial "social_links" $author_page }}
+
     </div>
   </div>
-{{end}}{{/* Profile page block */}}
+</div>
+
+{{end}}{{/* End Check for Author Profile */}}
diff --git a/modules/wowchemy-tailwind/layouts/partials/page_footer.html b/modules/wowchemy-tailwind/layouts/partials/page_footer.html
index b5a62e97..0661dd87 100644
--- a/modules/wowchemy-tailwind/layouts/partials/page_footer.html
+++ b/modules/wowchemy-tailwind/layouts/partials/page_footer.html
@@ -1,7 +1,7 @@
 {{ partial "page_edit" . }}
 {{ partial "tags" . }}
 {{/* partial "components/page_sharer" . */}}
-{{/* partial "page_author" . */}}
+{{ partial "page_author" . }}
 {{ partial "comments" . }}
 
 {{ if .Params.pager }}
diff --git a/modules/wowchemy-tailwind/layouts/partials/social_links.html b/modules/wowchemy-tailwind/layouts/partials/social_links.html
index 78de30af..81786e32 100644
--- a/modules/wowchemy-tailwind/layouts/partials/social_links.html
+++ b/modules/wowchemy-tailwind/layouts/partials/social_links.html
@@ -1,22 +1,21 @@
-<ul class="network-icon" aria-hidden="true">
-  {{ range .Params.social }}
-    {{ $pack := or .icon_pack "fas" }}
-    {{ $pack_prefix := $pack }}
-    {{ if in (slice "fab" "fas" "far" "fal") $pack }}
-      {{ $pack_prefix = "fa" }}
-    {{ end }}
+{{ if .Params.social }}
+<div class="flex flex-wrap text-neutral-400 dark:text-neutral-500">
+  {{ range $links := .Params.social }}
     {{ $link := .link }}
     {{ $scheme := (urls.Parse $link).Scheme }}
     {{ $target := "" }}
     {{ if not $scheme }}
       {{ $link = .link | relLangURL }}
     {{ else if in (slice "http" "https") $scheme }}
-      {{ $target = "target=\"_blank\" rel=\"noopener\"" }}
+      {{ $target = "target=\"_blank\" rel=\"noopener\" rel=\"me noopener noreferrer\"" }}
     {{ end }}
-    <li>
-      <a href="{{ $link | safeURL }}" {{ $target | safeHTMLAttr }}>
-        <i class="{{ $pack }} {{ $pack_prefix }}-{{ .icon }}"></i>
-      </a>
-    </li>
-  {{end}}
-</ul>
+    <a
+      class="pr-2 transition-transform hover:scale-125 hover:text-primary-700 dark:hover:text-primary-400"
+      style="will-change:transform;"
+      href="{{ $link | safeURL }}"
+      {{ $target | safeHTMLAttr }}
+      aria-label="{{ .icon | title }}"
+    >{{ partial "functions/get_icon" (dict "name" .icon "attributes" "height=\"1em\"") }}</a>
+  {{ end }}
+</div>
+{{ end }}
diff --git a/modules/wowchemy-tailwind/layouts/partials/views/card.html b/modules/wowchemy-tailwind/layouts/partials/views/card.html
index c4ed55a8..edb1d2d2 100644
--- a/modules/wowchemy-tailwind/layouts/partials/views/card.html
+++ b/modules/wowchemy-tailwind/layouts/partials/views/card.html
@@ -13,8 +13,8 @@
       {{end}}
     </div>
     <div class="p-8">
-      <div class="uppercase tracking-wide text-sm text-indigo-700 dark:text-indigo-200 font-semibold">{{ $item.Title }}</div>
-      <p class="block mt-1 text-md leading-tight font-medium text-black dark:text-white">
+      <div class="uppercase tracking-wide text-md text-indigo-700 dark:text-indigo-200 font-semibold">{{ $item.Title }}</div>
+      <p class="block mt-1 text-sm leading-tight font-medium text-black dark:text-white">
         {{ ($item.Params.summary | default $item.Summary) | plainify | htmlUnescape | chomp -}}
       </p>
       <p class="mt-2 text-gray-500 dark:text-gray-400">