Show only one article in home feed

app_template/www/fetch_articles.js

@@ -1,46 +1,90 @@
-var articles;
-axios.get("http://136.145.231.32:8080/")
-    .then(response => {
-        articles = response.data;
-        for (let i = 0; i < articles.length; i++) {
-            let element = articles[i];
-            axios.get(`http://136.145.231.32:8080/${element}`)
-                .then(response => {
-                    let articlesHeading = document.querySelector("#articles-heading").parentElement;
-                    let articleButton = document.createElement("button");
-                    articleButton.textContent = response.data;
+function get_articles(single = false) {
+    var articles;
+    axios.get("http://136.145.231.32:8080/")
+        .then(response => {
+            articles = response.data;
+            if (single) {
+                let artName = articles[articles.length - 1];
+                axios.get(`http://136.145.231.32:8080/${artName}`)
+                    .then(response => {
+                        let homeArticleParent = document.querySelector("#home-article")
+                        let articleButton = document.createElement("button");
+                        articleButton.textContent = response.data;
 
-                    articleButton.classList.add("m-5", "article-content");
-                    articleButton.setAttribute("data-toggle", "modal");
-                    articleButton.setAttribute("data-target", `#articleModal${i}`);
+                        articleButton.classList.add("m-5", "article-content");
+                        articleButton.setAttribute("data-toggle", "modal");
+                        articleButton.setAttribute("data-target", "#homeArticleModal");
 
-                    let modal = document.createElement("div");
-                    modal.classList.add("modal", "fade");
-                    modal.setAttribute("id", `articleModal${i}`);
-                    modal.setAttribute("tabindex", "-1");
-                    modal.setAttribute("aria-labelledby", `articleModalLabel${i}`);
-                    modal.setAttribute("aria-hidden", "true");
-                    modal.innerHTML = `
-                        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
-                            <div class="modal-content">
-                                <div class="modal-header">
-                                    <h5 class="modal-title" id="articleModalLabel${i}">${element}</h5>
-                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                                        <span aria-hidden="true">&times;</span>
-                                    </button>
+                        let modal = document.createElement("div");
+                        modal.classList.add("modal", "fade");
+                        modal.setAttribute("id", "homeArticleModal");
+                        modal.setAttribute("tabindex", "-1");
+                        modal.setAttribute("aria-labelledby", "homeArticleModalLabel");
+                        modal.setAttribute("aria-hidden", "true");
+                        modal.innerHTML = `
+                            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
+                                <div class="modal-content">
+                                    <div class="modal-header">
+                                        <h5 class="modal-title" id="homeArticleModal">${artName}</h5>
+                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                            <span aria-hidden="true">&times;</span>
+                                        </button>
+                                    </div>
+                                    <div class="modal-body">
+                                        ${response.data}
+                                    </div>
+                                    <div class="modal-footer">
+                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                                    </div>
                                 </div>
-                                <div class="modal-body">
-                                    ${response.data}
-                                </div>
-                                <div class="modal-footer">
-                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                                </div>
-                            </div>
-                        </div>`;
-                    document.body.appendChild(modal);
-                    articlesHeading.appendChild(articleButton);
-                })
-                .catch(error => console.error(error));
-        }
-    })
-    .catch(error => console.error(error));
+                            </div>`;
+                        document.body.appendChild(modal);
+                        homeArticleParent.appendChild(articleButton);
+                    })
+                    .catch(error => console.log(error));
+            }
+            else {
+                for (let i = 0; i < articles.length; i++) {
+                    let element = articles[i];
+                    axios.get(`http://136.145.231.32:8080/${element}`)
+                        .then(response => {
+                            let articlesHeading = document.querySelector("#articles-heading").parentElement;
+                            let articleButton = document.createElement("button");
+                            articleButton.textContent = response.data;
+
+                            articleButton.classList.add("m-5", "article-content");
+                            articleButton.setAttribute("data-toggle", "modal");
+                            articleButton.setAttribute("data-target", `#articleModal${i}`);
+
+                            let modal = document.createElement("div");
+                            modal.classList.add("modal", "fade");
+                            modal.setAttribute("id", `articleModal${i}`);
+                            modal.setAttribute("tabindex", "-1");
+                            modal.setAttribute("aria-labelledby", `articleModalLabel${i}`);
+                            modal.setAttribute("aria-hidden", "true");
+                            modal.innerHTML = `
+                                <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
+                                    <div class="modal-content">
+                                        <div class="modal-header">
+                                            <h5 class="modal-title" id="articleModalLabel${i}">${element}</h5>
+                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                                <span aria-hidden="true">&times;</span>
+                                            </button>
+                                        </div>
+                                        <div class="modal-body">
+                                            ${response.data}
+                                        </div>
+                                        <div class="modal-footer">
+                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                                        </div>
+                                    </div>
+                                </div>`;
+                            document.body.appendChild(modal);
+                            articlesHeading.appendChild(articleButton);
+                        })
+                        .catch(error => console.error(error));
+                }
+            }
+        })
+        .catch(error => console.error(error));
+}

app_template/www/home.html

@@ -1,22 +1,23 @@
-
 <!DOCTYPE html>
 <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
 <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
 <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
-<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
-	<head>
+<!--[if gt IE 8]><!-->
+<html class="no-js">
+<!--<![endif]-->
+<head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<title>dato.pr</title>
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<meta name="description" content="No" />
 
-  	<!-- Facebook and Twitter integration -->
-	<meta property="og:title" content=""/>
-	<meta property="og:image" content=""/>
-	<meta property="og:url" content=""/>
-	<meta property="og:site_name" content=""/>
-	<meta property="og:description" content=""/>
+	<!-- Facebook and Twitter integration -->
+	<meta property="og:title" content="" />
+	<meta property="og:image" content="" />
+	<meta property="og:url" content="" />
+	<meta property="og:site_name" content="" />
+	<meta property="og:description" content="" />
 	<meta name="twitter:title" content="" />
 	<meta name="twitter:image" content="" />
 	<meta name="twitter:url" content="" />
@@ -48,9 +49,14 @@
 	<!--[if lt IE 9]>
 	<script src="js/respond.min.js"></script>
 	<![endif]-->
+	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 	<script src="sortposts.js"></script>
-	</head>
-	<body>
+	<script src="fetch_articles.js"></script>
+	<script>
+		get_articles(true);
+	</script>
+</head>
+<body>
 	<header role="banner" id="fh5co-header">
 		<div class="fluid-container">
 			<nav class="navbar navbar-default navbar-fixed-top js-fullheight">
@@ -61,7 +67,7 @@
 					</ul>
 				</div>
 			</nav>
-	  </div>
+		</div>
 	</header>
 
 	<section id="fh5co-home" data-section="home" style="background-image: url(images/project-5.jpg);">
@@ -130,8 +136,8 @@
 													var userFeed = new Instafeed({
 														get: 'user',
 														target: "instafeed-container",
-															resolution: 'low_resolution',
-															limit: 3,
+														resolution: 'low_resolution',
+														limit: 3,
 														accessToken: 'IGQVJVV0t4b2ZAIdkJPNTl1ZAnZAsWm90TzIzRE5LMGQtR25aRklwYlQ5eVEtcjZAmRmpEbDlNWC1RNjZAhaFJLdXBaLUJlaEM4WkRaamJNcWZACNWx1VThSYUNRLVJHcFNHWHlnWl9FTjBjcl9Vd1pPcFZAHbAZDZD'
 													});
 													userFeed.run();
@@ -144,9 +150,8 @@
 									<div class="col-md-12">
 										<div class="core">
 											<i class="icon-columns to-animate-2"></i>
-											<div class="fh5co-post to-animate">
+											<div id="home-article" class="fh5co-post to-animate">
 												<h3>Articles</h3>
-												<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta totam reiciendis sapiente modi alias nulla quae libero, mollitia dolores ullam hic nesciunt in molestiae architecto.</p>
 											</div>
 										</div>
 									</div>
@@ -199,5 +204,5 @@
 	<!-- Main JS (Do not remove) -->
 	<script src="js/main.js"></script>
 
-	</body>
-</html>
+</body>
+</html>