3.0.14

.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": "2.0.16",
+  "version": "3.0.14",
   "private": false,
   "description": "setup basic page properties",
   "main": "dist_ts/index.js",
@@ -16,15 +16,17 @@
     "websafe"
   ],
   "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.22",
-    "@gitzone/tsbundle": "^1.0.57",
-    "@gitzone/tstest": "^1.0.28",
-    "@pushrocks/tapbundle": "^3.2.1",
-    "tslint": "^6.1.0",
+    "@gitzone/tsbuild": "^2.1.25",
+    "@gitzone/tsbundle": "^1.0.78",
+    "@gitzone/tstest": "^1.0.52",
+    "@pushrocks/tapbundle": "^3.2.9",
+    "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.15.0"
   },
   "dependencies": {
-    "@tsclass/tsclass": "^3.0.18"
+    "@pushrocks/smartdelay": "^2.0.10",
+    "@pushrocks/smartpromise": "^3.1.3",
+    "@tsclass/tsclass": "^3.0.29"
   },
   "files": [
     "ts/**/*",
@@ -37,5 +39,8 @@
     "cli.js",
     "npmextra.json",
     "readme.md"
+  ],
+  "browserslist": [
+    "last 1 chrome versions"
   ]
 }

test/test.browser.ts

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

test/test.ts

@@ -1,8 +0,0 @@
-import { expect, tap } from '@pushrocks/tapbundle';
-import * as websetup from '../ts/index';
-
-tap.test('first test', async () => {
-  console.log('Waiting for proper puppeteer support here');
-});
-
-tap.start();

ts/index.ts

@@ -1,33 +1,4 @@
-import * as plugins from './websetup.plugins';
-
-import { setupGoogleAnalytics } from './tools/ganalytics';
-import { setupFullStory } from './tools/fullstory';
-import { IMetaObject, setupMetaInformation } from './meta';
-
-export interface IWebSetupConstructorOptions {
-  googleAnalyticsCode?: string;
-  fsCode?: string;
-  metaObject: IMetaObject;
-}
-
-/**
- * the main WebSetup class
- */
-export class WebSetup {
-  public options: IWebSetupConstructorOptions;
-  constructor(optionsArg: IWebSetupConstructorOptions) {
-    this.options = optionsArg;
-  }
-
-  public async setup() {
-    await setupMetaInformation(this.options.metaObject);
-
-    if (this.options.googleAnalyticsCode) {
-      await setupGoogleAnalytics(this.options.googleAnalyticsCode);
-    }
-
-    if (this.options.fsCode) {
-      await setupFullStory(this.options.fsCode);
-    }
-  }
-}
+export * from './websetup.classes.websetup';
+export * from './websetup.classes.tag.metatag';
+export * from './websetup.classes.tag.opengraphtag';
+export * from './websetup.classes.tag.jsonldtag';

ts/interfaces/index.ts

