docs: 📝 Add API overview

apps/docs/src/css/custom.css

@@ -5,17 +5,17 @@
  * work well for content-centric websites.
  */
 
-@import url("https://fonts.googleapis.com/css2?family=Epilogue:wght@300;400;500;600;700;800&family=Open+Sans:wght@300;400;600;700&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Open+Sans:wght@300;400;600;700&display=swap');
 
 body {
-  font-family: "Open Sans", sans-serif;
+  font-family: 'Open Sans', sans-serif;
 }
 
 h1,
 h2,
 h3,
 h4 {
-  font-family: "Epilogue", sans-serif;
+  font-family: 'Outfit', sans-serif;
 }
 
 img {
@@ -40,6 +40,6 @@ img {
   padding: 0 var(--ifm-pre-padding);
 }
 
-html[data-theme="dark"] .docusaurus-highlight-code-line {
+html[data-theme='dark'] .docusaurus-highlight-code-line {
   background-color: rgba(0, 0, 0, 0.3);
 }

apps/docs/src/js/api-helpers.js

@@ -0,0 +1,53 @@
+// Taken from https://github.com/plausible/docs/blob/master/src/js/api-helpers.js 💙
+import React from 'react'
+
+export const Required = () => (
+  <span
+    style={{
+      color: '#ff8e20',
+      fontSize: '0.7rem',
+      fontWeight: 'bold',
+      position: 'relative',
+      bottom: '4px',
+    }}
+  >
+    REQUIRED
+  </span>
+)
+
+export const Optional = () => (
+  <span
+    style={{
+      color: '#718096',
+      fontSize: '0.7rem',
+      fontWeight: 'bold',
+      position: 'relative',
+      bottom: '4px',
+    }}
+  >
+    optional
+  </span>
+)
+
+export const Tag = ({ children, color }) => {
+  let backgroundColor = '#CBD5E0'
+  switch (color) {
+    case 'green':
+      backgroundColor = '#68D391'
+      break
+    case 'orange':
+      backgroundColor = '#ffa54c'
+      break
+  }
+  return (
+    <span
+      style={{
+        backgroundColor,
+        borderRadius: '5px',
+        padding: '0px 5px',
+      }}
+    >
+      {children}
+    </span>
+  )
+}