[pull] main from adobe:main

.github/workflows/e2e-tests.yml

@@ -18,17 +18,31 @@ on:
  - "cypress/**"
 jobs:
  smoke_tests:
- runs-on: ubuntu-latest
+ container:
+ image: cypress/browsers:node-20.14.0-chrome-126.0.6478.114-1-ff-127.0.1-edge-126.0.2592.61-1
+ options: --user root
+ runs-on: self-hosted
  steps:
  - name: Checkout
- uses: actions/checkout@v3
+ uses: actions/checkout@v4
+
+ - name: 'Create env file'
+ run: |
+ touch ./example/.env
+ echo GATSBY_IMS_SRC="https://auth-stg1.services.adobe.com/imslib/imslib.min.js" >> ./example/.env
+ echo GATSBY_IMS_CONFIG='{"client_id": "stage_adobe_io", "scope": "AdobeID,openid,unified_dev_portal,read_organizations,additional_info.projectedProductContext,additional_info.roles,gnav,read_pc.dma_bullseye,creative_sdk,adobeio_api,service_principals.read,service_principals.write,read_client_secret", "environment": "stg1"}' >> ./example/.env
+ cat ./example/.env
 
  - name: Run Tests
  uses: cypress-io/github-action@v5
  with:
- build: yarn build
- start: yarn serve
- wait-on: 'http://[::1]:9000'
+ start: yarn dev:https:ci
+ wait-on: 'https://localhost.corp.adobe.com:9000'
+ wait-on-timeout: 150
  browser: chrome
  config-file: cypress.config.js
- spec: cypress/e2e/smoke.cy.js
+ spec: |
+ cypress/e2e/smoke.cy.js
+ cypress/e2e/get-credentials.cy.js
+ env:
+ NODE_TLS_REJECT_UNAUTHORIZED: '0'

README.md

