jlengrand/briques-poster
1
0
Fork 0
mirror of https://github.com/les-briques-du-web/briques-poster.git synced 2026-03-10 08:51:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Trying to do json now

Browse Source
This commit is contained in:
Julien Lengrand-Lambert
2021-05-02 19:02:45 +02:00
parent b61131d53a
commit 59672383ec
7 changed files with 77 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
assets/speaker.json Normal file
View File

@@ -0,0 +1,5 @@
{
"title": "Briques du Web",
"episode" : "S01E04"
}

20
package-lock.json generated
View File

@@ -29,6 +29,7 @@
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"rollup": "^2.46.0", "rollup": "^2.46.0",
"rollup-plugin-copy": "^3.4.0", "rollup-plugin-copy": "^3.4.0",
"rollup-plugin-json": "^4.0.0",
"tslib": "^2.2.0", "tslib": "^2.2.0",
"typescript": "^4.2.4" "typescript": "^4.2.4"
} }
@@ -9567,6 +9568,16 @@
"node": ">= 4" "node": ">= 4"
} }
}, },
"node_modules/rollup-plugin-json": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/rollup-plugin-json/-/rollup-plugin-json-4.0.0.tgz",
"integrity": "sha512-hgb8N7Cgfw5SZAkb3jf0QXii6QX/FOkiIq2M7BAQIEydjHvTyxXHQiIzZaTFgx1GK0cRCHOCBHIyEkkLdWKxow==",
"deprecated": "This module has been deprecated and is no longer maintained. Please use @rollup/plugin-json.",
"dev": true,
"dependencies": {
"rollup-pluginutils": "^2.5.0"
}
},
"node_modules/rollup-plugin-terser": { "node_modules/rollup-plugin-terser": {
"version": "7.0.2", "version": "7.0.2",
"resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz", "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz",
@@ -19041,6 +19052,15 @@
} }
} }
}, },
"rollup-plugin-json": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/rollup-plugin-json/-/rollup-plugin-json-4.0.0.tgz",
"integrity": "sha512-hgb8N7Cgfw5SZAkb3jf0QXii6QX/FOkiIq2M7BAQIEydjHvTyxXHQiIzZaTFgx1GK0cRCHOCBHIyEkkLdWKxow==",
"dev": true,
"requires": {
"rollup-pluginutils": "^2.5.0"
}
},
"rollup-plugin-terser": { "rollup-plugin-terser": {
"version": "7.0.2", "version": "7.0.2",
"resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz", "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz",

1
package.json
View File

@@ -17,6 +17,7 @@
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"rollup": "^2.46.0", "rollup": "^2.46.0",
"rollup-plugin-copy": "^3.4.0", "rollup-plugin-copy": "^3.4.0",
"rollup-plugin-json": "^4.0.0",
"tslib": "^2.2.0", "tslib": "^2.2.0",
"typescript": "^4.2.4" "typescript": "^4.2.4"
}, },

2
rollup.config.js
View File

@@ -1,5 +1,6 @@
import merge from 'deepmerge'; import merge from 'deepmerge';
import copy from 'rollup-plugin-copy' import copy from 'rollup-plugin-copy'
import json from 'rollup-plugin-json';
// use createSpaConfig for bundling a Single Page App // use createSpaConfig for bundling a Single Page App
import { createSpaConfig } from '@open-wc/building-rollup'; import { createSpaConfig } from '@open-wc/building-rollup';
@@ -32,6 +33,7 @@ export default merge(baseConfig, {
// set flatten to false to preserve folder structure // set flatten to false to preserve folder structure
flatten: false, flatten: false,
}), }),
json()
], ],
// alternatively, you can use your JS as entrypoint for rollup and // alternatively, you can use your JS as entrypoint for rollup and

85
src/BriquesPoster.ts
View File

@@ -1,11 +1,55 @@
import {LitElement, html, css} from 'lit'; import {LitElement, html, css} from 'lit';
import {customElement, property} from 'lit/decorators.js'; import {customElement, property} from 'lit/decorators.js';
import speaker from '../assets/speaker.json';
@customElement("briques-poster") @customElement("briques-poster")
export class BriquesPoster extends LitElement { export class BriquesPoster extends LitElement {
@property() title = 'Briques du Web'; @property() title = 'Briques du Web';
@property() episode = speaker.episode;
render() {
return html`
<main>
<div class="left-side">
<div class="logo">
<img src="assets/logo_color_text_square.png">
</div>
<div class="whichwhen">
<div class="which">
<h2>${this.episode}</h2>
</div>
<div class="when">
<h4 class="space">Mardi 27/04</h4>
<h4>12h15</h4>
</div>
</div>
</div>
<div class="right-side">
<div class="title">
<h5>Design Systems, autonomie et créativité</h5>
<h6>Retour d'expérience de Decathlon</h6>
</div>
<div class="speaker">
<div class="speakerface">
<img src="assets/speakers/laurent_thiebault.png">
</div>
<div class="speakerinfo">
<h5>Laurent Thiebault</h5>
<h5>@lauthieb</h5>
</div>
</div>
<div class="twitch">
<h6>https://www.twitch.tv/rdvspeakers</h6>
</div>
</div>
</main>
`;
}
static styles = css` static styles = css`
h2, h3, h4, h5, h6, h7{ h2, h3, h4, h5, h6, h7{
@@ -125,45 +169,4 @@ export class BriquesPoster extends LitElement {
justify-content: center; justify-content: center;
} }
`; `;
render() {
return html`
<main>
<div class="left-side">
<div class="logo">
<img src="assets/logo_color_text_square.png">
</div>
<div class="whichwhen">
<div class="which">
<h2>S01E04</h2>
</div>
<div class="when">
<h4 class="space">Mardi 27/04</h4>
<h4>12h15</h4>
</div>
</div>
</div>
<div class="right-side">
<div class="title">
<h5>Design Systems, autonomie et créativité</h5>
<h6>Retour d'expérience de Decathlon</h6>
</div>
<div class="speaker">
<div class="speakerface">
<img src="assets/speakers/laurent_thiebault.png">
</div>
<div class="speakerinfo">
<h5>Laurent Thiebault</h5>
<h5>@lauthieb</h5>
</div>
</div>
<div class="twitch">
<h6>https://www.twitch.tv/rdvspeakers</h6>
</div>
</div>
</main>
`;
}
} }

1
tsconfig.json
View File

@@ -13,6 +13,7 @@
"outDir": "out-tsc", "outDir": "out-tsc",
"sourceMap": true, "sourceMap": true,
"inlineSources": true, "inlineSources": true,
"resolveJsonModule": true,
"rootDir": "./", "rootDir": "./",
"incremental": true "incremental": true
}, },

4
typings.d.ts vendored Normal file
View File

@@ -0,0 +1,4 @@
declare module "*.json" {
const value: any;
export default value;
}