Skip to content

Commit 43b561e

Browse files
devvaannshabose
devvaannsh
authored and
abose
committed
feat: add docs for themes/extensions
1 parent 69cd76b commit 43b561e

6 files changed

+203
-105
lines changed

‎api/01-getting-started.md

Lines changed: 10 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,30 +7,25 @@ This guide provides an overview on the documentation structure and how to get st
77
## Documentation Structure
88

99
The Phoenix Code API documentation is organized into sections for easy navigation. Here’s a quick overview of the key sections:
10-
### [Writing Extensions & Themes](writing-ext-themes)
1110

12-
This page provides guidelines on how to create custom extensions and themes for Phoenix Code.
11+
### [Creating Themes](./creating-themes)
12+
This page provides guidelines on how to create custom Themes for **Phoenix Code**.
1313

14-
Key topics include:
14+
---
1515

16-
* [Creating an extension](writing-ext-themes/#creating-an-extension)
17-
* [Running and Debugging your extension](writing-ext-themes/#running-and-debugging-your-extension)
18-
* [Publishing to the extension/theme store](writing-ext-themes/#publishing-to-the-extensiontheme-store)
19-
* [Publishing legacy Brackets extensions](writing-ext-themes/#publishing-legacy-brackets-extensions)
20-
* [FAQs](writing-ext-themes/#faq)
16+
### [Creating Extensions](./creating-extensions)
17+
This page provides guidelines on how to write Extensions for **Phoenix Code**.
2118

2219
---
2320

24-
### [Available Standard Libraries](available-standard-libs)
21+
### [Publishing Themes/Extensions](./publishing-extensions)
22+
This page provides guidelines on how to publish Themes/Extensions to **Phoenix Code**.
2523

26-
This page lists all the standard libraries that are available for use inside Phoenix Code.
24+
---
2725

28-
The libraries include:
26+
### [Available Standard Libraries](./available-standard-libs)
2927

30-
* [JQuery](available-standard-libs/#jquery)
31-
* [Font-Awesome](available-standard-libs/#fontawesome)
32-
* [DevIcon](available-standard-libs/#devicon)
33-
* [File-Icons](available-standard-libs/#file-icons)
28+
This page lists all the standard libraries that are available for use inside **Phoenix Code**.
3429

3530
---
3631

‎api/02-creating-themes.md

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
---
2+
title: Creating Themes
3+
---
4+
5+
import React from 'react';
6+
import VideoPlayer from '@site/src/components/Video/player';
7+
8+
This document outlines how to create your own themes for **Phoenix Code**.
9+
10+
## Follow these steps to create a new theme:
11+
12+
### Step 1:
13+
Open this link [Theme-Template](https://github.com/phcode-dev/theme-template).
14+
This is the default Phoenix Code theme template repository.
15+
16+
![Theme Template Repo Image](images/creating-themes/theme-template-repo.png "Phoenix Code Theme Template Repository")
17+
18+
19+
### Step 2:
20+
Use the template to create your repository.
21+
22+
<VideoPlayer
23+
src="https://docs-images.phcode.dev/videos/creating-themes/template.mp4"
24+
/>
25+
26+
27+
### Step 3:
28+
Clone the repository you created in Step 2 to your local machine.
29+
30+
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.
31+
32+
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.
33+
34+
![Cloned Repo Image](images/creating-themes/open-cloned-repo.png "Open the cloned repository")
35+
36+
37+
### Step 4:
38+
39+
Now, go to `package.json` file and update the values accordingly.
40+
41+
Here is a quick reference :-
42+
43+
| Field | Description |
44+
| --- | --- |
45+
| `title` | Replace "Name of the theme" with the actual title of your theme. |
46+
| `name` | Change `github-<owner>-<repo>` to your specific package name, formatted as `github-yourusername-repositoryname`. |
47+
| `description` | Update to a brief, relevant description about your theme. |
48+
| `version` | Start with "0.0.1" or update to reflect your current version following semantic versioning. |
49+
| `license` | Confirm "MIT" is suitable or specify another license, if necessary. |
50+
| `author` | Replace with your name and a link to your GitHub profile or another URL. |
51+
| `homepage` | Set to the URL of your project’s homepage or GitHub repository. |
52+
| `engines` | Ensure compatibility with the required Brackets version, e.g., ">=3.0.0". |
53+
| `categories` | Update "demo" with relevant categories that fit your theme. |
54+
| `keywords` | Update or append additional keywords that describe your theme. Example :- ‘dark-theme’, ‘aesthetic’, ‘blue’. |
55+
| `theme` | Make sure all necessary theme files and folders are included. Set “Dark” to `true` if its a dark theme, else `false`. |
56+
57+
Save the file after making all the changes.
58+
59+
60+
### Step 5:
61+
62+
Now, go to `my-theme.less` file. Click on `Debug` in the Menu bar and select `Load Project As Extension`.
63+
64+
![Debug Menu Image](images/creating-themes/debug-menu.png "Click on Debug > Load Project As Extension")
65+
66+
This should be the default output.
67+
68+
![Default Theme Image](images/creating-themes/default-theme.png "Make changes in this theme")
69+
70+
This file contains all the UI elements as variables. You can modify the colors as per your needs and live preview them.
71+
72+
<VideoPlayer
73+
src="https://docs-images.phcode.dev/videos/creating-themes/change-colors.mp4"
74+
/>
75+
76+
> You can also select `Debug > Reload Project As Extension` to test the new code changes.
77+
78+
When you are done developing the theme, select `Debug > Unload Project As Extension` to unload the theme.
79+
80+
Once the theme is complete, you can publish it to [phcode.dev](https://phcode.dev) extension repository.
81+
82+
Refer to [this link](./publishing-extensions) to see how to publish the theme.

‎api/02-writing-ext-themes.md

Lines changed: 0 additions & 90 deletions
This file was deleted.

‎api/03-creating-extensions.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
title: Creating Extensions
3+
---
4+
5+
This document outlines how to write your own extensions for **Phoenix Code**.
6+
7+
## How to create a new Extension
8+
Click on one of the links below and follow the instructions there to start:
9+
* [Create an Extension](https://github.com/phcode-dev/extension-template)
10+
* [Create a Node.js Extension](https://github.com/phcode-dev/extension-node-template)
11+
12+
## API docs
13+
Please refer to the links below for extension API docs and code references.
14+
* Phoenix Code APIs - [API Reference](./API-Reference/NodeConnector)
15+
* Take a look at our default extensions for code reference - [Default Extensions](https://github.com/phcode-dev/phoenix/tree/main/src/extensions/default)
16+
17+
## Running and Debugging your Extension
18+
Follow the steps below to run and debug your extension:
19+
20+
* Clone your extension repository onto the machine.
21+
22+
* 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.
23+
24+
* Now, open the cloned folder in `create.phcode.dev`.
25+
> Refer to [this guide](https://docs.phcode.dev/docs/quick-start-project#open-folder) to see how to open a folder in Phoenix Code.
26+
* Select `Debug > Load Project As Extension`
27+
28+
29+
![Debug Menu Image](images/creating-themes/debug-menu.png "Click on Debug > Load Project As Extension")
30+
31+
* The extension will be loaded in Phoenix Code.
32+
33+
* You can now make code changes and live preview them.
34+
35+
> You can also select `Debug > Reload Project As Extension` to test the new code changes.
36+
37+
* When you are done developing the extension, select `Debug > Unload Project As Extension` to unload the extension.
38+
39+
**You can use the browser developer tools to debug the extension.**
40+
41+

‎api/04-publishing-extensions.md

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
---
2+
title: Publishing Themes & Extensions
3+
---
4+
5+
This document outlines how to publish your Extensions/Themes to Phoenix Code Extension store.
6+
7+
## Publishing Extensions/Themes.
8+
Extensions created from the Phoenix Code extension/theme template can be easily published from your GitHub repository to the store.
9+
10+
Follow these steps:
11+
12+
1. Increment the `version` field in `package.json` file before publishing, if needed.
13+
2. Compress the extension folder into a zip file with name `extension.zip`.
14+
> **It is important to name the file as exactly `extension.zip`**
15+
16+
![Compress folder Image](./images/publishing-extensions/compress-to-zip.png "Compress the folder into a zip file")
17+
18+
3. Create a new release in GitHub and attach the above `extension.zip` file in the release.
19+
1. On GitHub.com, navigate to the main page of the repository.
20+
2. To the right of the list of files, click `Releases`.
21+
22+
![Github Releases Image](./images/publishing-extensions/release-github.png "Click on Releases")
23+
24+
3. Click on `Draft a new release`.
25+
26+
![Draft New Release Image](./images/publishing-extensions/draft-new-release.png "Click on Draft a new release")
27+
28+
4. Select `choose a tag` and type in your new extension version and `Create new tag`.
29+
30+
![Create New Tag](./images/publishing-extensions/create-new-tag.png "Click on Choose a tag > create new tag")
31+
32+
5. Fill out all the remaining fields.
33+
6. Drag and drop the `extension.zip` file to the release.
34+
35+
![Drag-Drop-Zip-File](./images/publishing-extensions/drag-drop.gif "Drag and drop the extension.zip file to release")
36+
37+
7. Click on `Publish release` button.
38+
> See Release Example: https://github.com/phcode-dev/extension-template/releases/tag/0.0.1
39+
4. You will get an issue in your issue tab regarding the publishing status of the extension/theme.
40+
> See Example: https://github.com/phcode-dev/extension-template/issues/2
41+
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.
42+
43+
![Publish Failed Image](./images/publishing-extensions/publish-failed.png "Publish Failed")
44+
45+
6. Once published, your extension will appear in the Phoenix Code Extension Store at [https://phcode.dev](https://phcode.dev).
46+
47+
![Extension Store Image](./images/publishing-extensions/extension-store.png "Phoenix Code Extension Store")
48+
49+
## Publishing legacy Brackets extensions
50+
> Follow this section only for old brackets extensions.
51+
52+
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
53+
or old Brackets extensions, please follow the steps below:
54+
55+
1. Create a GitHub repository for your extension if it is not present.
56+
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
57+
58+
That's all, you can now follow the above [Publishing to the extension/theme store](#publishing-to-the-extensiontheme-store) section.
59+
60+
## FAQ
61+
### Why is my extension not being published?
62+
Your repository must be **public** to be able to be published to the Phoenix Code Extension store.
63+
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.
64+
65+
### How can I get a Verified Badge for my extension?
66+
The `verified` extension badge(tick mark) will be automatically granted to verified GitHub Organizations.
67+
68+
### How do I delete my extension from the store
69+
Please raise an issue here: https://github.com/phcode-dev/phoenix/issues/new/choose, mention your extension repository.
70+

‎api/03-available-standard-libs.md renamed to ‎api/05-available-standard-libs.md

File renamed without changes.

0 commit comments

Comments
 (0)