Experiment with json-ld, needs cleanup (#362)

* Experiment with json-ld, needs cleanup
* for dockstore/dockstore#341
* and eventually dockstore/dockstore#750

package.json

@@ -32,6 +32,7 @@
     "@angular/platform-browser-dynamic": "^6.0.2",
     "@angular/platform-server": "^6.0.2",
     "@angular/router": "^6.0.2",
+    "@ngx-lite/json-ld": "^0.4.2",
     "@types/elastic.js": "^1.2.8",
     "@types/elasticsearch": "^5.0.14",
     "@types/jquery": "^3.3.1",

src/app/container/container.component.html

@@ -26,6 +26,7 @@
   </div>
 </div>
 <div class="row">
+  <ngx-json-ld [json]="schema"></ngx-json-ld>
   <div class="col-md-7">
     <h3 id="tool-path">
       <span id="verifiedIcon" *ngIf="tool?.versionVerified">

src/app/container/container.component.ts

@@ -15,17 +15,15 @@
  */
 import { Location } from '@angular/common';
 import { Component } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
-import { ENTER, COMMA } from '@angular/cdk/keycodes';
+import { ActivatedRoute, Router } from '@angular/router';
+import { COMMA, ENTER } from '@angular/cdk/keycodes';
 import { MatChipInputEvent } from '@angular/material';
-import { Subscription } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 import { ListContainersService } from '../containers/list/list.service';
 import { CommunicatorService } from '../shared/communicator.service';
 import { ContainerService } from '../shared/container.service';
 import { DateService } from '../shared/date.service';
-import { Dockstore } from '../shared/dockstore.model';
 import { DockstoreService } from '../shared/dockstore.service';
 import { Entry } from '../shared/entry';
 import { ImageProviderService } from '../shared/image-provider.service';
@@ -61,6 +59,7 @@ export class ContainerComponent extends Entry {
   public DockstoreToolType = DockstoreTool;
   validTabs = ['info', 'launch', 'versions', 'files'];
   separatorKeysCodes = [ENTER, COMMA];
+  public schema;
 
   constructor(private dockstoreService: DockstoreService,
     dateService: DateService,
@@ -121,6 +120,13 @@ export class ContainerComponent extends Entry {
       toolRef = this.imageProviderService.setUpImageProvider(toolRef);
     }
     this.resetContainerEditData();
+    // messy prototype for a carousel https://developers.google.com/search/docs/guides/mark-up-listings
+    // will need to be aggregated with a summary page
+    this.schema = {
+      '@type': 'ListItem',
+      'position': this.tool.id,
+      'url': this.shareURL
+    };
   }
 
   public subscriptions(): void {

src/app/shared/entry/entry.module.ts

@@ -16,6 +16,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { NgxJsonLdModule } from '@ngx-lite/json-ld';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 
@@ -34,13 +35,15 @@ import { VerifiedDisplayComponent } from './verified-display/verified-display.co
 import { VerifiedPlatformsPipe } from './verified-platforms.pipe';
 import { VersionProviderUrlPipe } from './versionProviderUrl.pipe';
 
+
 @NgModule({
   imports: [
     CommonModule,
     TooltipModule.forRoot(),
     FormsModule,
     ModalModule,
-    CustomMaterialModule
+    CustomMaterialModule,
+    NgxJsonLdModule
   ],
   declarations: [
     InfoTabCheckerWorkflowPathComponent,
@@ -67,7 +70,8 @@ import { VersionProviderUrlPipe } from './versionProviderUrl.pipe';
     VerifiedByComponent,
     VerifiedDisplayComponent,
     VerifiedPlatformsPipe,
-    VersionProviderUrlPipe
+    VersionProviderUrlPipe,
+    NgxJsonLdModule
   ]
 })
 export class EntryModule { }

src/app/workflow/workflow.component.html

@@ -40,6 +40,7 @@ <h2 class="text-center">The workflow linked to could not be found!</h2>
   </div>
 </div>
 <div class="row" *ngIf="!showRedirect">
+  <ngx-json-ld [json]="schema"></ngx-json-ld>
   <div class="col-md-7">
     <h3 id="workflow-path">
       <span id="verifiedIcon" *ngIf="workflow?.versionVerified">

src/app/workflow/workflow.component.ts

@@ -15,7 +15,7 @@
  */
 import { Location } from '@angular/common';
 import { Component, Input } from '@angular/core';
-import { ENTER, COMMA } from '@angular/cdk/keycodes';
+import { COMMA, ENTER } from '@angular/cdk/keycodes';
 import { MatChipInputEvent } from '@angular/material';
 import { ActivatedRoute, Router } from '@angular/router';
 import { takeUntil } from 'rxjs/operators';
@@ -25,7 +25,7 @@ import { DockstoreService } from '../shared/dockstore.service';
 import { Entry } from '../shared/entry';
 import { ProviderService } from '../shared/provider.service';
 import { Tag } from '../shared/swagger/model/tag';
-import {WorkflowVersion } from '../shared/swagger/model/workflowVersion';
+import { WorkflowVersion } from '../shared/swagger/model/workflowVersion';
 import { TrackLoginService } from '../shared/track-login.service';
 import { WorkflowService } from '../shared/workflow.service';
 import { ErrorService } from './../shared/error.service';
@@ -42,7 +42,7 @@ import RoleEnum = Permission.RoleEnum;
 @Component({
   selector: 'app-workflow',
   templateUrl: './workflow.component.html',
-  styleUrls: ['./workflow.component.css']
+  styleUrls: ['./workflow.component.css'],
 })
 export class WorkflowComponent extends Entry {
   workflowEditData: any;
@@ -64,6 +64,7 @@ export class WorkflowComponent extends Entry {
   protected readers = [];
   protected writers = [];
   protected owners = [];
+  public schema;
   @Input() user;
 
   constructor(private dockstoreService: DockstoreService, dateService: DateService, private refreshService: RefreshService,
@@ -130,6 +131,13 @@ export class WorkflowComponent extends Entry {
     workflowRef.versionVerified = this.dockstoreService.getVersionVerified(workflowRef.workflowVersions);
     workflowRef.verifiedSources = this.dockstoreService.getVerifiedWorkflowSources(workflowRef);
     this.resetWorkflowEditData();
+    // messy prototype for a carousel https://developers.google.com/search/docs/guides/mark-up-listings
+    // will need to be aggregated with a summary page
+    this.schema = {
+      '@type': 'ListItem',
+      'position': this.workflow.id,
+      'url': this.shareURL
+    };
   }
 
   public getDefaultVersionName(): string {

src/index.html

@@ -1,5 +1,12 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
+<!-- note that this file is in two different places:
+https://github.com/dockstore/compose_setup/blob/develop/templates/index.html.template
+and
+https://github.com/dockstore/dockstore-ui2/blob/develop/src/index.html
+
+Please keep the two in sync when making changes, pending a better solution via git submodules
+-->
 
 <head>
   <meta charset="utf-8">
@@ -8,6 +15,32 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <script type="application/ld+json">
+  {
+  "@context": "http://schema.org",
+  "@type": "Organization",
+  "url": "https://dockstore.org",
+  "logo": "https://raw.githubusercontent.com/dockstore/dockstore-ui2/develop/src/assets/images/dockstore/dockstore.png",
+  "sameAs": [
+    "https://twitter.com/DockstoreOrg"
+    ]
+  }
+  </script>
+  <script type="application/ld+json">
+  {
+  "@context": "http://schema.org",
+  "@type": "WebSite",
+  "url": "https://dockstore.org",
+  "sameAs": [
+    "https://twitter.com/DockstoreOrg"
+    ],
+  "potentialAction": {
+    "@type": "SearchAction",
+    "target": "https://dockstore.org/search?search={search_term_string}",
+    "query-input": "required name=search_term_string"
+  }
+  }
+  </script>
 
   <script>
   (function(w, d, s, l, i) {
@@ -23,7 +56,7 @@
     j.src =
       'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
     f.parentNode.insertBefore(j, f);
-  })(window, document, 'script', 'dataLayer', 'SOM-EFAKEID');
+  })(window, document, 'script', 'dataLayer', '{{ TAG_MANAGER_ID }}');
   </script>
 </head>