orisoxin/pages/_lang/blog/index.vue

<template>
	<div class="blog-page page">
		<!---------------------------------- Section 1 ------------------------------------->
		<section class="s1-Img-BG">
			<div
				class="parallax"
				:style="{
					background: `linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(${cover ? cover : defaultCover})`
				}"
			>
				<h1 class="h1 anim-fadeIn" :style="{ color: $route.params.lang === 'fa' && '#fff' }">{{ content.s1.t1 }}</h1>
			</div>
		</section>

		<!---------------------------------- Section 2 ------------------------------------->

		<section class="s2-BG">
			<div class="container">
				<div class="row">
					<div class="col-12">
						<ul>
							<nuxt-link
								class="s2-all-cat"
								tag="li"
								:to="{ name: 'lang-blog', params: { lang: $route.params.lang }, query: { category: 'all', page: 1 } }"
							>
								<a :class="$route.query.category === 'all' ? 'active' : null">{{ content.s2.t1 }}</a>
							</nuxt-link>

							<nuxt-link
								class="s2-all-cat"
								v-for="item in blogCategories"
								:key="item._id"
								tag="li"
								:to="{
									name: 'lang-blog',
									params: { lang: $route.params.lang },
									query: { category: item.locale[$route.params.lang].title, page: 1 }
								}"
							>
								<a :class="$route.query.category === item.locale[$route.params.lang].title ? 'active' : null">{{
									item.locale[$route.params.lang].title
								}}</a>
							</nuxt-link>
						</ul>
					</div>
				</div>
			</div>
		</section>

		<!---------------------------------- Section 3 ------------------------------------->

		<section class="s3-BG">
			<div class="parallax section">
				<div class="container">
					<div class="row align-items-stretch" v-if="blogPosts.docs.length">
						<div class="col-12 col-md-6 col-lg-4 mb-4 anim-fadeIn" v-for="item in blogPosts.docs" :key="item._id">
							<div class="s3-item">
								<img :src="item.thumb" :alt="item.locale[$route.params.lang].title" />
								<div class="s3-body">
									<div class="s3-top-desc">
										<div>
											<i class="far fa-circle"></i>
											<span>{{ jDate(item.created_at) }}</span>
										</div>
										<!--                    <div>-->
										<!--                      <i class="far fa-clone"></i>-->
										<!--                      <span>{{ item.name }}</span>-->
										<!--                    </div>-->
										<div>
											<i class="far fa-folder-open"></i>
											<span>{{ item.category ? item.category.locale[$route.params.lang].title : 'No Category' }}</span>
										</div>
									</div>
									<h6 class="h6">{{ item.locale[$route.params.lang].title }}</h6>
									<p>{{ item.locale[$route.params.lang].short_description }}</p>
									<nuxt-link
										:to="{
											name: 'lang-blog-post',
											params: { lang: $route.params.lang, post: item.locale[$route.params.lang].title }
										}"
										class="s3-reading"
									>
										<p>
											{{ content.s3.t1 }}
											<i class="fas" :class="$route.params.lang === 'en' ? 'fa-arrow-right' : 'fa-arrow-left'"></i>
										</p>
									</nuxt-link>
								</div>
							</div>
						</div>
						<div class="col-12" v-if="!blogPosts.docs.length">
							<p>there is no post yet</p>
						</div>
					</div>

					<div class="row" v-else>
						<div class="col-12 s3-notFound">
							<h6 class="h6 notFound">{{ content.s3.t2 }}</h6>
						</div>
					</div>
				</div>
			</div>
		</section>

		<!--    paginate -->
		<section class="pagination section">
			<div class="row">
				<div class="col-12">
					<el-pagination
						layout="prev, pager, next"
						v-if="paginate"
						class="el-pagination"
						@current-change="pageNumber"
						:current-page="Number($route.query.page)"
						:page-count="Number(blogPosts.totalPages)"
					>
					</el-pagination>
				</div>
			</div>
		</section>
	</div>
</template>

<script>
	import {
		fadeInAnimation,
		fadeInStaggerAnimation,
		leftToRightAnimation,
		leftToRightStaggerAnimation,
		numberAnimation,
		progressAnimation
	} from '~/utils/animations'

	import moment from 'moment-jalaali'

	export default {
		data() {
			return {
				blogPosts: null,
				blogCategories: null,
				defaultCover: '/img/BlogPage/page-title.png'
			}
		},
		computed: {
			paginate() {
				return this.blogPosts.totalPages > 1
			},
			category() {
				return this.$route.query.category
			},
			page() {
				return this.$route.query.page
			},
			content() {
				return this.$store.state.content.blog[this.$route.params.lang]
			},
			cover() {
				return this.$store.state.global.cover?.blog
			}
		},
		watch: {
			category(newVal, oldVal) {
				this.$nuxt.refresh()
			},
			page(newVal, oldVal) {
				this.$nuxt.refresh()
			}
		},
		methods: {
			pageNumber(val) {
				this.$router.push({
					name: 'lang-blog',
					params: { lang: this.$route.params.lang },
					query: { category: this.$route.query.category, page: val }
				})
			},
			jDate(date) {
				return moment(date).locale('fa').format(' HH:mm - jYYYY/jMM/jDD')
			}
		},
		mounted() {
			this.$nextTick(() => {
				fadeInAnimation(this.$gsap)
				leftToRightAnimation(this.$gsap)
				fadeInStaggerAnimation(this.$gsap)
				leftToRightStaggerAnimation(this.$gsap)
				numberAnimation(this.$gsap)
				progressAnimation(this.$gsap)
				//--------------------------------------------------------- Section 1
				this.$gsap
					.timeline({
						scrollTrigger: {
							trigger: '.s2-BG',
							scrub: true,
							start: 'top top'
						}
					})
					.to($('.s1-Img-BG > div'), {
						duration: 9,
						opacity: 0,
						y: '10%'
					})
			})
		},
		async asyncData({ $axios, error, query }) {
			try {
				const allData = await Promise.all([
					// fetch blogCategories [0]
					$axios.get(`/api/public/blogCategories`),
					// fetch blogPosts [1]
					$axios.get(`/api/public/blogPosts?category=${encodeURIComponent(query.category)}&page=${query.page}`)
				])
				const blogCategories = allData[0]
				const blogPosts = allData[1]

				return {
					blogCategories: blogCategories.data,
					blogPosts: blogPosts.data
				}
			} catch (e) {
				error({ status: 404, message: 'page not found' })
			}
		}
	}
</script>