2. Click on the "Deploy" workflow
3. Press **Run workflow**. You can choose which branch the workflow is run on and specify the deployment type (`dev` for development or/and `prod` for production).
Using the `Clean cache`: typically you won't have to set this to `yes`. The most common scenario of when to use is when you do a deploy and a particular resource isn't updating to the most recent change. eg, a static image is still on the old version. Try setting this to `yes` and redeploy the site.
Using the `Exclude a subfolder from deletion`: folders listed here separated out by commas will exclude them from being overwritten when doing a deploy. This is useful if you have multiple sites deploying to the same path. eg, one repo deploys to `/photoshop/` and another repo deploys to `/photoshop/docs/`. You can set the the repo that deploys to `/photoshop/` option as `Exclude a subfolder from deletion`: `docs`. Then whenever that `/photoshop/` repo deploys, the subfolder `docs` will not get deleted. You can also list out multiple subfolders separated by commas like so: `api, photoshop-api-docs, uxp, another-path` etc.
**Pre-requisites:**
1. Setting your `PATH_PREFIX` as explained [here](#adding-a-path-prefix). This is the sub-folder to deploy this micro-site to.
- For example, if you want to deploy to `https://example.com/foo/bar`, you must set `PATH_PREFIX` to `/foo/bar/`
- For sites deployed to the `root`, use `/` as the `PATH_PREFIX`
2. The person initiating the deploy workflow must have `write` access to the repository.
## Writing Enhanced Markdown
### Metadata with Front matter
Front matter allows an author to specify metadata for a page. For example, you can define the page meta title and description by adding front matter to the beginning of your markdown file:
---
title: Guides - Adobe Analytics
description: This is the guides overview page of Adobe Analytics
---
In addition to the GitHub contributors of a markdown file, you can specify external contributors with front matter.
They'll show up first before the GitHub contributors.
---
contributors:
- https://github.com/simonwex
---
You can also specify whether or not to hide breadcrumb navigation on pages without a hero at the top. Pages with a Hero can flag the breadcrumb option on the Hero component if needed.
---
title: Guides - Adobe Analytics
description: This is the guides overview page of Adobe Analytics without a breadcrumb
contributors:
- https://github.com/simonwex
- https://github.com/davidbenge
hideBreadcrumbNav: false
---
### OpenAPI
We use [Redoc](https://github.com/Redocly/redoc) to render OpenAPI specs. Simply use front matter to define the spec URL.
## openAPISpec: https://raw.githubusercontent.com/AdobeDocs/analytics-2.0-apis/master/docs/swagger.json
### RedoclyAPIBlock
```js
```
We can now host your own OpenAPI YAML files and have them rendered by Redocly documents. This approach allows us to avoid using iframes and instead host our own API YAML files directly in Redocly.
#### On-premise license keys
When using RedoclyAPIBlock, ensure that GATSBY_REDOCLY_KEY: ${{ secrets.REDOCLY_LICENSE_KEY }} is added to the deploy.yml file in your repository (e.g. add to [build-dev](https://github.com/AdobeDocs/ff-services-docs/blob/24b9b522e7521d7169265871023cccfa1f03f349/.github/workflows/deploy.yml#L145) and [build-production](https://github.com/AdobeDocs/ff-services-docs/blob/24b9b522e7521d7169265871023cccfa1f03f349/.github/workflows/deploy.yml#L252)). Any public repo in the AdobeDocs organization will have access to this development environment [secret](https://github.com/organizations/AdobeDocs/settings/secrets/actions).
Dev-site team is responsible for making sure the license key is up to date, which can be found in redocly account settings -> On-premise license keys.
#### Local development limitation and workaround
Due to the way Redocly API works, it’s not possible to test RedoclyAPIBlock locally:
To test, temporarily deploy to stage:
#### Full width page
Use [custom layout](#custom-layout) to do a full width page
#### Displaying long API response descriptions
By default, Redocly displays API response descriptions as the button text (styled as one line, no-wrap). If too long, the text could get truncated, and the page widens beyond 100%:
For long descriptions, Redocly suggests to use the [x-summary](https://redocly.com/docs/api-reference-docs/specification-extensions/x-summary/) specification extension. If specified, it is used as the response button text, and the description is rendered under the button:
#### width (optional)
```js
```
Sets the width (of the right panel).
Defaults to ```'500px'```
https://redocly.com/docs/api-reference-docs/configuration/theming/#path=rightPanel
#### typography (optional)
```js
```
Controls the appearance of text.
Defaults to ```'fontFamily: `adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif`'```
https://redocly.com/docs/api-reference-docs/configuration/theming/#path=typography
#### codeblock (optional)
```js
```
Controls the appearance of code snippets.
Defaults to ```"tokens: { punctuation: { color: 'white' }}"```
https://redocly.com/docs/api-reference-docs/configuration/theming/#path=codeBlock
#### ctrlFHijack (optional)
```js
```
Brings focus to the search bar when Control-F is pressed.
Defaults to ```true```
https://redocly.com/docs/api-reference-docs/configuration/functionality/#theme-object-openapi-schema
#### disableSidebar (optional)
```js
```
If set to `true`, hides the navigation sidebar (the left panel). Setting this option to `false` does not disable the search feature.
Defaults to ```false```
https://redocly.com/docs/api-reference-docs/configuration/functionality/#theme-object-openapi-schema
#### disableSearch (optional)
```js
```
Disables search indexing and hides the search box from the API documentation page.
Defaults to ```false```
https://redocly.com/docs/api-reference-docs/configuration/functionality/#theme-object-openapi-schema
#### hideLoading (optional)
```js
```
When set to `true` it disables the loading spinner when rendering an OpenAPI file client-side.
Defaults to ```false```.
#### hideTryItPanel (optional)
```js
```
Disables the Try it console in the right panel.
Defaults to ```false```
https://redocly.com/docs/api-reference-docs/configuration/functionality/#theme-object-openapi-schema
#### scrollYOffset (optional)
```js
```
Specifies a vertical scroll-offset. This is useful when there are fixed positioned elements at the top of the page, such as navbars, headers etc. You can specify the scrollYOffset value as a number - a fixed number of pixels to be used as the offset.
Defaults to ```0```
https://redocly.com/docs/api-reference-docs/configuration/functionality/#theme-object-openapi-schema
#### sortOperationsAlphabetically (optional)
```js
```
When set to `true`, sorts operations in the navigation sidebar and in the middle panel alphabetically.˙
Defaults to ```false```
https://redocly.com/docs/api-reference-docs/configuration/functionality/#theme-object-openapi-schema
#### sortTagsAlphabetically (optional)
```js
```
When set to `true`, sorts tags in the navigation sidebar and in the middle panel alphabetically. Note that only tags will be sorted alphabetically in the middle panel, not the operations associated with each tag. To sort operations alphabetically as well, you must set `sortOperationsAlphabetically` to `true`.
Defaults to ```false```
https://redocly.com/docs/api-reference-docs/configuration/functionality/#theme-object-openapi-schema
#### jsonSampleExpandLevel (optional)
```js
```
Sets the default expand level for JSON payload samples (response and request body). Takes a number >= 1, or the string 'all'.
Defaults to ```2```
https://redocly.com/docs/api-reference-docs/configuration/functionality/#theme-object-openapi-schema
#### generateCodeSamples (optional)
```js
```
Controls options for generating code samples, including code sample languages.
Defaults to ```languages: [], skipOptionalParameters: false```
https://redocly.com/docs/api-reference-docs/configuration/functionality#theme-object-openapi-schema
#### requestInterceptor (optional)
```js
## jsDoc: true
Then annotate your JS parameters with `` to render them nicely see the [example markdown file](https://raw.githubusercontent.com/adobe/aio-theme/main/example/src/pages/jsdoc/index.md).
### MDX
[MDX](https://mdxjs.com/) is supported out of the box. MDX enables writing [JSX React components](https://reactjs.org/docs/introducing-jsx.html) in markdown giving authors new powers.
Despite the markdown files having all an `md` extension, they are actually treated as MDX files. You can use `md` and `mdx` extensions interchangeably.
As we try to limit the use of MDX in favor of pure markdown, we have come up with a way to couple the use of basic markdown syntax with JSX.
**Always make sure to close JSX blocks and use line breaks between JSX blocks and markdown content to avoid MDX parser issues.**
### Modular Content System
The modular content system is a set of content blocks with variants and compositions that can be used to create pages.
- **Content Blocks are goal-focused.** A group of content that has a specific goal or intention, to structure and support the overall narrative.
_Examples are groupings of text, groupings of buttons, and hero content._
- **Variants are messaging-focused.** The messaging points/content (this includes both written and visual content/images) that makes the goal of the content block happen.
_Examples are text content blocks with icons vs no icons._
- **Compositions are layout-focused.** The overall narrative for the page.
**A variant can go into a _content block_. Multiple _content blocks_ make up a _composition_.**
### JSX Blocks
**The Content Blocks are defined as JSX Blocks.** They use a `slots` property to identify which markdown elements to ingest using only string properties.
This helps maintain better readability when rendered on .
Common slots are: `heading`, `image` and `text`. See below examples for full details.
### Hero Block
A Hero Block should be used on every home page. **Only 1 Hero Block per page is allowed**.
They are used to set up the tone of the page and optionally add call to actions and intentions for users.
There are 3 different variants:
- The default variant for Documentation pages.
- The half width variant for Product/Platform authored pages.
- The full width variant for Index home pages.
**Default variant:**
```
# Adobe Analytics
Adobe Product API offers limitless ways to integrate your most important customer data into key business processes. Adobe Product API offer limitless ways.
```
Use `slots` to identify the markdown content:
- `heading` (required)
- `text` (required)
- `image` (optional)
- `videoUrl`(optional)
Use `background` to set a custom background color matching your color scheme. Defaults to `rgb( 29, 125, 238)`;
Use `theme` to match the text color to your color scheme. Defaults to `dark`.
Use `hideBreadcrumbNav` to optionaly hide the breadcrumb navigation on this variant. Defaults to false.
Use `videoUrl` to videoURL to post the video in half width /full width
**Half width variant**
```
# Creativity for all
Start building.
Creative Cloud services include tools and capabilities to streamline your workflows so that you, your team, and your stakeholders stay perfectly in sync across projects of any size
* [Get started](https://adobe.io)
* [Sign up for the newsletter](https://adobe.io)
```
Use `variant="halfwidth""` to set the half width variant.
Use `slots` to identify the markdown content:
- `heading` (required)
- `text` (required)
- `image` (required)
- `background` (optional)
- `icon` (optional)
- `buttons` (optional)
**Full width variant**
```
# The most memorable digital experiences are unleashed by developer creativity
Adobe products and technologies power them
* [Explore our APIs](https://adobe.io)
* [Subscribe](https://adobe.io)
```
Use `variant="fullwidth""` to set the full width variant.
Use `slots` to identify the markdown content:
- `heading` (required)
- `text` (required)
- `image` (required)
- `background` (optional)
- `buttons` (optional)
Use `theme` to match the text color to your color scheme. Defaults to `dark`.
### Resources Block
Each Documentation overview page has a Resources Block with to display a list of links.
They can point to internal or external documents or pages.
**Only 1 Resource Block per page is allowed**.
```
#### Resources
* [Quickstart Guide](https://www.adobe.io/apis/experiencecloud/analytics/docs.html)
* [Adobe Analytics GitHub Repo](https://github.com/AdobeDocs/analytics-2.0-apis)
```
Use `slots` to identify the markdown content:
- `heading` (required)
- `links` (required)
### Discover Block
A Discover Block is a section of content that can be used to highlight certain areas of a Documentation overview page. There can be multiple Discover Blocks in a row.
Discover Blocks can be illustrated but only one illustration per row is allowed.
**Single Discover Block**
```
### Get Started
[Quickstart Guide](guides/)
Get started with the Adobe Analytics APIs.
```
**Multiple Discover Blocks in a row**
```
### Guides
[Calculated Metrics API](guides/calculated_metrics_api/)
Returns information on the user's company that is necessary for making other Adobe Analytics API calls.
[Segments API](guides/segments_api/)
Provides configuration guidance and best practices for the /segments endpoint.
[Reporting Guide API](guides/reporting_api/)
Provides configuration guidance and best practices for the /reports endpoint.
```
**Discover Block with illustrations**
```
### Developer forum
[Get started](https://adobe.io)
Open discussion and support with community experts and Adobe staff.
[Experience league](https://adobe.io)
Tutorials and videos for the community.
```
Use `slots` to identify the markdown content:
- `heading` (1 required per row)
- `text` (required)
- `link` (required)
- `image` (optional)
Use `width` to define the size of the block.
### Code Block
A Code Block is an enhanced code section which supports additional features like request/response format, multiple languages etc.
```
```
#### Request
```json
{
"rsid":"adbedocrsid",
"globalFilters":[
{
"type":"dateRange",
"dateRange":"2017-12-31T00:00:00.000/2018-01-06T23:59:59.999"
}
]
}
```
#### Request
```bash
curl -X POST \
https://analytics.adobe.io/api/{COMPANYID}/reports \
-H 'Accept: application/json' \
-H 'Authorization: Bearer {ACCESSTOKEN}' \
-H 'Content-Type: application/json' \
-H 'x-api-key: {APIKEY}' \
-H 'x-proxy-global-company-id: {COMPANYID}' \
-d '{REQUESTJSON}'
```
#### Response
```json
{
"totalPages":1,
"numberOfElements":7,
"number":0,
"totalElements":7
}
```
Use `slots` to identify the markdown content:
- `heading` (required)
- `code` (required)
Use `repeat` to define how many code sections are part of the Code Block.
Use `languages` to define a language name for each code section. Code sections with the same heading are automatically
grouped together. The number of languages should match the number of headings. If no language is present, each of the heading
will render in each tab with even the same headings.
### InlineAlert block (Updated: 2022-06-08)
The Inline Alert block provides ways to highlight various types of information, using an optional title, text blocks,
and variants.
#### Anatomy of an InlineAlert block
```markdown
```
**Variant values**
As shown above, the first property of an InlineAlert is the `variant` property. The value of this property determines
the icon and border color of the alert. The `variant` values you can use are described here:
- `info` (default) — use to add helpful information.
- `help` — use to add brief steps from or links to other help topics.
- `error` — use to highlight errors that may result from an action.
- `success` — use to highlight success messages that may be displayed after an action.
- `warning` — use to focus attention on a potential problem that could occur.
- `neutral` — use as an all-purpose callout that displays a black border and no icon.
The slots and variants of an InlineAlert block are as follows.
**Slot values**
Use the following slots to style your markdown text within the InlineAlert block:
- `title` (optional) — Use plain markdown text. The slot will bold the title and space it above your text appropriately.
You can only use one title per alert block.
- `text` (required). Use plain markdown text.
- `text2`...`text[n]` (optional) - You can use additional text slots to display multiple paragraphs. Just make sure each
additional text block starts with the word `text` followed by numbers or letters that make each text slot unique.
#### Simple InlineAlert
The simplest `InlineAlert` you can create uses a single `text` slot, as shown here:
```markdown
This is the text that displays within the default alert variant — info.
```
#### Richer InlineAlert
To add an InlineAlert with a different variant, a title, and multiple paragraphs, you can specify all the optional
properties, as shown here:
```markdown
Alternative steps:
**Step 1:** This is faux step text for the `text1` slot.
This is faux step text for the `text1` slot.
This is faux step text for the `text1` slot.
This is faux step text for the `text1` slot.
This is faux step text for the `text1` slot.
**Step 2:** This is faux step text for the `text2` slot.
This is faux step text for the `text2` slot.
This is faux step text for the `text2` slot.
**Step 3:** This is faux step text for the `text3` slot.
**Step 4:** This is faux step text for the `text4` slot.
This is faux step text for the `text3` slot.
```
#### Nested InlineAlert
To add an InlineAlert within another component, we have created a new component to do that. Here is how you should create an inline alert
within another component:
```markdown
Personal Information :
Lorem ipsum dolor sit amee
Add more information
Lorem ipsum dolor sit amet
```
This new InlineNestedAlert will not be supporting the 'slot' parameter as the regular InlineAlert.
The nested InlineAlert must wrap around the content that it wants to display. It can only supports one header by using the parameter
header="true". Header will not be supported if there is only 1 line. It supports variant the same way as the regular InlineAlert. Also it supports
another parameter as iconPosition to be
displayed either left or right side of the alert.
### Media Block
The Media Block is used to display interactive medias like videos.
```
```
Use `slots` to identify the markdown content:
- `video` (required)
### Announcement Block
The Announcement Block goes directly underneath the Hero Block for Product/Platform pages.
It's used to call out new features, blog posts, news etc. anything that needs that needs to be surfaced above the fold.
```
### Try out the magic of Photoshop
Pull together Photoshop, Lightroom and Adobe Sensei into one place. Reduce time spent in each app, freeing you up for more creative time.
[Demo](https://www.adobe.io/apis/creativecloud/photo-imaging-api/api-demo.html)
```
Use `slots` to identify the markdown content:
- `heading` (required)
- `button` (required)
- `text` (optional)
Use `theme` to match the text color to your color scheme. Defaults to `light`.
Use `className` to customize the component **at your own risk.**
### Summary Block
The Summary Block acts as an anchor at the end of the page. It's a change for Products to give users another call to action, and encourage them to interact after they have gotten to the bottom of the page.
```
## Subscribe to the Creative Cloud developers newsletter
A monthly newsletter featuring news for anyone who creates, develops, or build plugins, extensions, or integrations for the
Creative Cloud family of products.
- [Subscribe to the newsletter](https://adobe.io)
- [Learn more](https://adobe.io)
```
Use `slots` to identify the markdown content:
- `heading` (required)
- `buttons` (1 button required at least)
- `text` (optional)
- `image` (optional)
Use `background` to set a custom background color matching your color scheme.
Use `theme` to match the text color to your color scheme. Defaults to `dark`.
Use `className` to customize the component **at your own risk.**
### Title Block
A Title Block is used at the beginning of sections, or to frame compositions on Product/Platform pages.
```
### Collaborate better with Content Cloud APIs
With the Cloud Content APIs, you can bring design work created in XD directly to your product or service.
```
Use `slots` to identify the markdown content:
- `heading` (required)
- `text` (optional)
Use `theme` to match the text color to your color scheme. Defaults to `lightest`.
Use `className` to customize the component **at your own risk.**
### Text Block
Text Blocks are used for layout compositions. They are areas for long blocks of text and explaining features etc. for Product/Platform pages.
They are coupled with images or videos.
**With an image, texts and links**
```
### Extend Adobe CC Flagship Apps
Extend Creative Cloud desktop apps like [Photoshop](https://www.adobe.com/products/photoshop.html), [Premiere Pro](https://www.adobe.com/products/premiere.html), and [InDesign](https://www.adobe.com/products/indesign.html) through our APIs and SDKs.
Be sure to check out [Common Extensibility Platform (CEP)](https://www.adobe.io/apis/creativecloud/cep.html), which lets you build custom UI panels for multiple CC apps at once.
When you're ready to ship, distribute your work on [Adobe Exchange](https://exchange.adobe.com/), the preferred marketplace for Adobe Creative Cloud users.
And be sure to join the [Exchange Program for Creative Cloud](https://partners.adobe.com/exchangeprogram/creativecloud) to unlock more benefits, including streamlined publishing and promotional opportunities.
-  [Adobe Premiere Pro](https://www.adobe.com/products/premiere.html)
-  [Adobe InDesign](https://www.adobe.com/products/indesign.html)
-  [Adobe After Effect](https://www.adobe.com/products/aftereffects.html)
```
**Multiple Text Blocks in a row**
```
### Microsoft teams
Easily share Creative Cloud assets and files, and get comment notifications on your prototypes.
- [Learn more](https://www.microsoft.com/microsoft-365/microsoft-teams/group-chat-software)
### JIRA Cloud
Make designer to developer handoffs easy. Find the latest designs and specs and get thumbnail previews and asset info.
- [Learn more](https://www.atlassian.com/enterprise/cloud)
### Slack
Instantly share Creative Cloud files, designs, specs, and notifications all in real time.
- [Learn more](https://slack.com/enterprise)
```
**With a video, icons, buttons dark themed**
```
[Creative Cloud for a new era](https://www.youtube.com/watch?v=JemJbNJ4ZtU&ab_channel=AdobeCreativeCloud)
- 
- 
### Partner Success Story
Connect your users to Creative Cloud right from within your mobile or web apps with our service APIs. Give users access to
world-class creative assets with the Adobe Stock API, or sign up for early information on our upcoming CC Storage API.
- [Learn more](https://adobe.io)
- [Sign up for partner program](https://adobe.io)
```
**With a local video**
```
import video1 from '../videos/localVideo.mp4'
### One-click edits with Adobe Express quick actions
Quick actions turn multistep design workflows into just a few clicks, making removing backgrounds, resizing images and merging videos faster than ever – all powered by Adobe Photoshop and Adobe Premiere Pro. Enable these powerful shortcuts in any website in minutes.
- [Learn more](https://adobe.io)
- [Try it ](https://adobe.io)
```
Use `slots` to identify the markdown content:
- `heading` (required)
- `text` (required). Support multiple texts e.g `text1, text2` etc.
- `links` (optional). Supports 1 optional image per link.
- `buttons` (optional)
- `icons` (optional)
- `image` (optional). `image` should only be defined as first or last slot to define the layout. `image` excludes `video`.
- `video` (optional). `video` should only be defined as first or last slot to define the layout. `video` excludes `image`.
Use `theme` to match the text color to your color scheme. Defaults to `lightest`.
Use `width` to define the size of the block. Supported values are `100%`, `50%`, `33%` and `25%`;
Use `isCentered` to center the text.
Use `className` to customize the component **at your own risk.**
Use `videoUrl` to add the local video to the block
Use `position` to position the video values are `left`, `right`. The preset variant is left.
### Table Block
The table block automatically decorates markdown and html tables:
Markdown:
```md
| Tables | Are | Cool |
| ------------- | :-----------: | ----: |
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
```
HTML:
```html
|
| Tables |
Are |
Cool |
| col 3 is |
right-aligned |
$1600 |
| col 2 is |
centered |
$12 |
| zebra stripes |
are neat |
$1 |
```
Will both look like this:
**When should I use an HTML table over Markdown?**
Markdown has a simple way of defining and formatting your tables, but it can be limited in customization and difficult to format with a lot of data. You should consider using HTML tables if you're experiencing said limitations.
_Here is a couple of examples:_
By default, the column width distribution is even across all columns in the table. To customize it we support a `columnWidths` property which you can configure like so:
```html
```
The `columnWidths` property expects a distribution by percentage of the table width. _Comma separated numbers only_.
You can assign any distribution as long as the number of entries matches the number of columns and the distribution adds up to 100% otherwise it may not work as expected.
| # Columns | Default Distribution | Custom Distribution Example |
| --------- | -------------------- | --------------------------- |
| 2 | "50,50" | "25,75" |
| 3 | "33.33,33.33,33.33" | "10,20,70" |
| 4 | "25,25,25,25" | "10,20,35,35" |
We also support inline css overrides using the css property like so:
```html
```
Combining modifiers is supported as well unless mentioned otherwise.
### Tabs Block
Tabs block is a custom block component that allows for tabbed content that can be displayed either vertically or horizontally.
```
### Create PDF from URL
### Dynamic PDF Document Generation
```
```
### Create PDF from URL
### Dynamic PDF Document Generation
```
Use `slots` to identify the markdown content:
- `heading` (1 required per row)
- `image` (optional)
- `content` (1 required per row)
Use `theme` to match the text color to your color scheme. Defaults to `light`.
Use `orientation` to tabs can be either horizontal or vertical. Defaults to `horizontal`.
Use `repeat` to define how many tab items sections are part of the tabs Block.
### Product Card
Product Cards group information that allow to browse a collection of related content.
```
#### CC Storage API
CC Storage API lets you access and modify assets stored in the Creative Cloud, the world's most popular creative platform.
- [Learn more](https://adobe.io)
- [View docs](https://adobe.io)
#### Adobe Stock
Gives your users access to the perfect Adobe Stock asset to enhance their creative projects.
- [Learn more](https://adobe.io)
- [View docs](https://adobe.io)
#### Common Extensibility Platform
Build extensions with HTML, CSS, Javascript and Node. Deploy across multiple Adobe apps.
- [Learn more](https://adobe.io)
- [View docs](https://adobe.io)
```
Use `slots` to identify the markdown content:
- `heading` (required)
- `text` (required)
- `buttons` (1 button required at least)
- `icon` (optional)
Use `theme` to match the text color to your color scheme. Defaults to `lightest`.
Use `width` to define the size of the block. Supported values are `100%`, `50%`, `33%` and `25%`;
### Product Card Grid
Use Product Card Grid to display Product Cards with filter and sort options based on meta data.
Set `interaction` to `true` to display the filter and sort options.
See the [data example](https://github.com/adobe/aio-theme/blob/main/example/src/products/index.js) to provide for `clouds` and `products`.
```
```
Use `orderBy` to define the default ordering. Choose between `last_updated` and `name`.
Use `filterByCloud` to define the default cloud filter. You can define multiple clouds by default `filterByCloud={[cloud1, cloud2]}`.
Use `filterByIds` to define a custom filter e.g. `filterByIds=[1, 3, 4]` to display products with ids `1`, `3` and `4` in that order.
### Resource Card
Resource Cards are used on Product/Platform pages for external cross-promotion of materials. Examples includes articles, videos etc.
There are 2 variants: horizontal and vertical Resource Cards. Use multiple Resource Cards with different variants to create a Resource composition.
```
[Adobe I/O](https://adobe.io)
### Creating a Great Adobe XD Plugin Listing
Rob Kleiman, July 8th 2020
[Adobe I/O](https://adobe.io)
### Pattern Builder: A Behind the Scenes Look at Adobe Capture
Nihil Gupta, July 24th 2020
[Adobe I/O](https://adobe.io)
### Photoshop Extensibility Enters a New Era Soon: How to get Involved Early
Ash Ryan Arnwine, March 12th 2020
```
Use `slots` to identify the markdown content:
- `link` (required)
- `heading` (required)
- `image` (required)
- `text` (optional)
Use `theme` to match the text color to your color scheme. Defaults to `lightest`.
Use `width` to define the size of the block. Supported values are `100%`, `50%` and `33%`.
### MiniResourceCard
Used to display the Product information along with the images/icons and headings, with link in a concise and visually appealing way.
```
### Remove Background
To remove the background from an image
[Adobe I/O](https://adobe.io)
### Convert to GIF
To convert the video to the GIF format
[Adobe I/O](https://adobe.io)
### Crop Image
To crop the image
[Adobe I/O](https://adobe.io)
### Merge Video
Merge two or more videos
[Adobe I/O](https://adobe.io)
### Resize Video
To resize the video
[Adobe I/O](https://adobe.io)
### Trim Video
Trimming the video
[Adobe I/O](https://adobe.io)
```
Use `slots` to identify the markdown content:
- `image` (required)
- `heading` (optional)
- `text` (optional)
- `link` (optional)
Use `theme` to match the text color to your color scheme. Defaults to `dark`.
Use `repeat` to define how many code sections are part.
Use `textColor` to define the color of the text. The preset is black.
Use `inRow` to define the number of mini cards in a row
### Carousel
Carousel is used to show the information along with images and buttons.
```
#### CC Storage API
CC Storage API lets you access and modify assets stored in the Creative Cloud, the world's most popular creative platform.
* [Learn more](../guides)
* [View docs](../guides)
#### CC Storage API
CC Storage API lets you access and modify assets stored in the Creative Cloud, the world's most popular creative platform.
* [Learn more](../guides)
* [View docs](../guides)
```
Use `slots` to identify the markdown content:
- `image` (required)
- `heading` (optional)
- `text` (required)
- `buttons`(optional)
Use `theme` to match the text color to your color scheme. Defaults to `dark`.
Use `repeat` to define how many code sections are part of the carousel.
### VideoCarousel
VideoCarousel is used to show the information along with videos and buttons.
Use `slots` to identify the markdown content:
- `heading` (optional)
- `text` (required)
- `buttons`(optional)
Use `videos` give the imported video varaiables in an array example `videos={[video1,video2,...]}`
Use `position` to position the video left/right. By default it position to left.
Use `variant` to specify full width or half width values are fullWidth,halfWidth. By default it is fullWidth.
Use `enableNavigation` to display navigation icon. By default it is in false. If you want naviagtion set it to true
Use `navigationIconColor` to change the icon color. By default it is black.
```
import video1 from './video1.mp4'
import video2 from "./video2.mp4"
import video3 from "./video3.mp4"
#### Acrobat on web and desktop
The Adobe Express full editor allows users to edit images and quickly create eye-catching cover and divider pages within Acrobat.
* [Learn more](../guides)
* [View docs](../guides)
#### Breakout EDU
Breakout EDU is an educational game platform for teachers and students that enables users to bring more creativity to virtual games with the Adobe Express full editor.
* [Learn more](../guides)
* [View docs](../guides)
### Letter
Letter is an email newsletter tool that helps content creators, designers, and developers make standout communications with the Adobe Express full editor.
* [Learn more](../guides)
* [View docs](../guides)
```
### ImageTextBlock
ImageTextBlock is used to display two images, along with text, a heading, and buttons, arranged horizontally. This layout allows for a visually appealing presentation of the content within the modal.
```
## Adobe Service
Service is the rent we pay for being. It is not something you do in your spare time
- [Learn more](https://adobe.io)
## Adobe InDesign
Adobe InDesign brings its new share for review features to life with Adobe.
- [Learn more](https://adobe.io)
```
Use `slots` to identify the markdown content:
- `image` (required)
- `heading` (optional)
- `text` (optional)
- `buttons`(optional)
Use `bgColor` to load the backgroundcolor.
Use `repeat` to define how many code sections are part. The limit for repeat is two.
Use `isCenter` to center the text.
Use `className` to customize the component **at your own risk.**
### TeaserBlock
Teaser component is used to place the text over the background image/color
```
import bgImg from "./Images/black_image.png"
### TeaserBlock with image background
In TeaserBlock using bgURL={img}, we can load the backroundimage in the div and align the text position on the right by using position="right" attribute
- [Learn more](../guides/)
### TeaserBlock with background color
In TeaserBlock using bgURL={img}, we can load the backroundimage in the div and align the text position on the right by using position="left" attribute
```
Use `slots` to identify the markdown content:
- `heading` (optional)
- `text` (optional)
- `buttons`(optional)
Use `bgURL` to load the image, `backgroundColor` to load the backgroundcolor.
Use `position` to position the heading, text values are `left, right, center`.
Use `textColor` to color the heading, text
Use `variant` to specify full width or half width values are `fullwidth,halfwidth`.
### Accordion
Accordion has a group of accordion items used to collapse and expand the child content
#### Accordion item
Accordion item is to expand and collapse the content by clicking the icon. By default it uses `+` and `-` icon
Use `isOpen` to expand the content without clicking the icon
Use `header` to display the heading with the icon
Use `isChevronIcon` to use ChevronIcon to expand and collapse instead of the default icon.
Use `position` to position the icon text values are `left, right`. It default to the left
Use `iconColor` to change the icon color. By default it is black
```
AccordionItem with default options to expand and collapse
AccordionItem expand and collapse using ChevronIcon
AccordionItem default expand
```
### ListBlock
The `ListBlock` component showcases a two-column layout with alternating left and right content.
```
500 free Document Transactions per month
Volume and multi-product discounts
Access to all 15+ PDF Services including PDF Extract, PDF Accessibility Auto-Tag API, and Document Generation
Access to all 15+ PDF Services including PDF Extract, PDF Accessibility Auto-Tag API, and Document Generation
Easy to sign up and create credentials in minutes
Technical Support included (different tiers available)
No credit card or commitment required
Scalable for high volume needs.
```
Use `slots` to identify the markdown content:
- `text1`(required) is placed in left side.
- `text2`(required) is placed in right side.
Use `repeat`(required) to define how many code sections are part.
Use `iconColor` to define the marker color. The preset is black.
Use `icon` used to indicate individual items or elements within the list. By default it is in `checkmark`. Values are `checkmark,disc, number`.
Use `variant` to specify full width or half width values are `fullWidth,halfWidth`.
Text1 will align the text on the leftside list i.e (1,3,5,...)
Text2 will align the text on right side i.e (2,4,6...)
### PDFViewer
The PDFViewer component integrates PDF display with accompanying text, headings, and buttons for a seamless user experience.
```
import pdf from "./sample.pdf";
## SDK PDF
Unlock Adobe Express editing capabilities for your users by embedding the SDK in your website.
- [Learn more](https://adobe.io)
```
Use `slots` to identify the markdown content:
- `heading` (optional)
- `text` (optional)
- `buttons`(optional)
Use `url` (required) give the imported video varaiables like `url={pdf}`
Use `client_id`(required) is used to access and view the PDF.
Use `showDownloadPDF` to display the option for downloading the PDF.
Use `showZoomControl` to show the option for zooming in the PDF.
Use `showPrintPDF` to show the option for printing the PDF.
Use `showAnnotationTools` to display the edit icon for editing, deleting, or replying to comments.
Use `showDirection` to determine the layout of the content, either in rows or columns. The possible values are row or column, with the default setting as row.
Use `customId` to specify a custom ID for the PDF. The default value is `adobe-pdf`.
Use `textColor` to define the color of the text. The preset is black.
Use `variant` to specify full width or half width. The values can be 'fullWidth' or 'halfWidth', and the default is `fullWidth`.
### ProfileCard
This component is designed to showcase product information using images/icons, headings, and links in a profile card format, presenting the details in a concise and visually appealing manner.
```
### Remove Background
Enable users to edit existing files or create with templates, generative AI, or from scratch.
After you embed the full editor, users can quickly and easily edit existing files or create new content like social media graphics, flyers, and ads using Adobe Firefly capabilities such as text-to-image and text effects alongside thousands of creative templates and design assets.
[Adobe I/O](https://adobe.io)
- [Adobe](https://adobe.io)
### Convert to GIF
To convert the video to the GIF format
[Adobe I/O](https://adobe.io)
- [Adobe](https://adobe.io)
### Crop Image
To crop the image
[Adobe I/O](https://adobe.io)
- [Adobe](https://adobe.io)
### Remove Background
Enable users to edit existing files or create with templates, generative AI, or from scratch.
After you embed the full editor, users can quickly and easily edit existing files or create new content like social media graphics, flyers, and ads using Adobe Firefly capabilities such as text-to-image and text effects alongside thousands of creative templates and design assets.
[Adobe I/O](https://adobe.io)
- [Adobe](https://adobe.io)
### Convert to GIF
To convert the video to the GIF format
[Adobe I/O](https://adobe.io)
- [Adobe](https://adobe.io)
### Crop Image
To crop the image
[Adobe I/O](https://adobe.io)
- [Adobe](https://adobe.io)
```
Use `slots` to identify the markdown content:
- `image`(required)
- `heading`(required)
- `text`(optional)
- `link`(optional)
- `buttons`(optional)
Use `theme` to match the text color to your color scheme. Defaults to `dark`.
Use `repeat` to define how many code sections are part.
Use `textColor` to define the color of the text. The preset is `black`.
Use `inRow` to define the number of profile cards in a row.
### Mini Product Card
Miniproductcard component is used to display the product card with little image and description
```
# Firefly API
Firefly API
- [Learn more](https://developer-stage.adobe.com/)
```
Use `slots` to identify the markdown content:
- `image`(required)
- `heading`(required)
- `text`(optional)
- `buttons`(optional)
Use `repeat` to define how many code sections are part.
### Edition
The Edition component is used to display the edition of the product.
### Embedding markdown documents and filtering content
You can use MDX transclusion to embed markdown documents into other markdown documents see the [MDX documentation](https://mdxjs.com/getting-started#documents).
#### Embedding local markdown files
For example, if you want to include the content of `overview.md` into `index.md`:
`index.md` content:
```
import Overview from './overview.md'
# Welcome
Lorem ipsum
## Questions
Lorem ipsum
```
`overview.md` content:
```
## Overview
Lorem ipsum
```
`index.md` will be rendered as:
```
# Welcome
Lorem ipsum
## Overview
Lorem ipsum
## Questions
Lorem ipsum
```
#### Embedding external markdown files
Sites are using `npm` to define dependencies so we can also include external markdown documents.
**You have to define a name in the `package.json` like [here](https://github.com/AdobeDocs/dev-site-documentation-template/blob/main/package.json#L3) to be able to include it
as a dependency in another site.**
You don't have to release the site on npm since npm supports installing dependencies using github repository urls. For example, to install
as a dependency in another site, you can run the command `npm install --save adobedocs/dev-site-documentation-template`;
Your site package will show up under `node_modules/[PACKAGE_NAME]` e.g. `node_modules/dev-site-documentation-template`.
When pointing to a github repo as a dependency and wanting to get the latest change from that dependency, you have to ensure that your package.json is pointing to latest version of that dependecy. Otherwise, if you have already pulled down that dependency and it exists in your `node_modules/`, it won't grab the latest changes. To get around this, simply delete your `node_modules/` and then `yarn install` again.
See full example below using a Variant block.
#### Filtering content with Variant Blocks
Together with Variant Blocks, the author can query what should be rendered from external sources.
**This allows to write content once, and reuse it everywhere.**
For example, let's say there are 2 repositories named and .
Both are sites using the theme and have markdown content defined under `src/pages`.
1. repo1 has reusable markdown content written with Variant Blocks under `/src/pages/debugging/index.md`:
```
## How to Debug Your Plugin
Bugs happen! In this tutorial, you will learn how to debug your plugin.
First launch the XD console, by clicking Developer > Console
[XD link](https://adobe.io)
First launch the Photoshop console, by clicking Developer > Console
[Photoshop link](https://adobe.io)
#### Image
```
_Use `repeat` to define how many elements are part of the Variant Block. Use any `key=value` property to mark your Variant Block._
2. repo2 added repo1 as dependency with `npm install --save adobedocs/repo1` to be able to reference its markdown content.
3. repo2 embeds repo1 content by using the `import` statement and inserts the content in its own markdown together with a `query` filter to only display what is needed.
```
import Debugging from 'repo1/src/pages/debugging/index.md'
# Debugging
More content
```
will be rendered as:
```
# Debugging
## How to Debug Your Plugin
Bugs happen! In this tutorial, you will learn how to debug your plugin.
First launch the Photoshop console, by clicking Developer > Console
[Photoshop link](https://adobe.io)
More content
```
You can query multiple elements, for example you can add the section with the image by adding it to the `query`.
```
```
# Get Credential
The `Get Credential` component allows easy credential generation and code sample access on the developer website, utilizing developer console APIs. Child component should only work if it's inside the parent GetCredential component.
Use `credentialType`(optional) prop to specify the credential type . Defaults to `apiKey`.
Use `service`(optional) prop to define the Adobe Product & Service.The preset is `CCEmbedCompanionAPI`.
Use `className` to customize the component's styling using CSS. However, remember that modifying the component's styles with `className` carries certain risks.
### GetCredential.SignIn
`GetCredential.SignIn` is a component utilized to prominently showcase the sign-in page, offering users a straightforward access point to login.
Use `title`(required) to provide a title for the credential.
Use `paragraph`(optional) to describe the credentials.
Use `buttonText`(required) to specify the sign-in button label
### GetCredential.Form
`GetCredential.Form` is a flexible for designing the credential form, ensuring a seamless and personalized user experience.
Use `title`(required) to provide a title for the credential.
Use `paragraph`(optional) to describe the credentials.
### GetCredential.Form.CredentialName
`GetCredential.Form.CredentialName`(required) streamlines credential name structure creation.
Use `label`(optional) defines the label for the credential name.
Use `description`(optional) prop is employed for adding helptext to the credential name.
Use `placeholder`(optional) sets the input field's placeholder for the credential name.
Use `range`(optional) prop to specify the allowed length of the credential name.
Use `contextHelp`(optional) shows a user extra information about the state of either an adjacent component.It's boolean value true or false. The preset is `false`.
Use `contextHelpHeading`(optional) defines the contextHelp heading.
Use `contextHelpText`(optional) shows the extra info about the credentialname.
Use `contextHelpLink`(optional) adds a standalone link.
Use `contextHelpLabelForLink` (optional) prop to specifies the link label.
### GetCredential.Form.AllowedOrigins
`GetCredential.Form.AllowedOrigins`(optional) streamlines credential name structure creation.
Use `label`(optional) defines the label for the domain name.
Use `description`(optional) prop is employed for adding helptext to the domanis.
Use `placeholder`(optional) sets the input field's placeholder for the AllowedOrigins.
Use `contextHelp`(optional) shows a user extra information about the state of either an adjacent component.It's boolean value true or false. By default `false`.
Use `contextHelpHeading`(optional) defines the contextHelp heading.
Use `contextHelpText`(optional) shows the extra info about the credentialname.
Use `contextHelpLink`(optional) adds a standalone link.
Use `contextHelpLabelForLink` (optional) prop to specifies the link label.
### GetCredential.Form.Downloads
`GetCredential.Form.Downloads`(optional) is used to specify the option for downloading code samples.
Use `label`(optional) defines the label for the domain name.
Use `contextHelp`(optional) shows a user extra information about the state of either an adjacent component.It's boolean value true or false. By default `false`.
Use `contextHelpHeading`(optional) defines the contextHelp heading.
Use `contextHelpText`(optional) shows the extra info about the credentialname.
Use `contextHelpLink`(optional) adds a standalone link.
Use `contextHelpLabelForLink` (optional) prop to specifies the link label.
### GetCredential.Form.Download
`GetCredential.Form.Download`(optional) is used to define the available languages and provide download links for code samples.
Use `title` to specify the language title
Use `href` to set the download hyperlink for sample code in zip files.
### GetCredential.Form.Side
`GetCredential.Form.Side`(optional) content is customizable, allowing you to display whatever you prefer based on user needs.
### GetCredential.UnknownError
`GetCredential.UnknownError` (optional) is utilized for displaying unknown errors.
Use `helpLink`(optional) is employed for obtaining assistance.
Use `helpLinkText`(optional) is used to specify the label for the help link.
### GetCredential.Card
`GetCredential.Card`(optional) is employed to present the credential result.
Use `title`(optional) to furnish a title for the credential card.
Use `paragraph`(optional) to provide a description for the credential card.
Use `nextStepsLabel`(optional) is employed to indicate the next steps or actions to be taken.
Use `nextStepsHref`(optional) specifies the hyperlink for the next steps or actions to be taken.
Use `developerConsoleManage`(optional) specifies the label for the developer console
### GetCredential.Side
`GetCredential.Side`(optional) content is customizable, allowing you to display whatever you prefer based on user needs.
```
```
Create the new JS component in the component folder and import the component in the markdown file wherever you want to add credential
For the above code I named like `CreateCredential.js`, You can use the component in the markdown file like the below code
```
import { CreateCredential } from "../components/CreateCredential.js";
...
```
To customize the side component within the `GetCredential` component. In `Credential.css` specify the custom styles you want for the side component.
Import the `Credential.css` file into your JavaScript component `CreateCredential.js` to apply the styles.
```
import './Credential.css';
```
### Toast
Toasts are brief, unobtrusive messages used for user notifications or feedback
```
```
Use `variant`(optional) to specify the toast's variant.The values are `Info`, `Success`, `Neutral`, and `Error`. By default `Neutral`.
Use `message`(optional) to display a message within the toast.
Use `disable`(optional) to prevent the automatic closure of the toast. You can set a specific duration (e.g., 1000 milliseconds) to close it, or manually close the toast when desired.
## Customizations
When using themes, you can take advantage of something called [shadowing](https://www.gatsbyjs.com/docs/themes/shadowing/). This allows you to override the default component included in the theme with a custom one you’ve created.
The Adobe I/O Theme package has a component to render code using the [Prism syntax highlighter](https://prismjs.com/).
With shadowing, you can override the component to provide your own.
If you look at the file tree of your site, you’ll see it looks something like this:
```
root
├─ src/pages
│ ├- index.md
│ └- etc.
├- .env
├─ gatsby-config.js
└─ package.json
```
To enable shadowing, you need to add a folder called `@adobe/gatsby-theme-aio`.
Any file placed in that directory with a path that matches the path of a file from the theme will completely shadow the file.
So the new folder structure with shadowing enabled will look like following:
```
root
├─ src
│ ├- pages
│ │ ├- index.md
│ │ └- etc.
│ └- @adobe
│ └- gatsby-theme-aio
│ └- components
│ └- Code
│ └- index.js
├- .env
├─ gatsby-config.js
└─ package.json
```
You can define your own `Code` components under `src/@adobe/gatsby-theme-aio/components/Code/index.js`.
_Notice omitting the `src` directory in the shadow folder._
### Custom layout
You can build pages without the default layout by setting `layout` to `none` within the page front matter.
The Global Header, Footer, Side Navigation etc. are always shown but anything in between can be customized.
See the [example markdown file](https://raw.githubusercontent.com/adobe/aio-theme/main/example/src/pages/no_layout/index.md).
### Frame
This can be useful if you want to embed pages from another system. The embedded page will be framed between the Global Header and Footer.
Simply set `frameSrc` to the `url` of the external page within the front matter.
See the [example parent page](https://raw.githubusercontent.com/adobe/aio-theme/main/example/src/pages/frame.md) and [child page](https://github.com/adobe/aio-theme/blob/main/example/static/child.html) which leverages the [Penpal](https://github.com/Aaronius/penpal)
library to create a communication channel to exchange information.
### Theming
Currently, you can only define a light or dark theme for Code blocks. By default, Code blocks are displayed in `dark` theme.
To change Code blocks from `dark` to `light` theme, you have to shadow the `theme/index.js` file:
```
export default {
code: 'light'
};
```
## Upgrading
### Locally
To upgrade to the latest version of the theme, simply run `npm update` if you have defined the dependency with a version range selector.
If not, update the version of the dependency by setting the version manually in the `package.json` and run `npm install`.
This will also update the lock file `package-lock.json`.
### Automated
We recommend to setup [GitHub dependabot](https://docs.github.com/en/free-pro-team@latest/github/administering-a-repository/keeping-your-dependencies-updated-automatically) in your site repository.
Simply copy the [dependabot](https://github.com/AdobeDocs/dev-site-documentation-template/blob/main/.github/dependabot.yml) file in your `.github` folder.
The bot will automatically submit pull requests to keep your version of the theme up to date. Please make sure to use a version range selector for your dependencies in your `package.json`.
## Issue tracker
Use the [GitHub issue tracker](https://github.com/adobe/aio-theme/issues) to report issues, ask questions or log feature requests.
Any feedback is welcome !
Please check existing issues before filing anything new.
## Contributing
Contributions are welcomed! Read the [Contributing Guide](./.github/CONTRIBUTING.md) for more information.
See [Conventional Commits](https://conventionalcommits.org/) for commit guidelines.
## Releases
You can check the latest released version of the theme at .
This repository is setup as a monorepo using [lerna](https://github.com/lerna/lerna) for automated publishing to NPM.
Use `GH_TOKEN=[YOUR_GH_TOKEN] lerna version --create-release github --conventional-commits --no-private -m "chore(release): publish"` for publishing the theme on npm.
## Remove GitHub Log an issue feature
By default, any document pages will have "Log an issue/ Edit in Github" feature enabled.
This can be turned off through gatsby-config.js
```
siteMetadata: {
githubIssue: {
removeLogIssue: true,
},
}
```