Endpoint component

This change allows us to document api endpoints using the same layout as seen in the [Figma Design](https://www.figma.com/file/IgRlQWJTyGoZhlF4fVKD6B/Centrapay-Docs-(Tailwind)?type=design&node-id=1654-8412&mode=design&t=qTBa6bhBVBAMyHqN-0).

There are issues with the styling such as the h2 header but we are just focussed on getting the layout correct then will followup with styling later once we have aligned with the designers.

package.json

@@ -30,6 +30,7 @@
     "flexsearch": "^0.7.31",
     "glob": "^8.1.0",
     "gray-matter": "^4.0.3",
+    "jsdom": "^22.1.0",
     "linkinator": "^5.0.2",
     "mdast-util-to-string": "^3.1.1",
     "mermaid": "^9.3.0",
@@ -42,7 +43,6 @@
     "unist-util-find-after": "^4.0.1",
     "unist-util-visit": "^4.1.2",
     "vitest": "^0.28.3",
-    "vue": "^3.2.47",
-    "jsdom": "^22.1.0"
+    "vue": "^3.2.47"
   }
 }

src/__tests__/__snapshots__/links.integration.test.js.snap

@@ -304,8 +304,12 @@ exports[`the build should not break any links 1`] = `
   "/api/managed-integrations#paypal-referral",
   "/api/managed-integrations#top",
   "/api/media-uploads",
+  "/api/media-uploads#attributes",
+  "/api/media-uploads#attributes-1",
   "/api/media-uploads#contents",
+  "/api/media-uploads#create-a-presigned-url-for-media-upload",
   "/api/media-uploads#create-a-presigned-url-for-media-upload-experimental",
+  "/api/media-uploads#get-media-upload-location",
   "/api/media-uploads#get-media-upload-location-experimental",
   "/api/media-uploads#media-upload",
   "/api/media-uploads#media-uploads",

src/components/Code.astro

@@ -0,0 +1,3 @@
+<div>
+  <slot />
+</div>

src/components/Column.astro

@@ -0,0 +1,8 @@
+
+---
+const { sticky = false } = Astro.props;
+---
+
+<div class=`${sticky ? '[&>:first-child]:mt-0 [&>:last-child]:mb-0 xl:sticky xl:top-24' : '[&>:first-child]:mt-0 [&>:last-child]:mb-0'}`>
+  <slot />
+</div>

src/components/Endpoint.astro

@@ -0,0 +1,18 @@
+---
+import Eyebrow from './Eyebrow.astro';
+import Row from './Row.astro';
+import Column from './Column.astro';
+
+const { method, path, experimental = false } = Astro.props;
+---
+
+<Row>
+  <Column>
+    <Eyebrow method={method} path={path}/>
+    <slot/>
+  </Column>
+
+  <Column sticky>
+    <slot name="code"/>
+  </Column>
+</Row>

src/components/Eyebrow.astro

@@ -0,0 +1,24 @@
+---
+const { method, path } = Astro.props;
+const valueColorMap = {
+  GET: 'emerald',
+  POST: 'sky',
+  PUT: 'amber',
+  DELETE: 'rose',
+};
+const color = valueColorMap[method] || 'emerald';
+const colorStyles = {
+  emerald: 'ring-emerald-300 dark:ring-emerald-400/30 bg-emerald-400/10 text-emerald-500 dark:text-emerald-400',
+  sky: 'ring-sky-300 bg-sky-400/10 text-sky-500 dark:ring-sky-400/30 dark:bg-sky-400/10 dark:text-sky-400',
+  amber: 'ring-amber-300 bg-amber-400/10 text-amber-500 dark:ring-amber-400/30 dark:bg-amber-400/10 dark:text-amber-400',
+  rose: 'ring-rose-200 bg-rose-50 text-red-500 dark:ring-rose-500/20 dark:bg-rose-400/10 dark:text-rose-400',
+}
+---
+
+<div>
+  <div class="flex items-center gap-x-3">
+    <span class=`${colorStyles[color]} text-[0.625rem] leading-6 rounded-lg px-1.5 ring-1 ring-inset`>{ method }</span>
+    <span class="h-0.5 w-0.5 rounded-full bg-zinc-300 dark:bg-zinc-600"/>
+    <span class="text-xs text-zinc-400">{ path }</span>
+  </div>
+</div>

src/components/ProseCode.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="my-8 rounded-lg"
+    class="mb-8 rounded-lg"
   >
     <div class="border border-outline-opaque rounded-xl overflow-hidden">
       <div class="flex w-full justify-between items-center border-b border-outline-opaque rounded-xl rounded-b-none bg-surface-secondary text-content-secondary shadow-sm py-2 px-4">

src/components/Row.astro

@@ -0,0 +1,3 @@
+<div class="grid grid-cols-1 items-start gap-x-16 gap-y-10 xl:max-w-none xl:grid-cols-2">
+  <slot />
+</div>

src/content/api/media-uploads.mdx

@@ -8,6 +8,8 @@ nav:
 ---
 import Properties from '../../components/Properties.astro';
 import Property from '../../components/Property.astro';
+import Endpoint from '../../components/Endpoint.astro';
+import Code from '../../components/Code.astro';
 
 ## Model
 
@@ -46,3 +48,80 @@ import Property from '../../components/Property.astro';
     The User or API Key that updated the Media Upload.
   </Property>
 </Properties>
+
+---
+
+<Endpoint
+  method="POST"
+  path="/api/media-uploads"
+  experimental
+>
+  ## Create a presigned URL for Media Upload
+
+  This endpoint allows you to upload a media file to Centrapay. It returns a presigned URL that can be used to download the media file.
+
+  ### Attributes
+  <Properties>
+    <Property name="accountId" type="string">
+      The Media Upload's owning Centrapay Account id.
+    </Property>
+
+    <Property name="mimeType" type="string">
+      The media (MIME) type of the upload.
+    </Property>
+
+    <Property name="fileName" type="string">
+      The file name of the upload.
+    </Property>
+  </Properties>
+
+  <Code slot="code">
+    ```bash
+    curl -X POST https://service.centrapay.com/api/media-uploads \
+      -H "X-Api-Key: $api_key" \
+      -H "Content-Type: application/json" \
+      -d '{
+        "accountId": "Jaim1Cu1Q55uooxSens6yk",
+        "mimeType": "image/png",
+        "fileName": "image.png"
+      }'
+    ```
+
+    ```json
+    {
+      "id": "DKTs3U38hdhfEqwF1JKoT2",
+      "uploadUrl": "https://media-upload.centrapay.com/image.png?jhbdsfau67ewejshb=487hsdjhbdgs743"
+    }
+    ```
+  </Code>
+
+</Endpoint>
+
+---
+
+<Endpoint
+  method="GET"
+  path="/api/media-uploads/{mediaUploadId}/location"
+  experimental
+>
+  ## Get Media Upload Location
+
+  This endpoint allows you to retrieve the upload location of a media file.
+
+  ### Attributes
+  No attributes.
+
+  <Code slot="code">
+    ```bash
+    curl https://service.centrapay.com/api/media-uploads/DKTs3U38hdhfEqwF1JKoT2/location \
+      -H "X-Api-Key: $api_key"
+    ```
+
+    ```json
+    {
+      "url": "https://media-upload.centrapay.com/image.png?jhbdsfau67ewejshb=487hsdjhbdgs743"
+    }
+    ```
+  </Code>
+
+</Endpoint>