Merge pull request #121 from chaitin/fix-home-seo

fix: init home data for seo

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';

next.config.js

@@ -1,23 +1,27 @@
 /** @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',
+  'figlet',
+]);
 
 const nextConfig = withPlugins([withTM], {
   reactStrictMode: false,
   output: 'export',
   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;

package.json

@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@chaitin_rivers/multi_river": "^0.0.6",
+    "@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",

src/components/MainContent/index.tsx

@@ -10,7 +10,7 @@ const MainContent: React.FC<{
   children: React.ReactElement;
   sx?: SxProps<Theme>;
   fullScreen?: boolean;
-}> = ({ children, sx, fullScreen = false }) => {
+}> = ({ children, sx, fullScreen = true }) => {
   const { path } = usePath();
 
   const [tool] = React.useState<Tool | undefined>(
@@ -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';
       }
     });

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<HTMLInputElement>,
+    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 (
+    <MainContent>
+      <ToolsForm sx={{ mx: '0' }}>
+        <Stack sx={{ mt: '30px', gap: '18px' }} spacing={2}>
+          <Stack direction='row' alignItems='center' spacing={1}>
+            <InputLabel sx={{ width: '200px!important' }}>文字</InputLabel>
+            <Stack>
+              <OutlinedInput
+                required
+                placeholder='请输入文字'
+                value={text}
+                onChange={onTextChange}
+                margin='dense'
+                sx={{ width: '415px' }}
+                inputProps={{
+                  max: 999,
+                  min: 1,
+                }}
+              />
+            </Stack>
+          </Stack>
+          <Stack
+            direction='row'
+            alignItems='center'
+            spacing={1}
+            sx={{ '& .MuiOutlinedInput-root': { width: '415px', flexGrow: 0 } }}
+          >
+            <InputLabel sx={{ width: '200px!important' }}>
+              请选择字体
+              <Tooltip title='不支持中文，仅支持英文、数字和常规标点符号'>
+                <HelpIcon
+                  sx={{ fontSize: '14px', color: '#000000', ml: '5px' }}
+                />
+              </Tooltip>
+            </InputLabel>
+            <Select
+              value={font}
+              label='字体'
+              onChange={(event) => {
+                setFont(event.target.value);
+                onTextChange(
+                  {
+                    target: {
+                      value: text,
+                    },
+                  } as any,
+                  event.target.value
+                );
+              }}
+            >
+              {allFont.map((item) => (
+                <MenuItem value={item.name} key={item.name}>
+                  {item.name}
+                </MenuItem>
+              ))}
+            </Select>
+          </Stack>
+
+          <CopyToClipboard text={decorateText} onCopy={handleCopyClick}>
+            <pre style={{ cursor: 'pointer' }}>{decorateText}</pre>
+          </CopyToClipboard>
+          {decorateText && (
+            <Typography variant='caption'>
+              点击上方文本可复制 figlet 字符串
+            </Typography>
+          )}
+        </Stack>
+      </ToolsForm>
+    </MainContent>
+  );
+};
+
+export default Figlet;

src/pages/home.tsx

@@ -21,7 +21,14 @@ export default function App() {
   );
   const { updateAnchor } = useContext(AnchorContext);
   const { likeList } = useContext(LikeContext);
-  const [tagAndTools, setTagAndTools] = useState<TagWithTool[] | null>(null);
+  const [tagAndTools, setTagAndTools] = useState<TagWithTool[] | null>(
+    allTags.map((item) => {
+      return {
+        ...item,
+        tools: allTools.filter((tool) => tool.tags.includes(item.name)),
+      };
+    })
+  );
   const mainPageRef = useRef<any>(null);
 
   useEffect(() => {

src/utils/tools.ts

@@ -521,4 +521,12 @@ export const allTools: Tool[] = [
     key: [],
     subTitle: '倒计时小工具',
   },
+  {
+    label: 'Figlet',
+    tags: [Tags.TEXT],
+    path: '/figlet',
+    key: [],
+    subTitle:
+      '将字符转换为大型艺术字， 常用于浏览器控制台和终端',
+  },
 ];