{"action":"created","issue":{"url":"https://api.github.com/repos/thepracticaldev/dev.to/issues/696","repository_url":"https://api.github.com/repos/thepracticaldev/dev.to","labels_url":"https://api.github.com/repos/thepracticaldev/dev.to/issues/696/labels{/name}","comments_url":"https://api.github.com/repos/thepracticaldev/dev.to/issues/696/comments","events_url":"https://api.github.com/repos/thepracticaldev/dev.to/issues/696/events","html_url":"https://github.com/thepracticaldev/dev.to/pull/696","id":361129684,"node_id":"MDExOlB1bGxSZXF1ZXN0MjE2MTc4NDQ5","number":696,"title":"Support RunKit preamble","user":{"login":"glebec","id":7230206,"node_id":"MDQ6VXNlcjcyMzAyMDY=","avatar_url":"https://avatars1.githubusercontent.com/u/7230206?v=4","gravatar_id":"","url":"https://api.github.com/users/glebec","html_url":"https://github.com/glebec","followers_url":"https://api.github.com/users/glebec/followers","following_url":"https://api.github.com/users/glebec/following{/other_user}","gists_url":"https://api.github.com/users/glebec/gists{/gist_id}","starred_url":"https://api.github.com/users/glebec/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/glebec/subscriptions","organizations_url":"https://api.github.com/users/glebec/orgs","repos_url":"https://api.github.com/users/glebec/repos","events_url":"https://api.github.com/users/glebec/events{/privacy}","received_events_url":"https://api.github.com/users/glebec/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2018-09-18T04:18:09Z","updated_at":"2018-09-19T20:07:51Z","closed_at":null,"author_association":"NONE","pull_request":{"url":"https://api.github.com/repos/thepracticaldev/dev.to/pulls/696","html_url":"https://github.com/thepracticaldev/dev.to/pull/696","diff_url":"https://github.com/thepracticaldev/dev.to/pull/696.diff","patch_url":"https://github.com/thepracticaldev/dev.to/pull/696.patch"},"body":"## What type of PR is this? (check all applicable)\r\n- [ ] Refactor\r\n- [x] Feature\r\n- [ ] Bug Fix\r\n- [ ] Documentation Update\r\n\r\n## Description\r\n\r\nRunKit is an embed for reader-editable JavaScript code snippets. Dev.to supports RunKit embeds but not the _preamble_, which is hidden setup code. This PR adds support for the preamble field, which can now be placed within the opening tag:\r\n\r\n```\r\n{% runkit\r\nconst secret = 'shhhh' // <- this part is new\r\n%}\r\nconsole.log(secret)\r\n{% endrunkit %}\r\n```\r\n\r\nReaders do not see the preamble directly, but can interact with any global variables initialized in it. This is ideal for tutorials / challenges, or just cleaning up imports & setup which are necessary but noisy.\r\n\r\nSome considerations:\r\n\r\n- I do not know Ruby, so there may be better ways of accomplishing this PR. Please sanity-check the code.\r\n- The existing JS had a superfluous if-check for `length` which was already implicit in the for loop. I removed it on principle.\r\n- This is not the only way in theory that the preamble could be supported, syntactically, but was the simplest way I could see. As a downside, if more arguments are ever desired for the RunKit tag, this would require refactoring.\r\n- Currently, the code leaves the preamble string in the DOM as a `data-preamble` attribute on the wrapping runkit `div`. It could be removed if desired, though it didn't seem necessary.\r\n\r\nIn addition, I changed the editor help guide to reflect this new feature. I will attach screenshots to demonstrate, though of course you can see the changes in the source as well.\r\n\r\n## Related Tickets & Documents\r\n\r\nCloses #662\r\n\r\n## Mobile & Desktop Screenshots/Recordings (if there are UI changes)\r\n\r\n![screen shot 2018-09-18 at 00 14 26](https://user-images.githubusercontent.com/7230206/45664127-48b00e80-bad8-11e8-974c-5dd99046fb92.jpg)\r\n![screen shot 2018-09-18 at 00 14 47](https://user-images.githubusercontent.com/7230206/45664128-48b00e80-bad8-11e8-8d08-fafa41439e02.jpg)\r\n![screen shot 2018-09-18 at 00 12 42](https://user-images.githubusercontent.com/7230206/45664124-451c8780-bad8-11e8-9208-2710249b8eec.jpg)\r\n![screen shot 2018-09-18 at 00 16 32](https://user-images.githubusercontent.com/7230206/45664129-48b00e80-bad8-11e8-8d57-1cec8f39a8a2.jpg)\r\n\r\n## Added to documentation?\r\n  - [ ] docs.dev.to\r\n  - [ ] readme\r\n  - [x] no documentation needed"},"comment":{"url":"https://api.github.com/repos/thepracticaldev/dev.to/issues/comments/422940760","html_url":"https://github.com/thepracticaldev/dev.to/pull/696#issuecomment-422940760","issue_url":"https://api.github.com/repos/thepracticaldev/dev.to/issues/696","id":422940760,"node_id":"MDEyOklzc3VlQ29tbWVudDQyMjk0MDc2MA==","user":{"login":"glebec","id":7230206,"node_id":"MDQ6VXNlcjcyMzAyMDY=","avatar_url":"https://avatars1.githubusercontent.com/u/7230206?v=4","gravatar_id":"","url":"https://api.github.com/users/glebec","html_url":"https://github.com/glebec","followers_url":"https://api.github.com/users/glebec/followers","following_url":"https://api.github.com/users/glebec/following{/other_user}","gists_url":"https://api.github.com/users/glebec/gists{/gist_id}","starred_url":"https://api.github.com/users/glebec/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/glebec/subscriptions","organizations_url":"https://api.github.com/users/glebec/orgs","repos_url":"https://api.github.com/users/glebec/repos","events_url":"https://api.github.com/users/glebec/events{/privacy}","received_events_url":"https://api.github.com/users/glebec/received_events","type":"User","site_admin":false},"created_at":"2018-09-19T20:07:51Z","updated_at":"2018-09-19T20:07:51Z","author_association":"NONE","body":"D'oh.\r\n\r\nUsing the `data-` attributes was just the first solution that occurred to me. The existing runkit embed injects raw text content into the wrapper div, and that seems to be secure, possibly because the liquid parser is sanitizing it or setting it as a text node? I can experiment with attempting something similar."}}
{"actor":{"display_login":"glebec"}}