feat: add external link icon to sidebar

Author: huijing

README.md

@@ -18,7 +18,7 @@ export default defineConfig({
 If you are using them in an Astro layout file, then the import would look like this for the build to not fail:
 
 ```
-import '/node_modules/@interledger/docs-design-system/src/styles/green-theme.css';
+import '/node_modules/@interledger/docs-design-system/src/styles/teal-theme.css';
 ```
 
 We also have a number of documentation-specific helper components that can be imported and used where necessary. For these shared components, if you are using both `CodeBlock` and `Disclosure` on the same page, you can import them both like so:
@@ -29,7 +29,7 @@ import { CodeBlock, Disclosure } from "@interledger/docs-design-system";
 
 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).
 
-The available shared components are documented at our [documentation style guide](https://interledger.tech).
+The available shared components are documented at our [documentation style guide](https://interledger.net).
 
 ## Contributing
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@interledger/docs-design-system",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "type": "module",
   "description": "Shared styles and components used across all Interledger Starlight documentation sites",
   "exports": {

src/styles/ilf-docs.css

@@ -95,6 +95,13 @@
   padding: var(--space-2xs) var(--sl-sidebar-item-padding-inline);
 }
 
+.sidebar-content [data-icon="external"]::after {
+  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18"><path stroke="hsl(221,8%,56%)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 3H3a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4M11 1h6m0 0v6m0-6L7 11"/></svg>');
+  height: 0.75em;
+  width: 0.75em;
+  display: inline-block;
+}
+
 .sidebar-content a[aria-current="page"],
 .sidebar-content a[aria-current="page"]:hover,
 .sidebar-content a[aria-current="page"]:focus {
@@ -514,6 +521,12 @@ input:not([type="submit"]):not([type="file"]):focus {
   }
 }
 
+@media screen and (min-width: 80rem) {
+  .expressive-code {
+    max-width: 48rem;
+  }
+}
+
 /* Footnote styles */
 .footnotes.footnotes.footnotes {
   margin-block-start: var(--space-l);