byj66 最近的时间轴更新
byj66

byj66

V2EX 第 377831 号会员,加入于 2019-01-16 10:56:47 +08:00
byj66 最近回复了
14 天前
回复了 calabashfox 创建的主题 程序员 想了解一下合适我们的 css 构建工具
参考一下我的开源项目 oneimg 文字转成图片工具,核心也是一个可以切换主题模板的系统。

开源地址: https://github.com/byodian/oneimg
预览地址: https://oneimgai.com/

本项目使用 css-in-js 方案(tss-react 工具 https://www.tss-react.dev )在运行时动态生成样式主题。同时也可以结合参考 Matreial UI ( https://mui.com/material-ui/customization/theming/#createtheme-options-args-theme )的主题思路。

-------------------------
项目结构:

1. 基础模板
https://github.com/byodian/oneimg/tree/main/src/components/preview/styles

自定义的模板(模板以及主题变量)
https://github.com/byodian/oneimg/tree/main/src/theme


生成模板样式、主题自定义变量的工具函数
https://github.com/byodian/oneimg/blob/main/src/lib/template.ts

- 根据配置生成 CSS 变量:generateThemeVariables
- 生成 CSS 样式:createStyle

3. 在项目中使用动态生成的样式
- CSS 变量作为全局样式使用
https://github.com/byodian/oneimg/blob/main/src/app/page.tsx

<GlobalStyles styles={{ ':root': cssVariables }} />

- 使用 CSS 样式
https://github.com/byodian/oneimg/blob/main/src/components/preview/card.tsx

--------------------

如果你想支持 RSC ,可以考虑 zero runtime 解决方案,像 https://panda-css.com 和 https://vanilla-extract.style
@hanaTsuk1 哈哈,也可以的,开启监听 Stars 事件
@vsitebon 是可以的,也可以把提醒周期做成配置项,根据需求自己定多久提醒一次。
@LeslieLeung 好的,感谢。
想玩一下 cloudflare worker ,Github action 我也试一下
@shzbkzo 厉害。这个项目只是刚开始迭代,这些问题都可以解决。
长期更新个人使用的 dotfiles 配置,做一些开源小工具

https://github.com/byodian
文字转图片: https://github.com/byodian/oneimg
CSS 一个难点在有很多属性要记。多看几本书,MDN 经常看看。
一些参考资料
1. MDN - https://developer.mozilla.org/en-US/docs/Web/CSS
2. CSS roadmap - https://roadmap.sh/r/css-6nqag
3. 深入研究 CSS 的英文博主: https://ishadeed.com/
67 天前
回复了 nihaojob 创建的主题 程序员 我的开源项目 5K Star 啦~~
67 天前
回复了 nihaojob 创建的主题 程序员 我的开源项目 5K Star 啦~~
厉害,我的开源 200 多就觉得很难再提高了,5k 星真实遥不可及。
关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5796 人在线   最高记录 6679   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 22ms · UTC 02:39 · PVG 10:39 · LAX 18:39 · JFK 21:39
Developed with CodeLauncher
♥ Do have faith in what you're doing.