mirror of
https://github.com/zerosoul/chinese-colors.git
synced 2024-11-21 01:13:53 +08:00
refactor: update packages and add link
This commit is contained in:
Tristan Yang
parent
683f5832e1
commit
4a3f668402
@ -31,7 +31,7 @@
|
||||
},
|
||||
"settings": {
|
||||
"react": {
|
||||
"version": "16.8"
|
||||
"version": "18"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
6
.huskyrc
6
.huskyrc
@ -1,6 +0,0 @@
|
||||
{
|
||||
"hooks": {
|
||||
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
|
||||
"pre-commit": "lint-staged"
|
||||
}
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
{
|
||||
"src/**/*.{js,jsx}": ["eslint --fix"]
|
||||
}
|
||||
51
.vscode/settings.json
vendored
Normal file
51
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,51 @@
|
||||
{
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll": false,
|
||||
"source.fixAll.eslint": true
|
||||
},
|
||||
"todohighlight.isCaseSensitive": false,
|
||||
"css.validate": false,
|
||||
"editor.quickSuggestions": {
|
||||
"other": true,
|
||||
"comments": false,
|
||||
"strings": true
|
||||
},
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode",
|
||||
"prettier.prettierPath": "./node_modules/prettier",
|
||||
"editor.formatOnSave": true,
|
||||
"eslint.validate": ["javascript"],
|
||||
"[json]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode",
|
||||
"editor.formatOnSave": true
|
||||
},
|
||||
"[jsonc]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"[javascriptreact]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"emmet.triggerExpansionOnTab": true,
|
||||
"[javascript]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"cSpell.words": ["Privoce"],
|
||||
"reactSnippets.settings.prettierEnabled": true,
|
||||
"reactSnippets.settings.importReactOnTop": false,
|
||||
"[html]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"[typescriptreact]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"[typescript]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"typescript.tsdk": "node_modules/typescript/lib",
|
||||
"typescript.tsc.autoDetect": "off",
|
||||
"json.schemas": [
|
||||
{
|
||||
"fileMatch": ["/*electron-builder.json5", "/*electron-builder.json"],
|
||||
"url": "https://json.schemastore.org/electron-builder"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -34,7 +34,6 @@
|
||||
- [react.js](https://reactjs.org)
|
||||
- [styled-components](https://styled-components.com): CSS-IN-JS Best Practice
|
||||
- eslint + prettier: for better code
|
||||
- husky + commitlint: for better git commit format
|
||||
- [html2canvas](http://html2canvas.hertzen.com/)
|
||||
- [pinyin](https://github.com/hotoo/pinyin): convert Han to pinyin
|
||||
- [react-copy-to-clipboard](https://github.com/nkbt/react-copy-to-clipboard): enable copy
|
||||
|
||||
@ -33,7 +33,6 @@
|
||||
- [react](https://reactjs.org): 最流行的前端 UI 构建语言
|
||||
- [styled-components](https://styled-components.com): react 中 css 解决方案，CSS-IN-JS 最佳实践
|
||||
- eslint + prettier: 为了更好地编码
|
||||
- husky + commitlint: 为了更好地 GIT 提交
|
||||
- [html2canvas](http://html2canvas.hertzen.com/)
|
||||
- [pinyin](https://github.com/hotoo/pinyin): 汉字转拼音
|
||||
- [react-copy-to-clipboard](https://github.com/nkbt/react-copy-to-clipboard): 开启复制功能
|
||||
|
||||
163
index.html
163
index.html
@ -1,59 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<!-- 优先使用 IE 最新版本和 Chrome -->
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="theme-color" content="#68cdaa" />
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<!-- 优先使用 IE 最新版本和 Chrome -->
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="theme-color" content="#68cdaa" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"
|
||||
/>
|
||||
<!-- 启用360浏览器的极速模式(webkit) -->
|
||||
<meta name="renderer" content="webkit" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
|
||||
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
|
||||
<!-- 启用360浏览器的极速模式(webkit) -->
|
||||
<meta name="renderer" content="webkit" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
|
||||
|
||||
<!-- apple splash -->
|
||||
<link href="splash/iphone5_splash.png"
|
||||
media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"
|
||||
rel="apple-touch-startup-image" />
|
||||
<link href="splash/iphone6_splash.png"
|
||||
media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)"
|
||||
rel="apple-touch-startup-image" />
|
||||
<link href="splash/iphoneplus_splash.png"
|
||||
media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)"
|
||||
rel="apple-touch-startup-image" />
|
||||
<link href="splash/iphonex_splash.png"
|
||||
media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)"
|
||||
rel="apple-touch-startup-image" />
|
||||
<link href="splash/iphonexr_splash.png"
|
||||
media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)"
|
||||
rel="apple-touch-startup-image" />
|
||||
<link href="splash/iphonexsmax_splash.png"
|
||||
media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)"
|
||||
rel="apple-touch-startup-image" />
|
||||
<link href="splash/ipad_splash.png"
|
||||
media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)"
|
||||
rel="apple-touch-startup-image" />
|
||||
<link href="splash/ipadpro1_splash.png"
|
||||
media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)"
|
||||
rel="apple-touch-startup-image" />
|
||||
<link href="splash/ipadpro3_splash.png"
|
||||
media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)"
|
||||
rel="apple-touch-startup-image" />
|
||||
<link href="splash/ipadpro2_splash.png"
|
||||
media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)"
|
||||
rel="apple-touch-startup-image" />
|
||||
<!--
|
||||
<!-- apple splash -->
|
||||
<link
|
||||
href="splash/iphone5_splash.png"
|
||||
media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"
|
||||
rel="apple-touch-startup-image"
|
||||
/>
|
||||
<link
|
||||
href="splash/iphone6_splash.png"
|
||||
media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)"
|
||||
rel="apple-touch-startup-image"
|
||||
/>
|
||||
<link
|
||||
href="splash/iphoneplus_splash.png"
|
||||
media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)"
|
||||
rel="apple-touch-startup-image"
|
||||
/>
|
||||
<link
|
||||
href="splash/iphonex_splash.png"
|
||||
media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)"
|
||||
rel="apple-touch-startup-image"
|
||||
/>
|
||||
<link
|
||||
href="splash/iphonexr_splash.png"
|
||||
media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)"
|
||||
rel="apple-touch-startup-image"
|
||||
/>
|
||||
<link
|
||||
href="splash/iphonexsmax_splash.png"
|
||||
media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)"
|
||||
rel="apple-touch-startup-image"
|
||||
/>
|
||||
<link
|
||||
href="splash/ipad_splash.png"
|
||||
media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)"
|
||||
rel="apple-touch-startup-image"
|
||||
/>
|
||||
<link
|
||||
href="splash/ipadpro1_splash.png"
|
||||
media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)"
|
||||
rel="apple-touch-startup-image"
|
||||
/>
|
||||
<link
|
||||
href="splash/ipadpro3_splash.png"
|
||||
media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)"
|
||||
rel="apple-touch-startup-image"
|
||||
/>
|
||||
<link
|
||||
href="splash/ipadpro2_splash.png"
|
||||
media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)"
|
||||
rel="apple-touch-startup-image"
|
||||
/>
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is added to the
|
||||
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="manifest.json" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
|
||||
<link rel="shortcut icon" href="favicon.ico" />
|
||||
<!--
|
||||
<link rel="manifest" href="manifest.json" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
|
||||
<link rel="shortcut icon" href="favicon.ico" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
@ -63,26 +84,26 @@
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
|
||||
<title>中国传统颜色手册 | Chinese Color Cheatsheet</title>
|
||||
<meta name="description" content="中国色，中国风，中国传统颜色，设计，Chinese color cheatsheet online" />
|
||||
</head>
|
||||
<title>中国传统颜色手册 | Chinese Color Cheatsheet</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="中国色，中国风，中国传统颜色，设计，Chinese color cheat sheet online"
|
||||
/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>
|
||||
您需要开启Javascript功能
|
||||
</noscript>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-150673549-1"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
gtag('js', new Date());
|
||||
<body>
|
||||
<noscript> 您需要开启Javascript功能 </noscript>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-150673549-1"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'UA-150673549-1');
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
gtag('config', 'UA-150673549-1');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
33
package.json
33
package.json
@ -1,13 +1,12 @@
|
||||
{
|
||||
"name": "chinese-colors",
|
||||
"version": "3.0.0",
|
||||
"description": "Chinese Color Cheatsheet",
|
||||
"main": "index.js",
|
||||
"version": "4.0.0",
|
||||
"description": "Chinese color cheat sheet",
|
||||
"main": "src/main.tsx",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"serve": "vite preview",
|
||||
"prepare": "husky install"
|
||||
"serve": "vite preview"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@ -38,21 +37,19 @@
|
||||
"react-copy-to-clipboard": "^5.1.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-github-btn": "^1.4.0",
|
||||
"react-router-dom": "^6.8.1",
|
||||
"smooth-scroll-into-view-if-needed": "^1.1.33",
|
||||
"styled-components": "^5.3.6",
|
||||
"styled-reset": "^4.4.5"
|
||||
"react-router-dom": "^6.16.0",
|
||||
"smooth-scroll-into-view-if-needed": "^2.0.2",
|
||||
"styled-components": "^6.0.8",
|
||||
"styled-reset": "^4.5.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-react": "^3.1.0",
|
||||
"eslint": "^8.34.0",
|
||||
"eslint-config-prettier": "^8.6.0",
|
||||
"eslint-plugin-react": "^7.32.2",
|
||||
"@vitejs/plugin-react": "^4.1.0",
|
||||
"eslint": "^8.50.0",
|
||||
"eslint-config-prettier": "^9.0.0",
|
||||
"eslint-plugin-react": "^7.33.2",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"husky": "^8.0.3",
|
||||
"lint-staged": "^13.1.1",
|
||||
"prettier": "^2.8.4",
|
||||
"vite": "^4.1.1"
|
||||
"prettier": "^3.0.3",
|
||||
"vite": "^4.4.9"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16.0.0",
|
||||
@ -70,4 +67,4 @@
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
|
||||
import { HashRouter as Router, Route, Routes } from 'react-router-dom';
|
||||
import Home from './pages/index';
|
||||
import SharePage from './pages/share';
|
||||
|
||||
|
||||
@ -39,8 +39,12 @@ const Wrapper = styled.section`
|
||||
}};
|
||||
background-image: url(${BgImage}), url(${BgBtmImage});
|
||||
background-repeat: no-repeat, repeat-x;
|
||||
background-position: 0 0, bottom;
|
||||
background-size: contain, auto 1.4rem;
|
||||
background-position:
|
||||
0 0,
|
||||
bottom;
|
||||
background-size:
|
||||
contain,
|
||||
auto 1.4rem;
|
||||
padding-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
transition: all 0.5s;
|
||||
@ -103,6 +107,9 @@ const Wrapper = styled.section`
|
||||
padding-left: 0.4rem;
|
||||
}
|
||||
}
|
||||
&.ad {
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
}
|
||||
.reward {
|
||||
width: 10rem;
|
||||
@ -170,12 +177,20 @@ export default function InfoModal({ closeModal, bgColor }) {
|
||||
|
||||
<p>
|
||||
<span>
|
||||
Copyright © 2019 by
|
||||
Copyright © 2023 by
|
||||
<a href="//yangerxiao.com" target="_blank">
|
||||
Tristan
|
||||
</a>
|
||||
</span>
|
||||
</p>
|
||||
<p className="ad">
|
||||
<span>
|
||||
经典扫雷小游戏
|
||||
<a href="//ohminesweeper.online" target="_blank">
|
||||
Minesweeper Online
|
||||
</a>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</Wrapper>
|
||||
);
|
||||
|
||||
@ -2,11 +2,10 @@ import ReactDOM from 'react-dom/client';
|
||||
import App from './App';
|
||||
import GlobalStyle from './Global.style';
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
|
||||
root.render(
|
||||
<>
|
||||
<GlobalStyle />
|
||||
<App />
|
||||
</>
|
||||
);
|
||||
|
||||
24
tsconfig.json
Normal file
24
tsconfig.json
Normal file
@ -0,0 +1,24 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["DOM", "DOM.Iterable", "ESNext"],
|
||||
"allowJs": false,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": false,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"baseUrl": "./",
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src/types", "src"]
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user