3.0.16

.gitlab-ci.yml

@@ -19,23 +19,35 @@ mirror:
   stage: security
   script:
     - npmci git mirror
+  only:
+    - tags
   tags:
     - lossless
     - docker
     - notpriv
 
-audit:
+auditProductionDependencies:
+  image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
+  stage: security
+  script:
+    - npmci npm prepare
+    - npmci command npm install --production --ignore-scripts
+    - npmci command npm config set registry https://registry.npmjs.org
+    - npmci command npm audit --audit-level=high --only=prod --production
+  tags:
+    - docker
+
+auditDevDependencies:
   image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
   stage: security
   script:
     - npmci npm prepare
     - npmci command npm install --ignore-scripts
     - npmci command npm config set registry https://registry.npmjs.org
-    - npmci command npm audit --audit-level=high
+    - npmci command npm audit --audit-level=high --only=dev
   tags:
-    - lossless
     - docker
-    - notpriv
+  allow_failure: true
 
 # ====================
 # test stage
@@ -50,9 +62,7 @@ testStable:
     - npmci npm test
   coverage: /\d+.?\d+?\%\s*coverage/
   tags:
-    - lossless
     - docker
-    - priv
 
 testBuild:
   stage: test
@@ -63,9 +73,7 @@ testBuild:
     - npmci command npm run build
   coverage: /\d+.?\d+?\%\s*coverage/
   tags:
-    - lossless
     - docker
-    - notpriv
 
 release:
   stage: release
@@ -85,6 +93,8 @@ release:
 codequality:
   stage: metadata
   allow_failure: true
+  only:
+    - tags
   script:
     - npmci command npm install -g tslint typescript
     - npmci npm prepare

.vscode/settings.json

@@ -15,7 +15,7 @@
             "properties": {
               "projectType": {
                 "type": "string",
-                "enum": ["website", "element", "service", "npm"]
+                "enum": ["website", "element", "service", "npm", "wcc"]
               }
             }
           }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushrocks/websetup",
-  "version": "3.0.2",
+  "version": "3.0.16",
   "private": false,
   "description": "setup basic page properties",
   "main": "dist_ts/index.js",
@@ -16,16 +16,17 @@
     "websafe"
   ],
   "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.25",
