initial

.gitea/workflows/default_nottags.yaml

@@ -0,0 +1,66 @@
+name: Default (not tags)
+
+on:
+  push:
+    tags-ignore:
+      - '**'
+
+env:
+  IMAGE: code.foss.global/hosttoday/ht-docker-node:npmci
+  NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@/${{gitea.repository}}.git
+  NPMCI_TOKEN_NPM: ${{secrets.NPMCI_TOKEN_NPM}}
+  NPMCI_TOKEN_NPM2: ${{secrets.NPMCI_TOKEN_NPM2}}
+  NPMCI_GIT_GITHUBTOKEN: ${{secrets.NPMCI_GIT_GITHUBTOKEN}}
+  NPMCI_URL_CLOUDLY: ${{secrets.NPMCI_URL_CLOUDLY}}
+
+jobs:
+  security:
+    runs-on: ubuntu-latest
+    continue-on-error: true
+    container:
+      image: ${{ env.IMAGE }}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Install pnpm and npmci
+        run: |
+          pnpm install -g pnpm
+          pnpm install -g @ship.zone/npmci
+
+      - name: Run npm prepare
+        run: npmci npm prepare
+
+      - name: Audit production dependencies
+        run: |
+          npmci command npm config set registry https://registry.npmjs.org
+          npmci command pnpm audit --audit-level=high --prod
+        continue-on-error: true
+
+      - name: Audit development dependencies
+        run: |
+          npmci command npm config set registry https://registry.npmjs.org
+          npmci command pnpm audit --audit-level=high --dev
+        continue-on-error: true
+
+  test:
+    if: ${{ always() }}
+    needs: security
+    runs-on: ubuntu-latest
+    container:
+      image: ${{ env.IMAGE }}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Test stable
+        run: |
+          npmci node install stable
+          npmci npm install
+          npmci npm test
+
+      - name: Test build
+        run: |
+          npmci node install stable
+          npmci npm install
+          npmci npm build

.gitea/workflows/default_tags.yaml

@@ -0,0 +1,124 @@
+name: Default (tags)
+
+on:
+  push:
+    tags:
+      - '*'
+
+env:
+  IMAGE: code.foss.global/hosttoday/ht-docker-node:npmci
+  NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@/${{gitea.repository}}.git
+  NPMCI_TOKEN_NPM: ${{secrets.NPMCI_TOKEN_NPM}}
+  NPMCI_TOKEN_NPM2: ${{secrets.NPMCI_TOKEN_NPM2}}
+  NPMCI_GIT_GITHUBTOKEN: ${{secrets.NPMCI_GIT_GITHUBTOKEN}}
+  NPMCI_URL_CLOUDLY: ${{secrets.NPMCI_URL_CLOUDLY}}
+
+jobs:
+  security:
+    runs-on: ubuntu-latest
+    continue-on-error: true
+    container:
+      image: ${{ env.IMAGE }}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Prepare
+        run: |
+          pnpm install -g pnpm
+          pnpm install -g @ship.zone/npmci
+          npmci npm prepare
+
+      - name: Audit production dependencies
+        run: |
+          npmci command npm config set registry https://registry.npmjs.org
+          npmci command pnpm audit --audit-level=high --prod
+        continue-on-error: true
+
+      - name: Audit development dependencies
+        run: |
+          npmci command npm config set registry https://registry.npmjs.org
+          npmci command pnpm audit --audit-level=high --dev
+        continue-on-error: true
+
+  test:
+    if: ${{ always() }}
+    needs: security
+    runs-on: ubuntu-latest
+    container:
+      image: ${{ env.IMAGE }}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Prepare
+        run: |
+          pnpm install -g pnpm
+          pnpm install -g @ship.zone/npmci
+          npmci npm prepare
+
+      - name: Test stable
+        run: |
+          npmci node install stable
+          npmci npm install
+          npmci npm test
+
+      - name: Test build
+        run: |
+          npmci node install stable
+          npmci npm install
+          npmci npm build
+
+  release:
+    needs: test
+    if: github.event_name == 'push' && startsWith(github.ref, 'refs/tags/')
+    runs-on: ubuntu-latest
+    container:
+      image: ${{ env.IMAGE }}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Prepare
+        run: |
+          pnpm install -g pnpm
+          pnpm install -g @ship.zone/npmci
+          npmci npm prepare
+
+      - name: Release
+        run: |
+          npmci node install stable
+          npmci npm publish
+
+  metadata:
+    needs: test
+    if: github.event_name == 'push' && startsWith(github.ref, 'refs/tags/')
+    runs-on: ubuntu-latest
+    container:
+      image: ${{ env.IMAGE }}
+    continue-on-error: true
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Prepare
+        run: |
+          pnpm install -g pnpm
+          pnpm install -g @ship.zone/npmci
+          npmci npm prepare
+
+      - name: Code quality
+        run: |
+          npmci command npm install -g typescript
+          npmci npm install
+
+      - name: Trigger
+        run: npmci trigger
+
+      - name: Build docs and upload artifacts
+        run: |
+          npmci node install stable
+          npmci npm install
+          pnpm install -g @git.zone/tsdoc
+          npmci command tsdoc
+        continue-on-error: true

.gitignore

@@ -0,0 +1,19 @@
+.nogit/
+
+# artifacts
+coverage/
+public/
+
+# installs
+node_modules/
+
+# caches
+.yarn/
+.cache/
+.rpt2_cache
+
+# builds
+dist/
+dist_*/
+
+#------# custom

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "npm test",
+      "name": "Run npm test",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,26 @@
+{
+  "json.schemas": [
+    {
+      "fileMatch": ["/npmextra.json"],
+      "schema": {
+        "type": "object",
+        "properties": {
+          "npmci": {
+            "type": "object",
+            "description": "settings for npmci"
+          },
+          "gitzone": {
+            "type": "object",
+            "description": "settings for gitzone",
+            "properties": {
+              "projectType": {
+                "type": "string",
+                "enum": ["website", "element", "service", "npm", "wcc"]
+              }
+            }
+          }
+        }
+      }
+    }
+  ]
+}

npmextra.json

@@ -0,0 +1,18 @@
+{
+  "gitzone": {
+    "projectType": "npm",
+    "module": {
+      "githost": "code.foss.global",
+      "gitscope": "bellini.io",
+      "gitrepo": "bellini",
+      "description": "the bellini main application",
+      "npmPackagename": "@bellini.io/bellini",
+      "license": "MIT",
+      "projectDomain": "bellini.io"
+    }
+  },
+  "npmci": {
+    "npmGlobalTools": [],
+    "npmAccessLevel": "private"
+  }
+}

package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@bellini.io/bellini",
+  "version": "1.0.1",
+  "private": false,
+  "description": "the bellini main application",
+  "main": "dist_ts/index.js",
+  "typings": "dist_ts/index.d.ts",
+  "type": "module",
+  "author": "Task Venture Capital GmbH",
+  "license": "MIT",
+  "scripts": {
+    "test": "(tstest test/ --web)",
+    "build": "(tsbuild --web --allowimplicitany)",
+    "buildDocs": "(tsdoc)"
+  },
+  "devDependencies": {
+    "@git.zone/tsbuild": "^2.1.25",
+    "@git.zone/tsbundle": "^2.0.5",
+    "@git.zone/tspublish": "^1.9.1",
+    "@git.zone/tsrun": "^1.2.46",
+    "@git.zone/tstest": "^1.0.44",
+    "@push.rocks/tapbundle": "^5.0.15",
+    "@types/node": "^20.8.7"
+  },
+  "dependencies": {
+    "@api.global/typedrequest-interfaces": "^3.0.19",
+    "@push.rocks/smartlog-interfaces": "^3.0.2",
+    "@tsclass/tsclass": "^4.4.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://code.foss.global/bellini.io/bellini.git"
+  },
+  "bugs": {
+    "url": "https://code.foss.global/bellini.io/bellini/issues"
+  },
+  "homepage": "https://code.foss.global/bellini.io/bellini#readme",
+  "files": [
+    "ts/**/*",
+    "ts_web/**/*",
+    "dist/**/*",
+    "dist_*/**/*",
+    "dist_ts/**/*",
+    "dist_ts_web/**/*",
+    "assets/**/*",
+    "cli.js",
+    "npmextra.json",
+    "readme.md"
+  ],
+  "pnpm": {
+    "overrides": {}
+  }
+}

