From 22faff3997a963840b7ed8b44c018899c296b0c5 Mon Sep 17 00:00:00 2001
From: ElijahPepe <business@elijahpepe.com>
Date: Mon, 7 Mar 2022 09:37:06 -0700
Subject: [PATCH] Tweak the design of the navbar and footer

---
 lib/client/components/Navbar.vue             |  4 +--
 lib/client/components/PageMeta.vue           | 29 ++++++++++----------
 lib/client/styles/page.scss                  | 22 ++++++++++++---
 lib/node/utils/assignDefaultLocaleOptions.js |  4 +--
 package.json                                 |  2 ++
 5 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/lib/client/components/Navbar.vue b/lib/client/components/Navbar.vue
index 63f3eec..b436669 100644
--- a/lib/client/components/Navbar.vue
+++ b/lib/client/components/Navbar.vue
@@ -24,6 +24,8 @@
       </RouterLink>
     </span>
 
+    <NavbarSearch />
+
     <div class="navbar-links-wrapper" :style="linksWrapperStyle">
       <slot name="before" />
 
@@ -32,8 +34,6 @@
       <slot name="after" />
 
       <ToggleDarkModeButton v-if="enableDarkMode" />
-
-      <NavbarSearch />
     </div>
   </header>
 </template>
diff --git a/lib/client/components/PageMeta.vue b/lib/client/components/PageMeta.vue
index cefd55c..fb0fac7 100644
--- a/lib/client/components/PageMeta.vue
+++ b/lib/client/components/PageMeta.vue
@@ -4,26 +4,25 @@
       <NavLink class="meta-item-label" :item="editNavLink" />
     </div>
 
-    <div v-if="lastUpdated" class="meta-item last-updated">
-      <span class="meta-item-label">{{ themeLocale.lastUpdatedText }}: </span>
-      <ClientOnly>
-        <span class="meta-item-info">{{ lastUpdated }}</span>
-      </ClientOnly>
-    </div>
     <div v-if="contributors && contributors.length" class="meta-item contributors">
-      <span class="meta-item-label">{{ themeLocale.contributorsText }}: </span>
+      <span class="meta-item-label">{{ contributors.length }} {{ pluralize('themeLocale.contributorsText', contributors.length)} }} </span>
       <span class="meta-item-info">
         <template v-for="(contributor, index) in contributors" :key="index">
-          <span v-if="contributor.email" class="contributor" :title="`email: ${contributor.email}`">
-            {{ contributor.name }}
-          </span>
-          <span v-if="!contributor.email" class="contributor">
-            {{ contributor.name }}
-          </span>
+          <a class="contributor-link" :href="`https://github.com/${contributor.name}`">
+            <span :aria-label="`${contributor.name}`">
+              <img :src="`https://github.com/${contributor.name}.png?size=40`" :alt="`${contributor.name}`" size="20" :title="`${contributor.name}`" width="20" height="20">
+            </span>
+          </a>
           <template v-if="index !== contributors.length - 1">, </template>
         </template>
       </span>
     </div>
+
+    <div v-if="lastUpdated" class="meta-item last-updated">
+      <ClientOnly>
+        <span class="meta-item-info">{{ themeLocale.lastUpdatedText }} by {{ contributors[0] || {} }} on {{ format(new Date(lastUpdated), 'MMMM d, y') }}</span>
+      </ClientOnly>
+    </div>
   </footer>
 </template>
 
@@ -43,6 +42,8 @@ import type {
 import { useThemeLocaleData } from '../composables'
 import { resolveEditLink } from '../utils'
 import NavLink from './NavLink.vue'
+import pluralize from 'pluralize'
+import {format} from 'date-fns'
 
 const useEditNavLink = (): ComputedRef<null | NavLinkType> => {
   const themeLocale = useThemeLocaleData()
@@ -77,7 +78,7 @@ const useEditNavLink = (): ComputedRef<null | NavLinkType> => {
     if (!editLink) return null
 
     return {
-      text: editLinkText ?? 'Edit this page',
+      text: 'Edit this page on GitHub',
       link: editLink,
     }
   })
diff --git a/lib/client/styles/page.scss b/lib/client/styles/page.scss
index 45fd942..f94d611 100644
--- a/lib/client/styles/page.scss
+++ b/lib/client/styles/page.scss
@@ -18,12 +18,16 @@
 
     .meta-item-label {
       font-weight: 500;
-      color: var(--c-text-lighter);
+      color: var(--c-text-accent);
     }
 
     .meta-item-info {
       font-weight: 400;
-      color: var(--c-text-quote);
+      color: var(--c-text);
+    }
+
+    .icon.outbound {
+      color: var(--c-text-accent);
     }
   }
 
@@ -32,8 +36,18 @@
     margin-right: 0.25rem;
   }
 
-  .last-updated {
-    float: right;
+  .last-updated .meta-item-info {
+    color: var(--c-text-quote);
+    font-size: 14px;
+    margin-top: 4px;
+  }
+
+  .contributor-link {
+    display: inline-block;
+    overflow: hidden;
+    line-height: 1;
+    vertical-align: middle;
+    border-radius: 50%;
   }
 }
 
diff --git a/lib/node/utils/assignDefaultLocaleOptions.js b/lib/node/utils/assignDefaultLocaleOptions.js
index 4d0e4db..0e233ea 100644
--- a/lib/node/utils/assignDefaultLocaleOptions.js
+++ b/lib/node/utils/assignDefaultLocaleOptions.js
@@ -16,9 +16,9 @@ const defaultLocaleOptions = {
     editLink: true,
     editLinkText: 'Edit this page',
     lastUpdated: true,
-    lastUpdatedText: 'Last Updated',
+    lastUpdatedText: 'Last updated',
     contributors: true,
-    contributorsText: 'Contributors',
+    contributorsText: 'contributors',
     // 404 page messages
     notFound: [
         `There's nothing here.`,
diff --git a/package.json b/package.json
index aab4b80..f1e83f0 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,8 @@
     "@vuepress/shared": "2.0.0-beta.25",
     "@vuepress/utils": "2.0.0-beta.25",
     "@vueuse/core": "^6.0.0",
+    "date-fns": "^2.28.0",
+    "pluralize": "^8.0.0",
     "sass": "^1.38.0",
     "sass-loader": "^12.1.0",
     "vue": "^3.2.3",