💄 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();
  });
  },