From b262d7ca496d70fd09ee007586674e10cb4ff3f6 Mon Sep 17 00:00:00 2001
From: Damani <dmb147@pitt.edu>
Date: Tue, 12 May 2020 13:00:37 -0400
Subject: [PATCH] Added og:image and alt text checks to linter for Stories
 (#755)

* Added og:image and alt text checks to linter for Stories

* Minor fixes to linter checks. Added testing for new checks

* Removed unused var

* Recommitting for CI build, No code changes

* Code cleanup

Co-authored-by: Damani Brown <damanibrown@damanibrown-macbookpro.roam.corp.google.com>
---
 packages/linter/src/index.ts                  |   4 +
 .../linter/src/rules/ImagesHaveAltText.ts     |  25 ++
 .../src/rules/MetadataIncludesOGImageSrc.ts   |  30 ++
 packages/linter/tests/local.ts                |  30 +-
 .../local/ImagesHaveAltText-1/source.html     |  92 ++++++
 .../local/ImagesHaveAltText-2/source.html     |  92 ++++++
 .../MetadataIncludesOGImageSrc-1/source.html  | 290 ++++++++++++++++++
 .../MetadataIncludesOGImageSrc-2/source.html  | 287 +++++++++++++++++
 8 files changed, 849 insertions(+), 1 deletion(-)
 create mode 100644 packages/linter/src/rules/ImagesHaveAltText.ts
 create mode 100644 packages/linter/src/rules/MetadataIncludesOGImageSrc.ts
 create mode 100644 packages/linter/tests/local/ImagesHaveAltText-1/source.html
 create mode 100644 packages/linter/tests/local/ImagesHaveAltText-2/source.html
 create mode 100644 packages/linter/tests/local/MetadataIncludesOGImageSrc-1/source.html
 create mode 100644 packages/linter/tests/local/MetadataIncludesOGImageSrc-2/source.html

diff --git a/packages/linter/src/index.ts b/packages/linter/src/index.ts
index 02fbd5fc4..6803566a1 100644
--- a/packages/linter/src/index.ts
+++ b/packages/linter/src/index.ts
@@ -18,6 +18,8 @@ import { SxgVaryOnAcceptAct } from "./rules/SxgVaryOnAcceptAct";
 import { SxgContentNegotiationIsOk } from "./rules/SxgContentNegotiationIsOk";
 import { SxgDumpSignedExchangeVerify } from "./rules/SxgDumpSignedExchangeVerify";
 import { SxgAmppkgIsForwarded } from "./rules/SxgAmppkgIsForwarded";
+import { MetadataIncludesOGImageSrc } from "./rules/MetadataIncludesOGImageSrc";
+import { ImagesHaveAltText } from "./rules/ImagesHaveAltText";
 import { RuleConstructor } from "./rule";
 import { isArray } from "util";
 
@@ -100,6 +102,8 @@ function testsForMode(type: LintMode) {
       StoryMetadataIsV1,
       StoryIsMostlyText,
       StoryMetadataThumbnailsAreOk,
+      MetadataIncludesOGImageSrc,
+      ImagesHaveAltText,
     ])
   );
   return tests.get(type) || [];
