loads site list into component

This commit is contained in:
buttle 2021-10-26 12:23:44 +02:00
parent 15d05fe0e0
commit ce55be7d6e
2 changed files with 77 additions and 14 deletions

View File

@ -8,20 +8,78 @@ This file is part of ArciveList.
<template> <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> </template>
@ -45,6 +103,8 @@ export default {
}, },
mounted() { mounted() {
this.sites = JSON.parse(this.collections)
/*
var self = this; var self = this;
axios.get(this.api_endpoint +'/sites', { axios.get(this.api_endpoint +'/sites', {
}) })
@ -55,11 +115,14 @@ export default {
.catch(function (error) { .catch(function (error) {
console.log(error); console.log(error);
}); });
*/
}, },
methods: { methods: {
/*
site_url: function(slug) { site_url: function(slug) {
return this.base_url + '/s/' + slug return this.base_url + '/s/' + slug
} }
*/
}, },
watched: { watched: {

View File

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