feat: constants showing up on page

src/components/ConstantReference.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import Markdown from 'react-markdown';
+import PropTypes from 'prop-types';
+import styles from './TypeDefReference.module.scss';
+
+const ConstantReference = ({ constant }) => {
+    const { name, value } = constant
+
+    const isConstantArray = Array.isArray(value)
+    console.log(isConstantArray)
+
+    const lines = (!isConstantArray) ? 
+                    Object.getOwnPropertyNames(value).map(key=>{
+                        return `${key}: ${JSON.stringify(value[key])}`
+                    }) : value.map(el => JSON.stringify(el)); 
+
+
+    return (
+        <div className = {styles.container}>
+            <div className = {styles.name}>{name}</div>
+            <div>{isConstantArray ? '[': '{'}</div>
+                <div className= {styles.propertyContainer}>
+                {lines.map((line,i)=> {
+                    return <Markdown 
+                        key={i}
+                        source={line}
+                    />
+                })
+                }
+                </div>
+            <div>{isConstantArray ? '}': ']'}</div>
+        </div>
+    )
+}
+
+//render differently based on whether it's an array or object
+
+export default ConstantReference

src/hooks/useApiDoc.js

@@ -61,7 +61,7 @@ const useApiDoc = (name) => {
             value: api[member]
           }
         })
-    }
+    };
 
     return {
       description: apiDocs?.text,

src/templates/ApiReferenceTemplate.js

@@ -8,6 +8,7 @@ import Container from '../components/Container';
 import Layout from '../components/Layout';
 import MethodReference from '../components/MethodReference';
 import TypeDefReference from '../components/TypeDefReference';
+import ConstantReference from '../components/ConstantReference';
 import Sidebar from '../components/Sidebar';
 import SEO from '../components/Seo';
 import pages from '../data/sidenav.json';
@@ -24,8 +25,10 @@ const ApiReferenceTemplate = ({ data }) => {
     methods = [],
     usage = '',
     typeDefs = [],
+    constants = []
   } = useApiDoc(api) ?? {};
 
+  console.log(constants)
   return (
     <Layout>
       <SEO title={title} description={description} />
@@ -67,6 +70,18 @@ const ApiReferenceTemplate = ({ data }) => {
               ))}
             </section>
           )}
+
+          {constants.length > 0 && (
+            <section className={templateStyles.section}>
+              <h2>Constants</h2>
+              {constants.map((constant, i) => {
+                return <ConstantReference key={i} constant={constant} />
+              })
+
+              }
+            </section>
+          )}
+
         </main>
       </Container>
     </Layout>