diff --git a/packages/linter/src/rules/ImagesHaveAltText.ts b/packages/linter/src/rules/ImagesHaveAltText.ts
new file mode 100644
index 000000000..b928c7b42
--- /dev/null
+++ b/packages/linter/src/rules/ImagesHaveAltText.ts
@@ -0,0 +1,25 @@
+import { Context } from "../index";
+import { Rule } from "../rule";
+
+export class ImagesHaveAltText extends Rule {
+  run({ $ }: Context) {
+    let imgsWithoutAlt = "";
+
+    $("amp-img").each(function (i, elem) {
+      if (!elem.attribs.alt) {
+        imgsWithoutAlt = imgsWithoutAlt + "- " + elem.attribs.src + "\n";
+      }
+    });
+
+    return imgsWithoutAlt.length > 0
+      ? this.warn(`Missing alt text from images: \n` + imgsWithoutAlt)
+      : this.pass();
+  }
+  meta() {
+    return {
+      url: "https://blog.amp.dev/2020/02/12/seo-for-amp-stories/",
+      title: "Images contain alt text",
+      info: "",
+    };
+  }
+}
diff --git a/packages/linter/src/rules/MetadataIncludesOGImageSrc.ts b/packages/linter/src/rules/MetadataIncludesOGImageSrc.ts
new file mode 100644
index 000000000..104660414
--- /dev/null
+++ b/packages/linter/src/rules/MetadataIncludesOGImageSrc.ts
@@ -0,0 +1,30 @@
+import { Context } from "../index";
+import { Rule } from "../rule";
+
+export class MetadataIncludesOGImageSrc extends Rule {
+  run({ $ }: Context) {
+    let hasOGImage = false;
+
+    $("meta").each(function (i, elem) {
+      if (
+        elem.attribs.property &&
+        elem.attribs.property.includes("og:image", 0) &&
+        elem.attribs.content
+      ) {
+        hasOGImage = true;
+        return false;
+      }
+    });
+
+    return !hasOGImage
+      ? this.warn(`Missing og:image property or content source`)
+      : this.pass();
+  }
+  meta() {
+    return {
+      url: "https://blog.amp.dev/2020/02/12/seo-for-amp-stories/",
+      title: "Metadata includes og:image and src",
+      info: "",
+    };
+  }
+}
diff --git a/packages/linter/tests/local.ts b/packages/linter/tests/local.ts
index ab826706f..5c9cb337a 100644
--- a/packages/linter/tests/local.ts
+++ b/packages/linter/tests/local.ts
@@ -4,6 +4,8 @@ import { MetaCharsetIsFirst } from "../src/rules/MetaCharsetIsFirst";
 import { RuntimeIsPreloaded } from "../src/rules/RuntimeIsPreloaded";
 import { SchemaMetadataIsNews } from "../src/rules/SchemaMetadataIsNews";
 import { StoryRuntimeIsV1 } from "../src/rules/StoryRuntimeIsV1";
+import { ImagesHaveAltText } from "../src/rules/ImagesHaveAltText";
+import { MetadataIncludesOGImageSrc } from "../src/rules/MetadataIncludesOGImageSrc";
 import { basename } from "path";
 import { BookendExists } from "../src/rules/BookendExists";
 
@@ -102,5 +104,31 @@ assertWarn(
   runLocalTest(BookendExists, "local/BookendExists-3/source.html")
 );
 
+assertPass(
+  `${MetadataIncludesOGImageSrc.name} - <meta property="og:image"> is present`,
+  runLocalTest(
+    MetadataIncludesOGImageSrc,
+    "local/MetadataIncludesOGImageSrc-1/source.html"
+  )
+);
+
+assertWarn(
+  `${MetadataIncludesOGImageSrc.name} - <meta property="og:image"> is missing`,
+  runLocalTest(
+    MetadataIncludesOGImageSrc,
+    "local/MetadataIncludesOGImageSrc-2/source.html"
+  )
+);
+
+assertPass(
+  `${ImagesHaveAltText.name} - All <amp-img> have alt text`,
+  runLocalTest(ImagesHaveAltText, "local/ImagesHaveAltText-1/source.html")
+);
+
+assertWarn(
+  `${ImagesHaveAltText.name} - At least one <amp-img> is missing alt text`,
+  runLocalTest(ImagesHaveAltText, "local/ImagesHaveAltText-2/source.html")
+);
+
 console.log(`# ${basename(__filename)} - HTML-only tests`);
