How to use Jekyll’s post system to make app

Question

I’m making an android app, using apache Cordova. I want to know how to make a "posts" system like in Jekyll, it just takes text files and turns them into post. For each. txt file it creates a post. How can I do this?

For example, in the . txt file I have:

### Titulo
## Texto
# link do botão

And it generates a post like this:

Answer 1

I built the CSS below. I think you do what you want. I don’t know if it’s exactly the original because you didn’t post the image in its original resolution, but anyway, it’s pretty close.

The HTML to be filled is what is represented by <div> class caixa. That one <div> is created by jQuery in function fazCaixa using a piece of TXT like this:

Torre de Belem###The Torre de Belém is located in the parish of Belém, municipality and district of Lisbon, in Portugal. On the right bank of the Tagus River, where the beach of Belém once existed, it was primitive surrounded by the waters throughout its perimeter. ###Google Maps

This format corresponds to the title followed by the content and then the button text, separated by ###. It should not be too difficult to make adaptations to the text format if it is necessary if some other format is desirable.

Click on the blue button Execute down below to see the result.

function fazCaixa(txt) {
    var parts = post.split("###");
    var titulo = parts[0];
    var texto = parts[1];
    var botao = parts[2];
    var esqueleto = $(""
            + "<div class='caixa'>"
            + "    <h2></h2>"
            + "    <p></p>"
            + "    <div class='bt'>"
            + "        <button></button>"
            + "    </div>"
            + "</div>"
    );
    var div = $(esqueleto);
    div.find("h2").html(titulo);
    div.find("p").html(texto);
    div.find("button").html(botao);
    $(".area-externa").append(div);
}

var post = "Torre de Belem###A Torre de Belém localiza-se na freguesia de Belém, concelho e distrito de Lisboa, em Portugal. Na margem direita do rio Tejo, onde existiu outrora a praia de Belém, era primitivamente cercada pelas águas em todo o seu perímetro.###Google Maps";

fazCaixa(post);

.area-externa {
    width: 330px;
}

.caixa {
    background-color: rgb(238, 238, 238);
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 15px;
    padding-right: 15px;
    font-family: sans-serif;
    box-shadow: 2px 2px 6px rgb(160, 160, 160), -3px 0 rgb(0, 123, 255);
    border-radius: 3px;
}

.caixa p, .caixa h2 {
    margin: 0;
    padding: 0;
}

.caixa p {
    margin-top: 15px;
    margin-bottom: 15px;
}

.caixa .bt {
    text-align: right;
}

.caixa .bt button {
    background-color: rgb(0, 123, 255);
    color: white;
    padding: 12px;
    border-style: none;
    border-radius: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="area-externa">
</div>