[Monitor|Trunk]

complete previous commit




git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor@57205 d315682c-612b-4755-9ff5-7f18f6832af3

README.md

@@ -0,0 +1,54 @@
+# Angular Universal & Anguar-CLI minimal starter
+
+> This demo is built following the [Angular-CLI Wiki guide](https://github.com/angular/angular-cli/wiki/stories-universal-rendering)
+
+We're utilizing packages from the [Angular Universal @nguniversal](https://github.com/angular/universal) repo, such as [ng-module-map-ngfactory-loader](https://github.com/angular/universal/tree/master/modules/module-map-ngfactory-loader) to enable Lazy Loading.
+
+---
+
+## Static or Dynamic
+This repo demonstrates the use of 2 different forms of Server Side Rendering.
+
+**Static** Also known as "prerendering"
+* Happens at build time
+* Renders your application and replaces the dist index.html with a version rendered at the route `/`.
+
+**Dynamic**
+* Happens at runtime
+* Uses `ngExpressEngine` to render you application on the fly at the requested url.
+
+---
+
+## Installation
+* `npm install` or `yarn`
+
+---
+
+## Development (Client-side only rendering)
+* run `npm run start` which will start `ng serve` (project served at the standard: localhost:4200)
+
+---
+
+## Production 
+
+Depending on whether you're publishing dynamic or static prerendering, run the build command, and then serve up your dist folder assets.
+
+> **NOTE**: To deploy your **Static** site to a static hosting platform you will have to deploy the *`dist/browser`* folder, rather than the usual *`dist`*
+
+ie: `npm run build:dynamic` or `npm run build:static`. All of the files that need to be served will be found within the `/dist` folder.
+
+
+
+---
+
+## Testing Universal (dynamic or static) builds -Locally-
+
+**Dynamic** : **`npm run start:dynamic`**
+
+Compiles your application and spins up a Node Express to dynamically serve your Universal application on `http://localhost:4000`.
+
+**Static** : **`npm run start:static`**
+
+- Compiles your application and prerenders your applications files, spinning up a demo http-server so you can view it on `http://127.0.0.1:8080`
+
+

package.json

@@ -0,0 +1,73 @@
+{
+  "name": "openaire-monitor",
+  "version": "1.0.0",
+  "license": "Openaire",
+  "contributors": [
+    "Argiro Kokogiannaki <argirok@di.uoa.gr>",
+    "Konstantina Galouni <kgalouni@di.uoa.gr>"
+  ],
+  "scripts": {
+    "ng": "ng",
+    "start": " ng serve --disable-host-check --host 0.0.0.0",
+    "start:ssr": "npm run build:ssr && npm run serve:ssr",
+    "start:prerender": "npm run build:prerender && npm run serve:prerender",
+    "build": "ng build",
+    "build:client-and-server-bundles": "ng build --prod --sourceMap --stats-json=true && ng run ng-universal-demo:server:production",
+    "build:prerender": "npm run build:client-and-server-bundles && npm run webpack:server && npm run generate:prerender",
+    "build:ssr": "npm run build:client-and-server-bundles  && npm run webpack:server",
+    "generate:prerender": "cd dist && node prerender",
+    "webpack:server": "webpack --config webpack.server.config.js --progress --colors",
+    "serve:prerender": "cd dist/browser && http-server",
+    "serve:ssr": "node dist/server"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^7.2.14",
+    "@angular/cdk": "^7.3.7",
+    "@angular/common": "7.2.14",
+    "@angular/compiler": "7.2.14",
+    "@angular/core": "7.2.14",
+    "@angular/forms": "7.2.14",
+    "@angular/http": "7.2.14",
+    "@angular/material": "^7.3.7",
+    "@angular/platform-browser": "7.2.14",
+    "@angular/platform-browser-dynamic": "7.2.14",
+    "@angular/platform-server": "7.2.14",
+    "@angular/router": "7.2.14",
+    "@nguniversal/express-engine": "^6.0.0",
+    "@nguniversal/module-map-ngfactory-loader": "^6.0.0",
+    "@types/express": "^4.16.1",
+    "angular-datatables": "^4.4.1",
+    "citation-js": "^0.3.4",
+    "clipboard": "^1.5.16",
+    "core-js": "^2.4.1",
+    "datatables.net": "^1.10.19",
+    "datatables.net-dt": "^1.10.19",
+    "jquery": "^3.4.1",
+    "ngx-json-ld": "0.1.6",
+    "prom-client": "^11.3.0",
+    "ts-md5": "^1.2.0",
+    "tslib": "^1.9.0",
+    "wikidata-sdk": "^5.2.9",
+    "zone.js": "^0.8.26",
+    "ng-recaptcha": "^3.0.5",
+    "ng2-ckeditor": "1.1.9"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~0.13.0",
+    "@angular/cli": "^7.3.9",
+    "@angular/compiler-cli": "7.2.14",
+    "@angular/language-service": "7.2.14",
+    "@types/datatables.net": "^1.10.17",
+    "@types/jquery": "^3.3.29",
+    "@types/node": "^8.0.30",
+    "cpy-cli": "^1.0.1",
+    "http-server": "^0.10.0",
+    "reflect-metadata": "^0.1.10",
+    "rxjs": "6.5.1",
+    "rxjs-compat": "^6.5.1",
+    "ts-loader": "^4.2.0",
+    "typescript": "3.2.4",
+    "webpack-cli": "^3.3.2"
+  }
+}

prerender.ts

@@ -0,0 +1,45 @@
+// Load zone.js for the server.
+import 'zone.js/dist/zone-node';
+import 'reflect-metadata';
+import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'fs';
+import { join } from 'path';
+
+import { enableProdMode } from '@angular/core';
+// Faster server renders w/ Prod mode (dev mode never needed)
+enableProdMode();
+
+// Express Engine
+import { ngExpressEngine } from '@nguniversal/express-engine';
+// Import module map for lazy loading
+import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
+import { renderModuleFactory } from '@angular/platform-server';
+import { ROUTES } from './static.paths';
+
+// * NOTE :: leave this as require() since this file is built Dynamically from webpack
+const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');
+
+const BROWSER_FOLDER = join(process.cwd(), 'browser');
+
+// Load the index.html file containing referances to your application bundle.
+const index = readFileSync(join('browser', 'index.html'), 'utf8');
+
+let previousRender = Promise.resolve();
+
+// Iterate each route path
+ROUTES.forEach(route => {
+  const fullPath = join(BROWSER_FOLDER, route);
+
+  // Make sure the directory structure is there
+  if(!existsSync(fullPath)){
+    mkdirSync(fullPath);
+  }
+
+  // Writes rendered HTML to index.html, replacing the file if it already exists.
+  previousRender = previousRender.then(_ => renderModuleFactory(AppServerModuleNgFactory, {
+    document: index,
+    url: route,
+    extraProviders: [
+      provideModuleMap(LAZY_MODULE_MAP)
+    ]
+  })).then(html => writeFileSync(join(fullPath, 'index.html'), html));
+});

server.ts

@@ -0,0 +1,71 @@
+import 'zone.js/dist/zone-node';
+import 'reflect-metadata';
+import { renderModuleFactory } from '@angular/platform-server';
+import { enableProdMode } from '@angular/core';
+
+import * as express from 'express';
+import { join } from 'path';
+import { readFileSync } from 'fs';
+
+// Faster server renders w/ Prod mode (dev mode never needed)
+enableProdMode();
+
+// Express server
+const app = express();
+
+const PORT = process.env.PORT || 4000;
+const DIST_FOLDER = join(process.cwd(), 'dist');
+
+// Our index.html we'll use as our template
+const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();
+
+// * NOTE :: leave this as require() since this file is built Dynamically from webpack
+const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');
+
+// Express Engine
+import {ngExpressEngine, RenderOptions} from '@nguniversal/express-engine';
+// Import module map for lazy loading
+import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
+
+// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
+// app.engine('html', ngExpressEngine({
+//   bootstrap: AppServerModuleNgFactory,
+//   providers: [
+//      { provide: 'request', useFactory: () => options.req, deps: [] },
+//     provideModuleMap(LAZY_MODULE_MAP)
+//   ]
+// }));
+
+// be able to get request and get domain from there
+app.engine('html', (_, options: RenderOptions, callback) => {
+    let engine = ngExpressEngine({
+        bootstrap: AppServerModuleNgFactory,
+        providers: [
+            { provide: 'request', useFactory: () => options.req, deps: [] },
+            provideModuleMap(LAZY_MODULE_MAP)
+        ]
+    });
+    engine(_, options, callback);
+});
+
+app.set('view engine', 'html');
+app.set('views', join(DIST_FOLDER, 'browser'));
+
+/* - Example Express Rest API endpoints -
+  app.get('/api/**', (req, res) => { });
+*/
+
+// Server static files from /browser
+app.get('*.*', express.static(join(DIST_FOLDER, 'browser'), {
+  maxAge: '1y'
+}));
+
+// ALl regular routes use the Universal engine
+app.get('*', (req, res) => {
+  res.render('index', { req });
+});
+
+// Start up the Node server
+app.listen(PORT, () => {
+  console.log(`Node Express server listening on http://localhost:${PORT}`);
+});

src/app/app.module.ts

@@ -0,0 +1,46 @@
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {CommonModule} from '@angular/common';
+import {HttpClientModule} from "@angular/common/http";
+import {BrowserModule} from '@angular/platform-browser';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {AppComponent} from './app.component';
+import {OpenaireErrorPageComponent} from './error/errorPage.component';
+
+import {AppRoutingModule} from './app-routing.module';
+import {SharedModule} from './shared/shared.module';
+import {CookieLawModule} from './openaireLibrary/sharedComponents/cookie-law/cookie-law.module';
+import {BottomModule} from './openaireLibrary/sharedComponents/bottom.module';
+import {ErrorModule} from './openaireLibrary/error/error.module';
+import {NavigationBarModule} from './openaireLibrary/sharedComponents/navigationBar.module';
+
+import {EnvironmentSpecificResolver} from './openaireLibrary/utils/properties/environmentSpecificResolver';
+
+import {CommunitiesService} from './openaireLibrary/connect/communities/communities.service';
+import {LayoutService} from "./openaireLibrary/services/layout.service";
+import {SubscribeModule} from './utils/subscribe/subscribe.module';
+import {ThemeComponent} from "./test/theme.component";
+
+@NgModule({
+
+  imports: [
+    SharedModule,
+    NoopAnimationsModule,
+    CommonModule,
+    HttpClientModule,
+    ErrorModule,
+    FormsModule,
+    NavigationBarModule,
+    BottomModule,
+    CookieLawModule,
+    SubscribeModule.forRoot(),
+    BrowserModule.withServerTransition({appId: 'my-app'}),
+    AppRoutingModule
+  ],
+  declarations: [ AppComponent, OpenaireErrorPageComponent, ThemeComponent],
+  exports: [ AppComponent ],
+  providers:[EnvironmentSpecificResolver,  CommunitiesService, LayoutService],
+  bootstrap: [AppComponent]
+})
+//
+export class AppModule {}

src/app/app.server.module.ts

@@ -0,0 +1,20 @@
+import {NgModule} from '@angular/core';
+import {ServerModule} from '@angular/platform-server';
+import {ModuleMapLoaderModule} from '@nguniversal/module-map-ngfactory-loader';
+
+import {AppModule} from './app.module';
+import {AppComponent} from './app.component';
+
+@NgModule({
+  imports: [
+    // The AppServerModule should import your AppModule followed
+    // by the ServerModule from @angular/platform-server.
+    AppModule,
+    ServerModule,
+    ModuleMapLoaderModule,
+  ],
+  // Since the bootstrapped component is not inherited from your
+  // imported AppModule, it needs to be repeated here.
+  bootstrap: [AppComponent],
+})
+export class AppServerModule {}

src/app/error/errorPage.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+import { Location } from '@angular/common';
+  
+@Component({
+    selector: 'openaire-error',
+    template: `
+    <error></error>
+    `
+})
+
+export class OpenaireErrorPageComponent {
+
+}

src/app/home/home-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import{HomeComponent} from './home.component';
+
+import {FreeGuard} from '../openaireLibrary/login/freeGuard.guard';
+import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+     	{ path: '', component: HomeComponent, canActivate: [FreeGuard], canDeactivate: [PreviousRouteRecorder] }
+
+    ])
+  ]
+})
+export class HomeRoutingModule { }

