中文文档 | English

A modern, powerful markdown editor that transforms your Git repositories into a seamless documentation workspace. GitDocPro bridges the gap between version control and content creation, offering a GitHub-like interface with advanced WYSIWYG editing capabilities.

✨ Features

🎨 Beautiful Interface

• GitHub-inspired UI: Clean, intuitive interface that feels familiar to developers
• Dark/Light Mode: Seamless theme switching for comfortable editing in any environment
• Responsive Design: Works perfectly on desktop, tablet, and mobile devices

📝 Advanced Markdown Editor

• WYSIWYG Editing: Rich text editor with real-time markdown preview
• Syntax Highlighting: Support for 16+ programming languages including JavaScript, Python, Java, C++, Go, Rust, and more
• Rich Formatting: Headers, lists, tables, blockquotes, links, images, and code blocks
• Keyboard Shortcuts: Efficient editing with familiar keyboard shortcuts
• Live Preview: See your markdown rendered in real-time as you type

🔧 Git Integration

• Multiple Git Providers: Currently supports GitLab with extensible architecture for GitHub, Gitea, and more
• Repository Management: Browse, search, and organize your repositories
• Branch Support: Switch between branches, create new ones
• File Tree Navigation: Intuitive file explorer with folder structure
• Auto-save: Automatic saving with commit messages
• File Operations: Create, edit, rename, and delete files directly from the editor

🚀 Developer Experience

• TypeScript: Full type safety and excellent IDE support
• Modern Stack: Built with Svelte, Vite, and Tailwind CSS
• Fast Performance: Lightning-fast loading and editing experience
• Extensible Architecture: Easy to add new Git providers and features

🛠️ Installation

Prerequisites

• Node.js 16+ and npm/yarn
• A GitLab account and personal access token

Quick Start

1. Clone the repository

   git clone https://github.com/your-username/gitdocpro.git
   cd gitdocpro

2. Install dependencies

   npm install
   # or
   yarn install

3. Start development server

   npm run dev
   # or
   yarn dev

4. Open your browser Navigate to http://localhost:5173

Building for Production

npm run build
# or
yarn build

The built files will be in the dist/ directory, ready for deployment to any static hosting service.

🎯 Usage Guide

Initial Setup

1. Launch GitDocPro in your browser
2. Configure Git Provider:
   • Click on the settings/login button
   • Enter your GitLab instance URL (default: https://gitlab.com)
   • Provide your personal access token
   • Save the configuration

Creating a Personal Access Token

For GitLab:

1. Go to GitLab → User Settings → Access Tokens
2. Create a new token with these scopes:
   • api (full API access)
   • read_user (read user information)
   • read_repository (read repository content)
   • write_repository (write repository content)
3. Copy the token and paste it into GitDocPro

Working with Repositories

Repository List

• Browse: View all your accessible repositories
• Search: Use the search bar to find specific repositories
• Filter: Filter by visibility (public/private) or activity
• Quick Access: Click on any repository card to open it in the editor

File Management

• Navigation: Use the file tree to browse your repository structure
• Open Files: Click on any file to open it in the editor
• Create Files: Right-click in the file tree or use the "New File" button
• Folders: Expand/collapse folders to navigate large repositories

Branch Management

• Switch Branches: Use the branch selector in the repository header
• Create Branches: Create new branches directly from the interface
• Branch Info: See current branch status and commit information

Editor Features

Toolbar Functions

• Headings: H1, H2, H3 buttons for document structure
• Text Formatting: Bold, italic, strikethrough, inline code
• Lists: Bullet points and numbered lists
• Blockquotes: For highlighting important information
• Links: Insert and edit hyperlinks
• Images: Embed images with alt text
• Tables: Create and edit markdown tables
• Code Blocks: Syntax-highlighted code with language selection
• Horizontal Rules: Visual separators

Keyboard Shortcuts

• Ctrl/Cmd + B: Bold text
• Ctrl/Cmd + I: Italic text
• Ctrl/Cmd + K: Insert link
• Ctrl/Cmd + Shift + C: Inline code
• Ctrl/Cmd + Alt + 1-3: Headings H1-H3
• Ctrl/Cmd + S: Save file (auto-saves are also enabled)

🏗️ Architecture

Tech Stack

• Frontend Framework: Svelte 5 with TypeScript
• Build Tool: Vite for fast development and building
• Styling: Tailwind CSS for utility-first styling
• Editor: TipTap with multiple extensions for rich editing
• HTTP Client: Axios for API communications
• Routing: Svelte-routing for client-side navigation
• State Management: Svelte stores for reactive state

Project Structure

src/
├── components/          # Reusable UI components
├── pages/              # Page components and layouts
│   └── editor/         # Editor-specific components
├── services/           # Git provider integrations
├── stores/             # Application state management
├── utils/              # Utility functions and helpers
└── Router.svelte       # Application routing

Extensibility

The architecture is designed to be easily extensible:

• Git Providers: Add new providers by implementing the GitService interface
• Editor Extensions: TipTap's modular architecture allows easy feature additions
• Themes: Tailwind CSS makes theme customization straightforward
• Components: Svelte's component system enables easy UI extensions

🤝 Contributing

We welcome contributions! Here's how you can help:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Make your changes and test thoroughly
4. Commit your changes: git commit -m 'Add amazing feature'
5. Push to the branch: git push origin feature/amazing-feature
6. Open a Pull Request

Development Guidelines

• Follow TypeScript best practices
• Use Svelte conventions and patterns
• Maintain consistent code formatting
• Add tests for new features
• Update documentation as needed

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🔗 Links

• Chinese Documentation: README_CN.md
• Issue Tracker: GitHub Issues
• Discussions: GitHub Discussions

🙏 Acknowledgments

• Svelte - The amazing reactive framework
• TipTap - Extensible rich text editor
• Tailwind CSS - Utility-first CSS framework
• Vite - Next generation frontend tooling

Happy documenting! 🚀

Transform your repositories into beautiful documentation with GitDocPro.