|
1 | | -## Devvit Moc Tool Devvit Web |
| 1 | +# Devvit Mod Tool Template |
2 | 2 |
|
3 | | -A starter to build mod tools using Devvit web: |
| 3 | +A template for building Reddit moderation tools using Devvit web. This template provides a complete foundation for creating custom moderation tools with bulk comment management capabilities. |
4 | 4 |
|
5 | | -- [Devvit](https://developers.reddit.com/): A way to build and deploy immersive games on Reddit |
6 | | -- [Vite](https://vite.dev/): For compiling the webView |
7 | | -- [Hono](https://hono.dev/): For backend logic |
8 | | -- [TypeScript](https://www.typescriptlang.org/): For type safety |
| 5 | +## Features |
| 6 | + |
| 7 | +This template includes a working mod tool called **"Mop"** that demonstrates: |
| 8 | + |
| 9 | +- **Bulk Comment Management**: Remove or lock multiple comments at once |
| 10 | +- **Thread-level Actions**: "Mop comments" - Remove/lock a comment and all its replies |
| 11 | +- **Post-level Actions**: "Mop post comments" - Remove/lock all comments on a post |
| 12 | +- **Flexible Options**: |
| 13 | + - Remove comments, lock comments, or both |
| 14 | + - Skip distinguished comments (moderator/admin posts) |
| 15 | +- **Permission Checks**: Only moderators with proper permissions can use the tool |
| 16 | +- **User-friendly Forms**: Interactive forms with clear options and validation |
| 17 | + |
| 18 | +## Tech Stack |
| 19 | + |
| 20 | +- [Devvit](https://developers.reddit.com/): Reddit's platform for building and deploying apps |
| 21 | +- [Vite](https://vite.dev/): Fast build tool for the web components |
| 22 | +- [Hono](https://hono.dev/): Lightweight web framework for backend logic |
| 23 | +- [TypeScript](https://www.typescriptlang.org/): Type-safe development |
9 | 24 |
|
10 | 25 | ## Getting Started |
11 | 26 |
|
12 | | -TODO |
| 27 | +1. **Clone this template** or use it as a starting point for your mod tool |
| 28 | +2. **Install dependencies**: |
| 29 | + ```bash |
| 30 | + npm install |
| 31 | + ``` |
| 32 | +3. **Configure your app** in `devvit.json`: |
| 33 | + - Update the app name |
| 34 | + - Set your development subreddit |
| 35 | +4. **Start developing**: |
| 36 | + ```bash |
| 37 | + npm run dev |
| 38 | + ``` |
| 39 | +5. **Test your changes** in your development subreddit |
| 40 | + |
| 41 | +## Project Structure |
| 42 | + |
| 43 | +``` |
| 44 | +src/ |
| 45 | +├── index.ts # Main server setup with Hono routes |
| 46 | +├── core/ |
| 47 | +│ └── nuke.ts # Core moderation logic for bulk operations |
| 48 | +└── routes/ |
| 49 | + ├── api.ts # Public API endpoints |
| 50 | + ├── forms.ts # Form submission handlers |
| 51 | + ├── menu.ts # Context menu item handlers |
| 52 | + └── triggers.ts # App lifecycle triggers |
| 53 | +``` |
| 54 | + |
| 55 | +## Customizing Your Mod Tool |
| 56 | + |
| 57 | +This template is designed to be easily customizable: |
| 58 | + |
| 59 | +1. **Modify existing actions**: Edit the nuke functionality in `src/core/nuke.ts` |
| 60 | +2. **Add new menu items**: Update `devvit.json` and add handlers in `src/routes/menu.ts` |
| 61 | +3. **Create new forms**: Add form definitions and handlers in `src/routes/forms.ts` |
| 62 | +4. **Add API endpoints**: Extend `src/routes/api.ts` for external integrations |
13 | 63 |
|
14 | 64 | ## Commands |
15 | 65 |
|
16 | | -- `npm run dev`: Starts a development server where you can develop your application live on Reddit. |
17 | | -- `npm run build`: Builds your client and server projects |
18 | | -- `npm run deploy`: Uploads a new version of your app |
19 | | -- `npm run launch`: Publishes your app for review |
20 | | -- `npm run login`: Logs your CLI into Reddit |
21 | | -- `npm run type-check`: Type checks, lints, and prettifies your app |
| 66 | +- `npm run dev`: Starts development mode with live reload on your test subreddit |
| 67 | +- `npm run build`: Builds your mod tool for production |
| 68 | +- `npm run deploy`: Uploads a new version of your app to Reddit |
| 69 | +- `npm run launch`: Publishes your app for review and public use |
| 70 | +- `npm run login`: Authenticates your CLI with Reddit |
| 71 | +- `npm run type-check`: Runs TypeScript type checking, linting, and formatting |
| 72 | + |
| 73 | +## How It Works |
| 74 | + |
| 75 | +The template demonstrates Reddit mod tool development through the "Mop" feature: |
| 76 | + |
| 77 | +1. **Context Menu Integration**: Click on the Mod Shield icon in a comment to see custom mod actions |
| 78 | +2. **Permission Validation**: Automatically checks if the user has moderation permissions |
| 79 | +3. **Interactive Forms**: Presents options through Reddit's native form system |
| 80 | +4. **Reddit API**: Processes multiple comments using Reddit's API |
| 81 | + |
| 82 | +## Development Notes |
| 83 | + |
| 84 | +- **Permissions**: The app requires `reddit: true` permission to access Reddit's API |
| 85 | +- **User Types**: Menu items are restricted to `moderator` user type |
| 86 | + |
| 87 | +## Deployment |
| 88 | + |
| 89 | +1. Test thoroughly in your development subreddit |
| 90 | +2. Run `npm run deploy` to upload your app |
| 91 | +3. Use `npm run launch` to submit for Reddit's app review process |
| 92 | +4. Once approved, users can install your mod tool from Reddit's app directory |
| 93 | + |
| 94 | +This template provides everything you need to build powerful, user-friendly moderation tools for Reddit communities. |
0 commit comments