Merge pull request #803 from centrapay/endpoint-component

Endpoint component

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/CodeGroup.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-examples"/>
+  </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 CodeGroup from '../../components/CodeGroup.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>
+
+  <CodeGroup slot="code-examples">
+    ```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"
+    }
+    ```
+  </CodeGroup>
+
+</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.
+
+  <CodeGroup slot="code-examples">
+    ```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"
+    }
+    ```
+  </CodeGroup>
+
+</Endpoint>