Merge pull request #49 from AdobeDocs/baskar-code

update : code playground & column

Author: BaskarMitrah

src/pages/blocks/code/code-with-try-playground.md

@@ -11,23 +11,54 @@ Create interactive code examples with a "Try" button that allows users to execut
 
 Use the following data attributes after the language identifier:
 
-````
-```javascript-data-playground-session-id="sessionName"-data-playground-mode="playground"-data-playground-session="new"-data-playground-execution-mode="script"-data-playground-url="https://example.com"
+```
+---
+javascript-data-playground-session-id="sessionName"-data-playground-mode="playground"-data-playground-session="new"-data-playground-execution-mode="script"-data-playground-url="https://example.com"
 // your code here
+---
 ```
-````
 
 ## Parameters
 
 - **data-playground-session-id**: Unique identifier for the playground session (e.g., `"createAndFillRectangle"`)
 - **data-playground-mode**: Mode of the playground (typically `"playground"`)
 - **data-playground-session**: Session state, usually `"new"` to create a fresh session
 - **data-playground-execution-mode**: Execution mode, typically `"script"` for script execution
-- **data-playground-url**: URL of the playground environment where code will be executed
+- **data-playground-url**: Prod URL of the playground environment where code will be executed
+- **data-playground-url-stage**: Stage URL of the playground environment where code will be executed
+
+<InlineAlert slots="header, text1, text2, text3, text4"/>
+
+**Note**
+
+You can use two types of playground URLs. If you want to use a common playground for all code playground blocks, you can configure it globally by defining it in the `adp-site-metadata.json`.
+
+First, create a `code-playground.json` file as shown below:
+
+```json
+{
+  "total": 2,
+  "offset": 0,
+  "limit": 2,
+  "data": [
+    {
+      "key": "code-playground-staging-url",
+      "value": "https://stage.projectx.corp.adobe.com/"
+    },
+    {
+      "key": "code-playground-production-url",
+      "value": "https://projectx.corp.adobe.com/"
+    }
+  ],
+  ":type": "sheet"
+}
+```
+
+If you need different playground URLs, you can use the attributes **data-playground-url and data-playground-url-stage**.
 
-## Example
+## Example for attribute
 
-```js-data-playground-session-id="createAndFillRectangle"-data-playground-mode="playground"-data-playground-session="new"-data-playground-execution-mode="script"-data-playground-url="https://stage.projectx.corp.adobe.com/new"
+```js-data-playground-session-id="createAndFillRectangle"-data-playground-mode="playground"-data-playground-session="new"-data-playground-execution-mode="script"-data-playground-url="https://example.com/new"
 const insertionParent = editor.context.insertionParent; // get node to insert content into
 
 const rectangle = editor.createRectangle();

src/pages/blocks/columns/columns-with-reverse.md

@@ -0,0 +1,64 @@
+---
+title: Columns with Reversed Image / Video Layout
+description: Learn how to use the Columns block with the `isReversed` attribute to switch the order of image and text.
+---
+
+# Columns with Image / Video (Reversed)
+
+## Syntax
+
+```markdown
+<Columns slots="image, heading, text, buttons" repeat="3" isReversed="true" />
+
+![Feature 1](../../assets/column.jpg)
+
+### Feature One
+
+Description of the first feature.
+
+[Learn more](https://example.com)
+
+![Feature 2](../../assets/column2.jpg)
+
+### Feature Two
+
+Description of the second feature.
+
+[Learn more](https://example.com)
+
+![Feature 3](../../assets/column3.jpg)
+
+### Feature Three
+
+Description of the third feature.
+
+[Learn more](https://example.com)
+```
+
+## Example
+
+<Columns slots="image, heading, text, buttons" repeat="3" isReversed="true" />
+
+![Feature 1](../../assets/column.jpg)
+
+### Feature One
+
+Description of the first feature.
+
+[Learn more](https://example.com)
+
+![Feature 2](../../assets/column2.jpg)
+
+### Feature Two
+
+Description of the second feature.
+
+[Learn more](https://example.com)
+
+![Feature 3](../../assets/column3.jpg)
+
+### Feature Three
+
+Description of the third feature.
+
+[Learn more](https://example.com)

src/pages/blocks/index.md

@@ -87,7 +87,8 @@ Multiple code block with headings.
 
 Multi-column layouts.
 - [With Image](columns/columns-with-image.md)
-- [With Video](columns/columns-with-video.md) 
+- [With Video](columns/columns-with-video.md)
+- [With Reverse](columns/columns-with-reverse.md)
 
 ### [Details](details/index.md)
 

src/pages/blocks/site-metadata/index.md

@@ -13,9 +13,9 @@ If the file does not exist, components fall back to looking up each configuratio
 
 ```json
 {
-  "total": 3,
+  "total": 4,
   "offset": 0,
-  "limit": 3,
+  "limit": 4,
   "data": [
     {
       "key": "contributors",
@@ -28,6 +28,10 @@ If the file does not exist, components fall back to looking up each configuratio
     {
       "key": "site-wide-banner",
       "value": "src/pages/site-wide-banner.json"
+    },
+    {
+      "key": "code-playground",
+      "value": "src/pages/code-playground.json"
     }
   ],
   ":type": "sheet"
@@ -41,6 +45,7 @@ If the file does not exist, components fall back to looking up each configuratio
 | `contributors` | Path to the contributors JSON file |
 | `get-credentials` | Path to the credential configuration JSON file |
 | `site-wide-banner` | Path to the site-wide banner JSON file |
+| `code-playground` | Path to the code playground JSON file |
 
 ## How It Is Generated
 

src/pages/config.md

@@ -56,6 +56,7 @@
         - [Columns](/blocks/columns/index.md)
             - [Columns with Image](/blocks/columns/columns-with-image.md)
             - [Columns with Video](/blocks/columns/columns-with-video.md)
+            - [Columns with Reverse](/blocks/columns/columns-with-reverse.md)
         - [Details](/blocks/details/index.md)
         - [Discover Block](/blocks/discoverblock/index.md)
         - [Edition](/blocks/edition/index.md)