Parsing the "caption.text"

we need to make a custom text parser, that will looks at the caption.text to find different styles of formatting and save those to our db, so we can then output them to the UI in styled way. Bascially the input is the caption.text and the output is html elements.

Using the spaces and periods to determine "< p >" elements

We want to be able to be able to break the caption.text into paragraphs, and we want the user to be able to do this by using a simple mostly hidden format. this hidden format will be that user will use 2 spaces after a "." so, the parser will be looking for ". " for e.g.

"this is an example of 2 sentences. The second sentence is NOT a new paragrap." "this is an example of 2 sentences. The second sentence IS a new paragraph."

notice how on the 2nd example, there are 2 speaces after "sentences. " we want to teach instagram users that they can use this type of notation to create a new paragraph, or line break.

Title

Each Caption.text should have 1 title.

it shoudl be the first few words of the caption.text
- the "first few words" are found by at the the first 27 characters of the caption.text and getting only whole words that fit within that limit.
  - so for e.g. in the caption text for exmaple-1 above, the first 27 characters are "Face made when staring at t", we would remove the "t" and replace it with "...", and save "Face made when staring at ..." to a new property called "caption.title"

we need to get links

for links within the caption.text we will need to do further parsing, usign regex, and looking for "http://" and "www." to find the links
- links found will be saved sequentially in an array to a new property called caption.links :[]

here is an example of how the template might look

<div class="col l4 m6 s12 gallery-item gallery-expand gallery-filter {{collection}}-{{tag[]}}"> // the {{tag[]}} is all the values in tags[] that match the collection.tagArray. so, for e.g. this could be class="ig-social-posts-crazybeautiful", with "ig-social-posts" being the name of the colleciton, and "crazybeautiful" being a tag on the object 
        <div class="gallery-curve-wrapper">
            <a class="gallery-cover gray">
                <img src="{{collection.images.standard_resolution.url}}" alt="{{caption.title}}"> // note that the {{caption.title}} is used for the alt=""
            </a>
            <div class="gallery-header">
                <span>{{collection.caption.title}}</span> // caption.title 
            </div>

            <div class="gallery-body">
                <div class="title-wrapper">
                  <h3>{{collection.caption.title}}</h3>  // caption.title 
                  <span class="price">{{colleciton.caption.created_time}}</span>  // this needs to be in date format 
                </div>

                /// below is a bit tricker becasue we need to break up the collection.caption.p[] into different divs and place the links, correctly 

                <p>some text some text some text <a href src="http://www.link.com">www.link.com</a></p>
                <p>some text some text some text</p>
                <p>some text some <a href src="http://www.link.com">link.com</a> text some text </p>
                <p>some text some text some text</p>
            </div>

            <div class="gallery-action">
                <a class="btn-floating btn-large waves-effect waves-light"><i class="material-icons">favorite</i></a>
            </div>
        </div>
    </div>
</div>

here is an example of the desired output from example post #2

<div class="col l4 m6 s12 gallery-item gallery-expand gallery-filter ig-social-posts-crazybeautiful"><!--the {{tag[]}} is all the values in tags[] that match the collection.tagArray. so, for e.g. this could be class="ig-social-posts-crazybeautiful", with "ig-social-posts" being the name of the colleciton, and "crazybeautiful" being a tag on the object -->
        <div class="gallery-curve-wrapper">
            <a class="gallery-cover gray">
                <img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/18950380_112616532676321_3768085580282331136_n.jpg" alt="Wood Flow"><!--note that the {{caption.title}} is used for the alt="" -->
            </a>
            <div class="gallery-header">
                <span>Wood Flow</span><!--caption.title  -->
            </div>

            <div class="gallery-body">
                <div class="title-wrapper">
                  <h3>Wood Flow</h3> <!--caption.title  -->
                  <span class="price">"June 12th 2017"</span> <!--this needs to be in a date format -->
                </div>

                <p><h1>"Wood Flow"</h1></p>
                <p><h2>"What did I find?"</h2></p>
                <p>"A #crazybeautiful piece of wood **spiraling** in the _woods_"</p>
                <p><h2>"and"</h2>1. One 2. Two</p>

                <div class="gallery-action">
                    <a class="btn-floating btn-large waves-effect waves-light"><i class="material-icons">favorite</i></a>
                </div>
            </div>
        </div>
</div>

firemountain / basic-meteor-app