src/app/home/home.component.html

@@ -0,0 +1,242 @@
+<schema2jsonld [URL]="properties.baseLink"
+               [logoURL]="properties.baseLink+'/assets/common-assets/logo-small-monitor.png'" type="home"
+               name="OpenAIRE Monitor">
+</schema2jsonld>
+<div
+     class="image-front-topbar uk-margin-large-top"
+     uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}"
+     tm-header-transparent="light" tm-header-transparent-placeholder="">
+  <helper *ngIf="pageContents && pageContents['left'] && pageContents['left'].length > 0"
+          [texts]="pageContents['left']"></helper>
+  <!--<div style="background-image: url('assets/home/banner.jpg') !important;"
+    class="uk-section uk-background-norepeat uk-background-bottom-center uk-background-cover uk-section-overlap uk-position-relative uk-preserve-color">
+    <div class=" uk-section uk-padding-remove-bottom">
+      <div class="uk-position-cover"></div>
+      <div class="uk-position-relative uk-panel">
+        <div class="uk-container uk-container-large uk-section">
+          <div class="uk-grid">
+            <div class="uk-width-1-2@m uk-width-1-1@s">
+              <div class="uk-h1">Build an Open Research <b>Gateway</b> for your <b>Community</b></div>
+              <h4 class="uk-margin-remove-top">Turn Open Science into practice</h4>
+              <div class="uk-h5 uk-margin-top">Share and link your research results.<br>
+                Across organizations, across borders.<br>Customized to your needs.
+              </div>
+            </div>
+            <div class="uk-width-1-1 uk-inline uk-margin-medium-top uk-margin-medium-bottom">
+              <a class="uk-button portal-button" routerLink="/about/learn-how" routerLinkActive="router-link-active">
+                LEARN
+                HOW</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>-->
+</div>
+<div>
+  <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
+          [texts]="pageContents['top']"></helper>
+  <!--<div class="uk-container uk-container-large uk-margin-medium-top">
+    <div class="uk-text-center uk-text-bold uk-h4">Open and FAIR science is our mission</div>
+    <div class="uk-margin-medium-top">
+      <div class="uk-child-width-1-3@m uk-child-width-1-1@s uk-grid-match uk-grid-medium uk-grid-margin"
+           uk-height-match=".target" uk-grid>
+        <div>
+          <div class="uk-card uk-card-default uk-padding-small connectInfoCard">
+            <div class="uk-card-media-top uk-flex uk-flex-middle uk-flex-center">
+              <div class="target">
+                <img src="assets/connect-assets/home/1.png" width="100" height="89">
+              </div>
+            </div>
+            <div class="uk-card-body uk-padding-remove-horizontal uk-padding-remove-bottom">
+              <div class="target">
+                <h5 class="uk-text-bold uk-text-center">A Virtual Research Environment</h5>
+                <div>An overlay platform making it easy to share, link, disseminate and monitor all your publications,
+                  data, software, methods. In one place.
+                </div>
+              </div>
+              <hr>
+              <div>
+                <div class="uk-text-uppercase text-center">Features</div>
+                <ul class="uk-list">
+                  <li>
+                      <span
+                        class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right"
+                        uk-icon="check">
+                      </span>
+                    Access to OpenAIRE resources
+                  </li>
+                  <li>
+                      <span
+                        class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right"
+                        uk-icon="check">
+                      </span>
+                    Moderated, front-end linking
+                  </li>
+                  <li>
+                      <span
+                        class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right"
+                        uk-icon="check">
+                      </span>
+                    Cross-platform search
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div class="uk-card uk-card-default uk-padding-small connectInfoCard">
+            <div class="uk-card-media-top uk-flex uk-flex-middle uk-flex-center">
+              <div class="target">
+                <img src="assets/connect-assets/home/2.png" width="100" height="108">
+              </div>
+            </div>
+            <div class="uk-card-body uk-padding-remove-horizontal uk-padding-remove-bottom">
+              <div class="target">
+                <h5 class="uk-text-bold uk-text-center">Open Science in action</h5>
+                <div>A time-saving bundle of services for researchers to effortlessly practice open science. An integral
+                  part of the European Open Science Cloud.
+                </div>
+
+              </div>
+              <hr>
+              <div>
+                <div class="uk-text-uppercase text-center">Features</div>
+                <ul class="uk-list">
+                  <li>
+                      <span
+                        class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right"
+                        uk-icon="check">
+                      </span>
+                    Use of OpenAIRE Guidelines
+                  </li>
+                  <li>
+                      <span
+                        class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right"
+                        uk-icon="check">
+                      </span>
+                    DOIs via Zenodo
+                  </li>
+                  <li>
+                      <span
+                        class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right"
+                        uk-icon="check">
+                      </span>
+                    EOSC Single Sign-On
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div class="uk-card uk-card-default uk-padding-small connectInfoCard">
+            <div class="uk-card-media-top uk-flex uk-flex-middle uk-flex-center">
+              <div class="target">
+                <img src="assets/connect-assets/home/3.png" width="120" height="104">
+              </div>
+            </div>
+            <div class="uk-card-body uk-padding-remove-horizontal uk-padding-remove-bottom">
+              <div class="target">
+                <h5 class="uk-text-bold uk-text-center">Customized to your needs</h5>
+                <div>A Science Gateway with your own brand, rules for aggregation, text & data mining, and
+                  presentation. Run by you via a simple, yet powerful backend administration tool.
+                </div>
+              </div>
+              <hr>
+              <div>
+                <div class="uk-text-uppercase text-center">Features</div>
+                <ul class="uk-list">
+                  <li>
+                      <span
+                        class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right"
+                        uk-icon="check">
+                      </span>
+                    Access control
+                  </li>
+                  <li>
+                      <span
+                        class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right"
+                        uk-icon="check">
+                      </span>
+                    Analytics: rich set of indicators
+                  </li>
+                  <li>
+                      <span
+                        class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right"
+                        uk-icon="check">
+                      </span>
+                    Look & feel to match your brand
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div style="background-image: url('assets/home/background.png') !important;"
+       class="uk-margin-large-top uk-section uk-background-norepeat uk-background-top-center uk-background-cover uk-section-overlap uk-position-relative uk-preserve-color">
+    <div class="uk-container uk-container-large">
+      <gif-slider [gifs]="gifs" [link]="true" [linkTitle]="'learn more'" [route]="'/about/learn-how'">
+      </gif-slider>
+    </div>
+  </div>-->
+</div>
+<div *ngIf="researchCommunities.length === 0" class="uk-container uk-container-large uk-margin-medium-top">
+  <errorMessages [status]="[status]" [type]="'communities'"></errorMessages>
+</div>
+<div *ngIf="!loading && researchCommunities.length > 0" class="uk-container uk-container-large uk-margin-medium-top">
+  <div class="uk-text-bold uk-h4">Community Gateways in Action</div>
+  <div [class]="'uk-margin-medium-top' + (researchCommunities.length <= 5 ? ' uk-margin-medium-bottom' : '')">
+
+    <div
+      class="uk-grid-match uk-grid-medium  uk-child-width-1-5@m uk-child-width-1-2 uk-text-center"
+      uk-grid uk-height-match=".community">
+      <div *ngFor="let community of researchCommunities.slice(0, 5); let i = index">
+        <div class="uk-padding-small uk-card uk-card-default communityCard">
+          <browse-community [community]=community></browse-community>
+        </div>
+      </div>
+    </div>
+
+  </div>
+  <div class="uk-text-right uk-margin-top">
+    <a *ngIf="researchCommunities.length > 5" class="portal-link uk-text-uppercase uk-text-bold uk-text-small"
+       routerLinkActive="router-link-active" routerLink="/search/find/communities">
+      Browse All >
+    </a>
+  </div>
+</div>
+<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
+        [texts]="pageContents['bottom']"></helper>
+<!--<div style="background-color: #CFDEF1;"
+     class="uk-background-norepeat uk-background-cover uk-section-overlap uk-position-relative uk-preserve-color uk-margin-large-top">
+  <div class="uk-container uk-container-large uk-section">
+    <div class="uk-flex uk-flex-middle uk-padding" uk-grid>
+      <div class="uk-text-center uk-width-1-1@s uk-width-1-3@m">
+        <img width="237" height="250" src="assets/connect-assets/contact/1.png">
+      </div>
+      <div class="uk-width-expand">
+        <div class="uk-text-bold uk-h4">
+          <div>Let us help you develop a collaborative Open Science Gateway for your community. It is fast. It is
+            reliable.
+          </div>
+        </div>
+        <div class="uk-margin-medium">Get in touch with our team to find out how.</div>
+        <div class="uk-inline">
+          <a class="uk-button portal-button" routerLink="/contact-us" routerLinkActive="router-link-active"> CONTACT
+            US</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>-->
+<div class="uk-section-muted"
+     uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}">
+  <div class="uk-container uk-container-large">
+    <other-portals [properties]="properties" portal="monitor"> </other-portals>
+  </div>
+</div>

