From 8d5dbf9fab3aefa881698c9bdea80ab94c66cbac Mon Sep 17 00:00:00 2001
From: Sam Carlton <sam@sam.lc>
Date: Mon, 15 Mar 2021 23:24:10 -0500
Subject: [PATCH] Add story cover component

---
 components-eleventy/story/cover.js | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 components-eleventy/story/cover.js

diff --git a/components-eleventy/story/cover.js b/components-eleventy/story/cover.js
new file mode 100644
index 0000000..82ff7c7
--- /dev/null
+++ b/components-eleventy/story/cover.js
@@ -0,0 +1,30 @@
+export default function ( page ) {
+
+    const {
+        heading,
+        headingUrl,
+
+        imageUrl = null,
+    } = page
+
+    // Setup inline lazysizes
+    // this.usingComponent( 'node_modules/lazysizes/lazysizes.min.js' )
+
+    // console.log('video', video)
+
+    return /* html */`
+        <amp-story-page id="jlqerrcdhz" class="jlqerrcdhz ms-st-pg"  >
+            <!-- PAGE BACKGROUND LAYER (jlqerrcdhz) -->
+            <amp-story-grid-layer template="fill" class="pbxiyzxp">
+                <amp-img width='720' height='1280' layout='responsive' class='pbxiyzx' id='jlqerrcdhz-bg' src='${ imageUrl }' alt='${ heading }' ></amp-img>
+            </amp-story-grid-layer>
+            <!-- PAGE BACKGROUND LAYER (jlqerrcdhz) ENDS -->
+            <amp-story-grid-layer template="vertical" id="vsyyg" class="scrim"><div class="letterbox">
+                <!-- The best therapist has fur and four legs STARTS HERE -->
+                <h1 class='zegok pa' animate-in='fade-in' animate-in-duration='500ms' id='workflow-text' >${ heading }<a href='${ headingUrl }' role='link' data-tooltip-text='Details' class='story-tooltip pa' data-tooltip-icon='https://www.google.com/s2/favicons?domain=${ headingUrl }' data-vars-ctalink='${ headingUrl }' ></a></h1>
+                <!-- The best therapist has fur and four legs ENDS HERE -->
+            </div></amp-story-grid-layer>
+
+        </amp-story-page>
+    `
+}