{"action":"created","issue":{"url":"https://api.github.com/repos/primer/components/issues/333","repository_url":"https://api.github.com/repos/primer/components","labels_url":"https://api.github.com/repos/primer/components/issues/333/labels{/name}","comments_url":"https://api.github.com/repos/primer/components/issues/333/comments","events_url":"https://api.github.com/repos/primer/components/issues/333/events","html_url":"https://github.com/primer/components/issues/333","id":375176034,"node_id":"MDU6SXNzdWUzNzUxNzYwMzQ=","number":333,"title":"Markdown component(s)","user":{"login":"shawnbot","id":113896,"node_id":"MDQ6VXNlcjExMzg5Ng==","avatar_url":"https://avatars2.githubusercontent.com/u/113896?v=4","gravatar_id":"","url":"https://api.github.com/users/shawnbot","html_url":"https://github.com/shawnbot","followers_url":"https://api.github.com/users/shawnbot/followers","following_url":"https://api.github.com/users/shawnbot/following{/other_user}","gists_url":"https://api.github.com/users/shawnbot/gists{/gist_id}","starred_url":"https://api.github.com/users/shawnbot/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/shawnbot/subscriptions","organizations_url":"https://api.github.com/users/shawnbot/orgs","repos_url":"https://api.github.com/users/shawnbot/repos","events_url":"https://api.github.com/users/shawnbot/events{/privacy}","received_events_url":"https://api.github.com/users/shawnbot/received_events","type":"User","site_admin":true},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-10-29T19:19:19Z","updated_at":"2018-12-17T18:22:53Z","closed_at":null,"author_association":"MEMBER","body":"It would be nice to have a markdown component to replace our use of the `markdown-body` class. We might be able to hack this with:\r\n\r\n```jsx\r\nconst markdownCSS = sass`@import \"primer-markdown/index.scss\";`\r\n\r\nconst Markdown = ({className, ...rest}) => (\r\n  <div className={classnames('markdown-body', className)} {...rest} />\r\n)\r\n\r\nexport withSystemProps(styled(Markdown)`${markdownCSS}`, COMMON)\r\n```\r\n\r\nIdeally, though, we'd port the CSS over. To support MDX, we could take a slightly different tack:\r\n\r\n```jsx\r\nimport {MDXProvider} from '@mdx-js/tag'\r\n\r\nconst components = {\r\n  a: Link,\r\n  h1: props => <Heading is='h1' fontSize={6} {...props} />,\r\n  // etc.\r\n}\r\n\r\nconst MarkdownProvider = props => (\r\n  <MDXProvider components={components} {...props} />\r\n)\r\n\r\nexport withSystemProps(MarkdownProvider, COMMON)\r\n```"},"comment":{"url":"https://api.github.com/repos/primer/components/issues/comments/447946571","html_url":"https://github.com/primer/components/issues/333#issuecomment-447946571","issue_url":"https://api.github.com/repos/primer/components/issues/333","id":447946571,"node_id":"MDEyOklzc3VlQ29tbWVudDQ0Nzk0NjU3MQ==","user":{"login":"shawnbot","id":113896,"node_id":"MDQ6VXNlcjExMzg5Ng==","avatar_url":"https://avatars2.githubusercontent.com/u/113896?v=4","gravatar_id":"","url":"https://api.github.com/users/shawnbot","html_url":"https://github.com/shawnbot","followers_url":"https://api.github.com/users/shawnbot/followers","following_url":"https://api.github.com/users/shawnbot/following{/other_user}","gists_url":"https://api.github.com/users/shawnbot/gists{/gist_id}","starred_url":"https://api.github.com/users/shawnbot/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/shawnbot/subscriptions","organizations_url":"https://api.github.com/users/shawnbot/orgs","repos_url":"https://api.github.com/users/shawnbot/repos","events_url":"https://api.github.com/users/shawnbot/events{/privacy}","received_events_url":"https://api.github.com/users/shawnbot/received_events","type":"User","site_admin":true},"created_at":"2018-12-17T18:22:53Z","updated_at":"2018-12-17T18:22:53Z","author_association":"MEMBER","body":"I also really like how the (now defunkt) [MDXC](http://mdxc.reactarmory.com/) had \"native\" support for a `<markdown>` element that allowed you to nest markdown inside HTML or JSX like so:\r\n\r\n```\r\n# Title\r\n\r\n<Wrapper>\r\n  <markdown>\r\n    ## Subtitle\r\n    Paragraph\r\n  </markdown>\r\n</Wrapper>\r\n```\r\n\r\nProviding this as a runtime component would require shipping (most? all? of) the mdx runtime, but I think it'd be possible in a webpack loader with a HAST plugin that would look for `<markdown>` elements and process their contents as mdx (or just markdown). /cc @jxnblk because we were talking about this last week 😁 "}}
{"actor":{"display_login":"shawnbot"}}