Adobe Express Add-on Documentation

This repo contains all of the guides and references for Adobe Express add-on developers, hosted at https://developer.adobe.com/express/add-ons/docs/guides/.

Document API References - Manual Formatting Steps

This section outlines the steps that should be taken to format the generated Document API references from Horizon into a Gatsby-friendly format.

TIP: it's easiest to open just the editor folder in VS Code (or your favorite editor) so you can globally search and replace in only those files to avoid unintentional mistakes. (Or set the advanced search settings to exclude everything else).

Recommended pre-req: Install this extension in VS Code to make it easier to apply transformations across many files.

Remove the links in the generated headers. For example:

### <a id="createEllipse" name="createEllipse"></a> createEllipse

to:

### createEllipse

In the Search box (magnifying glass in left rail), select the regex option (.* option in VS Code) with search string of <a .*?.*?></a> and the Replace box empty (so it just removes it). Note: Be sure to include the space after the the closing tag so it doesn't leave an extra space in the heading.
Search and Replace again across files to change the auto-generated HLAPI docs headings from @add-on-hlapi-sdk –> to @express-document-sdk.
Transform all Table of Contents links to lowercase so they match the way Gatsby generates internal links from the headers in all lowercase (ie: PageNode.md#allChildren to PageNode.md#allchildren).

You can transform them all at once by following the steps below:
- In the Search box (magnifying glass in left rail), select the regex option (.* option in VS Code) with search string of .md#*[a-z]+(?:[A-Z0-9]+[a-z0-9]+[A-Za-z0-9]*)*.
- Click the “Open in editor” link under the global Search and Replace boxes, and all the matches will be shown together in one editor window so you can make changes to them all at once. Click into the open editor window where they're shown and then choose Select all occurrences (or Shift+Command+L) from the Selection menu, while ensuring you have the regex string above still in the Search box, to actually select the highlighted items.
- Open the Command Palette from the View->Command Palette top menu (or Shift+Cmd+P) and type lower, then choose Transform to lowercase. This will ensure all camelCase links become lowercased.
- Note: this step requires the extension mentioned in the pre-reqs. Apply the changes from the editor back to the workspace with the Command Palette Apply Search Editor changes to workspace (which will be available once the extension is installed).
Fix any [iterator] links to remove the brackets from the link references to ensure they work. For instance: ArtboardList.md#[iterator] should be ArtboardList.md#iterator. To fix, use Search again with a regex string of .md#\[iterator\] and replace with .md#iterator.
Add a blank line after any InlineAlerts in the Enums to render them properly. (This can be easily fixed in the hz repo)
Ensure any lists are be surrounded by one blank line so the linter in the PR job doesn't complain. See Context, Editor classes specifically such as the createStroke method which has a list. (Note: you can check the PR validation job to see if you missed any). (This can be easily fixed in the hz repo)

Adobe I/O Documentation Template Info

This is a site template built with the Adobe I/O Theme.

View the demo running on Github Pages.

Where to ask for help

The slack channel #adobeio-onsite-onboarding is our main point of contact for help. Feel free to join the channel and ask any questions.

How to develop

For local development, simply use :

$ yarn install
$ yarn dev

For the developer documentation, read the following sections on how to:

For more in-depth instructions.

How to test

To run the configured linters locally (requires Docker):
```
yarn lint
```
NOTE If you cannot use Docker, you can install the linters separately. In .github/super-linter.env, see which linters are enabled, and find the tools being used for linting in Supported Linters.
To check internal links locally
```
yarn test:links
```
To build and preview locally:
```
yarn start
```

How to deploy

For any team that wishes to deploy to the developer.adobe.com and developer-stage.adobe.com websites, they must be in contact with the dev-site team. Teams will be given a path that will follow the pattern developer.adobe.com/{product}/. This will allow doc developers to setup their subpaths to look something like:

developer.adobe.com/{product}/docs
developer.adobe.com/{product}/community
developer.adobe.com/{product}/community/code_of_conduct
developer.adobe.com/{product}/community/contribute

Launching a deploy

You can deploy using the GitHub actions deploy workflow see deploy instructions.

shinichy/express-add-ons-docs