diff options
Diffstat (limited to 'src/components/News.vue')
-rw-r--r-- | src/components/News.vue | 54 |
1 files changed, 54 insertions, 0 deletions
diff --git a/src/components/News.vue b/src/components/News.vue new file mode 100644 index 0000000..8a58514 --- /dev/null +++ b/src/components/News.vue @@ -0,0 +1,54 @@ +<template> + <div class="news" v-if="count"> + <span v-if="!entries.length">(no news entries)</span> + + <article class="entry" v-for="entry in entries" :id="entry.date"> + <a :href="'#' + entry.date">{{ entry.title }}</a> + <time :datetime="entry.date" class="date">{{ entry.date }}</time> + <section class="body" v-html="entry.html"></section> + </article> + </div> +</template> + +<style scoped> +.news .entry { + margin-bottom: 1em; + + &:nth-of-type(1n + 2) { + margin-top: 2em; + } + + & > a { + text-decoration: none; + color: inherit; + font-weight: bold; + } + + & > .date { + float: right; + } + + & .body { + margin-top: 5px; + } +} +</style> + +<script lang="ts"> +import { Component, Prop, Vue } from "vue-property-decorator"; +import newsEntries from "@/assets/news.json"; + +interface NewsEntry { + title: string; + date: string; + author: string; + html: string; +} + +@Component +export default class News extends Vue { + @Prop({ default: Infinity }) private count!: number; + @Prop({ default: 0 }) private from!: number; + private entries: NewsEntry[] = (newsEntries as NewsEntry[]).slice(this.from, this.count); +} +</script> |