@@ -0,0 +1,20 @@
+import * as plugins from '../websetup.plugins';
+
+export interface IMetaObject {
+  title: 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/meta/index.ts

@@ -1,122 +0,0 @@
-import * as plugins from '../websetup.plugins';
-
-export interface IMetaObject {
-  title: string;
-  description: string;
-  canonicalDomain?: string;
-  ldCompany?: plugins.tsclass.business.ICompany;
-  ldProduct?: any;
-}
-
-export const setupMetaInformation = async (metaObjectArg: IMetaObject) => {
-  document.title = metaObjectArg.title;
-  addMetaTag('description', metaObjectArg.description);
-  addMetaTag('google', 'notranslate');
-  addMetaTag('revisit-after', '1 days');
-  metaObjectArg.canonicalDomain ? addLinkTag('canonical', metaObjectArg.canonicalDomain) : null;
-
-  if (metaObjectArg.ldCompany) {
-    addCompanyInfo(metaObjectArg.ldCompany);
-  }
-};
-
-const addMetaTag = async (metaNameArg: string, contentArg: string) => {
-  const metaElement = document.createElement('meta');
-  metaElement.name = metaNameArg;
-  metaElement.content = contentArg;
-  document.getElementsByTagName('head')[0].appendChild(metaElement);
-};
-
-const addLinkTag = async (relArg, hrefArg): Promise<Element> => {
-  const link = !!document.querySelector("link[rel='canonical']")
-    ? document.querySelector("link[rel='canonical']")
-    : document.createElement('link');
-  link.setAttribute('rel', relArg);
-  link.setAttribute('href', hrefArg);
-  document.head.appendChild(link);
-  return link;
-};
-
-const addOpenGraphProperty = async (
-  propertyNameArg: string,
-  contentArg: string
-): Promise<Element> => {
-  const openGraphElement = document.createElement('meta');
-  openGraphElement.setAttribute('property', propertyNameArg);
-  openGraphElement.content = contentArg;
-  document.getElementsByTagName('head')[0].appendChild(openGraphElement);
-  return openGraphElement;
-};
-
-const addCompanyInfo = async (
-  companyDataArg: plugins.tsclass.business.ICompany
-): Promise<Element[]> => {
-  const returnElementArray: Element[] = [];
-
-  // lets care about linked data
-  const companyLd = {
-    '@context': 'https://schema.org',
-    '@type': 'Corporation',
-    name: companyDataArg.name,
-    alternateName: companyDataArg.name.replace(' GmbH', ''),
-    url: companyDataArg.contact.website,
-    logo: companyDataArg.contact.logoUrl,
-    contactPoint: {
-      '@type': 'ContactPoint',
-      telephone: companyDataArg.contact.phone,
-      contactType: 'customer service',
-      areaServed: 'DE',
-      availableLanguage: ['en', 'German'],
-    },
-    sameAs: [],
-  };
-
-  if (companyDataArg.contact.facebookUrl) {
-    companyLd.sameAs.push(companyDataArg.contact.facebookUrl);
-  }
-
-  if (companyDataArg.contact.twitterUrl) {
-    companyLd.sameAs.push(companyDataArg.contact.twitterUrl);
-  }
-
-  const jsonLdElement = document.createElement('script');
-  jsonLdElement.type = 'application/ld+json';
-  jsonLdElement.text = JSON.stringify(companyLd);
-  document.querySelector('head').appendChild(jsonLdElement);
-  returnElementArray.push(jsonLdElement);
-
-  // lets care about open graph
-  returnElementArray.push(await addOpenGraphProperty('og:type', 'business.business'));
-  returnElementArray.push(await addOpenGraphProperty('og:title', companyDataArg.name));
-  returnElementArray.push(await addOpenGraphProperty('og:url', companyDataArg.contact.website));
-  returnElementArray.push(await addOpenGraphProperty('og:image', companyDataArg.contact.logoUrl));
-  returnElementArray.push(
-    await addOpenGraphProperty(
-      'business:contact_data:street_address',
-      `${companyDataArg.contact.address.streetName} ${companyDataArg.contact.address.houseNumber}`
-    )
-  );
-  returnElementArray.push(
-    await addOpenGraphProperty(
-      'business:contact_data:locality',
-      companyDataArg.contact.address.postalCode
-    )
-  );
-  returnElementArray.push(
-    await addOpenGraphProperty('business:contact_data:region', companyDataArg.contact.address.city)
-  );
-  returnElementArray.push(
-    await addOpenGraphProperty(
-      'business:contact_data:postal_code',
-      companyDataArg.contact.address.postalCode
-    )
-  );
-  returnElementArray.push(
-    await addOpenGraphProperty(
-      'business:contact_data:country_name',
-      companyDataArg.contact.address.country
-    )
-  );
-
-  return returnElementArray;
-};

ts/tools/fullstory.ts

@@ -1,70 +0,0 @@
-declare global {
-  // tslint:disable-next-line: interface-name
-  interface Window {
-    _fs_debug: boolean;
-    _fs_host: any;
-    _fs_org: string;
-    _fs_namespace: string;
-  }
-}
-export const setupFullStory = async (fsCodeArg: string) => {
-  // tslint:disable-next-line: no-string-literal
-  window['_fs_debug'] = false;
-  // tslint:disable-next-line: no-string-literal
-  window['_fs_host'] = 'fullstory.com';
-  // tslint:disable-next-line: no-string-literal
-  window['_fs_org'] = fsCodeArg;
-  // tslint:disable-next-line: no-string-literal
-  window['_fs_namespace'] = 'FS';
-  ((m, n, e, t, l, o, g, y) => {
-    if (e in m) {
-      if (m.console && m.console.log) {
-        m.console.log('FullStory namespace conflict. Please set window["_fs_namespace"].');
-      }
-      return;
-    }
-    // tslint:disable-next-line: only-arrow-functions
-    g = m[e] = function (a, b, s) {
-      g.q ? g.q.push([a, b, s]) : g._api(a, b, s);
-    };
-    g.q = [];
-    o = n.createElement(t);
-    o.async = 1;
-    o.src = 'https://' + window._fs_host + '/s/fs.js';
-    o.crossorigin = 'anonymous';
-    y = n.getElementsByTagName(t)[0];
-    y.parentNode.insertBefore(o, y);
-    // tslint:disable-next-line: only-arrow-functions
-    g.identify = function (i, v, s) {
-      g(l, { uid: i }, s);
-      if (v) g(l, v, s);
-    };
-    g.setUserVars = function (v, s) {
-      g(l, v, s);
-    };
-    g.event = function (i, v, s) {
-      g('event', { n: i, p: v }, s);
-    };
-    // tslint:disable-next-line: only-arrow-functions
-    g.shutdown = function () {
-      g('rec', !1);
-    };
-    g.restart = function () {
-      g('rec', !0);
-    };
-    // tslint:disable-next-line: only-arrow-functions
-    g.consent = function (a) {
-      g('consent', !arguments.length || a);
-    };
-    // tslint:disable-next-line: only-arrow-functions
-    g.identifyAccount = function (i, v) {
-      o = 'account';
-      v = v || {};
-      v.acctId = i;
-      g(o, v);
-    };
-    // tslint:disable-next-line: only-arrow-functions
-    g.clearUserCookie = function () {};
-    // tslint:disable-next-line: no-string-literal
-  })(window, document, window['_fs_namespace'], 'script', 'user');
-};

ts/tools/ganalytics.ts

@@ -1,32 +0,0 @@
-declare global {
-  // tslint:disable-next-line: interface-name
-  interface Window {
-    analytics: any;
-  }
-}
-
-export const setupGoogleAnalytics = async (gaCode: string) => {
-  // tslint:disable-next-line: only-arrow-functions
-  (function (i, s, o, g, r, a, m) {
-    // tslint:disable-next-line: no-string-literal
-    i['GoogleAnalyticsObject'] = r;
-    // tslint:disable-next-line: ban-comma-operator
-    (i[r] =
-      i[r] ||
-      // tslint:disable-next-line: only-arrow-functions
-      function () {
-        (i[r].q = i[r].q || []).push(arguments);
-      }),
-      (i[r].l = new Date().getTime());
-    // tslint:disable-next-line: ban-comma-operator
-    (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
-    a.async = 1;
-    a.src = g;
-    a.crossorigin = 'anonymous';
-    m.parentNode.insertBefore(a, m);
-  })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'analytics');
-
-  window.analytics('create', gaCode, 'auto');
-  window.analytics('send', 'pageview');
-  console.log('Loaded Google Analytics. You may view our privacy policy at https://lossless.gmbh');
-};

ts/websetup.classes.tag.jsonldtag.ts

@@ -0,0 +1,75 @@
+import * as plugins from './websetup.plugins';
+import * as interfaces from './interfaces';
+
+import { Tag } from './websetup.classes.tag';
+
+export class JsonLdTag extends Tag {
+  public static createCompanyLd(companyDataArg: plugins.tsclass.business.ICompany) {
+    // lets care about linked data
+    const companyLd = {
+      '@context': 'https://schema.org',
+      '@type': 'Corporation',
+      name: companyDataArg.name,
+      alternateName: companyDataArg.name.replace(' GmbH', ''),
+      url: companyDataArg.contact.website,
+      logo: companyDataArg.contact.logoUrl,
+      contactPoint: {
+        '@type': 'ContactPoint',
+        telephone: companyDataArg.contact.phone,
+        contactType: 'customer service',
+        areaServed: 'DE',
+        availableLanguage: ['en', 'German'],
+      },
+      sameAs: [],
+    };
+
+    if (companyDataArg.contact.facebookUrl) {
+      companyLd.sameAs.push(companyDataArg.contact.facebookUrl);
+    }
+
+    if (companyDataArg.contact.twitterUrl) {
+      companyLd.sameAs.push(companyDataArg.contact.twitterUrl);
+    }
+
+    const ldTag = new JsonLdTag(companyLd);
+    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(ldObjectArg);
+    this.elementRef = jsonLdElement;
+  }
+}

ts/websetup.classes.tag.linktag.ts

@@ -0,0 +1,13 @@
+import { Tag } from './websetup.classes.tag';
+
+export class LinkTag extends Tag {
+  constructor(relArg: string, hrefArg: string) {
+    super();
+    const linkElement = !!document.querySelector("link[rel='canonical']")
+      ? document.querySelector("link[rel='canonical']")
+      : document.createElement('link');
+    linkElement.setAttribute('rel', relArg);
+    linkElement.setAttribute('href', hrefArg);
+    this.elementRef = linkElement;
+  }
+}

ts/websetup.classes.tag.metatag.ts

@@ -0,0 +1,11 @@
+import { Tag } from './websetup.classes.tag';
+
+export class MetaTag extends Tag {
+  constructor(metaNameArg: string, contentArg: string) {
+    super();
+    const metaElement = document.createElement('meta');
+    metaElement.name = metaNameArg;
+    metaElement.content = contentArg;
+    this.elementRef = metaElement;
+  }
+}

ts/websetup.classes.tag.opengraphtag.ts

@@ -0,0 +1,21 @@
+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');
+    openGraphElement.setAttribute('property', propertyNameArg);
+    openGraphElement.content = contentArg;
+    this.elementRef = openGraphElement;
+  }
+}

