Refactor

src/page/content/content.scss

@@ -2,24 +2,4 @@
 
 .content {
   margin-top: $small-margin;
-
-  * {
-    margin-top: $line-height;
-  }
-
-  p {
-    text-align: left;
-  }
-}
-
-.image-container {
-  font-size: 0;
-  box-shadow: inset $shadow1, inset $shadow2;
-  pointer-events: none;
-  cursor: pointer;
-  img {
-    pointer-events: all;
-    position: relative;
-    z-index: -2;
-  }
 }

src/page/content/content.ts

@@ -1,58 +1,14 @@
-import { Content, TypedContent } from '../../model/content';
 import './content.scss';
 import { PageElement } from '../../framework/page-element';
 import { createElement } from '../../framework/helper/create-element';
-import { html } from '../../model/misc';
-import { last } from '../../framework/helper/last';
+import { Content } from '../../model/portfolio';
 
 export class PageContent extends PageElement {
-  private static isTyped(content): content is TypedContent {
-    return (content as TypedContent).type !== undefined;
-  }
-
-  public static parseTypedContent(
-    element: TypedContent,
-    disableInnerShadow?: boolean
-  ): html {
-    if (element.type === 'a') {
-      return `<a href="${element.href}" rel="noreferrer" target="_blank"> ${element.text} </a>`;
-    }
-    if (element.type === 'video') {
-      return `
-          <video ${element.options}>
-              <source src="${element.webm}" type="video/webm"/>
-              <source src="${element.mp4}" type="video/mp4"/>
-          </video>
-      `;
-    }
-    if (element.type === 'img') {
-      return `
-            ${!disableInnerShadow ? `<div class="image-container">` : ''}
-                <img 
-                    srcset="${element.image.srcSet}" 
-                    src="${last(element.image.images).path}" 
-                    alt="${element.alt}"
-                />
-            ${!disableInnerShadow ? `</div>` : ''}
-      `;
-    }
-
-    throw new Error('Unhandled type.');
-  }
-
   public constructor(content: Content) {
-    super();
-
-    this.setElement(
+    super(
       createElement(`
         <div class="content">
-            ${content
-              .map(element =>
-                PageContent.isTyped(element)
-                  ? PageContent.parseTypedContent(element)
-                  : `<p>${element}</p>`
-              )
-              .join('\n')}
+            ${content.map(element => element.toHTML()).join('\n')}
         </div>
       `)
     );