Code Playground phase-3

gatsby-config.js

@@ -146,6 +146,10 @@ module.exports = {
                     title: "BaseNode",
                     path: "references/document-sandbox/document-apis/classes/BaseNode.md",
                   },
+                  {
+                    title: "BitmapImage",
+                    path: "references/document-sandbox/document-apis/classes/BitmapImage.md",
+                  },
                   {
                     title: "ColorUtils",
                     path: "references/document-sandbox/document-apis/classes/ColorUtils.md",
@@ -166,10 +170,22 @@ module.exports = {
                     title: "EllipseNode",
                     path: "references/document-sandbox/document-apis/classes/EllipseNode.md",
                   },
+                  {
+                    title: "ExpressContext",
+                    path: "references/document-sandbox/document-apis/classes/ExpressContext.md",
+                  },
+                  {
+                    title: "ExpressEditor",
+                    path: "references/document-sandbox/document-apis/classes/ExpressEditor.md",
+                  },
                   {
                     title: "ExpressRootNode",
                     path: "references/document-sandbox/document-apis/classes/ExpressRootNode.md",
                   },
+                  {
+                    title: "ExpressViewport",
+                    path: "references/document-sandbox/document-apis/classes/ExpressViewport.md",
+                  },
                   {
                     title: "FillableNode",
                     path: "references/document-sandbox/document-apis/classes/FillableNode.md",
@@ -242,6 +258,10 @@ module.exports = {
                     title: "SolidColorShapeNode",
                     path: "references/document-sandbox/document-apis/classes/SolidColorShapeNode.md",
                   },
+                  {
+                    title: "StandaloneTextContentModel",
+                    path: "references/document-sandbox/document-apis/classes/StandaloneTextContentModel.md",
+                  },
                   {
                     title: "StandaloneTextNode",
                     path: "references/document-sandbox/document-apis/classes/StandaloneTextNode.md",
@@ -262,6 +282,14 @@ module.exports = {
                     title: "TextNode",
                     path: "references/document-sandbox/document-apis/classes/TextNode.md",
                   },
+                  {
+                    title: "TextNodeContentModel",
+                    path: "references/document-sandbox/document-apis/classes/TextNodeContentModel.md",
+                  },
+                  {
+                    title: "ThreadedTextContentModel",
+                    path: "references/document-sandbox/document-apis/classes/ThreadedTextContentModel.md",
+                  },
                   {
                     title: "ThreadedTextNode",
                     path: "references/document-sandbox/document-apis/classes/ThreadedTextNode.md",
@@ -278,10 +306,6 @@ module.exports = {
                     title: "UnknownNode",
                     path: "references/document-sandbox/document-apis/classes/UnknownNode.md",
                   },
-                  {
-                    title: "Viewport",
-                    path: "references/document-sandbox/document-apis/classes/Viewport.md",
-                  },
                   {
                     title: "VisualNode",
                     path: "references/document-sandbox/document-apis/classes/VisualNode.md",
@@ -553,7 +577,29 @@ module.exports = {
           },
           {
             title: "Code Playground",
-            path: "guides/getting_started/code_playground.md",
+            path: "guides/getting_started/code-playground.md",
+            pages: [
+              {
+                title: "Overview",
+                path: "guides/getting_started/code-playground.md",
+              },
+              {
+                title: "Script Mode",
+                path: "guides/getting_started/code-playground-script-mode.md",
+              },
+              {
+                title: "Add-on Mode",
+                path: "guides/getting_started/code-playground-addon-mode.md",
+              },
+              {
+                title: "Workflow & Productivity",
+                path: "guides/getting_started/code-playground-workflow.md",
+              },
+              {
+                title: "Troubleshooting",
+                path: "guides/getting_started/code-playground-troubleshooting.md",
+              },
+            ],
           },
           {
             title: "Local Development",
@@ -575,6 +621,10 @@ module.exports = {
                 title: "VS Code debugging",
                 path: "guides/getting_started/local_development/vs-code.md",
               },
+              {
+                title: "Known Issues & Limitations",
+                path: "guides/getting_started/local_development/known_issues_limitations.md",
+              },
             ],
           },
           {

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

@@ -164,7 +164,7 @@ const Code = ({ children, className = "", theme, metastring = "" }) => {
                   !isMobile && openCodePlayground(children, sampleId)
                 }
               >
-                Try
+                Try in playground
               </ActionButton>
             )}
 

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

@@ -40,7 +40,7 @@
 }
 
 .code-copy-button.with-try {
-  inset-inline-end: var(--spectrum-global-dimension-size-700);
+  inset-inline-end: calc(var(--spectrum-global-dimension-size-2000) + var(--spectrum-global-dimension-size-100));
 }
 
 .code-try-button {
@@ -67,7 +67,7 @@
 }
 
 .code-tooltip-container.with-try {
-  inset-inline-end: calc(var(--spectrum-global-dimension-size-700) + var(--spectrum-global-dimension-size-600) + var(--spectrum-global-dimension-size-125));
+  inset-inline-end: calc(var(--spectrum-global-dimension-size-2000) + var(--spectrum-global-dimension-size-100) + var(--spectrum-global-dimension-size-600) + var(--spectrum-global-dimension-size-125));
 }
 
 .code-tooltip {