<template>
  <main class="home" aria-labelledby="main-title">
    <div class="flex-container">
      <header class="hero">
        <img
          v-if="data.heroImage"
          src='../assets/hero.png'
          :alt="data.heroAlt || 'hero'"
        >

        <h1 v-if="data.heroText !== null" id="main-title">{{ data.heroText || $title || 'Hello' }}</h1>

        <p
          class="action"
          v-if="data.actionText && data.actionLink"
        >
          <NavLink
            class="action-button"
            :item="actionLink"
          />
        </p>
      </header>
      <div id="link">
          <div class="block" v-for="item in link">
            <a :href= "item.url">{{item.title}}</a>
          </div>
      </div>
    </div>

    <Content class="theme-default-content custom"/>

    <div
      class="footer"
      v-if="data.footer"
    >
      {{ data.footer }}
    </div>
  </main>
</template>

<script>
import NavLink from '@theme/components/NavLink.vue'

export default {
  data : () => {
    return {
      link: [
          {title: '教程', url: '/reference'}, 
          {title: '框架', url: '/framework'}, 
          {title: '组件', url: '/component'},
          {title: 'API', url: '/api'}
        ]
    }
  },
  components: { NavLink },

  computed: {
    data () {
      return this.$page.frontmatter
    },

    actionLink () {
      return {
        link: this.data.actionLink,
        text: this.data.actionText
      }
    }
  }
}
</script>

<style lang="stylus">
.home
  #link
      text-align center
      justify-content center
      .block 
        text-align: center;
        display inline-block
        min-width 2.5rem
        background-color #fff
        border 1px solid #ebeef5
        box-shadow 0 2px 12px 0 rgba(0,0,0,.1)
        padding .6rem 1rem
        margin .5rem 1rem
        border-radius 1.5rem

  height 100vh
  display flex
  flex-direction column
  justify-content space-evenly
  padding $navbarHeight 2rem 0
  max-width 960px
  margin 0px auto
  .hero
    text-align center
    img
      max-width: 40%
      max-height 280px
      display block
      margin 3rem auto 1.5rem
    h1
      font-size 1.2rem
    h1, .description, .action
      margin 1.8rem auto
    .description
      max-width 35rem
      font-size 1.6rem
      line-height 1.3
      color lighten($textColor, 40%)
    .action-button
      display inline-block
      font-size 1.2rem
      color #fff
      background-color $accentColor
      padding 0.8rem 1.6rem
      border-radius 4px
      transition background-color .1s ease
      box-sizing border-box
      border-bottom 1px solid darken($accentColor, 10%)
      &:hover
        background-color lighten($accentColor, 10%)
  .footer
    padding 2.5rem
    border-top 1px solid $borderColor
    text-align center
    color lighten($textColor, 25%)

@media (max-width: $MQMobile)
  .home
    .features
      flex-direction column
    .feature
      max-width 100%
      padding 0 2.5rem

@media (max-width: $MQMobileNarrow)
  .home
    padding-left 1.5rem
    padding-right 1.5rem
    .hero
      img
        max-height 210px
        margin 2rem auto 1.2rem
      h1
        font-size 1.5rem
      h1, .description, .action
        margin 1.2rem auto
      .description
        font-size 1.2rem
      .action-button
        font-size 1rem
        padding 0.6rem 1.2rem
    .feature
      h2
        font-size 1.25rem
</style>
