From 17c6694274e8c200a04a0fa4a1876d480593360d Mon Sep 17 00:00:00 2001
From: motea927 <motea927@yahoo.com.tw>
Date: Mon, 19 Jun 2023 15:57:45 +0800
Subject: [PATCH] docs: prevent docs logo contains mismatches

---
 packages/docs/app.config.ts       |  3 ++-
 packages/docs/components/Logo.vue | 20 --------------------
 packages/docs/nuxt.config.ts      |  3 ++-
 packages/docs/style.scss          |  8 ++++++++
 4 files changed, 12 insertions(+), 22 deletions(-)
 delete mode 100644 packages/docs/components/Logo.vue
 create mode 100644 packages/docs/style.scss

diff --git a/packages/docs/app.config.ts b/packages/docs/app.config.ts
index 64d0454..e531c49 100644
--- a/packages/docs/app.config.ts
+++ b/packages/docs/app.config.ts
@@ -15,7 +15,8 @@ export default defineAppConfig({
       fluid: true
     },
     header: {
-      logo: true,
+      // logo: true,
+      title: 'mt-v-safe-html',
       showLinkIcon: true,
       exclude: []
     },
diff --git a/packages/docs/components/Logo.vue b/packages/docs/components/Logo.vue
deleted file mode 100644
index 8c7727b..0000000
--- a/packages/docs/components/Logo.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-  <a href="/" class="logo">
-    <img src="/mt-v-safe-html.png" alt="mt-v-safe-html" class="logo__img" />
-    mt-v-safe-html
-  </a>
-</template>
-
-<script setup lang="ts"></script>
-
-<style lang="scss">
-.logo {
-  font-weight: bold;
-  font-size: 20px;
-  &__img {
-    width: 30px;
-    height: 30px;
-    object-fit: contain;
-  }
-}
-</style>
diff --git a/packages/docs/nuxt.config.ts b/packages/docs/nuxt.config.ts
index dd1ec76..4ede646 100755
--- a/packages/docs/nuxt.config.ts
+++ b/packages/docs/nuxt.config.ts
@@ -7,5 +7,6 @@ export default defineNuxtConfig({
     '@nuxtjs/plausible',
     // https://github.com/nuxt/devtools
     '@nuxt/devtools'
-  ]
+  ],
+  css: ['~/style.scss']
 })
diff --git a/packages/docs/style.scss b/packages/docs/style.scss
new file mode 100644
index 0000000..46aa33e
--- /dev/null
+++ b/packages/docs/style.scss
@@ -0,0 +1,8 @@
+.section a .title::before {
+  content: '';
+  display: inline-block;
+  background: url('/mt-v-safe-html.png') center / 30px 30px no-repeat;
+  width: 30px;
+  height: 30px;
+  vertical-align: middle;
+}