feat: inline SVG logo on production (#528)

* feat: inline svg icon on production * fix: import * chore: cleanup * feat: improve logo management, add default Logo component and shortcuts * chore: remove @nuxtjs/svg * chore: simplify markup Co-authored-by: Sébastien Chopin <[email protected]>
nuxt-themes · Jul 1, 2021 · 9623495 · 9623495
1 parent cf1e653
commit 9623495
Show file tree

Hide file tree

Showing 9 changed files with 85 additions and 83 deletions.
diff --git a/docs/components/Logo.vue b/docs/components/Logo.vue
@@ -0,0 +1,26 @@
+<template>
+  <svg width="707" height="169" viewBox="0 0 707 169" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M196.387 36.674h45.549c10.55 0 19.907 1.972 28.072 5.917s14.495 9.54 18.99 16.788c4.495 7.248 6.743 15.734 6.743 25.458 0 9.724-2.248 18.21-6.743 25.458-4.495 7.247-10.825 12.843-18.99 16.788-8.165 3.945-17.522 5.917-28.072 5.917h-45.549V36.674zm44.448 74.584c8.257 0 14.862-2.34 19.816-7.018 5.045-4.679 7.568-11.146 7.568-19.403 0-8.257-2.523-14.724-7.568-19.403-4.954-4.679-11.559-7.018-19.816-7.018h-17.201v52.842h17.201zm105.432 22.98c-7.981 0-15.183-1.651-21.605-4.953-6.421-3.303-11.467-7.89-15.136-13.761-3.578-5.872-5.367-12.523-5.367-19.954 0-7.339 1.789-13.944 5.367-19.815 3.669-5.871 8.669-10.413 14.999-13.623 6.422-3.303 13.669-4.954 21.742-4.954s15.321 1.65 21.742 4.954c6.422 3.21 11.422 7.752 15 13.623 3.577 5.78 5.366 12.385 5.366 19.815 0 7.431-1.789 14.082-5.366 19.954-3.578 5.871-8.578 10.458-15 13.761-6.421 3.302-13.669 4.953-21.742 4.953zm0-20.778c4.587 0 8.348-1.56 11.284-4.679 2.936-3.211 4.403-7.614 4.403-13.21 0-5.505-1.467-9.817-4.403-12.936-2.936-3.119-6.697-4.678-11.284-4.678-4.587 0-8.348 1.56-11.284 4.678-2.936 3.12-4.403 7.431-4.403 12.935 0 5.597 1.467 10 4.403 13.211 2.936 3.119 6.697 4.679 11.284 4.679zm92.338 20.778c-8.257 0-15.642-1.651-22.155-4.953-6.514-3.303-11.605-7.89-15.275-13.761-3.578-5.872-5.367-12.523-5.367-19.954 0-7.43 1.789-14.036 5.367-19.815 3.67-5.871 8.761-10.413 15.275-13.623 6.513-3.303 13.898-4.954 22.155-4.954 8.44 0 15.733 1.834 21.879 5.504 6.147 3.578 10.505 8.578 13.073 15l-20.228 10.32c-3.395-6.697-8.348-10.045-14.862-10.045-4.679 0-8.578 1.56-11.697 4.678-3.027 3.12-4.541 7.431-4.541 12.935 0 5.597 1.514 10 4.541 13.211 3.119 3.119 7.018 4.679 11.697 4.679 6.514 0 11.467-3.349 14.862-10.046l20.228 10.321c-2.568 6.422-6.926 11.467-13.073 15.137-6.146 3.578-13.439 5.366-21.879 5.366zm123.234-75.822V133h-24.907v-7.981c-2.753 3.027-6.055 5.321-9.908 6.88-3.853 1.56-7.936 2.339-12.248 2.339-9.632 0-17.338-2.843-23.118-8.531-5.688-5.688-8.532-14.22-8.532-25.595V58.416h26.146v37.43c0 5.596 1.055 9.678 3.165 12.247 2.11 2.569 5.183 3.853 9.22 3.853 4.128 0 7.477-1.422 10.045-4.266 2.661-2.936 3.991-7.385 3.991-13.348V58.416h26.146zm43.95 75.822a82.948 82.948 0 01-18.44-2.064c-6.055-1.467-10.917-3.348-14.587-5.642l7.844-17.889c3.394 2.11 7.431 3.807 12.11 5.092 4.678 1.192 9.311 1.789 13.898 1.789 4.22 0 7.202-.413 8.945-1.239 1.835-.917 2.752-2.202 2.752-3.853 0-1.651-1.101-2.798-3.303-3.44-2.11-.734-5.504-1.422-10.183-2.064-5.963-.734-11.054-1.697-15.274-2.89-4.129-1.193-7.706-3.394-10.734-6.605-3.027-3.211-4.541-7.706-4.541-13.486 0-4.77 1.422-8.99 4.266-12.66 2.844-3.761 6.972-6.697 12.385-8.807 5.504-2.201 12.063-3.302 19.678-3.302 5.412 0 10.779.55 16.1 1.65 5.321 1.102 9.77 2.661 13.348 4.68l-7.844 17.751c-6.605-3.67-13.76-5.504-21.467-5.504-4.128 0-7.155.504-9.082 1.514-1.926.917-2.89 2.155-2.89 3.715 0 1.743 1.055 2.981 3.165 3.715 2.11.642 5.597 1.33 10.459 2.064 6.146.918 11.238 1.973 15.274 3.165 4.037 1.193 7.523 3.395 10.459 6.606 3.027 3.119 4.541 7.522 4.541 13.21 0 4.679-1.422 8.899-4.266 12.66-2.844 3.67-7.064 6.559-12.66 8.669-5.505 2.11-12.156 3.165-19.953 3.165zm58.583-.275c-3.119 0-5.78-1.055-7.982-3.165-2.201-2.201-3.302-4.954-3.302-8.256 0-3.395 1.055-6.147 3.165-8.257 2.202-2.11 4.908-3.165 8.119-3.165 3.211 0 5.871 1.055 7.981 3.165 2.202 2.11 3.303 4.862 3.303 8.257 0 3.302-1.101 6.055-3.303 8.256-2.202 2.11-4.862 3.165-7.981 3.165z"
+      fill="currentColor"
+    />
+    <mask id="a" fill="#fff">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M0 73.719C0 33.005 33.005 0 73.719 0c40.714 0 73.719 33.005 73.719 73.719 0 40.714-33.005 73.719-73.719 73.719H0V73.719zm65.749-15.94c8.803 0 15.94 7.137 15.94 15.94s-7.137 15.939-15.94 15.939-15.94-7.136-15.94-15.94c0-8.802 7.137-15.939 15.94-15.939zm63.758 15.94c0-8.803-7.137-15.94-15.94-15.94-8.802 0-15.939 7.137-15.939 15.94s7.137 15.939 15.939 15.939c8.803 0 15.94-7.136 15.94-15.94z"
+      />
+    </mask>
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M0 73.719C0 33.005 33.005 0 73.719 0c40.714 0 73.719 33.005 73.719 73.719 0 40.714-33.005 73.719-73.719 73.719H0V73.719zm65.749-15.94c8.803 0 15.94 7.137 15.94 15.94s-7.137 15.939-15.94 15.939-15.94-7.136-15.94-15.94c0-8.802 7.137-15.939 15.94-15.939zm63.758 15.94c0-8.803-7.137-15.94-15.94-15.94-8.802 0-15.939 7.137-15.939 15.94s7.137 15.939 15.939 15.939c8.803 0 15.94-7.136 15.94-15.94z"
+      fill="currentColor"
+    />
+    <path
+      d="M0 147.438h-.527v.526H0v-.526zM73.719-.527C32.714-.527-.527 32.714-.527 73.72H.527C.527 33.296 33.296.527 73.719.527V-.527zm74.245 74.246c0-41.005-33.24-74.246-74.245-74.246V.527c40.423 0 73.192 32.769 73.192 73.192h1.053zm-74.245 74.245c41.005 0 74.245-33.24 74.245-74.245h-1.053c0 40.423-32.769 73.192-73.192 73.192v1.053zm-73.719 0h73.719v-1.053H0v1.053zm-.527-74.245v73.719H.527V73.719H-.527zm82.742 0c0-9.094-7.372-16.466-16.466-16.466v1.053c8.512 0 15.413 6.9 15.413 15.413h1.053zM65.749 90.184c9.094 0 16.466-7.372 16.466-16.465h-1.053c0 8.512-6.9 15.412-15.413 15.412v1.053zM49.283 73.72c0 9.093 7.372 16.465 16.466 16.465v-1.053c-8.512 0-15.413-6.9-15.413-15.412h-1.053zM65.75 57.253c-9.094 0-16.466 7.372-16.466 16.466h1.053c0-8.513 6.9-15.413 15.413-15.413v-1.053zm47.818 1.053c8.513 0 15.413 6.9 15.413 15.413h1.053c0-9.094-7.372-16.466-16.466-16.466v1.053zM98.155 73.719c0-8.513 6.9-15.413 15.412-15.413v-1.053c-9.093 0-16.465 7.372-16.465 16.466h1.053zm15.412 15.412c-8.512 0-15.412-6.9-15.412-15.412h-1.053c0 9.093 7.372 16.465 16.465 16.465v-1.053zM128.98 73.72c0 8.512-6.9 15.412-15.413 15.412v1.053c9.094 0 16.466-7.372 16.466-16.465h-1.053z"
+      fill="#000"
+      mask="url(#a)"
+    />
+  </svg>
+</template>
diff --git a/docs/docus.config.ts b/docs/docus.config.ts
@@ -14,10 +14,7 @@ export default {
   theme: {
     header: {
       title: false,
-      logo: {
-        light: '/logo-light.svg',
-        dark: '/logo-dark.svg'
-      }
+      logo: true
     }
   }
 }
diff --git a/docs/static/logo-dark.svg b/docs/static/logo-dark.svg
diff --git a/docs/static/logo-light.svg b/docs/static/logo-light.svg
diff --git a/src/defaultTheme/components/atoms/HeaderLogo.vue b/src/defaultTheme/components/atoms/HeaderLogo.vue
@@ -1,57 +1,37 @@
 <template>
-  <div class="flex items-center">
-    <template v-if="theme.header.title && !theme.header.logo">
-      <span class="text-2xl font-bold tracking-tighter text-gray-900 dark:text-gray-100">
+  <NuxtLink :to="localePath('/')" class="d-header-logo" :aria-label="settings.title">
+    <!-- Only title -->
+    <span v-if="!hasLogo && hasTitle" class="d-header-title">
+      {{ settings.title }}
+    </span>
+    <!-- Title and Logo -->
+    <template v-else-if="hasLogo && hasTitle">
+      <Logo class="d-logo" />
+      <span class="d-header-title-logo">
         {{ settings.title }}
       </span>
     </template>
-
-    <template v-if="theme.header.title && theme.header.logo">
-      <div class="flex items-center">
-        <span class="mr-4">
-          <img :src="logo.light" class="w-auto h-6 md:h-8 dark:hidden" :alt="settings.title" />
-          <img :src="logo.dark" class="w-auto h-6 md:h-8 light:hidden" :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="!theme.header.title && theme.header.logo">
-      <span>
-        <img :src="logo.light" class="w-auto h-6 md:h-8 dark:hidden" :alt="settings.title" />
-        <img :src="logo.dark" class="w-auto h-6 md:h-8 light:hidden" :alt="settings.title" />
-      </span>
-    </template>
-  </div>
+    <!-- Only Logo -->
+    <Logo v-else-if="hasLogo" class="d-logo" />
+    <!-- placeholder -->
+    <ProseCodeInline v-else>No header.logo</ProseCodeInline>
+  </NuxtLink>
 </template>
 
 <script>
+import Vue from 'vue'
 import { computed, defineComponent, useContext } from '@nuxtjs/composition-api'
 
 export default defineComponent({
   setup() {
     const { $docus } = useContext()
-
-    const settings = computed(() => $docus.settings.value)
-    const theme = computed(() => $docus.theme.value)
-
-    const logo = computed(() => {
-      if (!theme.value.header.logo) return
-
-      if (typeof theme.value.header.logo === 'object') return theme.value.header.logo
-
-      return {
-        light: theme.value.header.logo,
-        dark: theme.value.header.logo
-      }
-    })
+    const hasLogo = computed(() => $docus.theme.value.header.logo)
+    const hasTitle = computed(() => $docus.theme.value.header.title)
 
     return {
-      settings,
-      logo,
-      theme
+      hasLogo,
+      hasTitle,
+      settings: $docus.settings
     }
   }
 })