Refactor documentation site

api/01-getting-started.md

@@ -18,13 +18,22 @@ This page provides guidelines on how to write Extensions for **Phoenix Code**.
 
 ---
 
-### [Publishing Themes/Extensions](./publishing-extensions)
+### [Use Node.js from extension](./creating-node-extensions)
+This page explains how to use Node.js inside **Phoenix Code** extensions.
+
+---
+
+### [Debugging Extensions](./debugging-extensions)
+This page provides a detailed guide on efficiently debugging your **Phoenix Code** extensions.
+
+---
+
+### [Publishing Themes & Extensions](./publishing-extensions)
 This page provides guidelines on how to publish Themes/Extensions to **Phoenix Code**.
 
 ---
 
 ### [Available Standard Libraries](./available-standard-libs)
-
 This page lists all the standard libraries that are available for use inside **Phoenix Code**.
 
 ---

api/05-debugging-extensions.md

@@ -1,5 +1,5 @@
 ---
-title: Debugging Extensions in Phoenix Code
+title: Debugging Extensions
 ---
 
 The Debug menu provides several options for extension development. 

api/08-How-To/Menus.md

@@ -178,10 +178,10 @@ To position the menu item before or after any item, use
 
 ```jsx
 // second parameter is for keyboard shortcut. Empty string means no shortcut.
-menu.addMenuItem(MY_COMMAND_ID, "", "before", "file.saveAs");
+menu.addMenuItem(MY_COMMAND_ID, "",  Menus.BEFORE, Commands.FILE_SAVE_AS);
 ```
 
-- Third parameter must specify “before” or “after” the item should be set.
+- Third parameter must specify `BEFORE` or `AFTER` the item should be set.
 - Fourth parameter must specify the “relativeID” of the menu item to set the position.
 
 ![Menu Item before/after](./images/menu-item-before-after.png)

docs/03-editing-text.md

@@ -9,6 +9,30 @@ This section provides an overview of the core text and code editing features in
 
 ---
 
+## Emmet
+**Coming Soon...**
+
+### Emmet in Markup Languages
+In **HTML**, **PHP** or HTML-like files such as **JSP**, when you type a valid Emmet abbreviation (for example: `ul>li`, `p`, or `!`), **Phoenix Code** displays a code hint with the abbreviation text and an Emmet icon. This icon indicates that the suggestion comes from Emmet. When you select the Emmet hint, the abbreviation is expanded into its full code snippet.
+<VideoPlayer 
+  src="https://docs-images.phcode.dev/videos/editing-text/emmet-html.mp4"
+/>
+
+### Emmet in Stylesheet Languages
+Emmet also works in stylesheets (CSS, SCSS, Less). When you type an Emmet-expandable property, a list of default code hints appears with the Emmet suggestion at the top.
+<VideoPlayer 
+  src="https://docs-images.phcode.dev/videos/editing-text/emmet-css.mp4"
+/>
+
+### Enabling/Disabling Emmet
+To enable or disable the **Emmet** feature, go to `Edit` > `Emmet`.
+
+![Toggle Emmet feature](./images/editingText/toggle-emmet.png "Toggle Emmet")
+
+Alternatively, you can also toggle the **Emmet** feature by updating the `emmet` property in the preferences file. [Click Here](#editing-preferences) to read on how to edit the preferences.
+
+---
+
 ## Multi Cursor
 Using **Multi-Cursor**, you can place multiple cursors in different locations, allowing you to edit text simultaneously. This feature is especially useful for making quick, consistent changes across multiple lines or sections of a file.
 

docs/04-editing-colors.md

@@ -68,4 +68,19 @@ Clicking a color in the gutter moves the cursor to its position in the editor an
 
 ### Enabling/Disabling Color Preview
 
-You can enable/disable the feature by updating the `colorPreview` property in the preferences file. [Click Here](./03-editing-text.md#editing-preferences) to read on how to edit the preferences.
+You can enable/disable the feature by updating the `colorPreview` property in the preferences file. [Click Here](./03-editing-text.md#editing-preferences) to read on how to edit the preferences.
+
+---
+
+## Color Hints
+After typing a color related property, **Phoenix Code** displays a list of color suggestions.  
+![Color Hints](./images/editingColors/colorHints.png "Color Hints")
+
+### Previous Color Suggestions
+**(Coming Soon...)**  
+
+If a file already contains colors (named colors, hex, or RGB values), **Phoenix Code** prioritizes those colors in the hint list. Colors are sorted in **descending order** based on their usage count in the file.  
+
+![Previously Used Colors](./images/editingColors/previously-used-colors.png "Previously Used Colors")
+
+> This helps in reusing frequently used colors without manually searching for them.  

docs/06-popular-extensions.md

@@ -4,17 +4,6 @@ title: Popular Extensions
 
 This document provides an overview of the most popular extensions available for Phoenix Code.
 
-## Emmet
-Created by: [Emmet.io](https://emmet.io)
-
-Emmet speeds up HTML and CSS coding by allowing you to write shortcuts that expand into full code snippets.
-
-For more details, visit the [website of Emmet](https://emmet.io/).
-
-`Emmet` in action :-
-![Emmet](./images/popular-extensions/emmet.gif)
-
-
 
 ## Minimap
 Created by: [Zorgzerg](https://github.com/zorgzerg)