{"action":"created","issue":{"url":"https://api.github.com/repos/varvet/components/issues/10","repository_url":"https://api.github.com/repos/varvet/components","labels_url":"https://api.github.com/repos/varvet/components/issues/10/labels{/name}","comments_url":"https://api.github.com/repos/varvet/components/issues/10/comments","events_url":"https://api.github.com/repos/varvet/components/issues/10/events","html_url":"https://github.com/varvet/components/pull/10","id":345304489,"node_id":"MDExOlB1bGxSZXF1ZXN0MjA0NDkxNzMz","number":10,"title":"Style guide","user":{"login":"jensljungblad","id":271354,"node_id":"MDQ6VXNlcjI3MTM1NA==","avatar_url":"https://avatars3.githubusercontent.com/u/271354?v=4","gravatar_id":"","url":"https://api.github.com/users/jensljungblad","html_url":"https://github.com/jensljungblad","followers_url":"https://api.github.com/users/jensljungblad/followers","following_url":"https://api.github.com/users/jensljungblad/following{/other_user}","gists_url":"https://api.github.com/users/jensljungblad/gists{/gist_id}","starred_url":"https://api.github.com/users/jensljungblad/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jensljungblad/subscriptions","organizations_url":"https://api.github.com/users/jensljungblad/orgs","repos_url":"https://api.github.com/users/jensljungblad/repos","events_url":"https://api.github.com/users/jensljungblad/events{/privacy}","received_events_url":"https://api.github.com/users/jensljungblad/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-07-27T17:21:12Z","updated_at":"2018-09-25T11:06:18Z","closed_at":null,"author_association":"CONTRIBUTOR","pull_request":{"url":"https://api.github.com/repos/varvet/components/pulls/10","html_url":"https://github.com/varvet/components/pull/10","diff_url":"https://github.com/varvet/components/pull/10.diff","patch_url":"https://github.com/varvet/components/pull/10.patch"},"body":"This PR explores adding a style guide.\r\n\r\n- [x] Merge #9 and rebase\r\n- [x] Ability to render markdown files\r\n- [x] Ability to render markdown files with erb\r\n- [x] Page route\r\n- [x] Add page navigation\r\n- [x] Add a way to render examples\r\n  - [x] Print the rendered component in an iframe\r\n  - [x] Print the code for rendering the component with syntax highlighting\r\n  - [x] Make the iframe the correct size for the component. The width should be 100% and the height should have a maximum height, but otherwise adjust based on the height of the content. For components that are 100% wide themselves, it would be useful to be able to pass a width to the example.\r\n- [x] Make a home page for the style guide \r\n- [x] Make the component generator generate a style guide page\r\n- [x] Make an install generator to set up the style guide\r\n- [x] Decide what should be generated by default\r\n- [ ] Make it pretty\r\n- [ ] There's an issue with including component css, only the first component gets included\r\n- [ ] There seems to be an issue with the height of the iframe getting set to 150 even for small components\r\n\r\nThere are currently issues with both `redcarpet` and `rouge`, with them spitting out a lot of warnings. Hopefully new releases of both gems will fix those. There are also alternatives such as `kramdown` and `coderay` available.\r\n\r\n<details>\r\n<summary>Original idea</summary>\r\nWhen it comes to printing the code for rendering the component, my current idea is to do something like this:\r\n\r\n```ruby\r\nclass ExampleComponent\r\n  has_many :examples do\r\n    attribute :source\r\n  end\r\n\r\n  # override this method...\r\n  def examples(value = nil, attributes = nil, &block)\r\n    if block\r\n      # i suppose this will be the value variable in fact, but still...\r\n      attributes[:source] = block.source # capture the content of the block somehow...\r\n    end\r\n    super\r\n  end\r\nend\r\n```\r\n\r\nMight need a gem to get the source of the block: https://github.com/banister/method_source. It's possible to do with `#source_location` as well but that means parsing the file, which seems a bit silly. Yet another solution would be to pass it as a string or something and then eval it but that sounds like a worse solution! \r\n\r\n**Update**: Unfortunately the gems available can't extract the source of an `erb` block, only pure Ruby blocks.. Another issue is that you can't print `erb` markdown blocks without them getting evaluated.\r\n</details>\r\n\r\n<hr>\r\n\r\nThe way examples are implemented is through markdown, similar to https://www.catalog.style. That is:\r\n\r\n````markdown\r\n# Alert\r\n\r\nProvide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.\r\n\r\n```example\r\n<%= component \"alert\", message: \"Something went right!\", context: \"success\" %>\r\n```\r\n\r\n```example\r\n<%= component \"alert\", message: \"Something went wrong!\", context: \"danger\" %>\r\n```\r\n````\r\n\r\nThat would a) render the component and b) render the `erb` source code. In order to do this, I think reversing the processing order should do the trick. That is, first process the template using markdown, then erb.\r\n\r\nTo test this PR, check out the repo, run `bin/rails server` and navigate to `http://localhost:3000/styleguide`."},"comment":{"url":"https://api.github.com/repos/varvet/components/issues/comments/424300834","html_url":"https://github.com/varvet/components/pull/10#issuecomment-424300834","issue_url":"https://api.github.com/repos/varvet/components/issues/10","id":424300834,"node_id":"MDEyOklzc3VlQ29tbWVudDQyNDMwMDgzNA==","user":{"login":"jimmynordlund","id":32401,"node_id":"MDQ6VXNlcjMyNDAx","avatar_url":"https://avatars1.githubusercontent.com/u/32401?v=4","gravatar_id":"","url":"https://api.github.com/users/jimmynordlund","html_url":"https://github.com/jimmynordlund","followers_url":"https://api.github.com/users/jimmynordlund/followers","following_url":"https://api.github.com/users/jimmynordlund/following{/other_user}","gists_url":"https://api.github.com/users/jimmynordlund/gists{/gist_id}","starred_url":"https://api.github.com/users/jimmynordlund/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jimmynordlund/subscriptions","organizations_url":"https://api.github.com/users/jimmynordlund/orgs","repos_url":"https://api.github.com/users/jimmynordlund/repos","events_url":"https://api.github.com/users/jimmynordlund/events{/privacy}","received_events_url":"https://api.github.com/users/jimmynordlund/received_events","type":"User","site_admin":false},"created_at":"2018-09-25T11:06:18Z","updated_at":"2018-09-25T11:06:18Z","author_association":"NONE","body":"@jensljungblad Pushed some updated styling with a new, more muted colour scheme and and a nav that supports deeper nesting and clearly differentiates between what’s clickable and what’s not. There’s also a max-width on the main container now. Feels much better. \r\n\r\nThe only thing I’m not entirely sold on is the left alignment of the component preview in the iframe. I like it centred. I feel like the “misalignment” is a plus, that it’s its own thing, a preview of something that lives somewhere else and therefore should break the “flow” and just be aligned against its own container. It’s also not as jarring now that the max-width of the main container is capped. But, all in all, minor detail. I’m fine with either really."}}
{"actor":{"display_login":"jimmynordlund"}}