wire up references and color for supplements

Author: Shane98c

pages/research/[id].page.js

@@ -53,6 +53,9 @@ const SUPPLEMENT_COMPONENTS = {
   blockquote: Blockquote,
   Box,
   Link,
+  Cite,
+  Endnote,
+  Sidenote,
 }
 
 const Page = ({ id, type, source, frontMatter, references }) => {
@@ -106,7 +109,7 @@ const Page = ({ id, type, source, frontMatter, references }) => {
       )
     case 'supplement':
       return (
-        <Supplement meta={frontMatter} back={frontMatter.back}>
+        <Supplement meta={frontMatter} back={frontMatter.back} references={references}>
           <MDXRemote
             {...source}
             components={{
@@ -166,6 +169,7 @@ export const getStaticProps = async ({ params }) => {
       source: mdxSource,
       frontMatter: {
         ...rest,
+        color: rest.color ?? metadata.color,
         path: `/research/${params.id}`,
         number: metadata.number ?? 0,
       },

utils/generate-metadata.js

@@ -57,12 +57,30 @@ const supplementMetadata = glob
       ? 'articles'
       : 'commentary'
     const directory = path.join(process.cwd(), folder)
+
+    // Load parent article's frontmatter for color fallback
+    const parentSource = fs.readFileSync(path.join(directory, `${id}/index.md`))
+    const { data: parentData } = matter(parentSource)
+
+    // Load references from parent article
+    let references
+    try {
+      references = fs.readFileSync(
+        path.join(directory, `${id}/references.json`)
+      )
+      references = JSON.parse(references)
+    } catch {
+      references = {}
+    }
+
     return {
       ...data,
+      color: data.color ?? parentData.color,
       parentId: id,
       folder: folder,
       id: data.slug ?? `${id}-${fileName}`,
       path: `${directory}/${id}/${fileName}.md`,
+      references,
     }
   })