Fix Rehydration of SVG shapes (mainmatter#700)

* use explicit shape ids with sensible defaults

* remove mistyped CSS rule

* remove critical

README.md

@@ -7,8 +7,7 @@ The source code for [https://simplabs.com](https://simplabs.com).
 We use [Glimmer.js](https://glimmerjs.com) for rendering,
 [navigo](https://github.com/krasimir/navigo) for client-side routing and
 [CSS Blocks](https://css-blocks.com) for CSS. Pages are statically pre-rendered
-using [Puppeteer](https://pptr.dev) and we inject critical CSS with
-[critical](https://github.com/addyosmani/critical).
+using [Puppeteer](https://pptr.dev).
 
 ## Installation
 
@@ -43,7 +42,6 @@ Chrome Inspector to do so.**
 * [navigo](https://github.com/krasimir/navigo)
 * [CSS Blocks](https://css-blocks.com)
 * [Puppeteer](https://pptr.dev)
-* [critical](https://github.com/addyosmani/critical)
 
 ## Copyright
 

package.json

@@ -50,7 +50,6 @@
     "broccoli-typescript-compiler": "^4.1.0",
     "clean-css": "^4.2.1",
     "colors": "^1.3.3",
-    "critical": "^1.3.4",
     "dateformat": "^3.0.3",
     "ember-cli": "^3.7.1",
     "ember-cli-dependency-checker": "^2.0.1",

scripts/prerender.js

@@ -2,7 +2,6 @@ const path = require('path');
 const fs = require('fs-extra');
 const express = require('express');
 const puppeteer = require('puppeteer');
-const critical = require('critical');
 const colors = require('colors');
 const jsdom = require('jsdom');
 
@@ -35,27 +34,6 @@ async function persist(html, routePath) {
   return fileName;
 }
 
-async function inlineCss(fileName) {
-  let input = await fs.readFile(fileName, 'utf8');
-  let result = await critical.generate({
-    inline: true,
-    base: DIST_PATH,
-    folder: './',
-    html: input,
-    dimensions: [
-      {
-        height: 667,
-        width: 300,
-      },
-      {
-        height: 900,
-        width: 1200,
-      },
-    ],
-  });
-  await fs.writeFile(fileName, result.toString('utf8'));
-}
-
 function buildShoeboxBundlePreloads(html) {
   let dom = new jsdom.JSDOM(html);
   let bundleNodes = Array.from(dom.window.document.querySelectorAll('[data-shoebox-bundle]'));
@@ -91,7 +69,6 @@ server.listen(3000, async function() {
   for (let routePath of paths) {
     let html = await snapshot(browser, routePath);
     let fileName = await persist(html, routePath);
-    await inlineCss(fileName);
 
     console.log(colors.blue(`${routePath} => ${fileName}.`));
   }

src/ui/components/PageWhySimplabs/template.hbs

@@ -47,7 +47,7 @@
       We take an active role in the open source projects that we leverage for our clients. Our strong engagement with Open Source provides us with first hand knowledge and insights that our clients benefit from.
     </p>
   </div>
-  <ShapeAcross @background="#222" @src="/assets/images/photos/tutoring.jpg" />
+  <ShapeAcross @background="#222" @src="/assets/images/photos/tutoring.jpg" @key="acrossTutoring" />
   <div class="layout.main offset.after-21">
     <h2>
       Sharing
@@ -70,7 +70,7 @@
       A distributed team allows gathering top talent regardless of location but face to face time is still invaluable. We frequently come together for team events and workshops and invite our clients to those as well.
     </p>
   </div>
-  <ShapeAcross @background="#222" @src="/assets/images/photos/oktoberfest.jpg" />
+  <ShapeAcross @background="#222" @src="/assets/images/photos/oktoberfest.jpg" @key="acrossOktoberfest" />
   <WorkWithUs />
   <Footer />
 </div>

src/ui/components/PageWork/template.hbs

@@ -29,6 +29,7 @@
     @logo="/assets/images/logos/trainline.svg"
     @logoAlt="Trainline"
     @logoLabel="Mobile Web App"
+    @key="boldTrainline"
    />
 
   <ClientsGrid @title="Meet our clients" />
@@ -55,6 +56,7 @@
     @logoAlt="Timify"
     @logoLabel="Web App"
     @reverse="true"
+    @key="boldTimify"
    />
 
   <div class="layout.main offset.after-21">

src/ui/components/ShapeAcross/component.ts

@@ -1,14 +1,13 @@
 import ShapeBase from '../ShapeBase/component';
 
-let maskId = 0;
-
 export default class ShapeAcross extends ShapeBase {
   public maskId = '';
 
   constructor(options) {
     super(options);
 
-    this.maskId = `across${++maskId}`;
+    this.key = this.args.key || 'across';
+    this.maskId = `${this.key}-mask`;
   }
 
   get backgroundStyle() {

src/ui/components/ShapeAcrossFullStackService/component.ts

@@ -0,0 +1,9 @@
+import Component from '@glimmer/component';
+
+export default class ShapeAcrossFullStackService extends Component {
+  constructor(options) {
+    super(options);
+
+    this.key = this.args.key || 'acrossFullStackService';
+  }
+}

src/ui/components/ShapeAcrossFullStackService/template.hbs

@@ -12,5 +12,5 @@
       View Our Work
     </ArrowLink>
   </div>
-  <ShapeAcross @background="#222" @src="/assets/images/photos/team-meeting.jpg" />
+  <ShapeAcross @background="#222" @src="/assets/images/photos/team-meeting.jpg" @key="{{this.key}}-across" />
 </div>

src/ui/components/ShapeAcrossLeadingExperts/component.ts

@@ -0,0 +1,9 @@
+import Component from '@glimmer/component';
+
+export default class ShapeAcrossLeadingExperts extends Component {
+  constructor(options) {
+    super(options);
+
+    this.key = this.args.key || 'acrossLeadingExperts';
+  }
+}

src/ui/components/ShapeAcrossLeadingExperts/template.hbs

@@ -10,5 +10,5 @@
       Learn More
     </ArrowLink>
   </div>
-  <ShapeAcross @color="#E15D44" @background="#222" @src="/assets/images/photos/marco.jpg" />
+  <ShapeAcross @color="#E15D44" @background="#222" @src="/assets/images/photos/marco.jpg" @key="{{this.key}}-across" />
 </div>

src/ui/components/ShapeAcrossPlaybook/component.ts

@@ -0,0 +1,9 @@
+import Component from '@glimmer/component';
+
+export default class ShapeAcrossPlaybook extends Component {
+  constructor(options) {
+    super(options);
+
+    this.key = this.args.key || 'acrossPlaybook';
+  }
+}

src/ui/components/ShapeAcrossPlaybook/template.hbs

@@ -10,5 +10,5 @@
       Learn More
     </ArrowLink>
   </div>
-  <ShapeAcross @background="#222" @src="/assets/images/photos/team-meeting.jpg" />
+  <ShapeAcross @background="#222" @src="/assets/images/photos/team-meeting.jpg" @key="{{this.key}}-across" />
 </div>

src/ui/components/ShapeAcrossTeamAugmentationService/component.ts

@@ -0,0 +1,9 @@
+import Component from '@glimmer/component';
+
+export default class ShapeAcrossTeamAugmentationService extends Component {
+  constructor(options) {
+    super(options);
+
+    this.key = this.args.key || 'acrossTeamAugmentationService';
+  }
+}

src/ui/components/ShapeAcrossTeamAugmentationService/template.hbs

@@ -12,5 +12,5 @@
       View Our Work
     </ArrowLink>
   </div>
-  <ShapeAcross @background="#222" @src="/assets/images/photos/team-meeting-2.jpg" />
+  <ShapeAcross @background="#222" @src="/assets/images/photos/team-meeting-2.jpg" @key="{{this.key}}-across" />
 </div>

src/ui/components/ShapeAcrossTutoringService/component.ts

@@ -0,0 +1,9 @@
+import Component from '@glimmer/component';
+
+export default class ShapeAcrossTutoringService extends Component {
+  constructor(options) {
+    super(options);
+
+    this.key = this.args.key || 'acrossTutoringService';
+  }
+}

src/ui/components/ShapeAcrossTutoringService/template.hbs

@@ -12,5 +12,5 @@
       View Our Work
     </ArrowLink>
   </div>
-  <ShapeAcross @background="#222" @src="/assets/images/photos/tutoring.jpg" />
+  <ShapeAcross @background="#222" @src="/assets/images/photos/tutoring.jpg" @key="{{this.key}}-across" />
 </div>

src/ui/components/ShapeBase/component.ts

@@ -1,14 +1,8 @@
 import Component from '@glimmer/component';
 
-let shapeId = 0;
-
 export default class ShapeBase extends Component {
-  public shapeId = '';
-
-  constructor(options) {
-    super(options);
-
-    this.shapeId = `base${++shapeId}`;
+  get shapeId() {
+    return `${this.key}-shape`;
   }
 
   get shapeStyle() {

src/ui/components/ShapeBlog/component.ts

@@ -1,4 +1,10 @@
 import ShapeBase from '../ShapeBase/component';
 
 export default class ShapeBlog extends ShapeBase {
+  constructor(options) {
+    super(options);
+
+    this.key = this.args.key || 'blog';
+    this.maskId = `${this.key}-mask`;
+  }
 }

src/ui/components/ShapeBold/component.ts

@@ -1,14 +1,13 @@
 import ShapeBase from '../ShapeBase/component';
 
-let maskId = 0;
-
 export default class ShapeBold extends ShapeBase {
   public maskId = '';
 
   constructor(options) {
     super(options);
 
-    this.maskId = `bold${++maskId}`;
+    this.key = this.args.key || 'bold';
+    this.maskId = `${this.key}-mask`;
   }
 
   get shapeStyle() {

src/ui/components/ShapeDecorative/component.ts

@@ -1,14 +1,13 @@
 import ShapeBase from '../ShapeBase/component';
 
-let maskId = 0;
-
 export default class ShapeDecorative extends ShapeBase {
   public maskId = '';
 
   constructor(options) {
     super(options);
 
-    this.maskId = `decorative${++maskId}`;
+    this.key = this.args.key || 'decorative';
+    this.maskId = `${this.key}-mask`;
   }
 
   get backgroundStyle() {

src/ui/components/ShapeFeature/component.ts

@@ -1,14 +1,13 @@
 import ShapeBase from '../ShapeBase/component';
 
-let maskId = 0;
-
 export default class ShapeFeature extends ShapeBase {
   public maskId = '';
 
   constructor(options) {
     super(options);
 
-    this.maskId = `feature${++maskId}`;
+    this.key = this.args.key || 'feature';
+    this.maskId = `${this.key}-mask`;
   }
 
   get backgroundStyle() {

src/ui/components/ShapeFeature/stylesheet.css

@@ -161,7 +161,6 @@
   .img-wrapper {
     max-width: var(--col-4);
     margin-top: -30%;
-    tranform: translate(0, 10rem);
   }
 
   .content {

src/ui/components/ShapeFeatureEmberDocumentary/component.ts

@@ -0,0 +1,9 @@
+import Component from '@glimmer/component';
+
+export default class ShapeFeatureEmberDocumentary extends Component {
+  constructor(options) {
+    super(options);
+
+    this.key = this.args.key || 'featureEmberDocumentary';
+  }
+}

src/ui/components/ShapeFeatureEmberDocumentary/template.hbs

@@ -4,6 +4,7 @@
   @backgroundImage="/assets/images/emberdoc-simplabs.poster.jpg"
   @width="1280"
   @height="720"
+  @key="{{this.key}}-feature"
 >
   <p class="typography.small">
     Documentary

src/ui/components/ShapeFeatureTimify/component.ts

@@ -0,0 +1,9 @@
+import Component from '@glimmer/component';
+
+export default class ShapeFeatureTimify extends Component {
+  constructor(options) {
+    super(options);
+
+    this.key = this.args.key || 'featureTimify';
+  }
+}

src/ui/components/ShapeFeatureTimify/template.hbs

@@ -1,4 +1,9 @@
-<ShapeFeature @color="#CB3B43" @background="#304158" @src="/assets/images/work/timify-left.png">
+<ShapeFeature
+  @color="#CB3B43"
+  @background="#304158"
+  @src="/assets/images/work/timify-left.png"
+  @key="{{this.key}}-feature"
+>
   <p class="typography.small">
     Continue Reading
   </p>

src/ui/components/ShapeFeatureTrainline/component.ts

@@ -0,0 +1,9 @@
+import Component from '@glimmer/component';
+
+export default class ShapeFeatureTrainline extends Component {
+  constructor(options) {
+    super(options);
+
+    this.key = this.args.key || 'featureTrainline';
+  }
+}

src/ui/components/ShapeFeatureTrainline/template.hbs

@@ -5,6 +5,7 @@
   @logo="/assets/images/logos/trainline.svg"
   @logoAlt="Trainline"
   @tagline="Mobile Web App"
+  @key="{{this.key}}-trainline"
 >
   <h2 class="typography.small">
     {{@label}}

src/ui/components/ShapeWork/component.ts

@@ -1,14 +1,13 @@
 import ShapeBase from '../ShapeBase/component';
 
-let maskId = 0;
-
 export default class ShapeWork extends ShapeBase {
   public maskId = '';
 
   constructor(options) {
     super(options);
 
-    this.maskId = `work${++maskId}`;
+    this.key = this.args.key || 'work';
+    this.maskId = `${this.key}-mask`;
   }
 
   get backgroundStyle() {