Use numbers for footnote link

web/components/PT/PortableTextBlock.js

@@ -26,6 +26,7 @@ import {
 } from '../Sections'
 import ActorInsert from './Inserts/ActorInsert'
 import PlaceInsert from './Inserts/PlaceInsert'
+import { getFootnotesNumberArray } from '../../lib/utils'
 
 const BlockContent = require('@sanity/block-content-to-react')
 
@@ -45,6 +46,8 @@ export default function PortableTextBlock(props) {
     ...rest
   } = props
 
+  const footnoteNumbers = getFootnotesNumberArray(props.blocks)
+
   const getFontSize = (level) => {
     switch (level) {
       case 'h2':
@@ -115,20 +118,23 @@ export default function PortableTextBlock(props) {
           <Link href={href}>{text}</Link>
         )
       },
-      footnote: ({ children, markKey }) => (
-        <span>
-          {children}
-          <sup>
-            {/* 
+      footnote: ({ children, markKey }) => {
+        console.log(markKey)
+        return (
+          <span>
+            {children}
+            <sup>
+              {/* 
               https://codesandbox.io/s/how-to-render-footnotes-in-portable-text-in-react-iupur?file=/src/index.js:254-650
               If you want numbers here, you can reuse the reduce function from Footnotes.js
               to e.g. an object with markKey as keys and the index as values.
               {[markKey]: index}. 
             */}
-            <a href={`#${markKey}`}>*</a>
-          </sup>
-        </span>
-      ),
+              <a href={`#${markKey}`}>{footnoteNumbers[markKey]}</a>
+            </sup>
+          </span>
+        )
+      },
     },
     types: {
       code: (props) => (

web/lib/utils/getFootnotesNumberArray.js

+/**
+ * getFootnoteNumberArray
+ * return object
+ */
+export const getFootnotesNumberArray = (blocks) => {
+  return (
+    blocks
+      // filter out everything that's not a text block
+      .filter(({ _type }) => _type === 'block')
+      // make an array of the mark definitions of those blocks
+      .reduce((acc, curr) => {
+        return [...acc, ...curr.markDefs]
+      }, [])
+      // find all the footnote mark definitions
+      .filter(({ _type }) => _type === 'footnote')
+      // reduce to object with mark as key and index as value
+      .reduce(function (acc, curr, index) {
+        return { ...acc, [curr._key]: index + 1 }
+      }, {})
+  )
+}

web/lib/utils/index.js

 export * from './capitalize'
 export * from './convertQuotationMarks'
+export * from './getFootnotesNumberArray'
 export * from './getOpenGraphImages'