JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<div id="wiki-lang">sv</div>
<div id="wiki-query">Fjodor Dostojevskij</div>
<div id="wiki-article">
    <div id="wiki-article-img"></div>
    <div id="wiki-article-txt">
        <div id="wiki-loader"></div>
    </div>
    <div class="clearfix"></div>
</div>

CSS

#wiki-query, #wiki-lang {
    display: none;
}
#wiki-article-txt {
	position: relative;
	min-height: 150px;
}
#wiki-article-txt p {
    margin-top: 0;
}
#wiki-article-img {
    margin-right: 20px;
    float: left;
}
#wiki-article-img img {
    max-width: 200px;
    height: auto;
    display: block;
    clear: both;
    margin: 0 auto 10px auto;
}
.wiki-reference {
    font-size: 0.9em;
    font-style: italic;
}
#wiki-loader {
    color: #aaa;
    text-align: center;
	height: 30px;
	width: 30px;
	top: 40px;
	position: absolute;
	-webkit-animation: rotation .6s infinite linear;
	-moz-animation: rotation .6s infinite linear;
	-o-animation: rotation .6s infinite linear;
	animation: rotation .6s infinite linear;
	border-left: 6px solid rgba(0,0,0,.15);
	border-right: 6px solid rgba(0,0,0,.15);
	border-bottom: 6px solid rgba(0,0,0,.15);
	border-top: 6px solid rgba(0,0,0,.8);
	border-radius: 100%;
}

@-webkit-keyframes rotation {
	from {-webkit-transform: rotate(0deg);}
	to {-webkit-transform: rotate(359deg);}
}

@-moz-keyframes rotation {
	from {-moz-transform: rotate(0deg);}
	to {-moz-transform: rotate(359deg);}
}

@-o-keyframes rotation {
	from {-o-transform: rotate(0deg);}
	to {-o-transform: rotate(359deg);}
}

@keyframes rotation {
	from {transform: rotate(0deg);}
	to {transform: rotate(359deg);}
}

.clearfix {
    clear: both;
}

JavaScript

var wikiLangOrg = $('#wiki-lang').text();
var wikiLang = wikiLangOrg.toLowerCase();
var wikiQueryOrg = $('#wiki-query').text();
var wikiQuery = wikiQueryOrg.replace(/\s+/g, '_');
var wikiUrl = 'http://' + wikiLang + '.wikipedia.org/w/api.php?action=parse&format=json&prop=text&section=0&page=' + wikiQuery + '&callback=?';
$.ajax({
    type: 'GET',
    url: wikiUrl,
    contentType: 'application/json; charset=utf-8',
    async: false,
    dataType: 'jsonp',
    success: function (data, textStatus, jqXHR) {

        if (data.error) {
            $('#wiki-article').html(':(');
        } else {

            var wikipediaMarkup = data.parse.text['*'];
            var blurb = $('<div></div>').html(wikipediaMarkup);

            // remove links
            blurb.find('a').each(function () {
                $(this).replaceWith($(this).html());
            });

            // remove any references
            blurb.find('sup').remove();
            blurb.find('.ambox').remove();
            blurb.find('.metadata').remove();
            blurb.find('.nowrap').remove();
            blurb.find('.haudio').remove();
            blurb.find('.mw-ext-cite-error').remove();

            // add article img
            $('#wiki-article-img').prepend(blurb.find('img'));

            $('#wiki-article-img img').each(function () {
                if ($(this).attr('data-file-width') < 200) {
                    $(this).remove();
                }
            });
            
            $('#wiki-article-img img').not(':first').remove();

            // add content
            $('#wiki-article-txt').html($(blurb).find('p'));

            // add reference
            $('#wiki-article-txt').append('<p class="wiki-reference"><a href="http://sv.wikipedia.org/wiki/' + wikiQuery + '" title="' + wikiQuery + '" target="_blank"> http://sv.wikipedia.org/wiki/' + wikiQuery + '</a></p>');

        }

    },
    error: function (errorMessage) {
        $('#wiki-article').text('Error');
    }
});