src/app/home/home.component.ts

@@ -0,0 +1,199 @@
+import {Component} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {Meta, Title} from '@angular/platform-browser';
+import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
+import {CommunitiesService} from '../openaireLibrary/connect/communities/communities.service';
+import {SubscribeService} from '../openaireLibrary/utils/subscribe/subscribe.service';
+import {CommunityInfo} from '../openaireLibrary/connect/community/communityInfo';
+
+import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
+import {StringUtils} from '../openaireLibrary/utils/string-utils.class';
+
+import {ErrorCodes} from '../openaireLibrary/utils/properties/errorCodes';
+import {ErrorMessagesComponent} from '../openaireLibrary/utils/errorMessages.component';
+import {HelperService} from "../openaireLibrary/utils/helper/helper.service";
+import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
+
+@Component({
+  selector: 'home',
+  templateUrl: 'home.component.html',
+})
+
+export class HomeComponent {
+  public piwiksub: any;
+
+  public pageTitle = "OpenAIRE | Monitor";
+  public researchCommunities = [];
+  public gifs: { "gif": string, "header": string, "text" }[] = [];
+  public pageContents = null;
+  public divContents = null;
+  // Message variables
+  public status: number;
+  public loading: boolean = true;
+  public subscriberErrorMessage: string = "";
+  public errorCodes: ErrorCodes;
+  private errorMessages: ErrorMessagesComponent;
+
+  properties: EnvProperties;
+  public keyword: string = "";
+  public type: string = "all";
+
+  constructor(
+    private route: ActivatedRoute,
+    private _router: Router,
+    private _meta: Meta,
+    private _title: Title,
+    private _piwikService: PiwikService,
+    private _communitiesService: CommunitiesService,
+    private _subscribeService: SubscribeService,
+    private helper: HelperService,
+    private seoService: SEOService) {
+
+    var description = "OpenAIRE - Monitor, monitor dashboard, funder, statistics, ";
+    var title = "OpenAIRE - Monitor";
+
+    this._meta.updateTag({content: description}, "name='description'");
+    this._meta.updateTag({content: description}, "property='og:description'");
+    this._meta.updateTag({content: title}, "property='og:title'");
+    this._title.setTitle(title);
+
+    this.errorCodes = new ErrorCodes();
+    this.errorMessages = new ErrorMessagesComponent();
+    this.status = this.errorCodes.LOADING;
+  }
+
+  public ngOnInit() {
+    this.route.data
+      .subscribe((data: { envSpecific: EnvProperties }) => {
+        this.properties = data.envSpecific;
+        var url = data.envSpecific.baseLink + this._router.url;
+        this.seoService.createLinkForCanonicalURL(url, false);
+        this._meta.updateTag({content: url}, "property='og:url'");
+        if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
+          this.piwiksub = this._piwikService.trackView(this.properties, "OpenAIRE Monitor", this.properties.piwikSiteId).subscribe();
+        }
+        this.getCommunities();
+        this.createGifs();
+        //this.getDivContents();
+        this.getPageContents();
+      });
+  }
+
+  private getPageContents() {
+    this.helper.getPageHelpContents(this._router.url, this.properties, 'monitor').subscribe(contents => {
+      this.pageContents = contents;
+    })
+  }
+
+  private getDivContents() {
+    this.helper.getDivHelpContents(this._router.url, this.properties, 'monitor').subscribe(contents => {
+      this.divContents = contents;
+    })
+  }
+
+  public getCommunities() {
+    this.loading = true;
+    this.status = this.errorCodes.LOADING;
+    this.subscriberErrorMessage = "";
+
+    this.researchCommunities = [];
+
+    this._communitiesService.getCommunitiesState().subscribe(
+      communitiesResults => {
+        if(!communitiesResults){
+          return;
+        }
+        if(communitiesResults.length == 0) {
+          this.status = this.errorCodes.DONE;
+          return;
+        }
+        this.sort(communitiesResults);
+        communitiesResults.forEach((community, index) => {
+          let showCommunity: boolean = true;
+          if (community['status'] == "hidden" || community['status'] == "manager") {
+            showCommunity = false;
+          }
+          if (showCommunity) {
+            this.researchCommunities.push(community);
+          }
+          this.status = this.errorCodes.DONE;
+        });
+        this.loading = false;
+      },
+      error => {
+        this.status = this.handleError("Error getting communities", error);
+        this.loading = false;
+      }
+    );
+  }
+
+  private createGifs() {
+    this.gifs.push({
+      gif: "assets/connect-assets/home/gifs/deposit.gif",
+      header: "Find a repository to deposit your research outcome",
+      text: "This is OpenAIRE’s key service for research communities, both established and emerging ones. Our service helps you reach out and engage all your researchers to practice open science out-of-the-box."
+    });
+    this.gifs.push({
+      gif: "assets/connect-assets/home/gifs/link.gif",
+      header: "Link your research output with your community, funding, and other research products",
+      text: "This is OpenAIRE’s key service for research communities, both established and emerging ones. Our service helps you reach out and engage all your researchers to practice open science out-of-the-box."
+    });
+    this.gifs.push({
+      gif: "assets/connect-assets/home/gifs/overview.gif",
+      header: "View community's overview at a glance",
+      text: "This is OpenAIRE’s key service for research communities, both established and emerging ones. Our service helps you reach out and engage all your researchers to practice open science out-of-the-box."
+    });
+    this.gifs.push({
+      gif: "assets/connect-assets/home/gifs/results.gif",
+      header: "Search & browse your community's research products. ",
+      text: "This is OpenAIRE’s key service for research communities, both established and emerging ones. Our service helps you reach out and engage all your researchers to practice open science out-of-the-box."
+    });
+    this.gifs.push({
+      gif: "assets/connect-assets/home/gifs/graph-analysis.gif",
+      header: "View statistics for your community's research products.",
+      text: "This is OpenAIRE’s key service for research communities, both established and emerging ones. Our service helps you reach out and engage all your researchers to practice open science out-of-the-box."
+    });
+  }
+
+  private sort(results: CommunityInfo[]) {
+    results.sort((left, right): number => {
+      if (!right.date || left.date > right.date) {
+        return -1;
+      } else if (!left.date || left.date < right.date) {
+        return 1;
+      } else {
+        if (left.title > right.title) {
+          return 1;
+        } else if (left.title < right.title) {
+          return -1;
+        } else {
+          return 0;
+        }
+      }
+    })
+  }
+
+  public quote(param: string): string {
+    return StringUtils.quote(param);
+  }
+
+  public ngOnDestroy() {
+    if (this.piwiksub) {
+      this.piwiksub.unsubscribe();
+    }
+  }
+
+  private handleError(message: string, error): number {
+    var code = "";
+    if (!error.status) {
+      var error = error.json();
+      code = error.code;
+    } else {
+      code = error.status;
+    }
+
+    console.error("Communities (component): " + message, error);
+
+    return this.errorMessages.getErrorCode(code);
+  }
+}

