💄 style: update svg icon

lobehub · Jun 26, 2023 · d7e13b6 · d7e13b6
1 parent 406aba7
commit d7e13b6
Show file tree

Hide file tree

Showing 9 changed files with 493 additions and 264 deletions.
diff --git a/README-zh_CN.md b/README-zh_CN.md
@@ -2,11 +2,11 @@
 
 <div align="center">
 
-<img width="160" src="https://gw.alipayobjects.com/mdn/rms_7d1485/afts/img/A*XDYxSJXBjjwAAAAAAAAAAAAAARQnAQ">
+<img width="160" src="https://npm.elemecdn.com/@lobehub/assets-logo/assets/logo-3d.webp">
 
-<h1 align="center">Kitchen Theme</h1>
+<h1 align="center">Lobe Theme</h1>
 
-Kitchen Theme for Stable Diffusion WebUI
+Lobe Theme for Stable Diffusion WebUI
 
 [English](./README.md) · 简体中文 · [Changelog](./CHANGELOG.md) · [Report Bug][issues-url] · [Request Feature][issues-url]
 
@@ -226,6 +226,7 @@ $ npm start
 
 - stable-diffusion-webui：<https://github.com/AUTOMATIC1111/stable-diffusion-webui>
 - gradio-theme-gallery: <https://huggingface.co/spaces/gradio/theme-gallery>
+- cozy-nest: <https://github.com/Nevysha/Cozy-Nest>
 - _before `1.0.0` version_
   - sd-web-ui-quickcs: <https://github.com/Gerschel/sd-web-ui-quickcss/>
   - Dark-Themes-SD-WebUI-Automatic1111: <https://github.com/Nacurutu/Dark-Themes-SD-WebUI-Automatic1111>

diff --git a/README.md b/README.md
@@ -2,11 +2,11 @@
 
 <div align="center">
 
-<img width="160" src="https://gw.alipayobjects.com/mdn/rms_7d1485/afts/img/A*XDYxSJXBjjwAAAAAAAAAAAAAARQnAQ">
+<img width="160" src="https://npm.elemecdn.com/@lobehub/assets-logo/assets/logo-3d.webp">
 
-<h1 align="center">Kitchen Theme</h1>
+<h1 align="center">Lobe Theme</h1>
 
-Kitchen Theme for Stable Diffusion WebUI
+Lobe Theme for Stable Diffusion WebUI
 
 English · [简体中文](./README-zh_CN.md) · [Changelog](./CHANGELOG.md) · [Report Bug][issues-url] · [Request Feature][issues-url]
 
@@ -227,6 +227,7 @@ $ npm start
 
 - stable-diffusion-webui：<https://github.com/AUTOMATIC1111/stable-diffusion-webui>
 - gradio-theme-gallery: <https://huggingface.co/spaces/gradio/theme-gallery>
+- cozy-nest: <https://github.com/Nevysha/Cozy-Nest>
 - _before `1.0.0` version_
   - sd-web-ui-quickcs: <https://github.com/Gerschel/sd-web-ui-quickcss/>
   - Dark-Themes-SD-WebUI-Automatic1111: <https://github.com/Nacurutu/Dark-Themes-SD-WebUI-Automatic1111>

diff --git a/javascript/main.js b/javascript/main.js
diff --git a/package.json b/package.json
@@ -62,6 +62,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-helmet": "^6",
     "@types/react-tag-input": "^6",
     "@types/styled-components": "^5",
     "@vitejs/plugin-react": "^4",
@@ -79,13 +80,15 @@
     "lightningcss": "^1",
     "lint-staged": "^13",
     "lodash-es": "^4",
-    "lucide-react": "^0",
+    "lucide-react": "latest",
+    "lucide-static": "latest",
     "object-to-css-variables": "^0",
     "polished": "^4",
     "prettier": "^2",
     "query-string": "^8",
     "react": "^18",
     "react-dom": "^18",
+    "react-helmet": "^6.1.0",
     "react-layout-kit": "^1",
     "react-rnd": "^10",
     "react-tag-input": "^6",
@@ -95,7 +98,7 @@
     "styled-components": "latest",
     "stylelint": "^15",
     "typescript": "^5",
-    "vite": "^4.3.9",
+    "vite": "^4",
     "webpack-shell-plugin-next": "^2",
     "zustand": "^4"
   },

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,19 +1,18 @@
 import { memo, useEffect, useState } from 'react';
+import { Helmet } from 'react-helmet';
 import { shallow } from 'zustand/shallow';
 
 import Layout from '@/layouts';
 import Index from '@/pages';
 import formatPrompt from '@/script/formatPrompt';
 import promptBracketChecker from '@/script/promptBracketChecker';
