You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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).
42
42
43
-
1.#### `CodeBlock` component
43
+
All the above components are documented at our [documentation style guide](https://interledger.tech).
44
44
45
-
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:
As this is a shared library, it is a dependency for other projects, specifically all Interledger documentation websites. A good way to check who is using this library is via GitHub search: https://github.com/search?q=%22%40interledger%2Fdocs-design-system%22%3A+&type=code.
50
48
51
-
Use the `<CodeBlock>` component within your content like so:
49
+
Our theme does override a number of Starlight defaults, therefore it is inevitable that if the Starlight internals are modified as they continue to release new features, we will have to make the corresponding updates to this library as well, to make sure nothing breaks. The documentation style guide is a good target to determine if the proposed changes you want to make to the library work correctly or not.
1. Clone both the documentation style guide and this library
70
54
71
-
</CodeBlock>
72
-
````
73
-
74
-
1.#### `Disclosure` component
75
-
76
-
Use this component if you have some content that you want to show/hide via a collapsible container. This component wraps around whatever content you wish to have this expand/collapse behaviour. Note that the `client:load` attribute is required for the functionality to work because this component relies on state.
77
-
78
-
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:
For the specific use-case of displaying multiple code-snippets, it might be worth considering also using the [built-in Starlight `<Tabs>`](https://starlight.astro.build/guides/components#tabs) component:
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.
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.
131
-
132
-
1.#### `LargeImg` component
133
-
134
-
Use this component if you have a diagram or image that is much larger than our available space and you would like users to view the full image in another tab. This adds a link to "View full image" with an external link indicator on the bottom right corner under the image. It takes in a `src` and `alt`, just like a normal `img` element.
135
-
136
-
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:
Use the `<LargeImg>` component within your content like so:
143
-
144
-
```jsx
145
-
<LargeImg src="/img/OMG_A_GIGANTIC_IMG.png" alt="A really large diagram"/>
146
-
```
147
-
148
-
By default, there will be a border around the image, but if you want to remove the border, pass in a `hasBorder={false}` attribute.
149
-
150
-
```jsx
151
-
<LargeImg
152
-
src="/img/OMG_A_GIGANTIC_IMG.png"
153
-
alt="A really large diagram"
154
-
hasBorder={false}
155
-
/>
156
-
```
157
-
158
-
For user doc diagrams, be sure to include the `docs` folder in the path.
159
-
160
-
```jsx
161
-
<LargeImg
162
-
src="/img/docs/OMG_A_GIGANTIC_IMG.png"
163
-
alt="A really large diagram"
164
-
/>
165
-
```
166
-
167
-
1.#### `LinkOut` component
168
-
169
-
Use this component if you need to add an external link to your content that opens in a new tab. This component adds the necessary attributes for external links and adds an external link indicator icon to the end of the link content. The icon can be turned off, if necessary.
170
-
171
-
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:
Starlight does not support Mermaid by default, so you would have to install [remark-mermaidjs](https://github.com/remcohaszing/remark-mermaidjs) on your Starlight site before you can use this component.
194
-
195
-
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.
196
-
197
-
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:
Use the `<MermaidWrapper>` component within your content like so:
204
-
205
-
````jsx
206
-
<MermaidWrapper client:load>
207
-
```mermaid sequenceDiagram Alice ->> Bob: Hello Bob, how are you?
208
-
Bob-->>John: How about you John? Bob--x Alice: I am good thanks! Bob-x
209
-
John: I am good thanks! Note right of John: Bob thinks a long
210
-
<br />
211
-
long time, so long
212
-
<br />
213
-
that the text does
214
-
<br />
215
-
not fit on a row. Bob-->Alice: Checking with John... Alice->John: Yes...
216
-
John, how are you? ```
217
-
</MermaidWrapper>
218
-
````
219
-
220
-
By default, there will be a border around the image, but if you want to remove the border, pass in a `hasBorder={false}` attribute.
221
-
222
-
````jsx
223
-
<MermaidWrapper client:load hasBorder={false}>
224
-
```mermaid sequenceDiagram Alice ->> Bob: Hello Bob, how are you?
225
-
Bob-->>John: How about you John? Bob--x Alice: I am good thanks! Bob-x
226
-
John: I am good thanks! Note right of John: Bob thinks a long
227
-
<br />
228
-
long time, so long
229
-
<br />
230
-
that the text does
231
-
<br />
232
-
not fit on a row. Bob-->Alice: Checking with John... Alice->John: Yes...
233
-
John, how are you? ```
234
-
</MermaidWrapper>
235
-
````
236
-
237
-
1.#### `StylishHeader` component
238
-
239
-
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:
Use the `<StylishHeader>` component within your content like so:
246
-
247
-
```jsx
248
-
<StylishHeader>Wow I'm a stylish header</StylishHeader>
249
-
```
250
-
251
-
1. #### `Tooltip` component
252
-
253
-
Use the tooltip component for adding a short explanation to specific terms. This component is built to be accessible in accordance to the guidance from [WAI Tooltip Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/). Note that the `client:load` attribute is required for the functionality to work because this component relies on state.
254
-
255
-
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:
256
-
257
-
```jsx
258
-
import { Tooltip } from "@interledger/docs-design-system";
<Tooltip content='THISCONTENTISDISPLAYEDINTHETOOLTIPUPONINTERACTION' client:load><span>text that you are trying to explain</span></Tooltip>.
265
-
```
63
+
2. Make the documentation style guide read from the local version of the docs-design-system library by modifying the package.json. This will depend on the file structure of your local machine but it would look something like this:
266
64
267
-
If the text you are trying to explain is also a link to somewhere else, please put the link within the `<Tooltip>` like so:
<Tooltip content='THISCONTENTISDISPLAYEDINTHETOOLTIPUPONINTERACTION' client:load><a href="/URL">text that you are trying to explain</a></Tooltip>.
271
-
```
71
+
3. After you're done with your changes and have tested that all is well, feel free to make a pull request and it will get reviewed, and hopefully merged into the source code. The version will get bumped and all the sites will have to make an update to their dependencies as well.
0 commit comments