feat: add docs for themes/extensions

api/01-getting-started.md

@@ -7,30 +7,25 @@ This guide provides an overview on the documentation structure and how to get st
 ## Documentation Structure
 
 The Phoenix Code API documentation is organized into sections for easy navigation. Here’s a quick overview of the key sections:
-### [Writing Extensions & Themes](writing-ext-themes)
 
-This page provides guidelines on how to create custom extensions and themes for Phoenix Code.
+### [Creating Themes](./creating-themes)
+This page provides guidelines on how to create custom Themes for **Phoenix Code**.
 
-    Key topics include:
+---
 
-        * [Creating an extension](writing-ext-themes/#creating-an-extension) 
-        * [Running and Debugging your extension](writing-ext-themes/#running-and-debugging-your-extension)
-        * [Publishing to the extension/theme store](writing-ext-themes/#publishing-to-the-extensiontheme-store)
-        * [Publishing legacy Brackets extensions](writing-ext-themes/#publishing-legacy-brackets-extensions)
-        * [FAQs](writing-ext-themes/#faq)
+### [Creating Extensions](./creating-extensions)
+This page provides guidelines on how to write Extensions for **Phoenix Code**.
 
 ---
 
-### [Available Standard Libraries](available-standard-libs)
+### [Publishing Themes/Extensions](./publishing-extensions)
+This page provides guidelines on how to publish Themes/Extensions to **Phoenix Code**.
 
-This page lists all the standard libraries that are available for use inside Phoenix Code.
+---
 
-    The libraries include:
+### [Available Standard Libraries](./available-standard-libs)
 
-        * [JQuery](available-standard-libs/#jquery)
-        * [Font-Awesome](available-standard-libs/#fontawesome)
-        * [DevIcon](available-standard-libs/#devicon)
-        * [File-Icons](available-standard-libs/#file-icons)
+This page lists all the standard libraries that are available for use inside **Phoenix Code**.
 
 ---
 

api/02-creating-themes.md

@@ -0,0 +1,82 @@
+---
+title: Creating Themes
+---
+
+import React from 'react';
+import VideoPlayer from '@site/src/components/Video/player';
+
+This document outlines how to create your own themes for **Phoenix Code**.
+
+## Follow these steps to create a new theme:
+
+### Step 1:
+Open this link [Theme-Template](https://github.com/phcode-dev/theme-template).
+This is the default Phoenix Code theme template repository.
+
+![Theme Template Repo Image](images/creating-themes/theme-template-repo.png "Phoenix Code Theme Template Repository")
+
+
+### Step 2:
+Use the template to create your repository.
+
+<VideoPlayer 
+  src="https://docs-images.phcode.dev/videos/creating-themes/template.mp4"
+/>
+
+
+### Step 3:
+Clone the repository you created in Step 2 to your local machine.
+
+Go to [https://create.phcode.dev](https://create.phcode.dev). This is a development-focused version of phcode.dev which shows non minified JS/CSS files in the browser developer tools.
+
+Now, open the cloned folder in `create.phcode.dev`. Refer to [this guide](https://docs.phcode.dev/docs/quick-start-project#open-folder) to see how to open a folder in Phoenix Code.
+
+![Cloned Repo Image](images/creating-themes/open-cloned-repo.png "Open the cloned repository")
+
+
+### Step 4:
+
+Now, go to `package.json` file and update the values accordingly. 
+
+Here is a quick reference :-
+
+| Field | Description |
+| --- | --- |
+| `title` | Replace "Name of the theme" with the actual title of your theme. |
+| `name` | Change `github-<owner>-<repo>` to your specific package name, formatted as `github-yourusername-repositoryname`. |
+| `description` | Update to a brief, relevant description about your theme. |
+| `version` | Start with "0.0.1" or update to reflect your current version following semantic versioning. |
+| `license` | Confirm "MIT" is suitable or specify another license, if necessary. |
+| `author` | Replace with your name and a link to your GitHub profile or another URL. |
+| `homepage` | Set to the URL of your project’s homepage or GitHub repository. |
+| `engines` | Ensure compatibility with the required Brackets version, e.g., ">=3.0.0". |
+| `categories` | Update "demo" with relevant categories that fit your theme. |
+| `keywords` | Update or append additional keywords that describe your theme. Example :- ‘dark-theme’, ‘aesthetic’, ‘blue’. |
+| `theme` | Make sure all necessary theme files and folders are included. Set “Dark” to `true` if its a dark theme, else `false`. |
+
+Save the file after making all the changes.
+
+
+### Step 5:
+
+Now, go to `my-theme.less` file.  Click on `Debug` in the Menu bar and select `Load Project As Extension`.
+
+![Debug Menu Image](images/creating-themes/debug-menu.png "Click on Debug > Load Project As Extension")
+
+This should be the default output. 
+
+![Default Theme Image](images/creating-themes/default-theme.png "Make changes in this theme")
+
+This file contains all the UI elements as variables. You can modify the colors as per your needs and live preview them.
+
+<VideoPlayer 
+  src="https://docs-images.phcode.dev/videos/creating-themes/change-colors.mp4"
+/>
+
+> You can also select `Debug > Reload Project As Extension` to test the new code changes.
+
+When you are done developing the theme, select `Debug > Unload Project As Extension` to unload the theme.
+
+Once the theme is complete, you can publish it to [phcode.dev](https://phcode.dev) extension repository. 
+
+Refer to [this link](./publishing-extensions) to see how to publish the theme.

api/03-creating-extensions.md

@@ -0,0 +1,41 @@
+---
+title: Creating Extensions
+---
+
+This document outlines how to write your own extensions for **Phoenix Code**.
+
+## How to create a new Extension
+Click on one of the links below and follow the instructions there to start:
+* [Create an Extension](https://github.com/phcode-dev/extension-template)
+* [Create a Node.js Extension](https://github.com/phcode-dev/extension-node-template)
+
+## API docs
+Please refer to the links below for extension API docs and code references.
+* Phoenix Code APIs - [API Reference](./API-Reference/NodeConnector)
+* Take a look at our default extensions for code reference -  [Default Extensions](https://github.com/phcode-dev/phoenix/tree/main/src/extensions/default)
+
+## Running and Debugging your Extension
+Follow the steps below to run and debug your extension:
+
+* Clone your extension repository onto the machine.
+
+* Go to [https://create.phcode.dev](https://create.phcode.dev). This is a development-focused version of phcode.dev which shows non minified JS/CSS files in the browser developer tools.
+
+* Now, open the cloned folder in `create.phcode.dev`. 
+> Refer to [this guide](https://docs.phcode.dev/docs/quick-start-project#open-folder) to see how to open a folder in Phoenix Code.
+* Select `Debug > Load Project As Extension`
+
+
+![Debug Menu Image](images/creating-themes/debug-menu.png "Click on Debug > Load Project As Extension")
+
+* The extension will be loaded in Phoenix Code.
+
+* You can now make code changes and live preview them. 
+
+> You can also select `Debug > Reload Project As Extension` to test the new code changes.
+
+* When you are done developing the extension, select `Debug > Unload Project As Extension` to unload the extension.
+
+**You can use the browser developer tools to debug the extension.**
+
+

api/04-publishing-extensions.md

@@ -0,0 +1,70 @@
+---
+title: Publishing Themes & Extensions
+---
+
+This document outlines how to publish your Extensions/Themes to Phoenix Code Extension store.
+
+## Publishing Extensions/Themes.
+Extensions created from the Phoenix Code extension/theme template can be easily published from your GitHub repository to the store.
+
+Follow these steps:
+
+1. Increment the `version` field in `package.json` file before publishing, if needed. 
+2. Compress the extension folder into a zip file with name `extension.zip`. 
+> **It is important to name the file as exactly `extension.zip`** 
+
+![Compress folder Image](./images/publishing-extensions/compress-to-zip.png "Compress the folder into a zip file")
+
+3. Create a new release in GitHub and attach the above `extension.zip` file in the release.
+   1. On GitHub.com, navigate to the main page of the repository.
+   2. To the right of the list of files, click `Releases`. 
+
+   ![Github Releases Image](./images/publishing-extensions/release-github.png "Click on Releases")
+
+   3. Click on `Draft a new release`.
+
+   ![Draft New Release Image](./images/publishing-extensions/draft-new-release.png "Click on Draft a new release")
+
+   4. Select `choose a tag` and type in your new extension version and `Create new tag`. 
+
+    ![Create New Tag](./images/publishing-extensions/create-new-tag.png "Click on Choose a tag > create new tag")
+
+   5. Fill out all the remaining fields.
+   6. Drag and drop the `extension.zip` file to the release.
+
+   ![Drag-Drop-Zip-File](./images/publishing-extensions/drag-drop.gif "Drag and drop the extension.zip file to release")
+
+   7. Click on `Publish release` button.
+   >    See Release Example: https://github.com/phcode-dev/extension-template/releases/tag/0.0.1
+4. You will get an issue in your issue tab regarding the publishing status of the extension/theme.
+   > See Example: https://github.com/phcode-dev/extension-template/issues/2
+5. If there are any errors in publishing, please visit the link in the issue to see the errors. Fix and `retry` publishing the release.
+
+    ![Publish Failed Image](./images/publishing-extensions/publish-failed.png "Publish Failed")
+
+6. Once published, your extension will appear in the Phoenix Code Extension Store at [https://phcode.dev](https://phcode.dev).
+
+    ![Extension Store Image](./images/publishing-extensions/extension-store.png "Phoenix Code Extension Store")
+
+## Publishing legacy Brackets extensions
+> Follow this section only for old brackets extensions.
+
+To publish Extensions/themes that are not created from the above [theme](https://github.com/phcode-dev/theme-template) and [extension](https://github.com/phcode-dev/extension-template) template
+or old Brackets extensions, please follow the steps below:
+
+1. Create a GitHub repository for your extension if it is not present.
+2. Create a file `.github/workflows/publishToPhcode.yml` in your repo with the following contents: https://github.com/phcode-dev/theme-template/blob/main/.github/workflows/publishToPhcode.yml
+
+That's all, you can now follow the above [Publishing to the extension/theme store](#publishing-to-the-extensiontheme-store) section.
+
+## FAQ
+### Why is my extension not being published?
+Your repository must be **public** to be able to be published to the Phoenix Code Extension store.
+See this link on [understanding how to change repository visibility](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/managing-repository-settings/setting-repository-visibility#changing-a-repositorys-visibility) to public in GitHub.
+
+### How can I get a Verified Badge for my extension?
+The `verified` extension badge(tick mark) will be automatically granted to verified GitHub Organizations.
+
+### How do I delete my extension from the store
+Please raise an issue here: https://github.com/phcode-dev/phoenix/issues/new/choose, mention your extension repository.
+