pull blog posts list from data

src/pages/blog/2017/03/26/index.md

@@ -1,6 +1,6 @@
 ---
 template: 'post'
-title: 'Minecraft In The Cloud'
+title: 'Minecraft In The Cloud 📝'
 date: '03.26.2017' 
 description: 'Using AWS to setup a shared Minecraft server.'
 image: '/assets/blog-post-images/minecraft-cloud.png'

src/pages/blog/2017/03/30/index.md

@@ -1,6 +1,6 @@
 ---
 template: 'post'
-title: 'Teaching An Old Dog New Tricks!'
+title: 'Teaching An Old Dog New Tricks! 📝'
 date: '03.30.2017' 
 description: 'Using ES2015 with AngularJS.'
 image: '/assets/blog-post-images/angular-shield.jpg'

src/pages/blog/2017/04/22/index.md

@@ -1,6 +1,6 @@
 ---
 template: 'post'
-title: 'GitHub Dashboard 1.1.0 Released'
+title: 'GitHub Dashboard 1.1.0 Released 🎉'
 date: '04.22.2017' 
 description: 'Open Source project release.'
 image: '/assets/blog-post-images/github.png'

src/pages/blog/2017/05/05/index.md

@@ -1,6 +1,6 @@
 ---
 template: 'post'
-title: 'GitHub Dashboard 1.2.0 Released'
+title: 'GitHub Dashboard 1.2.0 Released 🎉'
 date: '05.05.2017'
 description: 'Open Source project release.'
 image: '/assets/blog-post-images/github.png'

src/pages/blog/2017/06/07/index.md

@@ -1,6 +1,6 @@
 ---
 template: 'post'
-title: 'PHP API Seed'
+title: 'PHP API Seed 💡'
 date: '06.07.2017'
 description: 'Starter kit for PHP based APIs using Slim.'
 image: '/assets/blog-post-images/php.png'

src/pages/blog/2017/09/10/index.md

@@ -1,6 +1,6 @@
 ---
 template: 'post'
-title: 'Vue Webapp Seed'
+title: 'Vue Webapp Seed 💡'
 date: '06.07.2017'
 description: 'Expirementing with the frontend framework Vue.'
 image: '/assets/blog-post-images/vue.png'

src/pages/blog/2017/10/15/index.md

@@ -1,6 +1,6 @@
 ---
 template: 'post'
-title: 'Publishing My First Docker Image'
+title: 'Publishing My First Docker Image 📝'
 date: '10.15.2017' 
 description: 'Expirementing with Docker and Docker Hub publishing.'
 image: '/assets/blog-post-images/docker.png'

src/pages/blog/2018/01/24/index.md

@@ -1,6 +1,6 @@
 ---
 template: 'post'
-title: 'A Case Study in Performance'
+title: 'A Case Study in Performance 📝'
 date: '01.24.2018'
 description: 'Introducing Create Evergreen App!'
 image: '/assets/blog-post-images/pwa-lighthouse.png'

src/pages/blog/2018/05/16/index.md

@@ -1,6 +1,6 @@
 ---
 template: 'post'
-title: 'A Case Study in Performance (cont)'
+title: 'A Case Study in Performance (cont) 📝'
 date: '05.16.2018'
 description: 'Ongoing article series on web application performance.'
 image: '/assets/blog-post-images/pwa-lighthouse.png'

src/pages/blog/2018/06/06/index.md

@@ -1,6 +1,6 @@
 ---
 template: 'post'
-title: 'Project Evergreen'
+title: 'Project Evergreen 💡'
 date: '06.06.2018'
 description: 'Project Evergreen: In Pursuit of Evergreen Web Applications'
 image: 'https://s3.amazonaws.com/uploads.thegreenhouse.io/project-evergreen/logo-small.png'

src/pages/blog/2018/09/26/index.md

@@ -1,6 +1,6 @@
 ---
 template: 'post'
-title: 'Introducing Create Evergreen App!'
+title: 'Create Evergreen App! ♻️'
 date: '09.26.2018'
 description: 'Introducing Create Evergreen App!'
 image: 'https://s3.amazonaws.com/uploads.thegreenhouse.io/project-evergreen/logo-small.png'

src/pages/blog/2018/10/28/index.md

@@ -1,6 +1,6 @@
 ---
 template: 'post'
