Squashed commit of the following:

commit 9e2e4f2
Author: Dominik Brüchner <[email protected]>
Date:   Fri Apr 29 10:46:56 2022 +0200

    Add project tile to landing page (#33)

    * Revert "removed project tile for now"

    This reverts commit 25098fe.

    * specs and link

    * Update HeroNumbers.vue

    * Update HeroNumbers.spec.js

    * Added Text Pluralize to HeroNumbers

    * Added Key Feature Section to Landing Page

    * fixing tests

    * Update LandingParts.stories.js

    * Update index.vue

    * permedcoe pages

    * fixing tests

    * package update postcss-html

    * replacing marked with nuxt/content

    * Revert "replacing marked with nuxt/content"

    This reverts commit 7d52288.

    * Update index.vue

    * added permedcoe markdown draft

    * some markup styling

    * added image urls and styling

    * some more markdown styling

    * Update MarkedWrapper.vue

    * moving the markdown file

    * img styling wrapper

    * Update .prettierrc.js

    * remove static project data, filter based on community metadata

    * make markdown file load for projects semi-dynamic

    * some refactoring

    * added unit tests

    * more unit tests and some fixes for the markdown wrapper

    * adding stories to storybook

    * Added community empty states

    * Update CommunityComponents.stories.js

    * Update OEBC009.md

    * Update OEBC009.md

commit 7814a1e
Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Date:   Thu Apr 28 10:51:04 2022 +0200

    chore(deps-dev): bump eslint-plugin-storybook from 0.5.8 to 0.5.11 (#169)

    Bumps [eslint-plugin-storybook](https://github.com/storybookjs/eslint-plugin-storybook) from 0.5.8 to 0.5.11.
    - [Release notes](https://github.com/storybookjs/eslint-plugin-storybook/releases)
    - [Changelog](https://github.com/storybookjs/eslint-plugin-storybook/blob/main/CHANGELOG.md)
    - [Commits](storybookjs/eslint-plugin-storybook@v0.5.8...v0.5.11)

    ---
    updated-dependencies:
    - dependency-name: eslint-plugin-storybook
      dependency-type: direct:development
      update-type: version-update:semver-patch
    ...

    Signed-off-by: dependabot[bot] <[email protected]>

    Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

commit edfe78c
Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Date:   Thu Apr 28 10:50:51 2022 +0200

    chore(deps-dev): bump lint-staged from 12.3.7 to 12.4.1 (#171)

    Bumps [lint-staged](https://github.com/okonet/lint-staged) from 12.3.7 to 12.4.1.
    - [Release notes](https://github.com/okonet/lint-staged/releases)
    - [Commits](lint-staged/lint-staged@v12.3.7...v12.4.1)

    ---
    updated-dependencies:
    - dependency-name: lint-staged
      dependency-type: direct:development
      update-type: version-update:semver-minor
    ...

    Signed-off-by: dependabot[bot] <[email protected]>

    Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

commit 5380d09
Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Date:   Tue Apr 26 17:03:16 2022 +0200

    fix(deps): bump gsap from 3.10.2 to 3.10.4 (#168)

    Bumps [gsap](https://github.com/greensock/GSAP) from 3.10.2 to 3.10.4.
    - [Release notes](https://github.com/greensock/GSAP/releases)
    - [Commits](greensock/GSAP@3.10.2...3.10.4)

    ---
    updated-dependencies:
    - dependency-name: gsap
      dependency-type: direct:production
      update-type: version-update:semver-patch
    ...

    Signed-off-by: dependabot[bot] <[email protected]>

    Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

commit ca8dc1d
Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Date:   Tue Apr 26 17:03:01 2022 +0200

    chore(deps-dev): bump stylelint from 14.6.1 to 14.7.1 (#166)

    Bumps [stylelint](https://github.com/stylelint/stylelint) from 14.6.1 to 14.7.1.
    - [Release notes](https://github.com/stylelint/stylelint/releases)
    - [Changelog](https://github.com/stylelint/stylelint/blob/main/CHANGELOG.md)
    - [Commits](stylelint/stylelint@14.6.1...14.7.1)

    ---
    updated-dependencies:
    - dependency-name: stylelint
      dependency-type: direct:development
      update-type: version-update:semver-minor
    ...

    Signed-off-by: dependabot[bot] <[email protected]>

    Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

commit f7621b7
Author: Dominik Brüchner <[email protected]>
Date:   Wed Apr 20 15:06:20 2022 +0200

    refactor graphql query (#167)

.prettierrc.js

@@ -3,7 +3,7 @@ const prettierConfig = {
 	useTabs: true, // we are using tabs! http://lea.verou.me/2012/01/why-tabs-are-clearly-superior/
 	trailingComma: 'es5',
 	bracketSpacing: true,
-	jsxBracketSameLine: false,
+	bracketSameLine: false,
 	arrowParens: 'always',
 	proseWrap: 'never',
 	htmlWhitespaceSensitivity: 'css',

.storybook/main.js

@@ -13,7 +13,6 @@ module.exports = {
 			use: ['style-loader', 'css-loader', 'sass-loader'],
 			include: path.resolve(__dirname, '../'),
 		});
-
 		let rule = config.module.rules.find(
 			(r) =>
 				// it can be another rule with file loader

components/Cards/CommunityCard.spec.js

@@ -19,12 +19,18 @@ describe('CommunityCard', () => {
 	});
 
 	it('should match snapshot for active community', () => {
-		const wrapper = factory(MockCommunity, { status: 'active' });
+		const wrapper = factory(MockCommunity, {
+			to: '/benchmarking/' + MockCommunity._id,
+			status: 'active',
+		});
 		expect(wrapper.html()).toMatchSnapshot();
 	});
 
 	it('should match snapshot for incubating community', () => {
-		const wrapper = factory(MockCommunity, { status: 'incubating' });
+		const wrapper = factory(MockCommunity, {
+			to: '/benchmarking/' + MockCommunity._id,
+			status: 'incubating',
+		});
 		expect(wrapper.html()).toMatchSnapshot();
 	});
 });

components/Cards/CommunityCard.vue

@@ -42,7 +42,7 @@
 		<v-card-actions>
 			<v-btn text color="primary" :to="to"> Current Event </v-btn>
 			<v-spacer />
-			<v-menu bottom left>
+			<v-menu v-if="links.length > 0" bottom left>
 				<template #activator="{ on, attrs }">
 					<v-btn icon v-bind="attrs" v-on="on">
 						<v-icon>mdi-dots-vertical</v-icon>
@@ -102,14 +102,15 @@ export default {
 			type: Array,
 			required: true,
 		},
+		to: {
+			type: String,
+			required: true,
+		},
 	},
 	computed: {
 		linksFiltered() {
 			return this.links.filter((link) => link.comment !== '@logo');
 		},
-		to() {
-			return '/benchmarking/' + this._id;
-		},
 		statusChipColor() {
 			switch (this.status) {
 				case 'active':

components/Communities/CommunityEmptyState.spec.js

@@ -0,0 +1,21 @@
+import { mount } from '@vue/test-utils';
+import CommunityEmptyState from './CommunityEmptyState.vue';
+
+const factory = () => {
+	return mount(CommunityEmptyState, {
+		...createComponentMocks({}),
+		mocks: {},
+	});
+};
+
+describe('CommunityEmptyState', () => {
+	it('is instantiated', () => {
+		const wrapper = factory();
+		expect(wrapper).toBeTruthy();
+	});
+
+	it('should match snapshot', () => {
+		const wrapper = factory();
+		expect(wrapper.html()).toMatchSnapshot();
+	});
+});

components/Communities/CommunityEmptyState.vue

@@ -0,0 +1,22 @@
+<template>
+	<div>
+		<v-img :src="illustration" contain max-height="300" />
+		<h2 class="mt-10 text-h4 text--secondary text-center">
+			No benchmarking results yet...
+		</h2>
+		<h3 class="mt-5 text-h5 text--secondary text-center">
+			Come back soon to see some benchmarking results.
+		</h3>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {},
+	data() {
+		return {
+			illustration: require('~/static/images/illustrations/empty-state.svg'),
+		};
+	},
+};
+</script>

components/Communities/CommunityEventSelector.spec.js

@@ -0,0 +1,35 @@
+import { shallowMount } from '@vue/test-utils';
+import CommunityEventSelector from './CommunityEventSelector.vue';
+import MockEvent from '~/test/unit/mockData/Event';
+import MockEvents from '~/test/unit/mockData/Events';
+
+const factory = (mockStore) => {
+	return shallowMount(CommunityEventSelector, {
+		...createComponentMocks({ store: mockStore }),
+		mocks: {
+			$vuetify: { breakpoint: {} },
+		},
+		propsData: { currentEvent: MockEvent, events: MockEvents },
+	});
+};
+
+describe('CommunityEventSelector', () => {
+	const mockStore = {
+		community: {
+			state: () => {
+				return {
+					loading: {
+						events: false,
+						tools: false,
+						datasets: false,
+						community: false,
+					},
+				};
+			},
+		},
+	};
+	it('is instantiated', () => {
+		const wrapper = factory(mockStore);
+		expect(wrapper).toBeTruthy();
+	});
+});

components/Communities/CommunityEventSelector.vue

@@ -0,0 +1,43 @@
+<template>
+	<v-row no-gutters align="center">
+		<v-col cols="8">
+			<h2 v-if="currentEvent" class="text-h6">
+				<v-menu auto>
+					<template #activator="{ on, attrs }">
+						<span class="text--clickable primary--text" v-bind="attrs" v-on="on"
+							>Event - {{ currentEvent.name }}</span
+						>
+						<v-btn icon color="primary" v-bind="attrs" v-on="on">
+							<v-icon>mdi-chevron-down</v-icon>
+						</v-btn>
+					</template>
+					<v-list>
+						<v-list-item
+							v-for="(event, index) in events"
+							:key="index"
+							link
+							dense
+							@click="$emit('change', event)"
+						>
+							<v-list-item-title>{{ event.name }}</v-list-item-title>
+						</v-list-item>
+					</v-list>
+				</v-menu>
+			</h2>
+		</v-col>
+		<v-col cols="4" class="d-flex align-center">
+			<v-icon class="mr-1 text--primary"> mdi-flag-outline </v-icon>
+			{{ currentEvent.challenges.length }}
+			{{ 'Challenges' | pluralize(currentEvent.challenges.length) }}
+		</v-col>
+	</v-row>
+</template>
+
+<script>
+export default {
+	props: {
+		currentEvent: { type: Object, required: true },
+		events: { type: Array, required: true },
+	},
+};
+</script>

components/Communities/CommunityInfo.spec.js

@@ -0,0 +1,34 @@
+import { shallowMount } from '@vue/test-utils';
+import CommunityInfo from './CommunityInfo.vue';
+import MockCommunity from '~/test/unit/mockData/Community';
+
+const factory = (mockStore) => {
+	return shallowMount(CommunityInfo, {
+		...createComponentMocks({ store: mockStore }),
+		mocks: {
+			$vuetify: { breakpoint: {} },
+		},
+		propsData: { community: MockCommunity },
+	});
+};
+
+describe('CommunityInfo', () => {
+	const mockStore = {
+		community: {
+			state: () => {
+				return {
+					loading: {
+						events: false,
+						tools: false,
+						datasets: false,
+						community: false,
+					},
+				};
+			},
+		},
+	};
+	it('is instantiated', () => {
+		const wrapper = factory(mockStore);
+		expect(wrapper).toBeTruthy();
+	});
+});

components/Communities/CommunityInfo.vue

@@ -0,0 +1,56 @@
+<template>
+	<div class="text--clickable" @click="expand = !expand">
+		<h1 class="text-h4 d-flex">
+			{{ community.acronym }}
+			<v-btn class="ml-2" color="primary" icon>
+				<v-icon>{{
+					expand
+						? 'mdi-chevron-up-circle-outline'
+						: 'mdi-chevron-down-circle-outline'
+				}}</v-icon>
+			</v-btn>
+		</h1>
+		<h2 class="subtitle-1 mb-5">{{ community.name }}</h2>
+		<v-expand-transition>
+			<v-row v-show="expand" align="center">
+				<v-col align="center" cols="2">
+					<v-img :src="community.logo" contain max-width="500" />
+				</v-col>
+				<v-col class="text-body-2 text--secondary" cols="10">
+					<p>
+						{{ community.description }}
+					</p>
+					<p v-if="community.keywords">
+						Keywords:
+						<span
+							v-for="(keyword, index) in community.keywords"
+							:key="index"
+							class="font-weight-medium"
+						>
+							{{ keyword }};
+						</span>
+					</p>
+				</v-col>
+			</v-row>
+		</v-expand-transition>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		community: { type: Object, required: true },
+	},
+	data() {
+		return {
+			expand: true,
+		};
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.text--clickable {
+	cursor: pointer;
+}
+</style>

components/Communities/__snapshots__/CommunityEmptyState.spec.js.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CommunityEmptyState should match snapshot 1`] = `
+"<div>
+  <div class=\\"v-image v-responsive theme--light\\" style=\\"max-height: 300px;\\">
+    <div class=\\"v-responsive__content\\"></div>
+  </div>
+  <h2 class=\\"mt-10 text-h4 text--secondary text-center\\">
+    No benchmarking results yet...
+  </h2>
+  <h3 class=\\"mt-5 text-h5 text--secondary text-center\\">
+    Come back soon to see some benchmarking results.
+  </h3>
+</div>"
+`;

components/Landing/FeatureTeaser.vue

@@ -2,7 +2,7 @@
 	<v-container>
 		<h2 class="text-h4 mb-15">What can you do in OpenEBench?</h2>
 		<v-row>
-			<v-col align="center" cols="12" md="4">
+			<v-col align="center" cols="12" md="3">
 				<feature-card to="benchmarking">
 					<template #icon>
 						<v-icon dark>$vuetify.icons.values.benchmark</v-icon>
@@ -14,7 +14,7 @@
 					>
 				</feature-card>
 			</v-col>
-			<v-col align="center" cols="12" md="4" class="mt-10 mt-md-0">
+			<v-col align="center" cols="12" md="3" class="mt-10 mt-md-0">
 				<feature-card to="tool">
 					<template #icon>
 						<v-icon large dark>mdi-clipboard-list-outline</v-icon>
@@ -26,7 +26,7 @@
 					>
 				</feature-card>
 			</v-col>
-			<v-col align="center" cols="12" md="4" class="mt-10 mt-md-0">
+			<v-col align="center" cols="12" md="3" class="mt-10 mt-md-0">
 				<feature-card to="observatory">
 					<template #icon>
 						<v-icon dark>$vuetify.icons.values.observatory</v-icon>
@@ -38,6 +38,18 @@
 					>
 				</feature-card>
 			</v-col>
+			<v-col align="center" cols="12" md="3" class="mt-10 mt-md-0">
+				<feature-card to="projects">
+					<template #icon>
+						<v-icon dark>$vuetify.icons.values.projects</v-icon>
+					</template>
+					<template #title> Project Spaces </template>
+					<template #description>
+						Community spaces for projects to collaborate on software in life
+						sciences</template
+					>
+				</feature-card>
+			</v-col>
 		</v-row>
 	</v-container>
 </template>

components/Landing/HeroNumbers.spec.js

@@ -33,7 +33,7 @@ describe('HeroNumbers', () => {
 
 		wrapper.vm.$vuetify.breakpoint.xs = true;
 		await wrapper.vm.$nextTick();
-		expect(wrapper.vm.containerHeight).toBe(350);
+		expect(wrapper.vm.containerHeight).toBe(450);
 	});
 
 	it('should have a container height of 170 on bigger devices', async () => {