✨ Add Media Uploads Model

astro.config.mjs

@@ -1,34 +1,28 @@
 import { defineConfig } from 'astro/config';
 import flexsearchPlugin from './src/plugins/flexsearch';
 
-// https://astro.build/config
 import tailwind from '@astrojs/tailwind';
 
-// https://astro.build/config
-import vue from '@astrojs/vue';
-
 // Remark
 import remarkSectionize from 'remark-sectionize';
 import { mermaid } from './src/plugins/mermaid';
 
 // https://astro.build/config
+import vue from '@astrojs/vue';
 import mdx from '@astrojs/mdx';
+import markdoc from '@astrojs/markdoc';
 
 // https://astro.build/config
 export default defineConfig({
   site: 'https://docs.centrapay.com',
   integrations: [
     vue(),
-    tailwind({
-      applyBaseStyles: false,
-    }),
-    mdx()
+    tailwind({ applyBaseStyles: false }),
+    mdx(),
+    markdoc()
   ],
   markdown: {
-    remarkPlugins: [
-      remarkSectionize,
-      mermaid,
-    ],
+    remarkPlugins: [remarkSectionize, mermaid],
     shikiConfig: {
       // Choose from Shiki's built-in themes (or add your own)
       // https://github.com/shikijs/shiki/blob/main/docs/themes.md

markdoc.config.mjs

@@ -0,0 +1,16 @@
+import { defineMarkdocConfig, component } from '@astrojs/markdoc/config';
+
+export default defineMarkdocConfig({
+  tags: {
+    properties: {
+      render: component('./src/components/Properties.astro'),
+    },
+    property: {
+      render: component('./src/components/Property.astro'),
+      attributes: {
+        name: { type: String, required: true },
+        type: { type: String, required: true },
+      },
+    }
+  }
+});

package.json

@@ -9,6 +9,7 @@
     "test": "vitest --watch=false"
   },
   "devDependencies": {
+    "@astrojs/markdoc": "^0.5.1",
     "@astrojs/mdx": "^1.0.3",
     "@astrojs/tailwind": "^5.0.0",
     "@astrojs/vue": "^3.0.0",
@@ -17,7 +18,7 @@
     "@fontsource/inter": "^4.5.15",
     "@headlessui/vue": "^1.6.0",
     "@tailwindcss/typography": "^0.5.8",
-    "astro": "^3.0.12",
+    "astro": "^3.2.2",
     "eslint": "^7.20.0",
     "eslint-plugin-cypress": "^2.11.2",
     "eslint-plugin-import": "^2.20.2",

src/components/Properties.astro

@@ -0,0 +1,8 @@
+<div class="my-6">
+  <ul
+    role="list"
+    class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-zinc-900/5 p-0 dark:divide-white/5"
+  >
+    <slot />
+  </ul>
+</div>

src/components/Property.astro

@@ -0,0 +1,31 @@
+
+---
+const { name, type } = Astro.props;
+const customDataTypes = ['timestamp', 'bignumber', 'monetary', 'crn', 'location', 'phonenumber'];
+const formattedType = type.toLowerCase();
+const isLink = customDataTypes.includes(formattedType);
+---
+
+<li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
+  <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
+    <dt class="sr-only">
+      Name
+    </dt>
+    <dd>
+      <code>{ name }</code>
+    </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>
+      }
+    </dd>
+    <dt class="sr-only">
+      Description
+    </dt>
+    <dd class="w-full flex-none [&>:first-child]:mt-0 [&>:last-child]:mb-0">
+      <slot />
+    </dd>
+  </dl>
+</li>

src/content/api/media-uploads.mdoc

@@ -0,0 +1,46 @@
+---
+title: Media Uploads
+description: Media Uploads API Reference
+draft: true
+nav:
+  path: API
+  order: 7
+---
+
+## Model
+
+### Properties
+
+{% properties %}
+{% property name="id" type="string" %}
+The Media Upload's unique identifier.
+{% /property %}
+
+{% 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 %}
+
+{% property name="createdAt" type="timestamp" %}
+When the Media Upload was created.
+{% /property %}
+
+{% property name="createdBy" type="crn" %}
+The User or API Key that created the Media Upload.
+{% /property %}
+
+{% property name="updatedAt" type="timestamp" %}
+When the Media Upload was updated.
+{% /property %}
+
+{% property name="updatedBy" type="crn" %}
+The User or API Key that updated the Media Upload.
+{% /property %}
+{% /properties %}