Skip to content

Commit 24d28c2

Browse files
mhaidarhanifmhaidarhanif
committed
docs: some updates
1 parent c422261 commit 24d28c2

22 files changed

+615
-55
lines changed

‎.github/copilot-instructions.md

+143
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
# [Project Name]
2+
3+
Every time you choose to apply a rule(s), explicitly state the rule(s) in the output. You can abbreviate the rule description to a single word or phrase.
4+
5+
## Project Context
6+
7+
[Brief description ]
8+
9+
- [more description]
10+
- [more description]
11+
- [more description]
12+
13+
## Code Style and Structure
14+
15+
- Write concise, technical TypeScript code with accurate examples
16+
- Use functional and declarative programming patterns; avoid classes
17+
- Prefer iteration and modularization over code duplication
18+
- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
19+
20+
## Tech Stack
21+
22+
- React
23+
- TypeScript
24+
- Tailwind CSS
25+
- Shadcn UI
26+
- Chrome Extension
27+
- Express.js
28+
29+
## Naming Conventions
30+
31+
- Use lowercase with dashes for directories (e.g., components/form-wizard)
32+
- Favor named exports for components and utilities
33+
- Use PascalCase for component files (e.g., VisaForm.tsx)
34+
- Use camelCase for utility files (e.g., formValidator.ts)
35+
36+
## TypeScript Usage
37+
38+
- Use TypeScript for all code; prefer interfaces over types
39+
- Avoid enums; use const objects with 'as const' assertion
40+
- Use functional components with TypeScript interfaces
41+
- Define strict types for message passing between different parts of the extension
42+
- Use absolute imports for all files @/...
43+
- Avoid try/catch blocks unless there's good reason to translate or handle error in that abstraction
44+
- Use explicit return types for all functions
45+
46+
## Chrome Extension Specific
47+
48+
- Use Manifest V3 standards
49+
- Implement proper message passing between components:
50+
```typescript
51+
interface MessagePayload {
52+
type: string;
53+
data: unknown;
54+
}
55+
```
56+
- Handle permissions properly in manifest.json
57+
- Use chrome.storage.local for persistent data
58+
- Implement proper error boundaries and fallbacks
59+
- Use lib/storage for storage related logic
60+
- For the async injected scripts in content/,
61+
- they must not close over variables from the outer scope
62+
- they must not use imported functions from the outer scope
63+
- they must have wrapped error handling so the error message is returned to the caller
64+
65+
## State Management
66+
67+
- Use React Context for global state when needed
68+
- Implement proper state persistence using chrome.storage (for extension)
69+
- Implement proper cleanup in useEffect hooks
70+
71+
## Syntax and Formatting
72+
73+
- Use "function" keyword for pure functions
74+
- Avoid unnecessary curly braces in conditionals
75+
- Use declarative JSX
76+
- Implement proper TypeScript discriminated unions for message types
77+
78+
## UI and Styling
79+
80+
- Use Shadcn UI and Radix for components
81+
- use `npx shadcn@latest add <component-name>` to add new shadcn components
82+
- Implement Tailwind CSS for styling
83+
- Consider extension-specific constraints (popup dimensions, permissions)
84+
- Follow Material Design guidelines for Chrome extensions
85+
- When adding new shadcn component, document the installation command
86+
87+
## Error Handling
88+
89+
- Implement proper error boundaries
90+
- Log errors appropriately for debugging
91+
- Provide user-friendly error messages
92+
- Handle network failures gracefully
93+
94+
## Testing
95+
96+
- Write unit tests for utilities and components
97+
- Implement E2E tests for critical flows
98+
- Test across different Chrome versions
99+
- Test memory usage and performance
100+
101+
## Security
102+
103+
- Implement Content Security Policy
104+
- Sanitize user inputs
105+
- Handle sensitive data properly
106+
- Follow Chrome extension security best practices
107+
- Implement proper CORS handling
108+
109+
## Git Usage
110+
111+
Commit Message Prefixes:
112+
113+
- "fix:" for bug fixes
114+
- "feat:" for new features
115+
- "perf:" for performance improvements
116+
- "docs:" for documentation changes
117+
- "style:" for formatting changes
118+
- "refactor:" for code refactoring
119+
- "test:" for adding missing tests
120+
- "chore:" for maintenance tasks
121+
122+
Rules:
123+
124+
- Use lowercase for commit messages
125+
- Keep the summary line concise
126+
- Include description for non-obvious changes
127+
- Reference issue numbers when applicable
128+
129+
## Documentation
130+
131+
- Maintain clear README with setup instructions
132+
- Document API interactions and data flows
133+
- Keep manifest.json well-documented
134+
- Don't include comments unless it's for complex logic
135+
- Document permission requirements
136+
137+
## Development Workflow
138+
139+
- Use proper version control
140+
- Implement proper code review process
141+
- Test in multiple environments
142+
- Follow semantic versioning for releases
143+
- Maintain changelog

‎.vscode/extensions.json

