3.0.18

.gitlab-ci.yml

@@ -12,40 +12,36 @@ stages:
   - release
   - metadata
 
+before_script:
+  - pnpm install -g pnpm
+  - pnpm install -g @shipzone/npmci
+  - npmci npm prepare
+
+# ====================
+# security stage
+# ====================
 # ====================
 # security stage
 # ====================
-mirror:
-  stage: security
-  script:
-    - npmci git mirror
-  only:
-    - tags
-  tags:
-    - lossless
-    - docker
-    - notpriv
-
 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
+     - npmci command pnpm audit --audit-level=high --prod
   tags:
+    - lossless
     - docker
+  allow_failure: true
 
 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 --only=dev
+    - npmci command pnpm audit --audit-level=high --dev
   tags:
+    - lossless
     - docker
   allow_failure: true
 
@@ -56,7 +52,6 @@ auditDevDependencies:
 testStable:
   stage: test
   script:
-    - npmci npm prepare
     - npmci node install stable
     - npmci npm install
     - npmci npm test
@@ -67,10 +62,9 @@ testStable:
 testBuild:
   stage: test
   script:
-    - npmci npm prepare
     - npmci node install stable
     - npmci npm install
-    - npmci command npm run build
+    - npmci npm build
   coverage: /\d+.?\d+?\%\s*coverage/
   tags:
     - docker
@@ -96,10 +90,9 @@ codequality:
   only:
     - tags
   script:
-    - npmci command npm install -g tslint typescript
+    - npmci command npm install -g typescript
     - npmci npm prepare
     - npmci npm install
-    - npmci command "tslint -c tslint.json ./ts/**/*.ts"
   tags:
     - lossless
     - docker
@@ -119,11 +112,9 @@ trigger:
 pages:
   stage: metadata
   script:
-    - npmci node install lts
+    - npmci node install stable
-    - npmci command npm install -g @gitzone/tsdoc
-    - npmci npm prepare
     - npmci npm install
-    - npmci command tsdoc
+    - npmci command npm run buildDocs
   tags:
     - lossless
     - docker

.vscode/launch.json

@@ -2,28 +2,10 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "name": "current file",
+      "command": "npm test",
-      "type": "node",
+      "name": "Run npm test",
       "request": "launch",
-      "args": [
+      "type": "node-terminal"
-        "${relativeFile}"
-      ],
-      "runtimeArgs": ["-r", "@gitzone/tsrun"],
-      "cwd": "${workspaceRoot}",
-      "protocol": "inspector",
-      "internalConsoleOptions": "openOnSessionStart"
-    },
-    {
-      "name": "test.ts",
-      "type": "node",
-      "request": "launch",
-      "args": [
-        "test/test.ts"
-      ],
-      "runtimeArgs": ["-r", "@gitzone/tsrun"],
-      "cwd": "${workspaceRoot}",
-      "protocol": "inspector",
-      "internalConsoleOptions": "openOnSessionStart"
     }
   ]
 }

npmextra.json

@@ -9,7 +9,7 @@
       "githost": "gitlab.com",
       "gitscope": "pushrocks",
       "gitrepo": "websetup",
-      "shortDescription": "setup basic page properties",
+      "description": "setup basic page properties",
       "npmPackagename": "@pushrocks/websetup",
       "license": "MIT"
     }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushrocks/websetup",
-  "version": "3.0.10",
+  "version": "3.0.18",
   "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 && tsbundle npm)"
+    "build": "(tsbuild --web --allowimplicitany && tsbundle npm)",
+    "buildDocs": "tsdoc"
   },
   "keywords": [
     "lossless",
     "websafe"
   ],
   "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.25",
+    "@gitzone/tsbuild": "^2.1.65",
-    "@gitzone/tsbundle": "^1.0.78",
+    "@gitzone/tsbundle": "^2.0.7",
-    "@gitzone/tstest": "^1.0.52",
+    "@gitzone/tstest": "^1.0.74",
-    "@pushrocks/tapbundle": "^3.2.9",
+    "@pushrocks/tapbundle": "^5.0.4"
-    "tslint": "^6.1.3",
-    "tslint-config-prettier": "^1.15.0"
   },
   "dependencies": {
-    "@pushrocks/smartdelay": "^2.0.10",
+    "@pushrocks/smartdelay": "^3.0.1",
-    "@pushrocks/smartpromise": "^3.1.3",
+    "@pushrocks/smartpromise": "^4.0.2",
-    "@tsclass/tsclass": "^3.0.29"
+    "@tsclass/tsclass": "^4.0.40"
   },
   "files": [
     "ts/**/*",
@@ -42,5 +41,6 @@
   ],
   "browserslist": [
     "last 1 chrome versions"
-  ]
+  ],
+  "type": "module"
 }

