feat: refactor logo component; add option for logo+text customization; …

…closes #110
nuxt-themes · Mar 4, 2021 · f987850 · f987850
1 parent 0323052
commit f987850
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 58 deletions.
diff --git a/docs/content/settings.json b/docs/content/settings.json
@@ -11,5 +11,13 @@
   "algolia": {
     "apiKey": "d8bb34f345ca54362176cf78fcf4ed9d",
     "indexName": "docus"
+  },
+  "logo": {
+    "dark": "/logo-dark.svg",
+    "light": "/logo-light.svg"
+  },
+  "header": {
+    "logo": true,
+    "title": true
   }
 }
diff --git a/theme/components/atoms/Logo.vue b/theme/components/atoms/Logo.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="flex items-center flex-none lg:w-60 xl:w-72">
+    <NuxtLink
+      :to="localePath('/')"
+      class="w-auto overflow-hidden"
+      :aria-label="settings.title"
+    >
+      <template v-if="settings.header.title && !settings.header.logo">
+        <span class="text-2xl font-semibold text-gray-900 dark:text-gray-100">
+          {{ settings.title }}
+        </span>
+      </template>
+
+      <template v-if="settings.header.title && settings.header.logo">
+        <div class="flex items-center">
+          <span class="mr-4">
+            <img
+              :src="logo.light"
+              class="w-auto h-8 light-img"
+              :alt="settings.title"
+            />
+            <img
+              :src="logo.dark"
+              class="w-auto h-8 dark-img"
+              :alt="settings.title"
+            />
+          </span>
+          <span class="text-2xl font-semibold text-gray-900 dark:text-gray-100">
+            {{ settings.title }}
+          </span>
+        </div>
+      </template>
+
+      <template v-if="!settings.header.title && settings.header.logo">
+        <span>
+          <img
+            :src="logo.light"
+            class="w-auto h-8 light-img"
+            :alt="settings.title"
+          />
+          <img
+            :src="logo.dark"
+            class="w-auto h-8 dark-img"
+            :alt="settings.title"
+          />
+        </span>
+      </template>
+    </NuxtLink>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    settings: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    logo() {
+      if (!this.settings.logo) {
+        return;
+      }
+      if (typeof this.settings.logo === "object") {
+        return this.settings.logo;
+      }
+      return {
+        light: this.settings.logo,
+        dark: this.settings.logo
+      };
+    }
+  }
+};
+</script>
diff --git a/theme/components/templates/Header.vue b/theme/components/templates/Header.vue
@@ -1,40 +1,29 @@
 <template>
-  <div class="sticky top-0 z-40 w-full px-4 border-b border-gray-100 lg:z-50 app-header dark:border-gray-800" @click="scrollToTop">
+  <div
+    class="sticky top-0 z-40 w-full px-4 border-b border-gray-100 lg:z-50 app-header dark:border-gray-800"
+    @click="scrollToTop"
+  >
     <div class="flex flex-none mx-auto max-w-8xl">
+      <Logo :settings="settings" />
 
-      <div 
-        class="flex items-center flex-none lg:w-60 xl:w-72"
-      >
-        <NuxtLink
-          :to="localePath('/')"
-          class="w-auto overflow-hidden"
-          :aria-label="settings.title"
-        >
-          <span v-if="logo" class="sr-only">{{ settings.title }}</span>
-          <span v-if="!logo" class="text-2xl font-bold text-gray-900 dark:text-gray-100">{{ settings.title }}</span>
-
-          <img
-            v-if="logo"
-            :src="logo.light"
-            class="w-auto h-8 light-img"
-            :alt="settings.title"
-          />
-          <img v-if="logo" :src="logo.dark" class="w-auto h-8 dark-img" :alt="settings.title" />
-        </NuxtLink>
-      </div>
-
-      <div
-        class="flex items-center justify-end flex-auto h-18 "
-      >
-        <AlgoliaSearchBox v-if="settings.algolia" :options="settings.algolia" :settings="settings" class="md:flex-1 md:px-4 lg:px-2"/>
+      <div class="flex items-center justify-end flex-auto h-18 ">
+        <AlgoliaSearchBox
+          v-if="settings.algolia"
+          :options="settings.algolia"
+          :settings="settings"
+          class="md:flex-1 md:px-4 lg:px-2"
+        />
 
-        <div class="flex items-center justify-end space-x-2 md:space-x-4 xl:w-64">
+        <div
+          class="flex items-center justify-end space-x-2 md:space-x-4 xl:w-64"
+        >
           <NuxtLink
             v-if="lastRelease"
             :to="localePath('/releases')"
             class="hidden font-medium text-gray-400 transition-colors duration-200 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 lg:block"
             exact-active-class="text-primary-500 dark:text-primary-400"
-          >{{ lastRelease.name }}</NuxtLink>
+            >{{ lastRelease.name }}</NuxtLink
+          >
 
           <LangSwitcher />
 
@@ -65,7 +54,6 @@
           </a>
         </div>
       </div>
-
     </div>
   </div>
 </template>
@@ -79,50 +67,36 @@ export default {
     }
   },
   computed: {
-    settings () {
-      return this.$docus.settings
+    settings() {
+      return this.$docus.settings;
     },
-    lastRelease () {
-      return this.$docus.lastRelease
+    lastRelease() {
+      return this.$docus.lastRelease;
     },
     menu: {
-      get () {
-        return this.$menu.open
+      get() {
+        return this.$menu.open;
       },
-      set (val) {
-        this.$menu.open = val
-      }
-    },
-    logo () {
-      if (!this.settings.logo) {
-        return
-      }
-
-      if (typeof this.settings.logo === 'object') {
-        return this.settings.logo
-      }
-
-      return {
-        light: this.settings.logo,
-        dark: this.settings.logo
+      set(val) {
+        this.$menu.open = val;
       }
     }
   },
   methods: {
-    scrollToTop () {
+    scrollToTop() {
       if (window.innerWidth >= 1280) {
-        return
+        return;
       }
-      window.scrollTo(0, 0)
+      window.scrollTo(0, 0);
     }
   }
-}
+};
 </script>
 
 <style lang="postcss">
 .app-header {
   backdrop-filter: blur(12px);
-  background-color: hsla(0,0%,100%,.9);
+  background-color: hsla(0, 0%, 100%, 0.9);
 }
 
 .dark {

diff --git a/theme/plugins/docus.js b/theme/plugins/docus.js
@@ -68,9 +68,13 @@ export default async function ({ app, ssrContext, $content, $config, nuxtState =
             dir: '',
             releases: true
           },
-          colors: DEFAULT_THEME_COLORS
+          colors: DEFAULT_THEME_COLORS,
+          header: {
+            logo: false,
+            title: true
+          }
         }
-        const { path, extension, ...settings } = await $content('settings').only(['title', 'url', 'logo', 'layout', 'twitter', 'github', 'algolia', 'colors']).fetch().catch((e) => {
+        const { path, extension, ...settings } = await $content('settings').only(['title', 'url', 'logo', 'layout', 'twitter', 'github', 'algolia', 'colors', 'header']).fetch().catch((e) => {
           // eslint-disable-next-line no-console
           console.warn('Please add a `settings.json` file inside the `content/` folder to customize this theme.')
         })