-2
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,8 @@
33
"artdiniz.quitcontrol-vscode",
44
"biomejs.biome",
55
"bradlc.vscode-tailwindcss",
6-
"codeforge.remix-forge",
76
"csstools.postcss",
87
"davidanson.vscode-markdownlint",
9-
"dbaeumer.vscode-eslint",
108
"esbenp.prettier-vscode",
119
"johnpapa.vscode-peacock",
1210
"mhutchie.git-graph",

‎README.md

+19-15
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717

1818
- Default frontend web with React and Tailwind CSS.
1919
- Optional full-stack web with Next.js or Remix (React Router).
20-
- Optional backend API with REST API or GraphQL.
21-
- Interchangeable ORM with Prisma or Drizzle.
20+
- Optional backend API with GraphQL or REST API.
21+
- Optional ORM with Drizzle or Prisma with ZenStack.
2222
- Bring your own thing from non-JS ecosystem.
2323

2424
## Benefits
@@ -149,19 +149,22 @@ Manual:
149149

150150
1. Email: [Gmail](docs/gmail.md) / [HEY](docs/hey.md) / [ProtonMail](docs/protonmail.md)
151151
2. Credentials: [Bitwarden](docs/bitwarden.md) / [Passbolt](docs/passbolt.md)
152-
3. Code Editor: [VS Code](docs/vscode.md) / [NeoVim](docs/neovim.md)
153-
4. AI Tool: [ChatGPT](docs/chatgpt.md) / [Claude](docs/claude.md) / [Perplexity](docs/perplexity.md) / [Galileo AI](docs/galileo-ai.md)
154-
5. AI Code Editor: [Cursor AI](docs/cursor.md) / [Supermaven](docs/supermaven.md) / [GitHub CoPilot](docs/github-copilot.md) / [Tabnine](docs/tabnine.md)
155-
6. AI Code Generator: [v0.dev](docs/v0.md) / [Marblism](docs/marblism.md)
156-
7. UI/UX Design: [Figma](docs/figma.md)
157-
8. Communication & Community: [Telegram](docs/telegram.md) / [Discord](docs/discord.md) / [X (Twitter)](docs/x.md)
158-
9. Business Database & MVP Builder: [Airtable](docs/airtable.md) / [Baserow](docs/baserow.md) / [NocoDB](docs/nocodb.md)
159-
10. Project/Product Management: [Linear](docs/linear.md) / [Plane.so](docs/plane.md) / [Basecamp](docs/basecamp.md)
160-
11. Social Media Management: [Buffer](docs/buffer.md) / [Mixpost](docs/mixpost.md) / [Postiz](docs/postiz.md)
161-
12. Blog: [Hashnode](docs/hashnode.md) / [Ghost](docs/ghost.md)
162-
13. Document: [DocuSeal](docs/docuseal.md) / [Papermark](docs/papermark.md)
163-
14. Launcher: [Raycast](docs/raycast.md)
164-
15. Accounting: [Bigcapital](docs/bigcapital.md)
152+
3. Dotfiles: [Chezmoi](docs/chezmoi.md) / [Dotbot](docs/dotbot.md)
153+
4. Code Editor: [VS Code](docs/vscode.md) / [NeoVim](docs/neovim.md)
154+
5. AI Tool: [ChatGPT](docs/chatgpt.md) / [Claude](docs/claude.md) / [Perplexity](docs/perplexity.md) / [Galileo AI](docs/galileo-ai.md)
155+
6. AI Code Editor: [GitHub Copilot](docs/github-copilot.md) / [Cursor AI](docs/cursor.md) / [Codeium](docs/codeium.md) / [Supermaven](docs/supermaven.md) / [Tabnine](docs/tabnine.md)
156+
7. AI Code Generator: [v0.dev](docs/v0.md) / [Marblism](docs/marblism.md)
157+
8. UI/UX Design: [Figma](docs/figma.md)
158+
9. Communication & Community: [Telegram](docs/telegram.md) / [Discord](docs/discord.md) / [X (Twitter)](docs/x.md)
159+
10. CRM: [Attio](docs/attio.md)
160+
11. Business Database & MVP Builder: [Airtable](docs/airtable.md) / [Baserow](docs/baserow.md) / [NocoDB](docs/nocodb.md)
161+
12. Project/Product Management: [Linear](docs/linear.md) / [Plane.so](docs/plane.md) / [Eververse](docs/eververse.md) / [Basecamp](docs/basecamp.md)
162+
13. Docs: [Outline](docs/outline.md) / [Notion](docs/notion.md)
163+
14. Social Media Management: [Buffer](docs/buffer.md) / [Mixpost](docs/mixpost.md) / [Postiz](docs/postiz.md)
164+
15. Blog: [Hashnode](docs/hashnode.md) / [Ghost](docs/ghost.md)
165+
16. Document: [DocuSeal](docs/docuseal.md) / [Papermark](docs/papermark.md)
166+
17. Launcher: [Raycast](docs/raycast.md)
167+
18. Accounting: [Bigcapital](docs/bigcapital.md)
165168

166169
## Guides
167170

@@ -174,6 +177,7 @@ Manual:
174177
## Inspirations
175178

