ref(getting-started): svelte content blocks

static/app/gettingStartedDocs/javascript/angular.tsx

@@ -4,7 +4,7 @@ import widgetCallout from 'sentry/components/onboarding/gettingStartedDoc/feedba
 import TracePropagationMessage from 'sentry/components/onboarding/gettingStartedDoc/replay/tracePropagationMessage';
 import {
   type BasePlatformOptions,
-  type Configuration,
+  type ContentBlock,
   type Docs,
   type DocsParams,
   type OnboardingConfig,
@@ -214,54 +214,11 @@ export const appConfig: ApplicationConfig = {
 };
 `;
 
-const getVerifySnippetTemplate = () => `
-<button (click)="throwTestError()">Test Sentry Error</button>
-`;
-
 const getVerifySnippetComponent = () => `
 public throwTestError(): void {
   throw new Error("Sentry Test Error");
 }`;
 
-function getVerifyConfiguration(): Configuration {
-  return {
-    description: t(
-      'To verify that everything is working as expected, you can trigger a test error in your app. As an example we will add a button that throws an error when being clicked to your main app component.'
-    ),
-    configurations: [
-      {
-        description: tct(
-          'First add the button element to your [code:app.component.html]:',
-          {code: <code />}
-        ),
-        code: [
-          {
-            label: 'HTML',
-            value: 'html',
-            language: 'html',
-            filename: 'app.component.html',
-            code: getVerifySnippetTemplate(),
-          },
-        ],
-      },
-      {
-        description: tct('Then, in your [code:app.component.ts] add the event handler:', {
-          code: <code />,
-        }),
-        code: [
-          {
-            label: 'TypeScript',
-            value: 'typescript',
-            language: 'typescript',
-            filename: 'app.component.ts',
-            code: getVerifySnippetComponent(),
-          },
-        ],
-      },
-    ],
-  };
-}
-
 const getInstallConfig = () => [
   {
     language: 'bash',
@@ -288,6 +245,27 @@ const getInstallConfig = () => [
   },
 ];
 
+const installSnippetBlock: ContentBlock = {
+  type: 'code',
+  tabs: [
+    {
+      label: 'npm',
+      language: 'bash',
+      code: 'npm install --save @sentry/angular',
+    },
+    {
+      label: 'yarn',
+      language: 'bash',
+      code: 'yarn add @sentry/angular',
+    },
+    {
+      label: 'pnpm',
+      language: 'bash',
+      code: 'pnpm install @sentry/angular',
+    },
+  ],
+};
+
 const onboarding: OnboardingConfig<PlatformOptions> = {
   introduction: () =>
     tct(
@@ -299,29 +277,44 @@ const onboarding: OnboardingConfig<PlatformOptions> = {
   install: () => [
     {
       type: StepType.INSTALL,
-      description: tct(
-        'Add the Sentry SDK as a dependency using [code:npm], [code:yarn] or [code:pnpm]:',
-        {code: <code />}
-      ),
-      configurations: getInstallConfig(),
+      content: [
+        {
+          type: 'text',
+          text: tct(
+            'Add the Sentry SDK as a dependency using [code:npm], [code:yarn] or [code:pnpm]:',
+            {code: <code />}
+          ),
+        },
+        installSnippetBlock,
+      ],
     },
   ],
   configure: (params: Params) => [
     {
       type: StepType.CONFIGURE,
-      configurations: [
+      content: [
         {
-          description: tct(
+          type: 'text',
+          text: tct(
             `Initialize the Sentry Angular SDK in your [code:main.ts] file as early as possible, before initializing Angular:`,
             {
               code: <code />,
             }
           ),
-          language: 'javascript',
-          code: getSdkSetupSnippet(params),
         },
         {
-          description: isModuleConfig(params)
+          type: 'code',
+          tabs: [
+            {
+              label: 'JavaScript',
+              language: 'javascript',
+              code: getSdkSetupSnippet(params),
+            },
+          ],
+        },
+        {
+          type: 'text',
+          text: isModuleConfig(params)
             ? tct(
                 "Register the Sentry Angular SDK's ErrorHandler and Tracing providers in your [code:app.module.ts] file:",
                 {code: <code />}
@@ -330,10 +323,18 @@ const onboarding: OnboardingConfig<PlatformOptions> = {
                 "Register the Sentry Angular SDK's ErrorHandler and Tracing providers in your [code:app.config.ts] file:",
                 {code: <code />}
               ),
-          language: 'javascript',
-          code: isModuleConfig(params)
-            ? getConfigureAppModuleSnippet()
-            : getConfigureAppConfigSnippet(),
+        },
+        {
+          type: 'code',
+          tabs: [
+            {
+              label: 'JavaScript',
+              language: 'javascript',
+              code: isModuleConfig(params)
+                ? getConfigureAppModuleSnippet()
+                : getConfigureAppConfigSnippet(),
+            },
+          ],
         },
       ],
     },
@@ -345,10 +346,52 @@ const onboarding: OnboardingConfig<PlatformOptions> = {
   verify: () => [
     {
       type: StepType.VERIFY,
-      configurations: [
-        getVerifyConfiguration(),
+      content: [
+        {
+          type: 'text',
+          text: t(
+            'To verify that everything is working as expected, you can trigger a test error in your app. As an example we will add a button that throws an error when being clicked to your main app component.'
+          ),
+        },
+        {
+          type: 'text',
+          text: tct('First add the button element to your [code:app.component.html]:', {
+            code: <code />,
+          }),
+        },
+        {
+          type: 'code',
+          tabs: [
+            {
+              label: 'HTML',
+              value: 'html',
+              language: 'html',
+              filename: 'app.component.html',
+              code: '<button (click)="throwTestError()">Test Sentry Error</button>',
+            },
+          ],
+        },
+        {
+          type: 'text',
+          text: tct('Then, in your [code:app.component.ts] add the event handler:', {
+            code: <code />,
+          }),
+        },
+        {
+          type: 'code',
+          tabs: [
+            {
+              label: 'TypeScript',
+              value: 'typescript',
+              language: 'typescript',
+              filename: 'app.component.ts',
+              code: getVerifySnippetComponent(),
+            },
+          ],
+        },
         {
-          description: t(
+          type: 'text',
+          text: t(
             "After clicking the button, you should see the error on Sentry's Issues page."
           ),
         },

static/app/gettingStartedDocs/javascript/astro.tsx

@@ -5,6 +5,7 @@ import crashReportCallout from 'sentry/components/onboarding/gettingStartedDoc/f
 import widgetCallout from 'sentry/components/onboarding/gettingStartedDoc/feedback/widgetCallout';
 import TracePropagationMessage from 'sentry/components/onboarding/gettingStartedDoc/replay/tracePropagationMessage';
 import type {
+  ContentBlock,
   Docs,
   DocsParams,
   OnboardingConfig,
@@ -70,7 +71,7 @@ const getVerifySnippet = () => `
   document.querySelector("#error-button").addEventListener("click", handleClick);
 </script>
 `;
-
+// TODO: Remove once the other product areas support content blocks
 const getInstallConfig = () => [
   {
     type: StepType.INSTALL,
@@ -96,6 +97,17 @@ const getInstallConfig = () => [
   },
 ];
 
+const installSnippetBlock: ContentBlock = {
+  type: 'code',
+  tabs: [
+    {
+      label: 'bash',
+      language: 'bash',
+      code: 'npx astro add @sentry/astro',
+    },
+  ],
+};
+
 const onboarding: OnboardingConfig = {
   introduction: () => (
     <Fragment>
@@ -114,19 +126,39 @@ const onboarding: OnboardingConfig = {
       </p>
     </Fragment>
   ),
-  install: () => getInstallConfig(),
+  install: () => [
+    {
+      type: StepType.INSTALL,
+      content: [
+        {
+          type: 'text',
+          text: tct(
+            'Install the [code:@sentry/astro] package with the [code:astro] CLI:',
+            {
+              code: <code />,
+            }
+          ),
+        },
+        installSnippetBlock,
+      ],
+    },
+  ],
   configure: (params: Params) => [
     {
       type: StepType.CONFIGURE,
-      description: tct(
-        'Open up your [astroConfig:astro.config.mjs] file and configure the DSN, and any other settings you need:',
+      content: [
         {
-          astroConfig: <code />,
-        }
-      ),
-      configurations: [
+          type: 'text',
+          text: tct(
+            'Open up your [astroConfig:astro.config.mjs] file and configure the DSN, and any other settings you need:',
+            {
+              astroConfig: <code />,
+            }
+          ),
+        },
         {
-          code: [
+          type: 'code',
+          tabs: [
             {
               label: 'JavaScript',
               value: 'javascript',
@@ -136,24 +168,27 @@ const onboarding: OnboardingConfig = {
           ],
         },
         {
-          description: tct(
+          type: 'text',
+          text: tct(
             'Add your Sentry auth token to the [authTokenEnvVar:SENTRY_AUTH_TOKEN] environment variable:',
             {
               authTokenEnvVar: <code />,
             }
           ),
-          language: 'bash',
-          code: [
+        },
+        {
+          type: 'code',
+          tabs: [
             {
-              value: 'bash',
-              language: 'bash',
               label: 'bash',
-              code: `SENTRY_AUTH_TOKEN=___ORG_AUTH_TOKEN___`,
+              language: 'bash',
+              code: 'SENTRY_AUTH_TOKEN=___ORG_AUTH_TOKEN___',
             },
           ],
         },
         {
-          description: tct(
+          type: 'text',
+          text: tct(
             'You can further customize your SDK by [manualSetupLink:manually initializing the SDK].',
             {
               manualSetupLink: (
@@ -168,12 +203,16 @@ const onboarding: OnboardingConfig = {
   verify: () => [
     {
       type: StepType.VERIFY,
-      description: t(
-        'Then throw a test error anywhere in your app, so you can test that everything is working:'
-      ),
-      configurations: [
+      content: [
         {
-          code: [
+          type: 'text',
+          text: t(
+            'Then throw a test error anywhere in your app, so you can test that everything is working:'
+          ),
+        },
+        {
+          type: 'code',
+          tabs: [
             {
               label: 'Astro',
               value: 'html',