JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<div id="main">
    <div id="article">
    </div>
</div>
<div class="notes">
    <div class="post">
        <h2 class="post-title">Notes</h2>
        <p>For the featured image, if you don't want to reference a specific size, you could call <code>post._embedded['wp:featuredmedia'][0].source_url</code> instead of <code>post._embedded['wp:featuredmedia'][0].media_details.sizes["large"].source_url</code>            and the full size image would be returned. You can also replace the large size with other image sizes. I used the syntax shown in case your image size has a hyphen in it.</p>
        <p>Additionally, you can change the post type to something like <code>pages</code> or a custom post type to see more results.</p>
        <p>To change other things, like <code>per_page</code> and <code>author</code>, just add or adjust the appropriate query parameters.</p>
        <p>There are a few potential "gotchas" if you run into an error. I don't have a lot of fallback logic in case the right data isn't available. If you have trouble, that's the most likely source of the issue.</p>
    </div>
</div>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Nunito:300);
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-weight: 300;
    padding: 2em;
    color: #666;
}

pre {
    overflow: scroll;
    padding: 1em .5em;
    background: #f4f4f4;
}

#main {
    max-width: 30em;
    margin: 0 auto;
    word-wrap: break-word;
}

h1 {
    font-size: 2em;
    margin: 0;
    font-family: Nunito, sans-serif;
    color: #2e3641;
}

a {
    color: #fc781f;
}

.post {
    font-size: 14px;
    font-weight: 300;
    border-bottom: 1px solid #ddd;
    padding: 2em 0;
}

.post-title {
    display: block;
    font-family: Nunito, sans-serif;
    margin: 0 0 10px 0;
    font-size: 1.5em;
    margin-bottom: 1em;
    color: #2e3641;
    a {
        color: #2e3641;
        text-decoration: none;
        &:hover {
            color: #fc781f;
        }
    }
}

.excerpt {
    margin: 1em 0;
}

.entry-meta {
    display: block;
    text-transform: uppercase;
    font-family: Nunito, sans-serif;
    margin: 2em 0 1em;
    overflow: hidden;
    line-height: 2;
    .author-wrap {
        float: left;
        display: inline-block;
        padding: 0;
        text-decoration: none;
        color: #2e3641;
        &:hover {
            color: #fc781f;
        }
        span {
            display: inline-block;
            padding: .75em 0;
        }
        .avatar {
            float: left;
            border-radius: 50%;
            margin-right: .5em;
        }
    }
    .read-more {
        float: right;
    }
}

@media ( max-width: 25em) {
    .entry-meta {
        font-size: .75em;
        .avatar {
            width: 32px;
            height: 32px;
        }
    }
}

a.button {
    display: inline-block;
    padding: .75em 1em;
    background: #fc781f;
    color: white;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    font-family: Nunito, sans-serif;
 ...

JavaScript

$.ajax({
    url: 'https://ne.ord.se/blogg/wp-json/wp/v2/posts?_embed',
    data: {
        filter: {
            'per_page': 1
        }
    },
    dataType: 'json',
    type: 'GET',
    success: function(data) {
        var title = data[0].title.rendered;
        var link = data[0].link;
        var img = data[0]._embedded['wp:featuredmedia'][0].media_details.sizes['medium'].source_url;
        //img = img.split('http://ne.ord.se/')[1];
        var excerpt = data[0].excerpt.rendered;
        var excerptDelimiter = excerpt.match(/[?!.]/, 1);
        var shortExcerpt = excerpt.split(/[?!.]/, 1);
        var formatedExcerpt = shortExcerpt + excerptDelimiter + '</p>';
        var html = '<header><figure><img src="' + img + '"></figure><h3>Blogg</h3><h4>' + title + '</h4></header>' + formatedExcerpt;
        //$('#news-teaser1-frontpage').html(html);
        //$('#news-teaser1-frontpage').attr('src', link);
        $('#article').append(html);
    },
    error: function() {
        // error code
    }
});