diff --git a/docs/07-Features/06-beautify-code.md b/docs/07-Features/01-beautify-code.md similarity index 100% rename from docs/07-Features/06-beautify-code.md rename to docs/07-Features/01-beautify-code.md diff --git a/docs/07-Features/07-editor-rulers.md b/docs/07-Features/02-editor-rulers.md similarity index 100% rename from docs/07-Features/07-editor-rulers.md rename to docs/07-Features/02-editor-rulers.md diff --git a/docs/07-Features/04-find-in-files.md b/docs/07-Features/03-find-in-files.md similarity index 100% rename from docs/07-Features/04-find-in-files.md rename to docs/07-Features/03-find-in-files.md diff --git a/docs/07-Features/05-keyboard-shortcuts.md b/docs/07-Features/04-keyboard-shortcuts.md similarity index 98% rename from docs/07-Features/05-keyboard-shortcuts.md rename to docs/07-Features/04-keyboard-shortcuts.md index 94633bac..9749a04b 100644 --- a/docs/07-Features/05-keyboard-shortcuts.md +++ b/docs/07-Features/04-keyboard-shortcuts.md @@ -1,4 +1,4 @@ -# Change Keyboard Shortcuts +# 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. diff --git a/docs/07-Features/01-live-preview.md b/docs/07-Features/05-Live Preview/01-live-preview.md similarity index 71% rename from docs/07-Features/01-live-preview.md rename to docs/07-Features/05-Live Preview/01-live-preview.md index 45c0f58f..b88c9c37 100644 --- a/docs/07-Features/01-live-preview.md +++ b/docs/07-Features/05-Live Preview/01-live-preview.md @@ -8,36 +8,36 @@ The Live Preview feature in Phoenix Code provides instant feedback on changes ma ## Activating Live Preview for HTML Files 1. Select the HTML file you wish to edit from the editing panel. - ![Open file](images/livePreview/open.png "Open the HTML file from the editing panel"). + ![Open file](../images/livePreview/open.png "Open the HTML file from the editing panel") 2. Click the lightning bolt icon, located on the right panel, to initiate Live Preview. - ![Lightning icon](images/livePreview/off.png "Initiate Live Preview by clicking the lightning icon"). + ![Lightning icon](../images/livePreview/off.png "Initiate Live Preview by clicking the lightning icon") 3. The icon turns gold when Live Preview is active. - ![Lightning icon active](images/livePreview/on.png) + ![Lightning icon active](../images/livePreview/on.png) View the side-by-side Live Preview alongside the code. - ![Live Preview active](images/livePreview/livepreviewon.png "Live Preview alongside code"). + ![Live Preview active](../images/livePreview/livepreviewon.png "Live Preview alongside code") ## Detaching Live Preview to a New Window 1. Hover over the Live Preview panel. 2. Click the pop-out icon to detach Live Preview into a new window. - ![Detaching to new window](images/livePreview/popout.png "Click to detach Live Preview to a new window"). + ![Detaching to new window](../images/livePreview/popout.png "Click to detach Live Preview to a new window") 3. Live Preview will now display in your default web browser, allowing for uninterrupted coding and viewing. ## Selecting a Browser for Live Preview 1. Hover over the Live Preview panel. -2. Choose your preferred browser by clicking its icon. ![Browser selected](images/livePreview/browser-choice.png "Live Preview in selected browser"). +2. Choose your preferred browser by clicking its icon. ![Browser selected](../images/livePreview/browser-choice.png "Live Preview in selected browser") 3. Live Preview opens in the chosen browser. ## Reload Live Preview -![Reload Live Preview](./images/livePreview/reload.png) +![Reload Live Preview](../images/livePreview/reload.png) The **Reload** button in the live preview toolbar allows you to manually refresh the Live Preview pane to ensure it reflects the latest changes in your code. While Live Preview updates automatically, the Reload button can be helpful if you encounter synchronization issues. ## Disable Live Preview You can disable the live preview panel at startup by following these steps: 1. Click the settings icon in the toolbar (hover over the toolbar to make it appear). -![Settings Icon](./images/livePreview/settings-gear.png) +![Settings Icon](../images/livePreview/settings-gear.png) 2. This will open the live preview settings menu: -![Settings menu](./images/livePreview/live-preview-settings-menu.png) +![Settings menu](../images/livePreview/live-preview-settings-menu.png) 3. Disable the `Show Live Preview Panel at Startup` option. diff --git a/docs/07-Features/02-live-preview-settings.md b/docs/07-Features/05-Live Preview/02-live-preview-settings.md similarity index 93% rename from docs/07-Features/02-live-preview-settings.md rename to docs/07-Features/05-Live Preview/02-live-preview-settings.md index 7611f47d..146bb7ed 100644 --- a/docs/07-Features/02-live-preview-settings.md +++ b/docs/07-Features/05-Live Preview/02-live-preview-settings.md @@ -9,14 +9,14 @@ There are two ways to access the Live Preview Settings dialog: 1. **From the File Menu**: - Navigate to the 'File' menu at the top left of the editor. - Select 'Live Preview Settings' from the dropdown. -![live-preview-settings](images/livePreview/settings-menu.png) +![live-preview-settings](../images/livePreview/settings-menu.png) 1. **From the Live Preview Panel**: - Locate the live preview panel, typically found at the right side of the editor. - Hover over the live preview panel title bar and click the gear icon (⚙️) located at the top right of the panel title bar. -![live-preview-settings](images/livePreview/settings-gear.png) +![live-preview-settings](../images/livePreview/settings-gear.png) ## Configuring Your Server -![settings-dialog](images/livePreview/settings-dialog.png) +![settings-dialog](../images/livePreview/settings-dialog.png) Within the Live Preview Settings dialog, you can configure the following options: diff --git a/docs/07-Features/03-php-live-preview.md b/docs/07-Features/05-Live Preview/03-php-live-preview.md similarity index 96% rename from docs/07-Features/03-php-live-preview.md rename to docs/07-Features/05-Live Preview/03-php-live-preview.md index 6f5b063e..1246714a 100644 --- a/docs/07-Features/03-php-live-preview.md +++ b/docs/07-Features/05-Live Preview/03-php-live-preview.md @@ -61,7 +61,7 @@ Setting up a live preview for PHP projects is straightforward with Apache and XA 6. Add the following settings to your custom live preview: -![Custom Live Preview Settings](images/phpLivePreview/phpCustomServer.png) +![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 diff --git a/docs/07-Features/12-Problems Panel/01-html-lint.md b/docs/07-Features/06-Problems Panel/01-html-lint.md similarity index 100% rename from docs/07-Features/12-Problems Panel/01-html-lint.md rename to docs/07-Features/06-Problems Panel/01-html-lint.md diff --git a/docs/07-Features/12-Problems Panel/02-ESLint.md b/docs/07-Features/06-Problems Panel/02-ESLint.md similarity index 100% rename from docs/07-Features/12-Problems Panel/02-ESLint.md rename to docs/07-Features/06-Problems Panel/02-ESLint.md diff --git a/docs/07-Features/08-quick-edit.md b/docs/07-Features/07-quick-edit.md similarity index 100% rename from docs/07-Features/08-quick-edit.md rename to docs/07-Features/07-quick-edit.md diff --git a/docs/07-Features/11-recent-files.md b/docs/07-Features/08-recent-files.md similarity index 90% rename from docs/07-Features/11-recent-files.md rename to docs/07-Features/08-recent-files.md index edcc4f21..99fe97ba 100644 --- a/docs/07-Features/11-recent-files.md +++ b/docs/07-Features/08-recent-files.md @@ -8,7 +8,7 @@ The Recent Files dialog box provides quick access to files you’ve recently wor * Desktop App: Press `Ctrl + R`. * Browser: Press `Ctrl + Alt + Shift + O` (as `Ctrl + R` is reserved for browser reloads). -To customize the keyboard shortcut, refer to [this docs](./05-keyboard-shortcuts.md#changing-a-keyboard-shortcut) +To customize the keyboard shortcut, refer to [this docs](./keyboard-shortcuts#changing-a-keyboard-shortcut) ## About Recent Files Dialog diff --git a/docs/07-Features/10-syntax-highlighting.md b/docs/07-Features/09-syntax-highlighting.md similarity index 98% rename from docs/07-Features/10-syntax-highlighting.md rename to docs/07-Features/09-syntax-highlighting.md index 316caf12..b8aa486e 100644 --- a/docs/07-Features/10-syntax-highlighting.md +++ b/docs/07-Features/09-syntax-highlighting.md @@ -32,7 +32,7 @@ Syntax Highlighting Example [Theme : `Monokai Dark Soda`] Syntax Highlighting Example [Theme : `Material Color Light`] ![Syntax Highlighting Material Color Light Theme Image](images/syntaxHighlighting/syntax-highlighting-material-color-light-theme.png "Syntax Highlighting by Material Color Light Theme") -To learn more about Themes. [Click Here](./09-themes.md) +To learn more about Themes. [Click Here](./themes) ## Add Syntax Highlighting for a Particular File Type diff --git a/docs/07-Features/09-themes.md b/docs/07-Features/10-themes.md similarity index 100% rename from docs/07-Features/09-themes.md rename to docs/07-Features/10-themes.md diff --git a/docs/07-Features/13-Git.md b/docs/07-Features/11-Git.md similarity index 100% rename from docs/07-Features/13-Git.md rename to docs/07-Features/11-Git.md