loads site list into component

src/components/archiveList.vue

@@ -8,20 +8,78 @@ This file is part of ArciveList.
 
 <template>
 
-  <div>
+  <section class="collections-list">
-    <h1>
-      List of sites
-    </h1>
-    <template v-for="site in sites">
-      <div v-if="site['o:is_public'] && site['o:title'] != 'Collections'"
-          :key="site.id">
-        <a :href="site_url(site['o:slug'])">
-          {{ site['o:title'] }}
-        </a>
 
-      </div>
+    <header>
-    </template>
+      <h2> Latest in collections</h2>
-  </div>
+    </header>
+
+    <main class="">
+      <article class="">
+
+        <ul class="accordion"
+            data-responsive-accordion-tabs="accordion small-accordion"
+            data-multi-expand="true"
+            data-allow-all-closed="true"
+            data-deep-link="true">
+          <li class="accordion-item title"
+              data-accordion-item disabled>
+            <a href="#" class="accordion-title">
+              <ul class="">
+                <li class="title">Title</li>
+                <li class="curator">Artist</li>
+                <li class="collection-name">Collection</li>
+                <li class="date">Date</li>
+              </ul>
+            </a>
+            <div class="accordion-content"
+                 data-tab-content>
+              <figure>
+              </figure>
+              <p>
+              </p>
+            </div>
+          </li>
+          <li v-for="site in sites"
+              class="accordion-item" data-accordion-item>
+            <a href="#" class="accordion-title">
+              <ul class="">
+                <li class="title">
+                  {{ site.title }}
+                </li>
+                <li class="curator">
+                  {{ site.currator }}
+                </li>
+                <li class="collection-name">
+                  {{ site.collection }}
+                </li>
+                <li class="date">
+                  {{ site.project_date }}
+                </li>
+              </ul>
+            </a>
+            <aside class="accordion-content" data-tab-content>
+             <section>
+              <figure>
+                <img :src="site.thumbnail" />
+              </figure>
+              <p :html="site.summary">
+                <a class="button small"
+                   :href="site.url">
+                  View
+                </a>
+              </p>
+             </section>
+            </aside>
+          </li>
+        </ul>
+      </article>
+    </main>
+    <aside>
+      <nav>
+      </nav>
+    </aside>
+  </section>
 
 </template>
 
@@ -45,6 +103,8 @@ export default {
 
   },
   mounted() {
+    this.sites = JSON.parse(this.collections)
+    /*
     var self = this;
     axios.get(this.api_endpoint +'/sites', {
     })
@@ -55,11 +115,14 @@ export default {
     .catch(function (error) {
       console.log(error);
     });
+    */
   },
   methods: {
+    /*
     site_url: function(slug) {
       return this.base_url + '/s/' + slug
     }
+    */
   },
   watched: {
 

src/loaders/archiveListLoader.js

@@ -30,7 +30,7 @@ document.querySelectorAll("[data-vue-component=archive-list]")
           new ComponentClass({
             components: {'ArchiveList': ArchiveList},
             propsData: { ...element.dataset },
-            props: ["base_url"],
+            props: ["collections"],
             /*
             store: store,
             i18n: i18n,