orisoxin/pages/_lang/blog/_post.vue

<template>
	<div class="blog-details-page page">
		<!---------------------------------- Section 1 ------------------------------------->
		<section class="s1-Img-BG">
			<div
				class="parallax"
				:style="{ backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(${post.cover})` }"
			>
				<div class="s1-title anim-fadeIn">
					<div class="date">
						<p>{{ jDateDay(post.createt_at) }}</p>
						<p>{{ jDateMonth(post.created_at) }}</p>
					</div>
					<div class="s1-desc">
						<h6 class="h6">{{ post.locale[$route.params.lang].title }}</h6>
						<div>
							<IconBlogDetailsFolderIcon/>
							<span> {{ content.s1.t1 }} </span>
							<IconBlogDetailsCategoryIcon/>
							<span> {{ post.category ? post.category.locale[$route.params.lang].title : 'No Category' }} </span>
						</div>
					</div>
				</div>
			</div>
		</section>

		<!---------------------------------- Section 2 ------------------------------------->
		<section class="s2-BG">
			<div class="s2-desc anim-leftToRight">
				<p>{{ content.s2.t2 }}</p>
				<i class="fas" :class="$route.params.lang === 'fa' ? 'fa-angle-left' : 'fa-angle-right'"></i>
				<p>{{ content.s2.t1 }}</p>
				<i class="fas" :class="$route.params.lang === 'fa' ? 'fa-angle-left' : 'fa-angle-right'"></i>
				<p>{{ post.locale[$route.params.lang].title }}</p>
			</div>
		</section>

		<!---------------------------------- Section Content ------------------------------------->
		<section class="content section">
			<div class="container">
				<div class="row">
					<div class="col-12">
						<div class="ck-content" v-html="post.locale[$route.params.lang].description"></div>
						<div v-if="post.video" class="mt-3 d-flex justify-content-center">
							<video height="400" controls :src="post.video"></video>
						</div>
					</div>
				</div>
			</div>
		</section>

		<!---------------------------------- Section 8 ------------------------------------->
		<section class="s8-Img-BG anim-fadeInStagger" v-if="post.last_section_image">
			<div
				class="parallax"
				:style="{
					backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(${post.last_section_image})`
				}"
			>
				<h2 class="h2 staggerItem" v-if="post.locale[$route.params.lang].last_section_image_title">
					{{ post.locale[$route.params.lang].last_section_image_title }}
				</h2>
				<div class="s8-desc staggerItem" v-if="post.locale[$route.params.lang].last_section_image_description">
					<p>{{ post.locale[$route.params.lang].last_section_image_description }}</p>
				</div>
			</div>
		</section>

		<!---------------------------------- Section 9 ------------------------------------->
		<section class="s9-BG" v-if="post.locale[$route.params.lang].last_section_title">
			<div class="parallax section">
				<div class="container anim-fadeInStagger">
					<div class="s9-title staggerItem">
						<h5 class="h5">{{ post.locale[$route.params.lang].last_section_title }}</h5>
					</div>
					<div class="s9-desc staggerItem">
						<p>{{ post.locale[$route.params.lang].last_section_description }}</p>
					</div>
				</div>
			</div>
		</section>

		<!---------------------------------- Section 10 ------------------------------------->
		<section class="s10-BG">
			<div class="">
				<div class="s10-shares">
					<!--          <p>0 SHARES</p>-->
				</div>

				<div class="s10-social">
					<ul>
						<li>
							<ShareNetwork
								network="facebook"
								:url="'https://orisoxin.com' + $route.fullPath"
								:title="post.locale[$route.params.lang].title"
								:description="post.locale[$route.params.lang].short_description"
								hashtags="orsioxin"
							>
								<i class="fab fa-facebook-f"></i>
							</ShareNetwork>
						</li>
						<li>
							<ShareNetwork
								network="Twitter"
								:url="'https://orisoxin.com' + $route.fullPath"
								:title="post.locale[$route.params.lang].title"
								:description="post.locale[$route.params.lang].short_description"
								hashtags="orsioxin"
							>
								<i class="fab fa-twitter"></i>
							</ShareNetwork>
						</li>
						<li>
							<ShareNetwork
								network="LinkedIn"
								:url="'https://orisoxin.com' + $route.fullPath"
								:title="post.locale[$route.params.lang].title"
								:description="post.locale[$route.params.lang].short_description"
								hashtags="orsioxin"
							>
								<i class="fab fa-linkedin-in"></i>
							</ShareNetwork>
						</li>
						<li>
							<ShareNetwork
								network="Email"
								:url="'https://orisoxin.com' + $route.fullPath"
								:title="post.locale[$route.params.lang].title"
								:description="post.locale[$route.params.lang].short_description"
								hashtags="orsioxin"
							>
								<i class="fas fa-envelope"></i>
							</ShareNetwork>
						</li>
						<!--            <li>-->
						<!--              <ShareNetwork-->
						<!--                  network="SMS"-->
						<!--                  :url="'https://orisoxin.com' + $route.fullPath"-->
						<!--                  :title="post.locale[$route.params.lang].title"-->
						<!--                  :description="post.locale[$route.params.lang].short_description"-->
						<!--                  hashtags="orsioxin"-->
						<!--              >-->
						<!--                <i class="fab fa-google-plus-g"></i>-->
						<!--              </ShareNetwork>-->
						<!--            </li>-->
					</ul>
				</div>
			</div>
		</section>
	</div>
</template>

<script>
import {
	fadeInAnimation,
	fadeInStaggerAnimation,
	leftToRightAnimation,
	leftToRightStaggerAnimation,
	numberAnimation,
	progressAnimation,
	rightToLeftAnimation
} from '@/utils/animations'
import moment from 'moment-jalaali'

export default {
	data() {
		return {
			post: null
		}
	},
	methods: {
		jDateDay(date) {
			let dateFormat = moment(date)
			if (this.$route.params.lang === 'fa') {
				moment.loadPersian()
				return dateFormat.format('jYYYY/jMM/jDD').split('/')[2]
			} else {
				return dateFormat.format('yyyy/mm/DD').split('/')[2]
			}
		},
		jDateMonth(date) {
			let dateFormat = moment(date)
			if (this.$route.params.lang === 'fa') {
				moment.loadPersian()
				return dateFormat.format('jYYYY/jMMMM/jDD').split('/')[1]
			} else {
				return dateFormat.format('yyyy/MMM/DD').split('/')[1]
			}
		}
	},
	mounted() {
		this.$nextTick(() => {
			fadeInAnimation(this.$gsap)
			leftToRightAnimation(this.$gsap)
			fadeInStaggerAnimation(this.$gsap)
			leftToRightStaggerAnimation(this.$gsap)
			numberAnimation(this.$gsap)
			progressAnimation(this.$gsap)
			rightToLeftAnimation(this.$gsap)
			//--------------------------------------------------------- Section 1
			this.$gsap
				.timeline({
					scrollTrigger: {
						trigger: '.s2-BG',
						scrub: true,
						start: 'top top'
					}
				})
				.to($('.s1-Img-BG .parallax'), {
					duration: 9,
					opacity: 0,
					y: '10%'
				})
		})
	},
	computed: {
		content() {
			return this.$store.state.content.blogDetails[this.$route.params.lang]
		}
	},
	async asyncData({$axios, params, error}) {
		try {
			const post = await $axios.get(`/api/public/blogPost/${encodeURIComponent(params.post)}`)
			return {
				post: post.data
			}
		} catch (e) {
			error({status: 404, message: 'page not found'})
		}
	}
}
</script>