feat(shared): Updated MDX components

sites/shared/components/mdx/highlight.js

@@ -1,18 +1,23 @@
 import CopyToClipboard from 'shared/components/copy-to-clipboard'
+import StatusCode from './status-code.js'
 
 const names = {
   js: 'Javascript',
   bash: 'Bash prompt',
   sh: 'Shell prompt',
-  json: 'file.json',
+  json: 'JSON',
   yaml: 'file.yaml',
 }
 
 const Highlight = (props) => {
   let language = 'txt'
+  let status = false
   if (props.language) language = props.language
   if (props.children?.props?.className) {
     language = props.children.props.className.split('-').pop()
+    if (language.indexOf('.') !== -1) {
+      ;[status, language] = language.split('.')
+    }
   }
 
   const preProps = {
@@ -24,14 +29,14 @@ const Highlight = (props) => {
     <div className="hljs my-4">
       <div
         className={`
-        flex flex-row justify-between
+        flex flex-row justify-between items-center
         text-xs font-medium text-warning
         mt-1 border-b border-neutral-content border-opacity-25
         px-4 py-1 mb-2 lg:text-sm
       `}
       >
         <span>{names[language] ? names[language] : language}</span>
-        <CopyToClipboard content={props.children} />
+        {status ? <StatusCode status={status} /> : <CopyToClipboard content={props.children} />}
       </div>
       <pre {...preProps}>{props.children}</pre>
     </div>

sites/shared/components/mdx/http-method.js

@@ -0,0 +1,25 @@
+const methodClasses = {
+  get: 'bg-green-600 text-white',
+  post: 'bg-sky-600 text-white',
+  put: 'bg-orange-500 text-white',
+  delete: 'bg-red-600 text-white',
+}
+
+const Method = (props) => {
+  let method = false
+  for (const m in methodClasses) {
+    if (!method && props[m]) method = m.toUpperCase()
+  }
+
+  return (
+    <div
+      className={`my-1 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 rounded-full ${
+        methodClasses[method.toLowerCase()]
+      }`}
+    >
+      {method}
+    </div>
+  )
+}
+
+export default Method

sites/shared/components/mdx/index.js

@@ -6,48 +6,8 @@ import ReadMore from './read-more.js'
 import { Tab, Tabs } from './tabs.js'
 import Example from './example.js'
 import Examples from './examples.js'
-
+import Method from './http-method.js'
-const methodClasses = {
+import StatusCode from './status-code.js'
-  get: 'bg-green-600 text-white',
-  post: 'bg-sky-600 text-white',
-  put: 'bg-orange-500 text-white',
-  delete: 'bg-red-600 text-white',
-}
-
-const Method = (props) => {
-  let method = false
-  for (const m in methodClasses) {
-    if (!method && props[m]) method = m.toUpperCase()
-  }
-
-  return (
-    <div
-      className={`my-1 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 rounded-full ${
-        methodClasses[method.toLowerCase()]
-      }`}
-    >
-      {method}
-    </div>
-  )
-}
-
-const statusClasses = {
-  2: 'bg-green-600 text-white',
-  4: 'bg-orange-500 text-white',
-  5: 'bg-red-600 text-white',
-}
-
-const StatusCode = ({ status }) => {
-  return (
-    <div
-      className={`my-1 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 rounded-full ${
-        statusClasses['' + status.slice(0, 1)]
-      }`}
-    >
-      {status}
-    </div>
-  )
-}
 
 const mdxCustomComponents = (app = false) => ({
   // Custom components

sites/shared/components/mdx/status-code.js

@@ -0,0 +1,19 @@
+const statusClasses = {
+  2: 'bg-green-600 text-white',
+  4: 'bg-orange-500 text-white',
+  5: 'bg-red-600 text-white',
+}
+
+const StatusCode = ({ status }) => {
+  return (
+    <div
+      className={`my-1 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 rounded-full ${
+        statusClasses['' + status.slice(0, 1)]
+      }`}
+    >
+      {status}
+    </div>
+  )
+}
+
+export default StatusCode

sites/shared/mdx/loader.js

@@ -80,6 +80,16 @@ const mdxLoader = async (language, site, slug, jargon) => {
                 'part.mjs',
                 'bib.mjs',
               ],
+              json: [
+                '200.json',
+                '201.json',
+                '204.json',
+                '400.json',
+                '401.json',
+                '403.json',
+                '404.json',
+                '500.json',
+              ],
               markdown: ['en.md'],
             },
           },