readme.md

@@ -21,7 +21,6 @@ Code Style | [![Code Style](https://badgen.net/badge/style/prettier/purple)](htt
 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
 
@@ -33,7 +32,6 @@ We are always happy for code contributions. If you are not the code contributing
 
 For further information read the linked docs at the top of this readme.
 
-> MIT licensed | **©** [Lossless GmbH](https://lossless.gmbh)
+## Legal
+> MIT licensed | **©** [Task Venture Capital GmbH](https://task.vc)
 | By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy)
-
-[![repo-footer](https://lossless.gitlab.io/publicrelations/repofooter.svg)](https://maintainedby.lossless.com)

test/test.browser.ts

@@ -1,5 +1,7 @@
-import { expect, tap } from '@pushrocks/tapbundle';
+import { expect, tap, webhelpers } from '@pushrocks/tapbundle';
-import * as websetup from '../ts/index';
+webhelpers.enable();
+
+import * as websetup from '../ts/index.js';
 
 tap.test('first test', async () => {
   const websetupInstance = new websetup.WebSetup({
@@ -10,7 +12,7 @@ tap.test('first test', async () => {
     },
   });
   await websetupInstance.readyPromise;
-  expect(document.title).to.equal('mytitle');
+  expect(document.title).toEqual('mytitle');
 });
 
 tap.start();

ts/00_commitinfo_data.ts

@@ -0,0 +1,8 @@
+/**
+ * autocreated commitinfo by @pushrocks/commitinfo
+ */
+export const commitinfo = {
+  name: '@pushrocks/websetup',
+  version: '3.0.18',
+  description: 'setup basic page properties'
+}

ts/index.ts

@@ -1,4 +1,5 @@
-export * from './websetup.classes.websetup';
+export * from './websetup.classes.websetup.js';
-export * from './websetup.classes.tag.metatag';
+export * from './websetup.classes.tag.metatag.js';
-export * from './websetup.classes.tag.opengraphtag';
+export * from './websetup.classes.tag.opengraphtag.js';
-export * from './websetup.classes.tag.jsonldtag';
+export * from './websetup.classes.tag.jsonldtag.js';
+export * from './websetup.classes.title.js';

ts/interfaces/index.ts

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

ts/websetup.classes.tag.jsonldtag.ts

@@ -1,10 +1,11 @@
-import * as plugins from './websetup.plugins';
+import * as plugins from './websetup.plugins.js';
-import * as interfaces from './interfaces';
+import * as interfaces from './interfaces/index.js';
 
-import { Tag } from './websetup.classes.tag';
+import { Tag } from './websetup.classes.tag.js';
 
 export class JsonLdTag extends Tag {
-  public static createCompanyLd(companyDataArg: plugins.tsclass.business.ICompany) {
+  public static createCompanyJsonLd(companyDataArg: plugins.tsclass.business.ICompany) {
+    // STATIC
     // lets care about linked data
     const companyLd = {
       '@context': 'https://schema.org',
@@ -35,38 +36,66 @@ export class JsonLdTag extends Tag {
     return ldTag;
   }
 
-  public static createNewsArticleLd (newsArticleArg: plugins.tsclass.content.IArticle) {
+  public static createNewsArticleJsonLd(newsArticleArg: plugins.tsclass.content.IArticle) {
     const newsArticleLd = {
-      "@context": "https://schema.org",
+      '@context': 'https://schema.org',
-      "@type": "NewsArticle",
+      '@type': 'NewsArticle',
-      "mainEntityOfPage": {
+      mainEntityOfPage: {
-        "@type": "WebPage",
+        '@type': 'WebPage',
-        "@id": window.location.href
+        '@id': window.location.href,
       },
-      "headline": "Article headline",
+      headline: 'Article headline',
-      "image": [
+      image: [newsArticleArg.featuredImageUrl],
-        newsArticleArg.featuredImageUrl
+      datePublished: new Date(newsArticleArg.timestamp).toISOString(),
-       ],
+      dateModified: new Date(newsArticleArg.timestamp).toISOString(),
-      "datePublished": new Date(newsArticleArg.timestamp).toISOString(),
+      author: {
-      "dateModified": new Date(newsArticleArg.timestamp).toISOString(),
+        '@type': 'Person',
-      "author": {
+        name: `${newsArticleArg.author.firstName} ${newsArticleArg.author.surName}`,
-        "@type": "Person",
-        "name": `${newsArticleArg.author.firstName} ${newsArticleArg.author.surName}`
       },
-       "publisher": {
+      publisher: {
-        "@type": "Organization",
+        '@type': 'Organization',
-        "name": newsArticleArg.author.surName, // TODO
+        name: newsArticleArg.author.surName, // TODO
-        "logo": {
+        logo: {
-          "@type": "ImageObject",
+          '@type': 'ImageObject',
-          "url": newsArticleArg.author.surName // TODO
+          url: newsArticleArg.author.surName, // TODO
-        }
         },
-      "description": newsArticleArg.author.firstName
+      },
+      description: newsArticleArg.author.firstName,
     };
-    const ldTag = new JsonLdTag(newsArticleArg);
+    const ldTag = new JsonLdTag(newsArticleLd);
+    return ldTag;
+  }
+  public static createProductJsonLd(
+    productArg: plugins.tsclass.saas.IProduct,
+    publisherArg: plugins.tsclass.business.ICompany
+  ) {
+    const productLd = {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      name: productArg.name,
+      description: productArg.description,
+      operatingSystem: productArg.os,
+      applicationCategory: productArg.category,
+      offers: {
+        '@type': 'Offer',
+        name: 'User-based Plan',
+        priceSpecification: {
+          '@type': 'PropertyValueSpecification',
+          valueName: 'Number of Users',
+          valueRequired: true,
+          price: '4.99',
+          priceCurrency: 'EUR',
+        },
+      },
+      publisher: this.createCompanyJsonLd(publisherArg).elementRef.textContent,
+      screenshot: 'https://www.social.io/screenshot.png',
+      url: 'https://www.social.io/',
+    };
+    const ldTag = new JsonLdTag(productLd);
     return ldTag;
   }
 
+  // INSTANCE
   constructor(ldObjectArg: any) {
     super();
     const jsonLdElement = document.createElement('script');

ts/websetup.classes.tag.linktag.ts

@@ -1,4 +1,4 @@
-import { Tag } from './websetup.classes.tag';
+import { Tag } from './websetup.classes.tag.js';
 
 export class LinkTag extends Tag {
   constructor(relArg: string, hrefArg: string) {

ts/websetup.classes.tag.metatag.ts

@@ -1,4 +1,4 @@
-import { Tag } from './websetup.classes.tag';
+import { Tag } from './websetup.classes.tag.js';
 
 export class MetaTag extends Tag {
   constructor(metaNameArg: string, contentArg: string) {

ts/websetup.classes.tag.opengraphtag.ts

@@ -1,6 +1,26 @@
-import { Tag } from './websetup.classes.tag';
+import * as plugins from './websetup.plugins.js';
+import { Tag } from './websetup.classes.tag.js';
 
 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;
+  }
+
+  public static createProductOgTags(productArg: plugins.tsclass.saas.IProduct) {
+    const tagArray: OpengraphTag[] = [];
+    tagArray.push(new OpengraphTag('og:url', globalThis.location.href));
+    tagArray.push(new OpengraphTag('og:title', productArg.name));
+    tagArray.push(new OpengraphTag('og:site_name', productArg.name))
+    tagArray.push(new OpengraphTag('og:description', productArg.description));
+    tagArray.push(new OpengraphTag('og:image', productArg.logoLink));
+    return tagArray;
+  }
+
   constructor(propertyNameArg: string, contentArg: string) {
     super();
     const openGraphElement = document.createElement('meta');

ts/websetup.classes.tag.ts

@@ -1,4 +1,4 @@
-import * as plugins from './websetup.plugins';
+import * as plugins from './websetup.plugins.js';
 
 export class Tag {
   public elementRef: Element;

ts/websetup.classes.taglevel.ts

@@ -1,8 +1,8 @@
-import { Tag } from './websetup.classes.tag';
+import { Tag } from './websetup.classes.tag.js';
-import { JsonLdTag } from './websetup.classes.tag.jsonldtag';
+import { JsonLdTag } from './websetup.classes.tag.jsonldtag.js';
-import { OpengraphTag } from './websetup.classes.tag.opengraphtag';
+import { OpengraphTag } from './websetup.classes.tag.opengraphtag.js';
-import { TagManager } from './websetup.classes.tagmanager';
+import { TagManager } from './websetup.classes.tagmanager.js';
-import * as plugins from './websetup.plugins';
+import * as plugins from './websetup.plugins.js';
 
 export type TBaseLevelType = 'global' | 'base' | 'subpage';
 
@@ -31,15 +31,21 @@ export class TagLevel {
     this.tagManagerRef = tagManagerRefArg;
   }
 
-  public addTag(tagArg: Tag) {
+  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));
+    this.addTag(JsonLdTag.createCompanyJsonLd(companyDataArg));
 
     // lets care about open graph
     this.addTag(new OpengraphTag('og:type', 'business.business'));
@@ -70,7 +76,13 @@ export class TagLevel {
   }
 
   public addNewsArticleInfo(articleArg: plugins.tsclass.content.IArticle) {
-    this.addTag(JsonLdTag.createNewsArticleLd(articleArg));
+    this.addTag(JsonLdTag.createNewsArticleJsonLd(articleArg));
+    this.addTag(OpengraphTag.createNewsArticleOgTags(articleArg));
+  }
+
+  public addProductInfo(productArg: plugins.tsclass.saas.IProduct, companyArg: plugins.tsclass.business.ICompany) {
+    this.addTag(JsonLdTag.createProductJsonLd(productArg, companyArg));
+    this.addTag(OpengraphTag.createProductOgTags(productArg));
   }
 
   public async enable() {

ts/websetup.classes.tagmanager.ts

@@ -1,9 +1,9 @@
-import { TagLevel } from './websetup.classes.taglevel';
+import { TagLevel } from './websetup.classes.taglevel.js';
-import * as plugins from './websetup.plugins';
+import * as plugins from './websetup.plugins.js';
-import * as interfaces from './interfaces';
+import * as interfaces from './interfaces/index.js';
-import { MetaTag } from './websetup.classes.tag.metatag';
+import { MetaTag } from './websetup.classes.tag.metatag.js';
-import { JsonLdTag } from './websetup.classes.tag.jsonldtag';
+import { JsonLdTag } from './websetup.classes.tag.jsonldtag.js';
-import { OpengraphTag } from './websetup.classes.tag.opengraphtag';
+import { OpengraphTag } from './websetup.classes.tag.opengraphtag.js';
 
 export class TagManager {
   public globalLevel: TagLevel = new TagLevel(this, 'global');
@@ -17,6 +17,12 @@ export class TagManager {
     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) {
@@ -27,9 +33,17 @@ export class TagManager {
       this.baseLevel.addTag(new MetaTag('canonical', metaObjectArg.canonicalDomain));
     }
 
-    if (metaObjectArg.ldCompany) {
+
+    // json ld
+    switch (true) {
+      case metaObjectArg.ldCompany && !metaObjectArg.ldProduct:
         this.baseLevel.addCompanyInfo(metaObjectArg.ldCompany);
+        break;
+      case !!metaObjectArg.ldProduct:
+        this.baseLevel.addProductInfo(metaObjectArg.ldProduct, metaObjectArg.ldCompany);
+        break;
     }
+
     await this.globalLevel.enable();
     this.activeLevel = this.baseLevel;
     await this.activeLevel.enable();

ts/websetup.classes.title.ts

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

ts/websetup.classes.websetup.ts

@@ -1,10 +1,11 @@
-import * as plugins from './websetup.plugins';
+import * as plugins from './websetup.plugins.js';
-import * as interfaces from './interfaces';
+import * as interfaces from './interfaces/index.js';
-import { TagManager } from './websetup.classes.tagmanager';
+import { TagManager } from './websetup.classes.tagmanager.js';
-import { TagLevel } from './websetup.classes.taglevel';
+import { TagLevel } from './websetup.classes.taglevel.js';
 
 export interface IWebSetupConstructorOptions {
   metaObject: interfaces.IMetaObject;
+  smartssrWaitForReadySignal?: boolean;
 }
 
 /**
@@ -13,12 +14,21 @@ 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();
+      if (!this.options.smartssrWaitForReadySignal) {
+        this.readyForSmartssrDeferred.resolve();
+      }
     });
   }
 
@@ -48,5 +58,21 @@ export class WebSetup {
     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();
+  }
 }

tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "nodenext",
+    "esModuleInterop": true
+  }
+}

tslint.json

@@ -1,17 +0,0 @@
-{
-  "extends": ["tslint:latest", "tslint-config-prettier"],
-  "rules": {
-    "semicolon": [true, "always"],
-    "no-console": false,
-    "ordered-imports": false,
-    "object-literal-sort-keys": false,
-    "member-ordering": {
-      "options":{
-        "order": [
-          "static-method"
-        ]
-      }
-    }
-  },
-  "defaultSeverity": "warning"
-}