feat: add documentation for external link icon (#39)

package.json

@@ -9,9 +9,9 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/starlight": "^0.22.0",
-    "@interledger/docs-design-system": "^0.4.0",
-    "astro": "^4.7.0",
+    "@astrojs/starlight": "^0.22.1",
+    "@interledger/docs-design-system": "^0.5.0",
+    "astro": "^4.7.1",
     "rehype-mathjax": "^6.0.0",
     "remark-math": "^6.0.0",
     "sharp": "^0.33.3"

src/content/docs/content/global.mdx

@@ -168,6 +168,24 @@ For example:
   - Monetization events
     - MonetizationEvent
 
+## Sidebar external links
+
+If an external link is required in the sidebar, you can make use of Astro's [sidebar `attrs` property](https://starlight.astro.build/guides/sidebar/#custom-html-attributes) to open the link in a new tab and also add an indicator icon to show the link is external.
+
+```js
+sidebar: [
+  {
+    label: 'Types of Dinosaurs',
+    link: 'https://www.amnh.org/dinosaurs/types-of-dinosaurs',
+    attrs: {
+      target: '_blank',
+      rel: 'noopener noreferrer',
+      'data-icon': 'external'
+    },
+  },
+],
+```
+
 ## Tooltips
 
 The [Tooltip](/shared/tooltip) component allows you to add additional text to a word or phrase. The text appears when you hover your cursor over the <Tooltip content='This is an example tooltip' client:load><span>question mark</span></Tooltip>.