edit docs

Author: hatemhosny

docs/docs/sdk/web-components.mdx

@@ -2,15 +2,33 @@
 
 import LiveCodes from '../../src/components/LiveCodes.tsx';
 
-The Web Components SDK is a thin wrapper around the [JavaScript SDK](js-ts.mdx) to provide an easy to use custom element (`<live-codes>`), yet retaining the full power, by having access to the [SDK methods](js-ts.mdx#sdk-methods).
+The Web Components SDK is a wrapper around the [JavaScript SDK](js-ts.mdx) to provide an easy to use custom element (`<live-codes>`), yet retaining the full power, by having access to the [SDK methods](js-ts.mdx#sdk-methods).
 
 ## Demo
 
 export const webComponentsSDKDemo = {
-  html: `<live-codes height="80vh" params='{"console": "open"}'>\n  <template>\n    <template lang="html">\n      <h1>Hello World!</h1>\n    </template>\n    <style lang="scss">\n      h1 { color: royalblue; }\n    </style>\n    <script lang="ts" active>\n      console.log('hello!');\n    </script>\n  </template>\n</live-codes>\n\n<script src="https://cdn.jsdelivr.net/npm/livecodes@${process.env.SDK_VERSION}/web-components.js"></script>\n`,
+  markup: {
+    language: 'html',
+    content: `<live-codes height="90vh" params='{"console": "open"}'>
+  <template>
+    <template lang="html">
+      <h1>Hello World!</h1>
+    </template>
+    <style lang="scss">
+      h1 { color: royalblue; }
+    </style>
+    <script lang="ts" active>
+      console.log('hello!');
+    </script>
+  </template>
+</live-codes>
+
+<script src="https://cdn.jsdelivr.net/npm/livecodes@${process.env.SDK_VERSION}/web-components.js"></script>
+`,
+  },
 };
 
-<LiveCodes params={webComponentsSDKDemo} height="80vh" />
+<LiveCodes config={webComponentsSDKDemo} height="80vh" />
 
 ## Installation
 
@@ -238,16 +256,14 @@ The following HTML attributes are supported and correspond to [embed options](js
 | `loading`              | `string`  | When to load the playground (`"click"`, `"lazy"`, or `"eager"`).                                                      |
 | `params`               | `string`  | A JSON string representing [URL Query parameters](../configuration/query-params.mdx).                                  |
 | `template`             | `string`  | A [starter template](../features/templates.mdx) to load.                                           |
-| `view`                 | `string`  | Deprecated! The `view` option has been moved to `config.view`. For headless mode use the `headless` attribute.        |
 | `headless`             | `boolean` | Whether to use the headless mode of LiveCodes.                                                                        |
-| `lite`                 | `boolean` | Deprecated! Use `config.mode = "lite"` instead.                                                                       |
 | `height`               | `string`  | Sets the [height of playground container](js-ts.mdx#height) element.                                                  |
 | `data-default-styles`  | `string`  | If set to `"false"`, disables the [default styles](js-ts.mdx#default-styles) applied to the playground container.     |
 
 Example:
 
 ```html title="HTML"
-<live-codes template="react" loading="lazy"></live-codes>
+<live-codes template="react" loading="click"></live-codes>
 
 <script type="module">
   import 'livecodes/web-components';

docs/src/utils.ts

@@ -5,11 +5,11 @@ import siteConfig from '@generated/docusaurus.config';
   ...(globalThis as any).process,
   env: {
     ...(globalThis as any).process?.env,
-    SDK_VERSION: siteConfig.customFields.sdkVersion,
+    SDK_VERSION: siteConfig.customFields?.sdkVersion,
   },
 };
 
-let docsBaseUrl = siteConfig.customFields.docsBaseUrl as string | undefined;
+let docsBaseUrl = siteConfig.customFields?.docsBaseUrl as string | undefined;
 if (docsBaseUrl && !docsBaseUrl.endsWith('/')) {
   docsBaseUrl = docsBaseUrl + '/';
 }