barta-india.in-old/pages/en/_slug.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>Date: {{ newsBySlug[0].created_at.slice(0, 10) }} / </span>
                            <span>Time: {{ newsBySlug[0].created_at.slice(11, -5) }} </span>
                    </div>
                    <v-card-title class="font-weight-bold justify-center" style="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;
                            " >
                        &nbsp; &nbsp; {{ 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 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 worldNews" :key="worldNews.slug" xl12>
                        <div style="padding: 20px 10px;">
                            
                                <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>
                            
                        </div>

                    </v-flex>
                </div>
            </v-col>
        </v-row>
    </v-container>
</template>
<script>
export default {
    layout: "en",
    
    // 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/?_sort=id:DESC&_limit=8`);
        let worldNews = await $axios.$get(`/bartas/?category=world&lang=en&_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,worldNews };
    },
    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>