Merge pull request #782 from live-codes/docs

edit docs

Author: hatemhosny

docs/docs/getting-started.mdx

@@ -27,8 +27,8 @@ LiveCodes [<abbr title="Software Development Kit">SDK</abbr>](./sdk/index.mdx) i
 
 Install from npm.
 
-```shell
-npm i livecodes
+```bash npm2yarn
+npm install livecodes
 ```
 
 then you can use it like that:

docs/docs/languages/vue.mdx

@@ -408,7 +408,7 @@ Using [Prettier](https://prettier.io/).
 Currently, Vue support has the following limitations:
 
 - SSR is not supported.
-- The [`defineProps()`](https://vuejs.org/guide/components/props#props-declaration) macro cannot infer props from TypeScript types. Props have to be explicitly declared.
+- The [`defineProps()`](https://vuejs.org/guide/components/props#props-declaration) macro cannot infer props from TypeScript types not defined in the same file.
 
 [PRs are welcome](https://github.com/live-codes/livecodes/issues/757).
 

docs/docs/sdk/index.mdx

@@ -31,8 +31,8 @@ This is an example of an editable embedded playground using the SDK.
 This is a single npm package for the SDK which supports JavaScript/TypeScript, React, Vue and Svelte.
 Install the library from npm:
 
-```sh
-npm i livecodes
+```bash npm2yarn
+npm install livecodes
 ```
 
 then it can be used like that:
@@ -116,6 +116,6 @@ A demo page that shows the usage of the SDK can be [found here](https://live-cod
 
 Or edit the SDK playground in LiveCodes. How meta! :)
 
-<LiveCodes import="id/nqdxpnj6uvg" view="result" height="80vh" showCode={false} />
+<LiveCodes import="id/8k6vbxitvb9" config={{ view: 'result' }} height="80vh" showCode={false} />
 
 P.S. You may want to use the "Full Screen" button!

docs/docusaurus.config.ts

@@ -35,6 +35,12 @@ const config: Config = {
             const sidebarItems = await defaultSidebarItemsGenerator(args);
             return excludeSidebarItems(sidebarItems);
           },
+          remarkPlugins: [
+            [
+              require('@docusaurus/remark-plugin-npm2yarn'),
+              { sync: true, converters: ['yarn', 'pnpm', 'bun'] },
+            ],
+          ],
         },
         blog: false,
         theme: {
@@ -220,6 +226,7 @@ const config: Config = {
     prism: {
       theme: lightCodeTheme,
       darkTheme: darkCodeTheme,
+      additionalLanguages: ['bash'],
     },
     algolia: {
       appId: 'H9Z2PKYS80',

docs/package-lock.json

@@ -19,6 +19,7 @@
     "@docusaurus/faster": "3.7.0",
     "@docusaurus/plugin-client-redirects": "3.7.0",
     "@docusaurus/preset-classic": "3.7.0",
+    "@docusaurus/remark-plugin-npm2yarn": "3.7.0",
     "@mdx-js/react": "3.1.0",
     "clsx": "2.1.1",
     "prism-react-renderer": "2.4.1",