From 32867856cc61a6e0a1210249d2f59ef5ac006cfb Mon Sep 17 00:00:00 2001
From: Andy Clifford <andrew.clifford@centrapay.com>
Date: Mon, 9 Oct 2023 15:08:17 +1300
Subject: [PATCH] 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                                  |  4 +-
 .../links.integration.test.js.snap            |  1 +
 src/components/Code.astro                     |  7 ++
 src/components/Column.astro                   |  8 ++
 src/components/Eyebrow.astro                  | 24 ++++++
 src/components/ProseCode.vue                  |  2 +-
 src/components/Row.astro                      |  3 +
 src/content/api/media-uploads.mdx             | 75 +++++++++++++++++++
 8 files changed, 121 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Code.astro
 create mode 100644 src/components/Column.astro
 create mode 100644 src/components/Eyebrow.astro
 create mode 100644 src/components/Row.astro

diff --git a/package.json b/package.json
index 9f1ad841c..444872eba 100644
--- a/package.json
+++ b/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"
   }
 }
diff --git a/src/__tests__/__snapshots__/links.integration.test.js.snap b/src/__tests__/__snapshots__/links.integration.test.js.snap
index b07dd6855..e2a57f969 100644
--- a/src/__tests__/__snapshots__/links.integration.test.js.snap
+++ b/src/__tests__/__snapshots__/links.integration.test.js.snap
@@ -304,6 +304,7 @@ 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#contents",
   "/api/media-uploads#create-a-presigned-url-for-media-upload-experimental",
   "/api/media-uploads#get-media-upload-location-experimental",
diff --git a/src/components/Code.astro b/src/components/Code.astro
new file mode 100644
index 000000000..9b3a660fb
--- /dev/null
+++ b/src/components/Code.astro
@@ -0,0 +1,7 @@
+---
+import ProseCode from "./ProseCode.vue";
+---
+
+<ProseCode>
+  <slot />
+</ProseCode>
diff --git a/src/components/Column.astro b/src/components/Column.astro
new file mode 100644
index 000000000..7eb86336b
--- /dev/null
+++ b/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>
diff --git a/src/components/Eyebrow.astro b/src/components/Eyebrow.astro
new file mode 100644
index 000000000..34fca3d95
--- /dev/null
+++ b/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>
diff --git a/src/components/ProseCode.vue b/src/components/ProseCode.vue
index 72c0a27ff..225f6bcbb 100644
--- a/src/components/ProseCode.vue
+++ b/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">
diff --git a/src/components/Row.astro b/src/components/Row.astro
new file mode 100644
index 000000000..46978294c
--- /dev/null
+++ b/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>
diff --git a/src/content/api/media-uploads.mdx b/src/content/api/media-uploads.mdx
index 5e5b0fca4..12fa96ae8 100644
--- a/src/content/api/media-uploads.mdx
+++ b/src/content/api/media-uploads.mdx
@@ -8,6 +8,9 @@ nav:
 ---
 import Properties from '../../components/Properties.astro';
 import Property from '../../components/Property.astro';
+import Row from '../../components/Row.astro';
+import Column from '../../components/Column.astro';
+import Eyebrow from '../../components/Eyebrow.astro';
 
 ## Model
 
@@ -46,3 +49,75 @@ import Property from '../../components/Property.astro';
     The User or API Key that updated the Media Upload.
   </Property>
 </Properties>
+
+---
+
+<Row>
+  <Column>
+    <Eyebrow method="POST" path="/api/media-uploads"/>
+    ## 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>
+  </Column>
+
+  <Column sticky>
+    ```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"
+    }
+    ```
+  </Column>
+</Row>
+
+---
+
+<Row>
+  <Column>
+    <Eyebrow method="GET" path="/api/media-uploads/{mediaUploadId}/location"/>
+    ## Get Media Upload Location
+    This endpoint allows you to retrieve upload location of a media file.
+
+    ### Attributes
+    No Attributes.
+  </Column>
+
+  <Column sticky>
+    ```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"
+    }
+    ```
+  </Column>
+</Row>