{"id":31786266,"url":"https://github.com/mautops/obsidian-plugin-seed","last_synced_at":"2025-10-10T12:50:53.721Z","repository":{"id":313966207,"uuid":"1011228937","full_name":"mautops/obsidian-plugin-seed","owner":"mautops","description":"Obsidian TailwindCSS Sample Plugin","archived":false,"fork":false,"pushed_at":"2025-06-30T13:53:02.000Z","size":56,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-09T21:25:58.838Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mautops.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-06-30T13:51:08.000Z","updated_at":"2025-06-30T13:53:05.000Z","dependencies_parsed_at":"2025-09-09T21:26:03.264Z","dependency_job_id":"4b9ae6bd-adc5-4e19-97bc-83cc9fb62075","html_url":"https://github.com/mautops/obsidian-plugin-seed","commit_stats":null,"previous_names":["mautops/obsidian-plugin-seed"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/mautops/obsidian-plugin-seed","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mautops%2Fobsidian-plugin-seed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mautops%2Fobsidian-plugin-seed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mautops%2Fobsidian-plugin-seed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mautops%2Fobsidian-plugin-seed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mautops","download_url":"https://codeload.github.com/mautops/obsidian-plugin-seed/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mautops%2Fobsidian-plugin-seed/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279003890,"owners_count":26083641,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-10T02:00:06.843Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-10T12:50:50.550Z","updated_at":"2025-10-10T12:50:53.712Z","avatar_url":"https://github.com/mautops.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Obsidian TailwindCSS Sample Plugin\n\n一个使用现代技术栈构建的Obsidian插件示例，集成了TailwindCSS v4、React 19和TypeScript。\n\n## ✨ 特性\n\n- 🎨 **TailwindCSS v4** - 最新的CSS框架，支持CSS-first配置\n- ⚛️ **React 19** - 最新的React版本，支持并发特性\n- 🔷 **TypeScript** - 完整的类型安全\n- 🚀 **Vite** - 快速的构建工具\n- 📱 **响应式设计** - 适配不同屏幕尺寸\n- 🎯 **Obsidian主题集成** - 完美融入Obsidian界面\n\n## 🚀 快速开始\n\n### 安装依赖\n\n```bash\nnpm install\n```\n\n### 开发模式\n\n```bash\n# 单次构建\nnpm run dev\n\n# 监听文件变化自动构建\nnpm run dev:watch\n```\n\n### 生产构建\n\n```bash\nnpm run build\n```\n\n### 代码检查\n\n```bash\n# 运行ESLint检查\nnpm run lint\n\n# 自动修复ESLint问题\nnpm run lint:fix\n\n# TypeScript类型检查\nnpm run type-check\n```\n\n### 清理构建文件\n\n```bash\nnpm run clean\n```\n\n## 📁 项目结构\n\n```\nobsidian-rising-tasks/\n├── src/\n│   ├── main.ts          # 插件入口文件\n│   ├── App.tsx          # React应用主组件\n│   ├── ExampleView.tsx  # 示例视图组件\n│   └── index.css        # TailwindCSS样式和主题配置\n├── .vscode/             # VS Code配置\n├── dist/                # 构建输出目录\n├── manifest.json        # Obsidian插件清单\n├── package.json         # 项目配置和依赖\n├── tsconfig.json        # TypeScript配置\n├── vite.config.ts       # Vite构建配置\n└── postcss.config.js    # PostCSS配置\n```\n\n## 🎨 TailwindCSS v4 使用\n\n### 自定义Obsidian主题类\n\n项目预定义了一系列Obsidian主题相关的工具类：\n\n```tsx\n// 背景色\n\u003cdiv className=\"bg-background-primary\"\u003e主背景\u003c/div\u003e\n\u003cdiv className=\"bg-background-secondary\"\u003e次背景\u003c/div\u003e\n\n// 文本色\n\u003cspan className=\"text-normal\"\u003e普通文本\u003c/span\u003e\n\u003cspan className=\"text-muted\"\u003e弱化文本\u003c/span\u003e\n\u003cspan className=\"text-accent\"\u003e强调文本\u003c/span\u003e\n\n// 组合类\n\u003cdiv className=\"obsidian-card\"\u003e卡片样式\u003c/div\u003e\n\u003cbutton className=\"obsidian-button\"\u003e普通按钮\u003c/button\u003e\n\u003cbutton className=\"obsidian-button-primary\"\u003e主要按钮\u003c/button\u003e\n\u003cinput className=\"obsidian-input\" /\u003e\n```\n\n### CSS变量支持\n\n所有样式都基于Obsidian的CSS变量，确保与主题完美适配：\n\n```css\n/* 自动适配当前主题 */\n.custom-element {\n  background-color: var(--background-primary);\n  color: var(--text-normal);\n  border-color: var(--border-color);\n}\n```\n\n## 🛠️ 开发指南\n\n### 添加新组件\n\n1. 在`src/`目录下创建新的`.tsx`文件\n2. 使用TailwindCSS类进行样式设计\n3. 导入并在`App.tsx`中使用\n\n### 自定义样式\n\n在`src/index.css`的`@layer utilities`块中添加自定义工具类：\n\n```css\n@layer utilities {\n  .my-custom-class {\n    @apply bg-background-primary text-normal p-4 rounded;\n  }\n}\n```\n\n### 类型定义\n\n项目使用严格的TypeScript配置，确保：\n- 启用所有严格检查选项\n- 使用最新的ES2020特性\n- 完整的React类型支持\n\n## 📦 构建优化\n\n### 生产构建优化\n\n- **代码分割**: 自动分割大型依赖\n- **Tree Shaking**: 移除未使用的代码\n- **压缩**: 使用Terser压缩JavaScript\n- **CSS优化**: 自动移除未使用的CSS\n\n### 开发体验优化\n\n- **快速重建**: 使用nodemon智能监听\n- **类型检查**: 实时TypeScript检查\n- **代码规范**: ESLint + Prettier自动格式化\n- **VS Code集成**: 完整的开发环境配置\n\n## 🔧 配置说明\n\n### Vite配置 (`vite.config.ts`)\n\n- React插件配置\n- 路径别名设置 (`@/` → `src/`)\n- 构建优化选项\n- 外部依赖排除\n\n### TypeScript配置 (`tsconfig.json`)\n\n- 现代ES2020目标\n- 严格类型检查\n- React JSX支持\n- 路径映射\n\n### ESLint配置 (`.eslintrc`)\n\n- TypeScript规则\n- React Hooks规则\n- 现代JavaScript规则\n- 自动修复配置\n\n## 🚨 常见问题\n\n### 样式不生效\n\n确保TailwindCSS类名正确，并检查是否在`@layer utilities`中定义了自定义类。\n\n### 构建文件过大\n\n检查是否正确配置了外部依赖排除，避免将Obsidian API打包进插件。\n\n### 热重载问题\n\n使用`npm run dev:watch`而不是直接的Vite watch，避免无限重建问题。\n\n## 📄 许可证\n\nMIT License\n\n## 🤝 贡献\n\n欢迎提交Issue和Pull Request！\n\n---\n\n**注意**: 这是一个示例插件，仅用于展示如何在Obsidian插件中使用现代前端技术栈。在生产环境中使用前请进行充分测试。\n\n## API Documentation\n\nSee https://github.com/obsidianmd/obsidian-api\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmautops%2Fobsidian-plugin-seed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmautops%2Fobsidian-plugin-seed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmautops%2Fobsidian-plugin-seed/lists"}