<template>
  <div>
    <nuxt-content :document="page" />
  </div>
</template>

<script>
import {
  defineComponent,
  useContext,
  ref,
  onMounted,
  useStore,
} from '@nuxtjs/composition-api'
import Prism from '~/plugins/prism'

export default defineComponent({
  setup() {
    const page = ref({})
    const { $content, params, error } = useContext()
    const store = useStore()
    // Finding current path's slug.
    const slug = params.value.slug || 'index'

    $content(store.state.lang, slug)
      .fetch()
      .then((doc) => {
        page.value = doc
      })
      .catch((_) => {
        error({ statusCode: 404, message: 'Page not found' })
      })

    onMounted(() => {
      console.log(Prism.languages)
      Prism.highlightAll()
    })

    return {
      page,
    }
  },
})
</script>

<style lang="scss">
@import '@/static/css/global-styles.scss';

.nuxt-content {
  .icon.icon-link {
    display: none;
  }

  @mixin heading {
    line-height: 1.3;
    font-weight: 300;
    letter-spacing: -0.01em;
    color: rgba(0, 0, 0, 0.54);
    margin: 1em 0.5em;
  }

  h1 {
    @include heading;
    font-size: 2.5em;
  }
  h2 {
    @include heading;
    font-size: 2em;
  }
  h3,
  h4 {
    @include heading;
    font-size: 1.5em;
  }

  .nuxt-content-highlight {
    margin-right: 10px;
    margin-left: 10px;

    .filename {
      margin-top: 0.5em;
      border-top-left-radius: 0.3em;
      border-top-right-radius: 0.3em;
      padding-left: 1em;
      color: white;
      display: flex;
      flex: 1 auto;
      left: 0;
      width: 100%;
      background-color: $primary;
      font: lighter;
      z-index: 10;
    }

    .filename + pre {
      margin-top: 0;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }

    .table {
      background-color: inherit !important;
    }
  }

  ul {
    list-style: disc;
    margin: 1em;
  }

  li {
    margin-bottom: 0.5em !important;
    margin-left: 1.25em !important;
  }
}
</style>