src/app/home/home.module.ts

@@ -0,0 +1,42 @@
+import {NgModule}                 from '@angular/core';
+import {CommonModule}             from '@angular/common';
+import {FormsModule}              from '@angular/forms';
+import {RouterModule}             from '@angular/router';
+import {ManageModule}             from '../openaireLibrary/utils/manage/manage.module';
+
+import {HomeComponent}     from './home.component';
+
+import {FreeGuard}                from '../openaireLibrary/login/freeGuard.guard';
+import {PreviousRouteRecorder}    from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
+
+import {PiwikService}             from '../openaireLibrary/utils/piwik/piwik.service';
+import {ErrorMessagesModule}      from '../openaireLibrary/utils/errorMessages.module';
+
+import {SearchFormModule}         from '../openaireLibrary/searchPages/searchUtils/searchForm.module';
+import {HelperModule} from "../openaireLibrary/utils/helper/helper.module";
+import {GifSliderModule} from "../openaireLibrary/utils/gif-slider/gif-slider.module";
+import {OtherPortalsModule} from "../openaireLibrary/sharedComponents/other-portals/other-portals.module";
+import {Schema2jsonldModule} from "../openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module";
+import {SEOServiceModule} from "../openaireLibrary/sharedComponents/SEO/SEOService.module";
+import {BrowseCommunityModule} from "../communities/browseCommunity/browse-community.module";
+import {HomeRoutingModule} from "./home-routing.module";
+
+@NgModule({
+  imports: [
+    CommonModule, FormsModule, RouterModule,
+    ManageModule, ErrorMessagesModule,
+    SearchFormModule,  GifSliderModule, OtherPortalsModule,
+    HelperModule, Schema2jsonldModule, SEOServiceModule, HomeRoutingModule, BrowseCommunityModule
+  ],
+  declarations: [
+    HomeComponent
+  ],
+  providers:[
+    FreeGuard, PreviousRouteRecorder,
+    PiwikService
+  ],
+  exports: [
+    HomeComponent
+  ]
+})
+export class HomeModule { }

