Merge pull request #341 from carbonplan/Shane98c/supplement-cite

Add Cite, Sidenote, and Endnote support to supplements

Author: Shane98c

package-lock.json

@@ -29,7 +29,7 @@
     "@carbonplan/components": "^13.2.1",
     "@carbonplan/emoji": "^2.0.0",
     "@carbonplan/icons": "^2.0.0",
-    "@carbonplan/layouts": "^5.1.0",
+    "@carbonplan/layouts": "^5.2.0",
     "@carbonplan/minimaps": "^2.6.0",
     "@carbonplan/seaweed-farming-model": "^1.0.0",
     "@carbonplan/theme": "^8.1.0",

package.json

@@ -53,6 +53,9 @@ const SUPPLEMENT_COMPONENTS = {
   blockquote: Blockquote,
   Box,
   Link,
+  Cite,
+  Endnote,
+  Sidenote,
 }
 
 const Page = ({ id, type, source, frontMatter, references }) => {
@@ -106,7 +109,11 @@ 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 +173,7 @@ export const getStaticProps = async ({ params }) => {
       source: mdxSource,
       frontMatter: {
         ...rest,
+        color: rest.color ?? metadata.color,
         path: `/research/${params.id}`,
         number: metadata.number ?? 0,
       },

pages/research/[id].page.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,
     }
   })