CORE-4888: add advisory board on netlify (#1151) (#1152)

netlify-cms.config.yml

@@ -638,7 +638,6 @@ collections:
 
   preview_path: api/preview?page=history&ref=cms/history/{{slug}}
 
-
 - name: docs
 
   folder: docs
@@ -1430,3 +1429,58 @@ collections:
                       widget: text
                       label: slug
                       hint: hint for us
+
+- name: advisory-board
+
+  media_folder: '/images'
+
+  create: false
+  delete: false
+
+  label: 🎓 Advisory Board
+  label_singular: member
+  description: >
+    Advisory Board members and their details.
+
+  files:
+    - name: meta
+      label: ℹ️ Metadata (title, description, headline)
+      file:  advisory/meta.yml
+      fields:
+        - name: title
+          widget: string
+          label: Title
+          hint: >
+            Displayed in the browser as a tab name and in Google, when
+            the page appears in the search results.
+        - name: description
+          widget: text
+          label: Description
+          hint: >
+            Description of the page, not visible on the page but will be shown
+            in search engines when the page appears in results. Important
+            to have good performance in search engines.
+    - name: members
+      label: Advisory Board Members
+      file: advisory-board/advisory.yml
+      fields:
+        - name: data
+          widget: list
+          label: Members
+          allow_add: true
+          fields:
+            - name: name
+              widget: string
+              label: Name
+            - name: image
+              widget: file
+              label: Image
+              hint: Member's image
+            - name: organisation
+              widget: string
+              label: Organisation
+              hint: Member's organisation
+            - name: country
+              widget: string
+              label: Country
+              hint: Member's country

pages/governance/advisory.jsx

@@ -2,6 +2,44 @@ import React from 'react'
 
 import Advisory from '../../templates/governance/advisory'
 
-const AdvisoryPage = () => <Advisory />
+import retrieveContent from 'content'
+
+const ASSETS_BASE_URL = 'https://oacore.github.io/content/'
+
+const setAssetsUrl = (object) =>
+  Object.entries(object).forEach(([key, value]) => {
+    if (typeof value === 'string' && value.includes('/images'))
+      object[key] = ASSETS_BASE_URL + value
+  })
+
+const getSections = async ({ ref } = {}) => {
+  const content = await retrieveContent('advisory', {
+    ref,
+    transform: 'object',
+  })
+
+  Object.values(content).forEach((section) => {
+    setAssetsUrl(section)
+    if (section.box) setAssetsUrl(section.box)
+  })
+
+  return content
+}
+
+export async function getStaticProps({ previewData }) {
+  const ref = previewData?.ref
+  const sections = await getSections({ ref })
+  const data = {
+    ...sections,
+  }
+
+  return {
+    props: {
+      data,
+    },
+  }
+}
+
+const AdvisoryPage = ({ data }) => <Advisory {...data} />
 
 export default AdvisoryPage

templates/governance/advisory/index.jsx

@@ -5,18 +5,17 @@ import styles from './advisory.module.scss'
 
 import { Page } from 'components'
 import { Hero, Layout, Section } from 'design-v2/components'
-import data from 'data/advisory.yml'
 
-const Advisory = () => (
+const Advisory = ({ meta, advisory }) => (
   <Page>
-    <Layout title={data.header.title} description={data.header.tagline}>
+    <Layout title={meta.title} description={meta.tagline}>
       <Hero
-        image={data.header.image}
-        title={data.header.title}
-        description={data.header.description}
+        image={advisory.header.image}
+        title={meta.title}
+        description={advisory.header.description}
       />
       <Section className={styles.supporters}>
-        <h3>{data.table.title}</h3>
+        <h3>{advisory.table.title}</h3>
         <Table>
           <Table.Head>
             <Table.Row>
@@ -26,7 +25,7 @@ const Advisory = () => (
             </Table.Row>
           </Table.Head>
           <Table.Body>
-            {data.table.data.map((member) => (
+            {advisory.table.data.map((member) => (
               <Table.Row key={member.name}>
                 <Table.Cell>{member.name}</Table.Cell>
                 <div className={styles.organisationWrapper}>