[WXP-4953] Launch code playground (script mode) from samples in the documentation site #143

varshini-adiga · 2025-06-30T11:55:31Z

Description

Launch playground from samples in the documentation site
https://jira.corp.adobe.com/browse/WXP-4953

Changes include:

Encoding sample id along with mode and session as a query param and pass it to Express url.
New Try button in the code block.
Script which runs on build to upload samples to FFC.

Related Issue

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

I have signed the Adobe Open Source CLA.
My code follows the code style of this project.
My change requires a change to the documentation.
I have updated the documentation accordingly.
I have read the CONTRIBUTING document.
I have added tests to cover my changes.
All new and existing tests passed.

… playground

into vadiga/launch-samples-deeplink

xerxovksi

I still need to understand what these 2 files do:

src/@adobe/gatsby-theme-aio/components/Code/index.js
src/@adobe/gatsby-theme-aio/components/Code/styles.css

xerxovksi · 2025-09-24T06:47:23Z

.github/workflows/test-pull-request.yml

+          PLAYGROUND_CLIENT_ID: ${{ secrets.PLAYGROUND_CLIENT_ID }}
+          PLAYGROUND_CLIENT_SECRET: ${{ secrets.PLAYGROUND_CLIENT_SECRET }}
+          PLAYGROUND_AUTH_CODE: ${{ secrets.PLAYGROUND_AUTH_CODE }}
+          PLAYGROUND_API_KEY: ${{ secrets.PLAYGROUND_API_KEY }}


Do we really need these to be set with the secrets for the test workflow? Can't they just be empty strings?

xerxovksi · 2025-09-24T06:51:23Z

upload-playground-samples.js

+
+const SCAN_DIRECTORY = "./src/pages";
+const MARKDOWN_EXTENSION = ".md";
+const IMS_BASE_URL = "https://ims-na1-stg1.adobelogin.com";


Why are we using the stage endpoint?

Changed this. Have set these URLs to stage and prod ones in the deploy.yml

xerxovksi · 2025-09-24T06:52:06Z

upload-playground-samples.js

+const MARKDOWN_EXTENSION = ".md";
+const IMS_BASE_URL = "https://ims-na1-stg1.adobelogin.com";
+const IMS_TOKEN_ENDPOINT = "/ims/token/v1";
+const FFC_BASE_URL = "https://ffc-addon-stage.adobe.io/";


Same question - why stage?

Changed this. Have set these URLs to stage and prod ones in the deploy.yml

xerxovksi · 2025-09-24T06:54:39Z

package.json

    "fix:lint": "./node_modules/.bin/markdownlint --config .github/linters/.markdownlint.yml src --fix",
-    "lint": "docker run --rm -e RUN_LOCAL=true --env-file '.github/super-linter.env' -v \"$PWD\":/tmp/lint github/super-linter:slim-v4.10.1"
+    "lint": "docker run --rm -e RUN_LOCAL=true --env-file '.github/super-linter.env' -v \"$PWD\":/tmp/lint github/super-linter:slim-v4.10.1",
+    "upload-playground-samples": "node upload-playground-samples.js"


Suggested change

"upload-playground-samples": "node upload-playground-samples.js"

"_postbuild": "node upload-playground-samples.js"

Have added new build:deploy command which runs the samples

xerxovksi · 2025-09-24T06:55:53Z

package.json

    "dev": "gatsby develop",
    "dev:https": "gatsby develop --https --host localhost.corp.adobe.com --port 9000",
-    "build": "gatsby build",
+    "build": "gatsby build && yarn upload-playground-samples",


Suggested a change below to use _postbuild for syncing the samples. You can remove && ... from here.

Have added new build:deploy command which runs the samples

xerxovksi · 2025-09-24T07:04:19Z

upload-playground-samples.js

