docs(apis): cleanup navigation, better overview (#2608)

* api cards, cleanup overview

* endpoint, definition shortcuts, links

* update quickstart links

* mobile overflow

* Update docs/docs/apis/introduction.mdx

Co-authored-by: Florian Forster <florian@caos.ch>

* Update docs/docs/apis/introduction.mdx

Co-authored-by: Florian Forster <florian@caos.ch>

Co-authored-by: Florian Forster <florian@caos.ch>

docs/src/components/apicard.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import styles from '../css/apicard.module.css';
+
+export function ApiCard({ title, type, label, children}) {
+  let style = styles.apiauth;
+  switch (type) {
+    case 'AUTH':
+      style = styles.apiauth;
+      break;
+    case 'MGMT':
+      style = styles.apimgmt;
+      break;
+    case 'ADMIN':
+      style = styles.apiadmin;
+      break;
+    case 'ASSET':
+      style = styles.apiasset;
+      break;      
+  }
+    
+  return (
+    <div className={`${styles.apicard} ${style} `}>
+      {/* {title && <h2 className={styles.apicard.title}>{title}</h2>} */}
+      {/* <p className={styles.apicard.description}>
+        
+      </p> */}
+      {children}
+    </div>
+  )
+}

docs/src/css/apicard.module.css

@@ -0,0 +1,73 @@
+.apicard {
+  border-radius: .5rem;
+  display: flex;
+  flex-direction: column;
+  min-width: 200px;
+  background: var(--card-background);
+  padding: 1rem;
+  text-decoration: none;
+  transition: all .2 ease-in-out;
+  margin: 1rem 0;
+}
+
+.apiauth {
+  background: var(--apiauthbackground);
+}
+
+.apimgmt {
+  background: var(--apimgmtbackground);
+}
+
+.apiadmin {
+  background: var(--apiadminbackground);
+}
+
+.apiasset {
+  background: var(--apiassetbackground);
+}
+
+.apicard:hover {
+  text-decoration: none;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+/* .apicard h2 {
+  color: white;
+}
+
+.apicard a {
+  color: #bfc1cc;
+} */
+
+.apicard h3, h4, h5 {
+  /* color: white; */
+  margin: 0.5rem 0 0 0;
+}
+
+.apicard p {
+  font-size: 14px;
+  margin: 0;
+}
+
+.fillspace {
+  flex: 1;
+}
+
+.bottom {
+  display: flex;
+  align-items: center;
+}
+
+.bottomicon {
+  width: 24px;
+  margin-right: .5rem;
+  color: var(--ifm-font-color-base);
+}
+
+.bottomspan {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ifm-font-color-base);
+  text-transform: uppercase;
+  margin: 0;
+}

docs/src/css/custom.css

@@ -54,6 +54,15 @@
   --card-background: #fafafa;
   --list-background: #f7fafc;
   --ifm-spacing-horizontal: 1.5rem;
+  --apiauthbackground: linear-gradient(40deg, #a9d9ca 30%, #b4d5cb);
+  --apimgmtbackground: linear-gradient(40deg, #c6d7f3 30%, #c7c6e3);
+  --apiadminbackground: linear-gradient(40deg, #c192c790, #c192c790);
+  --apiassetbackground: linear-gradient(40deg, #e4eaf1, #eef2f9);
+}
+
+.apicard-right {
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .padding-top--md {
@@ -198,6 +207,10 @@ h2 {
   --ifm-color-warning-contrast-foreground: #ffc1c1;
   --card-background: #454a66;
   --list-background: #3c405850;
+  --apiauthbackground: linear-gradient(40deg, #506e6e90 30%, #506e6e90);
+  --apimgmtbackground: linear-gradient(40deg, #595d8090 30%, #595d8090);
+  --apiadminbackground: linear-gradient(40deg, #6a506e90, #6a506e90);
+  --apiassetbackground: linear-gradient(40deg, #3c4257, #3c4257);
 }
 
 .menu li li a {