193 lines
7.7 KiB
Vue
193 lines
7.7 KiB
Vue
<template>
|
|
<v-container mt-4 style="padding-bottom:120px;">
|
|
<v-row>
|
|
<v-col sm="12" xl="8" v-if="newsBySlug.length > 0">
|
|
<v-card>
|
|
<div style="padding: 0 100px;">
|
|
<v-card class="justify-center ">
|
|
<v-img :src="`https://api5.siliconpin.com${newsBySlug[0].image.url}`" aspect-ratio="1.75">
|
|
<span v-text="newsBySlug[0].text_over_image" class="text_over_image"></span>
|
|
</v-img>
|
|
|
|
|
|
</v-card>
|
|
<span>Published on : {{latestNews[0].created_at.slice(0,10)}} , </span>
|
|
<span>at : {{latestNews[0].created_at.slice(11,-5)}} </span>
|
|
</div>
|
|
|
|
|
|
<v-card-title class="font-weight-bold justify-center " style="overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3; font-size:2em; line-height: 1.6;">
|
|
{{ newsBySlug[0].title }}</v-card-title>
|
|
<!-- :class="{'subheading': $vuetify.breakpoint.xs}" -->
|
|
<hr>
|
|
<p class="text-justify"
|
|
style="padding:20px; white-space:pre-wrap;font-size:1.2em; line-height: 1.6;font-weight:bold;"
|
|
mb-40>
|
|
{{ newsBySlug[0].content }}
|
|
</p>
|
|
<br />
|
|
<div id="block_container">
|
|
<div>
|
|
<ShareNetwork network="facebook" :title="newsBySlug[0].title"
|
|
:url="'https://barta-india.in/'+$route.params.slug">
|
|
<v-icon class="facebook">mdi-facebook</v-icon>
|
|
<span>Share on Facebook</span>
|
|
</ShareNetwork>
|
|
</div>
|
|
<div>
|
|
<ShareNetwork network="twitter" :title="newsBySlug[0].title"
|
|
:url="'https://barta-india.in/'+$route.params.slug">
|
|
<v-icon class="twitter">mdi-twitter</v-icon>
|
|
<span>Share on Twitter </span>
|
|
</ShareNetwork>
|
|
</div>
|
|
<div>
|
|
<ShareNetwork network="whatsapp" :title="newsBySlug[0].title"
|
|
:url="'https://barta-india.in/'+$route.params.slug">
|
|
<v-icon class="whatsapp">mdi-whatsapp</v-icon>
|
|
<span>Share on whatsapp</span>
|
|
</ShareNetwork>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="fb"></div>
|
|
|
|
<!-- <h2 v-html="url"></h2> -->
|
|
</v-card>
|
|
</v-col>
|
|
<v-col sm="12" xl="8" v-else >
|
|
<v-card>
|
|
<div style="padding: 0 100px;">
|
|
<v-card height="200" class="justify-center ">
|
|
404 ! Not found
|
|
</v-card>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- <h2 v-html="url"></h2> -->
|
|
</v-card>
|
|
</v-col>
|
|
|
|
<v-col sm="12" xl="4">
|
|
<div style="padding: 0 50px;">
|
|
<v-flex v-for="ln in latestNews" :key="latestNews.slug" xl12>
|
|
<div style="padding: 20px 10px;">
|
|
<nuxt-link :to="`/${ln.slug}`">
|
|
<v-card width="85%">
|
|
<v-img :src="`https://api5.siliconpin.com${ln.image.url}`" aspect-ratio="1.75">
|
|
<span v-text="ln.text_over_image" class="text_over_image"></span>
|
|
</v-img>
|
|
<p class="px-4"> <span>Published on : {{latestNews[0].created_at.slice(0,10)}} , </span>
|
|
<span>at : {{latestNews[0].created_at.slice(11,-5)}} </span></p>
|
|
|
|
|
|
|
|
<v-card-title primary-title>
|
|
<div>
|
|
|
|
<h3 class="headline mb-0" v-text="ln.title"></h3>
|
|
</div>
|
|
</v-card-title>
|
|
</v-card>
|
|
</nuxt-link>
|
|
</div>
|
|
|
|
</v-flex>
|
|
</div>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
// data: () => ({
|
|
// posts: [],
|
|
// pageTitle:"barta-india.in news portal",
|
|
// }),
|
|
// data() {
|
|
// return {
|
|
// world: {},
|
|
// national: {},
|
|
// local: {},
|
|
// editorial: {},
|
|
// totalNoOfNews: null,
|
|
// slug: "",
|
|
// pageTitle:"",
|
|
// // apiLink:process.env.apiLink
|
|
// };
|
|
// },
|
|
|
|
async asyncData({ $axios, route }) {
|
|
const newsBySlug = await $axios.$get(`/bartas/?slug=` + route.params.slug)
|
|
let latestNews = await $axios.$get(`/bartas/?lang=bn&_sort=id:DESC&_limit=8`)
|
|
let pageTitle = ""
|
|
let imageUrl = ""
|
|
if(newsBySlug.length > 0) {
|
|
pageTitle = newsBySlug[0].title;
|
|
imageUrl = newsBySlug[0].image.url;
|
|
|
|
}
|
|
else {
|
|
pageTitle = "this page not found";
|
|
imageUrl = "https://barta-india.in/icon.png";
|
|
}
|
|
// $route.fullPath
|
|
// console.log(route.params.slug);
|
|
// console.log(this.pageTitle)
|
|
latestNews = JSON.parse(JSON.stringify(latestNews).replace(/\:null/gi, "\:\"\""));
|
|
const slugUrl = route.params.slug
|
|
return { newsBySlug, latestNews, slugUrl, pageTitle, imageUrl }
|
|
},
|
|
head() {
|
|
return {
|
|
title: this.pageTitle,
|
|
meta: [
|
|
// hid is used as unique identifier. Do not use `vmid` for it as it will not work
|
|
{
|
|
hid: 'description',
|
|
name: 'description',
|
|
content: this.pageTitle
|
|
},
|
|
{
|
|
hid: 'og:description',
|
|
name: 'og:description',
|
|
content: this.pageTitle
|
|
},
|
|
{
|
|
hid: 'og:title',
|
|
name: 'og:title',
|
|
content: this.pageTitle
|
|
},
|
|
{
|
|
hid: 'og:url',
|
|
name: 'og:url',
|
|
content: 'https://barta-india.in/' + this.slugUrl
|
|
},
|
|
{
|
|
hid: 'og:image',
|
|
name: 'og:image',
|
|
content: 'https://api5.siliconpin.com' + this.imageUrl
|
|
},
|
|
{
|
|
hid: 'og:image:secure_url',
|
|
name: 'og:image:secure_url',
|
|
content: 'https://api5.siliconpin.com' + this.imageUrl
|
|
},
|
|
{
|
|
hid: 'og:type',
|
|
name: 'og:type',
|
|
content: 'News'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scopped>
|
|
|
|
</style> |