diff options
| -rw-r--r-- | components/ChroniclePost.vue | 60 | ||||
| -rw-r--r-- | layouts/default.vue | 5 | ||||
| -rw-r--r-- | pages/kronika/_year/_month/_day/_title/index.vue | 2 | ||||
| -rw-r--r-- | pages/kronika/index.vue | 40 |
4 files changed, 102 insertions, 5 deletions
diff --git a/components/ChroniclePost.vue b/components/ChroniclePost.vue new file mode 100644 index 0000000..7b2c527 --- /dev/null +++ b/components/ChroniclePost.vue @@ -0,0 +1,60 @@ +<template> + <a :href="route" class="post"> + <div> + <h4 class="post-title">{{title}}</h4> + <p class="post-description">{{shortenedDescription}}...</p> + </div> + </a> +</template> + +<script> +export default { + name: 'ChroniclePost', + props: { + title: { + type: String, + required: true + }, + description: { + type: String, + default: '' + }, + route: { + type: String, + required: true + } + }, + computed: { + shortenedDescription() { + const first30Words = this.description.split(' ').slice(0, 30) + return first30Words.join(' ') + } + } +} +</script> + +<style scoped> +.post { + margin: 20px; + flex-basis: 410px; + text-decoration: none; +} + +.post > div { + background: #ffffff; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25); + padding: 20px; + + text-align: left; +} + +.post-title { + color: #181818; + font-size: 1.3em; +} + +.post-description { + color: #484848; + font-size: 0.9em; +} +</style> \ No newline at end of file diff --git a/layouts/default.vue b/layouts/default.vue index 7f9ec5b..496f1ba 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -23,9 +23,10 @@ export default { routes: [ { path: '/', name: 'Strona główna' }, { path: '/download', name: 'Do pobrania' }, - { path: '/kontakt', name: 'Kontakt' } + { path: '/kontakt', name: 'Kontakt' }, + { path: '/kronika', name: 'Kronika' } ], - staticRoutes: [{ path: '/kronika', name: 'Kronika' }], + staticRoutes: [], externalRoutes: [ // { // path: 'https://kronika-puszcza.netlify.com', diff --git a/pages/kronika/_year/_month/_day/_title/index.vue b/pages/kronika/_year/_month/_day/_title/index.vue index 361b7f8..1308eb7 100644 --- a/pages/kronika/_year/_month/_day/_title/index.vue +++ b/pages/kronika/_year/_month/_day/_title/index.vue @@ -7,7 +7,7 @@ <div v-else class="article"> <!-- <h1>{{ params.title }}</h1> <span>{{ `${params.year}-${params.month}-${params.day}` }}</span>--> - <div class="content" v-html="content"></div> + <article class="content" v-html="content"></article> </div> </div> </template> diff --git a/pages/kronika/index.vue b/pages/kronika/index.vue index 4bb6910..f61e615 100644 --- a/pages/kronika/index.vue +++ b/pages/kronika/index.vue @@ -1,18 +1,54 @@ <template> <div style="padding-top: 20px"> <h2>Ostatnie wpisy</h2> - <a v-for="(post, index) in posts" :key="index" :href="post.route">{{post.content.meta.title}}</a> + <div class="post-list"> + <chronicle-post + v-for="(post, index) in posts" + :key="index" + :route="post.route" + :title="post.content.meta.title" + :description="post.content.description" + /> + </div> </div> </template> <script> +import ChroniclePost from '~/components/ChroniclePost' import k from '~/api' +const URL = process.env.DEPLOY_URL || 'http://localhost:8080' + export default { + components: { + ChroniclePost + }, async asyncData() { return { posts: k.getPosts() } + }, + mounted() { + this.getPosts() + }, + methods: { + getPosts() { + if (this.posts.length < 1) { + this.$axios + .get(`${URL}/api/posts.json`) + .then(r => (this.posts = r.data)) + } + console.log(this.posts) + } } } -</script> \ No newline at end of file +</script> + +<style scoped> +.post-list { + display: flex; + flex-wrap: wrap; + justify-content: center; + max-width: 900px; +} +</style> \ No newline at end of file |