readme.hints.md

@@ -0,0 +1,3 @@
+# Project Readme Hints
+
+This is the initial readme hints file.

readme.md

@@ -0,0 +1,7 @@
+# @bellini.io/bellini
+
+the bellini main application
+
+## How to create the docs
+
+To create docs run gitzone aidoc.

test/test.ts

@@ -0,0 +1,8 @@
+import { expect, expectAsync, tap } from '@push.rocks/tapbundle';
+import * as bellini from '../ts/index.js';
+
+tap.test('first test', async () => {
+  console.log(bellini);
+});
+
+tap.start();

ts/bellini.plugins.ts

@@ -0,0 +1,2 @@
+const removeme = {};
+export { removeme };

ts/index.ts

@@ -0,0 +1,3 @@
+import * as plugins from './bellini.plugins.js';
+
+export let demoExport = 'Hi there! :) This is an exported string';

ts_api/00_commitinfo_data.ts

@@ -0,0 +1,8 @@
+/**
+ * autocreated commitinfo by @push.rocks/commitinfo
+ */
+export const commitinfo = {
+  name: '@bellini/api',
+  version: '1.1.0',
+  description: 'the main bellini api package'
+}

ts_api/api.classes.belliniclient.ts

@@ -0,0 +1,58 @@
+import * as plugins from './api.plugins.js';
+
+export interface IBelliniClientOptions {
+  publicationName: string;
+  smartstatePart?: plugins.smartstate.StatePart<any, IBelliniClientState>;
+}
+
+export interface IBelliniClientState {
+  articles: plugins.belliniInterfaces.IBelliniArticle[];
+}
+
+export class BelliniClient {
+  private apiEndpoint = 'https://connect.api.global/bellini';
+  public smartstatePart: plugins.smartstate.StatePart<any, IBelliniClientState>;
+  public options: IBelliniClientOptions;
+
+  constructor(optionsArg: IBelliniClientOptions) {
+    this.options = optionsArg;
+    this.init();
+  }
+
+  public initPromise: Promise<void>;
+  public async init() {
+    if (this.initPromise) {
+      return this.initPromise;
+    }
+    const deferred = plugins.smartpromise.defer<void>();
+    this.initPromise = deferred.promise;
+    if (this.options.smartstatePart) {
+      this.smartstatePart = this.options.smartstatePart;
+    } else {
+      const smartstate = new plugins.smartstate.Smartstate();
+      this.smartstatePart = await smartstate.getStatePart<IBelliniClientState>('bellini', {} as any);
+    }
+    await this.smartstatePart.setState({
+      articles: [],
+    });
+    deferred.resolve();
+  }
+
+  public async fetchArticles() {
+    await this.init();
+    const getArticles =
+      new plugins.typedrequest.TypedRequest<plugins.belliniInterfaces.IRequest_Any_Bellini_GetArticles>(
+        this.apiEndpoint,
+        'getArticles',
+      );
+    const response = await getArticles.fire({
+      from: Date.now() - 1000000000,
+      to: Date.now(),
+      publicationName: this.options.publicationName,
+    });
+    this.smartstatePart.setState({
+      articles: response.articles,
+    });
+    return response.articles;
+  }
+}

ts_api/api.plugins.ts

@@ -0,0 +1,15 @@
+// @bellini scope
+import * as belliniInterfaces from '@bellini/interfaces';
+
+export { belliniInterfaces };
+
+// @apiglobal scope
+import * as typedrequest from '@api.global/typedrequest';
+
+export { typedrequest };
+
+// @pushrocks scope
+import * as smartpromise from '@push.rocks/smartpromise';
+import * as smartstate from '@push.rocks/smartstate';
+
+export { smartpromise, smartstate };

ts_api/index.ts

@@ -0,0 +1 @@
+export * from './api.classes.belliniclient.js';

ts_api/tspublish.json

@@ -0,0 +1,12 @@
+{
+  "order": 1,
+  "name": "@bellini.io/api",
+  "dependencies": [
+    "@api.global/typedrequest-interfaces",
+    "@tsclass/tsclass"
+  ],
+  "registries": [
+    "registry.npmjs.org:public",
+    "verdaccio.lossless.digital:public"
+  ]
+}

ts_catalog/00_commitinfo_data.ts

@@ -0,0 +1,8 @@
+/**
+ * autocreated commitinfo by @push.rocks/commitinfo
+ */
+export const commitinfo = {
+  name: '@bellini_private/catalog',
+  version: '1.0.130',
+  description: 'a catalog of webcomponents for the bellini organization'
+}

ts_catalog/elements/bellini-adsense.ts

@@ -0,0 +1,98 @@
+import { DeesElement, property, html, customElement, cssManager, css, type TemplateResult } from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/dees-domtools';
+
+import * as smartdelay from '@push.rocks/smartdelay';
+
+// lets load the Google Script once
+const script = document.createElement('script');
+script.onload = () => {};
+script.src = '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
+document.head.appendChild(script);
+
+globalThis.adsbygoogle ? null : globalThis.adsbygoogle = [];
+globalThis.adsbygoogle.push({
+  google_ad_client: "ca-pub-4104137977476459",
+  enable_page_level_ads: false
+});
+
+/**
+ * the counter for adding multiple ads
+ */
+let counter = 0;
+
+@customElement('bellini-adsense')
+export class BelliniAdSense extends DeesElement {
+  public static demo = () => html`<bellini-adsense adSenseSlotId="5326656750"></bellini-adsense>`
+
+  @property()
+  public adSenseSlotId: string;
+
+  constructor() {
+    super();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+          z-index: 1;
+          background: ${cssManager.bdTheme('#fafafa', '#222')};
+          font-family: 'Roboto', sans-serif;
+          display: block;
+          position: relative;
+          box-sizing: border-box;
+          width: 100%;
+          padding-bottom: 100px;
+        }
+        :host([hidden]) {
+          display: none;
+        }
+
+        #adSenseContainer {
+          margin: auto;
+          max-width: 1200px;
+        }
+
+        ${cssManager.cssForTablet(css`
+          #adSenseContainer {
+            margin: 0px 50px;
+          }
+        `)}
+    `
+  ]
+
+  public render(): TemplateResult {
+    return html`
+      <style>
+      </style>
+      <div id="adSenseContainer">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  async firstUpdated(changedProperties) {
+    await smartdelay.delayFor(10000);
+    const injectableElement = document.querySelectorAll('bellini-adsense')[counter];
+    counter++;
+    const myInsElement = document.createElement('ins');
+    myInsElement.classList.add('adsbygoogle');
+    myInsElement.style.display = 'block';
+    myInsElement.style.overflow = 'hidden';
+    myInsElement.style.borderRadius = '7px';
+    myInsElement.style.boxShadow = '0px 0px 5px rgba(0,0,0,0.2)';
+    myInsElement.setAttribute('data-ad-client', 'ca-pub-4104137977476459');
+    myInsElement.setAttribute('data-ad-slot', this.adSenseSlotId);
+    myInsElement.setAttribute('data-ad-format', 'auto');
+    myInsElement.setAttribute('data-adtest', 'on');
+
+    
+
+    injectableElement.appendChild(myInsElement);
+
+    const adSenseContainer = this.shadowRoot.querySelector('#adSenseContainer');
+    // adSenseContainer.appendChild(myInsElement);
+    globalThis.adsbygoogle.push({});
+  }
+}

ts_catalog/elements/bellini-articlebox.ts

