<template>
<main :class="applyCss ? 'pa-15 mb-10' : ''">
<!-- main_title_2 -->
<h1 class="mb-5">
FAIRsharing is a community-driven resource with users and collaborators
across all disciplines. We work together with our stakeholders to enable
the
<a
class="underline-effect"
href="https://www.nature.com/articles/sdata201618"
target="_blank"
>FAIR Principles</a
>
by promoting the value and the use of standards, databases and policies.
</h1>
<p class="text-h5">
How to cite us: use the DOI for the
<a
class="underline-effect"
href="https://doi.org/10.25504/FAIRsharing.2abjs5"
target="_blank"
>FAIRsharing record</a
>, or our
<a
class="underline-effect"
href="https://doi.org/10.1038/s41587-019-0080-8"
target="_blank"
>publication.</a
>
</p>
<!-- Adopters, activities, Governance tabs-->
<v-container class="my-10">
<v-row class="block-category">
<v-col
v-for="(tab, index) in contentTabs"
:key="tab.name + '_' + index"
cols="12"
lg="4"
md="4"
sm="12"
>
<v-card
class="mx-auto block-category__card cursor-pointer"
height="300"
max-width="350"
@click="jumpToAnchor(tab.name.toLowerCase())"
>
<div
class="text-white d-flex flex-column justify-center block-category__card__gradient"
>
<div
class="d-flex justify-center align-center"
style="height: 136px"
>
<v-icon color="white" size="80" style="opacity: 0.7">
{{ customIcons.values[tab.icon].icon }}
</v-icon>
</div>
<v-card-title
class="d-inline text-h4 text-center text-md-h5 text-lg-h4"
>
{{ tab.name }}
</v-card-title>
</div>
<v-card-text class="text--primary text-justify">
<p class="text-center">
{{ tab.description }}
</p>
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
<!-- Adopters -->
<section id="adopters">
<h3 class="text-h3 mb-4 mt-5">Adopters</h3>
<p>
A broad range of <a href="/stakeholders">stakeholders</a> come to
FAIRsharing from across all research domains. However, adopters use
FAIRsharing specifically to do one or more of the following:
</p>
<ol type="i">
<li>
Educate their users/community on the variety of existing standards,
repositories and policies that exist in FAIRsharing and actively
encourage them to submit/claim records, where relevant;
</li>
<li>
Recommend resources by registering their data policy, and then link it
to standards and/or databases
<a href="/search?page=1&isRecommended=true">recommended</a> in the
policy;
</li>
<li>
Create a <a href="/collections">Collection</a> that pulls together a
list of standards and/or databases around a given domain of interest
relevant to them.
</li>
</ol>
<p>
Adopters are generally representatives of institutions, libraries,
journal publishers, infrastructure programmes, societies and other
organisations or projects that in turn serve and guide individual
researchers or other stakeholders on research data management matters.
Adopters display a FAIRsharing logo on their websites with a link from
their website to our homepage.
</p>
<p>
In general, our adopters fall into the following broad categories. If
you don't see your project on the list of adopters, please
<a href="mailto:contact@fairsharing.org">get in touch</a>.
</p>
<div class="text-center">
<v-btn class="ma-2" color="primary" variant="elevated">
<router-link
v-scroll-to="'#funders'"
style="color: white"
to="#funders"
>
Funders
</router-link>
</v-btn>
<v-btn class="ma-2" color="primary" variant="elevated">
<router-link
v-scroll-to="'#publishers'"
style="color: white"
to="#publishers"
>
Publishers
</router-link>
</v-btn>
<v-btn class="ma-2" color="primary" variant="elevated">
<router-link
v-scroll-to="'#organisations'"
style="color: white"
to="#organisations"
>
Organisations
</router-link>
</v-btn>
<v-btn class="ma-2" color="primary" variant="elevated">
<router-link v-scroll-to="'#tools'" style="color: white" to="#tools">
Tools
</router-link>
</v-btn>
</div>
<h4 class="text-h4 mb-4 mt-5 pt-10">Funders</h4>
<p
id="funders"
:class="[
'mb-0 mt-10 lato-font-medium lato-text-sm',
{ 'lato-text-md': $vuetify.display.xl },
]"
>
A selection of official reports from funders and other organisations
that recommend the use of FAIRsharing as a key asset for all
stakeholders to enable FAIR data:
</p>
<!-- External Links -->
<v-row class="my-2">
<v-col
v-for="(item, index) in externalLinks"
:key="index + '_' + item.titleLink"
:class="[
'pa-5 links',
{ 'max-width-32-percent': $vuetify.display.mdAndUp },
]"
cols="12"
lg="4"
md="12"
>
<a :href="item.titleLink" target="_blank">
<p
:class="[
'mb-0 lato-font-medium lato-text-sm underline-effect',
{ 'lato-text-md': $vuetify.display.xl },
]"
>
{{ item.title }}
</p>
</a>
<i
v-safe-html="item.text"
:class="[
'mb-0 word-break lato-font-medium lato-text-sm',
{ 'lato-text-md': $vuetify.display.xl },
]"
/>
</v-col>
</v-row>
<h4 class="text-h4 mb-4 mt-5 pt-10">Publishers</h4>
<p
id="publishers"
:class="[
'mb-0 mt-10 lato-font-medium lato-text-sm',
{ 'lato-text-md': $vuetify.display.xl },
]"
>
A selection of the publishers that use FAIRsharing to define and refine
their data policies:
</p>
<!--Adopter table-->
<v-row class="mt-2 ml-0">
<v-col
v-for="(item, index) in tables.adopterTable.data"
:key="index + '_' + item.adopter"
:class="[
'pa-5 links',
{ 'max-width-32-percent': $vuetify.display.mdAndUp },
]"
cols="12"
lg="4"
md="12"
>
<v-img
v-if="item.image"
:src="item.image"
class="contain"
height="120"
max-height="250px"
max-width="250px"
style="filter: grayscale(1)"
/>
</v-col>
</v-row>
<h4 class="text-h4 mt-5 pt-10">Other Organisations</h4>
<p
id="organisations"
:class="[
'mb-0 mt-10 lato-font-medium lato-text-sm',
{ 'lato-text-md': $vuetify.display.xl },
]"
>
Some other organisations using FAIRsharing.
</p>
<v-row class="mt-2 ml-0">
<v-col
v-for="(item, index) in tables.globalOrganisationTable.data"
:key="`${item.adopter}_${index}`"
:class="[
'pa-5 links full-width',
{ 'max-width-24-percent': $vuetify.display.mdAndUp },
]"
cols="12"
lg="4"
md="12"
>
<v-img
v-if="item.image"
:src="item.image"
class="contain"
height="120"
max-height="250px"
max-width="250px"
style="filter: grayscale(1)"
/>
</v-col>
</v-row>
</section>
<!-- new tools section -->
<h4 class="text-h4 mt-5 pt-10">Tools</h4>
<p
v-if="tables.toolsTable.data.length"
id="tools"
:class="[
'mb-0 mt-10 lato-font-medium lato-text-sm',
{ 'lato-text-md': $vuetify.display.xl },
]"
>
Tools that make use of FAIRsharing content. If you would like your tool
included in this list, please use
<a
href="https://docs.google.com/forms/d/e/1FAIpQLSdl1lKj9xlgN5Od_LyqWfnqBl-8aOLXhdFQa2nfm5CBmZ1TgQ/viewform?usp=sf_link"
target="_blank"
>this form</a
>
to let us know how you're using FAIRsharing.
</p>
<!-- Tools table begins -->
<v-row v-if="tables.toolsTable.data.length" dense>
<v-col
v-for="tool in tables.toolsTable.data"
:key="tool.id"
cols="12"
lg="3"
md="4"
sm="12"
xl="2"
>
<v-card class="full-width">
<v-img
:src="
tool.logo
? `/assets/Community/tools/${tool.logo}`
: '/assets/Community/tools/toolplaceholder.png'
"
aspect-ratio="1"
class="text-white align-end"
cover
gradient="to top, rgba(0, 0, 0, 0.9), rgba(255, 255, 255, 0.9)"
>
<v-card-title>
<h4 style="word-break: initial">
<a :id="tool.id" :href="tool.homepage" target="_blank">
{{ tool.name }}
</a>
</h4>
</v-card-title>
<v-card-subtitle v-if="tool.description">
{{ tool.description }}
</v-card-subtitle>
</v-img>
<v-card-text
:style="
$vuetify.display.xl
? 'height: 320px'
: $vuetify.display.mdAndUp
? 'height: 350px'
: 'height: 100%'
"
class="text--primary"
style="height: 100%"
>
<div v-if="tool.organisations && tool.organisations.length">
Organisation :
<span v-for="(org, i) in tool.organisations" :key="org.id">
<v-tooltip v-if="org.tooltip" location="bottom">
<template #activator="{ props }">
<a :href="orgUrl(org)" class="d-inline-block" v-bind="props"
>{{ org.name }}
</a>
</template>
<span>{{ org.tooltip }}</span>
</v-tooltip>
<a v-else :href="orgUrl(org)" class="d-inline-block"
>{{ org.name }}
</a>
<span v-if="i + 1 < tool.organisations.length">, </span>
</span>
</div>
<div v-if="tool.status">Status: {{ tool.status }}</div>
<div v-if="tool.contacts && tool.contacts.length">
Contacts:<br />
<span v-for="contact in tool.contacts" :key="contact.id">
<v-chip class="ma-2" size="x-small">
<a :href="contact.url">{{ contact.name }}</a>
</v-chip>
</span>
</div>
<div v-if="tool.methods && tool.methods.length">
Methods of using FAIRsharing:<br />
<span v-for="method in tool.methods" :key="tool.name + method">
<v-chip class="ma-2" size="x-small">
{{ method }}
</v-chip>
</span>
</div>
<div v-if="tool.types && tool.types.length">
Type of resource:<br />
<span v-for="type in tool.types" :key="tool.name + type">
<v-chip class="ma-2" size="x-small">
{{ type }}
</v-chip>
</span>
</div>
</v-card-text>
</v-card>
</v-col>
</v-row>
<!-- Tools table ends -->
<!-- Activities -->
<section id="activities">
<h3 class="text-h4 my-4">Activities</h3>
<p
:class="[
'mb-2 lato-font-medium lato-text-sm',
{ 'lato-text-md': $vuetify.display.xl },
]"
>
FAIRsharing is not just a registry. The team behind FAIRsharing is
involved in a number of FAIR-enabling activities, delivering guidance,
tools and services with and for a variety of stakeholders. As these
activities mature, we will implement or connect them in/to the
FAIRsharing resource itself.
</p>
<p
:class="[
'mb-2 lato-font-medium lato-text-sm',
{ 'lato-text-md': $vuetify.display.xl },
]"
>
Some of these activities are part of funded projects and of national or
international consortia, while others are volunteer efforts that fall
under a variety of umbrella organisations, such as working groups (WG)
and learned societies.
</p>
<b
:class="[
'mb-2 lato-font-medium lato-text-sm',
{ 'lato-text-md': $vuetify.display.xl },
]"
>
Our activities are classified using the three GO-FAIR pillar structures
(change, build, train) and are outlined here.
</b>
<!--Activities table-->
<ActivitiesStaticTable class="mb-16 mt-2" />
</section>
<!-- Governance -->
<section id="governance">
<h3 class="text-h4 mb-4">Governance</h3>
<!-- Meet the team -->
<a id="team" />
<h4 class="text-h5 mb-2">
{{ meettheteam.title }}
</h4>
<p
v-safe-html="meettheteam.description"
:class="[
'mb-5 lato-font-medium lato-text-sm',
{ 'lato-text-md': $vuetify.display.xl },
]"
/>
<ul class="d-flex flex-wrap pl-0">
<li
v-for="(profileItem, index) in meettheteam.profiles"
:key="`${profileItem}_${index}`"
:class="[
'text-center width-250 height-400 mb-10',
$vuetify.display.mdAndDown ? 'mx-auto' : '',
]"
>
<v-avatar size="160">
<v-img :src="profileItem.profileImg" style="filter: grayscale(1)" />
</v-avatar>
<p
v-safe-html="profileItem.name"
class="text-center text-primary lato-font-bold mt-2 ma-0"
style="
font-size: 1.5rem;
min-height: 80px;
display: flex;
flex-direction: column;
"
/>
<i class="small d-block height-75">
{{ profileItem.role }}
</i>
<div class="text-center mt-2 d-flex justify-center">
<span
v-for="(socialItem, socialIndex) in profileItem.social"
:key="`${socialItem}_${socialIndex}`"
>
<a
:href="
socialItem.link.includes('@')
? `mailto:${socialItem.link}`
: socialItem.link
"
class="pr-2"
target="_blank"
>
<Icon
:item="socialItem.icon"
class="mr-1"
height="25"
size="30"
wrapper-class=""
/>
</a>
</span>
</div>
</li>
</ul>
<!-- Advisory Board -->
<a id="board" />
<div
v-for="(governanceItem, key, index) in governance"
:key="Object.keys(governanceItem)[index] + '_' + 'index'"
>
<div class="mb-10">
<h4 class="text-h5 mb-8">
{{ key }}
</h4>
<div
v-for="(itemText, itemIndex) in governance_text"
:key="itemText + '_' + itemIndex"
>
<p v-safe-html="itemText.text" class="ma-1" />
</div>
<div
v-for="(item, itemIndex) in governanceItem"
:key="item.title + '_' + itemIndex"
class="mt-5"
>
<div class="mb-5">
<ul
:class="['mt-2', { 'column-count': $vuetify.display.mdAndUp }]"
>
<li
v-for="(itemData, itemDataIndex) in item.data"
:key="itemData + '_' + itemDataIndex"
:class="[
'mb-1',
{
'd-flex':
isArray(itemData) === true && $vuetify.display.lgAndUp,
},
]"
>
<div v-if="!isArray(itemData)" class="d-flex mb-2">
<p v-safe-html="itemData.text" class="ma-0" />
<a
v-if="itemData.link"
:href="
itemData.link.toString().includes('@')
? `mailto:${itemData.link}`
: itemData.link
"
class="ml-2 pr-2"
target="_blank"
>
<Icon
class="mr-1"
height="25"
item="Orcid"
size="30"
wrapper-class=""
/>
</a>
</div>
<div
v-for="(itemDataArray, itemDataArrayIndex) in itemData"
v-else
:key="itemDataArray.link + '_' + itemDataArrayIndex"
class="d-flex mb-2"
>
<p v-safe-html="itemDataArray.text" class="ma-0" />
<a
:href="
itemDataArray.link.toString().includes('@')
? `mailto:${itemDataArray.link}`
: itemDataArray.link
"
class="ml-2 pr-2"
target="_blank"
>
<Icon
class="mr-1"
height="25"
item="Orcid"
size="30"
wrapper-class=""
/>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<a id="rda" />
<!-- RDA FAIRsharing WG -->
<h4 class="text-h5 mb-2">
{{ rda.title }}
</h4>
<p
v-safe-html="rda.description"
:class="[
'mb-5 lato-font-medium lato-text-sm',
{ 'lato-text-md': $vuetify.display.xl },
]"
/>
<div
v-for="(item, itemIndex) in rda.subsections"
:key="item.title + '_' + itemIndex"
class="ml-8"
>
<div class="mb-5">
<h4 class="text-h5">
{{ item.title }}
</h4>
<div v-if="isArray(item.data)">
<ul :class="['mt-2', { 'column-count': $vuetify.display.mdAndUp }]">
<li
v-for="(itemData, itemDataIndex) in item.data"
:key="itemData + '_' + itemDataIndex"
:class="['mb-1', { 'd-flex': $vuetify.display.lgAndUp }]"
>
<div class="d-flex mb-2">
<p v-safe-html="itemData.text" class="ma-0" />
<a
v-if="itemData.link"
:href="
itemData.link.toString().includes('@')
? `mailto:${itemData.link}`
: itemData.link
"
class="ml-2 pr-2"
target="_blank"
>
<Icon
class="mr-1"
height="25"
item="Orcid"
size="30"
wrapper-class=""
/>
</a>
</div>
</li>
</ul>
</div>
<div v-else>
<p
v-safe-html="item.data"
:class="[
'mb-5 lato-font-medium lato-text-sm',
{ 'lato-text-md': $vuetify.display.xl },
]"
/>
</div>
</div>
</div>
<div>
<p
:class="[
'mb-5 lato-font-medium lato-text-sm',
{ 'lato-text-md': $vuetify.display.xl },
]"
>
<a href="https://zulip.com/" target="_blank">
<img
height="27px"
src="/assets/icons/zulip-icon.png"
width="27px"
/>
</a>
We'd like to thank
<a class="underline-effect" href="https://zulip.com/" target="_blank"
>Zulip</a
>
for access to their community plan, which helps both our core team and
our champions. Zulip is an open-source modern team chat app designed
to keep both live and asynchronous conversations organized.
</p>
</div>
</section>
</main>
</template>
<script>
/**
* All static pages will be handle through this namespace
* @namespace Static
*/
import { isArray } from "lodash";
import Icon from "@/components/Icon";
import ActivitiesStaticTable from "@/components/Static/Community/ActivitiesStaticTable";
import communityData from "@/data/communityPageData.json";
import customIcons from "@/plugins/icons";
const handleScroll = () => {
// Check if we are at the top
// Only run this if there is actually a hash to remove
if (window.scrollY < 2 && window.location.hash) {
// We use replaceState so we don't clutter the history stack
history.replaceState(history.state, null, window.location.pathname);
}
};
/** This component handles the sign-up/register page
* @memberOf Static
* @name Community
* @type module
* @instance
* */
export default {
name: "Community",
components: { Icon, ActivitiesStaticTable },
title: "This will be the community page",
data: () => {
return {
contentTabs: communityData.contentTabs,
externalLinks: communityData.externalLinks,
governance: communityData.governance,
governance_text: communityData.governance_text,
meettheteam: communityData.meettheteam,
rda: communityData.rda,
tables: communityData.tables,
applyCss: false,
currentAnchor: "",
Icon,
customIcons: customIcons,
};
},
watch: {
$route: {
deep: true,
handler() {
this.applyCss = false;
this.$nextTick(() => {
this.applyCss = true;
});
},
},
},
created() {
this.$nextTick(() => {
// update the UI padding and margin after DOM is fully loaded.
this.applyCss = true;
});
},
mounted() {
window.addEventListener("scroll", handleScroll);
},
unmounted() {
//CRITICAL: If you skip this, the event listener keeps running forever in the background!
window.removeEventListener("scroll", handleScroll);
},
methods: {
jumpToAnchor(selectedAnchor) {
let anchorElement = document.getElementById(selectedAnchor);
if (selectedAnchor !== this.currentAnchor) {
anchorElement.scrollIntoView({ behavior: "smooth", block: "start" });
history.pushState(null, null, `#${selectedAnchor}`);
this.currentAnchor = selectedAnchor;
}
},
isArray(input) {
return isArray(input);
},
orgUrl(org) {
if (org.id) {
return `/organisations/${org.id}`;
}
else {
return org.url;
}
},
},
};
</script>
<style lang="scss" scoped>
.links {
border: 1px #d4d4d4 solid;
margin: 2px;
}
.block-category {
&__card {
transition: all 0.2ms ease;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
box-shadow: 0 1rem 2rem rgba(black, 0.15) !important;
-webkit-box-shadow: 0 1rem 2rem rgba(black, 0.15) !important;
-moz-box-shadow: 0 1rem 2rem rgba(black, 0.15) !important;
-o-box-shadow: 0 1rem 2rem rgba(black, 0.15) !important;
&:hover {
transform: scale(1.05);
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
-o-transform: scale(1.05);
}
&__gradient {
height: 200px;
background: rgb(171, 171, 171);
background: linear-gradient(
50deg,
rgb(204, 204, 204) 0%,
rgb(135, 135, 135) 100%
);
background: -webkit-linear-gradient(
50deg,
rgb(204, 204, 204) 0%,
rgb(135, 135, 135) 100%
);
background: -o-linear-gradient(
50deg,
rgb(204, 204, 204) 0%,
rgb(135, 135, 135) 100%
);
background: -ms-linear-gradient(
50deg,
rgb(204, 204, 204) 0%,
rgb(135, 135, 135) 100%
);
}
}
}
.v-divider {
margin: 8px;
}
.border-bottom {
border-bottom: 1px solid #ecf0f1 !important;
}
.border-left {
border-left: 1px solid #ecf0f1 !important;
}
a:hover {
div {
transform: scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
}
}
td {
font-size: 1rem !important;
}
.column-count {
column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;
}
.word-break {
white-space: break-spaces;
}
</style>