Merge pull request #532 from player-ui/fix/docs-more

More Doc Fixes

docs/site/BUILD

@@ -36,6 +36,8 @@ build_deps = [
     "//:node_modules/@player-tools/dsl",
     "//:node_modules/@astrojs/starlight-docsearch",
     "//:node_modules/dlv",
+    "//:node_modules/unist-util-visit",
+    "//:node_modules/starlight-package-managers",
     ":node_modules/@player-ui/player",
     ":node_modules/@player-ui/react",
     ":node_modules/@player-ui/reference-assets-plugin-components",

docs/site/astro.config.mjs

@@ -4,6 +4,31 @@ import starlight from "@astrojs/starlight";
 import rehypeMermaid from "rehype-mermaid";
 import react from "@astrojs/react";
 import starlightDocSearch from "@astrojs/starlight-docsearch";
+import { visit } from "unist-util-visit";
+
+export const rehypeLinks = (options) => {
+  let base = options?.base;
+
+  return (ast, file) => {
+    if (typeof base !== "string") return;
+    if (!base.startsWith("/")) base = "/" + base;
+    if (base.length > 1 && base[base.length - 1] === "/")
+      base = base.slice(0, -1);
+
+    visit(ast, "element", function (node, index, parent) {
+      if (node.tagName === "a") {
+        const href = node.properties.href;
+        if (
+          typeof href === "string" &&
+          href.startsWith("/") &&
+          !href.startsWith(base)
+        ) {
+          node.properties.href = base + href;
+        }
+      }
+    });
+  };
+};
 
 export const BASE_PREFIX =
   process.env.NODE_ENV === "production" ? "DOCS_BASE_PATH" : undefined;
@@ -127,6 +152,9 @@ export default defineConfig({
     },
   },
   markdown: {
-    rehypePlugins: [[rehypeMermaid, { strategy: "img-svg", dark: true }]],
+    rehypePlugins: [
+      [rehypeMermaid, { strategy: "img-svg", dark: true }],
+      [rehypeLinks, { base: BASE_PREFIX }],
+    ],
   },
 });

docs/site/src/components/tools/VersionSelector.tsx

