Load blog posts demo

blog.html

@@ -2,11 +2,24 @@
 {% block extra_head %}
       <link href="{{ STATIC_URL }}css/site_base.css" rel="stylesheet"/>
       <link href="{{ STATIC_URL }}css/geonode-utu.css" rel="stylesheet"/>
+      <script src="{{ STATIC_URL }}js/utu-blog.js"></script>
 {% endblock %}
 
 {% block body %}
 <h1>Blog</h1>
-<p>Get content from WordPress site?</p>
+
+<table id="blog-container" style="border: 1px solid black;">
+    <thead>
+        <tr>
+            <th>ID</th><th>Slug</th><th>Date</th><th>Excerpt</th>
+        </tr>
+    </thead>
+    <tbody>
+    </tbody>
+</table>
+<br/><br/>
+<button onclick="load_posts();">Load blog posts</button>
+<br/>
 <p>New blog post should propable be a link to the blog site</p>
 {% endblock %}
 

process_files.sh

@@ -44,6 +44,7 @@ CONTAINER_FILES=(
     'contact.html'         # 10
     'community.html'       # 11
     'blog.html'            # 12
+    'utu-blog.js'       # 13
     )
    
 # File paths inside container
@@ -61,6 +62,7 @@ CONTAINER_PATHS=(
     '/usr/src/resilienceacademy/resilienceacademy/templates/'                 # 10
     '/usr/src/resilienceacademy/resilienceacademy/templates/'                 # 11
     '/usr/src/resilienceacademy/resilienceacademy/templates/'                 # 12
+    '/usr/src/resilienceacademy/resilienceacademy/static/js/'                 # 13
     )
   
 # File names outside container (here)
@@ -79,6 +81,7 @@ LOCAL_FILES=(
     'contact.html'         # 10
     'community.html'       # 11
     'blog.html'            # 12
+    'utu-blog.js'       # 13
   )
 
 # Image files, these are not backed up but existence is checked

utu-blog.js

+/* 
+    University of Turku custom JS 
+
+    Blog specific functionality
+
+*/
+
+const nro_posts = 5;
+const wp_url = 'https://resilienceacademy.ac.tz';
+var data='';
+
+console.log('Custom blog JS loaded.');
+
+function load_posts()
+{
+    console.log('Fetch latest ' + nro_posts + ' blog posts.');
+    var request = new XMLHttpRequest();
+    request.open('GET', wp_url + '/wp-json/wp/v2/posts?page=1&per_page=' + nro_posts);
+    request.onload = function() {
+            let table = document.getElementById('blog-container');
+            data = JSON.parse(request.responseText);
+            console.log(data);
+
+            // Just a test - make this smarter..
+            for( let a=0, a_max=data.length; a<a_max; a++ )
+            {
+                let new_row   = table.insertRow(-1);
+                let new_cell  = [ new_row.insertCell(0), new_row.insertCell(1), new_row.insertCell(2), new_row.insertCell(3) ];
+                let content   = [ document.createTextNode(data[a]['id']), document.createTextNode(data[a]['slug']), document.createTextNode(data[a]['date']), document.createTextNode(data[a]['excerpt']['rendered']) ];
+                               
+                new_cell[0].appendChild( content[0] );
+                new_cell[1].appendChild( content[1] );
+                new_cell[2].appendChild( content[2] );
+                new_cell[3].appendChild( content[3] );
+                
+            }
+        }
+    request.send();
+
+}
+
+