CORE-4739: add data providers docs (#1036) (#1037)

* CORE-4739: add data providers docs

* CORE-4738: small impovments

data/dataProviders.yml

@@ -0,0 +1,68 @@
+navItems:
+  - item: |
+      **1. Who this document is for**
+    href: '#usage'
+  - item: |
+      **2. Terminology**
+    href: "#terminology"
+  - item: |
+      **3. Requirements and guidelines for indexing repository content**
+    href: "#guideline"
+  - item: 3.1 Repository configuration
+    href: "#configuration"
+  - item: 3.1.1 Ensuring your repository is visible via OAI-PMH (Required)
+    href: "#oai-pmh"
+  - item: 3.1.2 Data providers considering registration with CORE
+    href: "#registration"
+  - item: Data providers registering with CORE
+    href: "#processing"
+    hidden: true
+  - item: Data providers already registered in CORE
+    href: "#already"
+    hidden: true
+  - item: 3.1.3 Use of OAI-PMH sets (Required)
+    href: "#oai-pmh-usage"
+  - item: 3.1.4 OAI identifiers (Required)
+    href: "#oai-identifier"
+  - item: 3.1.5 Access for machine agents - (Required)
+    href: "#machine-agents"
+  - item: 3.1.6 Repository registration in open registries (Recommended)
+    href: "#open-registries"
+  - item: 3.1.7 Meta-tags (Recommended)
+    href: "#meta-tags"
+  - item: 3.2 Metadata Configuration
+    href: "#meta-configuration"
+  - item: 3.2.1 Supported application profiles (Required)
+    href: "#supported-application"
+  - item: i. Dublin Core / Extended Dublin Core (Minimum)
+    href: "#dublin-core"
+  - item: ii. OpenAIRE Guidelines (Supported)
+    href: "#openaire"
+  - item: iii. RIOXX v3 (Recommended)
+    href: "#rioxx"
+  - item: 3.3 Full text configuration
+    href: "#text-configuration"
+  - item: 3.3.1 Supported full-text formats (Required)
+    href: "#full-text"
+  - item: 3.3.2 Same-domain policy for hosting full texts (Required)
+    href: "#same-domain"
+  - item: 3.3.3 Linking to the full text of an article
+    href: "#linking-full-text"
+  - item: i. Direct link to the full text (Recommended)
+    href: "#Direct-full-text"
+  - item: ii. Indirect link to the full text (Supported)
+    href: "#indirect-link"
+  - item: 3.3.4 FAIR Signposting (Recommended)
+    href: "#fair-signposting"
+  - item: |
+      **4. Registering a data provider with CORE**
+    href: "#data-provider"
+  - item: 4.1 Submitting the data provider OAI base URL (Required)
+    href: "#oai-base"
+  - item: 4.2 Indexing the data provider’s content
+    href: "#indexing"
+  - item: 4.3 Claiming access to the CORE Dashboard (Recommended)
+    href: "#dashboard"
+  - item: |
+      **5. Further reading**
+    href: "#reading"

package.json

@@ -40,7 +40,7 @@
     "prettier": "^2.1.2"
   },
   "dependencies": {
-    "@oacore/design": "^4.9.49",
+    "@oacore/design": "^4.9.54",
     "@octokit/rest": "^18.5.0",
     "bootstrap": "^4.5.3",
     "camelize": "^1.0.0",

pages/documentations/index.jsx

@@ -0,0 +1,125 @@
+import React, { useState } from 'react'
+import { Button } from '@oacore/design/lib/elements'
+import { classNames } from '@oacore/design/lib/utils'
+
+import styles from './styles.module.scss'
+import DocumentationPageTemplate from '../../templates/documentations'
+import { Page } from '../../components'
+import DataProviderDocs from '../../templates/documentations/dataProviderDocs'
+
+import text from 'data/membership.yml'
+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
+}
+
+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 sections = await getSections({ ref })
+  const sectionProvider = await getProviderSections({ ref })
+  const data = {
+    ...sections,
+  }
+  const dataProvider = {
+    ...sectionProvider,
+  }
+
+  return {
+    props: {
+      data,
+      dataProvider,
+    },
+  }
+}
+
+const TABS = {
+  dataProvider: 'dataProvider',
+  membership: 'membership',
+}
+
+const DocumentationPage = ({ data, dataProvider }) => {
+  const [activeTab, setActiveTab] = useState(TABS.dataProvider)
+
+  const handleTabChange = (tab) => {
+    setActiveTab(tab)
+  }
+
+  return (
+    <Page title={data.meta.title} description={data.meta.description}>
+      <div className={styles.tabWrapper}>
+        <div className={styles.btnWrapper}>
+          <Button
+            className={classNames.use(styles.tab, {
+              [styles.activeTab]: activeTab === TABS.dataProvider,
+            })}
+            onClick={() => handleTabChange(TABS.dataProvider)}
+          >
+            <div>
+              <h5 className={styles.tabHeader}>
+                {text.documentationSwitcher[0].title}
+              </h5>
+              <p className={styles.tabDescription}>
+                {text.documentationSwitcher[0].description}
+              </p>
+            </div>
+          </Button>
+          <Button
+            className={classNames.use(styles.tab, {
+              [styles.activeTab]: activeTab === TABS.membership,
+            })}
+            onClick={() => handleTabChange(TABS.membership)}
+          >
+            <div>
+              <h5 className={styles.tabHeader}>
+                {text.documentationSwitcher[1].title}
+              </h5>
+              <p className={styles.tabDescription}>
+                {text.documentationSwitcher[1].description}
+              </p>
+            </div>
+          </Button>
+        </div>
+      </div>
+      {activeTab === TABS.dataProvider && (
+        <DataProviderDocs {...dataProvider} />
+      )}
+      {activeTab === TABS.membership && <DocumentationPageTemplate {...data} />}
+    </Page>
+  )
+}
+
+export default DocumentationPage

pages/documentations/styles.module.scss

@@ -0,0 +1,58 @@
+.tab-wrapper {
+  padding: 0 var(--page-padding-x);
+  .btn-wrapper {
+    padding: 3rem 0 1.5rem 0;
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    border-bottom: 2px solid #b75400;
+    .tab {
+      display: flex;
+      width: 50%;
+      font-size: 20px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 24px;
+      color: #000;
+      letter-spacing: 0.0015em;
+      cursor: pointer;
+      background: #f5f5f5;
+      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
+      border-top-left-radius: 15px;
+      border-top-right-radius: 15px;
+      .tab-header {
+        color: #b75400;
+        font-size: 24px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 130%;
+        text-align: left;
+        margin-bottom: 14px;
+        text-transform: initial;
+      }
+      .tab-description {
+        color: #212121;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px;
+        letter-spacing: 0.04px;
+        text-align: left;
+        text-transform: initial;
+      }
+      .tab:last-child {
+        margin-left: 10px;
+      }
+    }
+    .active-tab {
+      color: #fff;
+      background: #b75400;
+      .tab-header {
+        color: #fff;
+      }
+      .tab-description {
+        color: #fff;
+      }
+    }
+  }
+}