marc-leopold/pages/about.vue

<template>
  <ContentPage :heading="title" class="about">
    <div class="about-content" :class="{ 'no-content-container': isNoContent }">
      <h2 class="heading heading-top">{{ title }}</h2>
      <div v-html="body"></div>
    </div>
    <BackgroundImageLoader slot="background"
                           class="background"
                           :image-url="imageUrl"
    >
      <div slot="overlay" class="background-tint background-overlay"></div>
    </BackgroundImageLoader>
  </ContentPage>
</template>

<script>
import ContentPage from '@/components/ContentPage'
import BackgroundImageLoader from '@/components/BackgroundImageLoader'

export default {
  name: 'AboutPage',

  components: {
    ContentPage,
    BackgroundImageLoader,
  },

  head () {
    return {
      title: this.title,
      meta: [{ 
        hid: 'description',
        name: 'description',
        content: 'All about the work of photographer Marc Leopold, his philosophy and inspirations.'
      }],
    }
  },

  async asyncData ({ $axios }) {
    try {
      const isNoContent = false
      let { title, imageUrl, body } = await $axios.$get('/api/v1/about')
      if (!body || body.length < 1) {
        throw new Error('No body in response')
      } else if (!imageUrl || imageUrl.length < 1) {
        imageUrl = '/img/default-about.jpg'
      }
      return { title, imageUrl, body, isNoContent }
    } catch {
      return {
        title: 'Coming Soon',
        imageUrl: '/img/default-about.jpg',
        body: `<div class="no-services">
                <p class="no-conttent-text">Please check back, I will be updating this page shortly.</p>
              </div>
        `,
        isNoContent: true,
      }
    }
  },

}
</script>

<style scoped lang="scss">
.about {
  font-size: 1rem;
}

.about-content {
  color: $color__neutral-800;
  text-shadow: 0 0 3px #000;

  @media (min-width: 60em) {
    padding: 1rem 2rem;
  }
}

.about-content /deep/ blockquote {
  font-size: 1.4em;
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  text-align: center;
}

.about-content /deep/ blockquote p {
  color: $color__neutral-700;
  text-shadow: 0 0 3px #000;
}

.heading {
  color: $color__neutral-900;
  @include font-title(400);
  text-align: center;
}

  .heading-top {
    margin-bottom: 1.5rem;
  }

.about-content /deep/ ul {
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  font-size: 1.2em;
  line-height: 1.2;
  margin-bottom: 4.5rem;
}

  .about-content /deep/ li {
    position: relative;
    padding: 1.25rem 0 1.25rem;

    &::after {
      content: '';
      position: absolute;
      width: 2rem;
      height: 1px;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);

      background-color: rgba($color__neutral-500, .6);
    }

    &:first-child {
      padding-top: 0;
    }

    &:last-child {
      padding-bottom: 0;

      &::after {
        display: none;
      }
    }
  }

.about-content /deep/ h2 {
  text-align: center;
}

.about-content /deep/ .background-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
</style>