Remove "framework"

src/page/basics/anchor/anchor.html.ts

@@ -0,0 +1,10 @@
+import './anchor.scss';
+import { html } from '../../../types/html';
+
+export const generate = ({ href, text }: { href: string; text: string }): html => `
+  <a class="primitive-anchor" 
+    href="${href}"
+    target="_blank"
+  >${text}</a>
+  <br/>
+`;

src/page/basics/anchor/anchor.scss

@@ -0,0 +1,3 @@
+.primitive-anchor {
+  margin-top: var(--line-height);
+}

src/page/basics/anchor/anchor.ts

@@ -0,0 +1,10 @@
+import { PageElement } from '../../page-element';
+import { createElement } from '../../../helper/create-element';
+import { generate } from './anchor.html';
+import { url } from '../../../types/url';
+
+export class Anchor extends PageElement {
+  public constructor(href: url, text: string) {
+    super(createElement(generate({ href, text })));
+  }
+}

src/page/basics/image/image.html.ts

@@ -0,0 +1,25 @@
+import './image.scss';
+import { last } from '../../../helper/last';
+import { ResponsiveImage } from '../../../types/responsive-image';
+import { html } from '../../../types/html';
+
+export const generate = ({
+  sizes,
+  image,
+  alt,
+  container,
+}: {
+  sizes: string;
+  image: ResponsiveImage;
+  alt: string;
+  container: boolean;
+}): html => `
+  ${container ? `<div class="figure-container">` : ''}
+  <img tabindex="0"
+      srcset="${image.srcSet}" 
+      sizes="${sizes}"
+      src="${last(image.images)?.path}" 
+      alt="${alt}"
+  />
+  ${container ? `</div>` : ''}
+`;

src/page/basics/image/image.ts

@@ -0,0 +1,24 @@
+import { PageElement } from '../../page-element';
+import { createElement } from '../../../helper/create-element';
+import { generate } from './image.html';
+import { last } from '../../../helper/last';
+import { ResponsiveImage } from '../../../types/responsive-image';
+
+export class Image extends PageElement {
+  private static readonly imageScreenRatio = 0.8;
+
+  public constructor(image: ResponsiveImage, alt: string, container = true) {
+    super(
+      createElement(generate({ image, alt, container, sizes: Image.getSizes(image) }))
+    );
+  }
+
+  private static getSizes(image: ResponsiveImage): string {
+    return (
+      image.images
+        .slice(0, -1)
+        .map(d => `(max-width: ${d.width / Image.imageScreenRatio}px) ${d.width}px,`)
+        .join('\n') + `\n${last(image.images).width}px`
+    );
+  }
+}

src/page/basics/text/text.html.ts

@@ -0,0 +1,6 @@
+import './text.scss';
+import { html } from '../../../types/html';
+
+export const generate = (text: string): html => `
+  <p class="primitive-text">${text}</p>
+`;

src/page/basics/text/text.scss

@@ -0,0 +1,4 @@
+.primitive-text {
+  text-align: left;
+  margin-top: var(--line-height);
+}

src/page/basics/text/text.ts

@@ -0,0 +1,9 @@
+import { PageElement } from '../../page-element';
+import { createElement } from '../../../helper/create-element';
+import { generate } from './text.html';
+
+export class Text extends PageElement {
+  public constructor(text: string) {
+    super(createElement(generate(text)));
+  }
+}

src/page/basics/video/video.html.ts

@@ -0,0 +1,24 @@
+import './video.scss';
+import { url } from '../../../types/url';
+import { html } from '../../../types/html';
+
+export const generate = ({
+  poster,
+  options,
+  webm,
+  mp4,
+  container,
+}: {
+  poster: url;
+  options: string;
+  webm: url;
+  mp4: url;
+  container: boolean;
+}): html => `
+  ${container ? `<div class="figure-container">` : ''}
+    <video ${options} ${poster ? `poster="${poster}` : ''}" >
+        <source src="${webm}" type="video/webm"/>
+        <source src="${mp4}" type="video/mp4"/>
+    </video>
+  ${container ? `</div>` : ''}
+`;

src/page/basics/video/video.ts

@@ -0,0 +1,16 @@
+import { PageElement } from '../../page-element';
+import { createElement } from '../../../helper/create-element';
+import { generate } from './video.html';
+import { url } from '../../../types/url';
+
+export class Video extends PageElement {
+  public constructor(
+    poster: url,
+    mp4: url,
+    webm: url,
+    options?: string,
+    container = true
+  ) {
+    super(createElement(generate({ poster, mp4, webm, options, container })));
+  }
+}