CORE-4884: add new use cases (#1136) (#1137)

oacore · Apr 4, 2024 · 0d7dbb2 · 0d7dbb2
1 parent 576c005
commit 0d7dbb2
Show file tree

Hide file tree

Showing 10 changed files with 198 additions and 105 deletions.
diff --git a/components/experiences-card/experiencesCard.jsx b/components/experiences-card/experiencesCard.jsx
@@ -0,0 +1,40 @@
+import { Button } from '@oacore/design/lib/elements'
+import React from 'react'
+
+import styles from './styles.module.scss'
+import { Markdown } from '../index'
+import Section from '../../design-v2/components/layout/section'
+
+const ExperiencesCard = ({ title, data }) => (
+  <Section id="member-experiences">
+    <div className={styles.institutionBenefitWrapper}>
+      <div className={styles.institutionBenefitInnerWrapper}>
+        <div className={styles.titleWrapper}>
+          <Markdown className={styles.mainTitle}>{title}</Markdown>
+        </div>
+        {data.map((repo) => (
+          <div className={styles.itemMainWrapper}>
+            <div className={styles.itemWrapper}>
+              <h5 className={styles.itemTitle}>{repo.title}</h5>
+              <p className={styles.itemDescription}>{repo.description}</p>
+            </div>
+            <div className={styles.footer}>
+              <div className={styles.userWrapper}>
+                <img className={styles.userImg} src={repo.img} alt="" />
+                <div>
+                  <h6 className={styles.user}>{repo.user}</h6>
+                  <span className={styles.position}>{repo.position}</span>
+                </div>
+              </div>
+              <Button target="blank" href={repo.action.url}>
+                {repo.action.title}
+              </Button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  </Section>
+)
+
+export default ExperiencesCard
diff --git a/components/experiences-card/styles.module.scss b/components/experiences-card/styles.module.scss
@@ -0,0 +1,85 @@
+$card-header-color: #fef5ef;
+$support-card-width: 21.5rem;
+$member-image-width: 102px;
+$grid-responsive-for-sections: repeat(auto-fit, minmax(300px, 1fr));
+$breakpoint-sm: 800px;
+$breakpoint-md: 1130px;
+$breakpoint-lg: 1415px;
+
+.institution-benefit-wrapper {
+  background: #f5f5f5;
+  .institution-benefit-inner-wrapper {
+    padding: var(--page-padding-y) var(--page-padding-x);
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    gap: 36px;
+  }
+  .title-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex: 0 0 48%;
+    box-sizing: border-box;
+    padding: 10px;
+    color: #212121;
+    font-size: 48px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 78px;
+    .main-title {
+      font-weight: 700;
+    }
+    a {
+      color: #b75400;
+    }
+    @media (max-width: $breakpoint-md) {
+      flex: 0 0 100%;
+    }
+  }
+  .item-main-wrapper {
+    flex: 0 0 48%;
+    box-sizing: border-box;
+    background: #fff;
+    .item-wrapper {
+      padding: 16px;
+      .item-title {
+        color: #000;
+        font-size: 24px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 32px;
+        letter-spacing: 0.036px;
+      }
+      .item-description {
+        color: #000;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 24px;
+        letter-spacing: 0.026px;
+      }
+    }
+    .footer {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 16px;
+      border-top: 1px solid #e0e0e0;
+      .user-wrapper {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .user-img {
+          margin-right: 14px;
+        }
+        .user {
+          margin-bottom: 6px;
+        }
+      }
+    }
+    @media (max-width: $breakpoint-md) {
+      flex: 0 0 100%;
+    }
+  }
+}
diff --git a/data/membership.yml b/data/membership.yml
@@ -434,6 +434,22 @@ institutionBenefit:
       action:
         title: read more
         url: https://blog.core.ac.uk/2024/01/18/university-of-chicago-adopts-cores-article-deduplication-tool/
+    - title: How the Oxford University Research Archive (ORA) uses the CORE API
+      description: CORE harvests and aggregates information of research papers collected from institutional and subject repositories, and open access and hybrid journals, and makes the content available via an API. The CORE API offers a wealth of metadata and full text content from its many data providers. For ORA (Oxford University Research Archive), the use of the CORE API offers an opportunity to enhance workflows and streamline the process of reviewing and curating articles for inclusion in the repository...
+      user: Jason Partridge
+      position: Open Access Service Manager at the Bodleian Libraries, University of Oxford.
+      img: /images/ora.svg
+      action:
+        title: read more
+        url: https://blog.core.ac.uk/2024/03/05/how-the-oxford-university-research-archive-ora-uses-the-core-api/
+    - title: How the CORE Metadata Validator supports integration of Rioxx v3 in DSpace
+      description: With the rollout of the Rioxx V3 metadata schema, repositories can benefit from far richer metadata for their articles. Since the release of the updated schema, The University of Cambridge has been working to develop an implementation of a RIOXX v3 for DSpace-based repositories which will greatly simplify the adoption of this metadata schema. The implementation process and verification of the metadata has been supported by the CORE Rioxx v3 validator available in the CORE Dashboard...
+      user: Dr Agustina Martinez-Garcia
+      position: Open Research Systems Manager at University of Cambridge and the Open Research Systems
+      img: /images/cambridge.svg
+      action:
+        title: read more
+        url: https://blog.core.ac.uk/2024/02/22/rioxx-v3-0-integration-for-dspace-repositories/
 
 materials:
   title: Membership materials

diff --git a/data/services/api.yml b/data/services/api.yml
@@ -112,6 +112,18 @@ what-is-included:
     If you use CORE in your work, we kindly request you to [cite one of our publications.](/about/research-outputs)
   image: /images/services/delivery.svg
 
+institutionBenefit:
+  title: Find out how other institutions [benefited](documentation/membership-documentation) from CORE API
+  item:
+    - title: How the Oxford University Research Archive (ORA) uses the CORE API
+      description: CORE harvests and aggregates information of research papers collected from institutional and subject repositories, and open access and hybrid journals, and makes the content available via an API. The CORE API offers a wealth of metadata and full text content from its many data providers. For ORA (Oxford University Research Archive), the use of the CORE API offers an opportunity to enhance workflows and streamline the process of reviewing and curating articles for inclusion in the repository...
+      user: Jason Partridge
+      position: Open Access Service Manager at the Bodleian Libraries, University of Oxford.
+      img: /images/ora.svg
+      action:
+        title: read more
+        url: https://blog.core.ac.uk/2024/03/05/how-the-oxford-university-research-archive-ora-uses-the-core-api/
+
 stats:
   items:
     - title: more than

diff --git a/design-v2/components/pages/service.jsx b/design-v2/components/pages/service.jsx
@@ -10,6 +10,7 @@ import { Layout, Section } from '../layout'
 import Hero from '../hero'
 // eslint-disable-next-line import/no-cycle
 import { Video } from '../index'
+import ExperiencesCard from '../../../components/experiences-card/experiencesCard'
 
 import api from 'data/services/api.yml'
 import dataset from 'data/services/dataset.yml'
@@ -102,6 +103,7 @@ const ServicePage = observe(
     actionButton,
     keywords,
     whatIsIncluded, // @optional
+    institutionBenefit, // @optional
     statistics, // @optional
     main, // @optional
     benefits, // @optional
@@ -146,7 +148,7 @@ const ServicePage = observe(
         keywords={keywords}
         className={styles.servicePage}
       >
-        <Layout>
+        <Layout className={styles.unsetBottom}>
           <Hero
             actionButton={actionButton}
             hideButtons={hideButtons}
@@ -368,6 +370,14 @@ const ServicePage = observe(
               <img src={whatIsIncluded.image} alt={whatIsIncluded.title} />
             </Section>
           )}
+        </Layout>
+        {institutionBenefit && (
+          <ExperiencesCard
+            title={institutionBenefit.title}
+            data={institutionBenefit.item}
+          />
+        )}
+        <Layout className={styles.unsetTop}>
           {materials && (
             <div className={styles.layoutMiniWrapper}>
               <Section id="membership-materials">

diff --git a/design-v2/components/pages/styles.module.scss b/design-v2/components/pages/styles.module.scss
@@ -4,6 +4,14 @@ $spacer: 1.4rem;
 $grid-responsive-for-sections: repeat(auto-fit, minmax(300px, 1fr));
 $grid-responsive-for-cards: repeat(auto-fit, minmax(200px, 1fr));
 $support-card-width: 21.5rem;
+.unset-bottom {
+  padding-bottom: 0;
+}
+
+.unset-top {
+  padding-top: 0;
+}
+
 .servicePage {
   .features {
     display: flex;

diff --git a/public/images/cambridge.svg b/public/images/cambridge.svg
diff --git a/public/images/ora.svg b/public/images/ora.svg
diff --git a/templates/membership/index.jsx b/templates/membership/index.jsx
@@ -10,6 +10,7 @@ import listIcon from '../../public/images/membership/listIcon.svg'
 import carouselArrowRight from '../../public/images/membership/carouselArrowRight.svg'
 import carouselArrowLeft from '../../public/images/membership/carouselArrowLeft.svg'
 import { excludedIds } from '../governance/supporters'
+import ExperiencesCard from '../../components/experiences-card/experiencesCard'
 
 import { Markdown } from 'components'
 import { Section, Video } from 'design-v2/components'
@@ -266,37 +267,10 @@ const MembershipPageTemplate = ({ data, members }) => {
           </div>
         </Section>
       </div>
-      <Section id="member-experiences">
-        <div className={styles.institutionBenefitWrapper}>
-          <div className={styles.institutionBenefitInnerWrapper}>
-            <div className={styles.titleWrapper}>
-              <Markdown className={styles.mainTitle}>
-                {data.institutionBenefit.title}
-              </Markdown>
-            </div>
-            {data.institutionBenefit.item.map((repo) => (
-              <div className={styles.itemMainWrapper}>
-                <div className={styles.itemWrapper}>
-                  <h5 className={styles.itemTitle}>{repo.title}</h5>
-                  <p className={styles.itemDescription}>{repo.description}</p>
-                </div>
-                <div className={styles.footer}>
-                  <div className={styles.userWrapper}>
-                    <img className={styles.userImg} src={repo.img} alt="" />
-                    <div>
-                      <h6 className={styles.user}>{repo.user}</h6>
-                      <span className={styles.position}>{repo.position}</span>
-                    </div>
-                  </div>
-                  <Button target="blank" href={repo.action.url}>
-                    {repo.action.title}
-                  </Button>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </Section>
+      <ExperiencesCard
+        title={data.institutionBenefit.title}
+        data={data.institutionBenefit.item}
+      />
       <div className={styles.layoutMiniWrapper}>
         <Section id="membership-materials">
           <h4>{data.materials.title}</h4>

diff --git a/templates/membership/styles.module.scss b/templates/membership/styles.module.scss
@@ -490,76 +490,3 @@ $breakpoint-lg: 1415px;
     margin: 0 20px;
   }
 }
-
-.institution-benefit-wrapper {
-  background: #f5f5f5;
-  .institution-benefit-inner-wrapper {
-    padding: var(--page-padding-y) var(--page-padding-x);
-    display: flex;
-    flex-wrap: wrap;
-    width: 100%;
-  }
-}
-
-.title-wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex: 0 0 50%;
-  box-sizing: border-box;
-  padding: 10px;
-  color: #212121;
-  font-size: 48px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 78px;
-  .main-title {
-    font-weight: 700;
-  }
-  a {
-    color: #b75400;
-  }
-}
-
-.item-main-wrapper {
-  flex: 0 0 50%;
-  box-sizing: border-box;
-  background: #fff;
-  .item-wrapper {
-    padding: 16px;
-    .item-title {
-      color: #000;
-      font-size: 24px;
-      font-style: normal;
-      font-weight: 700;
-      line-height: 32px;
-      letter-spacing: 0.036px;
-    }
-    .item-description {
-      color: #000;
-      font-size: 16px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 24px;
-      letter-spacing: 0.026px;
-    }
-  }
-  .footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 16px;
-    border-top: 1px solid #e0e0e0;
-    .user-wrapper {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      .user-img {
-        margin-right: 14px;
-      }
-      .user {
-        margin-bottom: 6px;
-      }
-    }
-  }
-}