Migrate theme to use npm package (interledger#1916)

Author: huijing

packages/documentation/README.md

@@ -52,22 +52,25 @@ Refer to the Starlight documentation on [authoring content](https://starlight.as
 
 ### Docs components
 
-We have extracted some of the commonly repeated patterns within the documentation pages into custom docs components that can be reused.
+We have extracted some of the commonly repeated patterns within the documentation pages into custom docs components that can be reused. There are components which are shared across all our Starlight documentation sites and those which are specific to Web Monetization only. This will determine what the import path is.
 
 - [CodeBlock](#codeblock-component)
 - [Disclosure](#disclosure-component)
 - [Hidden](#hidden-component)
 - [LargeImg](#largeimg-component)
 - [LinkOut](#linkout-component)
+- [MermaidWrapper](#mermaidwrapper-component)
 - [StylishHeader](#stylishheader-component)
 - [Tooltip](#tooltip-component)
 
+For more information about importing things in Javascript, please refer to [import on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import).
+
 1. #### `CodeBlock` component
 
    Use this component if you wish to add a title to your code block. It takes a `title` attribute, which will be displayed above the code. To use it, your docs page must be in `.mdx` format. Please change the format from `.md` to `.mdx` if necessary. All your existing markdown will still be supported without issue. Import the `CodeBlock` component like so:
 
-   ```
-   import CodeBlock from '/src/components/docs/CodeBlock'
+   ```jsx
+   import { CodeBlock } from '@interledger/docs-design-system'
    ```
 
    Use the `<CodeBlock>` component within your content like so:
@@ -100,7 +103,7 @@ We have extracted some of the commonly repeated patterns within the documentatio
    To use it, your docs page must be in `.mdx` format. Please change the format from `.md` to `.mdx` if necessary. All your existing markdown will still be supported without issue. Import the `Disclosure` component like so:
 
    ```jsx
-   import Disclosure from '/src/components/docs/Disclosure'
+   import { Disclosure } from '@interledger/docs-design-system'
    ```
 
    Use the `<Disclosure>` component within your content like so:
@@ -145,6 +148,10 @@ We have extracted some of the commonly repeated patterns within the documentatio
 
    Use this component to hide content that is temporarily not ready to be shown to the public. This is not meant for long-term use, but a stop-gap when the current implementation is still far away from our documentation/specifications, and the content we have will be relevant but in the future.
 
+   ```jsx
+   import { Hidden } from '@interledger/docs-design-system'
+   ```
+
    Unfortunately, due to the nature of how the ToC on the right is generated, if we want to hide an entire section (including the header), we will have to manually hide the section heading by either commenting it out or deleting it.
 
 1. #### `LargeImg` component
@@ -154,7 +161,7 @@ We have extracted some of the commonly repeated patterns within the documentatio
    To use it, your docs page must be in `.mdx` format. Please change the format from `.md` to `.mdx` if necessary. All your existing markdown will still be supported without issue. Import the `LargeImg` component like so:
 
    ```jsx
-   import LargeImg from '/src/components/docs/LargeImg'
+   import { LargeImg } from '@interledger/docs-design-system'
    ```
 
    Use the `<LargeImg>` component within your content like so:
@@ -163,6 +170,16 @@ We have extracted some of the commonly repeated patterns within the documentatio
    <LargeImg src='/img/OMG_A_GIGANTIC_IMG.png' alt='A really large diagram' />
    ```
 
+   By default, there will be a border around the image, but if you want to remove the border, pass in a `hasBorder={false}` attribute.
+
+   ```jsx
+   <LargeImg
+     src='/img/OMG_A_GIGANTIC_IMG.png'
+     alt='A really large diagram'
+     hasBorder={false}
+   />
+   ```
+
    For user doc diagrams, be sure to include the `docs` folder in the path.
 
    ```jsx
@@ -179,7 +196,7 @@ We have extracted some of the commonly repeated patterns within the documentatio
    To use it, your docs page must be in `.mdx` format. Please change the format from `.md` to `.mdx` if necessary. All your existing markdown will still be supported without issue. Import the `LinkOut` component like so:
 
    ```jsx
-   import LinkOut from '/src/components/docs/LinkOut'
+   import { LinkOut } from '@interledger/docs-design-system'
    ```
 
    Use the `<LinkOut>` component within your content like so:
@@ -196,12 +213,56 @@ We have extracted some of the commonly repeated patterns within the documentatio
    </LinkOut>
    ```
 
+1. #### `MermaidWrapper` component
+
+   Use this component if your Mermaid diagram is much larger than our available space and you would like users to view the full diagram in another tab. This adds "View full diagram" button with an external link indicator on the bottom right corner under the diagram. Note that the `client:load` attribute is required for the functionality to work because this component relies on state.
+
+   To use it, your docs page must be in `.mdx` format. Please change the format from `.md` to `.mdx` if necessary. All your existing markdown will still be supported without issue. Import the `MermaidWrapper` component like so:
+
+   ```jsx
+   import { MermaidWrapper } from '@interledger/docs-design-system'
+   ```
+
+   Use the `<MermaidWrapper>` component within your content like so:
+
+   ````jsx
+   <MermaidWrapper client:load>
+     ```mermaid sequenceDiagram Alice ->> Bob: Hello Bob, how are you?
+     Bob-->>John: How about you John? Bob--x Alice: I am good thanks! Bob-x
+     John: I am good thanks! Note right of John: Bob thinks a long
+     <br />
+     long time, so long
+     <br />
+     that the text does
+     <br />
+     not fit on a row. Bob-->Alice: Checking with John... Alice->John: Yes...
+     John, how are you? ```
+   </MermaidWrapper>
+   ````
+
+   By default, there will be a border around the image, but if you want to remove the border, pass in a `hasBorder={false}` attribute.
+
+   ````jsx
+   <MermaidWrapper client:load hasBorder={false}>
+     ```mermaid sequenceDiagram Alice ->> Bob: Hello Bob, how are you?
+     Bob-->>John: How about you John? Bob--x Alice: I am good thanks! Bob-x
+     John: I am good thanks! Note right of John: Bob thinks a long
+     <br />
+     long time, so long
+     <br />
+     that the text does
+     <br />
+     not fit on a row. Bob-->Alice: Checking with John... Alice->John: Yes...
+     John, how are you? ```
+   </MermaidWrapper>
+   ````
+
 1. #### `StylishHeader` component
 
    Use this component if you wish to create a stylized heading that does not use the heading elements such that it will not appear in the ToC right sidebar. To use it, your docs page must be in `.mdx` format. Please change the format from `.md` to `.mdx` if necessary. All your existing markdown will still be supported without issue. Import the `StylishHeader` component like so:
 
    ```jsx
-   import StylishHeader from '/src/components/docs/StylishHeader'
+   import { StylishHeader } from '@interledger/docs-design-system'
    ```
 
    Use the `<StylishHeader>` component within your content like so:
@@ -217,7 +278,7 @@ We have extracted some of the commonly repeated patterns within the documentatio
    To use it, your docs page must be in `.mdx` format. Please change the format from `.md` to `.mdx` if necessary. All your existing markdown will still be supported without issue. Import the `Tooltip` component like so:
 
    ```jsx
-   import Tooltip from '/src/components/docs/Tooltip'
+   import { Tooltip } from '@interledger/docs-design-system'
    ```
 
    Use the `<Tooltip>` component within your content like so:

packages/documentation/astro.config.mjs

@@ -20,7 +20,11 @@ export default defineConfig({
     // overrideIntegration(), # TODO: figure out the path problem for this plugin
     starlight({
       title: 'Rafiki',
-      customCss: ['./src/styles/ilf-docs.css', './src/styles/rafiki.css'],
+      customCss: [
+        './node_modules/@interledger/docs-design-system/src/styles/orange-theme.css',
+        './node_modules/@interledger/docs-design-system/src/styles/ilf-docs.css',
+        './src/styles/rafiki.css'
+      ],
       head: [
         {
           tag: 'script',

packages/documentation/docs/apis/auth/enums.md

@@ -11,11 +11,12 @@
   "dependencies": {
     "@astrojs/react": "^3.0.2",
     "@astrojs/starlight": "^0.10.0",
+    "@interledger/docs-design-system": "^0.0.12",
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
-    "astro": "3.1.0",
-    "astro-graphql-plugin": "^0.0.9",
-    "graphql": "^16.8.1",
+    "astro": "3.1.1",
+    "astro-graphql-plugin": "^0.1.0",
+    "graphql": "^16.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rehype-mathjax": "^4.0.3",