fix: tokenise blogpost (#540)

nuxt-themes · Jul 11, 2021 · 6e33ac4 · 6e33ac4
1 parent 03e2a18
commit 6e33ac4
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 21 deletions.
diff --git a/src/defaultTheme/components/organisms/blog/BlogpostToc.vue b/src/defaultTheme/components/organisms/blog/BlogpostToc.vue
@@ -1,16 +1,7 @@
 <template>
   <div
     v-if="toc.length"
-    class="
-      sticky
-      z-10
-      px-4
-      text-sm
-      border-b border-gray-100 border-dashed
-      top-header
-      dark:border-gray-800
-      d-blur-header d-page-mobile-toc-bg
-    "
+    class="sticky z-10 px-4 text-sm border-dashed top-header d-border-header d-blur-header d-page-mobile-toc-bg"
   >
     <button
       class="
@@ -30,7 +21,7 @@
     >
       <span class="mr-2">{{ title || $t('toc.title') }}</span>
       <IconChevronRight
-        class="w-4 h-4 text-gray-400 transition-transform duration-100 transform"
+        class="w-4 h-4 d-tertiary-text transition-transform duration-100 transform"
         :class="[showMobileToc ? 'rotate-90' : 'rotate-0']"
       />
     </button>
@@ -39,12 +30,10 @@
       <li v-for="link of filteredToc" :key="link.id" @click="showMobileToc = false">
         <a
           :href="`#${link.id}`"
-          class="block py-1 transition-colors duration-100 transform scrollactive-item"
+          class="block py-1 transition-colors duration-100 transform"
           :class="{
-            'text-gray-600 dark:text-gray-300 hover:text-primary-400 dark:hover:text-primary-400':
-              activeHeadings.includes(link.id),
-            'text-gray-400 dark:text-gray-500 hover:text-primary-500 dark:hover:text-primary-400':
-              !activeHeadings.includes(link.id)
+            'd-secondary-text-active hover:d-secondary-text-hover': activeHeadings.includes(link.id),
+            'd-secondary-text hover:d-secondary-text-hover': !activeHeadings.includes(link.id)
           }"
           @click.prevent="scrollToHeading(link.id, '--blogpost-scroll-margin-block')"
           >{{ link.text }}</a

diff --git a/src/defaultTheme/components/templates/BlogPost.vue b/src/defaultTheme/components/templates/BlogPost.vue
@@ -10,7 +10,7 @@
               leading-none
               text-gray-900
               dark:text-gray-100
-              hover:text-gray-500 hover:dark:text-gray-400
+              hover:d-secondary-text
               font-medium
             "
             >← Back</span
@@ -34,25 +34,25 @@
               <ProseCodeInline>date: {{ today }}</ProseCodeInline>
               in the page front-matter`
             </div>
-            <div v-if="page.authors && page.authors.length" class="text-sm text-gray-400 dark:text-gray-700">|</div>
+            <div v-if="page.authors && page.authors.length" class="text-sm d-tertiary-text">|</div>
             <div class="flex ml-4 sm:ml-2">
               <a
                 v-for="(author, index) in page.authors"
                 :key="index"
                 :href="author.link"
                 target="_blank"
                 rel="noopener noindex nofollow"
-                class="flex items-center justify-end -ml-2 sm:ml-0 sm:mr-2"
+                class="flex items-center justify-end -ml-2 sm:ml-0 sm:mr-2 hover:d-secondary-text"
               >
                 <NuxtImg
-                  class="rounded-full border border-gray-300 dark:border-gray-700 inline-block h-8 w-8 sm:mr-1"
+                  class="rounded-full border d-border-tertiary inline-block h-8 w-8 sm:mr-1"
                   height="32"
                   width="32"
                   :src="author.avatarUrl"
                   :alt="author.name"
                   :title="author.name"
                 />
-                <span class="hidden sm:inline-block font-medium text-sm text-gray-800 dark:text-gray-300">
+                <span class="hidden sm:inline-block font-medium text-sm">
                   {{ author.name }}
                 </span>
               </a>

diff --git a/src/defaultTheme/settings.ts b/src/defaultTheme/settings.ts
@@ -40,6 +40,7 @@ const defaultThemeSettings = {
     'd-secondary-text': 'text-gray-500 dark:text-gray-400',
     'd-secondary-text-hover': 'text-primary-500 dark:text-primary-400',
     'd-tertiary-text': 'text-gray-400 dark:text-gray-500',
+    'd-border-tertiary': 'border-gray-400 dark:border-gray-500',
     'd-primary-text-hover': 'text-gray-600 dark:text-gray-400',
     'd-secondary-text-active': 'text-gray-900 dark:text-gray-300',
     'd-prose-code-inline-bg': 'bg-gray-100 dark:bg-gray-800',