-console.log(`1..16`);
+console.log(`1..20`);
diff --git a/packages/linter/tests/local/ImagesHaveAltText-1/source.html b/packages/linter/tests/local/ImagesHaveAltText-1/source.html
new file mode 100644
index 000000000..ab6efb0a9
--- /dev/null
+++ b/packages/linter/tests/local/ImagesHaveAltText-1/source.html
@@ -0,0 +1,92 @@
+<!doctype html>
+<html amp lang="en">
+    <head>
+        <meta charset="utf-8">
+        <script async src="https://cdn.ampproject.org/v0.js" rel="preload"></script>
+        <style amp-boilerplate>
+            body {
+                -webkit-animation: -amp-start 8s steps(1,end) 0s 1 normal both;
+                -moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;
+                -ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;
+                animation: -amp-start 8s steps(1,end) 0s 1 normal both
+            }
+
+            @-webkit-keyframes -amp-start {
+                from {
+                    visibility: hidden
+                }
+
+                to {
+                    visibility: visible
+                }
+            }
+
+            @-moz-keyframes -amp-start {
+                from {
+                    visibility: hidden
+                }
+
+                to {
+                    visibility: visible
+                }
+            }
+
+            @-ms-keyframes -amp-start {
+                from {
+                    visibility: hidden
+                }
+
+                to {
+                    visibility: visible
+                }
+            }
+
+            @-o-keyframes -amp-start {
+                from {
+                    visibility: hidden
+                }
+
+                to {
+                    visibility: visible
+                }
+            }
+
+            @keyframes -amp-start {
+                from {
+                    visibility: hidden
+                }
+
+                to {
+                    visibility: visible
+                }
+            }
+        </style>
+        <noscript>
+            <style amp-boilerplate>
+                body {
+                    -webkit-animation: none;
+                    -moz-animation: none;
+                    -ms-animation: none;
+                    animation: none
+                }
+            </style>
+        </noscript>
+        <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+        <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
+        <title>Through the fence 2020</title>
+        <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+        </head>
+    <body>
+        <amp-story standalone poster-portrait-src="https://ss.makestories.io/get?story=-M6q2XpFIDyuU4zoj45u&version=1588971636320&width=696&height=1237" publisher-logo-src="https://app.makestories.io/images/favicon.png" publisher="MakeStories" title="Through the fence 2020">
+            <amp-story-page id="pggaspiqcb" class="pggaspiqcb ms-st-pg">
+                <amp-story-grid-layer template="fill" class="pbvnsupp">
+                    <amp-img width="720" height="1280" layout="responsive" class="pbvnsup" id="pggaspiqcb-bg" src="https://images.unsplash.com/photo-1586021412933-1973b937d8d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjI1MTY2fQ&q=85&w=2160" alt="Background Image"></amp-img>
+                </amp-story-grid-layer>
+                <amp-story-grid-layer template="vertical" id="sihdy">
+                    <h1 class="ubqhi pa" id="leovpcjjbg">Through The Fence 2020</h1>
+                </amp-story-grid-layer>
+            </amp-story-page>
+            <amp-story-bookend srca="bookend.json" layout="nodisplay"></amp-story-bookend>
+        </amp-story>
+    </body>
+</html>
diff --git a/packages/linter/tests/local/ImagesHaveAltText-2/source.html b/packages/linter/tests/local/ImagesHaveAltText-2/source.html
new file mode 100644
index 000000000..1b8f752db
--- /dev/null
+++ b/packages/linter/tests/local/ImagesHaveAltText-2/source.html
@@ -0,0 +1,92 @@
+<!doctype html>
+<html amp lang="en">
+    <head>
+        <meta charset="utf-8">
+        <script async src="https://cdn.ampproject.org/v0.js" rel="preload"></script>
+        <style amp-boilerplate>
+            body {
+                -webkit-animation: -amp-start 8s steps(1,end) 0s 1 normal both;
+                -moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;
+                -ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;
+                animation: -amp-start 8s steps(1,end) 0s 1 normal both
+            }
+
+            @-webkit-keyframes -amp-start {
+                from {
+                    visibility: hidden
+                }
+
+                to {
+                    visibility: visible
+                }
+            }
+
+            @-moz-keyframes -amp-start {
+                from {
+                    visibility: hidden
+                }
+
+                to {
+                    visibility: visible
+                }
+            }
+
+            @-ms-keyframes -amp-start {
+                from {
+                    visibility: hidden
+                }
+
+                to {
+                    visibility: visible
+                }
+            }
+
+            @-o-keyframes -amp-start {
+                from {
+                    visibility: hidden
+                }
+
+                to {
+                    visibility: visible
+                }
+            }
+
+            @keyframes -amp-start {
+                from {
+                    visibility: hidden
+                }
+
+                to {
+                    visibility: visible
+                }
+            }
+        </style>
+        <noscript>
+            <style amp-boilerplate>
+                body {
+                    -webkit-animation: none;
+                    -moz-animation: none;
+                    -ms-animation: none;
+                    animation: none
+                }
+            </style>
+        </noscript>
+        <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+        <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
+        <title>Through the fence 2020</title>
+        <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+        </head>
+    <body>
+        <amp-story standalone poster-portrait-src="https://ss.makestories.io/get?story=-M6q2XpFIDyuU4zoj45u&version=1588971636320&width=696&height=1237" publisher-logo-src="https://app.makestories.io/images/favicon.png" publisher="MakeStories" title="Through the fence 2020">
+            <amp-story-page id="pggaspiqcb" class="pggaspiqcb ms-st-pg">
+                <amp-story-grid-layer template="fill" class="pbvnsupp">
+                    <amp-img width="720" height="1280" layout="responsive" class="pbvnsup" id="pggaspiqcb-bg" src="https://images.unsplash.com/photo-1586021412933-1973b937d8d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjI1MTY2fQ&q=85&w=2160"></amp-img>
+                </amp-story-grid-layer>
+                <amp-story-grid-layer template="vertical" id="sihdy">
+                    <h1 class="ubqhi pa" id="leovpcjjbg">Through The Fence 2020</h1>
+                </amp-story-grid-layer>
+            </amp-story-page>
+            <amp-story-bookend srca="bookend.json" layout="nodisplay"></amp-story-bookend>
+        </amp-story>
+    </body>
+</html>
diff --git a/packages/linter/tests/local/MetadataIncludesOGImageSrc-1/source.html b/packages/linter/tests/local/MetadataIncludesOGImageSrc-1/source.html
new file mode 100644
index 000000000..6fa0afdd8
--- /dev/null
+++ b/packages/linter/tests/local/MetadataIncludesOGImageSrc-1/source.html
@@ -0,0 +1,290 @@
+<!doctype html>
+<html amp lang="en">
+    <head>
+        <meta charset="utf-8">
+        <script async src="https://cdn.ampproject.org/v0.js" rel="preload"></script>
+        <style amp-boilerplate>
+            body {
+                -webkit-animation: -amp-start 8s steps(1,end) 0s 1 normal both;
+                -moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;
+                -ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;
+                animation: -amp-start 8s steps(1,end) 0s 1 normal both
+            }
+
+            @-webkit-keyframes -amp-start {
+                from {
+                    visibility: hidden
+                }
+
+                to {
+                    visibility: visible
+                }
+            }
+
+            @-moz-keyframes -amp-start {
+                from {
+                    visibility: hidden
+                }
+
+                to {
+                    visibility: visible
+                }
+            }
+
+            @-ms-keyframes -amp-start {
+                from {
+                    visibility: hidden
+                }
+
+                to {
+                    visibility: visible
+                }
+            }
+
+            @-o-keyframes -amp-start {
+                from {
+                    visibility: hidden
+                }
+
+                to {
+                    visibility: visible
+                }
+            }
+
+            @keyframes -amp-start {
+                from {
+                    visibility: hidden
+                }
+
+                to {
+                    visibility: visible
+                }
+            }
+        </style>
+        <noscript>
+            <style amp-boilerplate>
+                body {
+                    -webkit-animation: none;
+                    -moz-animation: none;
+                    -ms-animation: none;
+                    animation: none
+                }
+            </style>
+        </noscript>
+        <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+        <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
+        <title>Through the fence 2020</title>
+        <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+        <link rel="shortcut icon" href="https://app.makestories.io/images/favicon.png" type="image/x-icon">
+        <script type="application/ld+json">
+            {"@context":"https://schema.org","@type":"event","mainEntityOfPage":{"@type":"WebPage","@id":"https://onl.st/linter-tester"},"name":"Dee Brown","description":"Come gather at the 2020 Through the Fence Festival","image":{"@type":"ImageObject","url":"https://images.unsplash.com/photo-1533794318766-897f4d50cb39?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjI1MTY2fQ&q=85&w=2160","width":1280,"height":1920},"location":{"@type":"Place","name":"","address":{"@type":"PostalAddress","streetAddress":"","addressLocality":"","addressRegion":"","postalCode":"","addressCountry":""}},"startDate":"05/01/2020T5:54:33","endDate":"05/02/2020T4:57:33","eventStatus":"https://schema.org/EventScheduled","eventAttendanceMode":"http://schema.org/OfflineEventAttendanceMode","performer":{"@type":"Person","name":""}}
+        </script>
+        <meta property="og:url" content="https://onl.st/linter-tester">
+        <meta property="title" content="Through the fence 2020">
+        <meta property="og:title" content="Through the fence 2020">
+        <meta property="twitter:title" content="Through the fence 2020">
+        <meta property="keywords" name="keywords" content="Through the fence festival music fun ">
+        <meta property="description" content="Come gather at the 2020 Through the Fence Festival">
+        <meta property="og:description" content="Come gather at the 2020 Through the Fence Festival">
+        <meta property="twitter:description" content="Come gather at the 2020 Through the Fence Festival">
+        <meta property="twitter:image" content="https://images.unsplash.com/photo-1533794318766-897f4d50cb39?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjI1MTY2fQ&q=85&w=2160">
+        <meta property="og:image:url" content="https://images.unsplash.com/photo-1533794318766-897f4d50cb39?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjI1MTY2fQ&q=85&w=2160">
+        <meta property="og:image:width" content="1280">
+        <meta property="og:image:height" content="1920">
+        <meta name="twitter:card" content="summary_large_image">
+        <link rel="canonical" href="https://onl.st/linter-tester">
+        <style amp-custom>
+            .pbvnsupp amp-img.pbvnsup>img {
+                max-width: unset;
+                max-height: unset;
+                margin: 0;
+                height: 100%;
+                left: 0;
+                object-fit: cover;
+                top: 0;
+                width: 100%
+            }
+
+            .ubqhi {
+                border-color: #000;
+                border-style: solid;
+                border-width: 2px 2px 2px 2px;
+                color: rgba(255,255,255,1);
+                font-family: Roboto;
+                font-size: 5.24em;
+                font-weight: 700;
+                left: 14.44%;
+                letter-spacing: .02em;
+                line-height: 1.4em;
+                text-align: center;
+                top: 22.67%;
+                width: 71.11%
+            }
+
+            amp-img {
+                position: relative
+            }
+
+            .content-block {
+                padding: 10px 15px
+            }
+
+            .block {
+                position: relative;
+                padding: 5px;
+                word-break: break-word
+            }
+
+            .content-block amp-video {
+                display: block;
+                margin: 0 auto
+            }
+
+            .content-block>hr {
+                padding: 0;
+                margin: 5px 0;
+                border-top: 1px solid #eee
+            }
+
+            .block a {
+                color: inherit;
+                text-decoration: none
+            }
+
+            h1,h2,h3,h4,h5,h6,p {
+                padding: 0;
+                margin: 0
+            }
+
+            .cta-a {
+                text-decoration: none;
+                display: flex;
+                align-items: center
+            }
+
+            .cta-a span {
+                width: 100%
+            }
+
+            .svg-el svg {
+                display: block;
+                width: 100%;
+                height: 100%
+            }
+
+            .block .cta-a {
+                padding: .3em 1em;
+                display: inline-block
+            }
+
+            * {
+                -webkit-box-sizing: border-box;
+                -moz-box-sizing: border-box;
+                box-sizing: border-box
+            }
+
+            .cta-a amp-img {
+                width: 100%;
+                height: 100%
+            }
+
+            .cta-a amp-img img {
+                height: 100%;
+                width: 100%;
+                min-height: unset
+            }
+
+            .flip-vertically img {
+                transform: rotateY(180deg)
+            }
+
+            .flip-horizontally img {
+                transform: rotateX(180deg)
+            }
+
+            .flip-horizontally.flip-vertically img {
+                transform: rotateX(180deg) rotateY(180deg)
+            }
+
+            .pa {
+                position: absolute;
+                word-break: break-word
+            }
+
+            .img-fill,a.story-tooltip {
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%
+            }
+
+            a.story-tooltip {
+                z-index: 1;
+                text-decoration: none;
+                color: inherit
+            }
+
+            .offset {
+                transform: translateX(-50%) translateY(-50%)
+            }
+
+            .oh {
+                overflow: hidden
+            }
+
+            .pa.kbimg {
+                width: 0;
+                height: 0
+            }
+
+            amp-story {
+                font-size: 3.125vw
+            }
+
+            @media screen and (min-aspect-ratio: 5/8) {
+                amp-story {
+                    font-size:2.95vw
+                }
+            }
+
+            @media screen and (min-width: 1024px) {
+                amp-story {
+                    font-size:1.8vh
+                }
+            }
+
+            @media screen and (min-width: 1024px) and (max-height:660px) {
+                amp-story {
+                    font-size:1.8vh
+                }
+            }
+
+            ::cue {
+                background-color: rgba(0,0,0,.75);
+                font-size: 24px;
+                line-height: 1.5
+            }
+
+            @media screen and (min-width: 768px) and (max-width:1024px) {
+                amp-story {
+                    font-size:130%
+                }
+            }
+        </style>
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css?display=swap&family=Roboto:400,700" media="all">
+    </head>
+    <body>
+        <amp-story standalone poster-portrait-src="https://ss.makestories.io/get?story=-M6q2XpFIDyuU4zoj45u&version=1588971636320&width=696&height=1237" publisher-logo-src="https://app.makestories.io/images/favicon.png" publisher="MakeStories" title="Through the fence 2020">
+            <amp-story-page id="pggaspiqcb" class="pggaspiqcb ms-st-pg">
+                <amp-story-grid-layer template="fill" class="pbvnsupp">
+                    <amp-img width="720" height="1280" layout="responsive" class="pbvnsup" id="pggaspiqcb-bg" src="https://images.unsplash.com/photo-1586021412933-1973b937d8d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjI1MTY2fQ&q=85&w=2160" alt="Background Image"></amp-img>
+                </amp-story-grid-layer>
+                <amp-story-grid-layer template="vertical" id="sihdy">
+                    <h1 class="ubqhi pa" id="leovpcjjbg">Through The Fence 2020</h1>
+                </amp-story-grid-layer>
+            </amp-story-page>
+            <amp-analytics config="https://makestories-staging.firebaseapp.com/analytics?storyId=-M6q2XpFIDyuU4zoj45u"></amp-analytics>
+            <amp-story-bookend src="bookend.json" layout="nodisplay"></amp-story-bookend>
+        </amp-story>
+    </body>
+</html>
diff --git a/packages/linter/tests/local/MetadataIncludesOGImageSrc-2/source.html b/packages/linter/tests/local/MetadataIncludesOGImageSrc-2/source.html
new file mode 100644
index 000000000..937b2bed5
--- /dev/null
+++ b/packages/linter/tests/local/MetadataIncludesOGImageSrc-2/source.html
@@ -0,0 +1,287 @@
+<!doctype html>
+<html amp lang="en">
+    <head>
+        <meta charset="utf-8">
+        <script async src="https://cdn.ampproject.org/v0.js" rel="preload"></script>
+        <style amp-boilerplate>
+            body {
+                -webkit-animation: -amp-start 8s steps(1,end) 0s 1 normal both;
+                -moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;
+                -ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;
+                animation: -amp-start 8s steps(1,end) 0s 1 normal both
+            }
+
+            @-webkit-keyframes -amp-start {
+                from {
+                    visibility: hidden
+                }
+
+                to {
+                    visibility: visible
+                }
+            }
+
+            @-moz-keyframes -amp-start {
+                from {
+                    visibility: hidden
+                }
+
+                to {
+                    visibility: visible
+                }
+            }
+
+            @-ms-keyframes -amp-start {
+                from {
+                    visibility: hidden
+                }
+
+                to {
+                    visibility: visible
+                }
+            }
+
+            @-o-keyframes -amp-start {
+                from {
+                    visibility: hidden
+                }
+
+                to {
+                    visibility: visible
+                }
+            }
+
+            @keyframes -amp-start {
+                from {
+                    visibility: hidden
+                }
+
+                to {
+                    visibility: visible
+                }
+            }
+        </style>
+        <noscript>
+            <style amp-boilerplate>
+                body {
+                    -webkit-animation: none;
+                    -moz-animation: none;
+                    -ms-animation: none;
+                    animation: none
+                }
+            </style>
+        </noscript>
+        <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+        <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
+        <title>Through the fence 2020</title>
+        <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+        <link rel="shortcut icon" href="https://app.makestories.io/images/favicon.png" type="image/x-icon">
+        <script type="application/ld+json">
+            {"@context":"https://schema.org","@type":"event","mainEntityOfPage":{"@type":"WebPage","@id":"https://onl.st/linter-tester"},"name":"Dee Brown","description":"Come gather at the 2020 Through the Fence Festival","image":{"@type":"ImageObject","url":"https://images.unsplash.com/photo-1533794318766-897f4d50cb39?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjI1MTY2fQ&q=85&w=2160","width":1280,"height":1920},"location":{"@type":"Place","name":"","address":{"@type":"PostalAddress","streetAddress":"","addressLocality":"","addressRegion":"","postalCode":"","addressCountry":""}},"startDate":"05/01/2020T5:54:33","endDate":"05/02/2020T4:57:33","eventStatus":"https://schema.org/EventScheduled","eventAttendanceMode":"http://schema.org/OfflineEventAttendanceMode","performer":{"@type":"Person","name":""}}
+        </script>
+        <meta property="og:url" content="https://onl.st/linter-tester">
+        <meta property="title" content="Through the fence 2020">
+        <meta property="og:title" content="Through the fence 2020">
+        <meta property="twitter:title" content="Through the fence 2020">
+        <meta property="keywords" name="keywords" content="Through the fence festival music fun ">
+        <meta property="description" content="Come gather at the 2020 Through the Fence Festival">
+        <meta property="og:description" content="Come gather at the 2020 Through the Fence Festival">
+        <meta property="twitter:description" content="Come gather at the 2020 Through the Fence Festival">
+        <meta property="twitter:image" content="https://images.unsplash.com/photo-1533794318766-897f4d50cb39?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjI1MTY2fQ&q=85&w=2160">
+        <meta name="twitter:card" content="summary_large_image">
+        <link rel="canonical" href="https://onl.st/linter-tester">
+        <style amp-custom>
+            .pbvnsupp amp-img.pbvnsup>img {
+                max-width: unset;
+                max-height: unset;
+                margin: 0;
+                height: 100%;
+                left: 0;
+                object-fit: cover;
+                top: 0;
+                width: 100%
+            }
+
+            .ubqhi {
+                border-color: #000;
+                border-style: solid;
+                border-width: 2px 2px 2px 2px;
+                color: rgba(255,255,255,1);
+                font-family: Roboto;
+                font-size: 5.24em;
+                font-weight: 700;
+                left: 14.44%;
+                letter-spacing: .02em;
+                line-height: 1.4em;
+                text-align: center;
+                top: 22.67%;
+                width: 71.11%
+            }
+
+            amp-img {
+                position: relative
+            }
+
+            .content-block {
+                padding: 10px 15px
+            }
+
+            .block {
+                position: relative;
+                padding: 5px;
+                word-break: break-word
+            }
+
+            .content-block amp-video {
+                display: block;
+                margin: 0 auto
+            }
+
+            .content-block>hr {
+                padding: 0;
+                margin: 5px 0;
+                border-top: 1px solid #eee
+            }
+
+            .block a {
+                color: inherit;
+                text-decoration: none
+            }
+
+            h1,h2,h3,h4,h5,h6,p {
+                padding: 0;
+                margin: 0
+            }
+
+            .cta-a {
+                text-decoration: none;
+                display: flex;
+                align-items: center
+            }
+
+            .cta-a span {
+                width: 100%
+            }
+
+            .svg-el svg {
+                display: block;
+                width: 100%;
+                height: 100%
+            }
+
+            .block .cta-a {
+                padding: .3em 1em;
+                display: inline-block
+            }
+
+            * {
+                -webkit-box-sizing: border-box;
+                -moz-box-sizing: border-box;
+                box-sizing: border-box
+            }
+
+            .cta-a amp-img {
+                width: 100%;
+                height: 100%
+            }
+
+            .cta-a amp-img img {
+                height: 100%;
+                width: 100%;
+                min-height: unset
+            }
+
+            .flip-vertically img {
+                transform: rotateY(180deg)
+            }
+
+            .flip-horizontally img {
+                transform: rotateX(180deg)
+            }
+
+            .flip-horizontally.flip-vertically img {
+                transform: rotateX(180deg) rotateY(180deg)
+            }
+
+            .pa {
+                position: absolute;
+                word-break: break-word
+            }
+
+            .img-fill,a.story-tooltip {
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%
+            }
+
+            a.story-tooltip {
+                z-index: 1;
+                text-decoration: none;
+                color: inherit
+            }
+
+            .offset {
+                transform: translateX(-50%) translateY(-50%)
+            }
+
+            .oh {
+                overflow: hidden
+            }
+
+            .pa.kbimg {
+                width: 0;
+                height: 0
+            }
+
+            amp-story {
+                font-size: 3.125vw
+            }
+
+            @media screen and (min-aspect-ratio: 5/8) {
+                amp-story {
+                    font-size:2.95vw
+                }
+            }
+
+            @media screen and (min-width: 1024px) {
+                amp-story {
+                    font-size:1.8vh
+                }
+            }
+
+            @media screen and (min-width: 1024px) and (max-height:660px) {
+                amp-story {
+                    font-size:1.8vh
+                }
+            }
+
+            ::cue {
+                background-color: rgba(0,0,0,.75);
+                font-size: 24px;
+                line-height: 1.5
+            }
+
+            @media screen and (min-width: 768px) and (max-width:1024px) {
+                amp-story {
+                    font-size:130%
+                }
+            }
+        </style>
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css?display=swap&family=Roboto:400,700" media="all">
+    </head>
+    <body>
+        <amp-story standalone poster-portrait-src="https://ss.makestories.io/get?story=-M6q2XpFIDyuU4zoj45u&version=1588971636320&width=696&height=1237" publisher-logo-src="https://app.makestories.io/images/favicon.png" publisher="MakeStories" title="Through the fence 2020">
+            <amp-story-page id="pggaspiqcb" class="pggaspiqcb ms-st-pg">
+                <amp-story-grid-layer template="fill" class="pbvnsupp">
+                    <amp-img width="720" height="1280" layout="responsive" class="pbvnsup" id="pggaspiqcb-bg" src="https://images.unsplash.com/photo-1586021412933-1973b937d8d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjI1MTY2fQ&q=85&w=2160" alt="Background Image"></amp-img>
+                </amp-story-grid-layer>
+                <amp-story-grid-layer template="vertical" id="sihdy">
+                    <h1 class="ubqhi pa" id="leovpcjjbg">Through The Fence 2020</h1>
+                </amp-story-grid-layer>
+            </amp-story-page>
+            <amp-analytics config="https://makestories-staging.firebaseapp.com/analytics?storyId=-M6q2XpFIDyuU4zoj45u"></amp-analytics>
+            <amp-story-bookend src="bookend.json" layout="nodisplay"></amp-story-bookend>
+        </amp-story>
+    </body>
+</html>