Amphtml: Create a GitHub gist extension

[cramforce]

Background

The AMP HTML library includes many extended components that bring third-party functionality as first-class components in AMP.

Motivation

We like to introduce a new component to integrate Github gist in AMP. This would allow developers to include their code from Github in their AMP pages.

Implementation strategy

• create <amp-gist data-src="https://gist.github.com/cramforce/c5d8ae62be229291e421.js"></amp-gist>.
• It will be very similar to amp-twitter
• This creates a 3p frame
• Then creates 3p/github.js also very similar to 3p/twitter.js. The JS loading can be simpler in the initial version (Just insert the script tag)
• Try to figure out when the document has the final height
• Then call

context.updateDimensions(
        body./*OK*/offsetWidth,
        body./*OK*/offsetHeight + /* margins */ 20);

Step by step

• [ ] Claim this issue by adding a comment below. Please only claim this bug if you plan on starting work in the next day or so.
• [ ] If you aren't too familiar with Git/GitHub, see the Getting Started End-to-End Guide for an intro to Git & GitHub, and how to get a copy of the code. You can also refer to the Quick Start Guide for the necessary setup steps with less explanation than the End-to-End guide.
• [ ] Follow the instructions for building AMP.
• [ ] [Create a Git branch](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#create-a-git-branch) for making your changes.
• [ ] Read up on How to build an AMP extension
• [ ] Follow the Implementation strategy from above.
• [ ] [Commit your changes](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#edit-files-and-commit-them) frequently.
• [ ] [Push your changes to GitHub](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#push-your-changes-to-your-github-fork).
• [ ] [Create a Pull Request](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#send-a-pull-request-ie-request-a-code-review). Mention closes Issue #829 in the description.
• [ ] Assign @aghassemi as the reviewer
• [ ] [Respond to your reviewer's comments](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#respond-to-pull-request-comments) (if any).

Once approved, your changes will be merged. ⚡⚡⚡Congrats on making your first contribution to the AMP Project!⚡⚡⚡ You'll be able to see it live across the web soon!

Thanks, and we hope to see more contributions from you soon.

Questions?

If you have questions ask in this issue or on your Pull Request (mentioning @aghassemi) or see the How to get help section of the Getting Started guide.

[niutech]

From what I see, the work has started in https://github.com/jmadler/amphtml/tree/amp-github

[rudygalfi]

@jmadler Can you give an update on the status of this?

[mkhatib]

@jmadler have you managed to get this to work?

[pbakaus]

Quick update, I just learned that you can append ".pibb" to any Gist url, which will render the contents directly in HTML (interestingly, without head but who cares). This makes it viable to use amp-iframe to insert Gists into a page, but we still don't know the resulting height. Thoughts?

[levidurfee]

Hello, is this up for grabs? If so, I would like to give it a shot :)

[pbakaus]

Go for it!

On Thu, Mar 16, 2017, 12:48 PM Levi Durfee [e-mail] wrote:

Hey guys, is this up for grabs? If so, I would like to give it a shot :)

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/ampproject/amphtml/issues/829#issuecomment-286933623,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AACn_K-ZqOfzNutdL0VhQqebCg6wOlHJks5rmJTbgaJpZM4GZ1x_
.