static.paths.ts

@@ -0,0 +1,15 @@
+export const ROUTES = [
+  '/',
+  '/lazy',
+  '/home',
+  '/search/publication','/search/other','/search/project','/search/dataset','/search/dataprovider','/search/organization',
+  '/search/find',
+  '/search/person','/search/publication','/search/project','/search/dataset','/search/dataprovider','/search/organization',
+  '/search/find/people','/search/find/publications','/search/find/other','/search/find/projects','/search/find/datasets','/search/find/dataproviders','/search/find/organizations',
+  '/search/advanced/people','/search/advanced/publications','/search/advanced/other','/search/advanced/projects','/search/advanced/datasets','/search/advanced/dataproviders','/search/advanced/organizations',
+  '/participate/deposit-publications','/participate/deposit-datasets','/participate/deposit-publications-result','/participate/deposit-datasets-result','/participate/deposit-subject-result',
+  '/search/content-providers','/search/content-providers-table','/search/entity-registries','/search/entity-registries-table','/search/journals','/search/journals-table',
+  '/project-report','/claims','/myclaims','/participate/claim','/participate/direct-claim','/claims-project-manager',
+  '/test','/user-info',
+  '/error', '/*path'
+];

tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "importHelpers": true,
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "es5",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2017",
+      "dom"
+    ],
+    "module": "es2015",
+    "baseUrl": "./"
+  }
+}

