use JSON syntax for onboarding options metadata

docs/contributing/pages/components.mdx

@@ -248,17 +248,17 @@ Attributes:
 If you're writing product feature specific docs, you can specify code block `onboardingOptions` metadata:
 
 ````markdown
-```go {onboardingOptions: {performance: '13-17'}}
+```go {"onboardingOptions": {"performance": "13-17"}}
 // your code here
 ```
 ````
 
-the general syntax is `onboardingOptions: {[feature_id: 'range'}` where `feature` is the feature id
+the general syntax is `{"onboardingOptions": {"feature": "range"}}` where `feature` is the feature id
 and `range` is the corresponding line range (similar to the line highlighting syntax).
 
 You can specify multiple features by separating them with a comma:
 
-`{onboardingOptions: {performance: '13-17', profiling: '5-6'}}`
+`{"onboardingOptions": {"performance": "13-17", "profiling": "5-6"}}`
 
 The range visibility will be controlled by the `OnboardingOptionButtons` component:
 
@@ -283,7 +283,7 @@ The range visibility will be controlled by the `OnboardingOptionButtons` compone
 or a string (one of these `id`s 👆) for convenience when using defaults.
 
 <Alert level="warning" title="Important">
-  If the `id` includes a hyphen, you should wrap it in quotes (eg `'error-monitoring'` or `'session-replay'`).
+  The underlying implementation relies on the `onboardingOptions` metadata in the code blocks to be valid JSON syntax.
 </Alert>
 
 - default values: `disabled: false` and `checked: false`.
@@ -298,7 +298,7 @@ Example (output of the above):
   dontStick
 />
 
-```go {onboardingOptions: {performance: '13-17'}}
+```go {"onboardingOptions": {"performance": "13-17"}}
 import (
 	"fmt"
 	"net/http"

docs/platforms/go/guides/gin/index.mdx

@@ -27,7 +27,7 @@ go get github.com/getsentry/sentry-go/gin
 
 <SignInNote />
 
-```go {onboardingOptions: {performance: '13-17'}}
+```go {"onboardingOptions": {"performance": "13-17"}}
 import (
 	"fmt"
 	"net/http"

docs/platforms/php/index.mdx

@@ -58,7 +58,7 @@ To capture all errors, even the one during the startup of your application, you
 
 <SignInNote />
 
-```php {onboardingOptions: {performance: '3-4', profiling: '5-6'}}
+```php {"onboardingOptions": {"performance": "3-4", "profiling": "5-6"}}
 \Sentry\init([
   'dsn' => '___PUBLIC_DSN___' ,
   // Specify a fixed sample rate

src/rehype-onboarding-lines.js

@@ -59,17 +59,15 @@ const parseLines = meta => {
  */
 const getOptionForLine = meta => {
   // match the onboardingOptions object, but avoid `other stuff`
-  // {onboardingOptions: {performance: '1, 3-4', profiling: '5-6'}} {other stuff}
-  const optionsRE = /{onboardingOptions:\s*({[^}]*})\s*}/;
+  const optionsRE = /{"onboardingOptions":\s*({[^}]*})\s*}/;
   let linesForOptions = {};
   const options = optionsRE.exec(meta)?.[1];
   if (!options) {
     return () => undefined;
   }
 
   // eval provides the convenience of not having to wrap the object properties in quotes
-  // eslint-disable-next-line no-eval
-  const parsedOptions = eval(`(${options})`);
+  const parsedOptions = JSON.parse(options);
   linesForOptions = Object.keys(parsedOptions).reduce((acc, key) => {
     acc[key] = parseLines(parsedOptions[key]);
     return acc;