.
+--- .editorconfig
+--- .eslintignore
+--- .eslintrc
+--- .git
+--- .gitignore
+--- .npmrc
+--- esbuild.config.mjs
+--- HowToCreatePlugin.md
+--- main.ts # Plugin entry point
+--- manifest.json
+--- package-lock.json
+--- package.json
+--- tsconfig.json
+--- styles.css # Global styles for the plugin
+--- src # Source folder for TypeScript files
| +--- views # Folder for all custom views
| | +--- KanbanView.ts # Kanban view implementation
| +--- components # Reusable UI components
| | +--- TaskItem.tsx # Component for individual task items
| | +--- Column.tsx # Component for Kanban columns
| +--- interfaces # Folder for TypeScript interfaces and types
| | +--- Task.ts # Interface for task items
| | +--- Column.ts # Interface for Kanban columns
| +--- services # Folder for business logic or utility functions
| | +--- TaskService.ts # Service to manage tasks (CRUD operations, markdown parsing, etc.)
| +--- utils # Utility functions, helpers, and constants
| | +--- FileUtils.ts # Utility functions related to file operations
+--- version-bump.mjs
+--- versions.json
-
src
Folder: This will contain all the TypeScript files related to the functionality of your plugin. Organizing your code into subfolders likeviews
,components
,interfaces
,services
, andutils
helps keep your code modular and maintainable. -
views
Folder:- Store all custom Obsidian views here, such as
KanbanView.ts
. - Each view can have its CSS file within the
styles
subfolder, ensuring the styles are specific to the view.
- Store all custom Obsidian views here, such as
-
components
Folder:- Use this folder for smaller, reusable UI components such as individual task items (
TaskItem.tsx
) or columns (Column.tsx
). - Components help break down the UI into manageable parts, which you can use across different views.
- Use this folder for smaller, reusable UI components such as individual task items (
-
interfaces
Folder:- Store TypeScript interfaces and types here, e.g.,
Task.ts
for defining the structure of task objects andColumn.ts
for columns. - Keeping interfaces separate improves readability and makes it easy to reuse and update types across the project.
- Store TypeScript interfaces and types here, e.g.,
-
services
Folder:- This folder should contain logic that performs data processing or business logic, such as managing tasks or parsing markdown files.
- For example,
TaskService.ts
could handle loading, creating, updating, and syncing tasks with markdown files.
-
utils
Folder:- Utility functions that are commonly used throughout the project, such as file operations (
FileUtils.ts
), can be stored here. - This helps keep your code DRY (Don't Repeat Yourself) by centralizing common logic.
- Utility functions that are commonly used throughout the project, such as file operations (
-
Global Files:
styles.css
: For global styles that apply across the entire plugin.
- Scalability: Easily add new views, components, or services without cluttering the main directory.
- Maintainability: Each feature or component has a dedicated place, making the code easier to navigate and update.
- Reusability: Components and services can be reused across different parts of the plugin, reducing duplication.
- Separation of Concerns: Keeps UI, business logic, and types separate, adhering to best practices for clean code architecture.
Feel free to adjust the structure as needed based on the evolution of your plugin. Let me know if you need further details on setting up any specific part!