# Implement Gist onebox

**URL:** https://meta.discourse.org/t/implement-gist-onebox/14041
**Category:** Feature
**Tags:** rfc, spec
**Created:** [March 24, 2014, 12:18am UTC](https://meta.discourse.org/t/implement-gist-onebox/14041 "2014-03-24T00:18:02Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [March 24, 2014, 12:18am UTC](https://meta.discourse.org/t/implement-gist-onebox/14041/1 "2014-03-24T00:18:03Z")

</div>

We had a naive implementation for Gist oneboxes, however it failed miserably due to dynamic loading:

In particular this:

> <https://stackoverflow.com/questions/9154026/jquery-dynamically-load-a-gist-embed>

To resolve this issue:

The [Gist oneboxer](https://github.com/discourse/onebox/blob/master/lib/onebox/engine/github_gist_onebox.rb) should use a similar approach to the [blob oneboxer](https://github.com/discourse/onebox/blob/master/lib/onebox/engine/github_blob_onebox.rb)

1. It must take care of truncating huge files
2. It must take care of displaying gists with multiple files

Syntax highlighting is to be handled by our pre-existing syntax highlighting engine, all the onebox is to do is to decorate divs with the guessed syntax.

* * *

I thought of possibly using therubyracer to evaluate the gist js, but it inserts stylesheets. Additionally there is a possibly iframe approach but it will be both slower (and impact rendering) and more fragile.

---

<div class="post-metadata">

### Author: ![Guilherme\_Carreiro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/guilherme_carreiro/32/36193_2.png) [@Guilherme\_Carreiro](https://meta.discourse.org/u/Guilherme_Carreiro)
#### Post date: [November 23, 2014, 10:07pm UTC](https://meta.discourse.org/t/implement-gist-onebox/14041/2 "2014-11-23T22:07:43Z")

</div>

I’m working on it.

It’s relevant, right?  
(I’m asking because is an “old topic” rs)

Thanks.

---

<div class="post-metadata">

### Author: ![Guilherme\_Carreiro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/guilherme_carreiro/32/36193_2.png) [@Guilherme\_Carreiro](https://meta.discourse.org/u/Guilherme_Carreiro)
#### Post date: [November 24, 2014, 11:25pm UTC](https://meta.discourse.org/t/implement-gist-onebox/14041/3 "2014-11-24T23:25:45Z")

</div>

Hi,

I was following a similar approach to the blob oneboxer, that is to make requests to “Gist API” and build a HTML component on server side. It sounded clean for me.

However, I’m concerned about something that read here ([GitHub REST API documentation - GitHub Docs](https://developer.github.com/v3/#rate-limiting)):  
“For unauthenticated requests, the rate limit allows you to make up to 60 requests per hour.”

I think that is a bad idea to make requests to Gist API from server side, considering that low limit. So, what do you think about to make these requests from the client side  
@sam?

Some JavaScript would be added in the mustache templete to keep the component decoupled.

Thanks!

---

<div class="post-metadata">

### Author: ![mcwumbly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mcwumbly/32/103861_2.png) [@mcwumbly](https://meta.discourse.org/u/mcwumbly)
#### Post date: [November 24, 2014, 11:45pm UTC](https://meta.discourse.org/t/implement-gist-onebox/14041/4 "2014-11-24T23:45:00Z")

</div>

I think the onebox content is all baked into the cooked HTML, which means that the server only needs to hit the Gist API once for any given link.

---

<div class="post-metadata">

### Author: ![Guilherme\_Carreiro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/guilherme_carreiro/32/36193_2.png) [@Guilherme\_Carreiro](https://meta.discourse.org/u/Guilherme_Carreiro)
#### Post date: [November 25, 2014, 12:04am UTC](https://meta.discourse.org/t/implement-gist-onebox/14041/5 "2014-11-25T00:04:52Z")

</div>

Hmm… I don’t think so…

The flow that I’m thinking is:

1. The “Gist URL” is detected in the message:  
[https://gist.github.com/karreiro/208fdd59fc4b4c39283b](https://gist.github.com/karreiro/208fdd59fc4b4c39283b)

2. We detect the URL and the sha: 208fdd59fc4b4c39283b

3. We make a request to “Gist API” to obtain the information:  
[https://api.github.com/gists/GIST\_ID](https://api.github.com/gists/GIST_ID)  
[https://api.github.com/gists/208fdd59fc4b4c39283b](https://api.github.com/gists/208fdd59fc4b4c39283b)

Finally, we manipulate the JSON response to cook the HTML through a mustache template, that would be something like this:

```
<h4>
  <a href="{{link}}" target="_blank">{{title}}</a>
</h4>
{{#gist_files}}
  <section>
    <pre>
      <h5>
        {{filename}}
      </h5>
      <code class='{{language}}'>
        {{content}}
      </code>
      {{#truncated}}
        This file has been truncated. <a href="{{link}}" target="_blank">show original</a>
      {{/truncated}}
    </pre>
  </section>
{{/gist_files}}

```

So, every time that we detect a Gist URL, we’ll need to make a different request to “Gist API” to obtain specific information.

Am I right? .-.

Thanks! 🙂

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [November 25, 2014, 12:17am UTC](https://meta.discourse.org/t/implement-gist-onebox/14041/6 "2014-11-25T00:17:42Z")

</div>

Correct, so a condition where users on your site are posting more than 60 gists per hour in posts would be … presumably … quite rare.

Also … we are open to a PR that wires in GitHub OAuth stuff if you really want it.

---

<div class="post-metadata">

### Author: ![Guilherme\_Carreiro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/guilherme_carreiro/32/36193_2.png) [@Guilherme\_Carreiro](https://meta.discourse.org/u/Guilherme_Carreiro)
#### Post date: [November 25, 2014, 12:38am UTC](https://meta.discourse.org/t/implement-gist-onebox/14041/7 "2014-11-25T00:38:40Z")

</div>

Ohh! Now I realised what @mcwumbly said!

Thank you guys.

I’ll keep the server side approach, without the OAuth implementation, for while.

Thanks again. 😉

---

<div class="post-metadata">

### Author: ![Guilherme\_Carreiro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/guilherme_carreiro/32/36193_2.png) [@Guilherme\_Carreiro](https://meta.discourse.org/u/Guilherme_Carreiro)
#### Post date: [November 28, 2014, 1:41am UTC](https://meta.discourse.org/t/implement-gist-onebox/14041/8 "2014-11-28T01:41:14Z")

</div>

[https://github.com/discourse/onebox/pull/258](https://github.com/discourse/onebox/pull/258)

---

<div class="post-metadata">

### Author: ![digitalsurgeon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/digitalsurgeon/32/37288_2.png) [@digitalsurgeon](https://meta.discourse.org/u/digitalsurgeon)
#### Post date: [December 22, 2014, 12:22pm UTC](https://meta.discourse.org/t/implement-gist-onebox/14041/9 "2014-12-22T12:22:18Z")

</div>

Can we now mark this as closed/implemented?

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [December 22, 2014, 12:25pm UTC](https://meta.discourse.org/t/implement-gist-onebox/14041/10 "2014-12-22T12:25:29Z")

</div>

Nope,

> <https://gist.github.com/mitsuji/bd667abfd11b2be45612>

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [August 18, 2015, 7:52am UTC](https://meta.discourse.org/t/implement-gist-onebox/14041/11 "2015-08-18T07:52:04Z")

</div>

I guess it is working now! ⛅

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [August 18, 2015, 7:52am UTC](https://meta.discourse.org/t/implement-gist-onebox/14041/12 "2015-08-18T07:52:08Z")

</div>