-title: 'Building A Better Mouse Trap'
+title: 'Building A Better Mouse Trap 🧀'
 date: '10.28.2018'
 description: 'My presentation at Node+JS Interactive 2018 on Docker and Server-Side Rendering.'
 image: 'https://events.linuxfoundation.jp/wp-content/uploads/2017/12/logo_node_js_int18.png'

src/pages/blog/2018/11/19/index.md

@@ -1,6 +1,6 @@
 ---
 template: 'post'
-title: 'Contributary'
+title: 'Contributary 💡'
 date: '11.19.2018' 
 description: 'A project for helping connect open source with the open source community.'
 image: 'https://s3.amazonaws.com/hosted.contributary.community/media/contributary-logo-invert.png'

src/pages/blog/2020/04/07/index.md

@@ -1,6 +1,6 @@
 ---
 template: 'post'
-title: 'Git Explorer'
+title: 'Git Explorer 🔍'
 date: '04.07.2020'
 description: 'Local git repository viewer'
 image: '/assets/blog-post-images/git.png'

src/pages/blog/index.md

@@ -1,24 +1,3 @@
 ---
 template: 'blog'
 ---
-
-## 2020
-- [Git Explorer 🔍](/blog/2020/04/07)
-
-## 2018
-- [Contributary 💡](/blog/2018/11/19)
-- [Building A Better Mouse Trap 🧀](/blog/2018/10/28)
-- [Create Evergreen App ♻️](/blog/2018/09/26)
-- [Project Evergreen 💡](/blog/2018/06/06)
-- [A Case Study in Performance (cont.) 📝](/blog/2018/05/16)
-- [A Case Study in Performance 📝](/blog/2018/01/24)
-
-## 2017
-- [Publishing My First Docker Image 📝](/blog/2017/10/15)
-- [New OSS Project - Vue Webapp Seed 💡](/blog/2017/09/10)
-- [New OSS Project - PHP API Seed 💡](/blog/2017/06/07)
-- [GitHub Dashboard 1.2 Released 🎉](/blog/2017/05/05)
-- [GitHub Dashboard 1.1 Released 🎉](/blog/2017/04/22)
-- [GitHub Dashboard 1.0 Released 🎉](/blog/2017/04/10)
-- [Teaching An Old Dog New Tricks! 📝](/blog/2017/03/30)
-- [Minecraft In The Cloud 📝](/blog/2017/03/26)

src/templates/blog-template.js

@@ -1,4 +1,6 @@
 import { css, html, LitElement, unsafeCSS } from 'lit-element';
+import client from '@greenwood/cli/data/client';
+import ChildrenQuery from '@greenwood/cli/data/queries/children';
 import '../components/footer/footer';
 import '../components/header/header';
 import '../components/navigation/navigation';
@@ -11,6 +13,15 @@ class BlogTemplate extends LitElement {
 
   constructor() {
     super();
+    this.posts = [];
+  }
+
+  static get properties() {
+    return {
+      posts: {
+        type: Array
+      }
+    };
   }
 
   static get styles() {
@@ -42,7 +53,46 @@ class BlogTemplate extends LitElement {
     `;
   }
 
+  async connectedCallback() {
+    super.connectedCallback();
+    const response = await client.query({
+      query: ChildrenQuery,
+      variables: {
+        parent: 'blog'
+      }
+    });
+
+    this.posts = response.data.children;
+  }
+
+  /* eslint-disable indent */
+  getPostsByYear(year) {
+    return html`
+      <h2>${year}</h2>
+      <ul>
+      ${this.posts.filter((post) => {
+          return post.link.includes(year);
+        })
+        .map((post) => {
+          return html`<li><a href="${post.link}">${post.title}</a></li>`;
+        })
+      }
+      </ul>
+    `;
+  }
+
   render() {
+    const { posts } = this;
+    let years = [];
+
+    posts.forEach(post => {
+      const year = post.link.split('/')[2];
+
+      if (year && !years[year]) {
+        years[year] = year;
+      }
+    });
+
     return html`
 
       <div class="layout">
@@ -55,7 +105,11 @@ class BlogTemplate extends LitElement {
         </section>
 
         <section class="outlet row">  
-          <entry></entry>
+          ${
+            Object.keys(years).reverse().map(year => {
+              return this.getPostsByYear(year);
+            })
+          }
         </section>
 
         <section class="row">
@@ -65,5 +119,6 @@ class BlogTemplate extends LitElement {
     `;
   }
 }
+/* eslint-enable indent */
 
 customElements.define('page-template', BlogTemplate);