feat(theme): improve PageMeta

vuepress-theme-hope · Jun 5, 2022 · 7955546 · 7955546
1 parent b090d01
commit 7955546
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 39 deletions.
diff --git a/packages/theme/components/PageMeta.ts → packages/theme/components/Info/PageMeta.ts b/packages/theme/components/PageMeta.ts → packages/theme/components/Info/PageMeta.ts
@@ -1,3 +1,4 @@
+// TODO: Improve script and deprecate options
 import Vue from "vue";
 import EditIcon from "@theme/icons/EditIcon.vue";
 import { endingSlashRE, outboundRE } from "@theme/utils/path";
@@ -47,14 +48,17 @@ export default Vue.extend({
 
     editLink(): string | false {
       const showEditLink =
-        this.$page.frontmatter.editLink ||
-        (this.$themeConfig.editLinks !== false &&
-          this.$page.frontmatter.editLink !== false);
+        this.$page.frontmatter.editLink === false
+          ? false
+          : !(
+              this.$themeConfig.editLinks === false &&
+              !this.$page.frontmatter.editLink
+            );
 
-      const { repo, docsRepo } = this.$themeConfig;
+      const { repo, docsRepo = repo } = this.$themeConfig;
 
-      if (showEditLink && (repo || docsRepo) && this.$page.relativePath)
-        return this.createEditLink();
+      if (showEditLink && docsRepo && this.$page.relativePath)
+        return this.createEditLink(docsRepo);
 
       return false;
     },
@@ -65,13 +69,8 @@ export default Vue.extend({
   },
 
   methods: {
-    createEditLink(): string {
-      const {
-        repo = "",
-        docsRepo = repo,
-        docsDir = "",
-        docsBranch = "main",
-      } = this.$themeConfig;
+    createEditLink(docsRepo: string): string {
+      const { docsDir = "", docsBranch = "main" } = this.$themeConfig;
 
       const bitbucket = /bitbucket.org/u;
 

diff --git a/packages/theme/components/PageMeta.vue → packages/theme/components/Info/PageMeta.vue b/packages/theme/components/PageMeta.vue → packages/theme/components/Info/PageMeta.vue
@@ -1,6 +1,6 @@
 <template>
   <footer class="page-meta">
-    <div v-if="editLink" class="edit-link">
+    <div v-if="editLink" class="meta-item edit-link">
       <EditIcon />
       <a :href="editLink" target="_blank" rel="noopener noreferrer">{{
         editLinkText
@@ -18,16 +18,12 @@
     >
       <span class="label">{{ contributorsText }}: </span>
       <span class="info">
-        <template v-for="(contributor, index) in contributors">
+        <template v-for="(contributor, index) in contributors" :key="index">
           <!-- eslint-disable vue/no-v-for-template-key-on-child -->
-          <span
-            :key="index"
-            class="contributor"
-            :title="`email: ${contributor.email}`"
-          >
+          <span class="contributor" :title="`email: ${contributor.email}`">
             {{ contributor.name }}
           </span>
-          <template v-if="index !== contributors.length - 1">, </template>
+          {{ index !== contributors.length - 1 ? ", " : "" }}
         </template>
       </span>
     </div>
@@ -40,42 +36,44 @@
 @require '~vuepress-shared/styles/wrapper';
 
 .page-meta {
-  wrapper();
-  padding-top: 12px;
-  padding-bottom: 12px;
-  font-family: Arial, Helvetica, sans-serif;
+  horizontal-wrapper();
   overflow: auto;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
 
   .meta-item {
+    margin-top: 0.5rem;
+
     .label {
       font-weight: 500;
-      color: var(--text-color-lighter);
+
+      &:not(a) {
+        color: var(--text-color-lighter);
+      }
     }
 
     .info {
-      font-weight: 400;
       color: var(--dark-grey);
+      font-weight: 400;
     }
   }
 
   .edit-link {
     display: inline-block;
+    margin-right: 0.25rem;
     font-size: 14px;
 
+    @media (max-width: $MQMobile) {
+      margin-bottom: 8px;
+    }
+
     .icon {
       position: relative;
       bottom: -0.125em;
+
       width: 1em;
       height: 1em;
-      color: var(--accent-color);
-    }
-
-    @media (max-width: $MQMobile) {
-      margin-bottom: 8px;
-    }
-
-    a {
-      color: var(--accent-color-light);
+      margin-right: 0.25em;
     }
   }
 
@@ -88,6 +86,10 @@
       font-size: 13px;
       text-align: left;
     }
+
+    &:first-child {
+      float: left;
+    }
   }
 
   .contributors {

diff --git a/packages/theme/components/Page.ts b/packages/theme/components/Page.ts
@@ -1,9 +1,9 @@
 import Anchor from "@theme/components/Anchor.vue";
 import MyTransition from "@theme/components/MyTransition.vue";
 import PageInfo from "@mr-hope/vuepress-plugin-components/lib/client/PageInfo.vue";
-import PageMeta from "@theme/components/PageMeta.vue";
 import PageNav from "@theme/components/PageNav.vue";
 import Password from "@theme/components/Password.vue";
+import PageMeta from "@theme/components/Info/PageMeta.vue";
 import { pathEncryptMixin } from "@theme/mixins/pathEncrypt";
 
 import type { PageInfoProps } from "@mr-hope/vuepress-plugin-components";

diff --git a/packages/theme/components/PageNav.ts b/packages/theme/components/PageNav.ts
@@ -1,3 +1,4 @@
+// TODO: Support locales
 import Vue from "vue";
 import AutoLink from "@theme/components/AutoLink";
 import {

diff --git a/packages/theme/components/PageNav.vue b/packages/theme/components/PageNav.vue
@@ -7,7 +7,7 @@
       </div>
     </AutoLink>
     <AutoLink v-if="nextNavLink" class="next" :config="nextNavLink">
-      <div class="hint"><span class="arrow right" />Next</div>
+      <div class="hint">Next<span class="arrow right" /></div>
       <div class="link">
         {{ nextNavLink.text }}<FontIcon :icon="nextNavLink.icon" />
       </div>

diff --git a/packages/theme/icons/EditIcon.vue b/packages/theme/icons/EditIcon.vue
@@ -5,7 +5,11 @@
     xmlns="http://www.w3.org/2000/svg"
   >
     <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"
+      d="M430.818 653.65a60.46 60.46 0 0 1-50.96-93.281l71.69-114.012 7.773-10.365L816.038 80.138A60.46 60.46 0 0 1 859.225 62a60.46 60.46 0 0 1 43.186 18.138l43.186 43.186a60.46 60.46 0 0 1 0 86.373L588.879 565.55l-8.637 8.637-117.466 68.234a60.46 60.46 0 0 1-31.958 11.229z"
+      fill="currentColor"
+    />
+    <path
+      d="M728.802 962H252.891A190.883 190.883 0 0 1 62.008 771.98V296.934a190.883 190.883 0 0 1 190.883-192.61h267.754a60.46 60.46 0 0 1 0 120.92H252.891a69.962 69.962 0 0 0-69.098 69.099V771.98a69.962 69.962 0 0 0 69.098 69.098h475.911A69.962 69.962 0 0 0 797.9 771.98V503.363a60.46 60.46 0 1 1 120.922 0V771.98A190.883 190.883 0 0 1 728.802 962z"
       fill="currentColor"
     />
   </svg>