@@ -0,0 +1,377 @@
+import {
+  DeesElement,
+  property,
+  state,
+  html,
+  customElement,
+  type TemplateResult,
+  cssManager,
+  css
+} from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/dees-domtools';
+
+import { ExtendedDate } from '@push.rocks/smarttime';
+
+import * as belliniApi from '@bellini/api';
+
+import '@design.estate/dees-catalog';
+
+@customElement('bellini-articlebox')
+export class BellliniArticlebox extends DeesElement {
+  @property({type: Object})
+  public selectedArticle: belliniApi.IBelliniClientState['articles'][0];
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      #articlebox {
+          position: realtive;
+          transition: all 0.3s;
+          background: ${cssManager.bdTheme('#fafafa', '#111')};
+          border-radius: 8px;
+          overflow: hidden;
+          opacity: 0;
+          width: 100%;
+          box-shadow: 0px 0px 5px ${cssManager.bdTheme('rgba(0, 0, 0, 0.2)', 'rgba(0, 0, 0, 0.5)')};
+          pointer-events: none;
+        }
+
+        #articlebox.show {
+          opacity: 1;
+          pointer-events: all;
+        }
+
+        #articlebox #articleActions {
+          position: relative;
+          border-top: 1px solid ${cssManager.bdTheme('#fafafa', '#333333')};
+          z-index: 10;
+          height: 30px;
+          background: ${cssManager.bdTheme('#fafafa', '#252525')};
+          box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
+          display: grid;
+          grid-template-columns: 40px auto 30px 30px 40px;
+        }
+
+        #articlebox #articleActions .articleAction {
+          transition: all 0.1s;
+          box-sizing: border-box;
+          padding-top: 7px;
+          padding-left: 7px;
+          position: relative;
+          height: 30px;
+          width: 30px;
+          cursor: pointer;
+          color: ${cssManager.bdTheme('#333', '#aaa')};
+        }
+
+        #articlebox #articleActions .articleAction:hover {
+          background: ${cssManager.bdTheme('#CCC', '#111')};
+          color: ${cssManager.bdTheme('#000000', '#ffffff')};
+        }
+
+        #articlebox #articleActions .articleAction:first-child {
+          margin-left: 10px;
+        }
+
+        #articlebox #articleFeaturedImage {
+          z-index: 9;
+          transition: all 0.1s;
+          bottom: 0px;
+          transition: all 0.1s;
+          position: relative;
+          width: 100%;
+          height: 350px;
+        }
+
+        #articlebox #articleFeaturedImage img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+
+        #articlebox #articleFeaturedImage:after {
+          transition: all 0.1s;
+          margin-top: 0px;
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          right: 0;
+          box-shadow: inset 0px 0px 150px rgba(0, 0, 0, 0.9);
+        }
+
+        #articlebox #articleHeading {
+        }
+
+        #articlebox #articleContent {
+          color: ${cssManager.bdTheme('#333', '#ccc')};
+          padding: 40px 80px;
+          font-size: 16px;
+          line-height: 1.4em;
+        }
+
+        #articlebox #articleContent p:first-child:first-letter {
+          color: #e4002b;
+          float: left;
+          font-family: Georgia;
+          font-size: 56px;
+          line-height: 44px;
+          padding-right: 8px;
+          padding-top: 8px;
+        }
+
+        #articlebox #articleContent figure {
+          width: 100%;
+          margin: 0px;
+        }
+
+        #articlebox #articleContent figure img {
+          transition: all 0.1s;
+          width: 100%;
+          height: 200px;
+          object-fit: cover;
+          overflow: hidden;
+          border-radius: 3px;
+        }
+
+        #articlebox #articleContent figure figcaption {
+          display: none;
+        }
+
+        #articlebox #articleContent figure img:hover {
+        }
+
+        #articlebox #articleMeta {
+          margin-left: 60px;
+          position: relative;
+          z-index: 10;
+          margin-top: -116px;
+        }
+
+        #articlebox #articleMeta #articleTimestamp {
+          padding: 10px 20px;
+          background: ${cssManager.bdTheme('rgba(100, 100, 100, 0.7)', 'rgba(20, 20, 20, 0.9)')};
+          color: ${cssManager.bdTheme('#fff', '#aaa')};
+          display: table;
+          font-size: 16px;
+          font-weight: 100;
+          font-family: 'Roboto Mono', monospace;
+        }
+
+        #articlebox #articleMeta #articleTitle {
+          color: ${cssManager.bdTheme('#333', '#eee')};
+          padding: 20px;
+          background: ${cssManager.bdTheme('rgba(250, 250, 250, 0.85)', 'rgba(0, 0, 0, 0.8)')};
+          display: table;
+          font-size: 30px;
+          font-family: 'Roboto Slab';
+          font-weight: 400;
+        }
+
+        #articlebox #articleMeta #articleAuthor {
+          padding: 10px 20px;
+          background: ${cssManager.bdTheme('rgba(210, 210, 210, 0.7)', 'rgba(30, 30, 30, 0.7)')};
+          color: ${cssManager.bdTheme('#333', '#ccc')};
+          display: table;
+          font-size: 14px;
+          font-weight: 300;
+          font-family: 'Roboto Mono', monospace;
+        }
+
+        #articlebox #articleMeta #articleAuthor #by {
+          display: inline-block;
+          color: ${cssManager.bdTheme('#444', '#aaa')};
+          line-height: 14px;
+          font-size: 12px;
+          padding-right: 5px;
+        }
+
+        #articlebox #articleMeta #metaDeco {
+          position: absolute;
+          width: 20px;
+          height: 260px;
+          top: -4px;
+          left: -10px;
+
+          --bg-color: ${cssManager.bdTheme('#00000060', '#ffffff60')};
+          --dot-color: #ffffff00;
+          --dot-size: 1px;
+          --dot-space: 6px;
+
+          background: linear-gradient(45deg, var(--bg-color) 1px, var(--dot-color) 2px) top left;
+          background-size: var(--dot-space) var(--dot-space);
+        }
+
+        #articlebox #articleContent {
+          max-width: 700px;
+          font-size: 18px;
+          line-height: 1.6em;
+        }
+
+        #articlebox #articleContent h2 {
+          margin-top: 45px;
+        }
+
+        #articlebox #articleContent ul {
+          margin-left: 0px;
+          padding-left: 20px;
+          list-style: none;
+        }
+
+        #articlebox #articleContent a {
+          font-style: italic;
+          text-decoration: none;
+          color: #999;
+        }
+
+        #articlebox #articleContent p {
+          margin-bottom: 2.3em;
+        }
+
+        #articlebox #articleContent ul li::before {
+          content: '•';
+          color: red;
+          display: inline-block;
+          width: 1em;
+          margin-left: -1em;
+        }
+
+        #articlebox #articleContent blockquote {
+          position: relative;
+          background: ${cssManager.bdTheme('#ffffff', '#222')};
+          border-left: 2px solid #e4002b;
+          border-top: 1px solid ${cssManager.bdTheme('#fff', '#333')};
+          border-radius: 3px;
+          padding: 20px;
+          margin: 0px;
+          text-align: left;
+          font-size: 16px;
+          font-style: italic;
+          font-family: 'Roboto Mono', monospace;
+          box-shadow: ${cssManager.bdTheme('0px 0px 5px rgba(0,0,0,0.2)', 'none')};
+        }
+
+        #articlebox #articleContent figure {
+          width: 100%;
+          margin-bottom: 40px;
+          box-sizing: border-box;
+          padding: 10px 10px 2px 10px;
+          border-radius: 3px;
+          background: #252525;
+        }
+
+        #articlebox #articleContent iframe {
+          width: 100%;
+        }
+
+        #articlebox #articleFooter {
+          position: relative;
+          border-top: 1px solid ${cssManager.bdTheme('#CCC', '#333333')};
+          z-index: 10;
+          height: 30px;
+          background: ${cssManager.bdTheme('#fafafa', '#151515')};
+          box-shadow: 0px 0px 5px ${cssManager.bdTheme('rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0.5)')};
+          display: grid;
+          font-family: 'Roboto Mono', monospace;
+          font-size: 12px;
+          text-align: center;
+          line-height: 30px;
+          color: ${cssManager.bdTheme('#333', '#ccc')};
+        }
+
+        ${cssManager.cssForPhablet(css`
+          #articlebox {
+            margin-right: -20px;
+            margin-left: -20px;
+            width: calc(100% + 40px);
+            border-radius: 0px;
+          }
+          #articlebox #articleMeta {
+            margin-left: 0px;
+          }
+
+          #articlebox #articleMeta #metaDeco {
+            height: 240px;
+          }
+          #articlebox #articleContent {
+            padding: 22px 20px;
+          }
+        `)}
+    `
+  ]
+
+  public render(): TemplateResult {
+    return html`
+      <style>
+      </style>
+      <div id="articlebox" class="belliniRelevantContent">
+        <div id="articleActions">
+          <div
+            class="articleAction"
+            @click="${async () => {
+              const domtoolsInstance = await this.domtoolsPromise;
+              domtoolsInstance.router.pushUrl('/');
+            }}"
+          >
+            <dees-icon iconName="keyboard_backspace"></dees-icon>
+          </div>
+          <div class="spacer"></div>
+          <div class="articleAction">
+            <dees-icon iconName="comment"></dees-icon>
+          </div>
+          <div class="articleAction">
+            <dees-icon iconName="share"></dees-icon>
+          </div>
+          <div
+            class="articleAction"
+            @click="${async () => {
+              const domtoolsInstance = await this.domtoolsPromise;
+              domtoolsInstance.router.pushUrl('/');
+            }}"
+          >
+            <dees-icon iconName="close"></dees-icon>
+          </div>
+        </div>
+        <div id="articleFeaturedImage">
+          <img src="${this.selectedArticle.featuredImageUrl}" />
+        </div>
+        <div id="articleMeta">
+          <div id="articleTimestamp">
+            ${(() => {
+              const extendedDate = new ExtendedDate(this.selectedArticle.timestamp);
+              let returnString = extendedDate.format('YYYY-MM-DD - HH:mm');
+              if (extendedDate.isToday()) {
+                returnString += ' (Today)';
+              }
+              return returnString;
+            })()}
+          </div>
+          <div id="articleTitle">${this.selectedArticle.title}</div>
+          <div id="articleAuthor">
+            <div id="by">by</div>
+            ${this.selectedArticle.author.name}
+          </div>
+          <div id="metaDeco"></div>
+        </div>
+        <div id="articleContent"></div>
+        <div id="articleFooter">... words | ... readability score | ... comments | ... views</div>
+      </div>
+    `;
+  }
+
+  public async updated() {
+    const articleContent = this.shadowRoot.querySelector('#articleContent');
+    articleContent.innerHTML = this.selectedArticle.htmlArticle;
+  }
+
+  public async show(boolArg: boolean) {
+    const articlebox = this.shadowRoot.querySelector('#articlebox');
+    if (boolArg) {
+      articlebox.classList.add('show')
+    } else {
+      articlebox.classList.remove('show');
+    }
+  }
+}

ts_catalog/elements/bellini-articlegrid.ts

@@ -0,0 +1,251 @@
+import { DeesElement, property, state, html, customElement, type TemplateResult, cssManager, css } from '@design.estate/dees-element';
+
+import { ExtendedDate } from '@push.rocks/smarttime';
+
+import * as belliniApi from '@bellini/api';
+
+import * as helpers from '../helpers/index.js';
+
+import * as domtools from '@design.estate/dees-domtools';
+import '@design.estate/dees-catalog';
+
+@customElement('bellini-articlegrid')
+export class BelliniArticleGrid extends DeesElement {
+  public static demo = () => html`<bellini-articlegrid publicationName="central.eu"></bellini-articlegrid>`;
+
+  @property({type: Array})
+  public articles: belliniApi.IBelliniClientState['articles'] = [];
+
+  @property({type: Object})
+  public selectedArticle: belliniApi.IBelliniClientState['articles'][0];
+
+  @property()
+  publicationName: string;
+
+  constructor() {
+    super();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+          display: block;
+          position: relative;
+        }
+        .articleGrid {
+          position: relative;
+          transition: all 0.3s;
+          display: grid;
+          grid-template-columns: ${cssManager.cssGridColumns(4, 15)};
+          grid-gap: 15px;
+          width: 100%;
+        }
+
+        .articleGrid.hidden {
+          opacity: 0;
+        }
+
+        .articleGrid a {
+          color: ${cssManager.bdTheme('#222', '#eee')};
+          text-decoration: none;
+        }
+
+        .articleitem {
+          min-height: 400px;
+          transition: box-shadow 0.3s;
+          width: 100%;
+          overflow: hidden;
+          border-radius: 3px;
+          box-shadow: 0px 0px 5px ${cssManager.bdTheme('rgba(0, 0, 0, 0.2)', 'rgba(0, 0, 0, 0.5)')};
+          position: relative;
+          cursor: pointer;
+          border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#555555')};
+        }
+
+        .articleitem * {
+          user-select: none;
+        }
+
+        .articleitem:hover {
+          box-shadow: 0px 3px 10px ${cssManager.bdTheme('rgba(0, 0, 0, 0.2)', 'rgba(0, 0, 0, 0.5)')};
+        }
+
+        .articleitem .image {
+          background: ${cssManager.bdTheme('#eeeeeb', '#2f2f2f')};;
+          top: 0px;
+          position: absolute;
+          width: 100%;
+          height: 220px;
+        }
+
+        .articleitem .image img {
+          border-radius: 3px;
+          display: block;
+          width: calc(100% - 10px);
+          height: calc(100% - 10px);
+          margin: 5px;
+          object-fit: cover;
+        }
+
+        .articleitem .image img:after {
+          content: ' ';
+          position: absolute;
+          top: 10;
+          left: 10;
+          bottom: 10;
+          right: 10;
+          box-shadow: inset 0px 0px 100px ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(0, 0, 0, 0.8)')};
+        }
+
+        .articleitem .preslant {
+          transform: skewY(8deg);
+          transform-origin: 0%;
+          background: ${cssManager.bdTheme('#eeeeeb', '#333333')};
+          height: 250px;
+          position: absolute;
+          top: 161px;
+          width: 100%;
+          left: 0px;
+        }
+
+        .articleitem .slant {
+          transform: skewY(8deg);
+          transform-origin: 0%;
+          background: ${cssManager.bdTheme('#fafafa', '#1d1d1d')};
+          border-top: 1px solid ${cssManager.bdTheme('#fafafa', '#444444')};
+          height: 400px;
+          position: absolute;
+          top: 165px;
+          width: 100%;
+          left: 0px;
+          box-shadow: 0px 0px 5px ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(0,0,0,0.5)')};
+        }
+        .articleitem .text {
+          z-index: 2;
+          position: relative;
+          left: 0px;
+          margin-top: 175px;
+          padding: 20px;
+          font-family: 'Roboto Mono', monospace;
+        }
+
+        .articleitem .text .timestamp {
+          color: ${cssManager.bdTheme('#333', '#aaa')};
+          font-size: 15px;
+          font-weight: 100;
+          font-family: 'Roboto Mono', monospace;
+          margin-bottom: 5px;
+        }
+
+        .articleitem .text .title {}
+
+        .articleitem .text .title h1 {
+          display: block;
+          margin: 0px;
+          font-size: 18px;
+          font-family: 'Roboto Slab';
+          font-weight: 400;
+        }
+
+        .articleitem .text .title h2 {
+          display: block;
+          color: ${cssManager.bdTheme('#444', '#CCC')};
+          margin-top: 8px;
+          font-size: 16px;
+          font-weight: 300;
+          font-family: 'Roboto', monospace;
+          padding-left: 10px;
+          border-left: 4px dotted ${cssManager.bdTheme('#00000020', '#ffffff20')};
+        }
+
+        ${cssManager.cssForTablet(css`
+          .articleGrid {
+            grid-template-columns: ${cssManager.cssGridColumns(3, 15)};
+          }
+        `)}
+
+        ${cssManager.cssForPhablet(css`
+          .articleGrid {
+            grid-template-columns: repeat(2, calc(50% - 10px));
+            grid-row-gap: 20px;
+          }
+          #articlebox {
+            margin-right: -50px;
+            margin-left: -50px;
+            width: calc(100% + 100px);
+            border-radius: 0px;
+          }
+          #articlebox #articleMeta {
+            margin-left: 0px;
+          }
+
+          #articlebox #articleMeta #metaDeco {
+            height: 240px;
+          }
+          #articlebox #articleContent {
+            padding: 22px 20px;
+          }
+        `)}
+
+        ${cssManager.cssForPhone(css`
+          .articleGrid {
+            grid-template-columns: repeat(1, calc(100% - 0px));
+            grid-row-gap: 20px;
+          }
+        `)}
+    `
+  ]
+
+  public render(): TemplateResult {
+    return html`
+      <style>
+        
+      </style>
+      <div class="articleGrid">
+        ${this.articles.map((articleItem) => {
+          const extendedDate = new ExtendedDate(articleItem.timestamp);
+          return html`
+            <a
+              href="${helpers.articlehelpers.getArticleUrl(articleItem)}"
+              @click="${(eventArg: MouseEvent) => {
+                this.handleArticleClick(eventArg, articleItem);
+              }}"
+            >
+              <div class="articleitem">
+                <div class="image"><img loading="lazy" src="${articleItem.featuredImageUrl.replace('q=80', 'q=50').replace('w=2000', 'w=800')}" /></div>
+                <div class="preslant"></div>
+                <div class="slant"></div>
+                <div class="text">
+                  <div class="timestamp">
+                    ${extendedDate.format('HH:mm')}<br />${extendedDate.isToday()
+                      ? `${extendedDate.format('YYYY-MM-DD')} (Today)`
+                      : extendedDate.format('YYYY-MM-DD')}
+                  </div>
+                  <div class="title"><h1>${articleItem.title}</h1><h2>${articleItem.content.split('.')[0]}.</h2></div>
+                </div>
+              </div>
+            </a>
+          `;
+        })}
+      </div>
+    `;
+  }
+
+  private async handleArticleClick (eventArg: MouseEvent, articleArg: belliniApi.IBelliniClientState['articles'][0]) {
+    eventArg.preventDefault();
+    const domtoolsInstance = await this.domtoolsPromise;
+    domtoolsInstance.router.pushUrl(helpers.articlehelpers.getArticleUrl(articleArg));
+  }
+
+  public async show(boolArg: boolean) {
+    const domtoolsInstance = await this.domtoolsPromise;
+    const articleGrid = this.shadowRoot.querySelector('.articleGrid');
+    if(!boolArg) {
+      articleGrid.classList.add('hidden');
+    } else {
+      articleGrid.classList.remove('hidden');
+    }
+    await domtoolsInstance.convenience.smartdelay.delayFor(300);
+  }
+}

