From e168c5b34c870d4f37f3261398cf7f3b72b83a50 Mon Sep 17 00:00:00 2001
From: Stevan Freeborn <65925598+StevanFreeborn@users.noreply.github.com>
Date: Fri, 14 Apr 2023 21:45:41 -0500
Subject: [PATCH] feat: extend code snippet to support method

---
 src/app/components/CodeSnippet.module.css     | 20 +++++++++++++++++++
 src/app/components/CodeSnippet.tsx            | 18 ++++++++++++++++-
 src/app/lib/markdoc.ts                        |  3 +++
 .../records/get_record_by_id/example.md       |  2 +-
 .../records/get_records_by_app/example.md     |  2 +-
 .../records/get_records_by_ids/example.md     |  2 +-
 6 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/src/app/components/CodeSnippet.module.css b/src/app/components/CodeSnippet.module.css
index f0eaa76..0c8b0f6 100644
--- a/src/app/components/CodeSnippet.module.css
+++ b/src/app/components/CodeSnippet.module.css
@@ -120,4 +120,24 @@
   border-left: 1px solid #e3e8ee;
   opacity: .2;
   margin-right: -1px;
+}
+
+.get {
+  color: #61affe;
+  font-weight: bold;
+}
+
+.post {
+  color: #49cc90;
+  font-weight: bold;
+}
+
+.put {
+  color: #fca130;
+  font-weight: bold;
+}
+
+.delete {
+  color: #f93e3e;
+  font-weight: bold;
 }
\ No newline at end of file
diff --git a/src/app/components/CodeSnippet.tsx b/src/app/components/CodeSnippet.tsx
index 38ce6d6..6c6668d 100644
--- a/src/app/components/CodeSnippet.tsx
+++ b/src/app/components/CodeSnippet.tsx
@@ -105,13 +105,22 @@ function SnippetLanguageDropdown({
 
 export default function CodeSnippet({
   children,
+  method,
   heading,
   defaultLanguage,
 }: {
   children: ReactNode;
+  method?: string;
   heading: string;
   defaultLanguage: string;
 }) {
+  const methodStyles: { [key: string]: string } = {
+    GET: styles.get,
+    POST: styles.post,
+    PUT: styles.put,
+    DELETE: styles.delete,
+  };
+
   const [selectedLanguage, setSelectedLanguage] =
     useState<string>(defaultLanguage);
 
@@ -137,7 +146,14 @@ export default function CodeSnippet({
   return (
     <div className={styles.snippetContainer}>
       <div className={styles.snippetHeader}>
-        <div>{heading}</div>
+        <div>
+          {method ? (
+            <span className={methodStyles[method]}>
+              {method}
+            </span>
+          ) : null}{' '}
+          {heading}
+        </div>
         <div className={styles.controlsContainer}>
           {snippetLanguages.length > 1 ? (
             <>
diff --git a/src/app/lib/markdoc.ts b/src/app/lib/markdoc.ts
index fb840b6..3ff8291 100644
--- a/src/app/lib/markdoc.ts
+++ b/src/app/lib/markdoc.ts
@@ -61,6 +61,9 @@ const markDocConfig = {
         defaultLanguage: {
           type: 'string',
         },
+        method: {
+          type: 'string',
+        },
       },
     },
   },
diff --git a/src/docs/version_002/resources/records/get_record_by_id/example.md b/src/docs/version_002/resources/records/get_record_by_id/example.md
index c3fef32..40fd92c 100644
--- a/src/docs/version_002/resources/records/get_record_by_id/example.md
+++ b/src/docs/version_002/resources/records/get_record_by_id/example.md
@@ -1,6 +1,6 @@
 # Retrieving a record from an app
 
-{% code heading="GET /Records/appId/{appID}/recordId/{recordID}" defaultLanguage="bash" %}
+{% code method="GET" heading="/Records/appId/{appID}/recordId/{recordID}" defaultLanguage="bash" %}
 
 ```bash
 curl --location 'https://api.onspring.com/Records/appId/195/recordId/1' \
diff --git a/src/docs/version_002/resources/records/get_records_by_app/example.md b/src/docs/version_002/resources/records/get_records_by_app/example.md
index 961ac92..b9bdc77 100644
--- a/src/docs/version_002/resources/records/get_records_by_app/example.md
+++ b/src/docs/version_002/resources/records/get_records_by_app/example.md
@@ -1,6 +1,6 @@
 # Retrieving records for an app
 
-{% code heading="GET /Records/appId/{appID}" defaultLanguage="bash" %}
+{% code method="GET" heading="/Records/appId/{appID}" defaultLanguage="bash" %}
 
 ```bash
 curl --location 'https://api.onspring.com/Records/appId/195' \
diff --git a/src/docs/version_002/resources/records/get_records_by_ids/example.md b/src/docs/version_002/resources/records/get_records_by_ids/example.md
index 4b92ac0..ab9f8f7 100644
--- a/src/docs/version_002/resources/records/get_records_by_ids/example.md
+++ b/src/docs/version_002/resources/records/get_records_by_ids/example.md
@@ -1,6 +1,6 @@
 # Retrieving a batch of records
 
-{% code heading="POST /Records/batch-get" defaultLanguage="bash" %}
+{% code method="POST" heading="/Records/batch-get" defaultLanguage="bash" %}
 
 ```bash
 curl --location 'https://api.onspring.com/Records/batch-get' \