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/.
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
toPageNode.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).
- In the Search box (magnifying glass in left rail), select the regex option (
-
Fix any
[iterator]
links to remove the brackets from the link references to ensure they work. For instance:ArtboardList.md#[iterator]
should beArtboardList.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)
This is a site template built with the Adobe I/O Theme.
View the demo running on Github Pages.
The slack channel #adobeio-onsite-onboarding is our main point of contact for help. Feel free to join the channel and ask any questions.
For local development, simply use :
$ yarn install
$ yarn dev
For the developer documentation, read the following sections on how to:
- Arrange the structure content of your docs
- Link to pages
- Use assets
- Set global Navigation
- Set side navigation
- Use content blocks
- Use Markdown
For more in-depth instructions.
-
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
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
You can deploy using the GitHub actions deploy workflow see deploy instructions.