ts_catalog/elements/bellini-articlelist.ts

@@ -0,0 +1,234 @@
+import {
+  DeesElement,
+  property,
+  state,
+  html,
+  customElement,
+  type TemplateResult,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+
+import { ExtendedDate } from '@push.rocks/smarttime';
+
+import * as belliniApi from '@bellini/api';
+import '@design.estate/dees-catalog';
+
+import * as helpers from '../helpers/index.js';
+
+@customElement('bellini-articlelist')
+export class BelliniArticlelist extends DeesElement {
+  // STATIC
+  public static demo = () => html``;
+
+  // INSTANCE
+  @property({ type: Array })
+  articles: belliniApi.IBelliniClientState['articles'] = [];
+
+  constructor() {
+    super();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        color: #fff;
+      }
+
+      #main {
+        position: relative;
+        padding-bottom: 20px;
+        transition: opacity 0.2s;
+        opacity: 1;
+      }
+
+      #main.hidden {
+        opacity: 0;
+      }
+
+      .articleRow {
+        border-top: 1px solid ${cssManager.bdTheme('#ffffff', ' #444444')};
+        position: relative;
+        z-index: 0;
+        height: 230px;
+        background: ${cssManager.bdTheme('#ffffff', '#212121')};
+        border-radius: 3px;
+        margin-bottom: 15px;
+        box-shadow: 0px 0px 5px ${cssManager.bdTheme('rgba(0, 0, 0, 0.2)', 'rgba(0, 0, 0, 0.5)')};
+        overflow: hidden;
+        display: grid;
+        grid-template-columns: calc(100% / 3) calc(100% / 3) calc(100% / 3);
+      }
+
+      a {
+        color: ${cssManager.bdTheme('#333333', '#fafafa')};
+        text-decoration: none;
+      }
+
+      .articleRow .articleImage {
+        height: inherit;
+      }
+
+      .articleRow .articleImage::after {
+        box-shadow: inset 0px 0px 100px
+          ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(0, 0, 0, 0.8)')};
+      }
+
+      .articleRow .articleImage img {
+        width: calc(100% - 10px);
+        height: calc(100% - 10px);
+        margin: 5px;
+        border-radius: 3px;
+        object-fit: cover;
+      }
+
+      .articleRow .articleTitle,
+      .articleRow .articleDescription {
+        z-index: 1;
+        position: relative;
+        padding: 10px;
+      }
+
+      .articleRow .articleTitle {
+          padding: 15px 20px;
+      }
+
+      .articleRow .articleTitle h1 {
+        margin: 0px;
+        font-family: "Roboto Slab";
+        font-size: 25px;
+        font-weight: 400;
+        border-radius: 3px;
+      }
+
+      .articleRow .articleTitle h2 {
+        margin: 0px;
+        margin-top: 10px;
+        font-family: 'Roboto Slab';
+        font-size: 18px;
+        font-weight: 300;
+        color: ${cssManager.bdTheme('#444', '#CCC')};
+        padding-left: 10px;
+        border-left: 5px dotted ${cssManager.bdTheme('#00000020', '#ffffff20')};
+      }
+
+      .articleRow .articleDescription {
+        padding: 20px;
+      }
+
+      ${cssManager.cssForTablet(css`
+        .articleRow {
+          display: grid;
+          grid-template-columns: calc(100% / 3) calc(100% / 3 * 2);
+        }
+
+        .articleRow .articleTitle {
+          padding: 20px;
+          grid-row: 1;
+          grid-column: 2;
+        }
+
+        .articleRow .articleTitle h1 {
+          font-size: 22px;
+        }
+
+        .articleRow .articleTitle h2 {
+          font-size: 18px;
+        }
+
+        .articleRow .articleDescription {
+          display: none;
+        }
+      `)}
+      ${cssManager.cssForPhablet(css`
+        .articleRow {
+          height: 120px;
+        }
+
+        .articleRow .articleTitle {
+          padding: 10px;
+        }
+
+        .articleRow .articleTitle h1 {
+          font-size: 16px;
+        }
+
+        .articleRow .articleTitle h2 {
+          font-size: 12px;
+        }
+      `)}
+      ${cssManager.cssForPhone(css`
+        .articleRow {
+          height: 160px;
+        }
+
+        .articleRow .articleTitle {
+          padding: 10px;
+        }
+
+        .articleRow .articleTitle h1 {
+          font-size: 16px;
+        }
+
+        .articleRow .articleTitle h2 {
+          font-size: 12px;
+        }
+      `)}
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <style></style>
+      <div id="main">
+        ${this.articles.map((articleArg) => {
+          return html`
+            <a
+              href="${articleArg.url}"
+              @click="${(eventArg: MouseEvent) => {
+                this.handleArticleClick(eventArg, articleArg);
+              }}"
+            >
+              <div class="articleRow">
+                <div class="articleImage">
+                  <img
+                    loading="lazy"
+                    src="${articleArg.featuredImageUrl
+                      .replace('q=80', 'q=50')
+                      .replace('w=2000', 'w=800')}"
+                  />
+                </div>
+                <div class="articleTitle">
+                  <h1>${articleArg.title}</h1>
+                  <h2>${articleArg.content.split('.')[0]}.</h2>
+                </div>
+                <div class="articleDescription">Click to read more.</div>
+              </div>
+            </a>
+          `;
+        })}
+      </div>
+    `;
+  }
+
+  private async handleArticleClick(
+    eventArg: MouseEvent,
+    articleArg: belliniApi.IBelliniClientState['articles'][0]
+  ) {
+    eventArg.preventDefault();
+    const domtoolsInstance = await this.domtoolsPromise;
+    domtoolsInstance.router.pushUrl(helpers.articlehelpers.getArticleUrl(articleArg));
+  }
+
+  public async show(boolArg: boolean) {
+    const domtoolsInstance = await this.domtoolsPromise;
+    const mainDiv = this.shadowRoot.querySelector('#main');
+    if (!boolArg) {
+      mainDiv.classList.add('hidden');
+    } else {
+      mainDiv.classList.remove('hidden');
+    }
+    await domtoolsInstance.convenience.smartdelay.delayFor(300);
+  }
+}

ts_catalog/elements/bellini-content.ts

@@ -0,0 +1,242 @@
+import {
+  DeesElement,
+  property,
+  state,
+  html,
+  customElement,
+  type TemplateResult,
+  cssManager,
+  css,
+} from '@design.estate/dees-element';
+
+import * as belliniApi from '@bellini/api';
+
+import * as domtools from '@design.estate/dees-domtools';
+import { BelliniArticleGrid } from './bellini-articlegrid.js';
+import { BellliniArticlebox } from './bellini-articlebox.js';
+import { BelliniArticlelist } from './bellini-articlelist.js';
+
+@customElement('bellini-content')
+export class BelliniContent extends DeesElement {
+  // STATIC
+  public static demo = () => html`
+    <bellini-content publicationName="central.eu"></bellini-content>
+  `;
+
+  // INSTANCE
+  @property({ type: Array })
+  public articles: belliniApi.IBelliniClientState['articles'] = [];
+
+  @property({ type: Object })
+  public selectedArticle: belliniApi.IBelliniClientState['articles'][0] = null;
+
+  @state()
+  private showArticle: boolean = false;
+
+  @property()
+  public gridStyle: 'grid' | 'list' = 'list';
+
+  @property()
+  public publicationName: string;
+
+  constructor() {
+    super();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        background: ${cssManager.bdTheme(
+          'var(--background2, #eeeeeb)',
+          'var(--background2, #000000)'
+        )};
+        position: relative;
+        color: var(--betanews-color-font);
+        padding-bottom: 0px;
+        z-index: 1;
+      }
+
+      .main .contentsettings {
+        user-select: none;
+        height: 50px;
+        color: ${cssManager.bdTheme('#333', '#fff')};
+        border-radius: 3px;
+        background: ${cssManager.bdTheme('#fff', '#333')};
+        margin-bottom: 15px;
+        padding: 5px;
+        display: grid;
+        grid-template-columns: auto 50px 50px 50px;
+        grid-gap: 5px;
+      }
+
+      .main a {
+        display: inline-block;
+        text-decoration: none;
+        color: ${cssManager.bdTheme('#333', 'FFF')};
+        border-radius: 3px;
+        height: 100%;
+        background: ${cssManager.bdTheme('#eeeeeb', '#222')};
+        text-align: center;
+        padding-top: 9px;
+        padding-left: 10px;
+        padding-right: 10px;
+        cursor: pointer;
+        font-family: 'Roboto Slab';
+      }
+
+      ${cssManager.cssForPhablet(css`
+        .main a {
+          font-size: 12px;
+          padding-top: 12px;
+          padding-left: 5px; 
+          padding-right: 5px; 
+        }
+      `)}
+
+      ${cssManager.cssForPhone(css`
+        .main a {
+          display: none; 
+        }
+      `)}
+
+      .main .contentsettings span {
+        display: block;
+        border-radius: 3px;
+        background: ${cssManager.bdTheme('#eeeeeb', '#222')};
+        text-align: center;
+        padding-top: 12px;
+        cursor: pointer;
+      }
+
+      .main .contentsettings span:hover,
+      .main .contentsettings a:hover {
+        background: ${cssManager.bdTheme('#CCC', '#111')};
+      }
+
+      .pagespacer {
+        max-width: var(--lelecv-pagewidth, 1200px);
+        position: relative;
+        margin: auto;
+      }
+
+      ${cssManager.cssForNotebook(css`
+        .pagespacer {
+          margin: 0px 15px;
+        }
+      `)}
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <style></style>
+      <div class="main">
+        <div class="pagespacer">
+          <div class="contentsettings">
+
+            <div>
+              <a href="https://newyork.today">NewYork</a>
+              <a href="https://central.eu">Europe</a>
+              <a href="https://finance.plus">Finance</a>
+              <a href="https://start.plus">Startups</a>
+              <a href="https://coffee.link">Coffee And Stories</a>
+            </div>
+            <span
+              @click="${() => {
+                
+              }}"
+              ><dees-icon iconName="search"></dees-icon></span
+            >
+            <span
+              @click="${() => {
+                this.setGridStyle('grid');
+              }}"
+              ><dees-icon iconName="grid_view"></dees-icon></span
+            >
+            <span
+              @click="${() => {
+                this.setGridStyle('list');
+              }}"
+              ><dees-icon iconName="view_list"></dees-icon></span
+            >
+          </div>
+          ${this.showArticle
+            ? html`
+                <bellini-articlebox .selectedArticle=${this.selectedArticle}></bellini-articlebox>
+              `
+            : html`
+                ${this.gridStyle === 'grid'
+                  ? html`<bellini-articlegrid .articles=${this.articles}></bellini-articlegrid>`
+                  : html`<bellini-articlelist .articles="${this.articles}"></bellini-articlelist>`}
+              `}
+        </div>
+      </div>
+    `;
+  }
+
+  public async firstUpdated() {
+    const domtoolsInstance = await this.domtoolsPromise;
+    domtoolsInstance.router.on('/', async (routeArg) => {
+      this.selectedArticle = null;
+      domtoolsInstance.websetup.revertToBaseLevel();
+    });
+    domtoolsInstance.router.on('/article/:id/:title', async (routeArg) => {
+      const wantedId = routeArg.params.id;
+      this.selectedArticle = this.articles.find((item) => item.belliniId === wantedId);
+      if (this.selectedArticle) {
+        const taglevel = await domtoolsInstance.websetup.setSubLevel({
+          title: `${this.selectedArticle.title} - ${this.publicationName}`,
+          description: `${this.selectedArticle.content.substr(0, 100)}`,
+        });
+        taglevel.addNewsArticleInfo(this.selectedArticle);
+      }
+    });
+    domtoolsInstance.router._handleRouteState();
+
+    // lets handle state
+    const belliniApiInstance = new belliniApi.BelliniClient({
+      publicationName: this.publicationName,
+      smartstatePart: await domtoolsInstance.smartstate.getStatePart<any>('bellini', {}, 'soft'),
+    });
+
+    belliniApiInstance.fetchArticles(); // lets don't wait here
+    (await domtoolsInstance.smartstate.getStatePart<belliniApi.IBelliniClientState>('bellini'))
+      .select((stateArg) => stateArg.articles)
+      .subscribe((articlesArg) => {
+        this.articles = articlesArg;
+        domtoolsInstance.router._handleRouteState();
+      });
+  }
+
+  public async updated() {
+    const domtoolsInstance = await this.domtoolsPromise;
+    const belliniArticlebox: BellliniArticlebox =
+      this.shadowRoot.querySelector('bellini-articlebox');
+    const belliniArticleGrid: BelliniArticleGrid =
+      this.shadowRoot.querySelector('bellini-articlegrid');
+    const belliniArticleList: BelliniArticlelist =
+      this.shadowRoot.querySelector('bellini-articlelist');
+
+    if (this.selectedArticle && (belliniArticleGrid || belliniArticleList)) {
+      if (belliniArticleList) await belliniArticleList.show(false);
+      if (belliniArticleGrid) await belliniArticleGrid.show(false);
+      this.showArticle = true;
+    } else if (!this.selectedArticle && belliniArticlebox) {
+      await belliniArticlebox.show(false);
+      this.showArticle = false;
+    } else if (this.selectedArticle && belliniArticlebox) {
+      const offset = window.innerWidth > 600 ? -20 : 0;
+      domtoolsInstance.scroller.toElement(belliniArticlebox, {
+        offset,
+      });
+      belliniArticlebox.show(true);
+    }
+    domtoolsInstance.router._handleRouteState();
+  }
+
+  setGridStyle(gridStyleArg: 'grid' | 'list') {
+    this.gridStyle = gridStyleArg;
+  }
+}