-    "@gitzone/tsbundle": "^1.0.78",
-    "@gitzone/tstest": "^1.0.52",
-    "@pushrocks/tapbundle": "^3.2.9",
+    "@gitzone/tsbuild": "^2.1.28",
+    "@gitzone/tsbundle": "^1.0.88",
+    "@gitzone/tstest": "^1.0.60",
+    "@pushrocks/tapbundle": "^3.2.15",
     "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.15.0"
   },
   "dependencies": {
-    "@pushrocks/smartpromise": "^3.1.3",
-    "@tsclass/tsclass": "^3.0.29"
+    "@pushrocks/smartdelay": "^2.0.13",
+    "@pushrocks/smartpromise": "^3.1.6",
+    "@tsclass/tsclass": "^3.0.37"
   },
   "files": [
     "ts/**/*",

test/test.browser.ts

@@ -1,4 +1,6 @@
-import { expect, tap } from '@pushrocks/tapbundle';
+import { expect, tap, webhelpers } from '@pushrocks/tapbundle';
+webhelpers.enable();
+
 import * as websetup from '../ts/index';
 
 tap.test('first test', async () => {
@@ -6,8 +8,8 @@ tap.test('first test', async () => {
     metaObject: {
       description: 'A awesome description',
       title: 'mytitle',
-      canonicalDomain: 'lossless.com'
-    }
+      canonicalDomain: 'lossless.com',
+    },
   });
   await websetupInstance.readyPromise;
   expect(document.title).to.equal('mytitle');

ts/index.ts

@@ -2,3 +2,4 @@ export * from './websetup.classes.websetup';
 export * from './websetup.classes.tag.metatag';
 export * from './websetup.classes.tag.opengraphtag';
 export * from './websetup.classes.tag.jsonldtag';
+export * from './websetup.classes.title';

ts/interfaces/index.ts

@@ -2,8 +2,19 @@ import * as plugins from '../websetup.plugins';
 
 export interface IMetaObject {
   title: string;
-  description: string;
+  description?: string;
   canonicalDomain?: string;
   ldCompany?: plugins.tsclass.business.ICompany;
   ldProduct?: any;
+
+  // handles
+  twitterHandle?: string;
+  facebookHandle?: string;
+
+  // links
+  companyWebsiteLink?: string;
+  googleNewsLink?: string;
+  mediumLink?: string;
+  slackLink?: string;
+  airmeetLink?: string;
 }

ts/websetup.classes.tag.jsonldtag.ts

@@ -1,7 +1,7 @@
 import * as plugins from './websetup.plugins';
 import * as interfaces from './interfaces';
 
-import { Tag } from "./websetup.classes.tag";
+import { Tag } from './websetup.classes.tag';
 
 export class JsonLdTag extends Tag {
   public static createCompanyLd(companyDataArg: plugins.tsclass.business.ICompany) {
@@ -22,11 +22,11 @@ export class JsonLdTag extends Tag {
       },
       sameAs: [],
     };
-  
+
     if (companyDataArg.contact.facebookUrl) {
       companyLd.sameAs.push(companyDataArg.contact.facebookUrl);
     }
-  
+
     if (companyDataArg.contact.twitterUrl) {
       companyLd.sameAs.push(companyDataArg.contact.twitterUrl);
     }
@@ -35,11 +35,41 @@ export class JsonLdTag extends Tag {
     return ldTag;
   }
 
+  public static createNewsArticleJsonLd(newsArticleArg: plugins.tsclass.content.IArticle) {
+    const newsArticleLd = {
+      '@context': 'https://schema.org',
+      '@type': 'NewsArticle',
+      mainEntityOfPage: {
+        '@type': 'WebPage',
+        '@id': window.location.href,
+      },
+      headline: 'Article headline',
+      image: [newsArticleArg.featuredImageUrl],
+      datePublished: new Date(newsArticleArg.timestamp).toISOString(),
+      dateModified: new Date(newsArticleArg.timestamp).toISOString(),
+      author: {
+        '@type': 'Person',
+        name: `${newsArticleArg.author.firstName} ${newsArticleArg.author.surName}`,
+      },
+      publisher: {
+        '@type': 'Organization',
+        name: newsArticleArg.author.surName, // TODO
+        logo: {
+          '@type': 'ImageObject',
+          url: newsArticleArg.author.surName, // TODO
+        },
+      },
+      description: newsArticleArg.author.firstName,
+    };
+    const ldTag = new JsonLdTag(newsArticleLd);
+    return ldTag;
+  }
+
   constructor(ldObjectArg: any) {
     super();
     const jsonLdElement = document.createElement('script');
     jsonLdElement.type = 'application/ld+json';
-    jsonLdElement.text = JSON.stringify(JSON.stringify(ldObjectArg));
+    jsonLdElement.text = JSON.stringify(ldObjectArg);
     this.elementRef = jsonLdElement;
   }
-}
+}

ts/websetup.classes.tag.metatag.ts

@@ -1,4 +1,4 @@
-import { Tag } from "./websetup.classes.tag";
+import { Tag } from './websetup.classes.tag';
 
 export class MetaTag extends Tag {
   constructor(metaNameArg: string, contentArg: string) {
@@ -8,4 +8,4 @@ export class MetaTag extends Tag {
     metaElement.content = contentArg;
     this.elementRef = metaElement;
   }
-}
+}

ts/websetup.classes.tag.opengraphtag.ts

@@ -1,6 +1,16 @@
+import * as plugins from './websetup.plugins';
 import { Tag } from './websetup.classes.tag';
 
 export class OpengraphTag extends Tag {
+  public static createNewsArticleOgTags(newsArticleArg: plugins.tsclass.content.IArticle) {
+    const tagArray: OpengraphTag[] = [];
+    tagArray.push(new OpengraphTag('og:url', newsArticleArg.url));
+    tagArray.push(new OpengraphTag('og:title', newsArticleArg.title));
+    tagArray.push(new OpengraphTag('og:description', newsArticleArg.content));
+    tagArray.push(new OpengraphTag('og:image', newsArticleArg.featuredImageUrl));
+    return tagArray;
+  }
+
   constructor(propertyNameArg: string, contentArg: string) {
     super();
     const openGraphElement = document.createElement('meta');

ts/websetup.classes.tag.ts

@@ -18,4 +18,4 @@ export class Tag {
       this.elementRef.parentNode.removeChild(this.elementRef);
     }
   }
-}
+}

ts/websetup.classes.taglevel.ts

@@ -6,27 +6,47 @@ import * as plugins from './websetup.plugins';
 
 export type TBaseLevelType = 'global' | 'base' | 'subpage';
 
