3.0.6

.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=moderate
+    - 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.14",
+  "version": "3.0.6",
   "private": false,
   "description": "setup basic page properties",
   "main": "dist_ts/index.js",
@@ -9,24 +9,23 @@
   "license": "MIT",
   "scripts": {
     "test": "(tstest test/)",
-    "build": "(tsbuild --web && npm run bundle)",
-    "format": "(gitzone format)",
-    "bundle": "tsbundle --production --from ./ts/index.ts --to ./dist_bundle/bundle.js"
+    "build": "(tsbuild --web && tsbundle npm)"
   },
   "keywords": [
     "lossless",
     "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.12"
+    "@pushrocks/smartpromise": "^3.1.3",
+    "@tsclass/tsclass": "^3.0.29"
   },
   "files": [
     "ts/**/*",
@@ -39,5 +38,8 @@
     "cli.js",
     "npmextra.json",
     "readme.md"
+  ],
+  "browserslist": [
+    "last 1 chrome versions"
   ]
 }

readme.md

@@ -8,20 +8,24 @@ setup basic page properties
 * [docs (typedoc)](https://pushrocks.gitlab.io/websetup/)
 
 ## Status for master
-[![pipeline status](https://gitlab.com/pushrocks/websetup/badges/master/pipeline.svg)](https://gitlab.com/pushrocks/websetup/commits/master)
-[![coverage report](https://gitlab.com/pushrocks/websetup/badges/master/coverage.svg)](https://gitlab.com/pushrocks/websetup/commits/master)
-[![npm downloads per month](https://img.shields.io/npm/dm/@pushrocks/websetup.svg)](https://www.npmjs.com/package/@pushrocks/websetup)
-[![Known Vulnerabilities](https://snyk.io/test/npm/@pushrocks/websetup/badge.svg)](https://snyk.io/test/npm/@pushrocks/websetup)
-[![TypeScript](https://img.shields.io/badge/TypeScript->=%203.x-blue.svg)](https://nodejs.org/dist/latest-v10.x/docs/api/)
-[![node](https://img.shields.io/badge/node->=%2010.x.x-blue.svg)](https://nodejs.org/dist/latest-v10.x/docs/api/)
-[![JavaScript Style Guide](https://img.shields.io/badge/code%20style-prettier-ff69b4.svg)](https://prettier.io/)
+
+Status Category | Status Badge
+-- | --
+GitLab Pipelines | [![pipeline status](https://gitlab.com/pushrocks/websetup/badges/master/pipeline.svg)](https://lossless.cloud)
+GitLab Pipline Test Coverage | [![coverage report](https://gitlab.com/pushrocks/websetup/badges/master/coverage.svg)](https://lossless.cloud)
+npm | [![npm downloads per month](https://badgen.net/npm/dy/@pushrocks/websetup)](https://lossless.cloud)
+Snyk | [![Known Vulnerabilities](https://badgen.net/snyk/pushrocks/websetup)](https://lossless.cloud)
+TypeScript Support | [![TypeScript](https://badgen.net/badge/TypeScript/>=%203.x/blue?icon=typescript)](https://lossless.cloud)
+node Support | [![node](https://img.shields.io/badge/node->=%2010.x.x-blue.svg)](https://nodejs.org/dist/latest-v10.x/docs/api/)
+Code Style | [![Code Style](https://badgen.net/badge/style/prettier/purple)](https://lossless.cloud)
+PackagePhobia (total standalone install weight) | [![PackagePhobia](https://badgen.net/packagephobia/install/@pushrocks/websetup)](https://lossless.cloud)
+PackagePhobia (package size on registry) | [![PackagePhobia](https://badgen.net/packagephobia/publish/@pushrocks/websetup)](https://lossless.cloud)
+BundlePhobia (total size when bundled) | [![BundlePhobia](https://badgen.net/bundlephobia/minzip/@pushrocks/websetup)](https://lossless.cloud)
+Platform support | [![Supports Windows 10](https://badgen.net/badge/supports%20Windows%2010/yes/green?icon=windows)](https://lossless.cloud) [![Supports Mac OS X](https://badgen.net/badge/supports%20Mac%20OS%20X/yes/green?icon=apple)](https://lossless.cloud)
 
 ## Usage
 
-## Contribution
-
-We are always happy for code contributions. If you are not the code contributing type that is ok. Still, maintaining Open Source repositories takes considerable time and thought. If you like the quality of what we do and our modules are useful to you we would appreciate a little monthly contribution: You can [contribute one time](https://lossless.link/contribute-onetime) or [contribute monthly](https://lossless.link/contribute). :)
-
+Use TypeScript for best in class intellisense.
 
 ## Contribution
 

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,9 @@
+import * as plugins from '../websetup.plugins';
+
+export interface IMetaObject {
+  title: string;
+  description: string;
+  canonicalDomain?: string;
+  ldCompany?: plugins.tsclass.business.ICompany;
+  ldProduct?: any;
+}

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,77 @@
+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 createNewsArticleLd (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(newsArticleArg);
+    return ldTag;
+  }
+
+  constructor(ldObjectArg: any) {
+    super();
+    const jsonLdElement = document.createElement('script');
+    jsonLdElement.type = 'application/ld+json';
+    jsonLdElement.text = JSON.stringify(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,11 @@
+import { Tag } from './websetup.classes.tag';
+
+export class OpengraphTag extends Tag {
+  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,73 @@
+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 class TagLevel {
+  public tagManagerRef: TagManager;
+
+  public title: string;
+  public type: TBaseLevelType;
+  public tags: Tag[] = [];
+
+  constructor(tagManagerRefArg: TagManager, levelType: TBaseLevelType) {
+    this.tagManagerRef = tagManagerRefArg;
+  }
+
+  public addTag(tagArg: Tag) {
+    this.tags.push(tagArg);
+  }
+
+  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.createNewsArticleLd(articleArg));
+  }
+
+  public async enable() {
+    if (this.title) {
+      document.title = this.title;
+    }
+    for (const tagArg of this.tags) {
+      tagArg.appendToDom();
+    }
+  }
+
+  public async disable() {
+    for (const tagArg of this.tags) {
+      tagArg.removeFromDom();
+    }
+  }
+}

ts/websetup.classes.tagmanager.ts

@@ -0,0 +1,54 @@
+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;
+
+  public baseLevel: TagLevel;
+
+  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.ldCompany) {
+      this.baseLevel.addCompanyInfo(metaObjectArg.ldCompany);
+    }
+    await this.globalLevel.enable();
+    await this.baseLevel.enable();
+  }
+
+  public setSubPageLevel(metaObjectArg: interfaces.IMetaObject) {
+    const subPageLevel = new TagLevel(this, 'subpage');
+    subPageLevel.title = metaObjectArg.title;
+    subPageLevel.addTag(new MetaTag('description', metaObjectArg.description));
+    this.activeLevel.disable();
+    this.activeLevel = subPageLevel;
+    this.activeLevel.enable();
+    return subPageLevel;
+  }
+
+  public revertToBaseLevel() {
+    if (this.activeLevel !== this.baseLevel) {
+      this.activeLevel.disable();
+      this.activeLevel = this.baseLevel;
+      this.activeLevel.enable();
+    }
+  }
+}

ts/websetup.classes.websetup.ts

@@ -0,0 +1,46 @@
+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;
+}
+
+/**
+ * the main WebSetup class
+ */
+export class WebSetup {
+  public tagManager: TagManager = new TagManager();
+  public options: IWebSetupConstructorOptions;
+  private readyDeferred = plugins.smartpromise.defer();
+  public readyPromise = this.readyDeferred.promise;
+  constructor(optionsArg: IWebSetupConstructorOptions) {
+    this.options = optionsArg;
+    this.setup().then(() => {
+      this.readyDeferred.resolve();
+    });
+  }
+
+  /**
+   * an async setup called by the constructor
+   */
+  private async setup() {
+    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 setSubLevel(metaObjectArg: interfaces.IMetaObject) {
+    return this.tagManager.setSubPageLevel(metaObjectArg);
+  }
+}

ts/websetup.plugins.ts

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