Small content updates

astro.config.mjs

@@ -33,6 +33,12 @@ export default defineConfig({
             directory: "components",
           },
         },
+        {
+          label: "Classes",
+          autogenerate: {
+            directory: "classes",
+          },
+        },
       ],
     }),
   ],

src/content/config.ts

@@ -1,7 +1,7 @@
-import { defineCollection } from 'astro:content';
-import { docsSchema, i18nSchema } from '@astrojs/starlight/schema';
+import { defineCollection } from "astro:content";
+import { docsSchema, i18nSchema } from "@astrojs/starlight/schema";
 
 export const collections = {
-	docs: defineCollection({ schema: docsSchema() }),
-	i18n: defineCollection({ type: 'data', schema: i18nSchema() }),
+  docs: defineCollection({ schema: docsSchema() }),
+  i18n: defineCollection({ type: "data", schema: i18nSchema() }),
 };

src/content/docs/classes/img-outline.mdx

@@ -0,0 +1,17 @@
+---
+title: img-outline
+---
+
+import { LinkOut } from "@interledger/docs-design-system";
+
+Use the `img-outline` class to add a border to an image. The border is 1px solid gray with rounded edges and a bit of a drop shadow.
+
+```html
+<img
+  src="/img/snippets/view-keys.png"
+  alt="Alt text goes here"
+  class="img-outline"
+/>
+```
+
+See the <LinkOut href='https://webmonetization.org/docs/intro/web-monetization-flow/'>Web Monetization flow sequence diagram</LinkOut> for an example.

src/content/docs/components/snippets.mdx

@@ -0,0 +1,21 @@
+---
+title: Snippet
+---
+
+:::danger
+HJ is still building out this component to work the way we need it to.
+:::
+
+## Usage
+
+Import the `Snippets` component like so:
+
+```jsx
+import Snippet from "/src/components/Snippet.astro";
+```
+
+Use the `<Snippet>` component within your content like so:
+
+```
+<Snippet source='https://raw.githubusercontent.com/interledger/open-payments-snippets/main/incoming-payment/incoming-payment-create.ts' />
+```

tsconfig.json

@@ -4,4 +4,4 @@
     "jsx": "react-jsx",
     "jsxImportSource": "react"
   }
-}
+}