feat(theme): update PageMeta

vuepress-theme-hope · Jun 7, 2021 · 307c8be · 307c8be
1 parent add06ce
commit 307c8be
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 36 deletions.
diff --git a/packages/theme/src/client/components/PageMeta.vue b/packages/theme/src/client/components/PageMeta.vue
@@ -1,20 +1,24 @@
 <template>
   <footer class="page-meta">
     <div v-if="editNavLink" class="meta-item edit-link">
-      <NavLink class="meta-item-label" :item="editNavLink" />
+      <NavLink class="label" :item="editNavLink">
+        <template #before>
+          <EditIcon />
+        </template>
+      </NavLink>
     </div>
 
-    <div v-if="lastUpdated" class="meta-item last-updated">
-      <span class="meta-item-label">{{ themeLocale.lastUpdatedText }}: </span>
-      <span class="meta-item-info">{{ lastUpdated }}</span>
+    <div v-if="updateTime" class="meta-item update-time">
+      <span class="label">{{ themeLocale.lastUpdatedText }}: </span>
+      <span class="info">{{ updateTime }}</span>
     </div>
 
     <div
       v-if="contributors && contributors.length"
       class="meta-item contributors"
     >
-      <span class="meta-item-label">{{ themeLocale.contributorsText }}: </span>
-      <span class="meta-item-info">
+      <span class="label">{{ themeLocale.contributorsText }}: </span>
+      <span class="info">
         <template v-for="(contributor, index) in contributors" :key="index">
           <span class="contributor" :title="`email: ${contributor.email}`">
             {{ contributor.name }}
@@ -34,19 +38,21 @@ import {
   usePageFrontmatter,
   useSiteLocaleData,
 } from "@vuepress/client";
-import type {
-  DefaultThemePageData,
-  DefaultThemeNormalPageFrontmatter,
-  NavLink as NavLinkType,
-} from "../../shared";
 import { useThemeLocaleData } from "../composables";
 import { resolveEditLink } from "../utils";
 import NavLink from "./NavLink.vue";
+import { EditIcon } from "./icons";
+
+import type {
+  HopeThemePageData,
+  HopeThemeNormalPageFrontmatter,
+  NavLink as NavLinkType,
+} from "../../shared";
 
 const useEditNavLink = (): ComputedRef<null | NavLinkType> => {
   const themeLocale = useThemeLocaleData();
-  const page = usePageData<DefaultThemePageData>();
-  const frontmatter = usePageFrontmatter<DefaultThemeNormalPageFrontmatter>();
+  const page = usePageData<HopeThemePageData>();
+  const frontmatter = usePageFrontmatter<HopeThemeNormalPageFrontmatter>();
 
   return computed(() => {
     const showEditLink =
@@ -82,11 +88,11 @@ const useEditNavLink = (): ComputedRef<null | NavLinkType> => {
   });
 };
 
-const useLastUpdated = (): ComputedRef<null | string> => {
+const useUpdateTime = (): ComputedRef<null | string> => {
   const siteLocale = useSiteLocaleData();
   const themeLocale = useThemeLocaleData();
-  const page = usePageData<DefaultThemePageData>();
-  const frontmatter = usePageFrontmatter<DefaultThemeNormalPageFrontmatter>();
+  const page = usePageData<HopeThemePageData>();
+  const frontmatter = usePageFrontmatter<HopeThemeNormalPageFrontmatter>();
 
   return computed(() => {
     const showLastUpdated =
@@ -103,11 +109,11 @@ const useLastUpdated = (): ComputedRef<null | string> => {
 };
 
 const useContributors = (): ComputedRef<
-  null | Required<DefaultThemePageData["git"]>["contributors"]
+  null | Required<HopeThemePageData["git"]>["contributors"]
 > => {
   const themeLocale = useThemeLocaleData();
-  const page = usePageData<DefaultThemePageData>();
-  const frontmatter = usePageFrontmatter<DefaultThemeNormalPageFrontmatter>();
+  const page = usePageData<HopeThemePageData>();
+  const frontmatter = usePageFrontmatter<HopeThemeNormalPageFrontmatter>();
 
   return computed(() => {
     const showContributors =
@@ -123,19 +129,20 @@ export default defineComponent({
   name: "PageMeta",
 
   components: {
+    EditIcon,
     NavLink,
   },
 
   setup() {
     const themeLocale = useThemeLocaleData();
     const editNavLink = useEditNavLink();
-    const lastUpdated = useLastUpdated();
+    const updateTime = useUpdateTime();
     const contributors = useContributors();
 
     return {
       themeLocale,
       editNavLink,
-      lastUpdated,
+      updateTime,
       contributors,
     };
   },

diff --git a/packages/theme/src/client/components/icons.ts b/packages/theme/src/client/components/icons.ts
@@ -0,0 +1,18 @@
+import { IconBase } from "@mr-hope/vuepress-shared/client";
+import { h } from "vue";
+import type { FunctionalComponent } from "vue";
+
+export const EditIcon: FunctionalComponent = () =>
+  h(
+    IconBase,
+    { name: "edit" },
+    {
+      default: () =>
+        h("path", {
+          d: "M117.953 696.992 64.306 959.696l265.931-49.336 450.204-452.505-212.284-213.376-450.204 452.513zm496.384-296.326L219.039 797.993l-46.108-46.34L568.233 354.33l46.104 46.335zm345.357-122.99-114.45 115.04-212.288-213.377 114.45-115.035 212.288 213.371zm0 0",
+          fill: "currentColor",
+        }),
+    }
+  );
+
+EditIcon.displayName = "EditIcon";
diff --git a/packages/theme/src/client/styles/page.scss b/packages/theme/src/client/styles/page.scss
@@ -1,3 +1,4 @@
+@use '@mr-hope/vuepress-shared/styles/wrapper';
 @import "_variables";
 @import "_wrapper";
 
@@ -8,44 +9,62 @@
 
 .page-meta {
   @extend %wrapper;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  font-family: Arial, Helvetica, sans-serif;
   overflow: auto;
 
   .meta-item {
     cursor: default;
     margin-top: 0.8rem;
 
-    .meta-item-label {
+    .label {
       font-weight: 500;
-      color: var(--c-text-lighter);
+      color: var(--text-color-l25);
     }
 
-    .meta-item-info {
+    .info {
       font-weight: 400;
-      color: var(--c-text-quote);
+      color: var(--dark-grey);
     }
   }
 
   .edit-link {
     display: inline-block;
+    font-size: 14px;
     margin-right: 0.25rem;
+
+    .icon {
+      position: relative;
+      bottom: -0.125em;
+      width: 1em;
+      height: 1em;
+    }
+
+    @media (max-width: $MQMobile) {
+      margin-bottom: 8px;
+    }
   }
 
-  .last-updated {
+  .update-time {
     float: right;
-  }
-}
 
-@media (max-width: $MQMobile) {
-  .page-meta {
-    .last-updated {
-      font-size: 0.8em;
+    font-size: 14px;
+
+    @media (max-width: $MQMobile) {
       float: none;
+      font-size: 13px;
+      text-align: left;
     }
+  }
+
+  .contributors {
+    font-size: 14px;
+    text-align: right;
 
-    .contributors {
-      font-size: 0.8em;
+    @media (max-width: $MQMobile) {
+      font-size: 13px;
+      text-align: left;
     }
   }
 }