35 |
37 |
8 | {Object.keys(iconList).map((key) => {
9 | // @ts-ignore
10 | const Icon = iconList[key];
11 | return (
12 |
19 |
13 |
16 | );
17 | })}
18 | {key}
15 |
26 | {children}
27 |
28 | );
29 | };
30 |
31 | export default Tag;
32 |
--------------------------------------------------------------------------------
/src/components/ui/toaster.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import {
4 | Toast,
5 | ToastClose,
6 | ToastDescription,
7 | ToastProvider,
8 | ToastTitle,
9 | ToastViewport
10 | } from '@/components/ui/toast';
11 | import { useToast } from '@/components/ui/use-toast';
12 |
13 | export function Toaster() {
14 | const { toasts } = useToast();
15 |
16 | return (
17 |
22 | {title && {title} }
23 | {description && (
24 | {description}
25 | )}
26 |
27 | {action}
28 |
17 |
21 |
18 |
19 |
20 |
22 | {children}
24 |
25 |
26 |
27 |
28 |
29 | );
30 | }
31 |
--------------------------------------------------------------------------------
/src/assets/icons/ScriptIcon.tsx:
--------------------------------------------------------------------------------
1 | import { type IconProps } from '@/assets';
2 |
3 | export function ScriptIcon(props: IconProps = {}) {
4 | return (
5 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/src/components/ui/sonner.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { useTheme } from 'next-themes';
4 | import { Toaster as Sonner } from 'sonner';
5 |
6 | type ToasterProps = React.ComponentProps42 | 我的项目 43 |
44 |45 | 这是我在开发和维护的项目，有公司项目，也有个人项目 46 |
47 |
49 |
51 |
12 | {/*
14 |
15 |
16 |
22 |
33 |
37 | 返回主页
38 |
39 |
40 |
10 |
12 | );
13 | }
14 | );
15 |
16 | const InnerContainer = React.forwardRef{children}
11 |
27 |
29 | );
30 | }
31 | );
32 |
33 | const ContainerComponent = React.forwardRef{children}
28 |
39 |
44 | 40 | 我的 blog 41 |
42 |45 | 记录工作，学习，生活中的所见所闻所想，主要分享领域 前端开发 46 | ，偶尔也会记录 其他内容 47 |
48 |= PropsWithChildren< 6 | { 7 | className?: string; 8 | } & P 9 | >; 10 | 11 | import { 12 | default as portraitAltImage, 13 | default as portraitImage 14 | } from '/public/logo.webp'; 15 | 16 | function AvatarContainer({ className, ...props }: ComponentProps) { 17 | return ( 18 |
25 | ); 26 | } 27 | 28 | type AvatarImageProps = ComponentProps & 29 | Omit
68 |
76 | );
77 | }
78 |
--------------------------------------------------------------------------------
/data/blog/post-49.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: 谷歌放大招了！全新升级的多模态能力，强到离谱
3 | date: 2025-03-14T00:16:42Z
4 | slug: post-49
5 | author: coderPerseus：https://github.com/coderPerseus
6 | tags: ["AI"]
7 | ---
8 |
9 | 大家好，我是 luckySnail，就在昨天谷歌的 Gemini 2.0 Flash Experimental 原生多模态生图功能正式发布，玩了几个小时候，我真的迫不及待的想分享一下，太强大了！先看看它能做的事情：
10 | - 图片生成
11 | - 图片编辑
12 | - 创建图片故事
13 | - 设计生日贺卡
14 |
15 | 我们先看一下效果，最后再讲如何体验，如果你想直接体验，可以直接下滑到「使用教程」
16 | ## 图片生成
17 | 下面 Gemini 一次生成的我最喜欢的海绵宝宝和派大星，直接就可以使用了！
18 | 
19 | 那我们就可以发挥想象力，生成猫和老鼠握手言和的图了！
20 | 
21 |
22 | ## 图片编辑
23 |
24 | 上面猫和老鼠的文字显示位置可能不太好，我们可以通过对话进行调整：
25 | 
26 | 我们还可以基于网图二创：
27 | 
28 |
29 | ## 创建图片故事
30 | 这是最有前景的功能，我们使用它来生成一个外卖员从取餐到把外卖送到顾客手中的故事：
31 | 
32 |
33 | 下面是让它从 0 到 1 生成游戏人物的示例：
34 | 
35 | 绝了！
36 |
37 | ## 设计生日贺卡
38 |
39 | 我觉得这个是非常实用的功能，我目前想到使用它来设计婚礼请帖，大家觉得生成效果怎么样？
40 | ```Plain Text
41 | 设计一张具有中国文化的喜帖卡片。应该使用中国红作为主题色，文字应较大，并写着：“小张 ❤️ 小王的婚礼邀请”
42 | ```
43 |
44 | 
45 |
46 | ## 使用教程
47 |
48 | 目前官方还是免费，不限制，不愧是宇宙大厂 Google，良心！
49 | 首先游览器打开 ： https://aistudio.google.com/ （需要魔法）
50 | 你会看到如下：
51 | 
52 |
53 | 刚进入我建议可以先体验一下官方三个示例卡片，了解使用规则，然后就可以尽情发挥想象力了！这时候真的羡慕那些天马行空的人了！
54 |
55 | ## 总结
56 |
57 | 目前几个小时使用感觉生成能力已经很强，但是有时候也会直接返回 ⚠️，在图片微调方面感觉已经到达了生产力的水平了！
58 | 目前看起来图片故事生成能力是最让人期待的，它能够一次生成具有上下文的图片，我们可以直接使用它进行内容创作了
59 | 如果你觉得文字干巴巴的，不妨试试，真的好用！
60 |
61 | 我最近做了自己的产品：https://www.svgshow.cn 。一个能帮你快速将内容转为美观图片的网站，还能在线编辑，我的封面就是使用它生成的
62 |
63 | ---
64 | 此文自动发布于：github issues
65 |
--------------------------------------------------------------------------------
/src/components/links/RichLink.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { ExternalLinkIcon } from '@/assets';
4 | import GithubIcon from '@/assets/favicon/github.png';
5 | import Image, { type StaticImageData } from 'next/image';
6 | import Link, { type LinkProps } from 'next/link';
7 | import React from 'react';
8 | import { cn } from '~/src/lib/utils';
9 |
10 | const hostsThatNeedInvertedFavicons: Record目录
69 |
72 |
73 | 代码的核心逻辑：
74 |
75 | 如果是 web 端，就会正常渲染元素，然后使用 dom-to-image 来下载图片，如果是 safari 游览器，需要使用 html2canvas 来兼容图片失效的问题
76 |
77 | 如果说 h5，就需要对安卓和 ios 进行场景化的兼容，整体逻辑是将 dom 转为图片，利用手机的长按保存图片能力来保存图片
78 |
79 | 其实在复杂开发中应该还会遇到一些问题，例如：海报高度很高怎么截到想要的部分，大家可以看参考文章
80 |
81 | ## 参考
82 |
83 | 1. https://juejin.cn/post/7339671825646338057
84 | 2. https://juejin.cn/post/7417227816162721804
85 | 3. https://juejin.cn/post/6844904165060116487
86 |
87 | ---
88 | 此文自动发布于：github issues
89 |
--------------------------------------------------------------------------------
/data/blog/post-24.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: 路由的 hash 模式 和 history 模式的区别是什么？
3 | date: 2024-11-05T03:44:11Z
4 | slug: post-24
5 | author: chaseFunny：https://github.com/chaseFunny
6 | tags: ["AI"]
7 | ---
8 |
9 | 让我详细解释一下路由的 hash 模式和 history 模式的区别：
10 |
11 | 1. URL 格式区别：
12 | - Hash 模式：使用 # 号，例如：`www.example.com/#/home` [2](https://router.vuejs.org/guide/essentials/history-mode)
13 | - History 模式：更像传统的 URL，例如：`www.example.com/home` [2](https://router.vuejs.org/guide/essentials/history-mode)
14 |
15 | 2. 工作原理区别：
16 | - Hash 模式：
17 | - 使用 URL 的 hash（#）部分来模拟完整的 URL
18 | - hash 部分不会被发送到服务器
19 | - 基于浏览器的 hashchange 事件 [2](https://router.vuejs.org/guide/essentials/history-mode)
20 |
21 | - History 模式：
22 | - 基于 HTML5 的 History API
23 | - 使用 pushState 和 replaceState 方法来管理历史记录
24 | - URL 更美观，更像传统的服务器端路由 [2](https://router.vuejs.org/guide/essentials/history-mode)
25 |
26 | 3. 服务器配置要求：
27 | - Hash 模式：
28 | - 不需要特殊的服务器配置
29 | - 因为 hash 部分不会发送到服务器
30 | - 对 SEO 不太友好 [2](https://router.vuejs.org/guide/essentials/history-mode)
31 |
32 | - History 模式：
33 | - 需要服务器配置支持
34 | - 需要配置所有路由都返回 index.html
35 | - 否则会出现 404 错误 [2](https://router.vuejs.org/guide/essentials/history-mode)
36 |
37 | 4. 服务器配置示例（History 模式）：
38 |
39 | Apache 配置：
40 | ```apache
41 | /g, '\n'))} 43 | 44 | --- 45 | 此文自动发布于：github issues 46 | `; 47 | } 48 | 49 | function main() { 50 | const filePath = path.resolve(__dirname, blogOutputPath); 51 | // 只查询自己的issues，避免别人创建的也更新到博客 52 | const creators = ['chaseFunny', 'coderPerseus']; // 添加多个creator 53 | fs.ensureDirSync(filePath); 54 | fs.emptyDirSync(filePath); 55 | creators.forEach((name) => { 56 | issueInstance.listIssues({ creator: name }).then(({ data }) => { 57 | let successCount = 0; 58 | for (const item of data) { 59 | try { 60 | const fileName = `post-${item.number}`; 61 | const content = generateMdx(item, fileName); 62 | fs.writeFileSync(`${filePath}/${fileName}.mdx`, content); 63 | console.log(`${filePath}/${fileName}.mdx`, 'success'); 64 | successCount++; 65 | } catch (error) { 66 | console.log(error); 67 | } 68 | } 69 | if (successCount === data.length) { 70 | console.log('文章全部同步成功！', data.length); 71 | } else { 72 | console.log('文章同步失败！失败数量=', data.length - successCount); 73 | } 74 | }); 75 | }); 76 | } 77 | 78 | module.exports = main; 79 | -------------------------------------------------------------------------------- /data/blog/post-18.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 开发经验贴（持久更新） 3 | date: 2024-09-02T08:29:01Z 4 | slug: post-18 5 | author: chaseFunny：https://github.com/chaseFunny 6 | tags: ["经验"] 7 | --- 8 | 9 | # 背景 10 | 开发中，总是会犯错，或者发现之前的行为效率低下，于是打算写一篇，记录日常开发的总结经验，闲下来再拿出来看看，不断优化开发习惯，让自己更好 11 | # 记录 12 | 13 | ## 无论再急 ，pr 一定要自己先过一遍 14 | 15 | 不浪费别人的时间，是对别人最大的尊重 16 | 17 | ## 做重复的事情，一定要小心 18 | 19 | 做重复的事情，99%都会交给惯性来操作，大脑会停止思考，但是这非常危险，这时候应该更加打起精神，因为问题最容易发生在这时候，而且要思考这种重复的事情是否可以交给机器，因为机器（技术）要比人靠谱的多 20 | 21 | ## 处理 url 的时候，最好使用 encodeURIComponent 22 | 23 | 当我们在路由参数处理的时候，最好使用 encodeURIComponent 来保证参数传递正常，或者在对接第三方 SDK 的时候，需要注意第三方提供的文档中是否标注需要对 url 进行编码 24 | 25 | ## 魔法值 26 | 27 | 开发中避免直接使用 0 1 2 这种数字，应该定义一个语义化枚举，来映射具体值，提高代码可维护性 28 | 29 | ## 对于特殊逻辑，一定要写注释 30 | 31 | 在实际业务开发中，肯定会有一些看起来很奇怪的逻辑，这时候需要编写注释，来方便后面维护的人理解 32 | 33 | ## 边界处理 34 | 35 | 写完代码后，要思考不同场景，“防御性编程” 36 | 37 | ## 重复的事情最好交给代码 38 | 39 | 如果一件事需要重复做，那么就最好将其抽象为工作流，然后通过程序来实现，或者实现一部分 40 | 41 | ## 验证代码正确性比什么都重要 42 | 43 | 当完成功能，需要进行验证，这比更快上线功能重要 44 | 45 | ## 注意 local 和线上环境不一致 46 | 47 | 当我们在本地开发的时候，发布线上一定要查看本地的环境，配置，依赖包版本和线上是否一致。如果可以 build 查看，一定要 build 检验，否则导致线上问题问题就变严重了 48 | 49 | ## 当修改公共组件，模块，函数。需要充分测试使用的地方是否都是正常 50 | 51 | ## 前后端联调的时候，尽量做到获取数据最最少原则，不要获取多余的数据 52 | 53 | ## 面对不确定的，高复杂的，先确认，做好设计，再进行开发 54 | 55 | ## 如果一个组件，某块打算抽离出来，就要尽可能的通用，要和业务解耦 56 | 57 | 举个🌰：阿牛开发了一个类似语雀左侧支持搜索的文件夹结构，那么这个可能以后在很多地方使用，那就打算抽离为公共组件，那就需要考虑如何更加通用，例如：它接受的就是搜索词、树形数据。把如何获取数据、如何通过搜索词更新数据的逻辑都要放在业务端，组件仅仅负责接收数据，展示数据，接收用户输入，然后返回搜索词给业务端，让业务端来处理搜索 58 | 59 | ## 如果在小公司，要确认是否需要做调研 60 | 61 | 例如，让阿牛区开发一个评论区功能，然后样式参考别家就好，那这里就需要确认是否要做需求调研，是简单参考还是要写文档做确认再开发，否则会出现开发完成，却不合格，一直说有问题 62 | 63 | ## 尽量避免写死数据 64 | 65 | 举个例子，当我们要计算一个列表中某个元素相对父元素的y轴顶部距离，我们知道每个列表项的高度是多少，但是我们最好通过 js 获取它的高度，而不是写死列表项的高度 66 | 67 | ## 最好先搞定数据，再搞定逻辑，最后再开发页面 68 | 69 | 当我们面临复杂功能，最好先梳理好我们要完成的 js 逻辑，然后将逻辑拆解为一个个小的好做测试的函数，当我们完成所有 js 逻辑和测试后，再去写页面就会非常简单 70 | 71 | ## 避免数据冗余和状态重复 72 | 73 | 在开发中，要尽力避免数据的冗余，例如：定义了商品的单价，数量，那商品的总价就可以计算出来，是可以通过函数计算的。而不需要再声明一个变量来存储，而是创建一个函数返回商品总价。这样避免数据的冗余，也能避免代码逻辑混乱。 74 | 75 | React 开发中，也要保证声明的状态是最少的，不要声明不需要的状态 76 | 77 | ## 如果一件事情很复杂，第一个想的不应该是怎么解决它，而是想能不能不要它 78 | 举个例子：我在做一个以图搜图的功能，我打算使用百度的以图搜图能力，我发现请求接口需要几个参数，其中有一个是 sdkParams ，它的值是动态的，我里面想着这个动态的值是哪里来的，但是我应该去尝试不要这个值是不是依然可以跑通流程，事实就是确实不需要它也行，但我掉进了陷阱，导致浪费了时间 79 | 80 | ## 如果在开发公共模块，一定要多测试 81 | 82 | 开发完成，看看使用到公共模块的地方是否都还正常 83 | 84 | 85 | ## 上传功能要做资源限制，资源压缩等优化措施 86 | 87 | 这里我个人理解资源优化不应该在前端做，应该在后端，或者中间件来处理 88 | 89 | 90 | ## 是否能清晰知道逻辑应该放在前端还是后端 91 | 92 | 初级开发可能会分不清什么逻辑应该后端做，从而导致前端有一些混乱的逻辑 93 | 94 | 95 | --- 96 | 此文自动发布于：github issues 97 | -------------------------------------------------------------------------------- /README-zh_CN.md: -------------------------------------------------------------------------------- 1 | 这是一个使用 [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) 引导创建的 [Next.js](https://nextjs.org/) 项目。项目更多信息：https://blog-luckysnails-projects.vercel.app/posts/post-7 2 | 3 | ## 开始使用 4 | 5 | 首先，运行开发服务器： 6 | 7 | ```bash 8 | npm run dev 9 | # 或者 10 | yarn dev 11 | # 或者 12 | pnpm dev 13 | # 或者 14 | bun dev 15 | ``` 16 | 17 | 在浏览器中打开 [http://localhost:3000](http://localhost:3000) 查看结果。 18 | 19 | 你可以通过修改 `app/page.tsx` 文件来开始编辑页面。当你编辑文件时，页面会自动更新。 20 | 21 | 本项目使用 [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) 来自动优化和加载 Inter，这是一种自定义的 Google 字体。 22 | 23 | ## 特性 24 | 25 | - 背景使用了 https://bg.ibelick.com/ 26 | - 使用 [`react email`](https://react.email/docs/introduction) 支持内容在邮箱中展示 27 | - 28 | 29 | ## 了解更多 30 | 31 | 要深入了解 Next.js，可以查看以下资源： 32 | 33 | - [Next.js 文档](https://nextjs.org/docs) - 学习 Next.js 的特性和 API。 34 | - [学习 Next.js](https://nextjs.org/learn) - 一个交互式的 Next.js 教程。 35 | 36 | 你可以查看 [Next.js 的 GitHub 仓库](https://github.com/vercel/next.js/) - 欢迎你的反馈和贡献！ 37 | 38 | ## 部署到 Vercel 39 | 40 | 部署 Next.js 应用的最简单方法是使用 [Vercel 平台](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme)，它由 Next.js 的创建者提供。 41 | 42 | 查看我们的 [Next.js 部署文档](https://nextjs.org/docs/deployment) 了解更多详情。 43 | 44 | ## 提交规范 45 | 46 | 参考： 47 | 48 | 1. https://devv.ai/search?threadId=drssm68cp1j4 49 | 2. https://www.npmjs.com/package/@commitlint/config-conventional 50 | 51 | ## 工作流 52 | 53 | 这段代码定义了一个名为“Sync Post”的 GitHub Actions 工作流程，用于自动同步博客文章到代码仓库。 54 | 55 | 代码解析: 56 | 57 | name: Sync Post: 定义工作流程的名称。 58 | on: 定义触发工作流程的事件。 59 | issues: 当 GitHub 仓库中发生以下事件时，触发工作流程： 60 | edited: 当 issue 标题或者内容被修改时触发。这个官方的文档没有写 61 | 62 | env: 定义工作流程的环境变量。 63 | GH_TOKEN: GitHub 个人访问令牌，用于访问 GitHub API。 64 | GH_USER: GitHub 用户名。 65 | GH_PROJECT_NAME: 博客项目名称。 66 | jobs: 定义工作流程中的任务。 67 | Publish: 定义一个名为 “Publish” 的任务，用于发布博客文章。 68 | runs-on: 指定任务运行的环境，此处为 ubuntu-latest。 69 | steps: 定义任务中的步骤。 70 | Checkout 🛎️: 使用 actions/checkout@v2 动作将仓库代码检出到工作目录。 71 | Git config 🔧: 配置 Git 用户信息，以便后续提交代码。 72 | Display runtime info ✨: 打印当前工作目录，用于调试。 73 | Install 🔧: 使用 yarn 安装项目的依赖包。 74 | Update blog files ⛏️: 执行 yarn sync-post 命令同步博客文章到仓库，然后使用 Git 添加更改、提交更改并推送到远程仓库。 75 | 总结: 76 | 77 | 该工作流程通过监听 GitHub 仓库中的 issue 事件来触发博客文章同步操作。当 issue 被创建、关闭、重命名、添加或移除标签、重新打开或代码被修改时，工作流程会自动执行 yarn sync-post 命令同步博客文章到仓库，并提交更改。 78 | 79 | ## TODO 80 | 81 | - [x] sitemap.xml 82 | - [x] rss 83 | - [ ] 友链 84 | - [ ] 登录 85 | - [ ] 评论 86 | - [ ] 留言板 87 | - [ ] 搜索 88 | - [x] 头像转圈圈，仿掘金 89 | - [ ] 收藏夹 90 | 91 | ## 注意事项 92 | 93 | - github 写帖子，不要纯数字标题 94 | -------------------------------------------------------------------------------- /data/blog/post-72.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: ESLint + Prettier 太烦人？这次彻底搞定 3 | date: 2025-06-15T14:01:14Z 4 | slug: post-72 5 | author: coderPerseus：https://github.com/coderPerseus 6 | tags: ["前端工程化"] 7 | --- 8 | 9 | 众所周知，前端搭建项目的时候，如果是团队开发肯定需要配置 ESLint 和 Prettier 来保证代码风格统一。但是 ESLint 和 Prettier 如果配置不好，就会“打架”，并且它们的配置还比较麻烦，那怎么办呢？其实很简单，就是使用现成的，很多大厂都提供了现成的解决方案，下面就来看一下吧！ 10 | 11 | 下面，来看看社区提供的五套方案，让我们先看一下下面的表格，这里除了 @antfu/eslint-config ，其他都是出自大厂的开源 12 |  13 | 14 | 下面让我们更加详细的看看它们的优缺点 15 | ## @antfu/eslint-config 16 | 这是 Vue 团队成员 Anthony Fu 开发的 ESLint 配置，特点是开箱即用，零配置，支持 JS, TS, JSX, Vue, JSON, YAML, Markdown，并可选择性支持 React, Svelte, UnoCSS, Astro, Solid 等。通过 `eslint-plugin-format` 支持 CSS, HTML, XML 等格式化，我觉得很好用，推荐。 17 | 18 | 使用非常简单，既可以通过 CLI: 19 | 20 | `pnpm dlx @antfu/eslint-config@latest` 21 | 22 | 也可以通过手动安装到项目： 23 | 24 | `pnpm i -D eslint @antfu/eslint-config` 25 | 26 | 然后，需要在根目录下新建 `eslint.config.mjs` 并进行配置 27 | 28 | 如果你是 antfu 的粉丝，或者你不了解 ESLint 和 Prettier，那么这是一个好的选择 29 | 30 | ## @umijs/fabric 31 | 32 | 这是 蚂蚁集团 Umi 团队的规范，如果你使用 umi 框架，应该对它不陌生。但最近一次更新已经是在两年前 33 | 34 | 它支持 JS, 适合在 React 和 TS 项目使用，包含 prettier，eslint，stylelint ,commitlint 的配置 35 | 36 | 使用它，需要手动安装并配置： 37 | 38 | `npm i @umijs/fabric --save-dev` 39 | 40 | 然后根据官方文档配置 `.eslintrc.js` , `.stylelintrc.js` 和 `.prettierrc.js` 41 | ## eslint-config-ali 42 | 43 | 遵循阿里巴巴前端工程规范（F2E Guidelines）的配置，支持 JavaScript、TypeScript、React、Vue、Node.js 等多种项目类型，大厂出品，应该兼容性和质量比较高，也是我在使用的，推荐。 44 | 45 | 推荐使用 CLI 方式接入，直接在项目根目录运行： 46 | 47 | `npx f2elint` 48 | 49 | 选择你的配置，它会自动帮你进行安装依赖和生成对应的脚本和配置 50 | 51 | ## eslint-config-airbnb 和 eslint-config-airbnb-base 52 | 53 | - eslint-config-airbnb：Airbnb 风格指南，适合 React 项目。 54 | - eslint-config-airbnb-base：Airbnb 基础 JS 配置，无 React 插件，适合非 React JS 项目。 55 | 56 | Airbnb 的 JavaScript 代码规范，业界最流行的规范之一。github star 147k。但是库的更新最近一次是 2021 年 57 | 安装使用它，对于 React 项目： 58 | 59 | `npx install-peerdeps --dev eslint-config-airbnb` 60 | 61 | 对于非 React 项目： 62 | 63 | `npx install-peerdeps --dev eslint-config-airbnb-base` 64 | 65 | 然后配置 `.eslintrc.js` 66 | 67 | ## eslint-config-alloy 68 | 69 | 腾讯 AlloyTeam 出品的 ESLint 配置，支持多种技术栈。适合 React, Vue, TypeScript 项目，特别适合需要高度定制的团队，腾讯 AlloyTeam 开发。 70 | 使用它可以通过手动的方式： 71 | 72 | `npm install --save-dev eslint @babel/core @babel/eslint-parser eslint-config-alloy` 73 | 74 | 75 | ## 最后 76 | 77 | ESLint + Prettier 依然是目前最主流的前端代码规范的工具，但是也有新星挑战者，`Biome` 和 `Oxlint`，它们的集成也比较简答，选择一个适合自己的项目代码格式化规范，这样以后就可以专注代码和其他事情上了！ 78 | 79 | 80 | --- 81 | 此文自动发布于：github issues 82 | -------------------------------------------------------------------------------- /data/blog/post-46.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 如何订阅 cursor Pro 会员，超实惠，超实用！ 3 | date: 2025-03-03T13:22:43Z 4 | slug: post-46 5 | author: coderPerseus：https://github.com/coderPerseus 6 | tags: ["AI","经验"] 7 | --- 8 | 9 | ## cursor 是什么？ 10 | 11 | Cursor 是一款人工智能驱动的代码编辑器，旨在提高开发者的生产力。根据网站介绍，Cursor 通过人工智能驱动的代码生成、编辑和调试等功能，帮助开发者更快地编写代码。它提供了一个协作式编程环境，支持实时配对编程。Cursor 集成了 Git 进行版本控制，并支持多种语言和框架。其目标是通过自动化重复任务和提供智能辅助来简化编码工作流程，最终使软件开发更加高效。更多详情，请访问 [https://www.cursor.com/](https://www.cursor.com/)。 12 | 13 | ## 如何使用 Cursor？ 14 | 15 | 1）下载 & 安装 16 | 17 | + 去 cursor 官网，然后点击右上角的 Download 18 | + 下载完成后，进行安装 19 | 20 | 21 | 22 | ## 开通会员 23 | 24 | 目前 cursor 免费有一些额度，但是如果你是深度用户那么就肯定要订阅会员，开通会员有两种方式，我推荐使用第一种方式，快速，还省钱 25 | 26 | ### 方式一 27 | 28 | 去 cursor 官网，点击右上角的账号设置： 29 | 30 |  31 | 32 | 然后点击升级到 Pro 33 | 34 |  35 | 36 | 然后复制订单地址（页面URL） 37 | 38 |  39 | 40 | 然后去闲鱼下单，然后我就会问你要订单地址，然后给你开通，目前全网最低价格 162。 41 | 42 |  43 | 44 | 当然，如果你觉得闲鱼麻烦，信的过我，可以直接加我微信： 45 | 46 |  47 | 48 | ### 方式二 49 | 50 | 如果你打算长期使用 cursor，我建议你购买一个[野卡](https://yeka.ai/i/FNS4AYLG)，也非常简单，去[野卡](https://yeka.ai/i/FNS4AYLG)官网，推荐使用我的邀请码：`FNS4AYLG`。你可以领一美元的优惠。 51 | 52 | 这里介绍一下野卡是什么？ 53 | 54 | 它是一个帮你办理一个美国信用卡的平台，你购买他们的会员，就会给你办一张美区的信用卡，然后你就可以方便的订阅各种国外产品了，放一张图它们支持订阅平台的图： 55 | 56 |  57 | 58 | 我们需要先登录，登录后需要购买下面的订阅服务 59 | 60 |  61 | 62 | 点击立即开通后，一直到最后充值就好了！ 63 | 64 | 充值完成，我们就有自己的美区信用卡了！ 65 | 66 | 下面我以购买 cursor pro 为例，讲一下如何购买： 67 | 68 |  69 | 70 |  71 | 72 | 73 | 74 | 最后总结一下： 75 | 76 | 1. 如果你不确定长久使用 Cursor，推荐第一种方式 77 | 2. 如果你打算长期订阅 AI 服务，就使用第二种方式 78 | 79 | --- 80 | 此文自动发布于：github issues 81 | -------------------------------------------------------------------------------- /posts/mid-year-summary-2023.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 2023 年中终结 3 | description: 一个普通毕业一年半的前端程序员，分析自己的现状，规划自己未来目标， 4 | tags: [年中总结, 规划, 2023, 杂谈, luckySnail] 5 | slug: mid-year-summary-2023 6 | author: luckySnail 7 | # cover: 8 | date: 2023-06-17 9 | --- 10 | 11 | ## 我也想成为 不高兴就喝水口 中的前 10% 12 | 13 |  14 | 15 | 从我的老板和水哥的聊天中，水哥说了一个很接地气的理论，如果能够成为行业的前 10% ，一定不会太差。我是很认同的，确实不能再每天都当 NPC ，随波逐流了，那行业前10%前提怎么实现呢？从我现在来看我觉得是非常难的，原因有： 16 | 17 | 1. 我目前的学历和能力都很普通，没有在大厂工作的经历 18 | 19 | 2. 社会压力很大，人们都在奋斗，互联网行业也不再像之前那样充满活力 20 | 21 | 3. 我常常会被短暂的激情所驱使，情绪容易波动，难以保持专注 22 | 23 | 4. 不可否认，现在有很多诱惑，比如抖音等社交媒体，总是把我时间偷走 24 | 25 | 5. 也没有什么抱负，没有很强的事业心那种，希望自己能够把生活过的不错就满意了 26 | 27 | 。。。 总之 ，我就是一个知道很多，但是缺少行动力的人，但是，我身边人都很优秀啊，环境对绝大多数的人的影响都是很大的，我这样认为，我有一个不能再优秀的老板，有每天都打鸡血似的小 y，还有太多优秀的人被我看见，希望自己能平视这些优秀的伙伴，看了很多道理，听了很多故事，我想我需要规划一下自己，彻底的，客观的直视自己，总结一下上半年，规划一下 下半年 和 自己的未来，总不能一直被推着走， 28 | 29 |  30 | 31 | 这是我在年初定的目标，其实是完全没有做到的，但是这半年我也有改变，找到了真正喜欢的工作，真的很幸运，也让我更加相信行动的重要性，我只需要努力去做，结果交给时间。 32 | 33 | 在上半年，我有段时间是在每天学习的，每天写新的技术笔记，很不幸，和每次都一样，没能坚持，也让我更加坚信，行动是需要动力的，生活是需要鼓励和鸡汤的， 34 | 35 |  36 | 37 | 这是我的 github 近期，语雀也差不多，取得了一些令人鼓舞的成就和努力。我成功考取了驾照，并找到了梦寐以求的工作。同时，我还学习了一些新技术，并且自己搭建了一个简单的博客系统。虽然目前还有一些功能需要完善，无法上线，但我对自己的进展感到满意。此外，我还致力于学习各种技术，并对自己的技术栈进行了总结，以便了解自己的优势和需要进一步学习的领域。在工作和生活之间，我也思考了平衡的问题，并正在努力探索高效工作和快乐生活的方法。 38 | 39 | 回顾2023年上半年，虽然我没有完全实现年初设定的目标，但我并不气馁，因为2023年还有下半年的时间。我将继续加油努力⛽️，努力把 flag 都变成现实，我觉得无论是摆烂还是积极努力，都是最好的我，都是为了更好的整理自己继续前进。如果你觉得我说的对，那给我点个赞可以吗，这对我真的很重要。 40 | 41 | 进入 2023 年下半年，我将全力以赴工作和生活，减少懒散，多做有意义的事情。以下是我的具体目标： 42 | 43 | 1. 深入学习React源码，提升技术水平，增强解决问题的能力和从容应对 bug 的能力 44 | 45 | 2. 写文章，**「每周」**至少一偏纯技术学习笔记，学习并记录下来，希望通过分享简单易懂的文字，提高自己的写作能力，编程能力和思维能力 46 | 47 | 3. **「每周」**至少运动一次，跑步，羽毛球等等，健康和钱 ，我全都要 🐶 48 | 49 | 4. 努力工作，认真工作，让自己成为一个成熟的打工人，不拖后腿，如果能产生更多价值，那就更好了 50 | 51 | 5. 快乐生活，简单大方，希望自己能够落落大方，对待任何事情和人，提高自己情绪的稳定性 52 | 53 | 6. 希望能够找到一个合适的伴侣。 54 | 55 | 7. 希望自己能开启自己的自媒体的路，其实我也很喜欢分享和开源，所以记录下我的成长不会是我的负担， 56 | 57 | 8. 做自己的博客网站，并开源，并写详细的实现过程，做一个自己的原创项目 58 | 59 | 9. 我有两个榜样，一个是冴羽，一个是鱼皮，希望能从他们身上学到更多，并将其转化为自己的收获。 60 | 61 | 这里，我分享一下 冴羽 的微信付费文章，真的不错，是我 2023 前五的对自己的投资，从如何建立信念，培养自尊，刺激去行动，如何更好的去行动，如何寻找目标，如何更好的管理自己的精力，到近期的如何更好的管理自己，每一篇都是精华，给大家看下我的阅读笔记 62 | 63 |  64 | 65 | 最后，我自身总结发现，如果想要去做一件事情并且坚持下来，是需要自己给自己的行为赋予意义的，也可以说是自己给自己画饼，只有自己和这个目标产生吸引力，才能产生动力，才能产生行为，才能产生结果。至于是什么结果，我觉得应该不会太差。这也是我最近学习到的 吸引力法则，动力本身就应该源于自己，不是源于我自己的动力产生的行为，在我身上都没有坚持下来，不知道大家是不是这样。 66 | 67 | 半年总结活动还在进行，希望看到更多人对自己的思考，并分享出来，写下来，大家互相学习，一起进步。 68 | -------------------------------------------------------------------------------- /posts/react-drag-drop-demo.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: React最简版本低代码实现 3 | description: 如何使用 React 通过拖拉拽实现一个页面，通过这篇文章，来了解实现思路 4 | tags: [低代码, React] 5 | slug: react-drag-drop-demo 6 | author: luckySnail 7 | # cover: https://blog-1304565468.cos.ap-shanghai.myqcloud.com/typora/laugh.png 8 | date: 2024-06-22 9 | --- 10 | 11 | 大家好，我是阿星，不知道你有没有开发拖拽功能的需求，或者对拖拽元素感兴趣。那么这篇文章应该你可以读一下。接下来我会使用 react-dnd、 react-moveable 来实现下面这个 拖拽demo，先给大家看一下我的效果： 12 |  13 | 这里是源码：[https://github.com/coderPerseus/drag-drop](https://github.com/coderPerseus/drag-drop)，如果对你有帮助，可以 star 一下，感谢！ 14 | 15 | ## 需求分析 16 | 17 | 先找一个很赞的低代码平台，这里我找的是：阿里的低代码引擎：[https://lowcode-engine.cn/demo/demo-general/index.html](https://lowcode-engine.cn/demo/demo-general/index.html)，大家可以先看下，了解一下低代码平台。 18 | 那我们来完成一个最简版本的demo吧！通过上面的gif 大家应该看到了页面分为三个部分，准确来说分为如下四个部分： 19 | 20 | 1. 导航栏：放一些全局的配置，操作等等 21 | 2. 左侧物料区：左侧会放一些物料，用来拖拽到中间，有的还会有页面树结构，JSON 数据，我们这里就实现一个 物料展示和拖拽 22 | 3. 中间展示，拖拽区：负责把左侧的物料可以拖进来，可以在这里进行物料的拖拽，可以点击唤起右侧对应的属性编辑区 23 | 4. 右边属性配置区：选中拖拽元素，进行编辑 24 | 25 | 好了，我们需求梳理完成，我们一步步开发吧！ 26 | 27 | ## 搭建项目 28 | 29 | 我们基于 Next.js 创建一个项目吧！参考文档：[https://nextjs.org/docs/getting-started/installation](https://nextjs.org/docs/getting-started/installation)，执行 `npx create-next-app@latest`， 30 |  31 | 我们等待安装完成，启动项目`npm run dev`，node版本要 >= 18.17 哦！ 32 | 我们删除 app/page.tsx 不需要内容后，我们就创建我们需要的组件文件 33 |  34 | app 放页面的目录，里面有我们的主页面 35 | componet：组件目录 36 | 37 | \> ContextProvider：基于useContext 封装的数据共享组件，这样就实现了数据在多个组件同步的能力，中间移动元素的位置，右侧也相应变化 38 | 39 | \> material：存放我们左侧所有物料的地方，这里有图片物料和文本物料（通过一个映射map 来动态渲染对应的元素），这里就是完成左侧所有类型物料的渲染逻辑的地方 40 | 41 | \> DraggableComponent：左侧组件面板，展示可供拖拽和使用的组件库。通过渲染预设的素材数组，然后使用下文中的 DragWrapper 来包裹每一个 组件，使其可以拖拽 42 | 43 | \> ComponentPanel 设计面板：用于放置和编辑组件的地方。渲染用户从左侧拖拽的元素数组，使用 MoveableWrapper 来实现页面元素可以拖拽 44 | 45 | \> PropertyEditor：右侧属性编辑器，用于编辑物料的属性，通过配置得到要渲染的配置表单，然后渲染出对应的配置表单 46 | 47 | \> DragWrapper：封装了一个 可拖拽组件的包装组件，使用 react-dnd 48 | 49 | \> MoveableWrapper：封装了一个可以移动的包装组件，使用 react-moveable 实现 50 | 51 | \> lib 下面 component 存放物料的数据，utils 存放一些公共方法 52 | 53 | 是不是很简答，这是最简的低代码生成器，通过拖拽得到对应的 JSON 数据，但真正的低代码生成器要比这个复杂的多 54 | 55 | ## 难点 & 坑点 56 | 57 | 这个项目真正难的数据结构，需要设计一个好的数据结构来兼容无论什么元素都额可以使用这个数据结构来承载。 58 | 这个项目的坑点是当我刷新页面把一个元素拖拽到设计区，然后这个元素无法被选中，最后发现是需要动态更新 moveable 的target 属性，我就设置了一个 target 的 useState，然后，当前选中的元素和JSON数据变化的时候我就更新这个 target 修复了这个bug，但是排查了很久才发现是它的问题 59 | 60 | ## end 61 | 62 | 感谢你的阅读！ 63 | -------------------------------------------------------------------------------- /src/assets/icons/DashboardIcon.tsx: -------------------------------------------------------------------------------- 1 | import { type IconProps } from '@/assets'; 2 | 3 | export function DashboardIcon(props: IconProps = {}) { 4 | return ( 5 | 42 | ); 43 | } 44 | -------------------------------------------------------------------------------- /posts/about.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 关于 幸运的蜗牛 3 | description: 我是幸运的蜗牛，一名充满热情的前端开发工程师。我热衷于探索和体验最新技术，特别是人工智能（AI），并在日常工作中去使用它们，来提升我的工作效率。我的目标是积极参与开源社区，为开源项目贡献自己的力量。正如我的名字，我相信越努力，越幸运 4 | tags: [luckySnail, 前端工程师] 5 | slug: about 6 | author: luckySnail 7 | cover: https://blog-1304565468.cos.ap-shanghai.myqcloud.com/work/image-20240721171518634.png 8 | date: 1900-01-01 9 | --- 10 | 11 | # 简介 12 | 13 | 我是 _幸运的蜗牛_，一名准全栈开发工程师，但是 AI 的到来，我逐渐变成了提问工程师，和 AI 答案校验者。目前在上海，就职于 鱼鸢网络。很巧，写这段文字的时候，我工作了近**_两年半_**。我的目标是成为一个全干工程师，通过技术和认知做出一些个人的产品，并被很多人使用。 14 | 15 | ## 我会在这些地方活跃 16 | 17 | 1. 我的 Github，目前个人开发的代码基本上都会在 GitHub 18 | 2. 会把工作和学习中需要记录的知识第一时间记录在 语雀 19 | 3. 每日必逛 哔哩哔哩 20 | 21 | ## 目前掌握技术 22 | 23 | - HTML 24 | - CSS 25 | - JavaScript 26 | - Vue（熟悉） 27 | - React （主要技术栈） 28 | - Next.js 29 | - Node.js （熟悉，借助 AI 能够完成基本开发） 30 | - Vite、webpack、rollup 等打包工具都有使用 31 | - Nginx （基本使用） 32 | - 小程序（Taro、原生） 33 | - Docker 34 | - Nest.js （一点点，还在看神光的小册中） 35 | - 测试（在学习中。。） 36 | - 非常熟练 [ant design pro](https://pro.ant.design/zh-CN/) 开发 37 | 38 | ## 我的设备 39 | 40 | - Apple MacBook Pro 2 Max（主力机，公司的，感谢老板） 41 | - Apple MacBook Pro 1 （平时在家用的） 42 | - IQOO 12 PRO 16 GB + 1TB （主力手机，很满意） 43 | - Apple 13 （之前的手机，目前作为备用机，和测试机器） 44 | - SONY WH-1000XM3 头戴式耳机 45 | - AirPods Pro 1 代 （好用，用过苹果耳机应该不会再换其他的了吧！） 46 | - 联想 Y27h-30 电竞屏 （感觉屏幕都差不多，27寸应该是大多数人的选择） 47 | - 台式电脑（但是现在没有使用了，管不住自己，总是玩游戏去了，我要多学习，多写代码） 48 | 49 | ## 我的爱好 50 | 51 | - 音乐 （基本上都听，希望多去现场听） 52 | - 嘻哈 53 | - 摇滚（最近迷上，循环 **麻园诗人**） 54 | - 民谣 55 | - 流行 56 | - 游戏 57 | - 英雄联盟，现在也基本不玩了，太费时间了 58 | - 王者荣耀，现在已经不玩了 59 | - 金铲铲之战 60 | - 没有更多了，不是不喜欢，是没时间玩，梦想财务自由，每天在家打游戏 61 | - 探索新技术，AI 等 62 | - 写文章，把所见所闻所想都记录下来，然后分享给别人 63 | - 做饭，如果天气合适，我会自己给自己做饭，做饭和写代码很像，不断的练习，就能做出美味的饭菜，写出好的代码 64 | - 读书，微信读书很好用，读书能让内心平静 65 | - 旅行，和朋友一起旅行， 66 | - ~~看美女~~ 67 | 68 | ## 很想做 69 | 70 | - 看演唱会 71 | - 自媒体 72 | - 养一只狗 73 | - 摄影 📹，记录美好 74 | 75 | ## 联系我 76 | 77 | - 微信：RELEASE500 78 | - 邮箱：snailrun160@gamil.com 79 | 80 | ## 我能提供什么？ 81 | 82 | - 上海租房，干饭小能手！ 83 | - 超多实战项目经验，擅长 React，Vue，Node.js 解决问题 84 | - AI 探索者，丰富的 AI 工具使用经验 85 | - 费曼学习法践行者，能静下心来学习知识 86 | - 丰富团队协作经验，能同事和后端，产品，UI 打成一片！ 87 | 88 | ## 其他 89 | 90 | 94 | 我的简历 95 | 96 | 97 | 98 | 我的代码片段 99 | 100 | 101 | 关注我，我会分享我在前端路上的所有，如果你学习有什么问题，欢迎和我讨论 102 | 103 |  104 | -------------------------------------------------------------------------------- /src/app/(app)/projects/Projects.tsx: -------------------------------------------------------------------------------- 1 | import codeCopyIcon from '@/assets/products/codecopy.png'; 2 | import resumeIcon from '@/assets/products/resume.png'; 3 | import React from 'react'; 4 | import easykolIcon from '~/public/easykol.png'; 5 | import luckySnailBlogIcon from '~/public/logo.png'; 6 | import neovateCodeIcon from '~/public/neovateCode.png'; 7 | import npmIcon from '~/public/npmIcon.webp'; 8 | import svgShowIcon from '~/public/svgShow.png'; 9 | import { ProjectCard } from './ProjectCard'; 10 | 11 | export function Projects(): React.ReactElement { 12 | const projects: ProjectItem[] = [ 13 | { 14 | id: '8', 15 | url: 'https://easykol.com/', 16 | icon: easykolIcon, 17 | name: 'Easykol', 18 | description: 19 | '最好用的海外营销工具，帮你快速找到你想要的红人，并且内置邮件模板和批量发邮件建联。支持 Tiktok，instagram，youtube，小红书，抖音等主流平台，无论性价比还是质量都遥遥领先行业内竞品产品', 20 | tags: ['公司'] 21 | }, 22 | { 23 | id: '7', 24 | url: 'https://neovateai.dev/', 25 | icon: neovateCodeIcon, 26 | name: 'Neovate Code', 27 | description: `Neovate ['niːəʊveɪt] Code is a code agent to enhance your development. You can use it to generate code, fix bugs, review code, add tests, and more. You can run it in interactive mode or headless mode.`, 28 | tags: ['开源'] 29 | }, 30 | { 31 | id: '6', 32 | url: 'https://www.svgshow.cn/', 33 | icon: svgShowIcon, 34 | name: 'SVG 秀', 35 | description: 36 | '利用当下最强的 SVG 动画库，轻松将内容转为美观的 SVG 图片，并且可以看到 AI 是如何一步步画出来的', 37 | tags: ['个人'] 38 | }, 39 | { 40 | id: '5', 41 | url: 'https://ascii.luckysnail.cn/', 42 | icon: luckySnailBlogIcon, 43 | name: 'ASCII 字符生成器', 44 | description: '把图片和视频转为 ASCII 形式', 45 | tags: ['个人'] 46 | }, 47 | { 48 | id: '4', 49 | url: 'https://www.npmjs.com/package/bytemd-plugin-image-lazy', 50 | icon: npmIcon, 51 | name: 'bytemd 的图片懒加载插件', 52 | description: '支持原生懒加载和 intersection observer 懒加载', 53 | tags: ['个人'] 54 | }, 55 | { 56 | id: '3', 57 | url: 'https://www.luckySnail.cn', 58 | icon: luckySnailBlogIcon, 59 | name: 'luckySnail 的个人博客', 60 | description: '基于 Next.js 创建的博客网站，', 61 | tags: ['个人'] 62 | }, 63 | { 64 | id: '2', 65 | url: 'https://www.laoyujianli.com', 66 | icon: resumeIcon, 67 | name: '老鱼简历', 68 | description: 69 | '很好用的写简历平台，能够下载 PDF PNG 格式的简历，当然也可以分享在线简历链接，支持各种格式文件导入简历，接入了 AI 帮忙快速写简历，还能看到一些实时的求职动态。可以体验一下，如果使用有任何问题，欢迎 联系我', 70 | tags: ['公司'] 71 | }, 72 | { 73 | id: '1', 74 | url: 'https://www.codecopy.cn', 75 | icon: codeCopyIcon, 76 | name: '代码小抄', 77 | description: '一个方便的代码片段记录工具', 78 | tags: ['公司'] 79 | } 80 | ]; 81 | 82 | return ( 83 |
-
87 | {projects.map((project) => (
88 |
64 | (eventRef.current = event)}
68 | checked={theme === 'dark'}
69 | onCheckedChange={handleThemeChange}
70 | className="w-16 h-8 px-1"
71 | >
72 |
79 | {theme === 'dark' ? (
80 |
85 |
86 |
88 | );
89 | }
90 |
91 | const spring = {
92 | type: 'spring',
93 | stiffness: 900,
94 | damping: 80
95 | };
96 |
--------------------------------------------------------------------------------
/env.mjs:
--------------------------------------------------------------------------------
1 | import { z } from 'zod';
2 |
3 | /**
4 | * Specify server-side environment variables schema here.
5 | */
6 | const server = z.object({
7 | NODE_ENV: z.enum(['development', 'test', 'production']),
8 |
9 | VERCEL_ENV: z
10 | .enum(['development', 'preview', 'production'])
11 | .default('development')
12 | });
13 |
14 | const client = z.object({
15 | NEXT_PUBLIC_SITE_URL: z.string().min(1),
16 | NEXT_PUBLIC_SITE_EMAIL_FROM: z.string().min(1),
17 | NEXT_PUBLIC_SITE_LINK_PREVIEW_ENABLED: z.boolean().optional().default(false)
18 | });
19 |
20 | /**
21 | * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
22 | * middlewares) or client-side so we need to destruct manually.
23 | *
24 | * @type {Record