+export type TLevelState = 'enabled' | 'disabled';
+
 export class TagLevel {
   public tagManagerRef: TagManager;
-  
-  public title: string;
+
+  private titleStore: string;
+  public set title(titleArg: string) {
+    this.titleStore = titleArg;
+    if (this.state === 'enabled') {
+      document.title = this.titleStore;
+    }
+  }
+  public get title() {
+    return this.titleStore;
+  }
+
   public type: TBaseLevelType;
   public tags: Tag[] = [];
 
+  public state: TLevelState = 'disabled';
+
   constructor(tagManagerRefArg: TagManager, levelType: TBaseLevelType) {
     this.tagManagerRef = tagManagerRefArg;
   }
 
-  public addTag(tagArg: Tag) {
-    this.tags.push(tagArg);
+  public addTag(tagArg: Tag | Tag[]) {
+    if (tagArg instanceof Array) {
+      for (const tagArg2 of tagArg) {
+        this.addTag(tagArg2);
+      }
+    } else {
+      this.tags.push(tagArg);
+      if (this.state === 'enabled') {
+        tagArg.appendToDom();
+      }
+    }
   }
 
-  public async addCompanyInfo(
-    companyDataArg: plugins.tsclass.business.ICompany
-  ) {
-  
+  public async addCompanyInfo(companyDataArg: plugins.tsclass.business.ICompany) {
     this.addTag(JsonLdTag.createCompanyLd(companyDataArg));
-  
+
     // lets care about open graph
     this.addTag(new OpengraphTag('og:type', 'business.business'));
     this.addTag(new OpengraphTag('og:title', companyDataArg.name));
@@ -39,10 +59,7 @@ export class TagLevel {
       )
     );
     this.addTag(
-      new OpengraphTag(
-        'business:contact_data:locality',
-        companyDataArg.contact.address.postalCode
-      )
+      new OpengraphTag('business:contact_data:locality', companyDataArg.contact.address.postalCode)
     );
     this.addTag(
       new OpengraphTag('business:contact_data:region', companyDataArg.contact.address.city)
@@ -54,13 +71,15 @@ export class TagLevel {
       )
     );
     this.addTag(
-      new OpengraphTag(
-        'business:contact_data:country_name',
-        companyDataArg.contact.address.country
-      )
+      new OpengraphTag('business:contact_data:country_name', companyDataArg.contact.address.country)
     );
   }
 
+  public addNewsArticleInfo(articleArg: plugins.tsclass.content.IArticle) {
+    this.addTag(JsonLdTag.createNewsArticleJsonLd(articleArg));
+    this.addTag(OpengraphTag.createNewsArticleOgTags(articleArg));
+  }
+
   public async enable() {
     if (this.title) {
       document.title = this.title;
@@ -68,11 +87,13 @@ export class TagLevel {
     for (const tagArg of this.tags) {
       tagArg.appendToDom();
     }
+    this.state = 'enabled';
   }
 
   public async disable() {
     for (const tagArg of this.tags) {
       tagArg.removeFromDom();
     }
+    this.state = 'disabled';
   }
-}
+}

ts/websetup.classes.tagmanager.ts

@@ -6,48 +6,58 @@ import { JsonLdTag } from './websetup.classes.tag.jsonldtag';
 import { OpengraphTag } from './websetup.classes.tag.opengraphtag';
 
 export class TagManager {
-  public globalLevel: TagLevel;
+  public globalLevel: TagLevel = new TagLevel(this, 'global');
 
-  public baseLevel: TagLevel;
+  public baseLevel: TagLevel = new TagLevel(this, 'base');
 
   public activeLevel: TagLevel;
 
   public async setup(metaObjectArg: interfaces.IMetaObject) {
     // global tag level
-    this.globalLevel = new TagLevel(this, 'global');
     this.globalLevel.addTag(new MetaTag('google', 'notranslate'));
     this.globalLevel.addTag(new MetaTag('revisit-after', '1 days'));
 
-    // base tag level
-    this.baseLevel = new TagLevel(this, 'base');
-    this.baseLevel.title = metaObjectArg.title;
-    this.baseLevel.addTag(new MetaTag('description', metaObjectArg.description));
-    
-    if (metaObjectArg.canonicalDomain){
-      this.baseLevel.addTag(new MetaTag('canonical', metaObjectArg.canonicalDomain))
+    if (metaObjectArg.twitterHandle) {
+      this.globalLevel.addTag(new MetaTag('twitter:card', 'summary_large_image'));
+      this.globalLevel.addTag(new MetaTag('twitter:site', metaObjectArg.twitterHandle));
+      this.globalLevel.addTag(new MetaTag('twitter:creator', metaObjectArg.twitterHandle));
     }
-  
+
+    // base tag level
+    this.baseLevel.title = metaObjectArg.title;
+    if (metaObjectArg.description) {
+      this.baseLevel.addTag(new MetaTag('description', metaObjectArg.description));
+    }
+
+    if (metaObjectArg.canonicalDomain) {
+      this.baseLevel.addTag(new MetaTag('canonical', metaObjectArg.canonicalDomain));
+    }
+
     if (metaObjectArg.ldCompany) {
       this.baseLevel.addCompanyInfo(metaObjectArg.ldCompany);
     }
     await this.globalLevel.enable();
-    await this.baseLevel.enable();
+    this.activeLevel = this.baseLevel;
+    await this.activeLevel.enable();
   }
 
-  public setSubPageLevel(metaObjectArg: interfaces.IMetaObject) {
+  public async setSubPageLevel(metaObjectArg: interfaces.IMetaObject) {
     const subPageLevel = new TagLevel(this, 'subpage');
     subPageLevel.title = metaObjectArg.title;
-    subPageLevel.addTag(new MetaTag('description', metaObjectArg.description));
-    this.activeLevel.disable();
+    if (metaObjectArg.description) {
+      subPageLevel.addTag(new MetaTag('description', metaObjectArg.description));
+    }
+    await this.activeLevel.disable();
     this.activeLevel = subPageLevel;
-    this.activeLevel.enable();
+    await this.activeLevel.enable();
+    return subPageLevel;
   }
 
-  public revertToBaseLevel() {
+  public async revertToBaseLevel() {
     if (this.activeLevel !== this.baseLevel) {
-      this.activeLevel.disable();
+      await this.activeLevel.disable();
       this.activeLevel = this.baseLevel;
-      this.activeLevel.enable();
+      await this.activeLevel.enable();
     }
   }
-}
+}

ts/websetup.classes.title.ts

@@ -0,0 +1,9 @@
+import * as plugins from './websetup.plugins';
+
+/**
+ * a title proxy class
+ * --> to be used in the future when flashing titles is supported
+ */
+export class Title {
+
+}

ts/websetup.classes.websetup.ts

@@ -5,6 +5,7 @@ import { TagLevel } from './websetup.classes.taglevel';
 
 export interface IWebSetupConstructorOptions {
   metaObject: interfaces.IMetaObject;
+  smartssrWaitForReadySignal?: boolean;
 }
 
 /**
@@ -13,17 +14,31 @@ export interface IWebSetupConstructorOptions {
 export class WebSetup {
   public tagManager: TagManager = new TagManager();
   public options: IWebSetupConstructorOptions;
+  
+  // private deferreds
   private readyDeferred = plugins.smartpromise.defer();
+  private readyForSmartssrDeferred = plugins.smartpromise.defer();
+
+  // public promises
   public readyPromise = this.readyDeferred.promise;
+  public readyForSmartssrPromise = this.readyForSmartssrDeferred.promise;
   constructor(optionsArg: IWebSetupConstructorOptions) {
     this.options = optionsArg;
-    this.setup().then(() => {this.readyDeferred.resolve()});
+    this.setup().then(() => {
+      this.readyDeferred.resolve();
+      if (!this.options.smartssrWaitForReadySignal) {
+        this.readyForSmartssrDeferred.resolve();
+      }
+    });
   }
 
   /**
    * an async setup called by the constructor
    */
-  private async setup() {
+  public async setup(optionsArg?: IWebSetupConstructorOptions) {
+    if (optionsArg) {
+      this.options = optionsArg;
+    }
     await this.tagManager.setup(this.options.metaObject);
   }
 
@@ -36,8 +51,26 @@ export class WebSetup {
 
   /**
    * sets a subpage
-   * @param metaObject
+   * @param metaObjectArg
    */
-  public setSubLevel(metaObject: interfaces.IMetaObject) {
+  public async setSubLevel(metaObjectArg: interfaces.IMetaObject) {
+    const subLevel = await this.tagManager.setSubPageLevel(metaObjectArg);
+    return subLevel;
+  }
+
+  /**
+   * flashes the title with the given text
+   * @param flashTextArg
+   */
+  public flashTitle(flashTextArg: string) {}
+
+  /**
+   * informs smartssr that the page is ready to be rendered
+   */
+  public informReadyForSmartssr() {
+    if (!this.options.smartssrWaitForReadySignal) {
+      console.error(`You have not indicated that you inform smartssr by a dedicated signal! Please consider doing so!`);
+    }
+    this.readyForSmartssrDeferred.resolve();
   }
 }

ts/websetup.plugins.ts

@@ -1,9 +1,8 @@
 // pushrocks scope
+import * as smartdelay from '@pushrocks/smartdelay';
 import * as smartpromise from '@pushrocks/smartpromise';
 
-export {
-  smartpromise
-};
+export { smartdelay, smartpromise };
 
 // tsclass scope
 import * as tsclass from '@tsclass/tsclass';