From 72a69cf9e699087b53e10f8e326c4c31f9cebf35 Mon Sep 17 00:00:00 2001
From: Deepak Lalwani <deepak.lalwani81@gmail.com>
Date: Mon, 14 Feb 2022 23:55:33 +0530
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Bento=20amp-gist=20(#37333)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ Add Bento gist component

* Add unit test cases for the amp-gist component

* Add support for data-file attribute

* Add npm property to amp-gist in bundles config

* Add file attribute to type definition

* Remove debug code

* Add test case and storybook example for file attribute

* Update amp-gist validator test files

* Add readme.md file for bento amp-gist component

* Remove dict
---
 .../compile/bundles.config.extensions.json    |   9 +
 extensions/amp-gist/1.0/README.md             | 187 ++++++++++++++++++
 extensions/amp-gist/1.0/amp-gist.css          |  17 ++
 extensions/amp-gist/1.0/amp-gist.js           |  40 ++++
 extensions/amp-gist/1.0/base-element.js       |  20 ++
 extensions/amp-gist/1.0/component.js          |  66 +++++++
 extensions/amp-gist/1.0/component.type.js     |  15 ++
 .../amp-gist/1.0/storybook/Basic.amp.js       |  33 ++++
 extensions/amp-gist/1.0/storybook/Basic.js    |  26 +++
 extensions/amp-gist/1.0/test/test-amp-gist.js |  63 ++++++
 .../amp-gist/1.0/test/test-component.js       |  46 +++++
 .../amp-gist/1.0/test/validator-amp-gist.html |  47 +++++
 .../amp-gist/1.0/test/validator-amp-gist.out  |  54 +++++
 13 files changed, 623 insertions(+)
 create mode 100644 extensions/amp-gist/1.0/README.md
 create mode 100644 extensions/amp-gist/1.0/amp-gist.css
 create mode 100644 extensions/amp-gist/1.0/amp-gist.js
 create mode 100644 extensions/amp-gist/1.0/base-element.js
 create mode 100644 extensions/amp-gist/1.0/component.js
 create mode 100644 extensions/amp-gist/1.0/component.type.js
 create mode 100644 extensions/amp-gist/1.0/storybook/Basic.amp.js
 create mode 100644 extensions/amp-gist/1.0/storybook/Basic.js
 create mode 100644 extensions/amp-gist/1.0/test/test-amp-gist.js
 create mode 100644 extensions/amp-gist/1.0/test/test-component.js
 create mode 100644 extensions/amp-gist/1.0/test/validator-amp-gist.html
 create mode 100644 extensions/amp-gist/1.0/test/validator-amp-gist.out

diff --git a/build-system/compile/bundles.config.extensions.json b/build-system/compile/bundles.config.extensions.json
index 114bb142f3f7..09e7ae84cc33 100644
--- a/build-system/compile/bundles.config.extensions.json
+++ b/build-system/compile/bundles.config.extensions.json
@@ -482,6 +482,15 @@
     "version": "0.1",
     "latestVersion": "0.1"
   },
