CORE-docs: update structure (#1062) (#1063)

data/benefits.yml

@@ -182,7 +182,7 @@ HowTo:
       picture: /images/benefits/join-arrow.svg
   action:
       title: Data provider’s guide
-      url: /documentations
+      url: /data-providers-guide
 
 join:
   title: Join CORE as a data provider and contribute to the creation of a mutually beneficial ecosystem.

data/openAccess.yml

@@ -10,4 +10,4 @@ services:
     description: The guide aims to assist institutions and repository managers in configuring their repositories in way that enables CORE to correctly index them.
     action:
       - title: Find out more
-        url: documentations
+        url: data-providers-guide

pages/documentation/data-providers-guide.jsx

@@ -0,0 +1,53 @@
+import React from 'react'
+
+import { Page } from '../../components'
+import DataProviderDocs from '../../templates/documentation/data-providers-guide'
+
+import retrieveContent from 'content'
+
+const ASSETS_BASE_URL = 'https://oacore.github.io/content/'
+
+const setAssetsUrl = (object) =>
+  Object.entries(object).forEach(([, value]) => {
+    delete value.membership
+    if (value.images) {
+      Object.entries(value.images).forEach(([, item]) => {
+        item.file = ASSETS_BASE_URL + item.file
+      })
+    }
+  })
+
+const getProviderSections = async ({ ref } = {}) => {
+  const content = await retrieveContent('docs-dataProvider', {
+    ref,
+    transform: 'object',
+  })
+
+  Object.values(content).forEach((section) => {
+    if (section.items) setAssetsUrl(section.items)
+  })
+  return content
+}
+
+export async function getStaticProps({ previewData }) {
+  const ref = previewData?.ref
+  const sectionProvider = await getProviderSections({ ref })
+
+  const dataProvider = {
+    ...sectionProvider,
+  }
+
+  return {
+    props: {
+      dataProvider,
+    },
+  }
+}
+
+const DocumentationPage = ({ dataProvider }) => (
+  <Page>
+    <DataProviderDocs {...dataProvider} />
+  </Page>
+)
+
+export default DocumentationPage

pages/documentation/membership-documentation.jsx

@@ -0,0 +1,53 @@
+import React from 'react'
+
+import { Page } from '../../components'
+import DocumentationPageTemplate from '../../templates/documentation/membership-documentation'
+
+import retrieveContent from 'content'
+
+const ASSETS_BASE_URL = 'https://oacore.github.io/content/'
+
+const setAssetsUrl = (object) =>
+  Object.entries(object).forEach(([, value]) => {
+    delete value.membership
+    if (value.images) {
+      Object.entries(value.images).forEach(([, item]) => {
+        item.file = ASSETS_BASE_URL + item.file
+      })
+    }
+  })
+
+const getSections = async ({ ref } = {}) => {
+  const content = await retrieveContent('docs-membership', {
+    ref,
+    transform: 'object',
+  })
+
+  delete content.headerDashboard
+  Object.values(content).forEach((section) => {
+    if (section.items) setAssetsUrl(section.items)
+  })
+  return content
+}
+
+export async function getStaticProps({ previewData }) {
+  const ref = previewData?.ref
+  const sections = await getSections({ ref })
+  const data = {
+    ...sections,
+  }
+
+  return {
+    props: {
+      data,
+    },
+  }
+}
+
+const DocumentationPage = ({ data }) => (
+  <Page title={data.meta.title} description={data.meta.description}>
+    <DocumentationPageTemplate {...data} />
+  </Page>
+)
+
+export default DocumentationPage

templates/documentations/dataProviderDocs.jsx → templates/documentation/data-providers-guide/index.jsx

@@ -4,10 +4,12 @@ import {
   DocumentationMembershipNav,
 } from '@oacore/design/lib/modules'
 import { useRouter } from 'next/router'
+import { Button } from '@oacore/design/lib/elements'
 
-import { Layout } from '../../design-v2/components'
-import textData from '../../data/dataProviders.yml'
+import { Layout } from '../../../design-v2/components'
+import textData from '../../../data/dataProviders.yml'
 import styles from './styles.module.scss'
+import text from '../../../data/membership.yml'
 
 function normalizeHref(str) {
   const test = str.replace('#', '')
@@ -47,8 +49,36 @@ const DataProviderDocs = ({ dataProviderDocs }) => {
     }
   }, [])
 
+  const handleButtonClick = () => {
+    route.push('membership-documentation')
+  }
+
   return (
     <Layout className={styles.docsLayout}>
+      <div className={styles.tabWrapper}>
+        <div className={styles.btnWrapper}>
+          <Button className={styles.activeTab}>
+            <div>
+              <h5 className={styles.tabHeader}>
+                {text.documentationSwitcher[0].title}
+              </h5>
+              <p className={styles.tabDescription}>
+                {text.documentationSwitcher[0].description}
+              </p>
+            </div>
+          </Button>
+          <Button className={styles.tab} onClick={handleButtonClick}>
+            <div>
+              <h5 className={styles.tabHeader}>
+                {text.documentationSwitcher[1].title}
+              </h5>
+              <p className={styles.tabDescription}>
+                {text.documentationSwitcher[1].description}
+              </p>
+            </div>
+          </Button>
+        </div>
+      </div>
       <DocumentationMembership
         docs={dataProviderDocs?.items}
         highlight={highlight}