webpack.server.config.js

@@ -0,0 +1,51 @@
+// Work around for https://github.com/angular/angular-cli/issues/7200
+
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+  //mode: 'none',
+  entry: {
+    // This is our Express server for Dynamic universal
+    server: './server.ts',
+    // This is an example of Static prerendering (generative)
+    prerender: './prerender.ts'
+  },
+  target: 'node',
+  resolve: { extensions: ['.ts', '.js'] },
+  // Make sure we include all node_modules etc
+  externals: [/(node_modules|main\..*\.js)/,],
+  optimization: {
+    minimize: false
+  },
+  output: {
+    // Puts the output at the root of the dist folder
+    path: path.join(__dirname, 'dist'),
+    filename: '[name].js'
+  },
+  module: {
+    rules: [
+      { test: /\.ts$/, loader: 'ts-loader' }
+      ,{
+        // Mark files inside `@angular/core` as using SystemJS style dynamic imports.
+        // Removing this will cause deprecation warnings to appear.
+        test: /(\\|\/)@angular(\\|\/)core(\\|\/).+\.js$/,
+        parser: { system: true },
+      },
+    ]
+  },
+  plugins: [
+    new webpack.ContextReplacementPlugin(
+      // fixes WARNING Critical dependency: the request of a dependency is an expression
+      /(.+)?angular(\\|\/)core(.+)?/,
+      path.join(__dirname, 'src'), // location of your src
+      {} // a map of your routes
+    ),
+    new webpack.ContextReplacementPlugin(
+      // fixes WARNING Critical dependency: the request of a dependency is an expression
+      /(.+)?express(\\|\/)(.+)?/,
+      path.join(__dirname, 'src'),
+      {}
+    )
+  ]
+}