From d568a7516820c436f77faf5778e7ed80cf2016d6 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            |  4 +
 src/components/Code.astro                     |  3 +
 src/components/Column.astro                   |  8 ++
 src/components/Endpoint.astro                 | 18 +++++
 src/components/Eyebrow.astro                  | 24 ++++++
 src/components/ProseCode.vue                  |  2 +-
 src/components/Row.astro                      |  3 +
 src/content/api/media-uploads.mdx             | 79 +++++++++++++++++++
 9 files changed, 142 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Code.astro
 create mode 100644 src/components/Column.astro
 create mode 100644 src/components/Endpoint.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..6cd6fe44d 100644
--- a/src/__tests__/__snapshots__/links.integration.test.js.snap
+++ b/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",
diff --git a/src/components/Code.astro b/src/components/Code.astro
new file mode 100644
index 000000000..d16fb0883
--- /dev/null
+++ b/src/components/Code.astro
@@ -0,0 +1,3 @@
+<div>
+  <slot />
+</div>
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/Endpoint.astro b/src/components/Endpoint.astro
new file mode 100644
index 000000000..427af8251
--- /dev/null
+++ b/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>
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..dd365d378 100644
--- a/src/content/api/media-uploads.mdx
+++ b/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>