diff --git a/build.js b/build.js
index 04e4b747050e3..5156a12158e9a 100755
--- a/build.js
+++ b/build.js
@@ -170,7 +170,21 @@ function buildLocale (source, locale) {
         strftime: require('./scripts/helpers/strftime.js'),
         apidocslink: require('./scripts/helpers/apidocslink.js'),
         majorapidocslink: require('./scripts/helpers/majorapidocslink.js'),
-        summary: require('./scripts/helpers/summary.js')
+        summary: require('./scripts/helpers/summary.js'),
+        json: function (context) {
+          return JSON.stringify(context)
+        },
+        getListJson: function (context) {
+          var result = context.map(function (item) {
+            return {
+              title: item.title,
+              date: item.date,
+              local: true,
+              path: item.path.replace(/\\/, '/')
+            }
+          })
+          return JSON.stringify(result)
+        }
       }
     }))
     // Pipes the generated files into their respective subdirectory in the build
diff --git a/layouts/announcements.hbs b/layouts/announcements.hbs
index 4d933df2d4351..5687cfe5e25a9 100644
--- a/layouts/announcements.hbs
+++ b/layouts/announcements.hbs
@@ -11,25 +11,77 @@
       {{> navigation key='foundation'}}
 
       <article>
-        <div class="container no-headline">
-
+        <div class="container no-headline" id="announcements-list">
           <ul class="news-list">
-            {{#each collections.blogAnnounce}}
-              {{#if title}}
-                <li>
-                  <time datetime="{{ date }}">{{ strftime date }}</time>
-                  <a href="/{{../site.locale}}/{{ path }}/">{{ title }}</a>
-                </li>
-              {{/if}}
-            {{/each}}
+            <li>Loading data...</li>
           </ul>
-
         </div>
       </article>
-
     </div>
   </div>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.4.2/tabletop.min.js"></script>
+  <script type="text/javascript">
+  var publicSpreadsheetUrl = 'https://docs.google.com/spreadsheets/d/1xwQ6ciZLADL43My_XBIWLVRuDMl8cx_omYd1FRkBZ58/pubhtml'
+  var mdList = {{{getListJson collections.blogAnnounce}}}
+  var siteLocal = '/{{site.locale}}/'
+
+  window.onload = function () {
+    /* global Tabletop */
+    Tabletop.init(
+      {
+        key: publicSpreadsheetUrl,
+        callback: showInfo,
+        simpleSheet: true
+      }
+    )
+
+    function pad (str) { return ('0' + str).substr(-2) }
+
+    function parseDate (date) {
+      try {
+        var parsedDate = date.split('.')
+        return new Date('20' + parsedDate[2], parsedDate[0] - 1, parsedDate[1])
+      } catch (_) {
+        return date
+      }
+    }
+
+    function formatDate (date) {
+      return date === 'Invalid Date' ? '' : date.getFullYear() + '-' + pad(date.getMonth() + 1) + '-' + pad(date.getDate())
+    }
+
+    function showInfo (data, tabletop) {
+      data.reverse()
+      var html = ''
+      var list = document.getElementsByClassName('news-list')
+      var docList = []
+
+      data.forEach(function (row) {
+        docList.push({
+          path: row.Link,
+          title: row.Title,
+          local: false,
+          date: parseDate(row.Date)
+        })
+      })
+
+      var allList = mdList.concat(docList)
+      allList.sort(function (a, b) {
+        return new Date(b.date).getTime() - new Date(a.date).getTime()
+      })
 
+      allList.forEach(function (row) {
+        if (row && row.date) {
+          html += '<li><time datetime="' + row.date + '">' + formatDate(new Date(row.date)) + '</time>'
+          html += '<a href="'
+          html += (row.local) ? siteLocal + row.path : row.path
+          html += '">' + row.title + '</a></li>'
+        }
+      })
+      if (list && list[0]) list[0].innerHTML = html
+    }
+  }
+  </script>
   {{> footer }}
 </body>
 </html>
diff --git a/layouts/in-the-news.hbs b/layouts/in-the-news.hbs
index c20cf7e9ac94a..bdd63b34f69e0 100644
--- a/layouts/in-the-news.hbs
+++ b/layouts/in-the-news.hbs
@@ -15,6 +15,7 @@
       <article>
         <div class="container no-headline">
           <ul class="news-list">
+            <li>Loading data...</li>
           </ul>
         </div>
       </article>