+  {
+    "name": "amp-gist",
+    "version": "1.0",
+    "options": {
+      "hasCss": true,
+      "bento": true,
+      "npm": true
+    }
+  },
   {
     "name": "amp-google-document-embed",
     "version": "0.1",
diff --git a/extensions/amp-gist/1.0/README.md b/extensions/amp-gist/1.0/README.md
new file mode 100644
index 000000000000..17c6c703da91
--- /dev/null
+++ b/extensions/amp-gist/1.0/README.md
@@ -0,0 +1,187 @@
+# Bento Gist
+
+Creates an iframe and displays a [GitHub Gist](https://docs.github.com/en/github/writing-on-github/creating-gists).
+
+## Web Component
+
+You must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).
+
+### Import via npm
+
+```sh
+npm install @bentoproject/gist
+```
+
+```javascript
+import {defineElement as defineBentoGist} from '@bentoproject/gist';
+defineBentoGist();
+```
+
+### Include via `<script>`
+
+```html
+<script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script>
+<script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script>
+<script type="module" src="https://cdn.ampproject.org/v0/bento-gist-1.0.mjs" crossorigin="anonymous"></script>
+<script nomodule src="https://cdn.ampproject.org/v0/bento-gist-1.0.js" crossorigin="anonymous"></script>
+<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-gist-1.0.css" crossorigin="anonymous">
+```
+
+### Example
+
+<!--% example %-->
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <script
+      type="module"
+      async
+      src="https://cdn.ampproject.org/bento.mjs"
+    ></script>
+    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
+    <script
+      type="module"
+      async
+      src="https://cdn.ampproject.org/v0/bento-gist-1.0.mjs"
+    ></script>
+    <script
+      nomodule
+      async
+      src="https://cdn.ampproject.org/v0/bento-gist-1.0.js"
+    ></script>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.ampproject.org/v0/bento-gist-1.0.css"
+    />
+    <style>
+      bento-gist {
+        width: 300px;
+        height: 300px;
+      }
+    </style>
+  </head>
+  <body>
+    <bento-gist
+      id="my-track"
+      data-gistid="a19e811dcd7df10c4da0931641538497"
+    ></bento-gist>
+  </body>
+</html>
+```
+
+### Layout and style
+
+Each Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.
+
+```html
+<link
+  rel="stylesheet"
+  type="text/css"
+  href="https://cdn.ampproject.org/v0/bento-gist-1.0.css"
+/>
+```
+
+Alternatively, you may also make the light-weight pre-upgrade styles available inline:
+
+```html
+<style>
+  bento-gist {
+    display: block;
+    overflow: hidden;
+    position: relative;
+  }
+</style>
+```
+
+#### Container type
+
+The `bento-gist` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):
+
+```css
+bento-gist {
+  height: 100px;
+  width: 100%;
+}
+```
+
+### Attributes
+
+##### data-gistid
+
+The ID of the gist to embed.
+
+##### data-file (optional)
+
+If specified, display only one file in a gist.
+
+#### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"Github Gist"`.
+
+---
+
+## Preact/React Component
+
+### Import via npm
+
+```sh
+npm install @bentoproject/gist
+```
+
+```javascript
+import React from 'react';
+import {BentoGist} from '@bentoproject/gist/react';
+import '@bentoproject/gist/styles.css';
+
+function App() {
+  return <BentoGist gistId="a19e811dcd7df10c4da0931641538497"></BentoGist>;
+}
+```
+
+### Layout and style
+
+#### Container type
+
+The `BentoGist` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:
+
+```jsx
+<BentoGist
+  style={{height: 500}}
+  gistId="a19e811dcd7df10c4da0931641538497"
+  file="index.js"
+></BentoGist>
+```
+
+Or via `className`:
+
+```jsx
+<BentoGist
+  className="custom-styles"
+  gistId="a19e811dcd7df10c4da0931641538497"
+  file="index.js"
+></BentoGist>
+```
+
+```css
+.custom-styles {
+  height: 100px;
+  width: 100%;
+}
+```
+
+### Props
+
+##### gistId
+
+The ID of the gist to embed.
+
+##### file (optional)
+
+If specified, display only one file in a gist.
+
+#### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"Github Gist"`.
diff --git a/extensions/amp-gist/1.0/amp-gist.css b/extensions/amp-gist/1.0/amp-gist.css
new file mode 100644
index 000000000000..85b902614762
--- /dev/null
+++ b/extensions/amp-gist/1.0/amp-gist.css
@@ -0,0 +1,17 @@
+/*
+ * Pre-upgrade:
+ * - display:block element
+ * - size-defined element
+ */
+amp-gist {
+  display: block;
+  overflow: hidden;
+  position: relative;
+}
+
+/* Pre-upgrade: size-defining element - hide children. */
+amp-gist:not(.i-amphtml-built)
+  > :not([placeholder]):not(.i-amphtml-svc) {
+  display: none;
+  content-visibility: hidden;
+}
diff --git a/extensions/amp-gist/1.0/amp-gist.js b/extensions/amp-gist/1.0/amp-gist.js
new file mode 100644
index 000000000000..53304319a51d
--- /dev/null
+++ b/extensions/amp-gist/1.0/amp-gist.js
@@ -0,0 +1,40 @@
+import {Layout_Enum} from '#core/dom/layout';
+
+import {isExperimentOn} from '#experiments';
+
+import {userAssert} from '#utils/log';
+
+import {BaseElement} from './base-element';
+
+import {CSS} from '../../../build/amp-gist-1.0.css';
+
+/** @const {string} */
+const TAG = 'amp-gist';
+
+class AmpGist extends BaseElement {
+  /** @override */
+  init() {
+    return {
+      'requestResize': (height) => this.attemptChangeHeight(height),
+    };
+  }
+
+  /** @override @nocollapse */
+  static getPreconnects() {
+    return ['https://gist.github.com'];
+  }
+
+  /** @override */
+  isLayoutSupported(layout) {
+    userAssert(
+      isExperimentOn(this.win, 'bento') ||
+        isExperimentOn(this.win, 'bento-gist'),
+      'expected global "bento" or specific "bento-gist" experiment to be enabled'
+    );
+    return layout == Layout_Enum.FIXED_HEIGHT;
+  }
+}
+
+AMP.extension(TAG, '1.0', (AMP) => {
+  AMP.registerElement(TAG, AmpGist, CSS);
+});
diff --git a/extensions/amp-gist/1.0/base-element.js b/extensions/amp-gist/1.0/base-element.js
new file mode 100644
index 000000000000..035b6489dcc5
--- /dev/null
+++ b/extensions/amp-gist/1.0/base-element.js
@@ -0,0 +1,20 @@
+import {PreactBaseElement} from '#preact/base-element';
+
+import {BentoGist} from './component';
+
+export class BaseElement extends PreactBaseElement {}
+
+/** @override */
+BaseElement['Component'] = BentoGist;
+
+/** @override */
+BaseElement['props'] = {
+  'gistId': {attr: 'data-gistid'},
+  'file': {attr: 'data-file'},
+};
+
+/** @override */
+BaseElement['layoutSizeDefined'] = true;
+
+/** @override */
+BaseElement['usesShadowDom'] = true;
diff --git a/extensions/amp-gist/1.0/component.js b/extensions/amp-gist/1.0/component.js
new file mode 100644
index 000000000000..411033fe7a2d
--- /dev/null
+++ b/extensions/amp-gist/1.0/component.js
@@ -0,0 +1,66 @@
+import {MessageType_Enum, deserializeMessage} from '#core/3p-frame-messaging';
+
+import * as Preact from '#preact';
+import {useCallback, useEffect, useMemo, useRef, useState} from '#preact';
+import {ProxyIframeEmbed} from '#preact/component/3p-frame';
+
+const TYPE = 'github';
+const DEFAULT_TITLE = 'Github Gist';
+const FULL_HEIGHT = '100%';
+
+/**
+ * @param {!BentoGist.Props} props
+ * @return {PreactDef.Renderable}
+ */
+export function BentoGist({
+  gistId,
+  file,
+  title = DEFAULT_TITLE,
+  requestResize,
+  style,
+  ...rest
+}) {
+  const iframeRef = useRef(null);
+  const [height, setHeight] = useState(null);
+  const messageHandler = useCallback(
+    (event) => {
+      const data = deserializeMessage(event.data);
+      if (data['type'] == MessageType_Enum.EMBED_SIZE) {
+        const height = data['height'];
+        if (requestResize) {
+          requestResize(height);
+          setHeight(FULL_HEIGHT);
+        } else {
+          setHeight(height);
+        }
+      }
+    },
+    [requestResize]
+  );
+  useEffect(() => {
+    /** Unmount Procedure */
+    return () => {
+      // Release iframe resources
+      iframeRef.current = null;
+    };
+  }, []);
+  const options = useMemo(
+    () => ({
+      gistid: gistId,
+      file,
+    }),
+    [gistId, file]
+  );
+
+  return (
+    <ProxyIframeEmbed
+      title={title}
+      options={options}
+      ref={iframeRef}
+      type={TYPE}
+      messageHandler={messageHandler}
+      style={height ? {...style, height} : style}
+      {...rest}
+    />
+  );
+}
diff --git a/extensions/amp-gist/1.0/component.type.js b/extensions/amp-gist/1.0/component.type.js
new file mode 100644
index 000000000000..e571f19c1d86
--- /dev/null
+++ b/extensions/amp-gist/1.0/component.type.js
@@ -0,0 +1,15 @@
+/** @externs */
+
+/** @const */
+var BentoGistDef = {};
+
+/**
+ * @typedef {{
+ *   onLoad: (function():undefined|undefined),
+ *   requestResize: (function(number):*|undefined),
+ *   title: (string|undefined),
+ *   gistId: (string),
+ *   file: (string|undefined),
+ * }}
+ */
+BentoGistDef.Props;
diff --git a/extensions/amp-gist/1.0/storybook/Basic.amp.js b/extensions/amp-gist/1.0/storybook/Basic.amp.js
new file mode 100644
index 000000000000..74286269b458
--- /dev/null
+++ b/extensions/amp-gist/1.0/storybook/Basic.amp.js
@@ -0,0 +1,33 @@
+import {withAmp} from '@ampproject/storybook-addon';
+
+import * as Preact from '#preact';
+
+export default {
+  title: 'amp-gist-1_0',
+  decorators: [withAmp],
+  parameters: {
+    extensions: [{name: 'amp-gist', version: '1.0'}],
+    experiments: ['bento'],
+  },
+};
+
+export const _default = () => {
+  return (
+    <amp-gist
+      data-gistid="b9bb35bc68df68259af94430f012425f"
+      layout="fixed-height"
+      height="300"
+    ></amp-gist>
+  );
+};
+
+export const singleFile = () => {
+  return (
+    <amp-gist
+      data-gistid="a19e811dcd7df10c4da0931641538497"
+      data-file="index.js"
+      layout="fixed-height"
+      height="65"
+    ></amp-gist>
+  );
+};
diff --git a/extensions/amp-gist/1.0/storybook/Basic.js b/extensions/amp-gist/1.0/storybook/Basic.js
new file mode 100644
index 000000000000..a173f05a5830
--- /dev/null
+++ b/extensions/amp-gist/1.0/storybook/Basic.js
@@ -0,0 +1,26 @@
+import * as Preact from '#preact';
+
+import {BentoGist} from '../component';
+export default {
+  title: 'Gist',
+  component: BentoGist,
+};
+
+export const _default = () => {
+  return (
+    <BentoGist
+      style={{height: 500}}
+      gistId="b9bb35bc68df68259af94430f012425f"
+    ></BentoGist>
+  );
+};
+
+export const singleFile = () => {
+  return (
+    <BentoGist
+      style={{height: 500}}
+      gistId="a19e811dcd7df10c4da0931641538497"
+      file="index.js"
+    ></BentoGist>
+  );
+};
diff --git a/extensions/amp-gist/1.0/test/test-amp-gist.js b/extensions/amp-gist/1.0/test/test-amp-gist.js
new file mode 100644
index 000000000000..a5fc3824e84c
--- /dev/null
+++ b/extensions/amp-gist/1.0/test/test-amp-gist.js
@@ -0,0 +1,63 @@
+import '../amp-gist';
+import {createElementWithAttributes} from '#core/dom';
+
+import {toggleExperiment} from '#experiments';
+
+import {waitFor} from '#testing/helpers/service';
+import {doNotLoadExternalResourcesInTest} from '#testing/iframe';
+
+describes.realWin(
+  'amp-gist-v1.0',
+  {
+    amp: {
+      extensions: ['amp-gist:1.0'],
+    },
+  },
+  (env) => {
+    let win;
+    let doc;
+    let element;
+
+    const waitForRender = async () => {
+      await element.buildInternal();
+      const loadPromise = element.layoutCallback();
+      const shadow = element.shadowRoot;
+      await waitFor(() => shadow.querySelector('iframe'), 'iframe mounted');
+      await loadPromise;
+    };
+
+    beforeEach(async () => {
+      win = env.win;
+      doc = win.document;
+      toggleExperiment(win, 'bento-gist', true, true);
+
+      // Override global window here because Preact uses global `createElement`.
+      doNotLoadExternalResourcesInTest(window, env.sandbox);
+    });
+
+    it('renders', async () => {
+      element = createElementWithAttributes(win.document, 'amp-gist', {
+        'data-gistid': 'b9bb35bc68df68259af94430f012425f',
+        'height': 500,
+        'layout': 'fixed-height',
+      });
+      doc.body.appendChild(element);
+      await waitForRender();
+
+      expect(element.shadowRoot.querySelector('iframe').src).not.to.be.null;
+    });
+
+    it('renders with specific file', async () => {
+      element = createElementWithAttributes(win.document, 'amp-gist', {
+        'data-gistid': 'a19e811dcd7df10c4da0931641538497',
+        'data-file': 'index.js',
+        'height': 500,
+        'layout': 'fixed-height',
+      });
+      doc.body.appendChild(element);
+      await waitForRender();
+
+      expect(element.shadowRoot.querySelector('iframe').src).not.to.be.null;
+    });
+  }
+);
diff --git a/extensions/amp-gist/1.0/test/test-component.js b/extensions/amp-gist/1.0/test/test-component.js
new file mode 100644
index 000000000000..b5eab96c6e19
--- /dev/null
+++ b/extensions/amp-gist/1.0/test/test-component.js
@@ -0,0 +1,46 @@
+import {mount} from 'enzyme';
+
+import * as Preact from '#preact';
+
+import {BentoGist} from '../component';
+
+describes.sandboxed('BentoGist preact component v1.0', {}, () => {
+  it('should render', () => {
+    const wrapper = mount(
+      <BentoGist
+        gistId="b9bb35bc68df68259af94430f012425f"
+        style={{
+          'height': '600px',
+        }}
+      />
+    );
+
+    const iframe = wrapper.find('iframe');
+
+    expect(iframe.prop('src')).to.equal(
+      'http://ads.localhost:9876/dist.3p/current/frame.max.html'
+    );
+    expect(wrapper.find('iframe').prop('style').width).to.equal('100%');
+    expect(wrapper.find('iframe').prop('style').height).to.equal('100%');
+  });
+
+  it('should render with specific file', () => {
+    const wrapper = mount(
+      <BentoGist
+        gistId="a19e811dcd7df10c4da0931641538497"
+        file="index.js"
+        style={{
+          'height': '65px',
+        }}
+      />
+    );
+
+    const iframe = wrapper.find('iframe');
+
+    expect(iframe.prop('src')).to.equal(
+      'http://ads.localhost:9876/dist.3p/current/frame.max.html'
+    );
+    expect(wrapper.find('iframe').prop('style').width).to.equal('100%');
+    expect(wrapper.find('iframe').prop('style').height).to.equal('100%');
+  });
+});
diff --git a/extensions/amp-gist/1.0/test/validator-amp-gist.html b/extensions/amp-gist/1.0/test/validator-amp-gist.html
new file mode 100644
index 000000000000..cf19939f00af
--- /dev/null
+++ b/extensions/amp-gist/1.0/test/validator-amp-gist.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html ⚡ lang="en">
+  <!-- prettier-ignore -->
+  <head>
+    <meta charset="utf-8">
+    <title>amp-gist example</title>
+    <link rel="canonical" href="/examples/amp-gist.html">
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <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>
+    <style amp-custom>
+      amp-gist {
+        color: red;
+      }
+    </style>
+    <script async custom-element="amp-gist" src="https://cdn.ampproject.org/v0/amp-gist-1.0.js"></script>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+  </head>
+  <body>
+     <!-- Valid: Embeds an entire gist from GitHub. -->
+    <amp-gist
+      layout="fixed-height"
+      height="241"
+      data-gistid="b9bb35bc68df68259af94430f012425f">
+    </amp-gist>
+
+    <!-- Valid: Embeds one file out of a gist from GitHub. -->
+    <amp-gist
+      layout="fixed-height"
+      height="197"
+      data-gistid="a19e811dcd7df10c4da0931641538497"
+      data-file="hi.c">
+    </amp-gist>
+
+    <!-- Invalid: missing data-gistid attribute. -->
+    <amp-gist
+      layout="fixed-height"
+      height="241">
+    </amp-gist>
+
+    <!-- Invalid: illegal layout. -->
+    <amp-gist
+      layout="responsive"
+      height="241"
+      data-gistid="b9bb35bc68df68259af94430f012425f">
+    </amp-gist>
+  </body>
+</html>
diff --git a/extensions/amp-gist/1.0/test/validator-amp-gist.out b/extensions/amp-gist/1.0/test/validator-amp-gist.out
new file mode 100644
index 000000000000..86bb30e6e5c1
--- /dev/null
+++ b/extensions/amp-gist/1.0/test/validator-amp-gist.out
@@ -0,0 +1,54 @@
+FAIL
+|  <!DOCTYPE html>
+|  <html ⚡ lang="en">
+|    <!-- prettier-ignore -->
+|    <head>
+|      <meta charset="utf-8">
+|      <title>amp-gist example</title>
+|      <link rel="canonical" href="/examples/amp-gist.html">
+|      <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+|      <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>
+|      <style amp-custom>
+|        amp-gist {
+|          color: red;
+|        }
+|      </style>
+|      <script async custom-element="amp-gist" src="https://cdn.ampproject.org/v0/amp-gist-1.0.js"></script>
+>>     ^~~~~~~~~
+amp-gist/1.0/test/validator-amp-gist.html:15:4 The extension 'amp-gist' is referenced at version '1.0' which is an invalid version. Please use a valid version of this extension. (see https://amp.dev/documentation/components/amp-gist)
+|      <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    </head>
+|    <body>
+|       <!-- Valid: Embeds an entire gist from GitHub. -->
+|      <amp-gist
+|        layout="fixed-height"
+|        height="241"
+|        data-gistid="b9bb35bc68df68259af94430f012425f">
+|      </amp-gist>
+|
+|      <!-- Valid: Embeds one file out of a gist from GitHub. -->
+|      <amp-gist
+|        layout="fixed-height"
+|        height="197"
+|        data-gistid="a19e811dcd7df10c4da0931641538497"
+|        data-file="hi.c">
+|      </amp-gist>
+|
+|      <!-- Invalid: missing data-gistid attribute. -->
+|      <amp-gist
+>>     ^~~~~~~~~
+amp-gist/1.0/test/validator-amp-gist.html:35:4 The mandatory attribute 'data-gistid' is missing in tag 'amp-gist'. (see https://amp.dev/documentation/components/amp-gist/)
+|        layout="fixed-height"
+|        height="241">
+|      </amp-gist>
+|
+|      <!-- Invalid: illegal layout. -->
+|      <amp-gist
+>>     ^~~~~~~~~
+amp-gist/1.0/test/validator-amp-gist.html:41:4 The specified layout 'RESPONSIVE' is not supported by tag 'amp-gist'. (see https://amp.dev/documentation/components/amp-gist/)
+|        layout="responsive"
+|        height="241"
+|        data-gistid="b9bb35bc68df68259af94430f012425f">
+|      </amp-gist>
+|    </body>
+|  </html>
\ No newline at end of file