Add badge component

src/assets/css/colors.js

@@ -32,7 +32,7 @@ const colors = {
     'content-inverse-secondary': '#E5E7EB',
     'content-inverse-tertiary': '#D1D5DB',
     'content-disabled': '#9CA3AF',
-    'content-accent': '#FF5C00',
+    'content-accent': '#C6440E',
     'content-on-color': '#FFFFFF',
     'content-negative': '#B91C1C',
     'content-warning': '#D97706',

src/components/Badge.astro

@@ -0,0 +1,21 @@
+---
+
+const { type = "default", text, link } = Astro.props;
+const badgeText = text ? text : type;
+
+const coloursMap = {
+  experimental: 'bg-surface-accent-light text-content-accent border-outline-opaque',
+  GET: 'border-green-400 bg-green-100 text-content-primary',
+  POST: 'border-cyan-400 bg-cyan-100 text-content-primary',
+  PUT: 'border-orange-400 bg-orange-100 text-content-primary',
+  DELETE: 'border-red-400 bg-rose-100 text-content-primary',
+  default: 'text-content-primary border-outline-opaque bg-surface-tertiary'
+}
+
+const badgeClass =`${coloursMap[type]} type-caption-2 px-2 py-0.5 rounded-full border self-center`
+
+---
+{link ?
+  <a class={badgeClass} href={link}>{badgeText}</a> :
+  <span class={badgeClass}>{badgeText}</span>
+}

src/components/Endpoint.astro

@@ -3,7 +3,7 @@ import Eyebrow from './Eyebrow.astro';
 import Row from './Row.astro';
 import Column from './Column.astro';
 
-const { method, path, experimental = false } = Astro.props;
+const { method, path } = Astro.props;
 ---
 
 <Row>

src/components/Eyebrow.astro

@@ -1,24 +1,12 @@
 ---
+import Badge from './Badge.astro';
+
 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"/>
+    <Badge type={method} />
     <span class="text-xs text-zinc-400">{ path }</span>
   </div>
 </div>

src/components/H2.astro

@@ -5,7 +5,7 @@ const { id } = Astro.props;
 <div class="not-prose">
   <h2
     id={id}
-    class="scroll-mt-32 mt-4 type-headline-4"
+    class="scroll-mt-32 mt-4 type-headline-4 flex flex-wrap gap-1"
   >
     <slot/>
   </h2>

src/components/Property.astro

@@ -1,9 +1,11 @@
 
 ---
+import Badge from '../components/Badge.astro';
+
 const { name, type } = Astro.props;
 const customDataTypes = ['timestamp', 'bignumber', 'monetary', 'crn', 'location', 'phonenumber'];
 const formattedType = type.toLowerCase();
-const isLink = customDataTypes.includes(formattedType);
+const link = customDataTypes.includes(formattedType) ? '/api/data-types#' + formattedType :undefined;
 ---
 
 <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
@@ -12,14 +14,11 @@ const isLink = customDataTypes.includes(formattedType);
       Name
     </dt>
     <dd>
-      <code>{ name }</code>
+      {name}
     </dd>
     <dt class="sr-only">Type</dt>
     <dd class="font-mono text-xs text-zinc-400 dark:text-zinc-500">
-      {isLink ?
-        <a href={'/api/data-types#' + formattedType}>{formattedType}</a> :
-        <span>{formattedType}</span>
-      }
+      <Badge text={formattedType} link={link}>
     </dd>
     <dt class="sr-only">
       Description

src/content/api/introduction.mdx

@@ -7,6 +7,8 @@ nav:
   order: 1
 ---
 
+import Badge from '../../components/Badge.astro';
+
 The Centrapay API is an [RMM](https://en.wikipedia.org/wiki/Richardson_Maturity_Model)
 level 2 RESTful web service which expresses operations in terms of HTTP verbs on
 resource-oriented URLs. API endpoint definitions in these docs are grouped by resource
@@ -16,6 +18,7 @@ Most API calls require [authentication](https://docs.centrapay.com/api/auth) usi
 JWT. HTTP requests and responses usually have JSON payloads and use
 "application/json" as the content type.
 
-Some API features may be flagged as **EXPERIMENTAL**. These API features may be
+Some API features may be flagged as <Badge type="experimental"/>. These API features may be
 removed or changed without warning and should not be relied on in a production
 setting.
+

src/content/api/media-uploads.mdx

@@ -10,6 +10,7 @@ import Properties from '../../components/Properties.astro';
 import Property from '../../components/Property.astro';
 import Endpoint from '../../components/Endpoint.astro';
 import CodeGroup from '../../components/CodeGroup.astro';
+import Badge from '../../components/Badge.astro';
 
 ## Model
 
@@ -58,9 +59,8 @@ import CodeGroup from '../../components/CodeGroup.astro';
 <Endpoint
   method="POST"
   path="/api/media-uploads"
-  experimental
 >
-  ## Create a presigned URL for Media Upload
+  ## Create a presigned URL for Media Upload <Badge type="experimental"/>
 
   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.
 
@@ -106,9 +106,8 @@ import CodeGroup from '../../components/CodeGroup.astro';
 <Endpoint
   method="GET"
   path="/api/media-uploads/{mediaUploadId}/location"
-  experimental
 >
-  ## Get Media Upload Location
+  ## Get Media Upload Location <Badge type="experimental"/>
 
   This endpoint allows you to retrieve the upload location of a media file.
 
@@ -127,5 +126,4 @@ import CodeGroup from '../../components/CodeGroup.astro';
     }
     ```
   </CodeGroup>
-
 </Endpoint>