Working but shaky

assets/speaker.json

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

index.html

@@ -9,37 +9,139 @@
   <base href="/">
 
   <style>
-    @font-face {
-      font-family: "Chawp";
-      src: url("assets/chawp.ttf") format("truetype");
-    }
-
-    @font-face {
-      font-family: "aleo";
-      src: url("assets/aleo-regular-webfont.ttf") format("truetype");
-    }
-
     @font-face {
       font-family: "Snowy_Night";
       src: url("assets/Snowy_Night.ttf") format("truetype");
     }
 
-    @font-face {
-      font-family: "Cutie_Shark";
-      src: url("assets/Cutie_Shark.ttf") format("truetype");
+    html {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
     }
 
-
-
-    html,
     body{
       width: 1920px;
       height: 1080px;
+    }
+
+    h2, h3, h4, h5, h6{
       margin: 0;
       padding: 0;
-      /*font-family: sans-serif;*/
-      /*background-color: #ededed;*/
     }
+
+    briques-poster {
+      text-align: center;
+      font-size : 6rem;
+      font-family : Snowy_Night;
+      color: white;
+
+      display: inline-block;
+      width: 1920px;
+      height: 1080px;
+      background-image: url("assets/brick5.jpeg");
+      background-repeat: repeat;
+      background-size: auto;
+    }
+
+    main {
+      display: flex;
+      width: 100%;
+      height:100%;
+    }
+
+    .left-side{
+      flex: 0 0 40%;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .right-side{
+      flex: 0 0 60%;
+      display:flex;
+      flex-direction: column;
+    }
+
+    .logo{
+      flex: 0 0 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .logo img{
+      width:80%;
+      object-fit:contain;
+    }
+
+    .whichwhen{
+      flex: 0 0 50%;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .which{
+      flex: 0 0 30%;
+      display:flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .when{
+      flex: 0 0 70%;
+    }
+
+    .when .space{
+      margin-top:5%;
+    }
+
+    .title{
+      flex: 0 0 40%;
+
+      display:flex;
+      flex-direction:column;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .speaker{
+      flex: 0 0 30%;
+      display:flex;
+      flex-direction:row;
+    }
+
+    .speakerface{
+      flex: 0 0 30%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .speakerface img{
+      max-width:80%;
+      max-height:80%;
+      border-radius: 50%;
+      border: 10px solid white;
+      background-color: white;
+    }
+
+    .speakerinfo{
+      flex: 0 0 70%;
+
+      display:flex;
+      flex-direction:column;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .twitch{
+      flex: 0 0 30%;
+      display:flex;
+      align-items: center;
+      justify-content: center;
+    }
+
   </style>
   <title>briques-posters</title>
 </head>
@@ -48,11 +150,23 @@
   <briques-poster></briques-poster>
 
   <script type="module" src="./out-tsc/src/BriquesPoster.js"></script>
-  <script src="assets/html2canvas.min.js"></script>
+  <script type="module" src="./out-tsc/src/CanvasStuff.js"></script>
+  <script src="assets/dom-to-image.min.js"></script>
   <script>
-    html2canvas(document.body).then(canvas => {
-      document.body.appendChild(canvas)
+    setTimeout(() => {
+      domtoimage.toPng(document.body)
+        // @ts-ignore 😬
+        .then((dataUrl) => {
+          const img = new Image();
+          img.src = dataUrl;
+          document.body.appendChild(img);
+        })
+        // @ts-ignore 😬
+        .catch((error) => {
+          console.error('oops, something went wrong!', error);
         });
+
+    }, 1000);
   </script>
 </body>
 

package-lock.json

@@ -9,6 +9,8 @@
       "version": "0.0.0",
       "license": "MIT",
       "dependencies": {
+        "@types/dom-to-image": "^2.6.2",
+        "dom-to-image": "^2.6.0",
         "html2canvas": "^1.0.0-rc.7",
         "lit": "2.0.0-rc.1"
       },
@@ -1930,6 +1932,11 @@
       "integrity": "sha512-bWG5wapaWgbss9E238T0R6bfo5Fh3OkeoSt245CM7JJwVwpw6MEBCbIxLq5z8KzsE3uJhzcIuQkyiZmzV3M/Dw==",
       "dev": true
     },
+    "node_modules/@types/dom-to-image": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@types/dom-to-image/-/dom-to-image-2.6.2.tgz",
+      "integrity": "sha512-Yxbwmz/glNwRIXfBI8efG2bgIxrFAKV1MdfpqbUDq25ULMot7U7FYXPiso5G8DlBExSP+AakuG0mNus9yw4RZQ=="
+    },
     "node_modules/@types/estree": {
       "version": "0.0.39",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
@@ -4576,6 +4583,11 @@
         "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
       }
     },
+    "node_modules/dom-to-image": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/dom-to-image/-/dom-to-image-2.6.0.tgz",
+      "integrity": "sha1-ilA2CAiMh7HCL5A0rgMuGJiVWGc="
+    },
     "node_modules/dom5": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dom5/-/dom5-3.0.1.tgz",
@@ -13178,6 +13190,11 @@
       "integrity": "sha512-bWG5wapaWgbss9E238T0R6bfo5Fh3OkeoSt245CM7JJwVwpw6MEBCbIxLq5z8KzsE3uJhzcIuQkyiZmzV3M/Dw==",
       "dev": true
     },
+    "@types/dom-to-image": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@types/dom-to-image/-/dom-to-image-2.6.2.tgz",
+      "integrity": "sha512-Yxbwmz/glNwRIXfBI8efG2bgIxrFAKV1MdfpqbUDq25ULMot7U7FYXPiso5G8DlBExSP+AakuG0mNus9yw4RZQ=="
+    },
     "@types/estree": {
       "version": "0.0.39",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
@@ -15242,6 +15259,11 @@
         "entities": "^2.0.0"
       }
     },
+    "dom-to-image": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/dom-to-image/-/dom-to-image-2.6.0.tgz",
+      "integrity": "sha1-ilA2CAiMh7HCL5A0rgMuGJiVWGc="
+    },
     "dom5": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dom5/-/dom5-3.0.1.tgz",

package.json

@@ -36,6 +36,8 @@
   "author": "briques-posters",
   "license": "MIT",
   "dependencies": {
+    "@types/dom-to-image": "^2.6.2",
+    "dom-to-image": "^2.6.0",
     "html2canvas": "^1.0.0-rc.7",
     "lit": "2.0.0-rc.1"
   },

rollup.config.js

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

src/BriquesPoster.ts

@@ -1,10 +1,9 @@
 import { LitElement, html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { speaker } from './speaker';
+import { speaker } from './speaker.js';
 
-@customElement("briques-poster")
+@customElement('briques-poster')
 export class BriquesPoster extends LitElement {
-
   @property() episode = speaker.episode;
 
   @property() time = speaker.time;
@@ -13,12 +12,19 @@ export class BriquesPoster extends LitElement {
 
   @property() speaker = speaker;
 
+  createRenderRoot() {
+    return this;
+  }
+
   render() {
     return html`
       <main>
         <div class="left-side">
           <div class="logo">
-              <img src="assets/logo_color_text_square.png">
+            <img
+              alt="logo des briques"
+              src="assets/logo_color_text_square.png"
+            />
           </div>
           <div class="whichwhen">
             <div class="which">
@@ -29,7 +35,6 @@ export class BriquesPoster extends LitElement {
               <h4>${this.speaker.time}</h4>
             </div>
           </div>
-
         </div>
         <div class="right-side">
           <div class="title">
@@ -38,7 +43,10 @@ export class BriquesPoster extends LitElement {
           </div>
           <div class="speaker">
             <div class="speakerface">
-              <img src="assets/speakers/${this.speaker.image}">
+              <img
+                alt="tête de notre speaker"
+                src="assets/speakers/${this.speaker.image}"
+              />
             </div>
             <div class="speakerinfo">
               <h5>${this.speaker.name}</h5>
@@ -48,15 +56,18 @@ export class BriquesPoster extends LitElement {
           <div class="twitch">
             <h6>https://www.twitch.tv/rdvspeakers</h6>
           </div>
-
         </div>
       </main>
     `;
   }
 
   static styles = css`
-
-    h2, h3, h4, h5, h6, h7{
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    h7 {
       margin: 0;
       padding: 0;
     }
@@ -64,14 +75,13 @@ export class BriquesPoster extends LitElement {
     :host {
       text-align: center;
       font-size: 6rem;
-      // font-family: "Comic Sans MS", "Comic Sans", cursive;
       font-family: Snowy_Night;
       color: white;
 
       display: inline-block;
       width: 1920px;
       height: 1080px;
-      background-image: url("assets/brick5.jpeg");
+      background-image: url('assets/brick5.jpeg');
       background-repeat: repeat;
       background-size: auto;
       opacity: 0.8;

src/canvasStuff.ts

@@ -1,5 +1,13 @@
-import html2canvas from 'html2canvas';
-
-html2canvas(document.body).then((canvas) => {
-  document.body.appendChild(canvas);
-});
+// import domtoimage from 'dom-to-image';
+//
+// domtoimage.toPng(document.body)
+//   // @ts-ignore 😬
+//   .then((dataUrl) => {
+//     const img = new Image();
+//     img.src = dataUrl;
+//     document.body.appendChild(img);
+//   })
+//   // @ts-ignore 😬
+//   .catch((error) => {
+//     console.error('oops, something went wrong!', error);
+//   });

typings.d.ts

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