forked from mirror/chinese-colors
refactor: build with vite
This commit is contained in:
Tristan Yang
parent
77e886cb73
commit
01a07c4750
204
CHANGELOG.md
204
CHANGELOG.md
@ -1,204 +0,0 @@
|
||||
# Changelog
|
||||
|
||||
Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
|
||||
|
||||
## [v2.2.0](https://github.com/zerosoul/chinese-colors/compare/v2.1.0...v2.2.0) - 2019-09-27
|
||||
|
||||
### Commits
|
||||
|
||||
- feat: add peorty to wallpaper [`ab67986`](https://github.com/zerosoul/chinese-colors/commit/ab67986aab82a34b2d72db572611600b55a17e17)
|
||||
- refactor: poetry hooks [`4779904`](https://github.com/zerosoul/chinese-colors/commit/47799041995b9a05817b8c98cb3591974074ffd1)
|
||||
- fix: scroll top [`27e46ba`](https://github.com/zerosoul/chinese-colors/commit/27e46ba59c1c4416f20da13300759f07b280bf35)
|
||||
- fix: page scrollable [`6a3a183`](https://github.com/zerosoul/chinese-colors/commit/6a3a1837fc6f8e45632ac9054e4e64eb9b77d86e)
|
||||
- refactor: crop image [`1d8644f`](https://github.com/zerosoul/chinese-colors/commit/1d8644f94b381ca3f2f160f46e184b6d929d2ef7)
|
||||
|
||||
## [v2.1.0](https://github.com/zerosoul/chinese-colors/compare/v2.0.0...v2.1.0) - 2019-09-26
|
||||
|
||||
### Commits
|
||||
|
||||
- feat: add share card image [`37a9233`](https://github.com/zerosoul/chinese-colors/commit/37a923335732bc80ad199762efffc9995097a321)
|
||||
- docs: add color id [`343a45d`](https://github.com/zerosoul/chinese-colors/commit/343a45d626ef3dee19aff864084c12fb564be6fc)
|
||||
- fix: router basename [`617a8e6`](https://github.com/zerosoul/chinese-colors/commit/617a8e613b9d64e5aadefdeb3e58d75cd69009e3)
|
||||
- Create CODE_OF_CONDUCT.md [`be54eb7`](https://github.com/zerosoul/chinese-colors/commit/be54eb75f75035d95efd7bd097243bc41e862716)
|
||||
- docs: update change log [`28b4228`](https://github.com/zerosoul/chinese-colors/commit/28b42280f47895c0354d77bd84db5faca4156d0d)
|
||||
- docs: update readme [`26c5589`](https://github.com/zerosoul/chinese-colors/commit/26c55894d8185423e310d2328261aa70991ff5bb)
|
||||
- refactor: webview image [`d7f4ff3`](https://github.com/zerosoul/chinese-colors/commit/d7f4ff3d838a8849b581fd74e32220f6ffe73136)
|
||||
- fix: mobile image generating [`4ab9ffe`](https://github.com/zerosoul/chinese-colors/commit/4ab9ffe5c024fc1345da5a0fd2bd021289e9ad16)
|
||||
- docs: add images [`4bb5c7e`](https://github.com/zerosoul/chinese-colors/commit/4bb5c7ed65addea04caee3654e3a9a5cd5ecc13c)
|
||||
- Create LICENSE [`f5ba01f`](https://github.com/zerosoul/chinese-colors/commit/f5ba01f3f03620b9151005f4be5e01f830d4cf5c)
|
||||
- docs: add image [`01072f8`](https://github.com/zerosoul/chinese-colors/commit/01072f8b9a52f2159af5dce897928320eb96a8e6)
|
||||
- refactor: card image generating fun [`67ca696`](https://github.com/zerosoul/chinese-colors/commit/67ca69642935716ae8d44c520e9f7d14c77f32c2)
|
||||
- Update README.md [`75b2566`](https://github.com/zerosoul/chinese-colors/commit/75b2566c59e843716601ba9ddc6fcf12029276f4)
|
||||
- chore: remove reward [`0989fd5`](https://github.com/zerosoul/chinese-colors/commit/0989fd52389cfd2dacf53b3919ede3ee8329fac1)
|
||||
- refactor: remove basename [`7091b59`](https://github.com/zerosoul/chinese-colors/commit/7091b59fb377e85b07bc7765b261dee04a2fd574)
|
||||
- feat: add animate to poetry [`d9103aa`](https://github.com/zerosoul/chinese-colors/commit/d9103aadc4fa25e2493c0c080b76e4e3df21fb8b)
|
||||
- refactor: remove poetry font color [`f33fed8`](https://github.com/zerosoul/chinese-colors/commit/f33fed8dc9e114e0b0c9c5c52c3c8c8d11fa5bbe)
|
||||
- refactor: set poetry loading state [`ff18e93`](https://github.com/zerosoul/chinese-colors/commit/ff18e9333b38b1ebc8a45e7b4049d87690f9770b)
|
||||
- fix: image zindex [`2b1298a`](https://github.com/zerosoul/chinese-colors/commit/2b1298a4cb226456ef627fcb2af2cbbf57f4110c)
|
||||
- fix: this? [`05006c9`](https://github.com/zerosoul/chinese-colors/commit/05006c967b3b6767e537731f5754f7571a73d821)
|
||||
- docs: change domain [`4147cc0`](https://github.com/zerosoul/chinese-colors/commit/4147cc0f2409569a45e99e76e0904ffcfff48b05)
|
||||
- fix: add min height to color title [`452acbe`](https://github.com/zerosoul/chinese-colors/commit/452acbea9dd3804bd7c1b2abf4509415190306cc)
|
||||
- fix: no padding [`70a517f`](https://github.com/zerosoul/chinese-colors/commit/70a517f85c146556de909b0b1daa43190a80321c)
|
||||
|
||||
## [v2.0.0](https://github.com/zerosoul/chinese-colors/compare/v1.4.0...v2.0.0) - 2019-09-21
|
||||
|
||||
### Commits
|
||||
|
||||
- build: update packages [`7f85973`](https://github.com/zerosoul/chinese-colors/commit/7f859737ffcf59a2eac1c3726576b50e1c33192e)
|
||||
- feat: add poetry [`4f5a62c`](https://github.com/zerosoul/chinese-colors/commit/4f5a62c8f14b90ef8576a06055d4e9ecefac487e)
|
||||
- fix: same hex [`2066b61`](https://github.com/zerosoul/chinese-colors/commit/2066b61d1fc92e15ea565c191947d7dc7fa46229)
|
||||
- docs: update readme [`6686d36`](https://github.com/zerosoul/chinese-colors/commit/6686d366ea4de0142fde7e14292f067d012423fb)
|
||||
- fix: fix merge [`0f4313d`](https://github.com/zerosoul/chinese-colors/commit/0f4313d6bdc205cd91b126e6b99328ada0550245)
|
||||
- docs: add markdown lint config file [`3014b03`](https://github.com/zerosoul/chinese-colors/commit/3014b03cc71faefd97117ae5d6af493c71b68086)
|
||||
|
||||
## [v1.4.0](https://github.com/zerosoul/chinese-colors/compare/v1.3.5...v1.4.0) - 2019-09-21
|
||||
|
||||
### Commits
|
||||
|
||||
- refactor: change color cmyk circle to svg [`204731c`](https://github.com/zerosoul/chinese-colors/commit/204731c022804303b04c3665361794fde0a79f8a)
|
||||
- refactor: color percent [`85e9d59`](https://github.com/zerosoul/chinese-colors/commit/85e9d59cfa90acd450e56a99e95f9828d872e890)
|
||||
- docs: update readme [`8d97d24`](https://github.com/zerosoul/chinese-colors/commit/8d97d2463899ded3deab81c9ce5491f871879d0e)
|
||||
- refactor: update UI [`b2d1797`](https://github.com/zerosoul/chinese-colors/commit/b2d1797a41db0b83e4a29cdf3ed872e4579c830b)
|
||||
- feat: get the correct text color [`a4b7aed`](https://github.com/zerosoul/chinese-colors/commit/a4b7aedc758335d45fd4ef4816ecb730c1a667a5)
|
||||
- docs: update readme [`27a19b8`](https://github.com/zerosoul/chinese-colors/commit/27a19b8622f5c27539c08b4f6bd294237af581f3)
|
||||
- refactor: update UI [`fff1ee7`](https://github.com/zerosoul/chinese-colors/commit/fff1ee7ffd67113415a4923cf1ab26c6d854abd9)
|
||||
- docs: update readme [`f3adeb5`](https://github.com/zerosoul/chinese-colors/commit/f3adeb58846cf9ace6c39322fe1c4c6c52a4864f)
|
||||
- docs: update readme [`d8cc317`](https://github.com/zerosoul/chinese-colors/commit/d8cc3179fa2d4c46c7e6b09f6ee46bd9af22dd59)
|
||||
- refactor: change document title splitter [`2fbf537`](https://github.com/zerosoul/chinese-colors/commit/2fbf5375de6f8cde348ed036fba2f353866a8040)
|
||||
- Update README.md [`575dfde`](https://github.com/zerosoul/chinese-colors/commit/575dfdedfda19415be995827d762f7572ec5d95d)
|
||||
|
||||
## [v1.3.5](https://github.com/zerosoul/chinese-colors/compare/v1.3.4...v1.3.5) - 2019-09-18
|
||||
|
||||
### Commits
|
||||
|
||||
- docs: update readme [`1c8a801`](https://github.com/zerosoul/chinese-colors/commit/1c8a801a230691fbca92abde6aff7896b96c89af)
|
||||
|
||||
## [v1.3.4](https://github.com/zerosoul/chinese-colors/compare/v1.3.3...v1.3.4) - 2019-09-18
|
||||
|
||||
### Commits
|
||||
|
||||
- docs: update changelog [`57ac5eb`](https://github.com/zerosoul/chinese-colors/commit/57ac5eb52a19aa86856dafb7d0bb4b781fe19c90)
|
||||
- docs: update readme [`286dd1a`](https://github.com/zerosoul/chinese-colors/commit/286dd1a9932ece4f18636aa70dc5e685eea92564)
|
||||
|
||||
## [v1.3.3](https://github.com/zerosoul/chinese-colors/compare/v1.3.2...v1.3.3) - 2019-09-18
|
||||
|
||||
### Commits
|
||||
|
||||
- build: remove redux package [`30d5d19`](https://github.com/zerosoul/chinese-colors/commit/30d5d19cd4f371e7342d08de5f7950f1479da893)
|
||||
- docs: update readme [`5302da0`](https://github.com/zerosoul/chinese-colors/commit/5302da03a3cb83b6d65ebe43cc34ef54abb32f2d)
|
||||
|
||||
## [v1.3.2](https://github.com/zerosoul/chinese-colors/compare/v1.3.1...v1.3.2) - 2019-09-18
|
||||
|
||||
### Commits
|
||||
|
||||
- docs: add english version readme [`f0a5294`](https://github.com/zerosoul/chinese-colors/commit/f0a52945245f1f763a047807be84c3d74aebba50)
|
||||
|
||||
## [v1.3.1](https://github.com/zerosoul/chinese-colors/compare/v1.3.0...v1.3.1) - 2019-09-18
|
||||
|
||||
### Commits
|
||||
|
||||
- docs: update cong qian color [`149c01c`](https://github.com/zerosoul/chinese-colors/commit/149c01c99b63effecc73fd55a5aee5597a20408d)
|
||||
|
||||
## [v1.3.0](https://github.com/zerosoul/chinese-colors/compare/v1.2.0...v1.3.0) - 2019-09-18
|
||||
|
||||
### Commits
|
||||
|
||||
- build: update packages [`4af7157`](https://github.com/zerosoul/chinese-colors/commit/4af71576956bf98903bcf9ff7b15f5d7eeb7cb81)
|
||||
- refactor: update icons [`5fc12c4`](https://github.com/zerosoul/chinese-colors/commit/5fc12c4fef2a96a33c5d6a3dbf510d08d050cfee)
|
||||
- feat: code splitting with react lazy & suspense [`c5bb288`](https://github.com/zerosoul/chinese-colors/commit/c5bb2883d7a42b19c5a76e4813b74d3ab543d258)
|
||||
- feat: random change theme color [`470293a`](https://github.com/zerosoul/chinese-colors/commit/470293a522324aa8fbb1ac21e579c980f3218fd8)
|
||||
- docs: update change log [`7389373`](https://github.com/zerosoul/chinese-colors/commit/7389373a926c18d741c5a0c1a9d124273035ac9d)
|
||||
- refactor: extract animate [`e66ba22`](https://github.com/zerosoul/chinese-colors/commit/e66ba22cfca5f16ef99e896309e08c1476191584)
|
||||
- feat: add product hunt link [`2ea4210`](https://github.com/zerosoul/chinese-colors/commit/2ea42107c65e9d78d393fd46cc169df0bf09e994)
|
||||
- feat: add reward image [`034f27e`](https://github.com/zerosoul/chinese-colors/commit/034f27e8c8921294c7def257814f8a2486e191a2)
|
||||
- feat: add app tip [`c9327ed`](https://github.com/zerosoul/chinese-colors/commit/c9327ed11f82484588b5f557c4d8c8aea0f14da4)
|
||||
- feat: copy tip add animate [`b4d364a`](https://github.com/zerosoul/chinese-colors/commit/b4d364a6ccf4bc49f3f313a5da452045754f7090)
|
||||
- refactor: color change side effect [`26e87ac`](https://github.com/zerosoul/chinese-colors/commit/26e87ac353af053e48014017fad21b94c7150d81)
|
||||
- feat: logo background color auto change by currColor [`6cdd539`](https://github.com/zerosoul/chinese-colors/commit/6cdd539b24afe2170ea0ad837dc490f06e458610)
|
||||
- fix: enable heteronym [`0114d35`](https://github.com/zerosoul/chinese-colors/commit/0114d3536609e97e61233b9cbb494da10934c921)
|
||||
- fix: download btn trigger theme color change [`f395c3c`](https://github.com/zerosoul/chinese-colors/commit/f395c3cb31fb9f904a8cab54ed095ce3f18d9e00)
|
||||
- fix: update theme color when first load [`89cc8a6`](https://github.com/zerosoul/chinese-colors/commit/89cc8a60a2bcc9d0c3b7a0c8a4122fd448b5e6be)
|
||||
- build: update building settings [`8785781`](https://github.com/zerosoul/chinese-colors/commit/8785781cd3f4511f3460302b0560a5d2448afb8c)
|
||||
- fix: add data-html2canvas-ignore [`d28493e`](https://github.com/zerosoul/chinese-colors/commit/d28493e0db4770c72b9aec658cfcd8c8bf70ddfe)
|
||||
- docs: add color image [`713cdac`](https://github.com/zerosoul/chinese-colors/commit/713cdace74f9ea54bdfd39ad3f23ef649ac8f3c5)
|
||||
- docs: update readme [`cde0b79`](https://github.com/zerosoul/chinese-colors/commit/cde0b794730172a3118d8c9505d10882888bf868)
|
||||
- feat: change first load color [`15c455a`](https://github.com/zerosoul/chinese-colors/commit/15c455a50786378ffab0540ab246c65bd2467b93)
|
||||
- feat: add color name to document title [`8d3e2cd`](https://github.com/zerosoul/chinese-colors/commit/8d3e2cd3cc27fe99073e9ce0d9b7d13eaea24051)
|
||||
- feat: update currColor when currSet changed [`9c3f9ab`](https://github.com/zerosoul/chinese-colors/commit/9c3f9aba04298a7f4aa1004b79c6ce2fd9c68cd7)
|
||||
|
||||
## [v1.2.0](https://github.com/zerosoul/chinese-colors/compare/v1.1.0...v1.2.0) - 2019-09-14
|
||||
|
||||
### Commits
|
||||
|
||||
- feat: add figure [`4adb4c3`](https://github.com/zerosoul/chinese-colors/commit/4adb4c35f8d1a22a783c571fa7d6050c4c4a4382)
|
||||
- feat: screenshot [`8d2e950`](https://github.com/zerosoul/chinese-colors/commit/8d2e950e408ccba60b567457b3db793ded436964)
|
||||
- refactor: image download [`69000ce`](https://github.com/zerosoul/chinese-colors/commit/69000ce118035833f5d6769182ea828944c4684d)
|
||||
- feat: update document title [`4c1dc4e`](https://github.com/zerosoul/chinese-colors/commit/4c1dc4e2712d6b5f3de9aefd2fb9b8f62b90915b)
|
||||
- feat: rename and change icon [`1ec168e`](https://github.com/zerosoul/chinese-colors/commit/1ec168eb5650c9efcca05246ab77fe5c06ac0a96)
|
||||
- refactor: base64 to blob [`a61a308`](https://github.com/zerosoul/chinese-colors/commit/a61a308b6a084f74c9e11b62dfd22d21f764975b)
|
||||
- feat: add default image [`8d762f3`](https://github.com/zerosoul/chinese-colors/commit/8d762f33377239309b34f4a796742b3d4782dd23)
|
||||
- feat: remove divider [`18bf815`](https://github.com/zerosoul/chinese-colors/commit/18bf815eedd76bc01bb510cc30b286e662efae67)
|
||||
- fix: icon width responsive [`73f22b2`](https://github.com/zerosoul/chinese-colors/commit/73f22b293c4881cb28f408a87514a43f9a42ec5c)
|
||||
- docs: add two image [`8182e8a`](https://github.com/zerosoul/chinese-colors/commit/8182e8ae7627deb0d139f9d756d8e686425e1696)
|
||||
- refactor: update minor UX [`abbd438`](https://github.com/zerosoul/chinese-colors/commit/abbd4380264aad31dd7b57cbd15f0f56bbbe0fa4)
|
||||
- refactor: remove colorset tip [`8083b44`](https://github.com/zerosoul/chinese-colors/commit/8083b4444e5fdbb3fb81099505cba7cfc787b4b6)
|
||||
- docs: update readme.md [`455c116`](https://github.com/zerosoul/chinese-colors/commit/455c1162018a4b67af0c7954b7e19bee04c42400)
|
||||
- refactor: update micro UI [`0adacd1`](https://github.com/zerosoul/chinese-colors/commit/0adacd11bd6734c3a58c107d16ace70d40dea9b4)
|
||||
- docs: add image [`cb4ecad`](https://github.com/zerosoul/chinese-colors/commit/cb4ecada2f47aa662debf009dd01c08ec1f3d399)
|
||||
- feat: capitalize the pinyin [`45ace39`](https://github.com/zerosoul/chinese-colors/commit/45ace39b00ee621160c9f44e7d397826abf71425)
|
||||
- fix: add top padding [`ea6536d`](https://github.com/zerosoul/chinese-colors/commit/ea6536dac5f8aac4c604dbf846802443b45e1bf5)
|
||||
- feat: hide header when mobile [`79f72cc`](https://github.com/zerosoul/chinese-colors/commit/79f72cc86b743f39017eacd864c8072e0e318978)
|
||||
- docs: update readme [`6a1ad81`](https://github.com/zerosoul/chinese-colors/commit/6a1ad8173df47616ba69ac65f25ae03a88ae5548)
|
||||
- docs: update inspired [`ea53dd7`](https://github.com/zerosoul/chinese-colors/commit/ea53dd71dc205eb7a1bdf6eebf0eea37c8b52bff)
|
||||
- feat: add intro title [`7ce2b03`](https://github.com/zerosoul/chinese-colors/commit/7ce2b03f7ec820bdd3236926d5f2cb3caf034b10)
|
||||
- docs: update readme [`fbf6f25`](https://github.com/zerosoul/chinese-colors/commit/fbf6f25e78c1a7dacb5dea29cc3fbb5a5e4a729c)
|
||||
- docs: add image [`a609512`](https://github.com/zerosoul/chinese-colors/commit/a60951203aab541a554d8e5a2305bbc29ac545e4)
|
||||
- feat: add column margin [`724ef9f`](https://github.com/zerosoul/chinese-colors/commit/724ef9f032bc9b9ab56d1a42bd3f659969ce4dc6)
|
||||
- refactor: useMobile update the width [`dca6098`](https://github.com/zerosoul/chinese-colors/commit/dca6098f0c37fa23a9c167f47cd0edf18d643ea9)
|
||||
- docs: add image [`06721ad`](https://github.com/zerosoul/chinese-colors/commit/06721add65e817f722d34486a44fcd9a7cf47f54)
|
||||
|
||||
## [v1.1.0](https://github.com/zerosoul/chinese-colors/compare/v1.0.0...v1.1.0) - 2019-09-11
|
||||
|
||||
### Commits
|
||||
|
||||
- feat: add favorite & copy hex [`ca9f58e`](https://github.com/zerosoul/chinese-colors/commit/ca9f58e7ec771a92664734fdc0595bf6657f969c)
|
||||
- feat: update color set ux [`12bca72`](https://github.com/zerosoul/chinese-colors/commit/12bca721379c6aff9e9f233f68da0cfebe2cd2f2)
|
||||
- feat: add no fav tip [`fb2812e`](https://github.com/zerosoul/chinese-colors/commit/fb2812e91f9ce418864048145bb4b17751b452de)
|
||||
- feat: add tranditional Chinese font [`146e836`](https://github.com/zerosoul/chinese-colors/commit/146e836b3a16c9645d91f143faf7f908015a146a)
|
||||
- refactor: adjust box-shadow [`d09bfd3`](https://github.com/zerosoul/chinese-colors/commit/d09bfd3bb3e79869ce222c4e1e048d5fd1ac9c7e)
|
||||
- fix: set width bigger [`9824e4c`](https://github.com/zerosoul/chinese-colors/commit/9824e4c0b74c7bad3e02b47a773e064a2125a037)
|
||||
- fix: mobile columns chaos [`1daccbb`](https://github.com/zerosoul/chinese-colors/commit/1daccbb118a4b22efccaf100cbe90bc29b9b59a9)
|
||||
|
||||
## v1.0.0 - 2019-09-10
|
||||
|
||||
### Commits
|
||||
|
||||
- Initial commit [`cf0e4a7`](https://github.com/zerosoul/chinese-colors/commit/cf0e4a7ad2584ad3cee8ce7f8b11e7ad81b1191d)
|
||||
- feat: first blood [`8cb20a1`](https://github.com/zerosoul/chinese-colors/commit/8cb20a1cc035a59167ea3332d9054efe8518bb66)
|
||||
- build: update packages [`ce51554`](https://github.com/zerosoul/chinese-colors/commit/ce515545247f79b85b46ab0261226aee0562f834)
|
||||
- refactor: change color source [`dcb50b0`](https://github.com/zerosoul/chinese-colors/commit/dcb50b009966efbf72a3c4b831685315a0c5671c)
|
||||
- feat: second blood [`c6f3e0d`](https://github.com/zerosoul/chinese-colors/commit/c6f3e0da3dfda41b915ea4a3ef8cf4345525e300)
|
||||
- feat: modal & texture & style [`5bc5969`](https://github.com/zerosoul/chinese-colors/commit/5bc596925956460552c1dc19a7965251865cf73a)
|
||||
- feat: update workbox setting [`0af7bf2`](https://github.com/zerosoul/chinese-colors/commit/0af7bf22ebb641ee68f3ca76ad116b226ce97e64)
|
||||
- refactor: modal & param style [`9bd8b27`](https://github.com/zerosoul/chinese-colors/commit/9bd8b27a11a788b676d8ce3765404d96309c562e)
|
||||
- refactor: color click response delay [`ff1b0c0`](https://github.com/zerosoul/chinese-colors/commit/ff1b0c0290e395ae9e34e82e0cc97e832ded7f25)
|
||||
- chore: unused code [`09665b1`](https://github.com/zerosoul/chinese-colors/commit/09665b141715ab9307d5278a24473a0706c9e056)
|
||||
- docs: readme.md [`3a53a7b`](https://github.com/zerosoul/chinese-colors/commit/3a53a7b4902f52dcd4b174b7f31b46496b90da46)
|
||||
- feat: updates [`da0f209`](https://github.com/zerosoul/chinese-colors/commit/da0f2095a474c3a9a37117ba6d648bde87b8e7dc)
|
||||
- feat: scrollIntoView when page load [`18ccce4`](https://github.com/zerosoul/chinese-colors/commit/18ccce452cef4727abf0d890fdb974b5d528d23c)
|
||||
- refactor: update UI [`089694e`](https://github.com/zerosoul/chinese-colors/commit/089694e2fdcff30aed9c47d3e09c8b4e25466522)
|
||||
- docs: update readme [`ca652cf`](https://github.com/zerosoul/chinese-colors/commit/ca652cf2c4d0abec5aa55f778113e855191da3e5)
|
||||
- fix: update package name [`0124081`](https://github.com/zerosoul/chinese-colors/commit/0124081066742d1dfc60d1c087c3b7290f48a7c9)
|
||||
- feat: show all colors [`7d141ca`](https://github.com/zerosoul/chinese-colors/commit/7d141ca49064eca5e02ff19108f90f1afa560c34)
|
||||
- docs: update readme [`63c6fef`](https://github.com/zerosoul/chinese-colors/commit/63c6feff9554de286ccf99424b1aaefbd3526b68)
|
||||
- fix: update style [`ac28698`](https://github.com/zerosoul/chinese-colors/commit/ac28698ad3128fa77ce963c522e55d528a476f18)
|
||||
- feat: remove special font [`9f26656`](https://github.com/zerosoul/chinese-colors/commit/9f26656966555be49fa3cc37746a1352aa9be242)
|
||||
- feat: reg sw [`9f47fc0`](https://github.com/zerosoul/chinese-colors/commit/9f47fc0b4885dcd0a0273fc8705c3475cc015fb3)
|
||||
- build: exclude index.html cache [`4747ad4`](https://github.com/zerosoul/chinese-colors/commit/4747ad43bf49e4613d0c7355f95df4f75856fc1e)
|
||||
- fix: prod check [`bcd4b72`](https://github.com/zerosoul/chinese-colors/commit/bcd4b7289445658a2b10f7a2d71605b15bbeb257)
|
||||
- Update README.md [`0aa6efb`](https://github.com/zerosoul/chinese-colors/commit/0aa6efbf6e6e94cb6da59aa40283727a7b719939)
|
||||
- fix: add root path exclude cache [`dc96ec4`](https://github.com/zerosoul/chinese-colors/commit/dc96ec4609f1d80529ef3a396561a6d54d391400)
|
||||
- Update README.md [`e1bbfaa`](https://github.com/zerosoul/chinese-colors/commit/e1bbfaa3a6e88570a0e3cbe4ec2dab63a05ed979)
|
||||
- fix: touch flash [`d8f7379`](https://github.com/zerosoul/chinese-colors/commit/d8f73796e1ed3c804f6684a328a975c2bae66925)
|
||||
- fix: color height: align-self: flex-start [`3eae222`](https://github.com/zerosoul/chinese-colors/commit/3eae222f427ff49a027fc106626cdb0773197320)
|
||||
- feat: change bg [`d5a982f`](https://github.com/zerosoul/chinese-colors/commit/d5a982f43cff1dd06b867ee1227d69705169bccd)
|
||||
@ -1,28 +0,0 @@
|
||||
const presets = [
|
||||
[
|
||||
'@babel/preset-env',
|
||||
{
|
||||
modules: false,
|
||||
useBuiltIns: 'usage',
|
||||
corejs: 3,
|
||||
targets: {
|
||||
chrome: 70
|
||||
}
|
||||
}
|
||||
],
|
||||
[
|
||||
'@babel/preset-react',
|
||||
{
|
||||
runtime: 'automatic'
|
||||
}
|
||||
]
|
||||
];
|
||||
const plugins = [
|
||||
process.env.NODE_ENV == 'development' && 'react-refresh/babel',
|
||||
'@babel/plugin-syntax-dynamic-import',
|
||||
'@babel/plugin-proposal-class-properties',
|
||||
'@babel/plugin-proposal-json-strings',
|
||||
'@babel/plugin-proposal-nullish-coalescing-operator'
|
||||
].filter(Boolean);
|
||||
|
||||
module.exports = { presets, plugins };
|
||||
@ -1,36 +0,0 @@
|
||||
# Changelog
|
||||
|
||||
Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
|
||||
|
||||
{{#each releases}}
|
||||
{{#if href}}
|
||||
## [{{title}}]({{href}}){{#if tag}} - {{isoDate}}{{/if}}
|
||||
{{else}}
|
||||
## {{title}}{{#if tag}} - {{isoDate}}{{/if}}
|
||||
{{/if}}
|
||||
|
||||
{{#if summary}}
|
||||
{{summary}}
|
||||
{{/if}}
|
||||
|
||||
{{#if merges}}
|
||||
### Merged
|
||||
|
||||
{{#each merges}}
|
||||
- {{{message}}} {{#if href}}[`#{{id}}`]({{href}}){{/if}}
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
|
||||
{{#if fixes}}
|
||||
### Fixed
|
||||
|
||||
{{#each fixes}}
|
||||
- {{{commit.subject}}}{{#each fixes}} {{#if href}}[`#{{id}}`]({{href}}){{/if}}{{/each}}
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
|
||||
{{#commit-list commits heading='### Commits'}}
|
||||
- {{#if breaking}}**Breaking change:** {{/if}}{{{subject}}} {{#if href}}[`{{shorthash}}`]({{href}}){{/if}}
|
||||
{{/commit-list}}
|
||||
|
||||
{{/each}}
|
||||
@ -1 +0,0 @@
|
||||
module.exports = { extends: ['@commitlint/config-conventional'] };
|
||||
106
config/env.js
106
config/env.js
@ -1,106 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const paths = require('./paths');
|
||||
|
||||
// Make sure that including paths.js after env.js will read .env variables.
|
||||
delete require.cache[require.resolve('./paths')];
|
||||
|
||||
const NODE_ENV = process.env.NODE_ENV;
|
||||
if (!NODE_ENV) {
|
||||
throw new Error(
|
||||
'The NODE_ENV environment variable is required but was not specified.'
|
||||
);
|
||||
}
|
||||
|
||||
// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
|
||||
const dotenvFiles = [
|
||||
`${paths.dotenv}.${NODE_ENV}.local`,
|
||||
// Don't include `.env.local` for `test` environment
|
||||
// since normally you expect tests to produce the same
|
||||
// results for everyone
|
||||
NODE_ENV !== 'test' && `${paths.dotenv}.local`,
|
||||
`${paths.dotenv}.${NODE_ENV}`,
|
||||
paths.dotenv,
|
||||
].filter(Boolean);
|
||||
|
||||
// Load environment variables from .env* files. Suppress warnings using silent
|
||||
// if this file is missing. dotenv will never modify any environment variables
|
||||
// that have already been set. Variable expansion is supported in .env files.
|
||||
// https://github.com/motdotla/dotenv
|
||||
// https://github.com/motdotla/dotenv-expand
|
||||
dotenvFiles.forEach(dotenvFile => {
|
||||
if (fs.existsSync(dotenvFile)) {
|
||||
require('dotenv-expand')(
|
||||
require('dotenv').config({
|
||||
path: dotenvFile,
|
||||
})
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
// We support resolving modules according to `NODE_PATH`.
|
||||
// This lets you use absolute paths in imports inside large monorepos:
|
||||
// https://github.com/facebook/create-react-app/issues/253.
|
||||
// It works similar to `NODE_PATH` in Node itself:
|
||||
// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
|
||||
// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
|
||||
// Otherwise, we risk importing Node.js core modules into an app instead of webpack shims.
|
||||
// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
|
||||
// We also resolve them to make sure all tools using them work consistently.
|
||||
const appDirectory = fs.realpathSync(process.cwd());
|
||||
process.env.NODE_PATH = (process.env.NODE_PATH || '')
|
||||
.split(path.delimiter)
|
||||
.filter(folder => folder && !path.isAbsolute(folder))
|
||||
.map(folder => path.resolve(appDirectory, folder))
|
||||
.join(path.delimiter);
|
||||
|
||||
// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
|
||||
// injected into the application via DefinePlugin in webpack configuration.
|
||||
const REACT_APP = /^REACT_APP_/i;
|
||||
|
||||
function getClientEnvironment(publicUrl) {
|
||||
const raw = Object.keys(process.env)
|
||||
.filter(key => REACT_APP.test(key))
|
||||
.reduce(
|
||||
(env, key) => {
|
||||
env[key] = process.env[key];
|
||||
return env;
|
||||
},
|
||||
{
|
||||
// Useful for determining whether we’re running in production mode.
|
||||
// Most importantly, it switches React into the correct mode.
|
||||
NODE_ENV: process.env.NODE_ENV || 'development',
|
||||
// Useful for resolving the correct path to static assets in `public`.
|
||||
// For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
|
||||
// This should only be used as an escape hatch. Normally you would put
|
||||
// images into the `src` and `import` them in code to get their paths.
|
||||
PUBLIC_URL: publicUrl,
|
||||
// We support configuring the sockjs pathname during development.
|
||||
// These settings let a developer run multiple simultaneous projects.
|
||||
// They are used as the connection `hostname`, `pathname` and `port`
|
||||
// in webpackHotDevClient. They are used as the `sockHost`, `sockPath`
|
||||
// and `sockPort` options in webpack-dev-server.
|
||||
WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
|
||||
WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
|
||||
WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
|
||||
// Whether or not react-refresh is enabled.
|
||||
// react-refresh is not 100% stable at this time,
|
||||
// which is why it's disabled by default.
|
||||
// It is defined here so it is available in the webpackHotDevClient.
|
||||
FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
|
||||
}
|
||||
);
|
||||
// Stringify all values so we can feed into webpack DefinePlugin
|
||||
const stringified = {
|
||||
'process.env': Object.keys(raw).reduce((env, key) => {
|
||||
env[key] = JSON.stringify(raw[key]);
|
||||
return env;
|
||||
}, {}),
|
||||
};
|
||||
|
||||
return { raw, stringified };
|
||||
}
|
||||
|
||||
module.exports = getClientEnvironment;
|
||||
@ -1,66 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const crypto = require('crypto');
|
||||
const chalk = require('react-dev-utils/chalk');
|
||||
const paths = require('./paths');
|
||||
|
||||
// Ensure the certificate and key provided are valid and if not
|
||||
// throw an easy to debug error
|
||||
function validateKeyAndCerts({ cert, key, keyFile, crtFile }) {
|
||||
let encrypted;
|
||||
try {
|
||||
// publicEncrypt will throw an error with an invalid cert
|
||||
encrypted = crypto.publicEncrypt(cert, Buffer.from('test'));
|
||||
} catch (err) {
|
||||
throw new Error(
|
||||
`The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}`
|
||||
);
|
||||
}
|
||||
|
||||
try {
|
||||
// privateDecrypt will throw an error with an invalid key
|
||||
crypto.privateDecrypt(key, encrypted);
|
||||
} catch (err) {
|
||||
throw new Error(
|
||||
`The certificate key "${chalk.yellow(keyFile)}" is invalid.\n${
|
||||
err.message
|
||||
}`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Read file and throw an error if it doesn't exist
|
||||
function readEnvFile(file, type) {
|
||||
if (!fs.existsSync(file)) {
|
||||
throw new Error(
|
||||
`You specified ${chalk.cyan(
|
||||
type
|
||||
)} in your env, but the file "${chalk.yellow(file)}" can't be found.`
|
||||
);
|
||||
}
|
||||
return fs.readFileSync(file);
|
||||
}
|
||||
|
||||
// Get the https config
|
||||
// Return cert files if provided in env, otherwise just true or false
|
||||
function getHttpsConfig() {
|
||||
const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env;
|
||||
const isHttps = HTTPS === 'true';
|
||||
|
||||
if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) {
|
||||
const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE);
|
||||
const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE);
|
||||
const config = {
|
||||
cert: readEnvFile(crtFile, 'SSL_CRT_FILE'),
|
||||
key: readEnvFile(keyFile, 'SSL_KEY_FILE'),
|
||||
};
|
||||
|
||||
validateKeyAndCerts({ ...config, keyFile, crtFile });
|
||||
return config;
|
||||
}
|
||||
return isHttps;
|
||||
}
|
||||
|
||||
module.exports = getHttpsConfig;
|
||||
@ -1,112 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
const fs = require("fs");
|
||||
const path = require("path");
|
||||
const paths = require("./paths");
|
||||
const chalk = require("react-dev-utils/chalk");
|
||||
const resolve = require("resolve");
|
||||
|
||||
/**
|
||||
* Get additional module paths based on the baseUrl of a compilerOptions object.
|
||||
*
|
||||
* @param {Object} options
|
||||
*/
|
||||
function getAdditionalModulePaths(options = {}) {
|
||||
const baseUrl = options.baseUrl;
|
||||
|
||||
if (!baseUrl) {
|
||||
return "";
|
||||
}
|
||||
|
||||
const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
|
||||
|
||||
// We don't need to do anything if `baseUrl` is set to `node_modules`. This is
|
||||
// the default behavior.
|
||||
if (path.relative(paths.appNodeModules, baseUrlResolved) === "") {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Allow the user set the `baseUrl` to `appSrc`.
|
||||
if (path.relative(paths.appSrc, baseUrlResolved) === "") {
|
||||
return [paths.appSrc];
|
||||
}
|
||||
|
||||
// If the path is equal to the root directory we ignore it here.
|
||||
// We don't want to allow importing from the root directly as source files are
|
||||
// not transpiled outside of `src`. We do allow importing them with the
|
||||
// absolute path (e.g. `src/Components/Button.js`) but we set that up with
|
||||
// an alias.
|
||||
if (path.relative(paths.appPath, baseUrlResolved) === "") {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Otherwise, throw an error.
|
||||
throw new Error(
|
||||
chalk.red.bold(
|
||||
"Your project's `baseUrl` can only be set to `src` or `node_modules`." +
|
||||
" Create React App does not support other values at this time."
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get webpack aliases based on the baseUrl of a compilerOptions object.
|
||||
*
|
||||
* @param {*} options
|
||||
*/
|
||||
function getWebpackAliases(options = {}) {
|
||||
const baseUrl = options.baseUrl;
|
||||
|
||||
if (!baseUrl) {
|
||||
return {};
|
||||
}
|
||||
|
||||
const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
|
||||
|
||||
if (path.relative(paths.appPath, baseUrlResolved) === "") {
|
||||
return {
|
||||
src: paths.appSrc,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function getModules() {
|
||||
// Check if TypeScript is setup
|
||||
const hasTsConfig = fs.existsSync(paths.appTsConfig);
|
||||
const hasJsConfig = fs.existsSync(paths.appJsConfig);
|
||||
|
||||
if (hasTsConfig && hasJsConfig) {
|
||||
throw new Error(
|
||||
"You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file."
|
||||
);
|
||||
}
|
||||
|
||||
let config;
|
||||
|
||||
// If there's a tsconfig.json we assume it's a
|
||||
// TypeScript project and set up the config
|
||||
// based on tsconfig.json
|
||||
if (hasTsConfig) {
|
||||
const ts = require(resolve.sync("typescript", {
|
||||
basedir: paths.appNodeModules,
|
||||
}));
|
||||
config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config;
|
||||
// Otherwise we'll check if there is jsconfig.json
|
||||
// for non TS projects.
|
||||
} else if (hasJsConfig) {
|
||||
config = require(paths.appJsConfig);
|
||||
}
|
||||
|
||||
config = config || {};
|
||||
const options = config.compilerOptions || {};
|
||||
|
||||
const additionalModulePaths = getAdditionalModulePaths(options);
|
||||
|
||||
return {
|
||||
additionalModulePaths: additionalModulePaths,
|
||||
webpackAliases: getWebpackAliases(options),
|
||||
hasTsConfig,
|
||||
};
|
||||
}
|
||||
|
||||
module.exports = getModules();
|
||||
@ -1,68 +0,0 @@
|
||||
const path = require("path");
|
||||
const fs = require("fs");
|
||||
const getPublicUrlOrPath = require("react-dev-utils/getPublicUrlOrPath");
|
||||
|
||||
// Make sure any symlinks in the project folder are resolved:
|
||||
// https://github.com/facebook/create-react-app/issues/637
|
||||
const appDirectory = fs.realpathSync(process.cwd());
|
||||
const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);
|
||||
|
||||
// We use `PUBLIC_URL` environment variable or "homepage" field to infer
|
||||
// "public path" at which the app is served.
|
||||
// webpack needs to know it to put the right <script> hrefs into HTML even in
|
||||
// single-page apps that may serve index.html for nested URLs like /todos/42.
|
||||
// We can't use a relative path in HTML because we don't want to load something
|
||||
// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
|
||||
const publicUrlOrPath = getPublicUrlOrPath(
|
||||
process.env.NODE_ENV === "development",
|
||||
require(resolveApp("package.json")).homepage,
|
||||
process.env.PUBLIC_URL
|
||||
);
|
||||
|
||||
const moduleFileExtensions = [
|
||||
"web.mjs",
|
||||
"mjs",
|
||||
"web.js",
|
||||
"js",
|
||||
"web.ts",
|
||||
"ts",
|
||||
"web.tsx",
|
||||
"tsx",
|
||||
"json",
|
||||
"web.jsx",
|
||||
"jsx",
|
||||
];
|
||||
|
||||
// Resolve file paths in the same order as webpack
|
||||
const resolveModule = (resolveFn, filePath) => {
|
||||
const extension = moduleFileExtensions.find((extension) =>
|
||||
fs.existsSync(resolveFn(`${filePath}.${extension}`))
|
||||
);
|
||||
|
||||
if (extension) {
|
||||
return resolveFn(`${filePath}.${extension}`);
|
||||
}
|
||||
|
||||
return resolveFn(`${filePath}.js`);
|
||||
};
|
||||
|
||||
// config after eject: we're in ./config/
|
||||
module.exports = {
|
||||
dotenv: resolveApp(".env"),
|
||||
appPath: resolveApp("."),
|
||||
appBuild: resolveApp("build"),
|
||||
appPublic: resolveApp("public"),
|
||||
appHtml: resolveApp("public/index.html"),
|
||||
appIndexJs: resolveModule(resolveApp, "src/index"),
|
||||
appPackageJson: resolveApp("package.json"),
|
||||
appSrc: resolveApp("src"),
|
||||
appTsConfig: resolveApp("tsconfig.json"),
|
||||
appJsConfig: resolveApp("jsconfig.json"),
|
||||
yarnLockFile: resolveApp("yarn.lock"),
|
||||
proxySetup: resolveApp("src/setupProxy.js"),
|
||||
appNodeModules: resolveApp("node_modules"),
|
||||
swSrc: resolveModule(resolveApp, "src/service-worker"),
|
||||
publicUrlOrPath,
|
||||
};
|
||||
|
||||
module.exports.moduleFileExtensions = moduleFileExtensions;
|
||||
@ -1,35 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const { resolveModuleName } = require('ts-pnp');
|
||||
|
||||
exports.resolveModuleName = (
|
||||
typescript,
|
||||
moduleName,
|
||||
containingFile,
|
||||
compilerOptions,
|
||||
resolutionHost
|
||||
) => {
|
||||
return resolveModuleName(
|
||||
moduleName,
|
||||
containingFile,
|
||||
compilerOptions,
|
||||
resolutionHost,
|
||||
typescript.resolveModuleName
|
||||
);
|
||||
};
|
||||
|
||||
exports.resolveTypeReferenceDirective = (
|
||||
typescript,
|
||||
moduleName,
|
||||
containingFile,
|
||||
compilerOptions,
|
||||
resolutionHost
|
||||
) => {
|
||||
return resolveModuleName(
|
||||
moduleName,
|
||||
containingFile,
|
||||
compilerOptions,
|
||||
resolutionHost,
|
||||
typescript.resolveTypeReferenceDirective
|
||||
);
|
||||
};
|
||||
@ -1,479 +0,0 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const webpack = require('webpack');
|
||||
const PnpWebpackPlugin = require('pnp-webpack-plugin');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
|
||||
const TerserPlugin = require('terser-webpack-plugin');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
|
||||
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
|
||||
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
|
||||
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
|
||||
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
|
||||
const paths = require('./paths');
|
||||
const modules = require('./modules');
|
||||
const getClientEnvironment = require('./env');
|
||||
const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
|
||||
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
|
||||
|
||||
const appPackageJson = require(paths.appPackageJson);
|
||||
|
||||
// Source maps are resource heavy and can cause out of memory issue for large source files.
|
||||
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
|
||||
|
||||
const webpackDevClientEntry = require.resolve('react-dev-utils/webpackHotDevClient');
|
||||
const reactRefreshOverlayEntry = require.resolve('react-dev-utils/refreshOverlayInterop');
|
||||
|
||||
// Some apps do not need the benefits of saving a web request, so not inlining the chunk
|
||||
// makes for a smoother build process.
|
||||
const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
|
||||
|
||||
const imageInlineSizeLimit = parseInt(process.env.IMAGE_INLINE_SIZE_LIMIT || '1000');
|
||||
|
||||
// Check if TypeScript is setup
|
||||
const useTypeScript = fs.existsSync(paths.appTsConfig);
|
||||
|
||||
// Get the path to the uncompiled service worker (if it exists).
|
||||
const swSrc = paths.swSrc;
|
||||
|
||||
// style files regexes
|
||||
const cssRegex = /\.css$/;
|
||||
const cssModuleRegex = /\.module\.css$/;
|
||||
|
||||
// This is the production and development configuration.
|
||||
// It is focused on developer experience, fast rebuilds, and a minimal bundle.
|
||||
module.exports = function (webpackEnv) {
|
||||
const isEnvDevelopment = webpackEnv === 'development';
|
||||
const isEnvProduction = webpackEnv === 'production';
|
||||
|
||||
// Variable used for enabling profiling in Production
|
||||
// passed into alias object. Uses a flag if passed into the build command
|
||||
const isEnvProductionProfile = isEnvProduction && process.argv.includes('--profile');
|
||||
|
||||
// We will provide `paths.publicUrlOrPath` to our app
|
||||
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
|
||||
// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
|
||||
// Get environment variables to inject into our app.
|
||||
const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
|
||||
|
||||
const shouldUseReactRefresh = env.raw.FAST_REFRESH;
|
||||
|
||||
// common function to get style loaders
|
||||
const getStyleLoaders = (cssOptions) => {
|
||||
const loaders = [
|
||||
isEnvDevelopment && require.resolve('style-loader'),
|
||||
isEnvProduction && {
|
||||
loader: MiniCssExtractPlugin.loader,
|
||||
// css is located in `static/css`, use '../../' to locate index.html folder
|
||||
// in production `paths.publicUrlOrPath` can be a relative path
|
||||
options: paths.publicUrlOrPath.startsWith('.') ? { publicPath: '../../' } : {}
|
||||
},
|
||||
{
|
||||
loader: require.resolve('css-loader'),
|
||||
options: cssOptions
|
||||
}
|
||||
].filter(Boolean);
|
||||
return loaders;
|
||||
};
|
||||
|
||||
return {
|
||||
mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
|
||||
// Stop compilation early in production
|
||||
bail: isEnvProduction,
|
||||
devtool: isEnvProduction
|
||||
? shouldUseSourceMap
|
||||
? 'source-map'
|
||||
: false
|
||||
: isEnvDevelopment && 'cheap-module-source-map',
|
||||
// These are the "entry points" to our application.
|
||||
// This means they will be the "root" imports that are included in JS bundle.
|
||||
entry:
|
||||
isEnvDevelopment && !shouldUseReactRefresh
|
||||
? [
|
||||
// Include an alternative client for WebpackDevServer. A client's job is to
|
||||
// connect to WebpackDevServer by a socket and get notified about changes.
|
||||
// When you save a file, the client will either apply hot updates (in case
|
||||
// of CSS changes), or refresh the page (in case of JS changes). When you
|
||||
// make a syntax error, this client will display a syntax error overlay.
|
||||
// Note: instead of the default WebpackDevServer client, we use a custom one
|
||||
// to bring better experience for Create React App users. You can replace
|
||||
// the line below with these two lines if you prefer the stock client:
|
||||
//
|
||||
// require.resolve('webpack-dev-server/client') + '?/',
|
||||
// require.resolve('webpack/hot/dev-server'),
|
||||
//
|
||||
// When using the experimental react-refresh integration,
|
||||
// the webpack plugin takes care of injecting the dev client for us.
|
||||
webpackDevClientEntry,
|
||||
// Finally, this is your app's code:
|
||||
paths.appIndexJs
|
||||
// We include the app code last so that if there is a runtime error during
|
||||
// initialization, it doesn't blow up the WebpackDevServer client, and
|
||||
// changing JS code would still trigger a refresh.
|
||||
]
|
||||
: paths.appIndexJs,
|
||||
output: {
|
||||
// The build folder.
|
||||
path: isEnvProduction ? paths.appBuild : undefined,
|
||||
// Add /* filename */ comments to generated require()s in the output.
|
||||
pathinfo: isEnvDevelopment,
|
||||
// There will be one main bundle, and one file per asynchronous chunk.
|
||||
// In development, it does not produce real files.
|
||||
filename: isEnvProduction
|
||||
? 'static/js/[name].[contenthash:8].js'
|
||||
: isEnvDevelopment && 'static/js/bundle.js',
|
||||
// TODO: remove this when upgrading to webpack 5
|
||||
futureEmitAssets: true,
|
||||
// There are also additional JS chunk files if you use code splitting.
|
||||
chunkFilename: isEnvProduction
|
||||
? 'static/js/[name].[contenthash:8].chunk.js'
|
||||
: isEnvDevelopment && 'static/js/[name].chunk.js',
|
||||
// webpack uses `publicPath` to determine where the app is being served from.
|
||||
// It requires a trailing slash, or the file assets will get an incorrect path.
|
||||
// We inferred the "public path" (such as / or /my-project) from homepage.
|
||||
publicPath: paths.publicUrlOrPath,
|
||||
// Point sourcemap entries to original disk location (format as URL on Windows)
|
||||
devtoolModuleFilenameTemplate: isEnvProduction
|
||||
? (info) => path.relative(paths.appSrc, info.absoluteResourcePath).replace(/\\/g, '/')
|
||||
: isEnvDevelopment &&
|
||||
((info) => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
|
||||
// Prevents conflicts when multiple webpack runtimes (from different apps)
|
||||
// are used on the same page.
|
||||
jsonpFunction: `webpackJsonp${appPackageJson.name}`,
|
||||
// this defaults to 'window', but by setting it to 'this' then
|
||||
// module chunks which are built will work in web workers as well.
|
||||
globalObject: 'this'
|
||||
},
|
||||
optimization: {
|
||||
minimize: isEnvProduction,
|
||||
minimizer: [
|
||||
// This is only used in production mode
|
||||
new TerserPlugin({
|
||||
terserOptions: {
|
||||
parse: {
|
||||
// We want terser to parse ecma 8 code. However, we don't want it
|
||||
// to apply any minification steps that turns valid ecma 5 code
|
||||
// into invalid ecma 5 code. This is why the 'compress' and 'output'
|
||||
// sections only apply transformations that are ecma 5 safe
|
||||
// https://github.com/facebook/create-react-app/pull/4234
|
||||
ecma: 8
|
||||
},
|
||||
compress: {
|
||||
ecma: 5,
|
||||
warnings: false,
|
||||
// Disabled because of an issue with Uglify breaking seemingly valid code:
|
||||
// https://github.com/facebook/create-react-app/issues/2376
|
||||
// Pending further investigation:
|
||||
// https://github.com/mishoo/UglifyJS2/issues/2011
|
||||
comparisons: false,
|
||||
// Disabled because of an issue with Terser breaking valid code:
|
||||
// https://github.com/facebook/create-react-app/issues/5250
|
||||
// Pending further investigation:
|
||||
// https://github.com/terser-js/terser/issues/120
|
||||
inline: 2,
|
||||
drop_console: isEnvProduction
|
||||
},
|
||||
mangle: {
|
||||
safari10: true
|
||||
},
|
||||
// Added for profiling in devtools
|
||||
keep_classnames: isEnvProductionProfile,
|
||||
keep_fnames: isEnvProductionProfile,
|
||||
output: {
|
||||
ecma: 5,
|
||||
comments: false,
|
||||
// Turned on because emoji and regex is not minified properly using default
|
||||
// https://github.com/facebook/create-react-app/issues/2488
|
||||
ascii_only: true
|
||||
}
|
||||
},
|
||||
sourceMap: shouldUseSourceMap
|
||||
})
|
||||
],
|
||||
// Automatically split vendor and commons
|
||||
// https://twitter.com/wSokra/status/969633336732905474
|
||||
// https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
|
||||
splitChunks: {
|
||||
chunks: 'all',
|
||||
name: false
|
||||
},
|
||||
// Keep the runtime chunk separated to enable long term caching
|
||||
// https://twitter.com/wSokra/status/969679223278505985
|
||||
// https://github.com/facebook/create-react-app/issues/5358
|
||||
runtimeChunk: {
|
||||
name: (entrypoint) => `runtime-${entrypoint.name}`
|
||||
}
|
||||
},
|
||||
resolve: {
|
||||
// This allows you to set a fallback for where webpack should look for modules.
|
||||
// We placed these paths second because we want `node_modules` to "win"
|
||||
// if there are any conflicts. This matches Node resolution mechanism.
|
||||
// https://github.com/facebook/create-react-app/issues/253
|
||||
modules: ['node_modules', paths.appNodeModules].concat(modules.additionalModulePaths || []),
|
||||
// These are the reasonable defaults supported by the Node ecosystem.
|
||||
// We also include JSX as a common component filename extension to support
|
||||
// some tools, although we do not recommend using it, see:
|
||||
// https://github.com/facebook/create-react-app/issues/290
|
||||
// `web` extension prefixes have been added for better support
|
||||
// for React Native Web.
|
||||
extensions: paths.moduleFileExtensions
|
||||
.map((ext) => `.${ext}`)
|
||||
.filter((ext) => useTypeScript || !ext.includes('ts')),
|
||||
alias: {
|
||||
// Support React Native Web
|
||||
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
|
||||
'react-native': 'react-native-web',
|
||||
// Allows for better profiling with ReactDevTools
|
||||
...(isEnvProductionProfile && {
|
||||
'react-dom$': 'react-dom/profiling',
|
||||
'scheduler/tracing': 'scheduler/tracing-profiling'
|
||||
}),
|
||||
...(modules.webpackAliases || {})
|
||||
},
|
||||
plugins: [
|
||||
// Adds support for installing with Plug'n'Play, leading to faster installs and adding
|
||||
// guards against forgotten dependencies and such.
|
||||
PnpWebpackPlugin,
|
||||
// Prevents users from importing files from outside of src/ (or node_modules/).
|
||||
// This often causes confusion because we only process files within src/ with babel.
|
||||
// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
|
||||
// please link the files into your node_modules/ and let module-resolution kick in.
|
||||
// Make sure your source files are compiled, as they will not be processed in any way.
|
||||
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson, reactRefreshOverlayEntry])
|
||||
]
|
||||
},
|
||||
resolveLoader: {
|
||||
plugins: [
|
||||
// Also related to Plug'n'Play, but this time it tells webpack to load its loaders
|
||||
// from the current package.
|
||||
PnpWebpackPlugin.moduleLoader(module)
|
||||
]
|
||||
},
|
||||
module: {
|
||||
strictExportPresence: true,
|
||||
rules: [
|
||||
// Disable require.ensure as it's not a standard language feature.
|
||||
{ parser: { requireEnsure: false } },
|
||||
{
|
||||
// "oneOf" will traverse all following loaders until one will
|
||||
// match the requirements. When no loader matches it will fall
|
||||
// back to the "file" loader at the end of the loader list.
|
||||
oneOf: [
|
||||
// "url" loader works like "file" loader except that it embeds assets
|
||||
// smaller than specified limit in bytes as data URLs to avoid requests.
|
||||
// A missing `test` is equivalent to a match.
|
||||
{
|
||||
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
|
||||
loader: require.resolve('url-loader'),
|
||||
options: {
|
||||
limit: imageInlineSizeLimit,
|
||||
name: 'static/media/[name].[hash:8].[ext]'
|
||||
}
|
||||
},
|
||||
// Process application JS with Babel.
|
||||
// The preset includes JSX, Flow, TypeScript, and some ESnext features.
|
||||
{
|
||||
test: /\.(js|mjs|jsx|ts|tsx)$/,
|
||||
include: paths.appSrc,
|
||||
loader: require.resolve('babel-loader'),
|
||||
options: {
|
||||
babelrc: true,
|
||||
// This is a feature of `babel-loader` for webpack (not Babel itself).
|
||||
// It enables caching results in ./node_modules/.cache/babel-loader/
|
||||
// directory for faster rebuilds.
|
||||
cacheDirectory: true,
|
||||
// See #6846 for context on why cacheCompression is disabled
|
||||
cacheCompression: false,
|
||||
compact: isEnvProduction
|
||||
}
|
||||
},
|
||||
// Process any JS outside of the app with Babel.
|
||||
// Unlike the application JS, we only compile the standard ES features.
|
||||
{
|
||||
test: /\.(js|mjs)$/,
|
||||
exclude: /@babel(?:\/|\\{1,2})runtime/,
|
||||
loader: require.resolve('babel-loader'),
|
||||
options: {
|
||||
babelrc: true,
|
||||
configFile: false,
|
||||
compact: false,
|
||||
cacheDirectory: true,
|
||||
// See #6846 for context on why cacheCompression is disabled
|
||||
cacheCompression: false,
|
||||
|
||||
// Babel sourcemaps are needed for debugging into node_modules
|
||||
// code. Without the options below, debuggers like VSCode
|
||||
// show incorrect code and set breakpoints on the wrong lines.
|
||||
sourceMaps: shouldUseSourceMap,
|
||||
inputSourceMap: shouldUseSourceMap
|
||||
}
|
||||
},
|
||||
// "postcss" loader applies autoprefixer to our CSS.
|
||||
// "css" loader resolves paths in CSS and adds assets as dependencies.
|
||||
// "style" loader turns CSS into JS modules that inject <style> tags.
|
||||
// In production, we use MiniCSSExtractPlugin to extract that CSS
|
||||
// to a file, but in development "style" loader enables hot editing
|
||||
// of CSS.
|
||||
// By default we support CSS Modules with the extension .module.css
|
||||
{
|
||||
test: cssRegex,
|
||||
exclude: cssModuleRegex,
|
||||
use: getStyleLoaders({
|
||||
importLoaders: 1,
|
||||
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment
|
||||
}),
|
||||
// Don't consider CSS imports dead code even if the
|
||||
// containing package claims to have no side effects.
|
||||
// Remove this when webpack adds a warning or an error for this.
|
||||
// See https://github.com/webpack/webpack/issues/6571
|
||||
sideEffects: true
|
||||
},
|
||||
// "file" loader makes sure those assets get served by WebpackDevServer.
|
||||
// When you `import` an asset, you get its (virtual) filename.
|
||||
// In production, they would get copied to the `build` folder.
|
||||
// This loader doesn't use a "test" so it will catch all modules
|
||||
// that fall through the other loaders.
|
||||
{
|
||||
loader: require.resolve('file-loader'),
|
||||
// Exclude `js` files to keep "css" loader working as it injects
|
||||
// its runtime that would otherwise be processed through "file" loader.
|
||||
// Also exclude `html` and `json` extensions so they get processed
|
||||
// by webpacks internal loaders.
|
||||
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
|
||||
options: {
|
||||
name: 'static/media/[name].[hash:8].[ext]'
|
||||
}
|
||||
}
|
||||
// ** STOP ** Are you adding a new loader?
|
||||
// Make sure to add the new loader(s) before the "file" loader.
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
// Generates an `index.html` file with the <script> injected.
|
||||
new HtmlWebpackPlugin(
|
||||
Object.assign(
|
||||
{},
|
||||
{
|
||||
inject: true,
|
||||
template: paths.appHtml
|
||||
},
|
||||
isEnvProduction
|
||||
? {
|
||||
minify: {
|
||||
removeComments: true,
|
||||
collapseWhitespace: true,
|
||||
removeRedundantAttributes: true,
|
||||
useShortDoctype: true,
|
||||
removeEmptyAttributes: true,
|
||||
removeStyleLinkTypeAttributes: true,
|
||||
keepClosingSlash: true,
|
||||
minifyJS: true,
|
||||
minifyCSS: true,
|
||||
minifyURLs: true
|
||||
}
|
||||
}
|
||||
: undefined
|
||||
)
|
||||
),
|
||||
// Inlines the webpack runtime script. This script is too small to warrant
|
||||
// a network request.
|
||||
// https://github.com/facebook/create-react-app/issues/5358
|
||||
isEnvProduction &&
|
||||
shouldInlineRuntimeChunk &&
|
||||
new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]),
|
||||
// Makes some environment variables available in index.html.
|
||||
// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
|
||||
// <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
|
||||
// It will be an empty string unless you specify "homepage"
|
||||
// in `package.json`, in which case it will be the pathname of that URL.
|
||||
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
|
||||
// This gives some necessary context to module not found errors, such as
|
||||
// the requesting resource.
|
||||
new ModuleNotFoundPlugin(paths.appPath),
|
||||
// Makes some environment variables available to the JS code, for example:
|
||||
// if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
|
||||
// It is absolutely essential that NODE_ENV is set to production
|
||||
// during a production build.
|
||||
// Otherwise React will be compiled in the very slow development mode.
|
||||
new webpack.DefinePlugin(env.stringified),
|
||||
// This is necessary to emit hot updates (CSS and Fast Refresh):
|
||||
isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
|
||||
// Experimental hot reloading for React .
|
||||
// https://github.com/facebook/react/tree/master/packages/react-refresh
|
||||
isEnvDevelopment &&
|
||||
shouldUseReactRefresh &&
|
||||
new ReactRefreshWebpackPlugin({
|
||||
overlay: {
|
||||
entry: webpackDevClientEntry,
|
||||
// The expected exports are slightly different from what the overlay exports,
|
||||
// so an interop is included here to enable feedback on module-level errors.
|
||||
module: reactRefreshOverlayEntry,
|
||||
// Since we ship a custom dev client and overlay integration,
|
||||
// the bundled socket handling logic can be eliminated.
|
||||
sockIntegration: false
|
||||
}
|
||||
}),
|
||||
// If you require a missing module and then `npm install` it, you still have
|
||||
// to restart the development server for webpack to discover it. This plugin
|
||||
// makes the discovery automatic so you don't have to restart.
|
||||
// See https://github.com/facebook/create-react-app/issues/186
|
||||
isEnvDevelopment && new WatchMissingNodeModulesPlugin(paths.appNodeModules),
|
||||
isEnvProduction &&
|
||||
new MiniCssExtractPlugin({
|
||||
// Options similar to the same options in webpackOptions.output
|
||||
// both options are optional
|
||||
filename: 'static/css/[name].[contenthash:8].css',
|
||||
chunkFilename: 'static/css/[name].[contenthash:8].chunk.css'
|
||||
}),
|
||||
// Generate an asset manifest file with the following content:
|
||||
// - "files" key: Mapping of all asset filenames to their corresponding
|
||||
// output file so that tools can pick it up without having to parse
|
||||
// `index.html`
|
||||
// - "entrypoints" key: Array of files which are included in `index.html`,
|
||||
// can be used to reconstruct the HTML if necessary
|
||||
new WebpackManifestPlugin({
|
||||
fileName: 'asset-manifest.json',
|
||||
publicPath: paths.publicUrlOrPath,
|
||||
generate: (seed, files, entrypoints) => {
|
||||
const manifestFiles = files.reduce((manifest, file) => {
|
||||
manifest[file.name] = file.path;
|
||||
return manifest;
|
||||
}, seed);
|
||||
const entrypointFiles = entrypoints.main.filter((fileName) => !fileName.endsWith('.map'));
|
||||
|
||||
return {
|
||||
files: manifestFiles,
|
||||
entrypoints: entrypointFiles
|
||||
};
|
||||
}
|
||||
}),
|
||||
// Generate a service worker script that will precache, and keep up to date,
|
||||
// the HTML & assets that are part of the webpack build.
|
||||
isEnvProduction &&
|
||||
fs.existsSync(swSrc) &&
|
||||
new WorkboxWebpackPlugin.InjectManifest({
|
||||
swSrc,
|
||||
dontCacheBustURLsMatching: /\.[0-9a-f]{8}\./,
|
||||
exclude: [/\.map$/, /asset-manifest\.json$/, /LICENSE/]
|
||||
})
|
||||
].filter(Boolean),
|
||||
// Some libraries import Node modules but don't use them in the browser.
|
||||
// Tell webpack to provide empty mocks for them so importing them works.
|
||||
node: {
|
||||
module: 'empty',
|
||||
dgram: 'empty',
|
||||
dns: 'mock',
|
||||
fs: 'empty',
|
||||
http2: 'empty',
|
||||
net: 'empty',
|
||||
tls: 'empty',
|
||||
child_process: 'empty'
|
||||
},
|
||||
// Turn off performance processing because we utilize
|
||||
// our own hints via the FileSizeReporter
|
||||
performance: false
|
||||
};
|
||||
};
|
||||
@ -1,130 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const fs = require('fs');
|
||||
const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
|
||||
const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
|
||||
const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
|
||||
const ignoredFiles = require('react-dev-utils/ignoredFiles');
|
||||
const redirectServedPath = require('react-dev-utils/redirectServedPathMiddleware');
|
||||
const paths = require('./paths');
|
||||
const getHttpsConfig = require('./getHttpsConfig');
|
||||
|
||||
const host = process.env.HOST || '0.0.0.0';
|
||||
const sockHost = process.env.WDS_SOCKET_HOST;
|
||||
const sockPath = process.env.WDS_SOCKET_PATH; // default: '/sockjs-node'
|
||||
const sockPort = process.env.WDS_SOCKET_PORT;
|
||||
|
||||
module.exports = function (proxy, allowedHost) {
|
||||
return {
|
||||
// WebpackDevServer 2.4.3 introduced a security fix that prevents remote
|
||||
// websites from potentially accessing local content through DNS rebinding:
|
||||
// https://github.com/webpack/webpack-dev-server/issues/887
|
||||
// https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
|
||||
// However, it made several existing use cases such as development in cloud
|
||||
// environment or subdomains in development significantly more complicated:
|
||||
// https://github.com/facebook/create-react-app/issues/2271
|
||||
// https://github.com/facebook/create-react-app/issues/2233
|
||||
// While we're investigating better solutions, for now we will take a
|
||||
// compromise. Since our WDS configuration only serves files in the `public`
|
||||
// folder we won't consider accessing them a vulnerability. However, if you
|
||||
// use the `proxy` feature, it gets more dangerous because it can expose
|
||||
// remote code execution vulnerabilities in backends like Django and Rails.
|
||||
// So we will disable the host check normally, but enable it if you have
|
||||
// specified the `proxy` setting. Finally, we let you override it if you
|
||||
// really know what you're doing with a special environment variable.
|
||||
disableHostCheck:
|
||||
!proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
|
||||
// Enable gzip compression of generated files.
|
||||
compress: true,
|
||||
// Silence WebpackDevServer's own logs since they're generally not useful.
|
||||
// It will still show compile warnings and errors with this setting.
|
||||
clientLogLevel: 'none',
|
||||
// By default WebpackDevServer serves physical files from current directory
|
||||
// in addition to all the virtual build products that it serves from memory.
|
||||
// This is confusing because those files won’t automatically be available in
|
||||
// production build folder unless we copy them. However, copying the whole
|
||||
// project directory is dangerous because we may expose sensitive files.
|
||||
// Instead, we establish a convention that only files in `public` directory
|
||||
// get served. Our build script will copy `public` into the `build` folder.
|
||||
// In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
|
||||
// <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
|
||||
// In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
|
||||
// Note that we only recommend to use `public` folder as an escape hatch
|
||||
// for files like `favicon.ico`, `manifest.json`, and libraries that are
|
||||
// for some reason broken when imported through webpack. If you just want to
|
||||
// use an image, put it in `src` and `import` it from JavaScript instead.
|
||||
contentBase: paths.appPublic,
|
||||
contentBasePublicPath: paths.publicUrlOrPath,
|
||||
// By default files from `contentBase` will not trigger a page reload.
|
||||
watchContentBase: true,
|
||||
// Enable hot reloading server. It will provide WDS_SOCKET_PATH endpoint
|
||||
// for the WebpackDevServer client so it can learn when the files were
|
||||
// updated. The WebpackDevServer client is included as an entry point
|
||||
// in the webpack development configuration. Note that only changes
|
||||
// to CSS are currently hot reloaded. JS changes will refresh the browser.
|
||||
hot: true,
|
||||
// Use 'ws' instead of 'sockjs-node' on server since we're using native
|
||||
// websockets in `webpackHotDevClient`.
|
||||
transportMode: 'ws',
|
||||
// Prevent a WS client from getting injected as we're already including
|
||||
// `webpackHotDevClient`.
|
||||
injectClient: false,
|
||||
// Enable custom sockjs pathname for websocket connection to hot reloading server.
|
||||
// Enable custom sockjs hostname, pathname and port for websocket connection
|
||||
// to hot reloading server.
|
||||
sockHost,
|
||||
sockPath,
|
||||
sockPort,
|
||||
// It is important to tell WebpackDevServer to use the same "publicPath" path as
|
||||
// we specified in the webpack config. When homepage is '.', default to serving
|
||||
// from the root.
|
||||
// remove last slash so user can land on `/test` instead of `/test/`
|
||||
publicPath: paths.publicUrlOrPath.slice(0, -1),
|
||||
// WebpackDevServer is noisy by default so we emit custom message instead
|
||||
// by listening to the compiler events with `compiler.hooks[...].tap` calls above.
|
||||
quiet: true,
|
||||
// Reportedly, this avoids CPU overload on some systems.
|
||||
// https://github.com/facebook/create-react-app/issues/293
|
||||
// src/node_modules is not ignored to support absolute imports
|
||||
// https://github.com/facebook/create-react-app/issues/1065
|
||||
watchOptions: {
|
||||
ignored: ignoredFiles(paths.appSrc),
|
||||
},
|
||||
https: getHttpsConfig(),
|
||||
host,
|
||||
overlay: false,
|
||||
historyApiFallback: {
|
||||
// Paths with dots should still use the history fallback.
|
||||
// See https://github.com/facebook/create-react-app/issues/387.
|
||||
disableDotRule: true,
|
||||
index: paths.publicUrlOrPath,
|
||||
},
|
||||
public: allowedHost,
|
||||
// `proxy` is run between `before` and `after` `webpack-dev-server` hooks
|
||||
proxy,
|
||||
before(app, server) {
|
||||
// Keep `evalSourceMapMiddleware` and `errorOverlayMiddleware`
|
||||
// middlewares before `redirectServedPath` otherwise will not have any effect
|
||||
// This lets us fetch source contents from webpack for the error overlay
|
||||
app.use(evalSourceMapMiddleware(server));
|
||||
// This lets us open files from the runtime error overlay.
|
||||
app.use(errorOverlayMiddleware());
|
||||
|
||||
if (fs.existsSync(paths.proxySetup)) {
|
||||
// This registers user provided middleware for proxy reasons
|
||||
require(paths.proxySetup)(app);
|
||||
}
|
||||
},
|
||||
after(app) {
|
||||
// Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
|
||||
app.use(redirectServedPath(paths.publicUrlOrPath));
|
||||
|
||||
// This service worker file is effectively a 'no-op' that will reset any
|
||||
// previous service worker registered for the same host:port combination.
|
||||
// We do this in development to avoid hitting the production cache if
|
||||
// it used the same host and port.
|
||||
// https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
|
||||
app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
|
||||
},
|
||||
};
|
||||
};
|
||||
104
index.html
Normal file
104
index.html
Normal file
@ -0,0 +1,104 @@
|
||||
<!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" />
|
||||
|
||||
<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" />
|
||||
<!--
|
||||
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" />
|
||||
<!--
|
||||
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.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
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" />
|
||||
<!-- Hotjar Tracking Code for https://colors.ichuantong.cn -->
|
||||
<script>
|
||||
(function (h, o, t, j, a, r) {
|
||||
h.hj =
|
||||
h.hj ||
|
||||
function () {
|
||||
(h.hj.q = h.hj.q || []).push(arguments);
|
||||
};
|
||||
h._hjSettings = { hjid: 1517952, hjsv: 6 };
|
||||
a = o.getElementsByTagName('head')[0];
|
||||
r = o.createElement('script');
|
||||
r.async = 1;
|
||||
r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
|
||||
a.appendChild(r);
|
||||
})(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
|
||||
</script>
|
||||
</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());
|
||||
|
||||
gtag('config', 'UA-150673549-1');
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
12674
package-lock.json
generated
12674
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
78
package.json
78
package.json
@ -1,12 +1,13 @@
|
||||
{
|
||||
"name": "chinese-colors",
|
||||
"version": "2.1.0",
|
||||
"version": "3.0.0",
|
||||
"description": "Chinese Color Cheatsheet",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "node scripts/start.js",
|
||||
"build": "node scripts/build.js",
|
||||
"changelog": "auto-changelog -p --release-summary -l false --template changelog.template.hbs && git add CHANGELOG.md"
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"serve": "vite preview",
|
||||
"prepare": "husky install"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@ -28,61 +29,34 @@
|
||||
},
|
||||
"homepage": "https://colors.ichuantong.cn",
|
||||
"dependencies": {
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
|
||||
"@ungap/url-search-params": "^0.2.2",
|
||||
"bfj": "^7.0.2",
|
||||
"color-convert": "^2.0.1",
|
||||
"file-saver": "^2.0.5",
|
||||
"html2canvas": "^1.0.0-rc.7",
|
||||
"html2canvas": "^1.4.1",
|
||||
"jinrishici": "^1.0.6",
|
||||
"pinyin": "^2.9.1",
|
||||
"react": "^17.0.1",
|
||||
"react-copy-to-clipboard": "^5.0.2",
|
||||
"react-dom": "^17.0.1",
|
||||
"react-github-btn": "^1.2.0",
|
||||
"react-refresh": "^0.9.0",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"smooth-scroll-into-view-if-needed": "^1.1.29",
|
||||
"styled-components": "^5.2.1",
|
||||
"styled-reset": "^4.3.4"
|
||||
"pinyin": "^2.11.2",
|
||||
"react": "^18.2.0",
|
||||
"react-copy-to-clipboard": "^5.1.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-github-btn": "^1.4.0",
|
||||
"react-router-dom": "^6.4.3",
|
||||
"smooth-scroll-into-view-if-needed": "^1.1.33",
|
||||
"styled-components": "^5.3.6",
|
||||
"styled-reset": "^4.4.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.12.10",
|
||||
"@babel/core": "^7.12.10",
|
||||
"@babel/plugin-proposal-class-properties": "^7.12.1",
|
||||
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
||||
"@babel/preset-env": "^7.12.11",
|
||||
"@babel/preset-react": "^7.12.10",
|
||||
"@commitlint/cli": "^11.0.0",
|
||||
"@commitlint/config-conventional": "^11.0.0",
|
||||
"auto-changelog": "^2.2.1",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"babel-loader": "^8.2.2",
|
||||
"css-loader": "^5.0.1",
|
||||
"eslint": "^7.17.0",
|
||||
"eslint-config-prettier": "^7.1.0",
|
||||
"eslint-plugin-react": "^7.22.0",
|
||||
"eslint-plugin-react-hooks": "^4.2.0",
|
||||
"file-loader": "^6.2.0",
|
||||
"html-webpack-plugin": "^4.5.1",
|
||||
"husky": "^4.3.6",
|
||||
"lint-staged": "^10.5.3",
|
||||
"mini-css-extract-plugin": "^1.3.3",
|
||||
"pnp-webpack-plugin": "^1.6.4",
|
||||
"prettier": "^2.2.1",
|
||||
"react-dev-utils": "^11.0.1",
|
||||
"style-loader": "^2.0.0",
|
||||
"terser-webpack-plugin": "^4.2.3",
|
||||
"url-loader": "^4.1.1",
|
||||
"webpack": "^4.44.1",
|
||||
"webpack-bundle-analyzer": "^4.3.0",
|
||||
"webpack-dev-server": "^3.11.1",
|
||||
"webpack-manifest-plugin": "^3.0.0",
|
||||
"workbox-webpack-plugin": "^6.0.2"
|
||||
"@vitejs/plugin-react": "^2.2.0",
|
||||
"eslint": "^8.26.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-react": "^7.31.10",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"husky": "^8.0.1",
|
||||
"lint-staged": "^13.0.3",
|
||||
"prettier": "^2.7.1",
|
||||
"vite": "^3.2.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.0.0",
|
||||
"npm": ">=6.0.0"
|
||||
"node": ">=16.0.0",
|
||||
"npm": ">=7.0.0"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
|
||||
@ -1,137 +0,0 @@
|
||||
<!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" />
|
||||
|
||||
<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="static/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="static/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="static/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="static/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="static/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="static/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="static/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="static/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="static/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="static/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" />
|
||||
<!--
|
||||
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.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
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"
|
||||
/>
|
||||
<!-- Hotjar Tracking Code for https://colors.ichuantong.cn -->
|
||||
<script>
|
||||
(function(h, o, t, j, a, r) {
|
||||
h.hj =
|
||||
h.hj ||
|
||||
function() {
|
||||
(h.hj.q = h.hj.q || []).push(arguments);
|
||||
};
|
||||
h._hjSettings = { hjid: 1517952, hjsv: 6 };
|
||||
a = o.getElementsByTagName('head')[0];
|
||||
r = o.createElement('script');
|
||||
r.async = 1;
|
||||
r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
|
||||
a.appendChild(r);
|
||||
})(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>
|
||||
您需要开启Javascript功能
|
||||
</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 84 KiB |
|
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 94 KiB |
|
Before Width: | Height: | Size: 128 KiB After Width: | Height: | Size: 128 KiB |
|
Before Width: | Height: | Size: 99 KiB After Width: | Height: | Size: 99 KiB |
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 39 KiB |
|
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 45 KiB |
|
Before Width: | Height: | Size: 77 KiB After Width: | Height: | Size: 77 KiB |
|
Before Width: | Height: | Size: 77 KiB After Width: | Height: | Size: 77 KiB |
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 88 KiB |
212
scripts/build.js
212
scripts/build.js
@ -1,212 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
// Do this as the first thing so that any code reading it knows the right env.
|
||||
process.env.BABEL_ENV = 'production';
|
||||
process.env.NODE_ENV = 'production';
|
||||
|
||||
// Makes the script crash on unhandled rejections instead of silently
|
||||
// ignoring them. In the future, promise rejections that are not handled will
|
||||
// terminate the Node.js process with a non-zero exit code.
|
||||
process.on('unhandledRejection', err => {
|
||||
throw err;
|
||||
});
|
||||
|
||||
// Ensure environment variables are read.
|
||||
require('../config/env');
|
||||
|
||||
|
||||
const path = require('path');
|
||||
const chalk = require('react-dev-utils/chalk');
|
||||
const fs = require('fs-extra');
|
||||
const bfj = require('bfj');
|
||||
const webpack = require('webpack');
|
||||
const configFactory = require('../config/webpack.config');
|
||||
const paths = require('../config/paths');
|
||||
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
|
||||
const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
|
||||
const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
|
||||
const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
|
||||
const printBuildError = require('react-dev-utils/printBuildError');
|
||||
|
||||
const measureFileSizesBeforeBuild =
|
||||
FileSizeReporter.measureFileSizesBeforeBuild;
|
||||
const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
|
||||
const useYarn = fs.existsSync(paths.yarnLockFile);
|
||||
|
||||
// These sizes are pretty large. We'll warn for bundles exceeding them.
|
||||
const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
|
||||
const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
|
||||
|
||||
const isInteractive = process.stdout.isTTY;
|
||||
|
||||
// Warn and crash if required files are missing
|
||||
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
const argv = process.argv.slice(2);
|
||||
const writeStatsJson = argv.indexOf('--stats') !== -1;
|
||||
|
||||
// Generate configuration
|
||||
const config = configFactory('production');
|
||||
|
||||
// We require that you explicitly set browsers and do not fall back to
|
||||
// browserslist defaults.
|
||||
const { checkBrowsers } = require('react-dev-utils/browsersHelper');
|
||||
checkBrowsers(paths.appPath, isInteractive)
|
||||
.then(() => {
|
||||
// First, read the current file sizes in build directory.
|
||||
// This lets us display how much they changed later.
|
||||
return measureFileSizesBeforeBuild(paths.appBuild);
|
||||
})
|
||||
.then(previousFileSizes => {
|
||||
// Remove all content but keep the directory so that
|
||||
// if you're in it, you don't end up in Trash
|
||||
fs.emptyDirSync(paths.appBuild);
|
||||
// Merge with the public folder
|
||||
copyPublicFolder();
|
||||
// Start the webpack build
|
||||
return build(previousFileSizes);
|
||||
})
|
||||
.then(
|
||||
({ stats, previousFileSizes, warnings }) => {
|
||||
if (warnings.length) {
|
||||
console.log(chalk.yellow('Compiled with warnings.\n'));
|
||||
console.log(warnings.join('\n\n'));
|
||||
console.log(
|
||||
'\nSearch for the ' +
|
||||
chalk.underline(chalk.yellow('keywords')) +
|
||||
' to learn more about each warning.'
|
||||
);
|
||||
console.log(
|
||||
'To ignore, add ' +
|
||||
chalk.cyan('// eslint-disable-next-line') +
|
||||
' to the line before.\n'
|
||||
);
|
||||
} else {
|
||||
console.log(chalk.green('Compiled successfully.\n'));
|
||||
}
|
||||
|
||||
console.log('File sizes after gzip:\n');
|
||||
printFileSizesAfterBuild(
|
||||
stats,
|
||||
previousFileSizes,
|
||||
paths.appBuild,
|
||||
WARN_AFTER_BUNDLE_GZIP_SIZE,
|
||||
WARN_AFTER_CHUNK_GZIP_SIZE
|
||||
);
|
||||
console.log();
|
||||
|
||||
const appPackage = require(paths.appPackageJson);
|
||||
const publicUrl = paths.publicUrlOrPath;
|
||||
const publicPath = config.output.publicPath;
|
||||
const buildFolder = path.relative(process.cwd(), paths.appBuild);
|
||||
printHostingInstructions(
|
||||
appPackage,
|
||||
publicUrl,
|
||||
publicPath,
|
||||
buildFolder,
|
||||
useYarn
|
||||
);
|
||||
},
|
||||
err => {
|
||||
const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
|
||||
if (tscCompileOnError) {
|
||||
console.log(
|
||||
chalk.yellow(
|
||||
'Compiled with the following type errors (you may want to check these before deploying your app):\n'
|
||||
)
|
||||
);
|
||||
printBuildError(err);
|
||||
} else {
|
||||
console.log(chalk.red('Failed to compile.\n'));
|
||||
printBuildError(err);
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
)
|
||||
.catch(err => {
|
||||
if (err && err.message) {
|
||||
console.log(err.message);
|
||||
}
|
||||
process.exit(1);
|
||||
});
|
||||
|
||||
// Create the production build and print the deployment instructions.
|
||||
function build(previousFileSizes) {
|
||||
console.log('Creating an optimized production build...');
|
||||
|
||||
const compiler = webpack(config);
|
||||
return new Promise((resolve, reject) => {
|
||||
compiler.run((err, stats) => {
|
||||
let messages;
|
||||
if (err) {
|
||||
if (!err.message) {
|
||||
return reject(err);
|
||||
}
|
||||
|
||||
let errMessage = err.message;
|
||||
|
||||
// Add additional information for postcss errors
|
||||
if (Object.prototype.hasOwnProperty.call(err, 'postcssNode')) {
|
||||
errMessage +=
|
||||
'\nCompileError: Begins at CSS selector ' +
|
||||
err['postcssNode'].selector;
|
||||
}
|
||||
|
||||
messages = formatWebpackMessages({
|
||||
errors: [errMessage],
|
||||
warnings: [],
|
||||
});
|
||||
} else {
|
||||
messages = formatWebpackMessages(
|
||||
stats.toJson({ all: false, warnings: true, errors: true })
|
||||
);
|
||||
}
|
||||
if (messages.errors.length) {
|
||||
// Only keep the first error. Others are often indicative
|
||||
// of the same problem, but confuse the reader with noise.
|
||||
if (messages.errors.length > 1) {
|
||||
messages.errors.length = 1;
|
||||
}
|
||||
return reject(new Error(messages.errors.join('\n\n')));
|
||||
}
|
||||
if (
|
||||
process.env.CI &&
|
||||
(typeof process.env.CI !== 'string' ||
|
||||
process.env.CI.toLowerCase() !== 'false') &&
|
||||
messages.warnings.length
|
||||
) {
|
||||
console.log(
|
||||
chalk.yellow(
|
||||
'\nTreating warnings as errors because process.env.CI = true.\n' +
|
||||
'Most CI servers set it automatically.\n'
|
||||
)
|
||||
);
|
||||
return reject(new Error(messages.warnings.join('\n\n')));
|
||||
}
|
||||
|
||||
const resolveArgs = {
|
||||
stats,
|
||||
previousFileSizes,
|
||||
warnings: messages.warnings,
|
||||
};
|
||||
|
||||
if (writeStatsJson) {
|
||||
return bfj
|
||||
.write(paths.appBuild + '/bundle-stats.json', stats.toJson())
|
||||
.then(() => resolve(resolveArgs))
|
||||
.catch(error => reject(new Error(error)));
|
||||
}
|
||||
|
||||
return resolve(resolveArgs);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function copyPublicFolder() {
|
||||
fs.copySync(paths.appPublic, paths.appBuild, {
|
||||
dereference: true,
|
||||
filter: file => file !== paths.appHtml,
|
||||
});
|
||||
}
|
||||
134
scripts/start.js
134
scripts/start.js
@ -1,134 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
// Do this as the first thing so that any code reading it knows the right env.
|
||||
process.env.BABEL_ENV = 'development';
|
||||
process.env.NODE_ENV = 'development';
|
||||
|
||||
// Makes the script crash on unhandled rejections instead of silently
|
||||
// ignoring them. In the future, promise rejections that are not handled will
|
||||
// terminate the Node.js process with a non-zero exit code.
|
||||
process.on('unhandledRejection', (err) => {
|
||||
throw err;
|
||||
});
|
||||
|
||||
// Ensure environment variables are read.
|
||||
require('../config/env');
|
||||
|
||||
const fs = require('fs');
|
||||
const chalk = require('react-dev-utils/chalk');
|
||||
const webpack = require('webpack');
|
||||
const WebpackDevServer = require('webpack-dev-server');
|
||||
const clearConsole = require('react-dev-utils/clearConsole');
|
||||
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
|
||||
const {
|
||||
choosePort,
|
||||
createCompiler,
|
||||
prepareProxy,
|
||||
prepareUrls,
|
||||
} = require('react-dev-utils/WebpackDevServerUtils');
|
||||
const openBrowser = require('react-dev-utils/openBrowser');
|
||||
const paths = require('../config/paths');
|
||||
const configFactory = require('../config/webpack.config');
|
||||
const createDevServerConfig = require('../config/webpackDevServer.config');
|
||||
const useYarn = fs.existsSync(paths.yarnLockFile);
|
||||
const isInteractive = process.stdout.isTTY;
|
||||
|
||||
// Warn and crash if required files are missing
|
||||
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
// Tools like Cloud9 rely on this.
|
||||
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3210;
|
||||
const HOST = process.env.HOST || '0.0.0.0';
|
||||
|
||||
if (process.env.HOST) {
|
||||
console.log(
|
||||
chalk.cyan(
|
||||
`Attempting to bind to HOST environment variable: ${chalk.yellow(
|
||||
chalk.bold(process.env.HOST)
|
||||
)}`
|
||||
)
|
||||
);
|
||||
console.log(`If this was unintentional, check that you haven't mistakenly set it in your shell.`);
|
||||
console.log(`Learn more here: ${chalk.yellow('https://cra.link/advanced-config')}`);
|
||||
console.log();
|
||||
}
|
||||
|
||||
// We require that you explicitly set browsers and do not fall back to
|
||||
// browserslist defaults.
|
||||
const { checkBrowsers } = require('react-dev-utils/browsersHelper');
|
||||
checkBrowsers(paths.appPath, isInteractive)
|
||||
.then(() => {
|
||||
// We attempt to use the default port but if it is busy, we offer the user to
|
||||
// run on a different port. `choosePort()` Promise resolves to the next free port.
|
||||
return choosePort(HOST, DEFAULT_PORT);
|
||||
})
|
||||
.then((port) => {
|
||||
if (port == null) {
|
||||
// We have not found a port.
|
||||
return;
|
||||
}
|
||||
|
||||
const config = configFactory('development');
|
||||
const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
|
||||
const appName = require(paths.appPackageJson).name;
|
||||
|
||||
const useTypeScript = fs.existsSync(paths.appTsConfig);
|
||||
const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
|
||||
const urls = prepareUrls(protocol, HOST, port, paths.publicUrlOrPath.slice(0, -1));
|
||||
const devSocket = {
|
||||
warnings: (warnings) => devServer.sockWrite(devServer.sockets, 'warnings', warnings),
|
||||
errors: (errors) => devServer.sockWrite(devServer.sockets, 'errors', errors),
|
||||
};
|
||||
// Create a webpack compiler that is configured with custom messages.
|
||||
const compiler = createCompiler({
|
||||
appName,
|
||||
config,
|
||||
devSocket,
|
||||
urls,
|
||||
useYarn,
|
||||
useTypeScript,
|
||||
tscCompileOnError,
|
||||
webpack,
|
||||
});
|
||||
// Load proxy config
|
||||
const proxySetting = require(paths.appPackageJson).proxy;
|
||||
const proxyConfig = prepareProxy(proxySetting, paths.appPublic, paths.publicUrlOrPath);
|
||||
// Serve webpack assets generated by the compiler over a web server.
|
||||
const serverConfig = createDevServerConfig(proxyConfig, urls.lanUrlForConfig);
|
||||
const devServer = new WebpackDevServer(compiler, serverConfig);
|
||||
// Launch WebpackDevServer.
|
||||
devServer.listen(port, HOST, (err) => {
|
||||
if (err) {
|
||||
return console.log(err);
|
||||
}
|
||||
if (isInteractive) {
|
||||
clearConsole();
|
||||
}
|
||||
|
||||
console.log(chalk.cyan('Starting the development server...\n'));
|
||||
openBrowser(urls.localUrlForBrowser);
|
||||
});
|
||||
|
||||
['SIGINT', 'SIGTERM'].forEach(function (sig) {
|
||||
process.on(sig, function () {
|
||||
devServer.close();
|
||||
process.exit();
|
||||
});
|
||||
});
|
||||
|
||||
if (process.env.CI !== 'true') {
|
||||
// Gracefully exit when stdin ends
|
||||
process.stdin.on('end', function () {
|
||||
devServer.close();
|
||||
process.exit();
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
if (err && err.message) {
|
||||
console.log(err.message);
|
||||
}
|
||||
process.exit(1);
|
||||
});
|
||||
16
src/App.js
16
src/App.js
@ -1,16 +0,0 @@
|
||||
import React from 'react';
|
||||
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
|
||||
import Home from './pages/index';
|
||||
import SharePage from './pages/share';
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<Router>
|
||||
<Switch>
|
||||
<Route path={`/`} exact component={Home} />
|
||||
<Route path={`/share/:id`} component={SharePage} />
|
||||
</Switch>
|
||||
</Router>
|
||||
);
|
||||
};
|
||||
export default App;
|
||||
21
src/App.jsx
Normal file
21
src/App.jsx
Normal file
@ -0,0 +1,21 @@
|
||||
import React from 'react';
|
||||
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
|
||||
import Home from './pages/index';
|
||||
import SharePage from './pages/share';
|
||||
|
||||
// const App = () => {
|
||||
// return <Home />;
|
||||
// };
|
||||
const App = () => {
|
||||
return (
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path={`/`}>
|
||||
<Route index element={<Home />} />
|
||||
<Route path={`share/:id`} element={<SharePage />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</Router>
|
||||
);
|
||||
};
|
||||
export default App;
|
||||
@ -99,7 +99,7 @@ export default function Bgm() {
|
||||
onPlaying={handlePlaying}
|
||||
onPause={handlePause}
|
||||
loop={true}
|
||||
src="./static/bgm.mp3"
|
||||
src="/bgm.mp3"
|
||||
></audio>
|
||||
{!played && <div className="tip">👈 点击播放</div>}
|
||||
</StyledWraper>
|
||||
@ -1,39 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import Icon from './Icon';
|
||||
|
||||
const IconBack = () => {
|
||||
return (
|
||||
<Link to={'/'}>
|
||||
<Icon
|
||||
icon={
|
||||
<svg
|
||||
style={{ width: '2rem', height: '2rem' }}
|
||||
t="1569329382185"
|
||||
className="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="3667"
|
||||
width="45"
|
||||
height="45"
|
||||
>
|
||||
<path
|
||||
d="M512 85.333333C276.352 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667 426.666667-191.018667 426.666667-426.666667S747.648 85.333333 512 85.333333zM512 853.333333c-188.202667 0-341.333333-153.130667-341.333333-341.333333s153.130667-341.333333 341.333333-341.333333 341.333333 153.130667 341.333333 341.333333S700.202667 853.333333 512 853.333333z"
|
||||
p-id="3668"
|
||||
fill="#ffffff"
|
||||
></path>
|
||||
<path
|
||||
d="M626.304 329.984 568.362667 267.349333 322.048 495.189333 567.552 734.549333 627.114667 673.450667 445.952 496.810667Z"
|
||||
p-id="3669"
|
||||
fill="#ffffff"
|
||||
></path>
|
||||
</svg>
|
||||
}
|
||||
></Icon>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
export default IconBack;
|
||||
41
src/components/IconBack.jsx
Normal file
41
src/components/IconBack.jsx
Normal file
@ -0,0 +1,41 @@
|
||||
import React from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
import Icon from './Icon';
|
||||
|
||||
const IconBack = () => {
|
||||
const navigateTo = useNavigate();
|
||||
return (
|
||||
<Icon
|
||||
handleClick={() => {
|
||||
navigateTo('/');
|
||||
}}
|
||||
icon={
|
||||
<svg
|
||||
style={{ width: '2rem', height: '2rem' }}
|
||||
t="1569329382185"
|
||||
className="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="3667"
|
||||
width="45"
|
||||
height="45"
|
||||
>
|
||||
<path
|
||||
d="M512 85.333333C276.352 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667 426.666667-191.018667 426.666667-426.666667S747.648 85.333333 512 85.333333zM512 853.333333c-188.202667 0-341.333333-153.130667-341.333333-341.333333s153.130667-341.333333 341.333333-341.333333 341.333333 153.130667 341.333333 341.333333S700.202667 853.333333 512 853.333333z"
|
||||
p-id="3668"
|
||||
fill="#ffffff"
|
||||
></path>
|
||||
<path
|
||||
d="M626.304 329.984 568.362667 267.349333 322.048 495.189333 567.552 734.549333 627.114667 673.450667 445.952 496.810667Z"
|
||||
p-id="3669"
|
||||
fill="#ffffff"
|
||||
></path>
|
||||
</svg>
|
||||
}
|
||||
></Icon>
|
||||
);
|
||||
};
|
||||
|
||||
export default IconBack;
|
||||
@ -1,38 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import Icon from './Icon';
|
||||
|
||||
const IconImage = ({ path = '' }) => {
|
||||
return (
|
||||
<Link to={path}>
|
||||
<Icon
|
||||
icon={
|
||||
<svg
|
||||
t="1569320467584"
|
||||
className="icon"
|
||||
viewBox="0 0 1073 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="1776"
|
||||
width="32"
|
||||
height="32"
|
||||
>
|
||||
<path
|
||||
d="M191.597683 1024h690.029335A191.850117 191.850117 0 0 0 1072.84605 833.033403V191.597683A191.850117 191.850117 0 0 0 881.627018 0H191.597683A191.850117 191.850117 0 0 0 0 191.597683V833.033403a191.850117 191.850117 0 0 0 191.597683 190.966597zM87.468507 833.033403V191.597683a104.255393 104.255393 0 0 1 104.129176-104.129176h690.029335a104.255393 104.255393 0 0 1 104.129176 104.129176V833.033403a104.255393 104.255393 0 0 1-104.129176 104.129176H191.597683A104.255393 104.255393 0 0 1 87.468507 833.033403z"
|
||||
fill="#ffffff"
|
||||
p-id="1777"
|
||||
></path>
|
||||
<path
|
||||
d="M351.767287 481.770985a154.616048 154.616048 0 1 0-154.616048-154.616048 154.742265 154.742265 0 0 0 154.616048 154.616048z m-67.147541-154.616048a67.147541 67.147541 0 1 1 67.147541 67.147541 67.147541 67.147541 0 0 1-67.147541-67.147541zM191.597683 826.848761a43.544928 43.544928 0 0 0 30.923209-12.621718L388.748921 647.74658 536.675459 795.168248l400.48712-400.108467a43.797362 43.797362 0 0 0 0-61.84642 45.816837 45.816837 0 0 0-61.84642 0L536.675459 671.980279 388.748921 524.053741 160.674473 752.128189a43.923579 43.923579 0 0 0-12.621718 30.92321 43.797362 43.797362 0 0 0 43.671145 43.797362z"
|
||||
fill="#ffffff"
|
||||
p-id="1778"
|
||||
></path>
|
||||
</svg>
|
||||
}
|
||||
></Icon>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
export default IconImage;
|
||||
40
src/components/IconImage.jsx
Normal file
40
src/components/IconImage.jsx
Normal file
@ -0,0 +1,40 @@
|
||||
import React from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
import Icon from './Icon';
|
||||
|
||||
const IconImage = ({ path = '' }) => {
|
||||
const navigateTo = useNavigate();
|
||||
return (
|
||||
<Icon
|
||||
handleClick={() => {
|
||||
navigateTo(path);
|
||||
}}
|
||||
icon={
|
||||
<svg
|
||||
t="1569320467584"
|
||||
className="icon"
|
||||
viewBox="0 0 1073 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="1776"
|
||||
width="32"
|
||||
height="32"
|
||||
>
|
||||
<path
|
||||
d="M191.597683 1024h690.029335A191.850117 191.850117 0 0 0 1072.84605 833.033403V191.597683A191.850117 191.850117 0 0 0 881.627018 0H191.597683A191.850117 191.850117 0 0 0 0 191.597683V833.033403a191.850117 191.850117 0 0 0 191.597683 190.966597zM87.468507 833.033403V191.597683a104.255393 104.255393 0 0 1 104.129176-104.129176h690.029335a104.255393 104.255393 0 0 1 104.129176 104.129176V833.033403a104.255393 104.255393 0 0 1-104.129176 104.129176H191.597683A104.255393 104.255393 0 0 1 87.468507 833.033403z"
|
||||
fill="#ffffff"
|
||||
p-id="1777"
|
||||
></path>
|
||||
<path
|
||||
d="M351.767287 481.770985a154.616048 154.616048 0 1 0-154.616048-154.616048 154.742265 154.742265 0 0 0 154.616048 154.616048z m-67.147541-154.616048a67.147541 67.147541 0 1 1 67.147541 67.147541 67.147541 67.147541 0 0 1-67.147541-67.147541zM191.597683 826.848761a43.544928 43.544928 0 0 0 30.923209-12.621718L388.748921 647.74658 536.675459 795.168248l400.48712-400.108467a43.797362 43.797362 0 0 0 0-61.84642 45.816837 45.816837 0 0 0-61.84642 0L536.675459 671.980279 388.748921 524.053741 160.674473 752.128189a43.923579 43.923579 0 0 0-12.621718 30.92321 43.797362 43.797362 0 0 0 43.671145 43.797362z"
|
||||
fill="#ffffff"
|
||||
p-id="1778"
|
||||
></path>
|
||||
</svg>
|
||||
}
|
||||
></Icon>
|
||||
);
|
||||
};
|
||||
|
||||
export default IconImage;
|
||||
@ -1,6 +1,5 @@
|
||||
import React, { useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import URLSearchParams from '@ungap/url-search-params';
|
||||
import { getCorrectTextColor } from '../../utils';
|
||||
|
||||
import Download from '../DownloadBtn';
|
||||
42
src/hooks.js
42
src/hooks.js
@ -1,8 +1,8 @@
|
||||
import { useState, useReducer, useEffect } from 'react';
|
||||
import pinyin from 'pinyin';
|
||||
const jinrishici = require('jinrishici');
|
||||
|
||||
import * as jinrishici from 'jinrishici';
|
||||
import convert from 'color-convert';
|
||||
|
||||
import colors from './assets/colors.json';
|
||||
|
||||
const useMobile = (width = 750) => {
|
||||
@ -51,12 +51,12 @@ const useModal = () => {
|
||||
|
||||
colors.push({
|
||||
name: '',
|
||||
colors: JSON.parse(localStorage.getItem('FAV_COLORS') || '[]')
|
||||
colors: JSON.parse(localStorage.getItem('FAV_COLORS') || '[]'),
|
||||
});
|
||||
|
||||
const Colors = colors.map(set => {
|
||||
const Colors = colors.map((set) => {
|
||||
set.RGB = convert.hex.rgb(set.hex);
|
||||
set.colors = set.colors.map(c => {
|
||||
set.colors = set.colors.map((c) => {
|
||||
let heteronymIdx = c.name.indexOf('藏') > -1 ? 1 : 0;
|
||||
return {
|
||||
...c,
|
||||
@ -64,27 +64,27 @@ const Colors = colors.map(set => {
|
||||
CMYK: convert.hex.cmyk(c.hex),
|
||||
pinyin: pinyin(c.name, {
|
||||
heteronym: true, // 启用多音字模式
|
||||
segment: true // 启用分词，以解决多音字问题。
|
||||
segment: true, // 启用分词，以解决多音字问题。
|
||||
})
|
||||
.map(item => {
|
||||
.map((item) => {
|
||||
return item.length > 1 ? item[heteronymIdx] : item;
|
||||
})
|
||||
.join(' ')
|
||||
.join(' '),
|
||||
};
|
||||
});
|
||||
return set;
|
||||
});
|
||||
console.log('all', Colors);
|
||||
|
||||
const usePoetry = dep => {
|
||||
const usePoetry = (dep) => {
|
||||
const [poetry, setPoetry] = useState(null);
|
||||
const fetchPoetry = () => {
|
||||
jinrishici.load(
|
||||
result => {
|
||||
(result) => {
|
||||
let obj = {
|
||||
content: result.data.content,
|
||||
author: result.data.origin.author,
|
||||
title: result.data.origin.title
|
||||
title: result.data.origin.title,
|
||||
};
|
||||
obj.content = obj.content
|
||||
.replace(/[，|。|！|？|、]/g, ' ')
|
||||
@ -93,7 +93,7 @@ const usePoetry = dep => {
|
||||
setPoetry(obj);
|
||||
localStorage.setItem('POETRY', JSON.stringify(obj));
|
||||
},
|
||||
err => {
|
||||
(err) => {
|
||||
setPoetry(null);
|
||||
localStorage.setItem('POETRY', null);
|
||||
console.log('err', err);
|
||||
@ -111,8 +111,8 @@ const useShareColor = (id = null) => {
|
||||
let tmpColor = null;
|
||||
if (id) {
|
||||
let [setId] = id.split('-');
|
||||
tmpSet = Colors.find(set => set.id == setId);
|
||||
tmpColor = tmpSet.colors.find(c => c.id == id);
|
||||
tmpSet = Colors.find((set) => set.id == setId);
|
||||
tmpColor = tmpSet.colors.find((c) => c.id == id);
|
||||
// 滑动到顶部
|
||||
document.body.scrollTop = 0; // For Safari
|
||||
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
|
||||
@ -126,15 +126,15 @@ const useColor = () => {
|
||||
const SelectedColor =
|
||||
JSON.parse(localStorage.getItem('SELECTED_COLOR')) || SelectedColorSet.colors[16];
|
||||
const initialValue = {
|
||||
sets: Colors.map(set => {
|
||||
sets: Colors.map((set) => {
|
||||
const newSet = { ...set };
|
||||
// delete newSet.colors;
|
||||
return newSet;
|
||||
}),
|
||||
currColor: SelectedColor,
|
||||
currSet: SelectedColorSet
|
||||
currSet: SelectedColorSet,
|
||||
};
|
||||
const execSideEffect = obj => {
|
||||
const execSideEffect = (obj) => {
|
||||
console.log('dddd', obj);
|
||||
document.body.style.backgroundColor = obj.hex;
|
||||
localStorage.setItem('SELECTED_COLOR', JSON.stringify(obj));
|
||||
@ -151,12 +151,12 @@ const useColor = () => {
|
||||
const { currSet, sets } = state;
|
||||
switch (type) {
|
||||
case 'UPDATE_COLOR': {
|
||||
let c = currSet.colors.find(c => c.name === payload.name);
|
||||
let c = currSet.colors.find((c) => c.name === payload.name);
|
||||
execSideEffect(c);
|
||||
return { ...state, currColor: c };
|
||||
}
|
||||
case 'UPDATE_COLOR_SET': {
|
||||
let cs = sets.find(cs => cs.name === payload.name);
|
||||
let cs = sets.find((cs) => cs.name === payload.name);
|
||||
localStorage.setItem('SELECTED_COLOR_SET', JSON.stringify(cs));
|
||||
if (payload.name == '') {
|
||||
cs.colors = JSON.parse(localStorage.getItem('FAV_COLORS') || '[]');
|
||||
@ -171,10 +171,10 @@ const useColor = () => {
|
||||
const { currColor } = initialValue;
|
||||
execSideEffect(currColor);
|
||||
const [state, dispatch] = useReducer(reducer, initialValue);
|
||||
const updateCurrColor = name => {
|
||||
const updateCurrColor = (name) => {
|
||||
dispatch({ type: 'UPDATE_COLOR', payload: { name } });
|
||||
};
|
||||
const updateCurrSet = name => {
|
||||
const updateCurrSet = (name) => {
|
||||
dispatch({ type: 'UPDATE_COLOR_SET', payload: { name } });
|
||||
};
|
||||
console.log('useReducer store', state);
|
||||
|
||||
16
src/index.js
16
src/index.js
@ -1,16 +0,0 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './App';
|
||||
import GlobalStyle from './Global.style';
|
||||
|
||||
import register from './registerServiceWorker';
|
||||
|
||||
ReactDOM.render(
|
||||
<>
|
||||
<GlobalStyle />
|
||||
<App />
|
||||
</>,
|
||||
document.getElementById('root')
|
||||
);
|
||||
|
||||
register();
|
||||
12
src/main.jsx
Normal file
12
src/main.jsx
Normal file
@ -0,0 +1,12 @@
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import App from './App';
|
||||
import GlobalStyle from './Global.style';
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<>
|
||||
<GlobalStyle />
|
||||
<App />
|
||||
</>
|
||||
);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { useShareColor } from '../hooks';
|
||||
import Card from '../components/Card';
|
||||
import IconBack from '../components/IconBack';
|
||||
@ -14,8 +14,8 @@ const Wrapper = styled.section`
|
||||
}
|
||||
`;
|
||||
|
||||
const Share = ({ match }) => {
|
||||
const { id } = match.params;
|
||||
const Share = () => {
|
||||
const { id } = useParams();
|
||||
const { set, color } = useShareColor(id);
|
||||
document.body.style.backgroundColor = `rgba(${color.RGB.join(',')},.4)`;
|
||||
|
||||
@ -1,113 +0,0 @@
|
||||
// In production, we register a service worker to serve assets from local cache.
|
||||
|
||||
// This lets the app load faster on subsequent visits in production, and gives
|
||||
// it offline capabilities. However, it also means that developers (and users)
|
||||
// will only see deployed updates on the "N+1" visit to a page, since previously
|
||||
// cached resources are updated in the background.
|
||||
|
||||
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
|
||||
// This link also includes instructions on opting out of this behavior.
|
||||
|
||||
const isLocalhost = Boolean(
|
||||
window.location.hostname === 'localhost' ||
|
||||
// [::1] is the IPv6 localhost address.
|
||||
window.location.hostname === '[::1]' ||
|
||||
// 127.0.0.1/8 is considered localhost for IPv4.
|
||||
window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
|
||||
);
|
||||
|
||||
export default function register() {
|
||||
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
|
||||
// The URL constructor is available in all browsers that support SW.
|
||||
const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
|
||||
if (publicUrl.origin !== window.location.origin) {
|
||||
// Our service worker won't work if PUBLIC_URL is on a different origin
|
||||
// from what our page is served on. This might happen if a CDN is used to
|
||||
// serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
|
||||
return;
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
const swUrl = `service-worker.js`;
|
||||
|
||||
if (isLocalhost) {
|
||||
// This is running on localhost. Lets check if a service worker still exists or not.
|
||||
checkValidServiceWorker(swUrl);
|
||||
|
||||
// Add some additional logging to localhost, pointing developers to the
|
||||
// service worker/PWA documentation.
|
||||
navigator.serviceWorker.ready.then(() => {
|
||||
console.log(
|
||||
'This web app is being served cache-first by a service ' +
|
||||
'worker. To learn more, visit https://goo.gl/SC7cgQ'
|
||||
);
|
||||
});
|
||||
} else {
|
||||
// Is not local host. Just register service worker
|
||||
registerValidSW(swUrl);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function registerValidSW(swUrl) {
|
||||
navigator.serviceWorker
|
||||
.register(swUrl)
|
||||
.then(registration => {
|
||||
registration.onupdatefound = () => {
|
||||
const installingWorker = registration.installing;
|
||||
installingWorker.onstatechange = () => {
|
||||
if (installingWorker.state === 'installed') {
|
||||
if (navigator.serviceWorker.controller) {
|
||||
// At this point, the old content will have been purged and
|
||||
// the fresh content will have been added to the cache.
|
||||
// It's the perfect time to display a "New content is
|
||||
// available; please refresh." message in your web app.
|
||||
console.log('New content is available; please refresh.');
|
||||
} else {
|
||||
// At this point, everything has been precached.
|
||||
// It's the perfect time to display a
|
||||
// "Content is cached for offline use." message.
|
||||
console.log('Content is cached for offline use.');
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error during service worker registration:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function checkValidServiceWorker(swUrl) {
|
||||
// Check if the service worker can be found. If it can't reload the page.
|
||||
fetch(swUrl)
|
||||
.then(response => {
|
||||
// Ensure service worker exists, and that we really are getting a JS file.
|
||||
if (
|
||||
response.status === 404 ||
|
||||
response.headers.get('content-type').indexOf('javascript') === -1
|
||||
) {
|
||||
// No service worker found. Probably a different app. Reload the page.
|
||||
navigator.serviceWorker.ready.then(registration => {
|
||||
registration.unregister().then(() => {
|
||||
window.location.reload();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
// Service worker found. Proceed as normal.
|
||||
registerValidSW(swUrl);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
console.log('No internet connection found. App is running in offline mode.');
|
||||
});
|
||||
}
|
||||
|
||||
export function unregister() {
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.ready.then(registration => {
|
||||
registration.unregister();
|
||||
});
|
||||
}
|
||||
}
|
||||
14
vite.config.js
Normal file
14
vite.config.js
Normal file
@ -0,0 +1,14 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import pkg from './package.json';
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
base: new URL(pkg.homepage).pathname,
|
||||
server: {
|
||||
port: 3006,
|
||||
},
|
||||
esbuild: {
|
||||
drop: ['console', 'debugger'],
|
||||
},
|
||||
plugins: [react()],
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user