-import setupHead from '@/script/setupHead';
 import Loading from '@/slots/Loading';
 import { useAppStore } from '@/store';
 
 const App = memo(() => {
   const [loading, setLoading] = useState(true);
   const setCurrentTab = useAppStore((st) => st.setCurrentTab, shallow);
   useEffect(() => {
-    setupHead();
     onUiLoaded(() => {
       formatPrompt();
       promptBracketChecker();
@@ -24,7 +23,43 @@ const App = memo(() => {
     });
   }, []);
 
-  return <Layout>{loading ? <Loading /> : <Index />}</Layout>;
+  return (
+    <>
+      <Helmet>
+        <link
+          href="https://npm.elemecdn.com/@lobehub/assets-favicons/assets/apple-touch-icon.png"
+          rel="apple-touch-icon"
+          sizes="180x180"
+        />
+        <link
+          href="https://npm.elemecdn.com/@lobehub/assets-favicons/assets/favicon-32x32.png"
+          rel="icon"
+          sizes="32x32"
+          type="image/png"
+        />
+        <link
+          href="https://npm.elemecdn.com/@lobehub/assets-favicons/assets/favicon-16x16.png"
+          rel="icon"
+          sizes="16x16"
+          type="image/png"
+        />
+        <link
+          href="https://npm.elemecdn.com/@lobehub/assets-favicons/assets/site.webmanifest"
+          rel="manifest"
+        />
+        <link
+          color="#000000"
+          href="https://npm.elemecdn.com/@lobehub/assets-favicons/assets/safari-pinned-tab.svg"
+          rel="mask-icon"
+        />
+        <meta content="LobeHub" name="apple-mobile-web-app-title" />
+        <meta content="LobeHub" name="application-name" />
+        <meta content="#000000" name="msapplication-TileColor" />
+        <meta content="#000000" name="theme-color" />
+      </Helmet>
+      <Layout>{loading ? <Loading /> : <Index />}</Layout>
+    </>
+  );
 });
 
 export default App;
diff --git a/src/pages/Footer/data.tsx b/src/pages/Footer/data.tsx
@@ -8,22 +8,28 @@ export const columns: FProps['columns'] = [
   {
     items: [
       {
-        description: 'AIGC Components',
+        description: 'AUTOMATIC111',
         openExternal: true,
-        title: '🤯 Lobe UI',
-        url: 'https://github.com/lobehub/lobe-ui',
+        title: 'Stable Diffusion Webui',
+        url: 'https://github.com/AUTOMATIC1111/stable-diffusion-webui',
       },
       {
-        description: 'Chatbot Client',
+        description: 'WebUI extension',
         openExternal: true,
-        title: '🤯 Lobe Chat',
-        url: 'https://github.com/lobehub/lobe-chat',
+        title: 'Controlnet',
+        url: 'https://github.com/Mikubill/sd-webui-controlnet',
       },
       {
-        description: 'Node Flow Editor',
+        description: 'Art models',
         openExternal: true,
-        title: '🤯 Lobe Flow',
-        url: 'https://github.com/lobehub/lobe-flow',
+        title: 'Civitai',
+        url: 'https://civitai.com/',
+      },
+      {
+        description: 'Artist Inspired Styles',
+        openExternal: true,
+        title: 'Cheat Sheet',
+        url: 'https://supagruen.github.io/StableDiffusion-CheatSheet/',
       },
     ],
     title: 'Resources',
@@ -64,6 +70,24 @@ export const columns: FProps['columns'] = [
   },
   {
     items: [
+      {
+        description: 'AIGC Components',
+        openExternal: true,
+        title: '🤯 Lobe UI',
+        url: 'https://github.com/lobehub/lobe-ui',
+      },
+      {
+        description: 'Chatbot Client',
+        openExternal: true,
+        title: '🤯 Lobe Chat',
+        url: 'https://github.com/lobehub/lobe-chat',
+      },
+      {
+        description: 'Node Flow Editor',
+        openExternal: true,
+        title: '🤯 Lobe Flow',
+        url: 'https://github.com/lobehub/lobe-flow',
+      },
       {
         description: 'AI Commit CLI',
         openExternal: true,

diff --git a/src/script/replaceIcon.ts b/src/script/replaceIcon.ts
@@ -1,73 +1,44 @@
+import {
+  archiveRestore,
+  arrowDownLeft,
+  arrowRight,
+  arrowUpDown,
+  clipboardList,
+  dices,
+  folderClosed,
+  panelRight,
+  refreshCcw,
+  save,
+  settings,
+  trash,
+  wand2, // @ts-ignore
+} from 'lucide-static';
+
 const replaceIcon = (button: HTMLButtonElement, emoji: string[], svg: string) => {
   if (!button?.textContent) return;
   for (const e of emoji) {
     if (button?.textContent?.includes(e)) {
-      button.innerHTML = `<span role="img" class="anticon anticon-replace" aria-label={button.textContent}><svg viewBox="64 64 896 896" focusable="false" width="1em" height="1em" fill="currentColor" aria-hidden="true">${svg}</svg></span>`;
+      button.innerHTML = svg
+        .replace(`width="24"`, `width="16"`)
+        .replace(`height="24"`, `height="16"`);
     }
   }
 };
 
 export default () => {
   for (const button of document.querySelectorAll('button')) {
-    replaceIcon(
-      button,
-      ['📂'],
-      '<path d="M880 298.4H521L403.7 186.2a8.15 8.15 0 00-5.5-2.2H144c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V330.4c0-17.7-14.3-32-32-32zM840 768H184V256h188.5l119.6 114.4H840V768z"></path>',
-    );
-    replaceIcon(
-      button,
-      ['🔄', '🔁'],
-      '<path d="M909.1 209.3l-56.4 44.1C775.8 155.1 656.2 92 521.9 92 290 92 102.3 279.5 102 511.5 101.7 743.7 289.8 932 521.9 932c181.3 0 335.8-115 394.6-276.1 1.5-4.2-.7-8.9-4.9-10.3l-56.7-19.5a8 8 0 00-10.1 4.8c-1.8 5-3.8 10-5.9 14.9-17.3 41-42.1 77.8-73.7 109.4A344.77 344.77 0 01655.9 829c-42.3 17.9-87.4 27-133.8 27-46.5 0-91.5-9.1-133.8-27A341.5 341.5 0 01279 755.2a342.16 342.16 0 01-73.7-109.4c-17.9-42.4-27-87.4-27-133.9s9.1-91.5 27-133.9c17.3-41 42.1-77.8 73.7-109.4 31.6-31.6 68.4-56.4 109.3-73.8 42.3-17.9 87.4-27 133.8-27 46.5 0 91.5 9.1 133.8 27a341.5 341.5 0 01109.3 73.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.6 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c-.1-6.6-7.8-10.3-13-6.2z"></path>',
-    );
-    replaceIcon(
-      button,
-      ['↙️'],
-      '<path d="M603.3 327.5l-246 178a7.95 7.95 0 000 12.9l246 178c5.3 3.8 12.7 0 12.7-6.5V643c0-10.2-4.9-19.9-13.2-25.9L457.4 512l145.4-105.2c8.3-6 13.2-15.6 13.2-25.9V334c0-6.5-7.4-10.3-12.7-6.5z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>',
-    );
-    replaceIcon(
-      button,
-      ['🗑️'],
-      '<path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path>',
-    );
-    replaceIcon(
-      button,
-      ['📋'],
-      '<path d="M832 112H724V72c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v40H500V72c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v40H320c-17.7 0-32 14.3-32 32v120h-96c-17.7 0-32 14.3-32 32v632c0 17.7 14.3 32 32 32h512c17.7 0 32-14.3 32-32v-96h96c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zM664 888H232V336h218v174c0 22.1 17.9 40 40 40h174v338zm0-402H514V336h.2L664 485.8v.2zm128 274h-56V456L544 264H360v-80h68v32c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-32h152v32c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-32h68v576z"></path>',
-    );
-    replaceIcon(
-      button,
-      ['💾'],
-      '<path d="M893.3 293.3L730.7 130.7c-7.5-7.5-16.7-13-26.7-16V112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V338.5c0-17-6.7-33.2-18.7-45.2zM384 184h256v104H384V184zm456 656H184V184h136v136c0 17.7 14.3 32 32 32h320c17.7 0 32-14.3 32-32V205.8l136 136V840zM512 442c-79.5 0-144 64.5-144 144s64.5 144 144 144 144-64.5 144-144-64.5-144-144-144zm0 224c-44.2 0-80-35.8-80-80s35.8-80 80-80 80 35.8 80 80-35.8 80-80 80z"></path>',
-    );
-    replaceIcon(
-      button,
-      ['🎲️'],
-      '<path d="M136 552h63.6c4.4 0 8-3.6 8-8V288.7h528.6v72.6c0 1.9.6 3.7 1.8 5.2a8.3 8.3 0 0011.7 1.4L893 255.4c4.3-5 3.6-10.3 0-13.2L749.7 129.8a8.22 8.22 0 00-5.2-1.8c-4.6 0-8.4 3.8-8.4 8.4V209H199.7c-39.5 0-71.7 32.2-71.7 71.8V544c0 4.4 3.6 8 8 8zm752-80h-63.6c-4.4 0-8 3.6-8 8v255.3H287.8v-72.6c0-1.9-.6-3.7-1.8-5.2a8.3 8.3 0 00-11.7-1.4L131 768.6c-4.3 5-3.6 10.3 0 13.2l143.3 112.4c1.5 1.2 3.3 1.8 5.2 1.8 4.6 0 8.4-3.8 8.4-8.4V815h536.6c39.5 0 71.7-32.2 71.7-71.8V480c-.2-4.4-3.8-8-8.2-8z"></path>',
-    );
-    replaceIcon(
-      button,
-      ['♻️'],
-      '<path d="M793 242H366v-74c0-6.7-7.7-10.4-12.9-6.3l-142 112a8 8 0 000 12.6l142 112c5.2 4.1 12.9.4 12.9-6.3v-74h415v470H175c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h618c35.3 0 64-28.7 64-64V306c0-35.3-28.7-64-64-64z"></path>',
-    );
-    replaceIcon(
-      button,
-      ['🪄'],
-      '<defs><style></style></defs><path d="M899.1 869.6l-53-305.6H864c14.4 0 26-11.6 26-26V346c0-14.4-11.6-26-26-26H618V138c0-14.4-11.6-26-26-26H432c-14.4 0-26 11.6-26 26v182H160c-14.4 0-26 11.6-26 26v192c0 14.4 11.6 26 26 26h17.9l-53 305.6a25.95 25.95 0 0025.6 30.4h723c1.5 0 3-.1 4.4-.4a25.88 25.88 0 0021.2-30zM204 390h272V182h72v208h272v104H204V390zm468 440V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H416V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H202.8l45.1-260H776l45.1 260H672z"></path>',
-    );
-    replaceIcon(
-      button,
-      ['⚙️'],
-      '<path d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path>',
-    );
-    replaceIcon(
-      button,
-      ['➡️'],
-      '<path d="M666.7 505.5l-246-178A8 8 0 00408 334v46.9c0 10.2 4.9 19.9 13.2 25.9L566.6 512 421.2 617.2c-8.3 6-13.2 15.6-13.2 25.9V690c0 6.5 7.4 10.3 12.7 6.5l246-178c4.4-3.2 4.4-9.8 0-13z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>',
-    );
-    replaceIcon(
-      button,
-      ['⇅'],
-      '<path d="M847.9 592H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h605.2L612.9 851c-4.1 5.2-.4 13 6.3 13h72.5c4.9 0 9.5-2.2 12.6-6.1l168.8-214.1c16.5-21 1.6-51.8-25.2-51.8zM872 356H266.8l144.3-183c4.1-5.2.4-13-6.3-13h-72.5c-4.9 0-9.5 2.2-12.6 6.1L150.9 380.2c-16.5 21-1.6 51.8 25.1 51.8h696c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path>',
-    );
+    replaceIcon(button, ['📂'], folderClosed);
+    replaceIcon(button, ['🔄', '🔁', '♻️'], refreshCcw);
+    replaceIcon(button, ['↙️'], arrowDownLeft);
+    replaceIcon(button, ['🗑️'], trash);
+    replaceIcon(button, ['📋'], clipboardList);
+    replaceIcon(button, ['💾'], save);
+    replaceIcon(button, ['🎲️'], dices);
+    replaceIcon(button, ['🪄'], wand2);
+    replaceIcon(button, ['⚙️'], settings);
+    replaceIcon(button, ['➡️'], arrowRight);
+    replaceIcon(button, ['⇅'], arrowUpDown);
+    replaceIcon(button, ['🎴'], panelRight);
+    replaceIcon(button, ['🌀'], archiveRestore);
   }
 };
diff --git a/src/script/setupHead.ts b/src/script/setupHead.ts
diff --git a/vite.config.ts b/vite.config.ts
@@ -5,13 +5,13 @@ import { defineConfig } from 'vite';
 export default defineConfig({
   base: '/dev',
   build: {
-    outDir: './',
+    outDir: './javascript',
     rollupOptions: {
       input: resolve(__dirname, 'src/main.tsx'),
       output: {
-        assetFileNames: `javascript/[name].[ext]`,
-        chunkFileNames: `javascript/[name].js`,
-        entryFileNames: `javascript/[name].js`,
+        assetFileNames: `[name].[ext]`,
+        chunkFileNames: `[name].js`,
+        entryFileNames: `[name].js`,
       },
     },
   },
@@ -47,19 +47,13 @@ export default defineConfig({
                         <script type="module" src="/dev/src/_react_refresh.js"></script>
                         <script type="module" src="/dev/src/main.tsx"></script>
                        `;
-
-            // replace </body> with </body><script type="module" src="/main.js"></script>
             updatedResponse = updatedResponse.replace('</body>', `</body>${toAdd}`);
-
-            // Set the modified response
             res.statusCode = 200;
             res.setHeader('Content-Type', 'text/html');
             res.setHeader('charset', 'utf8');
             res.end(updatedResponse);
             return;
           }
-
-          // Continue to the next middleware
           next();
         });
       },