Okay, the following is a set of markdown files organized into folders ready to be dropped into a Docusaurus project. Assuming a docs folder at the root of the Docusaurus project. The sidebars.js will also need to be updated accordingly.
===== docs/index.md
---
sidebar_position: 1
---
# Welcome to Edit4i!
Edit4i is an AI-powered code editor designed to boost your productivity and help you write better code. This documentation will guide you through its features, shortcuts, and how to make the most of it.
**Key Features:**
* **AI Assistance:** Intelligent code completion, refactoring, and more (coming soon!).
* **Familiar Interface:** Built on Monaco, the same editor component as VS Code.
* **Vim Mode:** Full Vim keybinding support for efficient navigation and editing.
* **Git Integration:** Built-in Git support for easy version control.
* **Customizable:** Configure the editor to your liking.
* **Open Source:** Transparent, customizable, and community-driven.
Let's explore how to get started!===== docs/getting-started/installation.md
---
sidebar_position: 1
---
# Installation
Information on installation is available at the [root repo page](https://github.com/edit4i/editor)
===== docs/getting-started/projects.md
---
sidebar_position: 2
---
# Working with Projects
Edit4i provides a seamless project management experience.
## Recent Projects
The welcome screen displays your recent projects for quick access.
**Features:**
* **Quick Access:** Easily open recent projects from the welcome screen.
* **Project List:** A clear and organized view of your projects.===== docs/interface/overview.md
---
sidebar_position: 1
---
# Interface Overview
Edit4i's interface is designed for clarity and efficiency. Here's a breakdown of the key areas:
* **Editor Area:** The main area where you write and edit code.
* **File Explorer:** A tree view of your project's files and folders (left sidebar).
* **Git Pane:** Manage your Git repositories (bottom pane).
* **Terminal:** Execute commands directly within the editor (bottom pane).
* **Top Bar:** Contains menu options, project name, and other controls.
* **Bottom Bar:** Status information, Git branch, and quick actions.===== docs/interface/file-explorer.md
---
sidebar_position: 2
---
# File Explorer
The File Explorer (located in the left sidebar) allows you to browse and manage your project's files and folders.
**Features:**
* **Tree View:** A hierarchical representation of your project structure.
* **File Operations:** Create, rename, delete, and move files and folders.
* **Search:** Quickly find files by name.===== docs/interface/git.md
---
sidebar_position: 3
---
# Git Integration
Edit4i has built-in Git integration, allowing you to manage your repositories directly within the editor. This is accessible via the Git Pane in the bottom.
**Key Features:**
* **Status:** View the status of your Git repository (modified, staged, etc.).
* **Commit:** Commit changes with messages.
* **Push/Pull:** Sync your local repository with remote repositories.
* **Branching:** Create, switch, and merge branches.
* **Diffing:** View the differences between versions of your code.
**Git Pane Sections:**
* **Unstaged Changes:** Lists the files that have been modified but not yet staged for commit.
* **Staged Changes:** Lists the files that have been staged for commit.
* **Commit History** Shows list of past available commits===== docs/interface/terminal.md
---
sidebar_position: 4
---
# Integrated Terminal
Edit4i includes an integrated terminal, accessible from a pane at the bottom, allowing you to execute commands without leaving the editor.
**Features:**
* **Shell Access:** Access your system's shell directly.
* **Run Commands:** Execute commands, scripts, and more.
* **Debugging:** Debug your code within the terminal.===== docs/interface/panes.md
---
sidebar_position: 5
---
# Panes
Edit4i uses panes to organize different functionalities:
* **Bottom Pane:** Contains the Terminal and Git panes.
* **Left Sidebar:** Houses the File Explorer
* **Right Sidebar:** Houses the Git History
* **Top Bar:** For actions such as "Save All Files"
* **Bottom Bar:** git branch, encoding, spaces, and other small options
You can resize panes to adjust the layout to your needs.===== docs/editing/basics.md
---
sidebar_position: 1
---
# Basic Editing
Edit4i's editor area provides a rich coding experience.
**Features:**
* **Syntax Highlighting:** Code is automatically color-coded for readability.
* **Code Completion:** Suggestions for code completion.
* **Error Checking:** Real-time error detection.
* **Multi-Cursor Support:** Edit multiple lines simultaneously.===== docs/editing/vim-mode.md
---
sidebar_position: 2
---
# Vim Mode
Edit4i supports full Vim keybindings for efficient navigation and editing.
Enable it in Settings or `config.yaml`.
**Features:**
*All standard vim navigation commands
**Enabling Vim Mode:**
1. **Through config file:** Setting the `vim.enabled` attribute to `true`
2. **TBD: Through Settings Page** Setting the `vim.enabled` attribute to `true`===== docs/navigation/command-palette.md
---
sidebar_position: 1
---
# Command Palette
The Command Palette provides quick access to various editor commands.
**Accessing the Command Palette:**
* Press `Alt + J`
**Navigation:**
* Use `J` and `K` to move up and down the list of commands.
**Usage::**
* Begin typing to filter commands
* Press Enter to Execute the Command.===== docs/navigation/fuzzy-finder.md
---
sidebar_position: 2
---
# Fuzzy Finder
Use the Fuzzy Finder for fast file navigation within your project.
**Accessing the Fuzzy Finder:**
* Currently bound to CTRL+P
**Usage:**
* Type the name (or part of the name) of the file you're looking for.
* Select the file from the list and press Enter to open it.===== docs/configuration/settings.md
---
sidebar_position: 1
---
# Settings
Edit4i is highly customizable. You can configure it using the `config.yaml` file in `~/.edit4i/config.yaml` or configure it on the GUI. The GUI is not implemented yet.
```yaml
editor:
theme: "vs-dark" # or "vs-light", "hc-black"
fontSize: 14
tabSize: 2
tabType: "spaces" # or 'tab'
wordWrap: true
lineNumbers: true
minimap: true
vim:
enabled: true
defaultMode: "normal" # "normal", "insert", "visual"Editor Settings:
theme: The editor theme (e.g., "vs-dark", "vs-light", "hc-black").fontSize: The font size in pixels.tabSize: The number of spaces per tab.wordWrap: Enable or disable word wrap.lineNumbers: Show line number or nortabType: Select 'space vs 'tab'minimap: Show minimap or notvim.enabled: Enable or disable Vim mode.vim.defaultMode: Sets the default mode after opening a file.
===== docs/git/overview.md
```markdown
---
sidebar_position: 1
---
# Git Integration
Edit4i provides seamless Git integration directly within the editor. This allows you to manage your repositories, track changes, and collaborate with ease, all without leaving your coding environment. The GUI is in the bottom pane.
**Key Features:**
* **Visual Status:** Quickly see the status of your repository (modified, staged, committed).
* **Staging/Unstaging:** Easily stage and unstage changes for commits.
* **Commit History:** Browse the commit history of your repository.
* **Branch Management:** Create, switch, merge, and delete branches.
* **Diffing:** View the differences between file versions within the editor. This is available by clicking in the "Files" section and navigating to the desired file
===== docs/git/status.md
---
sidebar_position: 2
---
# Understanding Git Status
The Git integration in Edit4i visually represents the status of your repository. Understanding these statuses is crucial for effective version control.
**Common Git Statuses:**
* **Untracked:** Files that are new to the repository and not yet under version control.
* **Modified:** Files that have been changed since the last commit.
* **Staged:** Files that have been added to the staging area, ready to be committed.
* **Committed:** Changes that have been saved to the repository.
The Git Pane displays these statuses clearly, allowing you to quickly identify which files need attention.===== docs/git/staging.md
---
sidebar_position: 3
---
# Staging and Unstaging Changes
Before committing your changes, you need to stage them. Staging tells Git which changes you want to include in the next commit.
**Staging:**
* Select the files you want to stage in the "Unstaged Changes" section and press the "+" button.
* This moves the files to the "Staged Changes" section.
**Unstaging:**
* Select the files you want to unstage in the "Staged Changes" section and press the "-" button.
* This moves the files back to the "Unstaged Changes" section.===== docs/git/committing.md
---
sidebar_position: 4
---
# Committing Changes
Committing saves your staged changes to the repository along with a descriptive message.
**How to Commit:**
1. Ensure all desired changes are staged.
2. Enter a clear and concise commit message describing the changes you made.
3. Click the "Commit" button to save the changes to the local repository.
**Commit Message Guidelines:**
* Use a short, descriptive subject line (50 characters or less).
* Optionally, add a more detailed body explaining the "why" behind the changes.
* Be clear and concise to help other developers understand your work.===== docs/git/branching.md
---
sidebar_position: 5
---
# Branch Management
Branching allows you to work on different features or fixes in isolation without affecting the main codebase.
**Key Branching Operations:**
* **Creating a Branch:** Opens a GUI popup called branch palette
* **Switching Branches:** Opens a GUI popup called branch palette
* **Merging Branches:** (merge button TBD)
* **Deleting Branches:** (delete button TBD)
Branches ahow up in the `bottom bar`.===== docs/git/diffing.md
---
sidebar_position: 6
---
# Viewing Diffs
Edit4i allows you to easily view the differences between file versions.
**How to View Diffs:**
1. In the "Files" section there's one file for each modified and unstaged code.
2. Click one modified file and look in the git diff view.
3. Git diff views shows the additions and deletions.===== docs/git/push-pull.md
---
sidebar_position: 7
---
# Pushing and Pulling
Pushing and pulling synchronize your local repository with remote repositories.
**Pushing:**
* Uploads your local commits to a remote repository.
* Use the "Push" button from the tool bar.
**Pulling:**
* Downloads changes from a remote repository to your local repository.
* Use the "Pull" button from the tool bar.
**Note:** Be sure the repository to be pushed/pulled is at the appropriate remote config in the `.git`config`file`===== docs/git/command-palette.md
---
sidebar_position: 8
---
# Git Commands via Command Palette
Edit4i's Command Palette provides a quick and efficient way to execute Git commands directly from within the editor. This is especially useful for users who prefer keyboard shortcuts and don't want to navigate through menus.
**Accessing the Command Palette:**
* Press `Alt + J`
**How to Use Git Commands:**
1. Open the Command Palette (`Alt + J`).
2. Type `git ` followed by the command you want to execute (e.g., `git commit`, `git push`,`gb checkout` etc.) you can also start typing without the `git `, the Command Palette recognizes they are git commands and shows them anyway.
3. The Command Palette will display a list of matching Git commands.
4. Select the desired command using the up/down arrow keys or by continuing to type to refine the search.
5. Press `Enter` to execute the selected command.
**Examples of Useful Git Commands in the Command Palette:**
* `git commit`: Commit staged changes.
* `git push`: Push local commits to a remote repository.
* `git pull`: Pull changes from a remote repository.
* `git checkout`: Switch to another branch..
* `git status`: Check current git status
* `git add`: Add changes to the stagging area
**Benefits of Using the Command Palette**
* **Faster Workflow:** Execute commands quickly without reaching for the mouse.
* **Discoverability:** Easily find and learn new Git commands.
* **Keyboard-centric:** Ideal for users who prefer working primarily with the keyboard.===== docs/navigation/command-palette-tool.md
---
sidebar_position: 3
---
# Command Palette: Your All-in-One Tool
The Command Palette in Edit4i is a powerful and versatile tool that lets you quickly access almost all the features of the editor, discover new functionalities, and speed up your workflow using just your keyboard. Think of it as a search bar for everything you can *do* in Edit4i.
**Accessing the Command Palette:**
* Press `Alt + J`
**What can you do with the Command Palette?**
* **Execute Commands:** Run any built-in editor command, from saving a file to changing the theme.
* **Open Files:** Quickly find and open project files by typing their name (similar to the Fuzzy Finder, but integrated into the Command Palette).
* **Git commands:** Run any git based command such as push, pull, branch etc
* **Search Settings:** Access and modify editor settings.
* **More Features to Come:** As Edit4i evolves, the Command Palette will become even more powerful, giving you access to AI-powered features and other advanced functionalities.
**How to use the Command Palette**
1. **Invoke:** Press `Alt + J` to bring up the Command Palette.
2. **Type:** Start typing what you want to do. The Command Palette will dynamically filter the list of available commands based on your input. The search is "fuzzy," so you don't need to type the exact command name.
3. **Navigate:** Use the `J` (down) and `K` (up) keys to move through the list of results.
4. **Execute:** Press `Enter` to execute the selected command. You can also click the desired item with your mouse.
**Tips for Using the Command Palette Efficiently**
* **Learn Key Commands:** Memorize the names of the commands you use most often to speed up your workflow.
* **Use Aliases:** If a command name is long, look for shorter aliases in the Command Palette description.
* **Explore:** Experiment with the Command Palette to discover new features and commands you didn't know existed.
**Example Use Cases**
* **Quickly change the editor theme:** Open the Command Palette, type "theme," and select a new theme from the list.
* **Save all open files:** Open the Command Palette, type "save all," and press enter.
* **Find a specific setting:** Open the Command Palette, type the setting name (e.g., "font size"), and jump directly to the relevant settings panel (functionality TBD).
* **Execute a Git command:** As described in the Git Command Palette documentation, type `git commit`, 'git push' and so on
The Command Palette in Edit4i is more than just a list of commands; it's an efficient tool for accessing the full power of your editor and customizing it to fit your needs.===== sidebars.js
module.exports = {
tutorialSidebar: [
{
type: 'category',
label: 'Getting Started',
items: [
'getting-started/installation',
'getting-started/projects',
],
},
{
type: 'category',
label: 'Interface',
items: [
'interface/overview',
'interface/file-explorer',
'interface/git',
'interface/terminal',
'interface/panes',
],
},
{
type: 'category',
label: 'Editing',
items: [
'editing/basics',
'editing/vim-mode',
],
},
{
type: 'category',
label: 'Navigation',
items: [
'navigation/command-palette',
'navigation/fuzzy-finder',
'navigation/command-palette-tool',
],
},
{
type: 'category',
label: 'Configuration',
items: [
'configuration/settings',
],
},
{
type: 'category',
label: 'Git',
items: [
'git/overview',
'git/status',
'git/staging',
'git/committing',
'git/branching',
'git/diffing',
'git/push-pull',
'git/command-palette',
],
},
],
};Important considerations:
- Image Paths: You will likely need to update the
![Recent Projects]and![Source Control]image paths in the markdown files to reflect the correct location of these images within your Docusaurus project. Place them within the/static/img/folder, and update the links accordingly (e.g.,). - TBD (To Be Determined): Sections marked "TBD" should be updated with the proper details once they are implemented.
- Customization: This is a basic framework; expand on these pages with real information.
- Testing: After adding files verify the installation to see how the documentation is displaying.
- Keep your documentation up with the editor roadmap