fix: fix merge conflicts with develop

Author: Sam H

CHANGELOG.md

@@ -1,7 +1,7 @@
 {
   "name": "@openforge/main-website",
   "private": true,
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "The official website for OpenForge",
   "files": [
     "dist/"

package.json

@@ -46,8 +46,6 @@ rules:
     - 2
     -
       style: lowercase
-  indentation:
-    - 2
     -
       size: 2
   single-line-per-selector: 1

sass-lint.yml

@@ -10,6 +10,9 @@ import '@stencil/router';
 import '@stencil/state-tunnel';
 
 
+import {
+  EventEmitter,
+} from '@stencil/core';
 import {
   MatchResults,
   RouterHistory,
@@ -50,6 +53,12 @@ declare global {
       'src': string;
     }
 
+    interface LazyImg {
+      'alt': string;
+      'src': string;
+      'width': number;
+    }
+
     interface AppInput {
       'id': string;
       'label': string;
@@ -193,6 +202,14 @@ declare global {
     };
 
 
+    interface HTMLLazyImgElement extends StencilComponents.LazyImg, HTMLStencilElement {}
+
+    var HTMLLazyImgElement: {
+      prototype: HTMLLazyImgElement;
+      new (): HTMLLazyImgElement;
+    };
+    
+
     interface HTMLAppInputElement extends StencilComponents.AppInput, HTMLStencilElement {}
 
     var HTMLAppInputElement: {
@@ -368,6 +385,7 @@ declare global {
     'app-cta': JSXElements.AppCtaAttributes;
     'app-footer': JSXElements.AppFooterAttributes;
     'app-img': JSXElements.AppImgAttributes;
+    'lazy-img': JSXElements.LazyImgAttributes;
     'app-input': JSXElements.AppInputAttributes;
     'app-members': JSXElements.AppMembersAttributes;
     'app-nav-header': JSXElements.AppNavHeaderAttributes;
@@ -413,6 +431,13 @@ declare global {
       'src'?: string;
     }
 
+    export interface LazyImgAttributes extends HTMLAttributes {
+      'alt'?: string;
+      'onLazyImgloaded'?: (event: CustomEvent<HTMLImageElement>) => void;
+      'src'?: string;
+      'width'?: number;
+    }
+
     export interface AppInputAttributes extends HTMLAttributes {
       'id'?: string;
       'label'?: string;
@@ -532,6 +557,7 @@ declare global {
     'app-cta': HTMLAppCtaElement
     'app-footer': HTMLAppFooterElement
     'app-img': HTMLAppImgElement
+    'lazy-img': HTMLLazyImgElement
     'app-input': HTMLAppInputElement
     'app-members': HTMLAppMembersElement
     'app-nav-header': HTMLAppNavHeaderElement
@@ -560,6 +586,7 @@ declare global {
     'app-cta': HTMLAppCtaElement;
     'app-footer': HTMLAppFooterElement;
     'app-img': HTMLAppImgElement;
+    'lazy-img': HTMLLazyImgElement;
     'app-input': HTMLAppInputElement;
     'app-members': HTMLAppMembersElement;
     'app-nav-header': HTMLAppNavHeaderElement;

src/components.d.ts

@@ -68,6 +68,6 @@ export class Img {
 
   render() {
     this.changeImageFormat();
-    return <img class={{ fit: this.fit }} src={this.loadSrc} alt={this.alt} decoding="async" />;
+    return <lazy-img class={{ fit: this.fit }} src={this.loadSrc} alt={this.alt} />;
   }
 }

src/components/app-img/app-img.tsx

@@ -0,0 +1,86 @@
+import { Component, Element, Event, EventEmitter, Prop, State } from '@stencil/core';
+
+/*
+  You can use this component to lazy load below the fold images to improve load time.
+  Below the fold images are images that are not seen by the user until they have started to scroll.
+  Instead of loading all these images up front before the user even sees them, which will eat up
+  network bandwith, we can use this component to put off loading these images until the user has
+  scrolled to where that image is in your PWA.
+  To use this component use the following markup: <lazy-img src={/path/to/img} alt={alt text for img}></lazy-img>
+*/
+
+@Component({
+  tag: 'lazy-img',
+  // styleUrl: 'lazy-img.scss'
+})
+export class LazyImg {
+  @Element() el: HTMLElement;
+
+  @Prop() src: string;
+  @Prop() alt: string;
+  @Prop() width: number;
+
+  @State() oldSrc: string;
+
+  @Event() lazyImgloaded: EventEmitter<HTMLImageElement>;
+
+  image: HTMLImageElement;
+  io: IntersectionObserver | null;
+
+  componentDidLoad() {
+    this.addIntersectionObserver();
+  }
+
+  componentDidUnload() {
+    this.removeIntersectionObserver();
+  }
+
+  componentWillUpdate() {
+    if (this.src !== this.oldSrc) {
+      this.addIntersectionObserver();
+    }
+    this.oldSrc = this.src;
+  }
+
+  handleImage() {
+    console.log('a');
+    const image = this.image;
+    image.setAttribute('src', this.src || '');
+    image.onload = () => {
+      image.removeAttribute('data-src');
+      this.lazyImgloaded.emit(image);
+    };
+  }
+
+  addIntersectionObserver() {
+    if (!this.src) {
+      return;
+    }
+    if ('IntersectionObserver' in window) {
+      this.io = new IntersectionObserver(data => {
+        // because there will only ever be one instance
+        // of the element we are observing
+        // we can just use data[0]
+        if (data[0].isIntersecting) {
+          this.handleImage();
+          this.removeIntersectionObserver();
+        }
+      });
+      this.io.observe(this.image);
+    } else {
+      // fall back to just loading the image for Safari and IE
+      this.handleImage();
+    }
+  }
+
+  removeIntersectionObserver() {
+    if (this.io) {
+      this.io.disconnect();
+      this.io = null;
+    }
+  }
+
+  render() {
+    return <img ref={el => (this.image = el as HTMLImageElement)} data-src={this.src} alt={this.alt} width={this.width} />;
+  }
+}

src/components/app-img/lazy-img.tsx

@@ -6,11 +6,13 @@
     text-align: center;
   }
 
-  img {
-    max-height: 400px;
-    @include media-breakpoint-down(sm) {
-      padding: 15px 30px 30px;
-      max-height: 200px;
+  app-img {
+    img {
+      max-height: 400px;
+      @include media-breakpoint-down(sm) {
+        padding: 15px 30px 30px;
+        max-height: 200px;
+      }
     }
   }
 

src/components/content-graphic/content-graphic.scss

@@ -12,10 +12,12 @@
       text-align: center;
     }
 
-    img {
-      height: auto;
-      margin: 7rem 0 2rem;
-      width: 35%;
+    app-img {
+      img {
+        height: auto;
+        margin: 7rem 0 2rem;
+        width: 35%;
+      }
     }
   }
 }

src/pages/app-404/app-404.scss

@@ -9,18 +9,12 @@ export class App404 {
     return (
       <div class="no-page">
         <section class="container">
-          <img src="/assets/forge.png" />
+          <app-img src="/assets/forge.png" />
 
-          <p>
-            {' '}
-            Utoh, we've detected that this page does not exist, or something
-            else has gone wrong!{' '}
-          </p>
+          <p> Utoh, we've detected that this page does not exist, or something else has gone wrong! </p>
 
           <p>
-            It must be something to do with our awesomeness, the coolness of our
-            apps, or some other equally awesome thing. Don't worry, we'll fix it
-            soon but in the mean time feel free to email us at{' '}
+            It must be something to do with our awesomeness, the coolness of our apps, or some other equally awesome thing. Don't worry, we'll fix it soon but in the mean time feel free to email us at{' '}
             <a href="mailto:hello@openforge.io">hello@openforge.io</a>!
           </p>