ts/websetup.classes.tag.ts

@@ -0,0 +1,21 @@
+import * as plugins from './websetup.plugins';
+
+export class Tag {
+  public elementRef: Element;
+
+  public tagLevel: 'global' | 'levelbound';
+
+  public appendToDom() {
+    if (!this.elementRef.parentElement && !this.elementRef.parentNode) {
+      document.getElementsByTagName('head')[0].appendChild(this.elementRef);
+    }
+  }
+
+  public removeFromDom() {
+    if (this.elementRef.parentElement) {
+      this.elementRef.parentElement.removeChild(this.elementRef);
+    } else if (this.elementRef.parentNode) {
+      this.elementRef.parentNode.removeChild(this.elementRef);
+    }
+  }
+}

ts/websetup.classes.taglevel.ts

@@ -0,0 +1,99 @@
+import { Tag } from './websetup.classes.tag';
+import { JsonLdTag } from './websetup.classes.tag.jsonldtag';
+import { OpengraphTag } from './websetup.classes.tag.opengraphtag';
+import { TagManager } from './websetup.classes.tagmanager';
+import * as plugins from './websetup.plugins';
+
+export type TBaseLevelType = 'global' | 'base' | 'subpage';
+
+export type TLevelState = 'enabled' | 'disabled';
+
+export class TagLevel {
+  public tagManagerRef: TagManager;
+
+  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 | 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) {
+    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));
+    this.addTag(new OpengraphTag('og:url', companyDataArg.contact.website));
+    this.addTag(new OpengraphTag('og:image', companyDataArg.contact.logoUrl));
+    this.addTag(
+      new OpengraphTag(
+        'business:contact_data:street_address',
+        `${companyDataArg.contact.address.streetName} ${companyDataArg.contact.address.houseNumber}`
+      )
+    );
+    this.addTag(
+      new OpengraphTag('business:contact_data:locality', companyDataArg.contact.address.postalCode)
+    );
+    this.addTag(
+      new OpengraphTag('business:contact_data:region', companyDataArg.contact.address.city)
+    );
+    this.addTag(
+      new OpengraphTag(
+        'business:contact_data:postal_code',
+        companyDataArg.contact.address.postalCode
+      )
+    );
+    this.addTag(
+      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;
+    }
+    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

