Let’s make our static frontend a little bit more appealing by providing a page for the collection of articles and a page for the details of an article.
In my previous article “Static content serving with Nginx” I was able to configure Nginx to serve up my static HTML page showing a list of article titles. In this article I will add another page to display the contents of the article, also static with plain HTML and some JavaScript.
A listing with linked elements
First I can now create a link to each article using simple AJAX. In the existing index.html page I add the following logic.
<script type="application/javascript">
$(function () {
var backendUri = "http://localhost:8001/api";
$.getJSON(backendUri, function (data) {
$("title").html(data.name);
$("h1").html(data.name);
$("h2").html(data.description);
});
$.getJSON(backendUri + "/wp/v2/posts", function (posts) {
var postElement = $("#latest-posts");
var postList = $("<ul/>");
$.each(posts, function (i) {
var postItem = $("<li/>");
var postBold = $("<b/>").appendTo(postItem);
var postText = $("<a/>")
.text(posts[i].title.rendered)
.attr("href", "/page?" + btoa(posts[i].id))
.appendTo(postBold);
$(postItem).appendTo(postList);
});
$(postList).show();
$(postList).appendTo(postElement);
});
});
</script>This will create a link to page.html that will display the full article.
A page with details
In page.html I want keep things compact as it is just pulling in the data straight from WordPress API.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">
<meta charset=UTF-8">
<title></title>
</head>
<body>
<h1></h1>
<div id="article"></div>
<script type="application/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="application/javascript">
$(function () {
var backendUri = "http://localhost:8001/api";
var postId = document.location.search;
postId = postId.substr(1);
post = atob(postId);
$.getJSON(backendUri + "/wp/v2/posts/" + post, function (data) {
$("title").html(data.title.rendered);
$("h1").html(data.title.rendered);
$("#article").html(data.content.rendered);
console.log(data);
});
});
</script>
</body>
</html>The result is superb. WordPress provides HTML styling like headers, images and links as raw JSON data, so the page looks already awesome without any styling.
Now that I have a static frontend server, an application gateway, a wordpress backend service and a separate database all running locally in containers, I believe it is time to move this concept to the cloud. Join me in my next article where I will be doing the same thing on cloud infrastructure.
