initial
This commit is contained in:
commit
189b642721
66
.gitea/workflows/default_nottags.yaml
Normal file
66
.gitea/workflows/default_nottags.yaml
Normal file
@ -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
|
||||||
124
.gitea/workflows/default_tags.yaml
Normal file
124
.gitea/workflows/default_tags.yaml
Normal file
@ -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
|
||||||
19
.gitignore
vendored
Normal file
19
.gitignore
vendored
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
.nogit/
|
||||||
|
|
||||||
|
# artifacts
|
||||||
|
coverage/
|
||||||
|
public/
|
||||||
|
|
||||||
|
# installs
|
||||||
|
node_modules/
|
||||||
|
|
||||||
|
# caches
|
||||||
|
.yarn/
|
||||||
|
.cache/
|
||||||
|
.rpt2_cache
|
||||||
|
|
||||||
|
# builds
|
||||||
|
dist/
|
||||||
|
dist_*/
|
||||||
|
|
||||||
|
#------# custom
|
||||||
11
.vscode/launch.json
vendored
Normal file
11
.vscode/launch.json
vendored
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"version": "0.2.0",
|
||||||
|
"configurations": [
|
||||||
|
{
|
||||||
|
"command": "npm test",
|
||||||
|
"name": "Run npm test",
|
||||||
|
"request": "launch",
|
||||||
|
"type": "node-terminal"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
26
.vscode/settings.json
vendored
Normal file
26
.vscode/settings.json
vendored
Normal file
@ -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"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
18
npmextra.json
Normal file
18
npmextra.json
Normal file
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
53
package.json
Normal file
53
package.json
Normal file
@ -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": {}
|
||||||
|
}
|
||||||
|
}
|
||||||
9656
pnpm-lock.yaml
generated
Normal file
9656
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
3
readme.hints.md
Normal file
3
readme.hints.md
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
# Project Readme Hints
|
||||||
|
|
||||||
|
This is the initial readme hints file.
|
||||||
7
readme.md
Normal file
7
readme.md
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
# @bellini.io/bellini
|
||||||
|
|
||||||
|
the bellini main application
|
||||||
|
|
||||||
|
## How to create the docs
|
||||||
|
|
||||||
|
To create docs run gitzone aidoc.
|
||||||
8
test/test.ts
Normal file
8
test/test.ts
Normal file
@ -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();
|
||||||
2
ts/bellini.plugins.ts
Normal file
2
ts/bellini.plugins.ts
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
const removeme = {};
|
||||||
|
export { removeme };
|
||||||
3
ts/index.ts
Normal file
3
ts/index.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import * as plugins from './bellini.plugins.js';
|
||||||
|
|
||||||
|
export let demoExport = 'Hi there! :) This is an exported string';
|
||||||
8
ts_api/00_commitinfo_data.ts
Normal file
8
ts_api/00_commitinfo_data.ts
Normal file
@ -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'
|
||||||
|
}
|
||||||
58
ts_api/api.classes.belliniclient.ts
Normal file
58
ts_api/api.classes.belliniclient.ts
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
15
ts_api/api.plugins.ts
Normal file
15
ts_api/api.plugins.ts
Normal file
@ -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 };
|
||||||
1
ts_api/index.ts
Normal file
1
ts_api/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export * from './api.classes.belliniclient.js';
|
||||||
12
ts_api/tspublish.json
Normal file
12
ts_api/tspublish.json
Normal file
@ -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"
|
||||||
|
]
|
||||||
|
}
|
||||||
8
ts_catalog/00_commitinfo_data.ts
Normal file
8
ts_catalog/00_commitinfo_data.ts
Normal file
@ -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'
|
||||||
|
}
|
||||||
98
ts_catalog/elements/bellini-adsense.ts
Normal file
98
ts_catalog/elements/bellini-adsense.ts
Normal file
@ -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({});
|
||||||
|
}
|
||||||
|
}
|
||||||
377
ts_catalog/elements/bellini-articlebox.ts
Normal file
377
ts_catalog/elements/bellini-articlebox.ts
Normal file
@ -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');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
251
ts_catalog/elements/bellini-articlegrid.ts
Normal file
251
ts_catalog/elements/bellini-articlegrid.ts
Normal file
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
234
ts_catalog/elements/bellini-articlelist.ts
Normal file
234
ts_catalog/elements/bellini-articlelist.ts
Normal file
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
242
ts_catalog/elements/bellini-content.ts
Normal file
242
ts_catalog/elements/bellini-content.ts
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
351
ts_catalog/elements/belllini-header.ts
Normal file
351
ts_catalog/elements/belllini-header.ts
Normal file
@ -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>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
6
ts_catalog/elements/index.ts
Normal file
6
ts_catalog/elements/index.ts
Normal file
@ -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';
|
||||||
6
ts_catalog/helpers/articlehelpers.ts
Normal file
6
ts_catalog/helpers/articlehelpers.ts
Normal file
@ -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;
|
||||||
|
};
|
||||||
5
ts_catalog/helpers/index.ts
Normal file
5
ts_catalog/helpers/index.ts
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import * as articlehelpers from './articlehelpers.js';
|
||||||
|
|
||||||
|
export {
|
||||||
|
articlehelpers
|
||||||
|
}
|
||||||
2
ts_catalog/index.ts
Normal file
2
ts_catalog/index.ts
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
export * from './elements/index.js';
|
||||||
|
export { commitinfo } from './00_commitinfo_data.js';
|
||||||
2
ts_catalog/pages/index.ts
Normal file
2
ts_catalog/pages/index.ts
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
export * from './page2.js';
|
||||||
|
export * from './page1.js';
|
||||||
8
ts_catalog/pages/page1.ts
Normal file
8
ts_catalog/pages/page1.ts
Normal file
@ -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>
|
||||||
|
`;
|
||||||
5
ts_catalog/pages/page2.ts
Normal file
5
ts_catalog/pages/page2.ts
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import { html } from "@design.estate/dees-element";
|
||||||
|
|
||||||
|
export const page2 = () => html`
|
||||||
|
<lele-statusbar></lele-statusbar>
|
||||||
|
`;
|
||||||
13
ts_catalog/tspublish.json
Normal file
13
ts_catalog/tspublish.json
Normal file
@ -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"
|
||||||
|
]
|
||||||
|
}
|
||||||
27
ts_interfaces/bellini-interfaces.objects.ts
Normal file
27
ts_interfaces/bellini-interfaces.objects.ts
Normal file
@ -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;
|
||||||
|
}
|
||||||
9
ts_interfaces/bellini-interfaces.plugins.ts
Normal file
9
ts_interfaces/bellini-interfaces.plugins.ts
Normal file
@ -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 };
|
||||||
34
ts_interfaces/bellini-interfaces.requests.ts
Normal file
34
ts_interfaces/bellini-interfaces.requests.ts
Normal file
@ -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[];
|
||||||
|
};
|
||||||
|
}
|
||||||
2
ts_interfaces/index.ts
Normal file
2
ts_interfaces/index.ts
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
export * from './bellini-interfaces.objects';
|
||||||
|
export * from './bellini-interfaces.requests';
|
||||||
13
ts_interfaces/tspublish.json
Normal file
13
ts_interfaces/tspublish.json
Normal file
@ -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"
|
||||||
|
]
|
||||||
|
}
|
||||||
17
tsconfig.json
Normal file
17
tsconfig.json
Normal file
@ -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"
|
||||||
|
]
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user