@@ -0,0 +1,63 @@
+import { TagLevel } from './websetup.classes.taglevel';
+import * as plugins from './websetup.plugins';
+import * as interfaces from './interfaces';
+import { MetaTag } from './websetup.classes.tag.metatag';
+import { JsonLdTag } from './websetup.classes.tag.jsonldtag';
+import { OpengraphTag } from './websetup.classes.tag.opengraphtag';
+
+export class TagManager {
+  public globalLevel: TagLevel = new TagLevel(this, 'global');
+
+  public baseLevel: TagLevel = new TagLevel(this, 'base');
+
+  public activeLevel: TagLevel;
+
+  public async setup(metaObjectArg: interfaces.IMetaObject) {
+    // global tag level
+    this.globalLevel.addTag(new MetaTag('google', 'notranslate'));
+    this.globalLevel.addTag(new MetaTag('revisit-after', '1 days'));
+
+    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();
+    this.activeLevel = this.baseLevel;
+    await this.activeLevel.enable();
+  }
+
+  public async setSubPageLevel(metaObjectArg: interfaces.IMetaObject) {
+    const subPageLevel = new TagLevel(this, 'subpage');
+    subPageLevel.title = metaObjectArg.title;
+    if (metaObjectArg.description) {
+      subPageLevel.addTag(new MetaTag('description', metaObjectArg.description));
+    }
+    await this.activeLevel.disable();
+    this.activeLevel = subPageLevel;
+    await this.activeLevel.enable();
+    return subPageLevel;
+  }
+
+  public async revertToBaseLevel() {
+    if (this.activeLevel !== this.baseLevel) {
+      await this.activeLevel.disable();
+      this.activeLevel = this.baseLevel;
+      await this.activeLevel.enable();
+    }
+  }
+}

