feat: php live preview

docs/03-Features/03-php-live-preview.md

@@ -0,0 +1,71 @@
+---
+title: PHP Live Preview Setup
+---
+
+import React from 'react';
+import VideoPlayer from '@site/src/components/Video/player';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+Setting up a live preview for PHP projects is straightforward with Apache and XAMPP. Below are the installation and configuration steps for each operating system:
+
+<Tabs
+  defaultValue="windows"
+  values={[
+    {label: 'Windows', value: 'windows'},
+    {label: 'Linux', value: 'linux'},
+    {label: 'macOS', value: 'macos'},
+  ]}>
+
+<TabItem value="windows">
+### Steps for Windows
+1. Download and install XAMPP from [Apache Friends](https://www.apachefriends.org/).
+2. Open the XAMPP Control Panel.
+3. Modify the `httpd.conf` file located at `C:\xampp\apache\conf\httpd.conf`:
+   ```
+   DocumentRoot "C:/path/to/your/project"
+   <Directory "C:/path/to/your/project">
+   </Directory>
+   ```
+4. Save the updated configuration.
+5. Restart the Apache server through the XAMPP Control Panel.
+</TabItem>
+
+<TabItem value="linux">
+### Steps for Linux
+1. Download and install XAMPP from [Apache Friends](https://www.apachefriends.org/).
+2. Open the XAMPP Control Panel by running `sudo /opt/lampp/lampp start` in your terminal.
+3. Modify the `httpd.conf` file located at `/opt/lampp/etc/httpd.conf`:
+   ```
+   DocumentRoot "/path/to/your/project"
+   <Directory "/path/to/your/project">
+   </Directory>
+   ```
+4. Save the updated configuration.
+5. Restart the Apache server through the XAMPP Control Panel.
+</TabItem>
+
+<TabItem value="macos">
+### Steps for macOS
+1. Download and install XAMPP from [Apache Friends](https://www.apachefriends.org/).
+2. Open the XAMPP manager from your Applications folder.
+3. Modify the `httpd.conf` file located at `/Applications/XAMPP/xamppfiles/etc/httpd.conf`:
+   ```
+   DocumentRoot "/path/to/your/project"
+   <Directory "/path/to/your/project">
+   </Directory>
+   ```
+4. Save the updated configuration.
+5. Restart the Apache server through the XAMPP Control Panel.
+</TabItem>
+
+</Tabs>
+6. Add the following settings to your custom live preview:
+![Custom Live Preview Settings](images/phpLivePreview/phpCustomServer.png)
+Your live preview should now automatically update to reflect changes whenever PHP files are edited.
+
+## PHP Live Preview in Action
+
+<VideoPlayer 
+  src="https://docs-images.phcode.dev/videos/phplp/phplivepreview.mp4"
+/>

docs/03-Features/04-find-in-files.md

@@ -0,0 +1,58 @@
+# Find In Files
+
+The Find in Files feature in Phoenix Code is a powerful tool to quickly search for specific text across multiple files within a project. This feature is useful for developers working on large codebases to find references, variable names, or specific lines of code.
+
+To search across your project files, use `Ctrl-Shift-F` on Windows/Linux or `Cmd-Shift-F` on Mac, or select `Find > Find in Files` from the menu. This feature searches for your term throughout the project's files and displays each occurrence with its file name, line number, and a snippet of the code for context.
+
+![Alt text](images/find/fif.png)
+
+## Searching Within a Folder
+
+To search within a specific folder in Phoenix:
+
+1. Right-click on the folder in the Files panel where you want to perform the search.
+1. From the context menu that appears, select "Find in...".
+
+  ![Alt text](images/find/folder.png)
+
+3. The find bar will now appear with search restricted to that folder (See `in y/` in the below image).
+
+  ![Alt text](images/find/inFolder.png)
+
+## Using File Filters
+
+By default, Find in Files searches all files in your project folder. You can exclude or include files, file types, whole folders, or other patterns:
+
+* Click the "No Files Excluded" dropdown from the search bar.
+
+  ![Alt text](images/find/new-exclusion.png)
+
+Phoenix Code allows you to specify which files and folders should be excluded or included during project searches.
+
+### For searching only within files matching pattern
+
+When you select `Search in files` option from the above dropdown, the filter will search only within files and folders that match the entered patterns. Entering `*.json,*.css` will include only JSON and css files in your search results, or just enter `json` to select any files having charecters `json` in its path. See more patterns below.
+
+![Alt text](images/find/search_in_files.png)
+
+### For Excluding files
+
+When you select `Exclude files` option from the above dropdown, the filter will ignore files and folders that match the patterns you enter. For instance, typing `*.json` in the text area will exclude all JSON files from your search results. See more patterns below.
+
+## The filter pattern
+
+This section describes the format of the exclusion/search within files glob pattern.
+
+1. Each pattern should be entered as a comma seperated text. You can specify multiple patterns:
+   ```txt
+   *.js,*.json
+   ```
+1. To fuzzy search, just enter text. Eg. entering `css` will match all filenames that has the letters `css` in its path name like `x/st.css` and `cssFile.md`.
+1. To match all JavaScript files in any directory, use `*.js`. This matches files like `a/b/x.js` and `xyz.js`.
+1. To match JavaScript files only in the project root, use `./*.js`. This matches `x.js` in the root but not `y/x.js` in a subdirectory.
+1. To match css files only in a folder `search/folder`, use `search/folder/*.css`. This matches `search/folder/x.css` but not `y/x.css`.
+1. `?.js` will match only `a/b/x.js` and not `xyx.js`
+1. `**/some_folder/**` will match `some_folder` anywhere.
+1. `[]` to declare a range of characters to match (`example.[0-9]` to match on `example.0`, `example.1`, …)
+1. To search for files names with `,` in it, use escape char `\`. Eg. To match a file with name `hello,world.js`, the filter string to use is `hello\,world.js`.
+1. More complex glob patterns can be provided. See: https://www.malikbrowne.com/blog/a-beginners-guide-glob-patterns/

docs/03-Features/05-keyboard-shortcuts.md

@@ -0,0 +1,57 @@
+# Change Keyboard Shortcuts
+
+Now you can make your own shortcuts for any menu, so you don't have to memorize a bunch of different ones for every app. It's like customizing your game controls to play your way!
+This feature is accessible in two ways: via the menu items or through the Keyboard Shortcuts panel.
+
+## Accessing Change Keyboard Shortcut Feature
+
+### Via Menu Items
+
+![Screenshot from 2024-02-08 11-04-46](https://github.com/phcode-dev/phoenix/assets/5336369/2562d248-2fd5-4a92-97a8-cdd708c78c7f)
+
+- Navigate to any main menu (e.g., File, Edit, View).
+- Hover over the menu item for which you want to change the shortcut.
+- An icon resembling a keyboard will appear to the right of the menu item.
+- Click this icon to open the Change Keyboard Shortcut dialog.
+
+### Via Keyboard Shortcuts Panel
+
+![Keyboard shortcuts panel](images/keyboard/menu.png)
+
+- Open the Keyboard Shortcuts panel by selecting `Keyboard Shortcuts...` from the `File` menu.
+- The panel displays a list of all available commands with their associated shortcuts.
+- Locate the command for which you want to change the shortcut.
+- Double-click on the shortcut, or click the command and then the `Change Keyboard Shortcut` button that appears.
+
+![alt text](images/keyboard/panel.png)
+
+## Changing a Keyboard Shortcut
+
+![image](https://github.com/phcode-dev/phoenix/assets/5336369/2028e67f-bdc9-41f2-877c-bef08f8e7743)
+
+1. **Initiating the Change**:
+   - When you initiate a change through either method mentioned above, a dialog box will appear prompting you to press the new key combination for the command.
+
+2. **Pressing the New Combination**:
+   - Press the keys for your new desired shortcut.
+   - If the combination is already assigned to another command, you will be notified and given the option to choose another combination or to overwrite the existing one by pressing `Assign`.
+
+![assign shortcut](images/keyboard/assign.png)
+
+3. **Confirmation**:
+   - After pressing the desired combination, if it is free, it will be set immediately.
+
+4. **Removing a Shortcut**:
+   - If you wish to remove a shortcut altogether, you may have the option to click a 'Remove' button in the Change Keyboard Shortcut dialog, which unbinds the current shortcut from the command.
+
+5. **Cancellation**:
+   - If you change your mind, you can cancel the operation by clicking the 'Cancel' button, closing the dialog, or pressing the 'Escape' key.
+
+## Resetting Shortcuts
+
+![reset](images/keyboard/reset.png)
+Users can reset all shortcuts to factory defaults using the 'Reset' button in the Keyboard Shortcuts panel.
+
+## Additional Notes
+
+- **Persistence**: Changes to keyboard shortcuts are saved automatically and will persist across sessions.

docs/03-Features/06-editor-rulers.md

@@ -0,0 +1,45 @@
+# Editor Rulers
+
+Add vertical column rulers to the editor to keep track of line lengths. By
+default, a single ruler is set at the 120-character position.
+
+### Enabling and Disabling Rulers
+
+Toggle the visibility of rulers through the `View > Rulers` menu option.
+
+![Screenshot from 2024-04-27 12-42-50](https://github.com/phcode-dev/phoenix/assets/5336369/bb68fafa-395c-4da6-8aa2-a617918286ce)
+
+## Adding Multiple Rulers
+
+To add multiple rulers, edit the preferences file:
+
+1. Navigate to `File > Open Preferences File`.
+1. Add the following entries to the JSON configuration:
+
+```js
+{
+    // existing json items
+    "editor.rulers": [40, 80],
+    "editor.rulerColors": ["green", "#f34d5a"],
+}
+```
+
+These settings introduce two rulers at the 40th and 80th character positions,
+colored green and red respectively.
+
+![image](https://github.com/phcode-dev/phoenix/assets/5336369/71b8b04c-d2ca-47b8-84bb-53cd0fb4593c)
+
+#### Configuration Options
+
+1. `editor.rulers` : Specifies an array of column numbers where vertical rulers
+   will appear.
+1. `editor.rulerColors` : An optional array to set colors for each ruler,
+   corresponding to the positions listed in `editor.rulers`.
+
+## FAQ
+
+#### Q: How do I add different rulers for each project?
+
+To set up different rulers for individual projects, create a `.phcode.json` file
+in the root directory of each project. Include the same ruler configurations as
+shown in the example above.

docs/03-Features/07-quick-edit.md

@@ -0,0 +1,43 @@
+---
+title: Quick Edit
+---
+
+import React from 'react';
+import VideoPlayer from '@site/src/components/Video/player';
+
+The Quick Edit feature in Phoenix Code allows you to edit CSS files directly within HTML files. This integration helps you focus on one file at a time, reducing distractions. Using Quick Edit with the Live Preview function provides immediate feedback on your changes, allowing you to adjust your CSS efficiently.
+
+## How to Use Quick Edit
+
+Follow these steps to use the Quick Edit feature:
+
+1. **Position the Cursor**:
+   Place the cursor where you need to start Quick Edit in the HTML file.
+
+   ![Position the cursor for Quick Edit](images/QuickEdit/quickedit.png "Position the cursor at the desired HTML element")
+
+2. **Access Quick Edit**:
+   You can access Quick Edit in one of three ways:
+   - **Keyboard Shortcut**: Press `Ctrl + E` (Windows/Linux) or `Cmd + E` (Mac).
+   - **Mouse Shortcut**: Combine `Ctrl + click` (Windows/Linux) or `Cmd + click` (Mac).
+   - **Context Menu**: Right-click to open the context menu and choose Quick Edit.
+
+   ![Access Quick Edit from the context menu or using a shortcut](images/QuickEdit/quickeditcontext.png "Choose any method to open the Quick Edit menu")
+
+3. **Edit CSS**:
+   The Quick Edit window will appear, showing the CSS related to your selected HTML element.
+
+   ![The Quick Edit window](images/QuickEdit/quickeditPanel.png "Make CSS adjustments directly related to the selected element")
+
+4. **Save and Close**:
+   After you've made the necessary changes, save your edits and close the Quick Edit window to continue your work.
+
+## Visual Demonstration
+
+Watch the video below to see the Quick Edit feature in action:
+
+<VideoPlayer 
+  src="https://docs-images.phcode.dev/videos/quick-edit/quick_edit.mp4"
+  winLinuxTitle="Quick Edit Access: Ctrl+click / Ctrl+E"
+  macTitle="Quick Edit Access: Cmd+click / Cmd+E"
+/>