├── .gitignore ├── .npmrc ├── README.md ├── netlify.toml ├── package-lock.json ├── package.json ├── src ├── app.d.ts ├── app.html ├── components │ ├── HotSiteCard.svelte │ ├── HotSites.svelte │ ├── SimpleButton.svelte │ ├── SiteTitle.svelte │ └── pageList │ │ ├── Card.svelte │ │ ├── CategoryTitle.svelte │ │ └── List.svelte ├── lib │ ├── customIcon │ │ └── customIcon.json │ └── images │ │ ├── github.svg │ │ ├── logos │ │ ├── AntDesign.svg │ │ ├── Astro.svg │ │ ├── Bun.svg │ │ ├── Esbuild.svg │ │ ├── LeetCode.svg │ │ ├── Nuxt.svg │ │ ├── Qwik.svg │ │ ├── React.svg │ │ ├── Rollup.svg │ │ ├── Solid.svg │ │ ├── Svelte.svg │ │ ├── TailwindCSS.svg │ │ ├── UnoCSS.svg │ │ ├── Vite.svg │ │ ├── Vue.svg │ │ ├── Webpack.svg │ │ └── vant.jpg │ │ ├── svelte-logo.svg │ │ ├── svelte-welcome.png │ │ └── svelte-welcome.webp ├── routes │ ├── +layout.svelte │ ├── +page.svelte │ ├── +page.ts │ ├── Header.svelte │ ├── ai │ │ ├── +page.svelte │ │ └── +page.ts │ ├── home │ │ ├── CustomSites.svelte │ │ └── FormModal.svelte │ └── styles.css ├── types │ └── index.d.ts └── utils │ ├── aiSites │ ├── aiUtilSites.ts │ └── index.ts │ ├── hotSites.ts │ └── sites │ ├── algorithm.ts │ ├── blog.ts │ ├── echarts.ts │ ├── index.ts │ ├── ossSites.ts │ ├── spec.ts │ ├── techSites.ts │ ├── utilSites.ts │ └── weekly.ts ├── static ├── favicon.svg └── robots.txt ├── svelte.config.js ├── tsconfig.json ├── uno.config.ts └── vite.config.ts /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | .vercel 10 | .output 11 | .netlify 12 | vite.config.js.timestamp-* 13 | vite.config.ts.timestamp-* 14 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # what 2 | 3 | 收录前端各类技术站点。 4 | 包括但不限于前端技术站点、技术周刊、**高质量**个人博客、前端公众号、技术规范、开源项目站点等。 5 | 仅限中文、英文，英文最好。 6 | 7 | 欢迎PR~ 8 | 9 | # why 10 | 11 | 可能你觉得你有Google/Github就够了，但此仓库的存在主要为了起到下面几个作用： 12 | 1. 解放自己的浏览器书签页，清爽一下。 13 | 2. 尤其对于国外的个人博客，经常会忘记他们叫什么，想搜索都不知道搜什么。 14 | 3. 想技术提升的时候，有个统一的地方，找到这个仓库就可以找到大部分**新鲜的**技术资讯。 15 | 4. 最主要的还是收录英文站点，理由同2。 16 | 5. 比如你是一个前端博主，或者你要在团队内技术分享，当你灵感枯竭的时候来这些站点翻一翻。有很大帮助。 17 | 6. 提供自定义网站功能，相当于书签管理，基于localstorage实现。 18 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | command = "npm run build" 3 | publish = "build" -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "awesome-fe-sites-2", 3 | "version": "0.0.1", 4 | "scripts": { 5 | "dev": "vite dev", 6 | "build": "vite build", 7 | "preview": "vite preview", 8 | "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", 9 | "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", 10 | "stable-up": "taze -w -I", 11 | "up": "taze major -I" 12 | }, 13 | "devDependencies": { 14 | "@fontsource/fira-mono": "^4.5.10", 15 | "@iconify/json": "^2.2.93", 16 | "@neoconfetti/svelte": "^1.0.0", 17 | "@sveltejs/adapter-auto": "^2.0.0", 18 | "@sveltejs/adapter-netlify": "^2.0.6", 19 | "@sveltejs/kit": "^1.5.0", 20 | "@types/cookie": "^0.5.1", 21 | "@unocss/preset-icons": "^0.53.5", 22 | "@unocss/preset-uno": "^0.53.5", 23 | "@unocss/preset-web-fonts": "^0.53.5", 24 | "sass": "^1.64.0", 25 | "svelte": "^3.54.0", 26 | "svelte-check": "^3.0.1", 27 | "taze": "^0.11.2", 28 | "tslib": "^2.5.3", 29 | "typescript": "^4.9.3", 30 | "unocss": "^0.53.5", 31 | "vite": "^4.4.5" 32 | }, 33 | "type": "module" 34 | } 35 | -------------------------------------------------------------------------------- /src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://kit.svelte.dev/docs/types#app 2 | // for information about these interfaces 3 | declare global { 4 | namespace App { 5 | // interface Error {} 6 | // interface Locals {} 7 | // interface PageData {} 8 | // interface Platform {} 9 | } 10 | } 11 | 12 | export {}; 13 | -------------------------------------------------------------------------------- /src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | %sveltekit.head% 9 | 10 | 19 | 20 | 21 | 28 | 29 | 30 | 31 |
%sveltekit.body%
32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /src/components/HotSiteCard.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
8 |
{sites.type}
10 |
11 | {#each sites.sites as site} 12 | 18 | {#if site.iconClass} 19 |
20 | {:else if site.logo} 21 | 22 | {/if} 23 | {site.name} 24 | 25 | {/each} 26 |
27 |
28 | 29 | 30 | 44 | -------------------------------------------------------------------------------- /src/components/HotSites.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 31 | -------------------------------------------------------------------------------- /src/components/SimpleButton.svelte: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 |
5 | 6 | 16 | 17 | -------------------------------------------------------------------------------- /src/components/SiteTitle.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 |
7 |
8 |
9 | 前端森林 10 |
11 |
12 |
前端酷站 尽收眼底
13 |
14 |
15 | -------------------------------------------------------------------------------- /src/components/pageList/Card.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 11 |
12 | {site.name} 13 |
14 |
15 | {site.desc} 16 |
17 | 18 | 19 | 20 | 52 | -------------------------------------------------------------------------------- /src/components/pageList/CategoryTitle.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
9 |
10 | {category.type} 11 |
12 | -------------------------------------------------------------------------------- /src/components/pageList/List.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 | {#each pageSites as list} 10 |
11 | 12 |
13 | {#each list.sites as site} 14 | 15 | {/each} 16 |
17 |
18 | {/each} 19 |
20 | 21 | 28 | -------------------------------------------------------------------------------- /src/lib/customIcon/customIcon.json: -------------------------------------------------------------------------------- 1 | { 2 | "tailwindcss": { 3 | "iconName": "i-cus-tailwindcss", 4 | "iconMain": "" 5 | }, 6 | "astro": { 7 | "iconName": "i-cus-astro", 8 | "iconMain": "" 9 | }, 10 | "leetcode": { 11 | "iconName": "i-cus-leetcode", 12 | "iconMain": "" 13 | }, 14 | "unocss": { 15 | "iconName": "i-cus-unocss", 16 | "iconMain": "" 17 | }, 18 | "vant": { 19 | "iconName": "i-cus-vant", 20 | "iconMain": "" 21 | }, 22 | "rspack": { 23 | "iconName": "i-cus-rspack", 24 | "iconMain": "" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/lib/images/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 9 | 16 | -------------------------------------------------------------------------------- /src/lib/images/logos/AntDesign.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/lib/images/logos/Astro.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 7 | 8 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 29 | 30 | -------------------------------------------------------------------------------- /src/lib/images/logos/Bun.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/lib/images/logos/Esbuild.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/lib/images/logos/LeetCode.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Layer 1 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/lib/images/logos/Nuxt.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/lib/images/logos/Qwik.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/lib/images/logos/React.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/lib/images/logos/Rollup.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/lib/images/logos/Solid.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/lib/images/logos/Svelte.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/lib/images/logos/TailwindCSS.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Layer 1 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/lib/images/logos/UnoCSS.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/lib/images/logos/Vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/lib/images/logos/Vue.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/lib/images/logos/Webpack.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/lib/images/logos/vant.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cunzaizhuyi/awesome-fe-sites/6f56a5843c0d888a12c769b8bc79be33fd2c07ce/src/lib/images/logos/vant.jpg -------------------------------------------------------------------------------- /src/lib/images/svelte-logo.svg: -------------------------------------------------------------------------------- 1 | svelte-logo -------------------------------------------------------------------------------- /src/lib/images/svelte-welcome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cunzaizhuyi/awesome-fe-sites/6f56a5843c0d888a12c769b8bc79be33fd2c07ce/src/lib/images/svelte-welcome.png -------------------------------------------------------------------------------- /src/lib/images/svelte-welcome.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cunzaizhuyi/awesome-fe-sites/6f56a5843c0d888a12c769b8bc79be33fd2c07ce/src/lib/images/svelte-welcome.webp -------------------------------------------------------------------------------- /src/routes/+layout.svelte: -------------------------------------------------------------------------------- 1 | 20 | 21 |
22 |
23 | 24 |
25 | 26 |
27 | 28 |
29 |

前端森林

30 |
31 |
32 | 33 | 68 | -------------------------------------------------------------------------------- /src/routes/+page.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 前端森林 10 | 11 | 12 | 13 |
14 |
15 | 16 | 17 | 18 |
19 |
20 | 21 | 24 | -------------------------------------------------------------------------------- /src/routes/+page.ts: -------------------------------------------------------------------------------- 1 | // since there's no dynamic data here, we can prerender 2 | // it so that it gets served as a static asset in production 3 | export const prerender = true; 4 | export const ssr = false; 5 | -------------------------------------------------------------------------------- /src/routes/Header.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
8 | 9 | 10 |
11 | 27 | 28 |
29 | 30 | GitHub 31 | 32 |
33 |
34 |
35 | 36 | 121 | -------------------------------------------------------------------------------- /src/routes/ai/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | AI 8 | 9 | 10 | 11 |
12 | 13 |
14 | 15 | 17 | -------------------------------------------------------------------------------- /src/routes/ai/+page.ts: -------------------------------------------------------------------------------- 1 | import { dev } from '$app/environment'; 2 | 3 | // we don't need any JS on this page, though we'll load 4 | // it in dev so that we get hot module replacement 5 | export const csr = dev; 6 | 7 | // since there's no dynamic data here, we can prerender 8 | // it so that it gets served as a static asset in production 9 | export const prerender = true; 10 | -------------------------------------------------------------------------------- /src/routes/home/CustomSites.svelte: -------------------------------------------------------------------------------- 1 | 50 | 51 |
52 |
53 |
54 |
55 | 私人收藏 56 |
57 |
58 | {#each localList as site} 59 | 60 | 61 | { site.name } 62 | 63 | 64 | {/each} 65 |
66 |
(modalVisible = true)} 69 | > 70 | 新增私人收藏站点 👏 71 |
72 |
73 | 74 | 80 |
81 | 86 | (newSite.name = (ev.target).value) 87 | } 88 | /> 89 | 94 | (newSite.link = (ev.target).value) 95 | } 96 | /> 97 |
98 | 99 |
100 | 101 | 115 | -------------------------------------------------------------------------------- /src/routes/home/FormModal.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | {#if visible} 9 |
10 |
11 |
12 |
13 |
{title}
14 |
15 |
16 | 17 |
18 |
19 | 22 | 25 |
26 |
27 |
28 | {/if} 29 | 30 | -------------------------------------------------------------------------------- /src/routes/styles.css: -------------------------------------------------------------------------------- 1 | @import '@fontsource/fira-mono'; 2 | 3 | /* The style file stored on Bilibili, loads the corresponding font based on Unicode. */ 4 | @import url(https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css); 5 | 6 | :root { 7 | /* HarmonyOS fonts have excellent readability across different devices. */ 8 | --font-body: 'Inter', 'HarmonyOS Sans SC', 'HarmonyOS_Regular', system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 9 | Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 10 | --font-mono: 'Fira Mono', monospace; 11 | --color-bg-0: rgb(202, 216, 228); 12 | --color-bg-1: hsl(209, 36%, 86%); 13 | --color-bg-2: hsl(0, 5%, 96%); 14 | --color-theme-1: #ff3e00; 15 | --color-theme-2: #4075a6; 16 | --color-text: rgba(0, 0, 0, 0.7); 17 | --column-width: 42rem; 18 | --column-margin-top: 4rem; 19 | --scrollbar-thumb-color: #c9cdd4; 20 | --scrollbar-thumb-hover-color: #86909c; 21 | --scrollbar-track-piece: transparent; 22 | font-family: var(--font-body); 23 | color: var(--color-text); 24 | --page-bg: radial-gradient(50% 50% at 50% 50%, 25 | rgba(255, 255, 255, 0.75) 0%, 26 | rgba(255, 255, 255, 0) 100%), 27 | linear-gradient(180deg, var(--color-bg-0) 0%, var(--color-bg-1) 10%, var(--color-bg-2) 50%); 28 | /* Ensure that the appearance and disappearance of the scrollbar does not cause any page jitter. */ 29 | scrollbar-gutter: stable; 30 | } 31 | 32 | :root[class~='dark'] { 33 | --color-text: #ffffffe6; 34 | --color-bg-0: #1e1e1e; 35 | --color-bg-1: #2d2d2d; 36 | --color-bg-2: #434343; 37 | --scrollbar-thumb-color: #5f5f60; 38 | --scrollbar-thumb-hover-color: #929293; 39 | --page-bg: linear-gradient(to top, #434343 0%, #000000 100%); 40 | --scrollbar-track-piece: #1e1e1e; 41 | } 42 | 43 | ::selection { 44 | background: #646cff; 45 | color: #fff; 46 | } 47 | 48 | body { 49 | min-height: 100vh; 50 | margin: 0; 51 | background-attachment: fixed; 52 | /* background-color: var(--color-bg-1); */ 53 | /* background-color: #f5f4f4; */ 54 | background-size: 100vw 100vh; 55 | background-image: var(--page-bg) 56 | } 57 | 58 | h1, 59 | h2, 60 | p { 61 | font-weight: 400; 62 | } 63 | 64 | p { 65 | line-height: 1.5; 66 | } 67 | 68 | a { 69 | /*color: var(--color-theme-1);*/ 70 | text-decoration: none; 71 | } 72 | 73 | 74 | h1 { 75 | font-size: 2rem; 76 | text-align: center; 77 | } 78 | 79 | h2 { 80 | font-size: 1rem; 81 | } 82 | 83 | pre { 84 | font-size: 16px; 85 | font-family: var(--font-mono); 86 | background-color: rgba(255, 255, 255, 0.45); 87 | border-radius: 3px; 88 | box-shadow: 2px 2px 6px rgb(255 255 255 / 25%); 89 | padding: 0.5em; 90 | overflow-x: auto; 91 | color: var(--color-text); 92 | } 93 | 94 | .text-column { 95 | display: flex; 96 | max-width: 48rem; 97 | flex: 0.6; 98 | flex-direction: column; 99 | justify-content: center; 100 | margin: 0 auto; 101 | } 102 | 103 | input, 104 | button { 105 | font-size: inherit; 106 | font-family: inherit; 107 | } 108 | 109 | button:focus:not(:focus-visible) { 110 | outline: none; 111 | } 112 | 113 | @media (min-width: 720px) { 114 | h1 { 115 | font-size: 2.4rem; 116 | } 117 | } 118 | 119 | .visually-hidden { 120 | border: 0; 121 | clip: rect(0 0 0 0); 122 | height: auto; 123 | margin: 0; 124 | overflow: hidden; 125 | padding: 0; 126 | position: absolute; 127 | width: 1px; 128 | white-space: nowrap; 129 | } 130 | 131 | /* Scrollbar style. */ 132 | ::-webkit-scrollbar { 133 | width: 8px; 134 | height: 8px; 135 | } 136 | 137 | ::-webkit-scrollbar-thumb { 138 | border-radius: 4px; 139 | border-width: 0px; 140 | background: var(--scrollbar-thumb-color); 141 | } 142 | 143 | ::-webkit-scrollbar-thumb:hover { 144 | background: var(--scrollbar-thumb-hover-color); 145 | } 146 | 147 | ::-webkit-scrollbar-track-piece { 148 | background: var(--scrollbar-track-piece); 149 | } 150 | 151 | ::-webkit-scrollbar-corner { 152 | background: transparent; 153 | } 154 | -------------------------------------------------------------------------------- /src/types/index.d.ts: -------------------------------------------------------------------------------- 1 | export type Site = { 2 | name: string; 3 | link: string; 4 | desc: string; 5 | }; 6 | 7 | type HotSite = { 8 | /** 9 | * 站点名称 10 | */ 11 | name: string; 12 | /** 13 | * 站点链接 14 | */ 15 | link: string; 16 | logo?: any; 17 | 18 | iconClass?: string; 19 | 20 | // Some icons may have their center of gravity off-center, or their area too large or too small. we are using additional CSS to correct this. 21 | extraCss?: string; 22 | }; 23 | -------------------------------------------------------------------------------- /src/utils/aiSites/aiUtilSites.ts: -------------------------------------------------------------------------------- 1 | export const aiEditorSites = { 2 | type: 'AI - 编辑器', 3 | sites: [ 4 | { 5 | name: 'Cursor编辑器', 6 | link: 'https://www.cursor.so/', 7 | desc: '一个可以免openAI账号直接使用chatGPT-4的编辑器', 8 | }, 9 | { 10 | name: 'CodeCursor', 11 | link: 'https://github.com/Helixform/CodeCursor', 12 | desc: 'vs code里的cursor扩展，不再需要下载cursor编辑器了', 13 | }, 14 | { 15 | name: 'codeium', 16 | link: 'https://codeium.com/', 17 | desc: '多种编辑器扩展，包括vscode和webstorm，集成AI功能，只需要注册个codeium账号，无须openAI账号', 18 | }, 19 | { 20 | name: 'bito', 21 | link: 'https://bito.ai/', 22 | desc: '可以用在多种编辑器的openAI能力' 23 | } 24 | ] 25 | } 26 | 27 | export const aiDrawSites = { 28 | type: 'AI - 绘画/图片', 29 | sites: [ 30 | { 31 | name: 'MidJourney.TalkGame.Ai', 32 | link: 'https://midjourney.talkgame.ai/', 33 | desc: '扩充你的MidJourney提示词, 让想像有更多的想像', 34 | }, 35 | { 36 | name: 'diffusionbee', 37 | link: 'https://github.com/divamgupta/diffusionbee-stable-diffusion-ui', 38 | desc: 'stable-diffusion模型本地运行', 39 | }, 40 | { 41 | name: 'lexica', 42 | link: 'https://lexica.art/', 43 | desc: 'The Stable Diffusion search engine', 44 | }, 45 | { 46 | name: 'pixelicious', 47 | link: 'https://www.pixelicious.xyz/', 48 | desc: '把图像转为像素风格，适用于游戏开发', 49 | }, 50 | { 51 | name: 'picfinder', 52 | link: 'https://picfinder.ai/', 53 | desc: '免费的AI图片生成网站', 54 | }, 55 | { 56 | name: 'AI证件照', 57 | link: 'https://swanhub.co/ZeYiLin/HivisionIDPhotos/demo', 58 | desc: 'AI证件照 https://github.com/xiaolin199912/HivisionIDPhotos ' 59 | } 60 | ] 61 | } 62 | 63 | export const aiSearchSites = { 64 | type: 'AI - 搜索引擎类', 65 | sites: [ 66 | { 67 | name: '发现最佳人工智能网站', 68 | link: 'https://www.toolify.ai/zh/', 69 | desc: '它收录了 8000 多款AI产品，在详情页还展示了每款产品的月访问量、平均访问时长、跳出率等信息', 70 | }, 71 | { 72 | name: 'AIGC工具导航', 73 | link: 'https://aigc.cn/', 74 | desc: '全球1600+AI工具集合导航', 75 | }, 76 | { 77 | name: 'phind', 78 | link: 'https://www.phind.com/', 79 | desc: '面向开发者的AI搜索引擎', 80 | }, 81 | { 82 | name: 'MediSearch', 83 | link: 'https://medisearch.io/zh', 84 | desc: '以科学为依据直接解答医学问题, 基于AI', 85 | }, 86 | { 87 | name: 'aivalley', 88 | link: 'https://aivalley.ai/', 89 | desc: '最新AI工具集合和AI提示词搜索', 90 | }, 91 | { 92 | name: 'coze', 93 | link: 'https://www.coze.cn/?cate_type=category&cate_value=7331636528340500518', 94 | desc: '字节扣子' 95 | } 96 | ] 97 | } 98 | 99 | export const aiUtilSites = { 100 | type: 'AI - 工具', 101 | sites: [ 102 | { 103 | name: 'carrot', 104 | link: 'https://github.com/xx025/carrot', 105 | desc: '这儿为你准备了无数个免费好用的ChatGPT镜像站点', 106 | }, 107 | { 108 | name: 'AI工具百宝箱', 109 | link: 'https://www.explainthis.io/zh-hans/ai-toolkit ', 110 | desc: '最实用、最热门的 AI 工具，帮助你在工作与学习上更轻松有效率', 111 | }, 112 | { 113 | name: '多墨智能', 114 | link: 'https://duomosmart.com/', 115 | desc: 'AI一键生成文档、流程图、思维导图', 116 | }, 117 | { 118 | name: '也略', 119 | link: 'https://www.mydyjs.com/gpt.html', 120 | desc: '一个让你实现Chat GPT自由的网站', 121 | }, 122 | { 123 | name: "Name By AI", 124 | link: "https://www.namedbyai.com/", 125 | desc: "一个AI起名字的网站", 126 | }, 127 | ] 128 | } 129 | 130 | 131 | export const aiKnowledgeBase = { 132 | type: 'AI - 知识库', 133 | sites: [ 134 | { 135 | name: 'ChatGPT 中文调教指南', 136 | link: 'https://chatguide.plexpt.com/', 137 | desc: '一些ChatGPT的prompt和调教技巧', 138 | }, 139 | { 140 | name: 'AI Short', 141 | link: 'https://www.aishort.top/', 142 | desc: '让生产力加倍的ChatGPT的prompt', 143 | }, 144 | { 145 | name: '紧跟AIGC风向的知识库', 146 | link: 'https://szqxz4m7fs.feishu.cn/wiki/wikcnMJ5qdVdOJ03XsBZFuXIRkf', 147 | desc: '持续关注AIGC相关动态、研究报告、相关资料、商业落地等，包括但不限于ChatGPT相关问题、AI绘画相关落地、国内大模型研究进展、开源模型进展、资料汇总等', 148 | }, 149 | { 150 | name: 'AI智库', 151 | link: 'https://ki6j1b0d92h.feishu.cn/wiki/wikcnAFcEccJ5iXiU8MRntc2Vyb', 152 | desc: '由网友整理资料和笔记的制作而成的飞书文档，专注于AI实践分享的知识库。提供全面实用的AI行业动态、实用工具分享、研报阅读以及教程和技巧分享', 153 | }, 154 | { 155 | name: 'GPT最佳实践', 156 | link: 'https://platform.openai.com/docs/guides/prompt-engineering', 157 | desc: 'Open AI官方写的如何向GPT提问的最佳实践', 158 | }, 159 | { 160 | name: 'GPT最佳实践(中文大白话版本)', 161 | link: 'https://futureforce.feishu.cn/file/CMpdbLxAhon5K5x5C1OcciYwnOf', 162 | desc: 'OpenAI：GPT 最佳实践中文大白话版本_未来力场编译', 163 | }, 164 | { 165 | name: '通往AGI之路', 166 | link: 'https://ywh1bkansf.feishu.cn/wiki/QPe5w5g7UisbEkkow8XcDmOpn8e', 167 | desc: '提供一个全面系统、易于理解的 学习路径，帮助您了解AI的从概念到应用等各方面知识', 168 | }, 169 | { 170 | name: 'AIGC知识库, 一站式人工智能知识库', 171 | link: 'https://www.yuque.com/gptcn/gpt', 172 | desc: '', 173 | }, 174 | { 175 | name: '事半 - 提示库', 176 | link: 'https://halfwork.cn/prompt', 177 | desc: '找到最好的提示词，用更少的时间，创作更好的内容', 178 | }, 179 | { 180 | name: 'PromptPerfect', 181 | link: 'https://promptperfect.jina.ai/', 182 | desc: '一个让写prompt门槛降低到膝盖以下的网站', 183 | }, 184 | ] 185 | } 186 | -------------------------------------------------------------------------------- /src/utils/aiSites/index.ts: -------------------------------------------------------------------------------- 1 | import { aiDrawSites, aiEditorSites, aiKnowledgeBase, aiSearchSites, aiUtilSites } from './aiUtilSites'; 2 | 3 | export const aiSites = [ 4 | aiEditorSites, 5 | aiDrawSites, 6 | aiSearchSites, 7 | aiUtilSites, 8 | aiKnowledgeBase 9 | ]; 10 | -------------------------------------------------------------------------------- /src/utils/hotSites.ts: -------------------------------------------------------------------------------- 1 | import type { HotSite } from "@/types"; 2 | // Use UnoCSS comments to enable scanning of available classes in the current file 3 | // @unocss-include 4 | 5 | export const frameworks = { 6 | type: '前端框架', 7 | sites: [ 8 | { 9 | name: "Vue", 10 | link: "https://cn.vuejs.org/guide/introduction.html", 11 | iconClass: "i-logos-vue", 12 | }, 13 | { 14 | name: "Nuxt", 15 | link: "https://nuxt.com/", 16 | iconClass: "i-logos-nuxt-icon", 17 | }, 18 | { 19 | name: "React", 20 | link: "https://react.dev/", 21 | iconClass: "i-logos-react", 22 | }, 23 | { 24 | name: 'Next', 25 | link: 'https://nextjs.org/docs', 26 | iconClass: 'i-logos-nextjs', 27 | }, 28 | { 29 | name: "Svelte", 30 | link: "https://svelte.dev/docs", 31 | iconClass: "i-logos-svelte-icon", 32 | }, 33 | { 34 | name: 'SvelteKit', 35 | link: 'https://kit.svelte.dev/docs/introduction', 36 | iconClass: 'i-logos-svelte-icon', 37 | }, 38 | { 39 | name: "Solid", 40 | link: "https://www.solidjs.com/", 41 | iconClass: "i-logos-solidjs-icon", 42 | }, 43 | { 44 | name: "Qwik", 45 | link: "https://qwik.builder.io/docs/overview/", 46 | iconClass: "i-logos-qwik-icon", 47 | }, 48 | { 49 | name: "Astro", 50 | link: "https://astro.build/", 51 | iconClass: "i-cus-astro", 52 | }, 53 | { 54 | name: "Angular", 55 | link: "https://angular.io/", 56 | iconClass: "i-vscode-icons-file-type-angular", 57 | }, 58 | ] 59 | }; 60 | 61 | export const uiLibraries = { 62 | type: '组件库', 63 | sites: [ 64 | { 65 | name: "Ant Design", 66 | link: "https://ant.design/components/button-cn", 67 | iconClass: "i-logos-ant-design", 68 | }, 69 | { 70 | name: 'Vant', 71 | link: 'https://vant-contrib.gitee.io/vant/#/zh-CN', 72 | iconClass: 'i-cus-vant', 73 | }, 74 | { 75 | name: 'Element Plus', 76 | link: 'https://element-plus.gitee.io/zh-CN/component/button.html', 77 | iconClass: 'i-logos-element', 78 | }, 79 | { 80 | name: 'Naive UI', 81 | link: 'https://www.naiveui.com/zh-CN/os-theme/components/button', 82 | iconClass: 'i-logos-naiveui', 83 | } 84 | ] 85 | }; 86 | 87 | export const buildTolls = { 88 | type: '构建工具', 89 | sites: [ 90 | { 91 | name: "Vite", 92 | link: "https://cn.vitejs.dev/guide/", 93 | iconClass: "i-logos-vitejs", 94 | }, 95 | { 96 | name: "Rollup", 97 | link: "https://rollupjs.org/introduction/", 98 | iconClass: "i-logos-rollupjs", 99 | }, 100 | { 101 | name: "esbuild", 102 | link: "https://esbuild.github.io/", 103 | iconClass: "i-logos-esbuild", 104 | }, 105 | { 106 | name: "webpack", 107 | link: "https://webpack.js.org/concepts/", 108 | iconClass: "i-logos-webpack", 109 | extraCss: "!text-24px", 110 | }, 111 | { 112 | name: 'Rspack', 113 | link: 'https://www.rspack.dev/zh/guide/introduction.html', 114 | iconClass: 'i-cus-rspack', 115 | extraCss: "!text-28px", 116 | } 117 | ] 118 | } 119 | 120 | export const cssSites = { 121 | type: 'CSS框架/引擎', 122 | sites: [ 123 | { 124 | name: "TailwindCSS", 125 | link: "https://tailwindcss.com/", 126 | iconClass:'i-cus-tailwindcss' 127 | }, 128 | { 129 | name: "UnoCSS", 130 | link: "https://unocss.dev/", 131 | iconClass: "i-cus-unocss", 132 | }, 133 | { 134 | name: "Windi CSS", 135 | link: "https://cn.windicss.org/", 136 | iconClass: "i-logos-windi-css", 137 | }, 138 | ] 139 | } 140 | 141 | export const runtimes = { 142 | type: '运行时', 143 | sites: [ 144 | { 145 | name: 'Node', 146 | link: 'https://nodejs.org/dist/latest-v19.x/docs/api/', 147 | iconClass: "i-logos-nodejs-icon" 148 | }, 149 | { 150 | name: 'Deno', 151 | link: 'https://deno.land/manual@v1.32.4/introduction', 152 | iconClass: 'i-logos-deno', 153 | }, 154 | { 155 | name: "Bun", 156 | link: "https://bun.sh/docs", 157 | iconClass: "i-logos-bun" 158 | }, 159 | ] 160 | } 161 | 162 | export const otherSites = { 163 | type: '其他', 164 | sites: [ 165 | { 166 | name: "LeetCode", 167 | link: "https://leetcode.cn/problemset/all/", 168 | iconClass: "i-cus-leetcode", 169 | extraCss: "-translate-y-1px", 170 | }, 171 | { 172 | name: "Go", 173 | link: "https://go.dev/", 174 | iconClass: "i-logos-go", 175 | extraCss: "translate-y-2px text-30px", 176 | } 177 | ] 178 | }; 179 | -------------------------------------------------------------------------------- /src/utils/sites/algorithm.ts: -------------------------------------------------------------------------------- 1 | export const algorithm = { 2 | type: "算法", 3 | sites: [ 4 | { 5 | name: "JavaScript算法数据结构资料", 6 | link: "https://gitee.com/mirrors/javascript-algorithms/tree/master/", 7 | desc: "", 8 | }, 9 | { 10 | name: "leetcode题解", 11 | link: "https://doocs.github.io/leetcode/#/solution/README", 12 | desc: "", 13 | }, 14 | { 15 | name: "VisuAlgo", 16 | link: "https://visualgo.net/zh/", 17 | desc: "通过动画可视化数据结构和算法", 18 | }, 19 | { 20 | name: "CodeTop", 21 | link: "https://codetop.cc/home", 22 | desc: "面试算法题目总结", 23 | }, 24 | { 25 | name: "The Algorithms", 26 | link: "https://the-algorithms.com/zh_Hans", 27 | desc: "GitHub最大的开源算法库, 各个算法有多种语言实现", 28 | }, 29 | { 30 | name: "Hello 算法", 31 | link: "https://www.hello-algo.com/", 32 | desc: "动画图解、一键运行的数据结构与算法教程", 33 | }, 34 | ], 35 | }; 36 | -------------------------------------------------------------------------------- /src/utils/sites/blog.ts: -------------------------------------------------------------------------------- 1 | export const teamBlog = { 2 | type: '技术团队博客', 3 | sites: [ 4 | { 5 | name: 'web.dev', 6 | link: 'https://web.dev/blog/', 7 | desc: 'Chrome DevRel 团队的博客' 8 | }, 9 | { 10 | name: 'engblogs', 11 | link: 'https://engineeringblogs.xyz/', 12 | desc: '将 506 个工程师的博客的 RSS 给订阅起来，将每天有更新的自动同步到网站上' 13 | }, 14 | { 15 | name: 'builder.io', 16 | link: 'https://www.builder.io/blog', 17 | desc: 'builder.io公司的技术博客，CTO是angular和qwik作者' 18 | }, 19 | { 20 | name: 'Chrome开发团队', 21 | link: 'https://developer.chrome.com/blog/', 22 | desc: 'Chrome团队的博客，Chrome有什么新特性出来了，一般都会发博客', 23 | } 24 | ] 25 | }; 26 | 27 | export const blog = { 28 | type: '高质量个人博客', 29 | sites: [ 30 | { 31 | name: 'stefanjudis', 32 | link: 'https://www.stefanjudis.com/', 33 | desc: '其中有Web Weekly。作者自己搞的前端周刊', 34 | }, 35 | { 36 | name: 'amitmerchant', 37 | link: 'https://www.amitmerchant.com/posts/javascript/', 38 | desc: 'A blog on JavaScript, and more', 39 | }, 40 | { 41 | name: 'CS自学指南', 42 | link: 'https://csdiy.wiki/', 43 | desc: '北大的同学收集的计算机自学课程集合', 44 | }, 45 | { 46 | name: '山月行', 47 | link: 'https://shanyue.tech/', 48 | desc: '其中有前端工程化，开发者工具箱等内容', 49 | }, 50 | { 51 | name: '鑫空间，鑫生活', 52 | link: 'https://www.zhangxinxu.com/wordpress/', 53 | desc: '张鑫旭的技术博客', 54 | }, 55 | { 56 | name: 'ChokCoco', 57 | link: 'https://www.cnblogs.com/coco1s/', 58 | desc: 'CSS艺术家，Coco的博客', 59 | }, 60 | { 61 | name: 'robinwieruch', 62 | link: 'https://www.robinwieruch.de/blog/', 63 | desc: '来自柏林/德国的德国软件工程师和自由开发人员, 致力于学习和教授JavaScript' 64 | }, 65 | { 66 | name: 'lutaonan', 67 | link: 'https://lutaonan.com/', 68 | desc: '微软前端工程师' 69 | } 70 | ], 71 | } 72 | -------------------------------------------------------------------------------- /src/utils/sites/echarts.ts: -------------------------------------------------------------------------------- 1 | export const echartsDemo = { 2 | type: 'echarts Demo', 3 | sites: [ 4 | { 5 | name: 'isqqw', 6 | link: 'https://www.isqqw.com/homepage', 7 | desc: '' 8 | }, 9 | { 10 | name: 'madeapie', 11 | link: 'https://madeapie.com/#/', 12 | desc: '' 13 | }, 14 | { 15 | name: 'echarts社区', 16 | link: 'https://www.makeapie.cn/echarts', 17 | desc: '', 18 | }, 19 | { 20 | name: 'PPChart', 21 | link: 'http://www.ppchart.com/#/', 22 | desc: '', 23 | }, 24 | { 25 | name: '分享你我-echarts作品集', 26 | link: 'http://chart.majh.top/', 27 | desc: '', 28 | }, 29 | { 30 | name: 'ChartLib', 31 | link: 'http://chartlib.datains.cn/echarts', 32 | desc: '', 33 | } 34 | ] 35 | }; 36 | -------------------------------------------------------------------------------- /src/utils/sites/index.ts: -------------------------------------------------------------------------------- 1 | import { techSites } from './techSites'; 2 | import { weekly } from "./weekly"; 3 | import { blog, teamBlog } from "./blog"; 4 | import { echartsDemo } from "./echarts"; 5 | import { algorithm } from "./algorithm"; 6 | import { spec } from "./spec"; 7 | import { ossSites } from "./ossSites"; 8 | import { cssUtilSites, jsUtilSites, picUtilsSites, iconUtilsSites, drawUtilsSites, regexpUtilsSites, serviceUtilSites } from './utilSites'; 9 | 10 | export const allSites = [ 11 | // 技术站点 12 | techSites, 13 | // 周刊 14 | teamBlog, 15 | // 高质量个人博客；技术团队/技术组织博客 16 | weekly, 17 | blog, 18 | // 技术规范 19 | spec, 20 | // 热门开源项目站点 21 | ossSites, 22 | echartsDemo, 23 | algorithm, 24 | // 工具站点 25 | cssUtilSites, 26 | jsUtilSites, 27 | picUtilsSites, 28 | iconUtilsSites, 29 | drawUtilsSites, 30 | regexpUtilsSites, 31 | serviceUtilSites, 32 | ] 33 | -------------------------------------------------------------------------------- /src/utils/sites/ossSites.ts: -------------------------------------------------------------------------------- 1 | 2 | // 热门开源项目的站点 3 | export const ossSites = { 4 | type: '开源项目站点', 5 | sites: [ 6 | { 7 | name: 'bestofjs', 8 | link: 'https://bestofjs.org/', 9 | desc: '一个关于前端开源项目最新最热趋势的站点', 10 | }, 11 | { 12 | name: 'publint', 13 | link: 'https://publint.dev/', 14 | desc: '检查一个npm包是否发布正确，作者是vite和svelte成员' 15 | }, 16 | { 17 | name: 'npm-stat', 18 | link: 'https://npm-stat.com/', 19 | desc: '在线统计npm包下载量，精细到天粒度' 20 | }, 21 | { 22 | name: 'pkg-size', 23 | link: 'https://pkg-size.dev/', 24 | desc: '检查npm包体积' 25 | }, 26 | { 27 | name: 'GiftOfSpeed', 28 | link: 'https://www.giftofspeed.com/gzip-test/', 29 | desc: '检查gzip是否开启' 30 | } 31 | ], 32 | } 33 | -------------------------------------------------------------------------------- /src/utils/sites/spec.ts: -------------------------------------------------------------------------------- 1 | export const spec = { 2 | type: '规范', 3 | sites: [ 4 | { 5 | name: 'html规范', 6 | link: 'https://html.spec.whatwg.org/', 7 | desc: '', 8 | }, 9 | { 10 | name: 'WinterCG', 11 | link: 'https://wintercg.org/work', 12 | desc: 'WinterCG工作组' 13 | } 14 | ] 15 | }; -------------------------------------------------------------------------------- /src/utils/sites/techSites.ts: -------------------------------------------------------------------------------- 1 | export const techSites = { 2 | type: '技术站点', 3 | sites: [ 4 | { 5 | name: 'dev.to', 6 | link: 'https://dev.to/', 7 | desc: '拥有百万开发者的技术社区，开发者分享交流，获取最新技术资讯，提高专业能力的好地方' 8 | }, 9 | { 10 | name: 'reddit', 11 | link: 'https://www.reddit.com/', 12 | desc: 'reddit' 13 | }, 14 | { 15 | name: 'product hunt', 16 | link: 'https://www.producthunt.com/', 17 | desc: '全球新产品探索' 18 | }, 19 | { 20 | name: 'Hacker News', 21 | link: 'https://news.ycombinator.com/newest', 22 | desc: 'Hacker News', 23 | }, 24 | { 25 | name: '掘金', 26 | link: 'https://juejin.cn/', 27 | desc: '中文技术社区', 28 | }, 29 | { 30 | name: 'segmentfault', 31 | link: 'https://segmentfault.com/', 32 | desc: '中文技术问答社区', 33 | }, 34 | { 35 | name: 'v2ex', 36 | link: 'https://www.v2ex.com/', 37 | desc: '是一个关于分享和探索的地方', 38 | }, 39 | { 40 | name: 'hive.one', 41 | link: 'https://hive.one/', 42 | desc: '列出Twitter上某个技术社区里的名人、大佬，可以一键批量关注', 43 | }, 44 | { 45 | name: 'smashingmagazine', 46 | link: 'https://www.smashingmagazine.com/articles/', 47 | desc: '一个关于 Web 设计和开发的在线杂志，提供有关最新趋势、技术和技巧的文章。涵盖了各种主题，包括前端开发、后端开发、设计、用户体验等。' 48 | }, 49 | { 50 | name: 'vscode插件开发官网', 51 | link: 'https://code.visualstudio.com/api', 52 | desc: 'vscode插件开发官网' 53 | }, 54 | { 55 | name: '浏览器扩展文档', 56 | link: 'https://developer.chrome.com/docs/extensions?hl=zh-cn', 57 | desc: '官方文档' 58 | }, 59 | { 60 | name: 'medium', 61 | link: 'https://medium.com/', 62 | desc: '类似于 简书' 63 | } 64 | ], 65 | }; 66 | -------------------------------------------------------------------------------- /src/utils/sites/utilSites.ts: -------------------------------------------------------------------------------- 1 | export const cssUtilSites = { 2 | type: "工具 - CSS", 3 | sites: [ 4 | { 5 | name: "Web安全色", 6 | link: "https://www.bootcss.com/p/websafecolors/", 7 | desc: "", 8 | }, 9 | { 10 | name: "SVG Backgrounds", 11 | link: "https://www.svgbackgrounds.com/", 12 | desc: "", 13 | }, 14 | { 15 | name: "SVG 波浪背景生成", 16 | link: "https://svgwave.in/", 17 | desc: "", 18 | }, 19 | { 20 | name: "手绘风 SVG 图形", 21 | link: "https://svghub.vercel.app/", 22 | desc: "手绘风格的 svg 素材库，可修改配色，可直接粘贴至 figma，适合做一些文章配图", 23 | }, 24 | { 25 | name: "CSS灵感", 26 | link: "https://csscoco.com/inspiration/#/", 27 | desc: "Chokcoco维护的网站，这里可以让你寻找到使用或者是学习 CSS 的灵感，以分类的形式，展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法", 28 | }, 29 | { 30 | name: "CSS Tricks", 31 | link: "https://qishaoxuan.github.io/css_tricks/", 32 | desc: "总结一些常用的 CSS 样式;记录一些 CSS 的新属性和一点奇技淫巧", 33 | }, 34 | { 35 | name: "You-need-to-know-css", 36 | link: "https://lhammer.cn/You-need-to-know-css/#/", 37 | desc: "针对我们常见的网页设计问题，从不同的角度提供了多种实用而优雅的解决方案", 38 | }, 39 | { 40 | name: "拟态风生成器", 41 | link: "https://neumorphism.io/#e0e0e0", 42 | desc: "", 43 | }, 44 | { 45 | name: "贝塞尔曲线生成", 46 | link: "https://easings.co/", 47 | desc: "", 48 | }, 49 | { 50 | name: "网格布局代码生成器", 51 | link: "https://grid.layoutit.com/", 52 | desc: "", 53 | }, 54 | { 55 | name: "另一个网格布局代码生成器", 56 | link: "https://cssgrid-generator.netlify.app/", 57 | desc: "", 58 | }, 59 | { 60 | name: "纯CSS手风琴折叠面板生成", 61 | link: "https://accordionslider.com/", 62 | desc: "", 63 | }, 64 | { 65 | name: "clip-path生成", 66 | link: "https://bennettfeely.com/clippy/", 67 | desc: "", 68 | }, 69 | { 70 | name: "CSS渐变色", 71 | link: "https://webgradients.com/", 72 | desc: "", 73 | }, 74 | { 75 | name: "CSS毛玻璃效果生成器", 76 | link: "https://glassgenerator.netlify.app/#", 77 | desc: "", 78 | }, 79 | { 80 | name: "CSS渐变色生成器", 81 | link: "https://gradient.style/", 82 | desc: "", 83 | }, 84 | { 85 | name: "CSS边框生成器", 86 | link: "https://dashed-border.lainbo.com/", 87 | desc: "", 88 | }, 89 | { 90 | name: "uiverse", 91 | link: "https://uiverse.io/", 92 | desc: "适用于任何项目的开源用户界面元素", 93 | }, 94 | { 95 | name: "滤镜扭转颜色工具", 96 | link: "https://www.zhangxinxu.com/sp/filter.html", 97 | desc: "可以将一个颜色，利用CSS滤镜强行扭转成另一个颜色，如：一个深蓝色的logo图片，在深色模式下对比度太低难以看清，这时需要一个白色的logo，但是可能UI给不出来，或者没有UI，这时候前端就可以利用这个工具对图片颜色进行转换", 98 | }, 99 | { 100 | name: "平滑阴影生成器", 101 | link: "https://shadows.brumm.af/", 102 | desc: "", 103 | }, 104 | { 105 | name: "平滑圆角生成器", 106 | link: "https://pavellaptev.github.io/css-houdini-squircle/", 107 | desc: "小米的Logo就是这种圆角，border-radius无法实现的圆角", 108 | }, 109 | { 110 | name: "animista", 111 | link: "https://animista.net/", 112 | desc: "一堆CSS动画供君选择", 113 | }, 114 | { 115 | name: "不规则圆形生成器", 116 | link: "https://9elements.github.io/fancy-border-radius/", 117 | desc: "", 118 | }, 119 | { 120 | name: "不规则圆角矩形生成器", 121 | link: "https://9elements.github.io/fancy-border-radius/full-control.html", 122 | desc: "", 123 | }, 124 | { 125 | name: "一些纯CSS的Loading图标", 126 | link: "https://tobiasahlin.com/spinkit/", 127 | desc: "顶部的`source`按钮可以查看代码", 128 | }, 129 | { 130 | name: "500+ 纯 CSS 制作的 loading 动画", 131 | link: "https://css-loaders.com/", 132 | desc: "顶部的`source`按钮可以查看代码", 133 | }, 134 | { 135 | name: "响应式跟字号生成器", 136 | link: "https://chrisburnell.com/clamp-calculator/", 137 | desc: "", 138 | }, 139 | { 140 | name: "缓动函数速查表", 141 | link: "https://easings.net/zh-cn", 142 | desc: "除了CSS代码，它还给出了函数的代码，供一些可以自定义缓动函数的动画函数", 143 | }, 144 | { 145 | name: "防御性CSS提示", 146 | link: "https://defensivecss.dev/tips", 147 | desc: "实用的CSS和设计技巧，有助于建立面向未来且经得起考验的用户界面", 148 | }, 149 | ], 150 | }; 151 | 152 | export const jsUtilSites = { 153 | type: "工具 - JavaScript", 154 | sites: [ 155 | { 156 | name: "JavaScript可视化执行", 157 | link: "https://www.jsv9000.app/", 158 | desc: "以可视化的方式展示js的事件循环", 159 | }, 160 | { 161 | name: "JavaScript性能对比", 162 | link: "https://jsbench.me/", 163 | desc: "可以对比多段js代码的性能差异", 164 | }, 165 | { 166 | name: "单行JavaScript实用代码", 167 | link: "https://1loc.dev/", 168 | desc: "", 169 | }, 170 | { 171 | name: "轮播图生成器", 172 | link: "https://imageslidermaker.com/v2", 173 | desc: "", 174 | }, 175 | { 176 | name: "语言AST展示", 177 | link: "https://www.astexplorer.net/", 178 | desc: "一个用于探索由各种解析器生成的AST的Web工具，支持非常多语言", 179 | }, 180 | { 181 | name: "3D动画背景生成", 182 | link: "https://www.vantajs.com/", 183 | desc: "Animated website backgrounds in a few lines of code.", 184 | }, 185 | ], 186 | }; 187 | 188 | export const picUtilsSites = { 189 | type: "工具 - 图片", 190 | sites: [ 191 | { 192 | name: "雪碧图/精灵图生成器", 193 | link: "https://www.toptal.com/developers/css/sprite-generator", 194 | desc: "把所有的图片上传，即可获得一张雪碧图，并且带CSS代码", 195 | }, 196 | { 197 | name: "图片转SVG工具", 198 | link: "https://vectorizer.ai/", 199 | desc: "可以将常见的jpg/png/webp/ico图片转换成svg格式，而且不是简单的base64画一遍，而是真正的svg路径，配合后面的压缩工具可以得到比较好的产物", 200 | }, 201 | { 202 | name: "svg在线压缩合并工具", 203 | link: "https://www.zhangxinxu.com/sp/svgo/", 204 | desc: "张鑫旭大佬做的svg压缩工具", 205 | }, 206 | { 207 | name: "代码Demo图生成", 208 | link: "https://www.ray.so/", 209 | desc: "虚心向大佬请教的时候，用这个或许比截图更容易让大佬一眼看见问题，给大佬良好的体验", 210 | }, 211 | { 212 | name: "Carbon", 213 | link: "https://carbon.now.sh/", 214 | desc: "另一个代码块截图工具，和上面那个比较一下，自己喜欢哪个", 215 | }, 216 | { 217 | name: "Lorem Picsum", 218 | link: "https://picsum.photos/", 219 | desc: "随机图片工具，只需在URL后添加您想要的图像尺寸（宽度和高度），就会获得随机图像", 220 | } 221 | ], 222 | }; 223 | 224 | export const iconUtilsSites = { 225 | type: "工具 - 图标", 226 | sites: [ 227 | { 228 | name: "svg图标库", 229 | link: "https://icones.js.org/", 230 | desc: "里面有各种各样的svg图标", 231 | }, 232 | { 233 | name: "CSS图标库", 234 | link: "https://css.gg/", 235 | desc: "700+ CSS Icons", 236 | }, 237 | { 238 | name: "产品logoSvg", 239 | link: "https://svgporn.com/", 240 | desc: "各种产品的logo", 241 | } 242 | ], 243 | }; 244 | 245 | export const drawUtilsSites = { 246 | type: "工具 - 绘图", 247 | sites: [ 248 | { 249 | name: "tldraw", 250 | link: "https://www.tldraw.com/", 251 | desc: "小巧的绘图应用程序", 252 | }, 253 | { 254 | name: "excalidraw", 255 | link: "https://excalidraw.com/", 256 | desc: "在线绘图工具", 257 | }, 258 | { 259 | name: "draw.io", 260 | link: "https://app.diagrams.net/", 261 | desc: "draw.io", 262 | } 263 | ], 264 | }; 265 | 266 | 267 | export const regexpUtilsSites = { 268 | type: "工具 - 正则", 269 | sites: [ 270 | { 271 | name: "正则生成、图解", 272 | link: "https://regex-vis.com/", 273 | desc: "除了常见的图解正则，还可以通过鼠标点点点，对正则进行逻辑的增删改，详见GitHub的README", 274 | }, 275 | ], 276 | }; 277 | 278 | export const serviceUtilSites = { 279 | type: "工具 - 服务", 280 | sites: [ 281 | { 282 | name: "Nginx配置生成", 283 | link: "https://www.digitalocean.com/community/tools/nginx?global.app.lang=zhCN", 284 | desc: "", 285 | }, 286 | { 287 | name: "reduced.to", 288 | link: "https://reduced.to/", 289 | desc: "一个短链服务，前端用qwik，后端用nest", 290 | }, 291 | { 292 | name: "long.ng", 293 | link: "https://loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo.ng/", 294 | desc: "一个长链服务，前端用Astro，谨慎使用！", 295 | }, 296 | { 297 | name: "caniuse", 298 | link: "https://caniuse.com/", 299 | desc: "浏览器兼容性", 300 | }, 301 | { 302 | name: 'component-party', 303 | link: 'https://component-party.lainbo.com/', 304 | desc: '前端框架语法比较' 305 | }, 306 | { 307 | name: 'Node Toolbox', 308 | link: 'https://nodejstoolbox.com/', 309 | desc: '查找Node生态下各分类最流行的代码库', 310 | }, 311 | { 312 | name: 'GitHub加速', 313 | link: 'https://ghproxy.lainbo.com/', 314 | desc: '', 315 | }, 316 | { 317 | name: 'fly', 318 | link: 'https://helpf.notion.site/262e4136600548b3aaaa29e44a4c8273', 319 | desc: '飞跃重洋' 320 | } 321 | ], 322 | }; 323 | 324 | -------------------------------------------------------------------------------- /src/utils/sites/weekly.ts: -------------------------------------------------------------------------------- 1 | // 各类技术周刊 2 | export const weekly = { 3 | type: "技术周刊", 4 | sites: [ 5 | { 6 | name: "node-weekly", 7 | link: "https://nodeweekly.com/issues", 8 | desc: "node技术周刊，约每周四更新", 9 | }, 10 | { 11 | name: "JavaScript Weekly", 12 | link: "https://javascriptweekly.com/issues", 13 | desc: "JavaScript技术周刊，约每周五更新", 14 | }, 15 | { 16 | name: "frontend-weekly", 17 | link: "https://frontender-ua.medium.com/", 18 | desc: "前端周刊，周一更新", 19 | }, 20 | { 21 | name: "奇舞周刊", 22 | link: "https://weekly.75.team/", 23 | desc: "360前端团队——奇舞团的周刊，周五更新", 24 | }, 25 | { 26 | name: "科技爱好者周刊", 27 | link: "https://github.com/ruanyf/weekly/", 28 | desc: "阮一峰科技爱好者周刊，周五更新", 29 | }, 30 | { 31 | name: "早早鸟日刊", 32 | link: "https://www.yuque.com/zaotalk/worm", 33 | desc: "早早鸟日刊", 34 | }, 35 | { 36 | name: "MDH Weekly", 37 | link: "https://mdhweekly.com/weekly", 38 | desc: "云谦的周刊，周一更新", 39 | }, 40 | ], 41 | }; 42 | -------------------------------------------------------------------------------- /static/favicon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /svelte.config.js: -------------------------------------------------------------------------------- 1 | // import adapter from '@sveltejs/adapter-auto'; 2 | import adapter from '@sveltejs/adapter-netlify'; 3 | import { vitePreprocess } from '@sveltejs/kit/vite'; 4 | 5 | /** @type {import('@sveltejs/kit').Config} */ 6 | const config = { 7 | // Consult https://kit.svelte.dev/docs/integrations#preprocessors 8 | // for more information about preprocessors 9 | preprocess: vitePreprocess(), 10 | 11 | kit: { 12 | // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. 13 | // If your environment is not supported or you settled on a specific environment, switch out the adapter. 14 | // See https://kit.svelte.dev/docs/adapters for more information about adapters. 15 | adapter: adapter({ 16 | // if true, will create a Netlify Edge Function rather 17 | // than using standard Node-based functions 18 | edge: false, 19 | 20 | // if true, will split your app into multiple functions 21 | // instead of creating a single one for the entire app. 22 | // if `edge` is true, this option cannot be used 23 | split: false 24 | }), 25 | alias: { 26 | '@/*': './src/*' 27 | }, 28 | } 29 | }; 30 | 31 | export default config; 32 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "resolveJsonModule": true, 9 | "skipLibCheck": true, 10 | "sourceMap": true, 11 | "strict": true 12 | } 13 | // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias 14 | // 15 | // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes 16 | // from the referenced tsconfig.json - TypeScript does not merge them in 17 | } 18 | -------------------------------------------------------------------------------- /uno.config.ts: -------------------------------------------------------------------------------- 1 | import { 2 | defineConfig, 3 | presetAttributify, 4 | presetIcons, 5 | presetUno, 6 | transformerDirectives, 7 | transformerVariantGroup, 8 | } from 'unocss' 9 | import presetWebFonts from '@unocss/preset-web-fonts' 10 | import customIconJson from './src/lib/customIcon/customIcon.json' 11 | import * as hotSites from "./src/utils/hotSites"; 12 | import {buildTolls, cssSites, otherSites, runtimes} from "./src/utils/hotSites"; 13 | const extractIconClasses = (category: { sites: { iconClass: string }[] }) => { 14 | return category.sites.map(({ iconClass }) => iconClass); 15 | }; 16 | export default defineConfig({ 17 | shortcuts: { 18 | 'centerLayout': 'flex justify-center items-center', 19 | }, 20 | rules: [ 21 | [ 22 | /^transition-cusbezier-(\d+)$/, 23 | ([, d]) => ({ transition: `all ${d}ms var(--ani-bezier)` }), 24 | { autocomplete: 'transition-cusbezier-400' }, 25 | ], 26 | ], 27 | presets: [ 28 | presetUno({ 29 | darkMode: 'class', 30 | }), 31 | presetWebFonts({ 32 | // we can use the class "fonts-Inter" to give a font to a DOM element, but it doesn't quite fit our scenario 33 | // so it is only used for importing text. 34 | fonts: { 35 | provider: 'bunny', 36 | Inter: [{ name: 'Inter' }], 37 | NotoSerifSC: [{ name: 'Noto Serif SC' , weights: ['500', '600', '700'] }], 38 | }, 39 | }), 40 | presetAttributify(), // This is Attributify Mode for UnoCSS. such as
41 | presetIcons({ 42 | warn: true, 43 | extraProperties: { 44 | 'display': 'inline-block', 45 | 'vertical-align': 'middle', 46 | }, 47 | collections: { 48 | cus: { 49 | // the key and value are extracted from the JSON, and the value of "value.iconMain" is set as the value of "key", which forms an object that is destructured. 50 | // e.g. { "tailwindcss": "xxx" }, 51 | ...Object.fromEntries( 52 | Object.entries(customIconJson).map(([key, value]) => [key, value.iconMain]) 53 | ), 54 | }, 55 | }, 56 | }), 57 | ], 58 | theme: { 59 | colors: { 60 | // After using the `theme()` directive, you can then use `text-primary`, `bg-primary`, `border-primary`, and so on. 61 | // If there isn't a class available in Uno for a specific element, such as one for text or background, you can use the theme() directive. 62 | // e.g. text-decoration-color: theme('colors.primary'); 63 | primary: '#646cff', 64 | }, 65 | }, 66 | transformers: [ 67 | transformerDirectives(), // Supports the @apply text-center my-0 font-medium; syntax. 68 | transformerVariantGroup(), //
69 | ], 70 | variants: [ 71 | // Uno does not support using `@apply !text-center` syntax in .scss files to represent `!important`. It will result in an error. 72 | // Here's a variation for writing !important in Uno that also makes any class starting with 'I_' important, and is compatible with .scss files. 73 | // For example, `@apply I_text-center;` will be converted to the following CSS: `text-align: center !important;`; 74 | matcher => { 75 | if (!matcher.startsWith('I_')) { 76 | return matcher 77 | } 78 | return { 79 | matcher: matcher.slice(2), 80 | body: body => { 81 | body.forEach(v => v[1] && (v[1] += ' !important')) 82 | return body 83 | }, 84 | } 85 | }, 86 | ], 87 | // Here, we are manually adding `iconName` to UnoCSS because it is not being picked up by the scanner from the JSON/TS file. 88 | safelist: [ 89 | // Manually add a custom icon. 90 | ...Object.values(customIconJson).map((i) => i.iconName), 91 | 92 | // Manually add the icon for a popular website. 93 | ...Object.values(hotSites).flatMap(extractIconClasses), 94 | ], 95 | }) 96 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { sveltekit } from '@sveltejs/kit/vite'; 2 | import { defineConfig } from 'vite'; 3 | import UnoCSS from 'unocss/vite'; 4 | import { 5 | presetIcons, 6 | presetWind, 7 | } from 'unocss'; 8 | 9 | export default defineConfig({ 10 | plugins: [UnoCSS(), sveltekit()] 11 | }); 12 | --------------------------------------------------------------------------------