trc-client-core/src/admin/LearnMarkdown.jsx

The core of the TRC Client

import React from 'react';
import Page from 'trc-client-core/src/components/Page';

// Commponents
import Grid from 'trc-client-core/src/components/Grid';
import Col from 'trc-client-core/src/components/Col';
import Textarea from 'bd-stampy/components/Textarea';
import Markdown from 'trc-client-core/src/components/Markdown';

var _data = {
    Headings: '# Heading1 \n## Heading 2 \n### Heading 3',
    Paragraphs: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, dolor suscipit quaerat amet ut. Et doloribus, alias esse! Voluptatum excepturi, iste rerum, numquam itaque nam illum deleniti a dolor illo? \n\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima corrupti laboriosam unde deleniti quaerat, illum commodi delectus magni obcaecati, quod iste ad sunt, enim odit alias aut accusantium dicta. Quod!',
    Italics: 'You can *italicise text* by wrapping it in one *asterisk* or _underscore_',
    Bold: 'You can **bold text** by wrapping it in two **asterisks** or __underscores__',
    Lists: '* List Items are just asterisks \r\n* List Item \r\n\t* You can also nest them.\r\n\t* List Item \r\n* List Item     \r\n\r\nLists can also be numbered:\r\n\r\n1. Numbered List Item \r\n2. Numbered List Item\r\n3. Numbered List Item\r\n4. Numbered List Item \r\n5. Numbered List Item',
    Links: 'Links are easy, just put the title in [brackets] and the link in (parenthesis) \n\n [Links are cool.](www.google.com)',
    Images: 'Images are the same, with an exclamation point at the start \n\n ![Images are easy](http://placepuppy.it/400/300)',
    Quotes: '> "Quotes are perpended with a closing chevron." - Someone cleverer than me.'
};

var LearnMarkdown = React.createClass({
    displayName: 'LearnMarkdown',
    mixins: [
        require('bd-stampy/mixins/FormMixin')
    ],
    getDefaultProps : function () {
        return {
            formData: _data
        };
    },
    render: function() {
        var segments = Object.keys(_data).map(key => this.renderSegment(key));
        return (
            <Page title="Learn Markdown">
                <div>
                    <h1>What Is Markdown?</h1>
                    <p>Markdown is a wonderfully simple way to write content for websites. You get on with the business of writing (without any fancy code) and Markdown takes care of the rest.</p>
                    <p>Below are a few examples of the things you can do. Markdown is dynamic and instantly updated so feel free to edit the contents of the text boxes to get a good feel of what markdown is like.</p>


                    {segments}
                </div>                
            </Page>
        );
    },
    renderSegment: function(name) {
        return (
            <div key={name}>
                <h2>{name}</h2>
                <Grid>
                    <Col width={5}>
                        <Textarea name={name} value={this.state.formData[name]} style={{height: 240}} onSelection={this.onSelection} onChange={this.FormMixin_onFormChange}></Textarea>
                    </Col>
                    <Col>
                        <Markdown html={this.state.formData[name]}></Markdown>
                    </Col>
                </Grid>
            </div>
        );
    }
});

module.exports = LearnMarkdown;