ts_catalog/elements/belllini-header.ts

@@ -0,0 +1,351 @@
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  TemplateResult,
+  cssManager,
+  css,
+  unsafeCSS
+} from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/dees-domtools';
+
+@customElement('bellini-header')
+export class BelliniHeader extends DeesElement {
+  public static demo = () => html`<bellini-header publicationName="central.eu"></bellini-header>`;
+
+  @property()
+  publicationName: string = 'no publication name set';
+
+  @property()
+  slogan: string = 'slogan not set';
+
+  @property()
+  twitterHandle: string;
+
+  @property()
+  facebookHandle: string;
+
+  constructor() {
+    super();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+          position: relative;
+          display: block;
+          overflow: hidden;
+          background: ${cssManager.bdTheme('#eeeeeb', '#000')};
+        }
+        :host([hidden]) {
+          display: none;
+        }
+
+        .headerMain {
+          background-repeat: no-repeat;
+          background-position: center 0px;
+          background-size: cover;
+          color: #fff;
+          position: relative;
+          z-index: 1;
+        }
+
+        /* PAGESPACER */
+        .gridContainer {
+          position: relative;
+          max-width: var(--lelecv-pagewidth, 1200px);
+          display: grid;
+          grid-template-columns: ${cssManager.cssGridColumns(4, 15)};
+          grid-gap: 15px;
+          margin: auto;
+          z-index: 100;
+          padding-top: 30px;
+          padding-bottom: 15px;
+        }
+
+        .gridTile {
+          background: ${cssManager.bdTheme('#fafafa', '#333333')};
+          box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+          position: relative;
+          overflow: hidden;
+          border-radius: 3px;
+        }
+
+        .gridTile .heading {
+          text-align: center;
+          margin: 5px;
+          background: ${cssManager.bdTheme('#eeeeeb', '#222')};
+          color: ${cssManager.bdTheme('#333', '#fff')};
+          padding: 5px;
+          border-radius: 3px;
+        }
+
+        .gridTile .selectionGridContainer {
+          display: grid;
+          grid-template-columns: ${cssManager.cssGridColumns(2, 5)};
+          grid-gap: 5px;
+          padding: 0px 5px 5px 5px;
+        }
+
+        .gridTile .selectionGridContainer a {
+          display: contents;
+          text-decoration: none;
+        }
+
+        .gridTile .selectionGridContainer .selectionItem {
+          background: ${cssManager.bdTheme('#eeeeeb', '#222')};
+          color: ${cssManager.bdTheme('#333', '#fff')};
+          height: 120px;
+          border-radius: 3px;
+          overflow: hidden;
+          cursor: pointer;
+          padding: 0px 8px 0px 8px;
+        }
+
+        .gridTile .selectionGridContainer .selectionItem:hover {
+          background: ${cssManager.bdTheme('#ccc', '#000')};
+        }
+
+        .gridTile .selectionGridContainer .selectionItem dees-icon {
+          text-align: center;
+          display: block;
+          margin: auto;
+          margin-top: 35px;
+        }
+
+        .gridTile .selectionGridContainer .selectionItem .text {
+          text-align: center;
+          display: block;
+          margin: auto;
+          margin-top: 8px;
+
+        }
+
+        .logo {
+          background: ${cssManager.bdTheme('#222222', '#000000')};
+          border: 1px solid ${cssManager.bdTheme('#222222', '#333333')};
+          text-align: center;
+          position: relative;
+        }
+
+        .logo img {
+          display: block;
+          margin: auto;
+          margin-top: -20px;
+          margin-bottom: 20px;
+          width: 100%;
+        }
+
+        .logo .slogan {
+          position: absolute;
+          display: block;
+          top: 77%;
+          left: 0px;
+          width: 100%;
+          font-size: 25px;
+          font-weight: 100;
+          font-family: 'Exo 2', monospace;
+        }
+
+        
+        ${cssManager.cssForNotebook(css`
+          .gridContainer {
+            margin-left: 15px;
+            margin-right: 15px;
+          }
+        `)}
+
+        ${cssManager.cssForTablet(css`
+          .gridContainer {
+            grid-template-columns: ${cssManager.cssGridColumns(3, 15)};
+          }
+
+          .gridTile.know-us {
+            display: none;
+          }
+
+          .gridTile .selectionGridContainer .selectionItem {
+            height: 135px;
+          }
+
+          .gridTile .selectionGridContainer .selectionItem dees-icon {
+            margin-top: 40px;
+          }
+        `)}
+
+        ${cssManager.cssForPhablet(css`
+          .gridContainer {
+            grid-template-columns: repeat(1, calc(100% - 0px));
+          }
+
+          .gridContainer .logo img {
+            margin-top: -20%;
+            margin-bottom: -37%;
+          }
+
+          .gridTile.us {
+            height: auto;
+            grid-column: auto;
+          }
+          .gridTile.social {
+            display: none;
+          }
+          .gridTile.us.know-us {
+            display:none;
+          }
+
+          .gridTile.us .selectionGridContainer {
+            grid-template-columns: ${cssManager.cssGridColumns(3, 5)};
+          }
+
+          .gridTile.us .selectionGridContainer .selectionItem {
+            padding: 0px;
+            height: 40px;
+          }
+
+          .gridTile.us .selectionGridContainer .selectionItem dees-icon {
+            margin-top: 8px;
+          }
+
+          .gridTile.us .selectionGridContainer .selectionItem .text {
+            display: none;
+          }
+        `)}
+    `
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <style>
+      </style>
+      <div class="headerMain">
+        <div class="gridContainer">
+          <div class="gridTile logo">
+            <img
+              src="https://assetbroker.lossless.one/brandfiles/00general/square_${this.publicationName.replace(
+                '.',
+                ''
+              )}.svg"
+            />
+            <div class="slogan">${this.slogan}</div>
+          </div>
+          <div class="gridTile us">
+            <div class="heading">read us across the web:</div>
+            <div class="selectionGridContainer">
+              <a
+                href="${this.domtools
+                  ? 'https://feedly.com/i/subscription/feed/https://' +
+                    window.location.hostname +
+                    '/feed'
+                  : null}"
+                target="_blank"
+              >
+                <div class="selectionItem">
+                  <dees-icon svgSize="25" brandName="rss"></dees-icon>
+                  <div class="text">Feedly</div>
+                </div>
+              </a>
+              <a
+                href="${this.domtools
+                  ? this.domtools.websetup.options.metaObject.googleNewsLink
+                  : null}"
+                target="_blank"
+              >
+                <div class="selectionItem">
+                  <dees-icon svgSize="25" brandName="google"></dees-icon>
+                  <div class="text">Google News</div>
+                </div>
+              </a>
+              <a
+                href="${this.domtools
+                  ? this.domtools.websetup.options.metaObject.mediumLink
+                  : null}"
+                target="_blank"
+              >
+                <div class="selectionItem">
+                  <dees-icon svgSize="25" brandName="medium"></dees-icon>
+                  <div class="text">Medium</div>
+                </div>
+              </a>
+            </div>
+          </div>
+          <div class="gridTile us social">
+            <div class="heading">${this.publicationName} on social networks:</div>
+            <div class="selectionGridContainer">
+              <a
+                href="${this.domtools
+                  ? 'https://twitter.com/' + this.domtools.websetup.options.metaObject.twitterHandle
+                  : null}"
+                target="_blank"
+              >
+                <div class="selectionItem">
+                  <dees-icon svgSize="25" brandName="twitter"></dees-icon>
+                  <div class="text">Twitter</div>
+                </div>
+              </a>
+              <a
+                href="${this.domtools
+                  ? 'https://fb.com/' + this.domtools.websetup.options.metaObject.facebookHandle
+                  : null}"
+                target="_blank"
+              >
+                <div class="selectionItem">
+                  <dees-icon svgSize="25" brandName="facebook"></dees-icon>
+                  <div class="text">Facebook</div>
+                </div>
+              </a>
+            </div>
+          </div>
+
+          <div class="gridTile us know-us">
+            <div class="heading">get to know us:</div>
+            <div class="selectionGridContainer">
+              <a
+                href="${this.domtools
+                  ? this.domtools.websetup.options.metaObject.companyWebsiteLink
+                  : null}"
+                target="_blank"
+              >
+                <div class="selectionItem">
+                  <dees-icon svgSize="25" brandName="desktop"></dees-icon>
+                  <div class="text">Company Website</div>
+                </div>
+              </a>
+              <a
+                href="${this.domtools
+                  ? this.domtools.websetup.options.metaObject.slackLink
+                  : null}"
+                target="_blank"
+              >
+              </a>
+              <a
+                href="https://jobs.lossless.com"
+                target="_blank"
+              >
+                <div class="selectionItem">
+                  <dees-icon svgSize="25" brandName="users"></dees-icon>
+                  <div class="text">Join Our Team</div>
+                </div>
+              </a>
+              <a
+                href="${this.domtools
+                  ? this.domtools.websetup.options.metaObject.airmeetLink
+                  : null}"
+                target="_blank"
+              >
+                <div class="selectionItem">
+                  <dees-icon style="font-size: 25px;" iconName="live_help"></dees-icon>
+                  <div class="text">Support</div>
+                </div>
+              </a>
+            </div>
+          </div>
+        </div>
+        <slot></slot>
+      </div>
+    `;
+  }
+}

