✨ Bento port of amp-instagram

build-system/compile/bundles.config.js

@@ -687,6 +687,12 @@ exports.extensionBundles = [
     options: {hasCss: true},
     type: TYPES.MISC,
   },
+  {
+    name: 'amp-instagram',
+    version: '1.0',
+    latestVersion: '0.1',
+    type: TYPES.MISC,
+  },
   {
     name: 'amp-install-serviceworker',
     version: '0.1',

examples/instagram.amp.html

@@ -6,7 +6,7 @@
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
-  <script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
+  <script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-1.0.js"></script>
   <style amp-custom>
     body {
       background-color: white;

extensions/amp-instagram/1.0/amp-instagram.js

@@ -0,0 +1,55 @@
+/**
+ * Copyright 2020 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {Instagram} from './instagram';
+import {PreactBaseElement} from '../../../src/preact/base-element';
+import {isLayoutSizeDefined} from '../../../src/layout';
+
+/** @const {string} */
+const TAG = 'amp-instagram';
+
+class AmpInstagram extends PreactBaseElement {
+  /** @override */
+  init() {
+    return {
+      resize: (height) => {
+        this.forceChangeHeight(height);
+      },
+    };
+  }
+
+  /** @override */
+  isLayoutSupported(layout) {
+    return isLayoutSizeDefined(layout);
+  }
+}
+
+/** @override */
+AmpInstagram['Component'] = Instagram;
+
+/** @override */
+AmpInstagram['props'] = {
+  'shortcode': {attr: 'data-shortcode'},
+  'captioned': {attr: 'data-captioned'},
+  'alt': {attr: 'alt'},
+};
+
+/** @override */
+AmpInstagram['layoutSizeDefined'] = true;
+
+AMP.extension(TAG, '1.0', (AMP) => {
+  AMP.registerElement(TAG, AmpInstagram);
+});

extensions/amp-instagram/1.0/instagram.js

@@ -0,0 +1,89 @@
+/**
+ * Copyright 2020 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as Preact from '../../../src/preact';
+import {ContainWrapper} from '../../../src/preact/component';
+import {getData} from '../../../src/event-helper';
+import {useMountEffect} from '../../../src/preact/utils';
+import {useRef, useState} from '../../../src/preact';
+
+/**
+ * @param {!InstagramProps} props
+ * @return {PreactDef.Renderable}
+ */
+export function Instagram({shortcode, captioned, style, alt, resize}) {
+  const iframeRef = useRef(null);
+  const [heightStyle, setHeightStyle] = useState(null);
+  const [opacity, setOpacity] = useState(0);
+
+  /**
+   * Upon component mount, the Instagram post's height is received and applied.
+   */
+  useMountEffect(() => {
+    /**
+     * @param {Event} event
+     */
+    function handleMessage(event) {
+      if (
+        event.origin != 'https://www.instagram.com' ||
+        event.source != iframeRef.current.contentWindow
+      ) {
+        return;
+      }
+
+      const data = JSON.parse(getData(event));
+
+      if (data['type'] == 'MEASURE') {
+        if (typeof resize === 'function') {
+          resize(data['details']['height']);
+        } else {
+          setHeightStyle({'height': data['details']['height']});
+        }
+        setOpacity(1);
+      }
+    }
+
+    window.addEventListener('message', handleMessage);
+
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  });
+
+  return (
+    <ContainWrapper style={{...style, ...heightStyle}} layout size paint>
+      <iframe
+        ref={iframeRef}
+        src={
+          'https://www.instagram.com/p/' +
+          (encodeURIComponent(shortcode) || 'error') +
+          '/embed/' +
+          (captioned ? 'captioned/' : '') +
+          '?cr=1&v=12'
+        }
+        scrolling="no"
+        frameborder="0"
+        allowtransparency
+        title={alt}
+        style={{
+          width: '100%',
+          height: '100%',
+          opacity,
+        }}
+      />
+    </ContainWrapper>
+  );
+}

extensions/amp-instagram/1.0/instagram.type.js

@@ -0,0 +1,28 @@
+/**
+ * Copyright 2020 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/** @externs */
+
+/**
+ * @typedef {{
+ *   shortcode: string,
+ *   captioned: (boolean|undefined),
+ *   style: (Object|undefined),
+ *   alt: (string|undefined)
+ *   resize: (function|undefined)
+ * }}
+ */
+var InstagramProps;

extensions/amp-instagram/1.0/storybook/Basic.amp.js

@@ -0,0 +1,47 @@
+/**
+ * Copyright 2020 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {boolean, number, text, withKnobs} from '@storybook/addon-knobs';
+import {storiesOf} from '@storybook/preact';
+import {withA11y} from '@storybook/addon-a11y';
+import {withAmp} from '@ampproject/storybook-addon';
+
+// eslint-disable-next-line
+storiesOf('amp-instagram', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withA11y)
+  .addDecorator(withAmp)
+  .addParameters({
+    extensions: [{name: 'amp-instagram', version: '1.0'}],
+  })
+  .add('Default', () => {
+    const width = number('width', 500);
+    const height = number('height', 600);
+    const shortcode = text('shortcode', 'B8QaZW4AQY_');
+    const captioned = boolean('captioned');
+    const layout = text('layout', 'fixed');
+
+    return (
+      <amp-instagram
+        data-shortcode={shortcode}
+        data-captioned={captioned}
+        width={width}
+        height={height}
+        layout={layout}
+      ></amp-instagram>
+    );
+  });

extensions/amp-instagram/1.0/storybook/Basic.js

@@ -0,0 +1,42 @@
+/**
+ * Copyright 2020 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {Instagram} from '../instagram';
+import {boolean, number, text, withKnobs} from '@storybook/addon-knobs';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'Instagram',
+  component: Instagram,
+  decorators: [withA11y, withKnobs],
+};
+
+export const _default = () => {
+  const width = number('width', 500);
+  const height = number('height', 600);
+  const shortcode = text('shortcode', 'B8QaZW4AQY_');
+  const captioned = boolean('captioned');
+
+  return (
+    <Instagram
+      shortcode={shortcode}
+      style={{width, height}}
+      captioned={captioned}
+      alt="AMP Instagram Storybook Preact Example"
+    ></Instagram>
+  );
+};