Extract non-data and update description

src/page/footer/footer.html.ts

@@ -5,13 +5,15 @@ import { html } from '../../types/html';
 import { url } from '../../types/url';
 import './footer.scss';
 
+// @ts-ignore: injected by webpack
+const LAST_EDIT = new Date(__CURRENT_DATE__);
+
 export const Footer = ({
   title,
   email,
   curriculaVitae,
   linkedin,
   lastEditText,
-  lastEdit,
 }: {
   title: string;
   email: url;
@@ -21,7 +23,6 @@ export const Footer = ({
     url: url;
   }>;
   lastEditText: string;
-  lastEdit: Date;
 }): html => `
   <footer id="footer">
     <h2>${title}</h2>
@@ -46,7 +47,7 @@ export const Footer = ({
       </li>
     </ul>
     <aside class="other">
-      <p>${lastEditText} <time datetime="${lastEdit.toISOString()}">${lastEdit.toLocaleDateString()}</time></p>
+      <p>${lastEditText} <time datetime="${LAST_EDIT.toISOString()}">${LAST_EDIT.toLocaleDateString()}</time></p>
     </aside>
   </footer>
 `;

src/page/header/header.ts

@@ -1,5 +1,6 @@
 import { createElement } from '../../helper/create-element';
-import { html } from '../../types/html';
+import { ResponsiveImage } from '../../types/responsive-image';
+import { Image } from '../basics/image/image.html';
 import { PageElement } from '../page-element';
 import { generate } from './header.html';
 import { PageThemeSwitcher } from './theme-switcher/theme-switcher';
@@ -7,14 +8,28 @@ import { PageThemeSwitcher } from './theme-switcher/theme-switcher';
 export class PageHeader extends PageElement {
   public constructor({
     name,
-    photo,
+    imageWebP,
+    imageAltText,
     about,
   }: {
     name: string;
-    photo: html;
+    imageWebP: ResponsiveImage;
+    imageAltText: string;
     about: Array<string>;
   }) {
-    super(createElement(generate({ name, about, photo })));
+    super(
+      createElement(
+        generate({
+          name,
+          about,
+          photo: Image({
+            imageWebP,
+            alt: imageAltText,
+            imageScreenRatio: 0.2,
+          }),
+        })
+      )
+    );
     this.attachElement(new PageThemeSwitcher());
   }
 }