ts_catalog/elements/index.ts

@@ -0,0 +1,6 @@
+export * from './bellini-adsense.js';
+export * from './bellini-articlebox.js';
+export * from './bellini-articlegrid.js';
+export * from './bellini-articlelist.js';
+export * from './bellini-content.js';
+export * from './belllini-header.js';

ts_catalog/helpers/articlehelpers.ts

@@ -0,0 +1,6 @@
+import * as belliniApi from '@bellini/api';
+
+export const getArticleUrl = (articleArg: belliniApi.IBelliniClientState['articles'][0]) => {
+  const articleUrl = `/article/${articleArg.belliniId}/${encodeURIComponent(articleArg.title.toLowerCase().replace(/\s/g, '-'))}`;
+  return articleUrl;
+};

ts_catalog/helpers/index.ts

@@ -0,0 +1,5 @@
+import * as articlehelpers from './articlehelpers.js';
+
+export {
+  articlehelpers
+}

ts_catalog/index.ts

@@ -0,0 +1,2 @@
+export * from './elements/index.js';
+export { commitinfo } from './00_commitinfo_data.js';

ts_catalog/pages/index.ts

@@ -0,0 +1,2 @@
+export * from './page2.js';
+export * from './page1.js';

ts_catalog/pages/page1.ts

