feat: Improvements for API docs

- Add make preview-api-docs helper
- Improve readability for URL on endpoint details

Author: dcramer

Makefile

@@ -10,3 +10,6 @@ endif
 
 test:
 	yarn test
+
+preview-api-docs:
+	bin/preview-api-docs

src/css/_includes/development-api.scss

@@ -9,6 +9,7 @@
 .api-block {
   border-radius: 3px;
   box-shadow: rgba(0, 0, 0, 0.07) 0px 0px 0px 1px;
+  margin-bottom: $paragraph-margin-bottom;
 }
 
 .api-block-header {
@@ -19,12 +20,19 @@
 }
 
 .api-block-header.request {
-  background-color: var(--gray-dark);
-  color: var(--light);
+  font-family: 'Roboto Mono';
+  font-weight: bold;
+  color: var(--gray-dark);
   display: flex;
   overflow-x: auto;
   white-space: nowrap;
 
+  .api-request-block-verb {
+    color: var(--gray-dark);
+    padding-right: 0.5rem;
+  }
+
+
   :last-child {
     padding-right: 10px;
   }
@@ -108,11 +116,6 @@
   color: var(--white);
 }
 
-.api-request-block-verb {
-  color: var(--white);
-  padding-right: 0.5rem;
-}
-
 .api-params dd {
   margin-top: 0rem !important;
 }

src/templates/apiPage.tsx

@@ -21,7 +21,13 @@ const Params = ({ params }) => (
         <dt>
           <div>
             <code data-index>{param.name}</code>
-            {!!param.schema?.type && <em> ({param.schema.type}{param.schema.items && `(${param.schema.items.type})`})</em>}
+            {!!param.schema?.type && (
+              <em>
+                {" "}
+                ({param.schema.type}
+                {param.schema.items && `(${param.schema.items.type})`})
+              </em>
+            )}
           </div>
           {!!param.required && <div className="required">REQUIRED</div>}
         </dt>
@@ -174,6 +180,18 @@ export default props => {
   }, []);
   return (
     <BasePage sidebar={<ApiSidebar />} {...props}>
+      <div className="row">
+        <div className="col-12">
+          <div className="api-block">
+            <div className="api-block-header request">
+              <span className="api-request-block-verb">
+                {data.method.toUpperCase()}
+              </span>{" "}
+              <span>{data.apiPath}</span>
+            </div>
+          </div>
+        </div>
+      </div>
       <div className="row">
         <div className="col-6">
           {data.summary && <p>{data.summary}</p>}
@@ -232,12 +250,6 @@ export default props => {
         </div>
         <div className="col-6">
           <div className="api-block">
-            <div className="api-block-header request">
-              <span className="api-request-block-verb">
-                {data.method.toUpperCase()}
-              </span>{" "}
-              <span>{data.apiPath}</span>
-            </div>
             <pre className="api-block-example request">
               {apiExample.join(" \\\n")}
             </pre>