Add support for dynamic change favicon and title (#44)

ZhiShuYun · Jan 8, 2024 · 9a9c9be · 9a9c9be
1 parent 0456975
commit 9a9c9be
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 25 deletions.
diff --git a/change/@zhishuyun-hub-74f73d6f-c835-4233-86f8-0ef213a024b5.json b/change/@zhishuyun-hub-74f73d6f-c835-4233-86f8-0ef213a024b5.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "add support for config title and favicon",
+  "packageName": "@zhishuyun/hub",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/hub.config.js b/hub.config.js
diff --git a/index.html b/index.html
@@ -2,9 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>知数云 - 数字化服务的智慧之选</title>
+    <title></title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/package.json b/package.json
@@ -88,7 +88,6 @@
     "sass": "^1.38.1",
     "tailwindcss": "^3.4.0",
     "typescript": "^4.9.5",
-    "unplugin-element-plus": "^0.8.0",
     "vite": "^2.9.16",
     "vite-bundle-visualizer": "^1.0.0",
     "vue-tsc": "^1.2.0"

diff --git a/public/favicon.ico → src/assets/images/favicon.ico b/public/favicon.ico → src/assets/images/favicon.ico
diff --git a/src/config.ts b/src/config.ts
@@ -2,7 +2,32 @@ export default {
   /**
    * The global configuration.
    */
-  global: {},
+  global: {
+    /**
+     * Title of the app.
+     * You can change it by your own.
+     */
+    title: '知数云 - 数字化服务的智慧之选',
+
+    /**
+     * Logo url of the app.
+     * If provided which starts with http/https prefix, will be used.
+     * If not provided, will by default use @/assets/images/logo.svg as instead, you can replace it.
+     */
+    logoUrl: undefined,
+
+    /**
+     * Favicon url of the app.
+     * If provided which starts with http/https prefix, will be used.
+     * If not provided, will by default use @/assets/images/favicon.ico as instead, you can replace it.
+     */
+    faviconUrl: undefined,
+
+    /**
+     * The default language of the app, enum as 'zh-cn', 'en'.
+     */
+    language: 'zh-cn'
+  },
 
   /**
    * The left navigation configuration.
@@ -64,6 +89,11 @@ export default {
    * The auth configuration.
    */
   auth: {
+    /**
+     * The default auth provider, enum as 'wechat', 'email', 'phone'.
+     */
+    defaultProvider: 'wechat',
+
     /**
      * The auth provider configuration.
      */

diff --git a/src/main.ts b/src/main.ts
@@ -12,10 +12,12 @@ import { vLoading } from 'element-plus';
 import hl from 'highlight.js';
 import 'highlight.js/styles/night-owl.css';
 import copyToClipboard from 'copy-to-clipboard';
-import { initializeCookies } from './utils/initializer';
+import { initializeCookies, initializeFavicon, initializeTitle } from './utils/initializer';
 import config from './plugins/config';
 
 initializeCookies();
+initializeTitle();
+initializeFavicon();
 
 const app = createApp(App);
 

diff --git a/src/utils/initializer.ts b/src/utils/initializer.ts
@@ -1,5 +1,10 @@
 import { setCookie } from 'typescript-cookie';
+import config from '@/config';
+import favicon from '@/assets/images/favicon.ico';
 
+/**
+ * Initialize cookies.
+ */
 export const initializeCookies = () => {
   // parse the query string and set to cookies
   const query = new URLSearchParams(window.location.search);
@@ -15,3 +20,34 @@ export const initializeCookies = () => {
     });
   }
 };
+
+/**
+ * Initialize title.
+ */
+export const initializeTitle = () => {
+  // set the title from config.global.title
+  const title = config.global.title;
+  // find the title element or insert a new one
+  let titleElement = document.querySelector('title');
+  if (!titleElement) {
+    titleElement = document.createElement('title');
+    document.head.appendChild(titleElement);
+  }
+  titleElement.innerHTML = title;
+};
+
+/**
+ * Initialize favicon.
+ */
+export const initializeFavicon = () => {
+  // by default use favicon which imported
+  // if faviconUrl is set in config, use it instead
+  const favIconUrl = config.global.faviconUrl;
+  let faviconElement = document.querySelector('link[rel="icon"]') as HTMLLinkElement;
+  if (!faviconElement) {
+    faviconElement = document.createElement('link');
+    faviconElement.rel = 'icon';
+    document.head.appendChild(faviconElement);
+  }
+  faviconElement.href = favIconUrl || favicon;
+};