@@ -0,0 +1,8 @@
+import { html } from "@design.estate/dees-element";
+import '@losslessone_private/lele-catalog';
+export const page1 = () => html`
+  <lele-statusbar-fixed></lele-statusbar-fixed>
+  <bellini-header publicationName='newyork.today' slogan="liberal think tank"></bellini-header>
+  <bellini-content publicationName='newyork.today'></bellini-content>
+  <lele-footer></lele-footer>
+`;

ts_catalog/pages/page2.ts

@@ -0,0 +1,5 @@
+import { html } from "@design.estate/dees-element";
+
+export const page2 = () => html`
+  <lele-statusbar></lele-statusbar>
+`;

ts_catalog/tspublish.json

@@ -0,0 +1,13 @@
+{
+  "order": 2,
+  "name": "@bellini_private/catalog",
+  "dependencies": [
+    "@design.estate/dees-element",
+    "@design.estate/dees-domtools",
+    "@push.rocks/smartdelay"
+  ],
+  "registries": [
+    "registry.npmjs.org:public",
+    "verdaccio.lossless.digital:public"
+  ]
+}

ts_interfaces/bellini-interfaces.objects.ts

@@ -0,0 +1,27 @@
+import * as plugins from './bellini-interfaces.plugins';
+
+export interface IBelliniImage {
+  dimensions: string;
+  crop: string;
+  urlSmall: string;
+  urlMedium: string;
+  urlLarge: string;
+}
+
+export interface IBelliniArticle extends plugins.tsclass.content.IArticle {
+  url: string;
+  timestamp: number;
+  title: string;
+  author: IBelliniAuthor;
+  belliniId: string;
+  htmlArticle: string;
+  featuredImageUrl: string;
+  images: IBelliniImage[];
+  visibility: 'public' | 'private';
+}
+
+export interface IBelliniAuthor extends plugins.tsclass.content.IAuthor {
+  name: string;
+  image: IBelliniImage;
+  belliniId: string;
+}