@@ -35,7 +35,7 @@ const useGetReleasedVersions = () => {
   return releasedVersions;
 };
 const VersionSelector = (props: VersionSelectorProps) => {
-  const location = props.route;
+  const location = props.route ?? "";
   const released = useGetReleasedVersions();
 
   return (

docs/site/src/content/docs/guides/getting-started.mdx

@@ -3,6 +3,7 @@ title: "Getting Started"
 ---
 
 import PlatformTabs from "../../../components/PlatformTabs.astro";
+import { PackageManagers } from 'starlight-package-managers'
 
 Getting started with Player is simple.
 
@@ -13,19 +14,9 @@ The first dependency you'll need to pull in is the Player itself. Additionally,
 <PlatformTabs>
   <Fragment slot='react'>
 
-You can do this by running
+You can do this by installing the React Player and Reference Assets Packages
 
-```bash
-yarn add @player-ui/react
-yarn add @player-ui/reference-assets-plugin-react
-```
-
-or
-
-```bash
-npm install @player-ui/react
-npm install @player-ui/reference-assets-plugin-react
-```
+<PackageManagers pkg="@player-ui/react @player-ui/reference-assets-plugin-react"/>
 
   </Fragment>
   <Fragment slot='ios'>

docs/site/src/content/docs/index.mdx

@@ -8,10 +8,10 @@ hero:
     file: ../../assets/logo/logo-dark-small.png
   actions:
     - text: Learn More
-      link: /player/about
+      link: ./player/about
       icon: information
     - text: Get Started
-      link: /guides/getting-started/
+      link: ./guides/getting-started/
       icon: right-arrow
       variant: minimal
 ---

docs/site/src/content/docs/plugins/core/common-expressions.mdx

@@ -3,6 +3,7 @@ title: Common Expressions
 ---
 
 import PlatformTabs from "../../../../components/PlatformTabs.astro";
+import { PackageManagers } from 'starlight-package-managers'
 
 This plugin exposes some basic expressions into Player content.
 
@@ -15,9 +16,7 @@ It also serves as a good reference to adding your own custom expressions into Pl
 
 Install the plugin:
 
-```bash
-yarn add @player-ui/common-types-plugin
-```
+<PackageManagers pkg="@player-ui/common-expressions-plugin" />
 
 Add it to Player:
 

docs/site/src/content/docs/plugins/core/common-types.mdx

@@ -3,6 +3,7 @@ title: Common Types
 ---
 
 import PlatformTabs from "../../../../components/PlatformTabs.astro";
+import { PackageManagers } from 'starlight-package-managers'
 
 This plugin exposes some basic `DataTypes`, `validations`, and `formats` into Player content.
 
@@ -15,9 +16,7 @@ It also serves as a good reference to adding your own custom types into Player.
 
 Install the plugin:
 
-```bash
-yarn add @player-ui/common-types-plugin
-```
+<PackageManagers pkg="@player-ui/common-types-plugin" />
 
 Add it to Player:
 

docs/site/src/content/docs/plugins/multiplatform/asset-provider.mdx

@@ -4,6 +4,7 @@ title: Asset Provider Plugin
 
 import PlatformTabs from "../../../../components/PlatformTabs.astro";
 import ContentTabs from "../../../../components/ContentTabs.astro";
+import { PackageManagers } from 'starlight-package-managers'
 
 The Asset Provider Plugin enables users to easily register UI components to render their assets. It's used internally by the [Reference Assets](/assets/reference). The matches follow the same rules as asset transforms (more specific matches take priority).
 
@@ -16,9 +17,7 @@ The Asset Provider Plugin enables users to easily register UI components to rend
 
 Install the plugin:
 
-```bash
-yarn add @player-ui/asset-provider-plugin-react
-```
+<PackageManagers pkg="@player-ui/asset-provider-plugin-react" />
 
 Create an instance, and add it to your Player instance.
 The API is similar to the JavaScript `Map`, and takes a list of `[match, Component]` tuples.

docs/site/src/content/docs/plugins/multiplatform/check-path.mdx

@@ -3,6 +3,7 @@ title: Check Path Plugin
 ---
 
 import PlatformTabs from "../../../../components/PlatformTabs.astro";
+import { PackageManagers } from 'starlight-package-managers'
 
 The Check Path Plugin enables users to query segments of the view tree for contextual rendering or behavior.
 This is best suited to be referenced during the UI rendering phase, where one can make decisions about the rendering of an asset based on where it lies in the tree.
@@ -14,9 +15,7 @@ This is best suited to be referenced during the UI rendering phase, where one ca
 
 Install the plugin:
 
-```bash
-yarn add @player-ui/check-path-plugin
-```
+<PackageManagers pkg="@player-ui/check-path-plugin" />
 
 Add it to Player:
 
@@ -44,11 +43,8 @@ const isCustomThing = checkPathPlugin.hasParentContext("my-asset-id", [
 
 Install the plugin:
 
-```bash
-yarn add @player-ui/check-path-plugin-react
-```
+<PackageManagers pkg="@player-ui/check-path-plugin-react" />
 
-6474792156
 Add it to Player:
 
 ```js

docs/site/src/content/docs/plugins/multiplatform/external-action.mdx

@@ -3,6 +3,7 @@ title: External Action
 ---
 
 import PlatformTabs from "../../../../components/PlatformTabs.astro";
+import { PackageManagers } from 'starlight-package-managers'
 
 The External Action Plugin is an easy way to handle External states from the navigation of a Player flow.
 
@@ -13,9 +14,7 @@ The External Action Plugin is an easy way to handle External states from the nav
 
 Install the plugin:
 
-```bash
-yarn add @player-ui/external-action-plugin
-```
+<PackageManagers pkg="@player-ui/external-action-plugin" />
 
 Create a handler for external actions:
 

docs/site/src/content/docs/tools/storybook.mdx

@@ -7,6 +7,7 @@ import eventsAddonGif from "../../../assets/tools/storybook/events-addon.gif";
 import flowAddonGif from "../../../assets/tools/storybook/flow-addon.gif";
 import docsAddonGif from "../../../assets/tools/storybook/docs-addon.gif";
 import flowResetGif from "../../../assets/tools/storybook/flow-reset.gif";
+import { PackageManagers } from 'starlight-package-managers'
 
 ## Reference Assets
 
@@ -22,9 +23,7 @@ There are a few different parts required to integrate with storybook.
 
 Start by installing `@player-ui/storybook`:
 
-```bash
-yarn add @player-ui/storybook
-```
+<PackageManagers pkg="@player-ui/storybook" />
 
 Next, add `@player-ui/storybook` to the `addons` section in `.storybook/main.js`
 

docs/site/src/content/docs/xlr/usage.mdx

@@ -2,13 +2,15 @@
 title: Using XLR
 ---
 
+import { PackageManagers } from 'starlight-package-managers'
+
+
 # Part 1 - Creating XLRs
 
 XLR creation is done through the Player CLI which can be added to your project like so:
 
-```bash
-yarn install @player-tools/cli
-```
+<PackageManagers pkg="@player-tools/cli" />
+
 
 ## Exporting Base Type Definitions
 
@@ -43,9 +45,7 @@ player xlr compile -m plugin <other options>
 
 To start using the XLR SDK you'll need to install the SDK package
 
-```bash
-yarn install @player-tools/xlr-sdk
-```
+<PackageManagers pkg="@player-tools/xlr-sdk" />
 
 Next, import the SDK 
 

package.json

@@ -171,6 +171,7 @@
     "signale": "^1.4.0",
     "sorted-array": "^2.0.4",
     "source-map-js": "^1.0.2",
+    "starlight-package-managers": "^0.7.0",
     "std-mocks": "^1.0.1",
     "storybook": "^7.6.10",
     "storybook-dark-mode": "3.0.3",
@@ -191,6 +192,7 @@
     "tslib": "^2.6.2",
     "tsup": "^8.0.1",
     "typescript": "5.5.3",
+    "unist-util-visit": "^5.0.0",
     "uuid": "^8.3.2",
     "vite": "^4.0.0",
     "vitest": "^1.0.2",