From 123946c4c775b6dc576d6af3217a724a9f35dd23 Mon Sep 17 00:00:00 2001 From: awesomeYG <993631441@qq.com> Date: Mon, 22 Jan 2024 17:05:08 +0800 Subject: [PATCH 1/2] fix: init home data for seo --- next.config.js | 13 ++++++++----- package-lock.json | 8 ++++---- package.json | 2 +- src/pages/home.tsx | 9 ++++++++- 4 files changed, 21 insertions(+), 11 deletions(-) diff --git a/next.config.js b/next.config.js index 7bc8488..1b92dc0 100644 --- a/next.config.js +++ b/next.config.js @@ -1,6 +1,9 @@ /** @type {import('next').NextConfig} */ const withPlugins = require('next-compose-plugins'); -const withTM = require('next-transpile-modules')(['react-syntax-highlighter', 'shrinkpng']); +const withTM = require('next-transpile-modules')([ + 'react-syntax-highlighter', + 'shrinkpng', +]); const nextConfig = withPlugins([withTM], { reactStrictMode: false, @@ -8,16 +11,16 @@ const nextConfig = withPlugins([withTM], { images: { unoptimized: true, }, - basePath: '/tools', - async redirects() { + basePath: process.env.NODE_ENV === 'production' ? '/tools' : '', + redirects: process.env.NODE_ENV === 'development' ? async () => { return [ { source: '/', - destination: '/tools/home', + destination: '/home', permanent: true, }, ]; - }, + }: undefined, webpack: (config) => { config.resolve.fallback = { fs: false }; return config; diff --git a/package-lock.json b/package-lock.json index 695771b..3abfb9a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "1.0.0", "license": "MIT", "dependencies": { - "@chaitin_rivers/multi_river": "^0.0.6", + "@chaitin_rivers/multi_river": "^0.0.20", "@emotion/cache": "^11.11.0", "@emotion/react": "^11.11.0", "@emotion/server": "^11.11.0", @@ -685,9 +685,9 @@ } }, "node_modules/@chaitin_rivers/multi_river": { - "version": "0.0.6", - "resolved": "https://registry.npmmirror.com/@chaitin_rivers/multi_river/-/multi_river-0.0.6.tgz", - "integrity": "sha512-UwTOqC3+b9hkKwZMjW+SY0maZKefs28WbZpLUwJKcaDfFoEkiKP6g2ra4qAOPiXBaSSKtmly/kJXsspas/4wXQ==", + "version": "0.0.20", + "resolved": "https://registry.npmmirror.com/@chaitin_rivers/multi_river/-/multi_river-0.0.20.tgz", + "integrity": "sha512-20+IcLi1x/uW1VeuenitGZu2brMqh6sbmqUjdWKtX9W80W880uAZUV8eQUWKmdPk6W/Kn6La7zszQkOQNTSaUw==", "dependencies": { "@mui/icons-material": "^5.15.3", "react-copy-to-clipboard": "^5.1.0" diff --git a/package.json b/package.json index 34de2c1..fe2ac7f 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ } }, "dependencies": { - "@chaitin_rivers/multi_river": "^0.0.6", + "@chaitin_rivers/multi_river": "^0.0.20", "@emotion/cache": "^11.11.0", "@emotion/react": "^11.11.0", "@emotion/server": "^11.11.0", diff --git a/src/pages/home.tsx b/src/pages/home.tsx index e78704d..498ff04 100644 --- a/src/pages/home.tsx +++ b/src/pages/home.tsx @@ -21,7 +21,14 @@ export default function App() { ); const { updateAnchor } = useContext(AnchorContext); const { likeList } = useContext(LikeContext); - const [tagAndTools, setTagAndTools] = useState(null); + const [tagAndTools, setTagAndTools] = useState( + allTags.map((item) => { + return { + ...item, + tools: allTools.filter((tool) => tool.tags.includes(item.name)), + }; + }) + ); const mainPageRef = useRef(null); useEffect(() => { From 462c70f62741810ea6e4af07211ba145b1d02213 Mon Sep 17 00:00:00 2001 From: awesomeYG <993631441@qq.com> Date: Thu, 25 Jan 2024 16:16:45 +0800 Subject: [PATCH 2/2] feat: figlet --- declare.d.ts | 16 +++ next.config.js | 1 + package-lock.json | 26 ++++- package.json | 4 +- src/components/MainContent/index.tsx | 3 +- src/pages/figlet.tsx | 162 +++++++++++++++++++++++++++ src/utils/tools.ts | 8 ++ 7 files changed, 214 insertions(+), 6 deletions(-) create mode 100644 src/pages/figlet.tsx diff --git a/declare.d.ts b/declare.d.ts index 9aa7166..b2d47d3 100644 --- a/declare.d.ts +++ b/declare.d.ts @@ -1 +1,17 @@ declare module 'css2less'; +declare module 'figlet/importable-fonts/Standard.js'; +declare module 'figlet/importable-fonts/1Row.js'; +declare module 'figlet/importable-fonts/3D-ASCII'; +declare module 'figlet/importable-fonts/ANSI Regular'; +declare module 'figlet/importable-fonts/Alligator'; +declare module 'figlet/importable-fonts/Whimsy'; +declare module 'figlet/importable-fonts/Wow'; +declare module 'figlet/importable-fonts/Weird'; +declare module 'figlet/importable-fonts/Wavy'; +declare module 'figlet/importable-fonts/3D Diagonal'; +declare module 'figlet/importable-fonts/Banner'; +declare module 'figlet/importable-fonts/Block'; +declare module 'figlet/importable-fonts/Bear'; +declare module 'figlet/importable-fonts/Big Money-ne'; +declare module 'figlet/importable-fonts/Delta Corps Priest 1'; +declare module 'figlet/importable-fonts/Doh'; diff --git a/next.config.js b/next.config.js index 1b92dc0..4cddf53 100644 --- a/next.config.js +++ b/next.config.js @@ -3,6 +3,7 @@ const withPlugins = require('next-compose-plugins'); const withTM = require('next-transpile-modules')([ 'react-syntax-highlighter', 'shrinkpng', + 'figlet', ]); const nextConfig = withPlugins([withTM], { diff --git a/package-lock.json b/package-lock.json index 3abfb9a..a381abb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "1.0.0", "license": "MIT", "dependencies": { - "@chaitin_rivers/multi_river": "^0.0.20", + "@chaitin_rivers/multi_river": "^0.0.23", "@emotion/cache": "^11.11.0", "@emotion/react": "^11.11.0", "@emotion/server": "^11.11.0", @@ -24,6 +24,7 @@ "@mui/lab": "^5.0.0-alpha.155", "@mui/material": "^5.13.0", "@tanstack/react-query": "^4.29.7", + "@types/figlet": "^1.5.8", "@types/react-virtualized-auto-sizer": "^1.0.4", "@types/react-window": "^1.8.8", "ace-builds": "^1.32.2", @@ -41,6 +42,7 @@ "dompurify": "^3.0.6", "echarts": "^5.4.3", "eslint-config-next": "^14.0.4", + "figlet": "^1.7.0", "file-saver": "^2.0.5", "html-entities": "^2.4.0", "ip": "^1.1.8", @@ -685,9 +687,9 @@ } }, "node_modules/@chaitin_rivers/multi_river": { - "version": "0.0.20", - "resolved": "https://registry.npmmirror.com/@chaitin_rivers/multi_river/-/multi_river-0.0.20.tgz", - "integrity": "sha512-20+IcLi1x/uW1VeuenitGZu2brMqh6sbmqUjdWKtX9W80W880uAZUV8eQUWKmdPk6W/Kn6La7zszQkOQNTSaUw==", + "version": "0.0.23", + "resolved": "https://registry.npmmirror.com/@chaitin_rivers/multi_river/-/multi_river-0.0.23.tgz", + "integrity": "sha512-uIXNGQ+2DymOrtriIPUEiz8wZxBfZQ9tqns73HgoRRinrxPmyXKOQFPliHS2mAyub/jUYj4m2ysctLAFSUWKYw==", "dependencies": { "@mui/icons-material": "^5.15.3", "react-copy-to-clipboard": "^5.1.0" @@ -2168,6 +2170,11 @@ "resolved": "https://registry.npmmirror.com/@types/extend/-/extend-3.0.4.tgz", "integrity": "sha512-ArMouDUTJEz1SQRpFsT2rIw7DeqICFv5aaVzLSIYMYQSLcwcGOfT3VyglQs/p7K3F7fT4zxr0NWxYZIdifD6dA==" }, + "node_modules/@types/figlet": { + "version": "1.5.8", + "resolved": "https://registry.npmmirror.com/@types/figlet/-/figlet-1.5.8.tgz", + "integrity": "sha512-G22AUvy4Tl95XLE7jmUM8s8mKcoz+Hr+Xm9W90gJsppJq9f9tHvOGkrpn4gRX0q/cLtBdNkWtWCKDg2UDZoZvQ==" + }, "node_modules/@types/file-saver": { "version": "2.0.7", "resolved": "https://registry.npmmirror.com/@types/file-saver/-/file-saver-2.0.7.tgz", @@ -4437,6 +4444,17 @@ "format": "^0.2.0" } }, + "node_modules/figlet": { + "version": "1.7.0", + "resolved": "https://registry.npmmirror.com/figlet/-/figlet-1.7.0.tgz", + "integrity": "sha512-gO8l3wvqo0V7wEFLXPbkX83b7MVjRrk1oRLfYlZXol8nEpb/ON9pcKLI4qpBv5YtOTfrINtqb7b40iYY2FTWFg==", + "bin": { + "figlet": "bin/index.js" + }, + "engines": { + "node": ">= 0.4.0" + } + }, "node_modules/file-entry-cache": { "version": "6.0.1", "resolved": "https://registry.npmmirror.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz", diff --git a/package.json b/package.json index fe2ac7f..fb7fa08 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ } }, "dependencies": { - "@chaitin_rivers/multi_river": "^0.0.20", + "@chaitin_rivers/multi_river": "^0.0.23", "@emotion/cache": "^11.11.0", "@emotion/react": "^11.11.0", "@emotion/server": "^11.11.0", @@ -36,6 +36,7 @@ "@mui/lab": "^5.0.0-alpha.155", "@mui/material": "^5.13.0", "@tanstack/react-query": "^4.29.7", + "@types/figlet": "^1.5.8", "@types/react-virtualized-auto-sizer": "^1.0.4", "@types/react-window": "^1.8.8", "ace-builds": "^1.32.2", @@ -53,6 +54,7 @@ "dompurify": "^3.0.6", "echarts": "^5.4.3", "eslint-config-next": "^14.0.4", + "figlet": "^1.7.0", "file-saver": "^2.0.5", "html-entities": "^2.4.0", "ip": "^1.1.8", diff --git a/src/components/MainContent/index.tsx b/src/components/MainContent/index.tsx index c81b521..de8984a 100644 --- a/src/components/MainContent/index.tsx +++ b/src/components/MainContent/index.tsx @@ -10,7 +10,7 @@ const MainContent: React.FC<{ children: React.ReactElement; sx?: SxProps; fullScreen?: boolean; -}> = ({ children, sx, fullScreen = false }) => { +}> = ({ children, sx, fullScreen = true }) => { const { path } = usePath(); const [tool] = React.useState( @@ -39,6 +39,7 @@ const MainContent: React.FC<{ dom.style.position = 'fixed'; dom.style.inset = '0'; dom.style.maxWidth = '100vw'; + dom.style.background = '#fff'; if (riverHeader) riverHeader.style.display = 'none'; } }); diff --git a/src/pages/figlet.tsx b/src/pages/figlet.tsx new file mode 100644 index 0000000..bee3d03 --- /dev/null +++ b/src/pages/figlet.tsx @@ -0,0 +1,162 @@ +import alert from '@/components/Alert'; +import MainContent from '@/components/MainContent'; +import { ToolsForm } from '@/components/Tools'; +import HelpIcon from '@mui/icons-material/Help'; +import { + InputLabel, + MenuItem, + OutlinedInput, + Select, + Stack, + Tooltip, + Typography, +} from '@mui/material'; +import figlet from 'figlet'; +import React, { useEffect, useState } from 'react'; +import { CopyToClipboard } from 'react-copy-to-clipboard'; + +import oneRow from 'figlet/importable-fonts/1Row.js'; +import threeDAscii from 'figlet/importable-fonts/3D-ASCII'; +import ANSIRegular from 'figlet/importable-fonts/ANSI Regular'; +import Alligator from 'figlet/importable-fonts/Alligator'; +import standard from 'figlet/importable-fonts/Standard.js'; +import Wavy from 'figlet/importable-fonts/Wavy'; +import Weird from 'figlet/importable-fonts/Weird'; +import Whimsy from 'figlet/importable-fonts/Whimsy'; +import Wow from 'figlet/importable-fonts/Wow'; +import threeDDiagonal from 'figlet/importable-fonts/3D Diagonal'; +import Banner from 'figlet/importable-fonts/Banner'; +import Block from 'figlet/importable-fonts/Block'; +import Bear from 'figlet/importable-fonts/Bear'; +import BigMoneyNe from 'figlet/importable-fonts/Big Money-ne'; +import DeltaCorpsPriest from 'figlet/importable-fonts/Delta Corps Priest 1'; +import Doh from 'figlet/importable-fonts/Doh'; + +const allFont = [ + { name: '1Row', value: oneRow }, + { name: '3D-ASCII', value: threeDAscii }, + { name: '3D Diagonal', value: threeDDiagonal }, + { name: 'Alligator', value: Alligator }, + { name: 'ANSI Regular', value: ANSIRegular }, + { name: 'Banner', value: Banner }, + { name: 'Block', value: Block }, + { name: 'Bear', value: Bear }, + { name: 'Big Money-ne', value: BigMoneyNe }, + { name: 'Delta Corps Priest 1(只支持英文字母)', value: DeltaCorpsPriest }, + { name: 'Doh', value: Doh }, + { name: 'Standard', value: standard }, + { name: 'Whimsy (只支持英文字母)', value: Whimsy }, + { name: 'Wow', value: Wow }, + { name: 'Weird', value: Weird }, + { name: 'Wavy', value: Wavy }, +]; +const Figlet = () => { + const [text, setText] = useState(''); + const [decorateText, setDecorateText] = useState(''); + const [font, setFont] = useState('Standard'); + useEffect(() => { + allFont.forEach((item) => { + figlet.parseFont(item.name, item.value); + }); + }, []); + + const onTextChange = ( + event: React.ChangeEvent, + newFont?: string + ) => { + setText(event.target.value); + figlet( + event.target.value, + { + font: (newFont || font) as any, + horizontalLayout: 'fitted', + verticalLayout: 'fitted', + width: 180, + whitespaceBreak: true, + }, + function (err, text) { + if (err) { + console.log('something went wrong...'); + console.dir(err); + return; + } + setDecorateText(text || ''); + console.log(text); + console.log(JSON.stringify(text)); + } + ); + }; + const handleCopyClick = () => alert.success('已复制到剪切板'); + return ( + + + + + 文字 + + + + + + + 请选择字体 + + + + + + + + + 
{decorateText}
+ + {decorateText && ( + + 点击上方文本可复制 figlet 字符串 + + )} + + + + ); +}; + +export default Figlet; diff --git a/src/utils/tools.ts b/src/utils/tools.ts index 7aaf2c2..c2e25da 100644 --- a/src/utils/tools.ts +++ b/src/utils/tools.ts @@ -521,4 +521,12 @@ export const allTools: Tool[] = [ key: [], subTitle: '倒计时小工具', }, + { + label: 'Figlet', + tags: [Tags.TEXT], + path: '/figlet', + key: [], + subTitle: + '将字符转换为大型艺术字， 常用于浏览器控制台和终端', + }, ];