ts_interfaces/bellini-interfaces.plugins.ts

@@ -0,0 +1,9 @@
+// @apiglobal scope
+import * as typedrequestInterfaces from '@apiglobal/typedrequest-interfaces';
+
+export { typedrequestInterfaces };
+
+// @tsclass scope
+import * as tsclass from '@tsclass/tsclass';
+
+export { tsclass };

ts_interfaces/bellini-interfaces.requests.ts

@@ -0,0 +1,34 @@
+import * as plugins from './bellini-interfaces.plugins';
+import * as objectInterfaces from './bellini-interfaces.objects';
+
+// tslint:disable-next-line: class-name
+export interface IRequest_Any_Bellini_GetArticles
+  extends plugins.typedrequestInterfaces.implementsTR<
+    plugins.typedrequestInterfaces.ITypedRequest,
+    IRequest_Any_Bellini_GetArticles
+  > {
+  method: 'getArticles';
+  request: {
+    publicationName: string;
+    from: number;
+    to: number;
+  };
+  response: {
+    articles: objectInterfaces.IBelliniArticle[];
+  };
+}
+
+// tslint:disable-next-line: class-name
+export interface IRequest_Any_Bellini_GetAuthors
+  extends plugins.typedrequestInterfaces.implementsTR<
+    plugins.typedrequestInterfaces.ITypedRequest,
+    IRequest_Any_Bellini_GetAuthors
+  > {
+  method: 'getAuthors';
+  request: {
+    publicationName: string;
+  };
+  response: {
+    authors: objectInterfaces.IBelliniAuthor[];
+  };
+}

ts_interfaces/index.ts

@@ -0,0 +1,2 @@
+export * from './bellini-interfaces.objects';
+export * from './bellini-interfaces.requests';

ts_interfaces/tspublish.json

@@ -0,0 +1,13 @@
+{
+  "order": 0,
+  "name": "@bellini.io/interfaces",
+  "dependencies": [
+    "@api.global/typedrequest-interfaces",
+    "@push.rocks/smartlog-interfaces",
+    "@tsclass/tsclass"
+  ],
+  "registries": [
+    "registry.npmjs.org:public",
+    "verdaccio.lossless.digital:public"
+  ]
+}

tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "useDefineForClassFields": false,
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "esModuleInterop": true,
+    "verbatimModuleSyntax": true,
+    "baseUrl": ".",
+    "paths": {}
+  },
+  "exclude": [
+    "dist_*/**/*.d.ts"
+  ]
+}