@@ -96,7 +96,23 @@ Using a theme, all of your default configuration lives in an npm package.
  - [Writing Enhanced Markdown](#writing-enhanced-markdown)
  - [Metadata with Front matter](#metadata-with-front-matter)
  - [OpenAPI](#openapi)
- - [Redocly API Block](#Redocly API Block)
+ - [Redocly API Block](#RedoclyAPIBlock)
+ - [On-premise license keys](#on-premise-license-keys)
+ - [Local development limitation and workaround](#local-development-limitation-and-workaround)
+ - [Full width page](#full-width-page)
+ - [Displaying long API response descriptions](#displaying-long-api-response-descriptions)
+ - [width (optional)](#width-optional)
+ - [typography (optional)](#typography-optional)
+ - [codeblock (optional)](#codeblock-optional)
+ - [disableSidebar (optional)](#disablesidebar-optional)
+ - [disableSearch (optional)](#disablesearch-optional)
+ - [hideTryItPanel (optional)](#hidetryitpanel-optional)
+ - [scrollYOffset (optional)](#scrollyoffset-optional)
+ - [sortOperationsAlphabetically (optional)](#sortoperationsalphabetically-optional)
+ - [sortTagsAlphabetically (optional)](#sorttagsalphabetically-optional)
+ - [jsonSampleExpandLevel (optional)](#jsonsampleexpandlevel-optional)
+ - [generateCodeSamples (optional)](#generatecodesamples-optional)
+ - [requestInterceptor (optional)](#requestinterceptor-optional)
  - [JSDoc](#jsdoc)
  - [MDX](#mdx)
  - [Modular Content System](#modular-content-system)
@@ -121,6 +137,7 @@ Using a theme, all of your default configuration lives in an npm package.
  - [Table Block](#table-block)
  - [Tabs Block](#tabs-block)
  - [Product Card](#product-card)
+ - [Mini Product Card](#product-card)
  - [Product Card Grid](#product-card-grid)
  - [Resource Card](#resource-card)
  - [MiniResourceCard](#miniresourcecard)
@@ -1076,11 +1093,195 @@ We use [Redoc](https://github.com/Redocly/redoc) to render OpenAPI specs. Simply
 
 </pre>
 
-### Redocly API Block
+### RedoclyAPIBlock
 
-We can now host your own open api yaml files and be rendered by Redocly documents. This way can avoid to iframe in and host our own api yaml files in Redocly.
+```js
+<RedoclyAPIBlock src="URL pointing to your open api yaml file." />
+```
+
+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:
+![redocly-api-block-on-local](docs/images/redocly-api-block-on-local.png)
+
+To test, temporarily deploy to stage:
+![redocly-api-block-on-stage](docs/images/redocly-api-block-on-stage.png)
+
+#### 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%:
+![redocly-api-block-long-description-without-x-summary](docs/images/redocly-api-block-long-description-without-x-summary.png)
+![redocly-api-block-long-description-without-x-summary-yaml](docs/images/redocly-api-block-long-description-without-x-summary-yaml.png)
+
+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:
+![redocly-api-block-long-description-with-x-summary](docs/images/redocly-api-block-long-description-with-x-summary.png)
+![redocly-api-block-long-description-with-x-summary-yaml](docs/images/redocly-api-block-long-description-with-x-summary-yaml.png)
+
+#### width (optional)
+
+```js
+<RedoclyAPIBlock src="URL pointing to your open api yaml file." width="600px" />
+```
+Sets the width (of the right panel). 
+
+Defaults to ```'500px'```
+
+https://redocly.com/docs/api-reference-docs/configuration/theming/#path=rightPanel
+
+#### typography (optional)
+
+```js
+<RedoclyAPIBlock src="URL pointing to your open api yaml file." typography="fontFamily: `serif`, fontSize: '16px'" />
+```
+
+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
+<RedoclyAPIBlock src="URL pointing to your open api yaml file." codeBlock="tokens: { punctuation: { color: 'red ' }}" />
+```
+
+Controls the appearance of code snippets. 
+
+Defaults to ```"tokens: { punctuation: { color: 'white' }}"```
+
+https://redocly.com/docs/api-reference-docs/configuration/theming/#path=codeBlock
+
+#### disableSidebar (optional)
+
+```js
+<RedoclyAPIBlock src="URL pointing to your open api yaml file." disableSidebar />
+```
+
+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
+<RedoclyAPIBlock src="URL pointing to your open api yaml file." disableSearch />
+```
+
+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
+
+#### hideTryItPanel (optional)
+
+```js
+<RedoclyAPIBlock src="URL pointing to your open api yaml file." hideTryItPanel />
+```
+
+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
+<RedoclyAPIBlock src="URL pointing to your open api yaml file." scrollYOffset={64} />
+```
+
+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```
 
-When using this block, GATSBY_REDOCLY_KEY : ${{ secrets.REDOCLY_LICENSE_KEY }} will needs to be added in deploy.yml file in the repo. 
+https://redocly.com/docs/api-reference-docs/configuration/functionality/#theme-object-openapi-schema
+
+
+#### sortOperationsAlphabetically (optional)
+
+```js
+<RedoclyAPIBlock src="URL pointing to your open api yaml file." sortOperationsAlphabetically />
+```
+
+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
+<RedoclyAPIBlock src="URL pointing to your open api yaml file." sortTagsAlphabetically />
+```
+
+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
+<RedoclyAPIBlock src="URL pointing to your open api yaml file." jsonSampleExpandLevel="all" />
+```
+
+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
+<RedoclyAPIBlock src="URL pointing to your open api yaml file." generateCodeSamples="languages: [{ lang: 'curl' }, { lang: 'Node.js' }, { lang: 'JavaScript' }, {lang: 'Python'}]" />
+```
+
+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
+<RedoclyAPIBlock 
+ src="/redocly-test/openapi/openapi.yaml"
+ requestInterceptor="
+ function(req, operation) { 
+ console.log('Args:', req, operation); 
+ return req; 
+ }
+ " 
+```
+
+Configures the request interceptor for the Try it console. As a prerequisite, the Try it console must be enabled in Reference docs (hideTryItPanel must be set to false). When configured, the interceptor can capture the request object and modify it according to specified criteria. Async usage is supported.
+
+Defaults to ``````
+
+Limitations: Due to gatsby and markdown limitations, we can't add comments in the function string nor empty lines.
+
+https://redocly.com/docs/api-reference-docs/configuration/functionality#theme-object-openapi-schema
+https://redocly.com/docs/api-reference-docs/configuration/functionality#example-configuration-with-javascript-library
 
 ### JSDoc
 
@@ -1156,13 +1357,16 @@ 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**
 
 ![hero halfwidth](docs/images/hero-halfwidth.png)
@@ -2470,6 +2674,35 @@ 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
+
+![mini_product_card](docs/images/mini-product-card.png)
+
+```
+ <MiniProductCard slots="image, heading , text , buttons" repeat="4" theme="lightest" inRow="4" variantsType="primary" buttonStyle="outline" />
+
+![Forge the path to customer success](./S_AniConvertToGIF.png)
+
+# 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.
@@ -2534,6 +2767,8 @@ as a dependency in another site, you can run the command `npm install --save ado
 
 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

cypress.config.js

@@ -1,15 +1,21 @@
-const { defineConfig } = require('cypress')
-
-module.exports = defineConfig({
- viewportHeight: 900,
- viewportWidth: 1440,
- e2e: {
- // We've imported your old cypress plugins here.
- // You may want to clean this up later by importing these.
- setupNodeEvents(on, config) {
- return require('./cypress/plugins/index.js')(on, config)
- },
- baseUrl: 'http://localhost:9000',
- specPattern: 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
- },
-})
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+ viewportHeight: 900,
+ viewportWidth: 1440,
+ e2e: {
+ // We've imported your old cypress plugins here.
+ // You may want to clean this up later by importing these.
+ setupNodeEvents(on, config) {
+ return require('./cypress/plugins/index.js')(on, config)
+ },
+ baseUrl: 'https://localhost.corp.adobe.com:9000',
+ specPattern: 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
+ },
+ pageLoadTimeout: 500000,
+ userEmail: 'cypress1@adobe.com',
+ userPassword: 'ScotchB33r&1234567',
+ defaultCommandTimeout: 60000,
+ video: false,
+ chromeWebSecurity: false
+})