add blog

packages/web/components/PostHeader.vue

@@ -0,0 +1,53 @@
+<template lang="pug">
+.post-meta.mb-sm
+  .post-meta-author
+    a.mr-md(:href="author.link" style="width: 24px; min-width: 24px"): img(:src="author.avatar" style="border-radius: 50%;")
+    a.mr-md(:href="author.link") {{author.login}}
+  div(style="flex-grow: 1")
+  div {{dateString}}
+</template>
+
+<script lang="ts">
+import moment, { Moment } from 'moment'
+import { Vue, Component, Prop } from 'nuxt-property-decorator'
+
+@Component
+export default class PostHeader extends Vue {
+  @Prop({ required: true }) header!: any
+
+  author = {
+    login: 'polvcode',
+    avatar: 'https://en.gravatar.com/userimage/35152960/7140205ee2a71cbe54d3f2ac43c0370d.jpg?size=24',
+    link: 'https://polvcode.dev',
+  }
+
+  get moment () {
+    return this.header.date ? moment(this.header.date) : null
+  }
+
+  get dateString () {
+    return this.moment ? this.moment.format('ddd D MMMM YYYY') : ''
+  }
+}
+</script>
+
+<style lang="scss">
+.post-meta {
+  display: flex;
+  flex-direction: row;
+  white-space: nowrap;
+  overflow: auto;
+
+  .post-meta-author {
+    display: flex;
+    flex-direction: row;
+    white-space: nowrap;
+    justify-content: center;
+
+    a {
+      border: none;
+      display: block;
+    }
+  }
+}
+</style>