ts/websetup.classes.websetup.ts

@@ -0,0 +1,72 @@
+import * as plugins from './websetup.plugins';
+import * as interfaces from './interfaces';
+import { TagManager } from './websetup.classes.tagmanager';
+import { TagLevel } from './websetup.classes.taglevel';
+
+export interface IWebSetupConstructorOptions {
+  metaObject: interfaces.IMetaObject;
+  smartssrWaitForReadySignal?: boolean;
+}
+
+/**
+ * the main WebSetup class
+ */
+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();
+      if (!this.options.smartssrWaitForReadySignal) {
+        this.readyForSmartssrDeferred.resolve();
+      }
+    });
+  }
+
+  /**
+   * an async setup called by the constructor
+   */
+  public async setup(optionsArg?: IWebSetupConstructorOptions) {
+    if (optionsArg) {
+      this.options = optionsArg;
+    }
+    await this.tagManager.setup(this.options.metaObject);
+  }
+
+  /**
+   * reverts the active level and returns to the base level
+   */
+  public revertToBaseLevel() {
+    this.tagManager.revertToBaseLevel();
+  }
+
+  /**
+   * sets a subpage
+   * @param metaObjectArg
+   */
+  public async setSubLevel(metaObjectArg: interfaces.IMetaObject) {
+    const subLevel = await this.tagManager.setSubPageLevel(metaObjectArg);
+    return subLevel;
+  }
+
+  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,3 +1,10 @@
+// pushrocks scope
+import * as smartdelay from '@pushrocks/smartdelay';
+import * as smartpromise from '@pushrocks/smartpromise';
+
+export { smartdelay, smartpromise };
+
+// tsclass scope
 import * as tsclass from '@tsclass/tsclass';
 
 export { tsclass };