update:add ci cd files ==> do not edit those file

pages/_lang/blog/_post.vue

@@ -0,0 +1,233 @@
+<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>

pages/_lang/blog/index.vue

@@ -0,0 +1,226 @@
+<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>