176179
- [OpenAlternative](https://openalternative.co): Open Source Alternatives to Popular Software
180+
- [OpenSourceAlternative.to](https://opensourcealternative.to): Open Source Alternatives to Proprietary Software
177181
- [Best of JS](https://bestofjs.org)
178182
- [Laravel](https://laravel.com)
179183
- [Ruby on Rails](https://rubyonrails.org)

‎docs/asdf.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# asdf-vm
2+
3+
asdf-vm is a CLI tool that can manage multiple runtime versions on a
4+
per-project basis. It is like nvm, but for more than just Node.js etc.
5+
6+
Links:
7+
8+
- [asdf-vm](https://asdf-vm.com)

‎docs/attio.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Attio
2+
3+
Attio is the next gen of CRM. Attio is the engine that builds, scales and grows your company to the next level.
4+
5+
Links:
6+
7+
- [Attio](https://attio.com)

‎docs/chezmoi.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# Chezmoi
2+
3+
Manage your dotfiles across multiple diverse machines, securely.
4+
5+
Links:
6+
7+
- [Chezmoi](https://chezmoi.io)
8+
- [`twpayne/chezmoi`](https://github.com/twpayne/chezmoi)

‎docs/codeium.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Codeium

‎docs/eververse.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Eververse

‎docs/guides/components.md ‎docs/guides/ui-components.md

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Components
1+
# UI Components
22

33
Required UI components for various applications.
44

@@ -28,3 +28,9 @@ Required UI components for various applications.
2828
- Chart
2929
- Stepperize
3030
- Carousel
31+
32+
## Blocks
33+
34+
- Form
35+
- Dashboard
36+
- Chart

‎docs/json.md

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# JSON
2+
3+
Links:
4+
5+
- [JSON Schema](https://json-schema.org)
6+
7+
## JSON with React
8+
9+
Links:
10+
11+
- [`json-edit-react`](https://carlosnz.github.io/json-edit-react)

‎docs/notion.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Notion
2+
3+
Notion is a flexible workspace for your notes, tasks, wikis, and databases.
4+
5+
Links:
6+
7+
- [Notion](https://notion.so)

‎docs/outline.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Outline
2+
3+
Your team’s knowledge base
4+
5+
Lost in a mess of Docs? Never quite sure who has access? Colleagues requesting the same information repeatedly in chat? It’s time to get your team’s knowledge organized.
6+
7+
Links:
8+
9+
- [Outline](https://getoutline.com)

‎docs/proto.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# proto
1+
# proto by moonrepo
22

33
proto is a version manager for all your favorite languages and tools. A unified toolchain. Supports Bun, Deno, Node (npm, pnpm, yarn), Go, Python, Rust, Zig, and more.
44

‎docs/react-router.md

+8
Original file line numberDiff line numberDiff line change
@@ -1 +1,9 @@
11
# React Router
2+
3+
React Router is the most popular routing library for React.
4+
5+
Latest version: v7
6+
7+
Links:
8+
9+
- [React Router](https://reactrouter.com)

‎docs/react.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
# React
22

3-
React is a JavaScript library for building user interfaces. Latest version is v18.
3+
React is a JavaScript library for building user interfaces.
4+
5+
- Latest version: v19
46

57
Links:
68

‎docs/recipes/personal-website.md

-31
This file was deleted.

‎docs/shadcn-ui.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,10 @@ Links:
1515

1616
Complementaries:
1717

18+
- [OriginUI](https://originui.com)
1819
- [JollyUI](https://jollyui.dev)
1920
- [SyntaxUI](https://syntaxui.com)
21+
- [21st.dev](https://21st.dev)
2022
- [Justd](https://getjustd.com)
2123
- [Tremor](https://tremor.so) dashboard components
2224
- [cult/ui](https://cult-ui.com)
@@ -29,7 +31,6 @@ Complementaries:
2931
- [`fancy-multi-select`](https://craft.mxkaske.dev/post/fancy-multi-select)
3032
- [Shadcn Tiptap + Search & Replace](https://tiptap.niazmorshed.dev)
3133
- [`shadcn-minimal-tiptap`](https://github.com/Aslam97/shadcn-minimal-tiptap)
32-
- [`shadcn-minimal-tiptap`](https://github.com/Aslam97/shadcn-minimal-tiptap)
3334
- [`jacobparis/ui`](https://jacobparis.com/ui) for Combobox and Combobox Multiple
3435
- [Sortable](https://github.com/sadmann7/sortable) with dnd kit (drag & drop)
3536
- [Zoomable Chart](https://zoom-chart-demo.vercel.app)

‎docs/tailwind.md

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
# Tailwind
22

3-
Tailwind is a utility-first CSS framework for rapid UI development.
3+
Tailwind is a suite of UI framework for rapid UI development.
44

55
## Tailwind CSS
66

7-
Tailwind CSS is a utility-first CSS framework for rapid UI development.
7+
Tailwind CSS is a utility-first CSS framework.
88

9-
Latest version: v3
9+
- Latest version: v3
10+
- Upcoming version: v4
1011

1112
Links:
1213

0 commit comments

Comments
 (0)