<template>
  <div class="theme-plain__body">
    <div class="theme-blog">
      <div class="theme-blog__header">
        <h1 class="theme-blog__title">
          {{ $page.frontmatter.title }}
        </h1>
        <div class="theme-blog__subtitle">
          <span class="theme-blog__date">{{ $page.frontmatter.date ? formatPostTime($page.frontmatter.date) : '' }}</span>
          <span v-for="(i, index) in $page.frontmatter.coffee" :key="index">☕️</span>
          <span v-if="$page.frontmatter.time">{{ $page.frontmatter.time }} read</span>
        </div>
      </div>
      <div class="theme-blog__body">
        <div class="theme-blog__markdown">
          <Content slot="default" class="markdown-body"/>
        </div>
      </div>
      </div>
    <Footer />
  </div>
</template>

<script>
import Vue from 'vue';
import { format } from 'date-fns'
import Footer from '../components/footer';

export default {
  components: {
    Footer
  },

  methods: {
    formatPostTime(date) {
      return format(date, 'MM/DD YYYY');
    }
  }
}
</script>

<style lang="scss">
@import '../styles/markdown.css';
.theme-blog {
    width: 750px;
    padding: 15px;
    margin: 0 auto;
    margin: 30px auto 0 auto;

    &__title {
        font-size: 35px;
    }

    &__subtitle {
        font-size: 14px;
        font-weight: 300;
    }

    &__date {
        margin-right: 5px;
    }

    &__header {
        margin-bottom: 20px;
    }

    &__markdown {
        a.header-anchor {
          float: left;
          margin-left: -20px;
          margin-top: 3px;
          font-size: 22px;
          line-height: 1.25;
          opacity: 0;

            &:hover {
              text-decoration: none;
            }
        }

        h1, h2, h3, h4, h5, h6 {
            &:hover .header-anchor {
              opacity: 1
            }
        }

    }
}
</style>