+
+/**
+ * Exchange an IMS authorization code for a service token.
+ * @returns access_token.


Suggested change

* @returns access_token.

* @returns Service token.

xerxovksi · 2025-09-24T07:05:40Z

upload-playground-samples.js

+  try {
+    const accessToken = await getImsServiceToken();
+    const url = new URL(
+      `${FFC_PLAYGROUND_ENDPOINT}/${encodeURIComponent(projectId)}`,


Why is encodeURIComponent() required?

Not needed. Removed

xerxovksi · 2025-09-24T07:07:39Z

upload-playground-samples.js

+
+require('dotenv').config();
+
+const fs = require("fs").promises;


Can we use ESM instead?

Consider using fs-extra

xerxovksi · 2025-09-24T07:15:28Z

upload-playground-samples.js

+
+  while ((match = CODE_BLOCK_REGEX.exec(content)) !== null) {
+    const [, language, explicitId, code] = match;
+    const id = explicitId || Math.random().toString(36).substring(2, 8);


Shouldn't id be mandatory? If not, with the random generated id how will we manage updates to the code sample?

xerxovksi · 2025-09-24T07:16:27Z

upload-playground-samples.mjs

+  let match;
+  CODE_BLOCK_REGEX.lastIndex = 0;
+
+  while ((match = CODE_BLOCK_REGEX.exec(content)) !== null) {


I am assuming this does the job :)

…st-pull-request

xerxovksi · 2025-09-29T03:30:30Z

.github/workflows/deploy.yml

          GATSBY_FEDS_PRIVACY_ID: ${{ secrets.AIO_FEDS_PRIVACY_ID }}
          GATSBY_SITE_DOMAIN_URL: https://developer-stage.adobe.com
          NODE_OPTIONS: "--max_old_space_size=8192"
+          IMS_BASE_URL: "https://ims-na1-stg1.adobelogin.com"


Why use stage environments?

Developer docs is deployed on stage. We are planning to hand over the task of adding try tags on relevant samples to devEx team. I feel uploading samples in stage environment will help them in testing the flow.

xerxovksi · 2025-09-29T03:30:54Z

.github/workflows/deploy.yml

          GATSBY_SITE_DOMAIN_URL: https://developer-stage.adobe.com
          NODE_OPTIONS: "--max_old_space_size=8192"
+          IMS_BASE_URL: "https://ims-na1-stg1.adobelogin.com"
+          FFC_BASE_URL: "https://ffc-addon-stage.adobe.io/"


Use the product instance only.

xerxovksi · 2025-09-29T03:32:11Z

src/@adobe/gatsby-theme-aio/components/Code/index.js

+const getLoader = require("prismjs/dependencies");
+const components = require("prismjs/components");
+
+const componentsToLoad = [


Are these copied from some template? Do we need all these here?

Removed unwanted components.

xerxovksi · 2025-09-29T03:35:53Z

package.json

    "dev": "gatsby develop",
    "dev:https": "gatsby develop --https --host localhost.corp.adobe.com --port 9000",
    "build": "gatsby build",
+    "build:deploy": "gatsby build && yarn run postbuild",


Nit: Generally when you name a script as postbuild, it runs on its own after the build.

I am not sure but I guess yarn doesn't run postbuild after build because the post build script is not automatically run after build.
Renamed this command now.

Varshini Adiga and others added 3 commits June 17, 2025 14:10

Add try button in the code block to navigate to Express and open code…

6882b33

… playground

Show try button only on specific code samples

0871428

Remove commented code

f4c4b8e

varshini-adiga changed the title ~~Vadiga/launch samples deeplink~~ [PoC] launch playground from samples Jun 30, 2025

varshini-adiga added 4 commits June 30, 2025 17:27

Remove unused package

ec5921b

Cleanup code

1238d48

Merge branch 'main' of https://github.com/AdobeDocs/express-add-ons-docs

92b1197

into vadiga/launch-samples-deeplink

Replace with css tokens

1de1e8e

varshini-adiga changed the title ~~[PoC] launch playground from samples~~ [WXP-4953] Launch code playground (script mode) from samples in the documentation site Jul 18, 2025

varshini-adiga requested a review from xerxovksi July 21, 2025 11:52

varshini-adiga added 6 commits July 23, 2025 21:01

Changes in the encoding of data

6c97cc9

Script to store code blocks

baa9f13

small change

6f36f4f

Run extract code script as part of build

bf1a9a4

Updates

12d4fbd

Parse attributes in code block

0ee3820

sahilGarg02 requested a review from vamshich13 September 17, 2025 11:04

varshini-adiga added 3 commits September 18, 2025 15:53

FFC API integration

f610db1

Updated yml files

5b0af58

changes to test secrets

6941828

varshini-adiga removed the request for review from vamshich13 September 22, 2025 06:31

varshini-adiga added 3 commits September 22, 2025 13:50

Remove unwanted changes

d00726a

Add line break

1fd6c8b

Remove all todo comments

9164074

xerxovksi reviewed Sep 24, 2025

View reviewed changes

varshini-adiga added 3 commits September 24, 2025 18:04

Changes to fix review comments

d5dcaa0

Include running postbuild as part of build and remove configs from te…

73369af

…st-pull-request

Run script only on deployment

65103da

varshini-adiga requested a review from xerxovksi September 24, 2025 17:44

xerxovksi reviewed Sep 29, 2025

View reviewed changes

Fix review comment

96ce604

varshini-adiga requested a review from xerxovksi October 6, 2025 11:25

	"upload-playground-samples": "node upload-playground-samples.js"
	"_postbuild": "node upload-playground-samples.js"


		require('dotenv').config();

		const fs = require("fs").promises;

[WXP-4953] Launch code playground (script mode) from samples in the documentation site #143

Are you sure you want to change the base?

[WXP-4953] Launch code playground (script mode) from samples in the documentation site #143

Uh oh!

Conversation

varshini-adiga commented Jun 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Issue

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

Checklist:

Uh oh!

xerxovksi left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

varshini-adiga Oct 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

varshini-adiga commented Jun 30, 2025 •

edited

Loading

varshini-adiga Oct 6, 2025 •

edited

Loading