update markdown instructions

index.html

@@ -24,6 +24,11 @@
       href="https://fonts.googleapis.com/css?family=Lato:300,400|Ubuntu:400,500&display=swap"
       rel="stylesheet"
     />
+    <link 
+      rel="stylesheet" 
+      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/styles/github.min.css" 
+    />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/highlight.min.js"></script>
 
     <title>Status Podcasts</title>
   </head>

src/css/markdown.css

@@ -0,0 +1,42 @@
+.result-pane > div {
+    top: 57px;
+    right: 0;
+    left: 50%;
+    bottom: 0;
+    overflow: auto;
+    padding: 10px;
+    padding-left: 20px;
+    color: #444;
+    font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
+    font-size: 16px;
+    line-height: 1.5em;
+}
+
+.markdown h1 {
+    margin: 2rem 0;
+}
+
+.markdown h2 {
+    margin: 2rem 0;
+}
+
+.markdown p {
+    margin: 2rem 0;
+}
+
+.markdown pre {
+  margin: 2rem 0;
+}
+
+.markdown ul {
+  margin-left: 2rem;
+}
+
+.markdown ul li {
+  margin: 1rem 0;
+}
+
+
+.markdown a {
+  color: #0000FF;
+}

src/pages/Upload.js

@@ -1,21 +1,53 @@
 import React, { Component } from 'react'
 import ReactMarkdown from 'react-markdown'
+import CodeBlock from './markdown/code-block'
+
+import '../css/markdown.css'
 
 const input = `
-## This is a header
+# Publish your Status Podcasts!
-<br>
-# And this is a paragraph
 
-hi there
+Follow the steps below to share your thoughts on The Status Network with others.
+
+<br/>
+
+## How can I publish my Status podcasts?
+* Create a podcast channel on SoundCloud, iTunes, SimpleCast, or any platform supporting [RSS](https://en.wikipedia.org/wiki/RSS).
+* Below are instructions for [SoundCloud](https://soundcloud.com/).
+  - Create a channel and enable [RSS feed](https://help.soundcloud.com/hc/en-us/articles/115003570048-Setting-up-your-podcast-s-RSS-feed).
+  - [Add tracks](https://help.soundcloud.com/hc/en-us/articles/115003451347) to your RSS feed.
+  - Send the URL of your RSS Feed to \`jinho@status.im\` (e.g., http://feeds.soundcloud.com/users/soundcloud:users:741837922/sounds.rss).
+  - The RSS should contain at least 1 episode.
+
+<br/>
+
+## I want to submit a pull request to add my podcasts
+
+* Submit a pull request to this [repo](https://github.com/jinhojang6/status-podcast) and update your RSS as below.
+
+\`\`\`js
+# src/data/podcasts.js
+export const podcasts = [
+  {
+    category: 'general',
+    name: 'Everything Status',
+    link: 'http://feeds.soundcloud.com/users/soundcloud:users:741837922/sounds.rss',
+    img:
+      'https://lh3.googleusercontent.com/W5mQLucviakmoHAFldUZbtFkTHw91vbcQk0w8o3woHEm9c4lpaMqi4cmY6bl3HmTSTnCxL5dvwwbDQa0eVGHrT16dhjEQmoAvg1Mk1Gjy-i3QtJjFRk1o5RxaWQ0BDfVn3oTntFF=w2400'
+  },
+  ...
+\`\`\`
 `
 
 class Upload extends Component {
   render() {
     return (
-      <div style={{ textAlign: 'left'}}>
+      <div style={{ textAlign: 'left', margin: '1rem !important'}} className="result-pane markdown">
         <ReactMarkdown 
+          className="result"
           source={input}
           escapeHtml={false}
+          renderers={{code: CodeBlock}}
         />
       </div>
     )

src/pages/markdown/code-block.js

@@ -0,0 +1,39 @@
+import React, { Component } from 'react'
+const hljs = window.hljs
+
+class CodeBlock extends Component {
+    constructor(props) {
+      super(props)
+      this.setRef = this.setRef.bind(this)
+    }
+  
+    setRef(el) {
+      this.codeEl = el
+    }
+  
+    componentDidMount() {
+      this.highlightCode()
+    }
+  
+    componentDidUpdate() {
+      this.highlightCode()
+    }
+  
+    highlightCode() {
+      hljs.highlightBlock(this.codeEl)
+    }
+  
+    render() {
+      return (
+        <pre>
+          <code ref={this.setRef} className={`language-${this.props.language}`}>
+            {this.props.value}
+          </code>
+        </pre>
+      )
+    }
+  }
+
+
+  
+  module.exports = CodeBlock