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

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) || [];
@@ -148,4 +152,4 @@ export async function lint(
   );
 }
 
-export { cli };
+export { cli };

packages/linter/src/rules/ImagesHaveAltText.ts

@@ -0,0 +1,30 @@
+
+import { Context } from "../index";
+import { Rule } from "../rule";
+
+export class ImagesHaveAltText extends Rule {
+  run({ $ }: Context) {
+    let containsAltText = true;
+    let imgsWithoutAlt = "";
+
+    $('amp-img').each(function (i, elem) {
+      if(!(elem.attribs.alt)) {
+        containsAltText = false;
+        imgsWithoutAlt = imgsWithoutAlt + "- " + elem.attribs.src + "\n";
+      }
+
+    });
+
+    return !containsAltText
+      ? this.warn(`Missing alt text from images: \n` + imgsWithoutAlt)
+      : this.pass();
+  }
+  meta() {
+    return {
+      url:
+        "https://html.spec.whatwg.org/multipage/parsing.html#determining-the-character-encoding",
+      title: "Images contain alt text",
+      info: "",
+    };
+  }
+}

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 === 'og:image' && elem.attribs.content) {
+        hasOGImage = true;
+        return false;             //break the loop
+      }
+    });
+
+
+    return !(hasOGImage)
+      ? this.warn(`Missing og:image property or content source`)
+      : this.pass();
+  }
+  meta() {
+    return {
+      url:
+        "https://html.spec.whatwg.org/multipage/parsing.html#determining-the-character-encoding",
+      title: "Metadata includes og:image and src",
+      info: "",
+    };
+  }
+}
+