barta-india.in-old/pages/index.vue

<template>
<p v-if="$fetchState.pending">Fetching news...</p>
    <p v-else-if="$fetchState.error">Error while fetching news</p>
  <div v-else>
    <v-container>
      <div>
        <template>
          <div>
            <v-row>

              <v-col class="mb-4" cols="12" md="6" sm="12" lg="6">
                <v-card color="" class="pb-16">
                  <h1 class=" ml-1">Latest News</h1>
                  <!-- first bengali news link -->
                  <!-- world news input here -->
                  <nuxt-link :to="`/${latestNews[0].slug}`">
                    <v-card flat outlined class="mb-4 mx-1 pa-2">
                      <v-img :src="`https://api5.siliconpin.com${latestNews[0].image.url}`" aspect-ratio="1.75"> <span
                          v-text="latestNews[0].text_over_image" class="text_over_image"> </span>

                      </v-img>


                      <p primary-title class="text-lg-h6 text-sm-h6">
                        {{ latestNews[0].title }}
                        <!-- <v-text class="text-lg-h4 text-sm-h5">{{latestNews[0].title}}</v-text> -->
                      </p>
                      <span>Publish on : {{ latestNews[0].created_at.slice(0, 10) }}, </span>
                      <span>at : {{ latestNews[0].created_at.slice(11, -5) }} </span>

                    </v-card>
                  </nuxt-link>
                  <!-- bengali news -->
                  <v-row>
                    <v-col>
                      <!-- news img -->
                      <nuxt-link :to="`/${latestNews[1].slug}`">
                        <v-card flat outlined class="mx-1">
                          <v-row>

                            <v-col>

                              <p primary-title class="text-lg-h6 text-sm-h6">
                                {{ latestNews[1].title }}



                                <!-- <v-text class="text-lg-h4 text-sm-h5">{{latestNews[1].title}}</v-text> -->
                              </p>
                              <span>Published on: {{ latestNews[1].created_at.slice(0, 10) }}, </span><br>
                              <span>at: {{ latestNews[1].created_at.slice(11, -5) }} </span>

                            </v-col>
                            <v-col>
                              <v-img :src="`https://api5.siliconpin.com${latestNews[1].image.url}`" aspect-ratio="1.75">
                                <span v-text="latestNews[1].text_over_image" class="text_over_image"></span>

                              </v-img>
                            </v-col>
                          </v-row>
                        </v-card>
                      </nuxt-link>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col>
                      <!-- news img -->
                      <nuxt-link :to="`/${latestNews[2].slug}`">
                        <v-card flat outlined class="mx-1">
                          <v-row>

                            <v-col>

                              <p primary-title class="text-lg-h6 text-sm-h6">
                                {{ latestNews[2].title }}

                                <!-- <v-text class="text-lg-h4 text-sm-h5">{{latestNews[2].title}}</v-text> -->
                              </p>
                              <span>Published on: {{ latestNews[2].created_at.slice(0, 10) }}, </span><br>                              <span>at: {{ latestNews[2].created_at.slice(11, -5) }} </span>
                            </v-col>
                            <v-col>
                              <v-img :src="`https://api5.siliconpin.com${latestNews[2].image.url}`" aspect-ratio="1.75">
                                <span v-text="latestNews[2].text_over_image" class="text_over_image"></span>

                              </v-img>
                            </v-col>
                          </v-row>
                        </v-card>
                      </nuxt-link>
                    </v-col>

                  </v-row>
                  <v-row>
                    <v-col>
                      <!-- news img -->
                      <nuxt-link :to="`/${latestNews[3].slug}`">
                        <v-card flat outlined class="mx-1">
                          <v-row>

                            <v-col>
                              <p primary-title class="text-lg-h6 text-sm-h6">
                                {{ latestNews[3].title }}


                                <!-- <v-text class="text-lg-h4 text-sm-h5">{{latestNews[3].title}}</v-text> -->
                              </p>
                              <span>Published on: {{ latestNews[3].created_at.slice(0, 10) }}, </span><br>                              <span>at: {{ latestNews[3].created_at.slice(11, -5) }} </span>
                            </v-col>
                            <v-col>
                              <v-img :src="`https://api5.siliconpin.com${latestNews[3].image.url}`" aspect-ratio="1.75">
                                <span v-text="latestNews[3].text_over_image" class="text_over_image"></span>

                              </v-img>
                            </v-col>
                          </v-row>
                        </v-card>
                        <!-- nuyfncfuifhc rhc
                    nuimwcheucm
                    cuiyhmtc -->
                      </nuxt-link>
                    </v-col>
                  </v-row>

                </v-card>
              </v-col>
              <v-col cols="12" md="6" sm="12" lg="6">
                <v-card color="" class="pb-12">
                  <h1 class=" ml-1">Latest Videos</h1>

                  <v-card flat outlined class="mx-1 mb-2 pa-2">
                    <lite-youtube v-bind:videoid="`${videoNews[0].content}`"
                      params="controls=0&start=10&end=30&modestbranding=2&rel=0&enablejsapi=1" />
                    <div>
                      <p class="text-lg-h6 text-sm-h6" v-text="videoNews[0].title"></p>
                      <span>Published on : {{ videoNews[0].created_at.slice(0, 10) }}, </span>
                      <span>at : {{ videoNews[0].created_at.slice(11, -5) }} </span> <a
                        :href="`https://youtu.be/${videoNews[0].content}`">
                        <v-btn color="error"> পুরো দেখুন </v-btn>
                      </a>
                    </div>
                  </v-card>

                  <div>

                    <v-card flat outlined class="mx-1 mb-2 pa-2">
                      <v-row>
                        <v-col>
                          <div>
                            <p class="text-lg-h6 text-sm-h6" v-text="videoNews[1].title"></p>
                            <span>Published on : {{ videoNews[1].created_at.slice(0, 10) }}, </span><br>                            <span>at : {{ videoNews[1].created_at.slice(11, -5) }} </span> <a
                              :href="`https://youtu.be/${videoNews[1].content}`">
                              <v-btn color="error"> পুরো দেখুন </v-btn>
                            </a>

                          </div>
                        </v-col>
                        <v-col>
                          <lite-youtube v-bind:videoid="`${videoNews[1].content}`"
                            params="controls=0&start=10&end=30&modestbranding=2&rel=0&enablejsapi=1" />

                        </v-col>
                      </v-row>
                    </v-card>
                  </div>

                  <div>

                    <v-card flat outlined class="mx-1 mb-2 pa-2">
                      <v-row>
                        <v-col>
                          <div>
                            <p class="text-lg-h6 text-sm-h6" v-text="videoNews[2].title"></p>
                            <span>Published on : {{ videoNews[2].created_at.slice(0, 10) }}, </span><br>
                            <span>at : {{ videoNews[2].created_at.slice(11, -5) }} </span> <a
                              :href="`https://youtu.be/${videoNews[2].content}`">
                              <v-btn color="error"> পুরো দেখুন </v-btn>
                            </a>
                          </div>
                        </v-col>
                        <v-col>
                          <lite-youtube v-bind:videoid="`${videoNews[2].content}`"
                            params="controls=0&start=10&end=30&modestbranding=2&rel=0&enablejsapi=1" />
                          <p primary-title>

                          </p>
                        </v-col>
                      </v-row>
                    </v-card>
                  </div>
                  <div>

                    <v-card flat outlined class="mx-1 mb-2 pa-2">
                      <v-row>
                        <v-col>
                          <div>
                            <p class="text-lg-h6 text-sm-h6" v-text="videoNews[3].title"></p>
                            <span>Published on : {{ videoNews[3].created_at.slice(0, 10) }}, </span><br>
                            <span>at : {{ videoNews[3].created_at.slice(11, -5) }} </span> <a
                              :href="`https://youtu.be/${videoNews[3].content}`">
                              <v-btn color="error"> পুরো দেখুন </v-btn>
                            </a>
                          </div>
                        </v-col>
                        <v-col>
                          <lite-youtube v-bind:videoid="`${videoNews[3].content}`"
                            params="controls=0&start=10&end=30&modestbranding=2&rel=0&enablejsapi=1" />
                          <p primary-title>

                          </p>
                        </v-col>
                      </v-row>
                    </v-card>
                  </div>
                </v-card>
              </v-col>
            </v-row>
          </div>
        </template>
        <template>
          <div>
            <h1 class=" ml-1">Popular News</h1>
          </div>

          <v-sheet color="" class="mx-auto">
            <v-slide-group class="mb-14 py-10">
              <v-slide-item>
                <nuxt-link :to="`/${latestNews[4].slug}`">
                  <v-card width="400" flat outlined class="mx-1 pa-2">

                    <v-img :src="`https://api5.siliconpin.com${latestNews[4].image.url}`" aspect-ratio="1.75">
                      <span v-text="latestNews[4].text_over_image" class="text_over_image"></span>
                    </v-img>




                    <p primary-title class="text-lg-h6 text-sm-h6">
                      <span>On : {{ latestNews[4].created_at.slice(0, 10) }},</span>
                      <span>at : {{ latestNews[4].created_at.slice(11,-5) }}</span>
                      <br>
                      {{ latestNews[4].title }}
                      <!-- <v-text class="text-lg-h4 text-sm-h5">{{latestNews[4].title}}</v-text> -->
                    </p>

                  </v-card>
                </nuxt-link>
              </v-slide-item>
              <v-slide-item>
                <nuxt-link :to="`/${latestNews[5].slug}`">
                  <v-card width="400" flat outlined class="mx-1 pa-2">

                    <v-img :src="`https://api5.siliconpin.com${latestNews[5].image.url}`" aspect-ratio="1.75">
                      <span v-text="latestNews[5].text_over_image" class="text_over_image"></span>
                    </v-img>




                    <p primary-title class="text-lg-h6 text-sm-h6"> <span>On : {{ latestNews[5].created_at.slice(0, 10) }},</span>
                      <span>at : {{ latestNews[5].created_at.slice(11,-5) }}</span><br>
                      {{ latestNews[5].title }}
                      <!-- <v-text class="text-lg-h4 text-sm-h5">{{latestNews[5].title}}</v-text> -->
                    </p>

                  </v-card>
                </nuxt-link>
              </v-slide-item>
              <v-slide-item>
                <nuxt-link :to="`/${latestNews[6].slug}`">
                  <v-card width="400" flat outlined class="mx-1 pa-2">

                    <v-img :src="`https://api5.siliconpin.com${latestNews[6].image.url}`" aspect-ratio="1.75">
                      <span v-text="latestNews[6].text_over_image" class="text_over_image"></span>
                    </v-img>




                    <p primary-title class="text-lg-h6 text-sm-h6"> <span>On : {{ latestNews[6].created_at.slice(0, 10) }},</span>
                      <span>at : {{ latestNews[6].created_at.slice(11,-5) }}</span><br>
                      {{ latestNews[6].title }}
                      <!-- <v-text class="text-lg-h4 text-sm-h5">{{latestNews[6].title}}</v-text> -->
                    </p>

                  </v-card>
                </nuxt-link>
              </v-slide-item>
              <v-slide-item>
                <nuxt-link :to="`/${latestNews[7].slug}`">
                  <v-card width="400" flat outlined class="mx-1 pa-2">

                    <v-img :src="`https://api5.siliconpin.com${latestNews[7].image.url}`" aspect-ratio="1.75">
                      <span v-text="latestNews[7].text_over_image" class="text_over_image"></span>
                    </v-img>




                    <p primary-title class="text-lg-h6 text-sm-h6"> <span>On : {{ latestNews[7].created_at.slice(0, 10) }},</span>
                      <span>at : {{ latestNews[7].created_at.slice(11,-5) }}</span><br>
                      {{ latestNews[7].title }}
                      <!-- <v-text class="text-lg-h4 text-sm-h5">{{latestNews[7].title}}</v-text> -->
                    </p>

                  </v-card>
                </nuxt-link>
              </v-slide-item>
              <v-slide-item>
                <nuxt-link :to="`/${latestNews[8].slug}`">
                  <v-card width="400" flat outlined class="mx-1 pa-2">

                    <v-img :src="`https://api5.siliconpin.com${latestNews[8].image.url}`" aspect-ratio="1.75">
                      <span v-text="latestNews[8].text_over_image" class="text_over_image"></span>
                    </v-img>




                    <p primary-title class="text-lg-h6 text-sm-h6"> <span>On : {{ latestNews[8].created_at.slice(0, 10) }},</span>
                      <span>at : {{ latestNews[8].created_at.slice(11,-5) }}</span><br>
                      {{ latestNews[8].title }}
                      <!-- <v-text class="text-lg-h4 text-sm-h5">{{latestNews[8].title}}</v-text> -->
                    </p>

                  </v-card>
                </nuxt-link>
              </v-slide-item>
              <v-slide-item>
                <nuxt-link :to="`/${latestNews[9].slug}`">
                  <v-card width="400" flat outlined class="mx-1 pa-2">

                    <v-img :src="`https://api5.siliconpin.com${latestNews[9].image.url}`" aspect-ratio="1.75">
                      <span v-text="latestNews[9].text_over_image" class="text_over_image"></span>
                    </v-img>




                    <p primary-title class="text-lg-h6 text-sm-h6"><span>On : {{ latestNews[9].created_at.slice(0, 10) }},</span>
                      <span>at : {{ latestNews[9].created_at.slice(11,-5) }}</span><br>
                      {{ latestNews[9].title }}
                    </p>

                  </v-card>
                </nuxt-link>
              </v-slide-item>
              <v-slide-item>
                <nuxt-link :to="`/${latestNews[10].slug}`">
                  <v-card width="400" flat outlined class="mx-1 pa-2">

                    <v-img :src="`https://api5.siliconpin.com${latestNews[10].image.url}`" aspect-ratio="1.75">
                      <span v-text="latestNews[10].text_over_image" class="text_over_image"></span>
                    </v-img>




                    <p primary-title class="text-lg-h6 text-sm-h6"> <span>On : {{ latestNews[10].created_at.slice(0, 10) }},</span>
                      <span>at : {{ latestNews[10].created_at.slice(11,-5) }}</span><br>
                      {{ latestNews[10].title }}
                    </p>

                  </v-card>
                </nuxt-link>
              </v-slide-item>

            </v-slide-group>
          </v-sheet>
          <div>
            <h1 class=" ml-1">Popular Videos</h1>
          </div>

          <v-sheet color="" class="mx-auto">
            <v-slide-group class="mb-14 py-10">
              <v-slide-item>
                <v-card flat width="400" outlined class="mx-1 mb-2 pa-2">
                  <lite-youtube v-bind:videoid="`${videoNews[4].content}`"
                    params="controls=0&start=10&end=30&modestbranding=2&rel=0&enablejsapi=1" />
                  <p primary-title>
                    <span>On : {{ videoNews[4].created_at.slice(0, 10) }},</span>
                    <span>at : {{ videoNews[4].created_at.slice(11,-5) }}</span>
                    <br>
                  <div>
                    <h3 class="headline mb-0" v-text="videoNews[4].title"></h3>
                  </div>
                  </p>
                  <a :href="`https://youtu.be/${videoNews[4].content}`">
                    <v-btn color="error"> পুরো দেখুন </v-btn>
                  </a>

                </v-card>




              </v-slide-item>
              <v-slide-item>
                <v-card flat width="400" outlined class="mx-1 mb-2 pa-2">
                  <lite-youtube v-bind:videoid="`${videoNews[2].content}`"
                    params="controls=0&start=10&end=30&modestbranding=2&rel=0&enablejsapi=1" />
                  <p primary-title>
                    <span>On : {{ videoNews[2].created_at.slice(0, 10) }},</span>
                    <span>at : {{ videoNews[2].created_at.slice(11,-5) }}</span><br>
                  <div>
                    <h3 class="headline mb-0" v-text="videoNews[2].title"></h3>
                  </div>
                  </p>
                   <a :href="`https://youtu.be/${videoNews[2].content}`">
                    <v-btn color="error"> পুরো দেখুন </v-btn>
                  </a>
                </v-card>




              </v-slide-item>
              <v-slide-item>
                <v-card flat width="400" outlined class="mx-1 mb-2 pa-2">
                  <lite-youtube v-bind:videoid="`${videoNews[0].content}`"
                    params="controls=0&start=10&end=30&modestbranding=2&rel=0&enablejsapi=1" />
                  <p primary-title>
                    <span>On : {{ videoNews[0].created_at.slice(0, 10) }},</span>
                    <span>at : {{ videoNews[0].created_at.slice(11,-5) }}</span><br>
                  <div>
                    <h3 class="headline mb-0" v-text="videoNews[0].title"></h3>
                  </div>
                  </p>
                  <a :href="`https://youtu.be/${videoNews[0].content}`">
                    <v-btn color="error"> পুরো দেখুন </v-btn>
                  </a>
                </v-card>




              </v-slide-item>
              <v-slide-item>
                <v-card flat width="400" outlined class="mx-1 mb-2 pa-2">
                  <lite-youtube v-bind:videoid="`${videoNews[1].content}`"
                    params="controls=0&start=10&end=30&modestbranding=2&rel=0&enablejsapi=1" />
                  <p primary-title>
                    <span>On : {{ videoNews[1].created_at.slice(0, 10) }},</span>
                    <span>at : {{ videoNews[1].created_at.slice(11,-5) }}</span><br>
                  <div>
                    <h3 class="headline mb-0" v-text="videoNews[1].title"></h3>
                  </div>
                  </p>
                   <a :href="`https://youtu.be/${videoNews[1].content}`">
                    <v-btn color="error"> পুরো দেখুন </v-btn>
                  </a>
                </v-card>

              </v-slide-item>
              <v-slide-item>
                <v-card flat width="400" outlined class="mx-1 mb-2 pa-2">
                  <lite-youtube v-bind:videoid="`${videoNews[0].content}`"
                    params="controls=0&start=10&end=30&modestbranding=2&rel=0&enablejsapi=1" />
                  <p primary-title>
                    <span>On : {{ videoNews[0].created_at.slice(0, 10) }},</span>
                    <span>at : {{ videoNews[0].created_at.slice(11,-5) }}</span><br>
                  <div>
                    <h3 class="headline mb-0" v-text="videoNews[0].title"></h3>
                  </div>
                  </p>
                  <a v-if="videoNews[0].content" :href="`https://youtu.be/${videoNews[0].content}`">
                    <v-btn color="error"> পুরো দেখুন </v-btn>
                  </a>
                </v-card>




              </v-slide-item>
            </v-slide-group>
          </v-sheet>
        </template>
      </div>
    </v-container>

  </div>
</template>
<script>
  export default {
        data() {
      return {
        posts: {},
        videoNews: [],
        latestNews: []
      }
    },
    async fetch() {
      // this.posts = await fetch(`https://jsonplaceholder.typicode.com/posts/${this.$route.name}`)
      const post = await fetch(`https://api5.siliconpin.com/bartas/?lang=bn&_sort=id:DESC&_limit=160`).then((res) => res.json())
      // console.log(post)
    // async asyncData({ $axios, $config }) {
    //   // let worldNews = await $axios.$get(
    //   //   `/bartas/?lang=bn&category=world&_sort=id:DESC&_limit=8`
    //   // );
    //   let barta = await $axios.$get(`/bartas/?lang=bn&_sort=id:DESC&_limit=30`)


      // let nationalNews = await $axios.$get(
      //   `/bartas/?lang=bn&category=national&_sort=id:DESC&_limit=8`
      // );
      // let localNews = await $axios.$get(
      //   `/bartas/?lang=bn&category=local&_sort=id:DESC&_limit=8`

      // let articleNews = await $axios.$get(`/bartas/?category=article&_sort=id:DESC&_limit=4`)
      // let editorialNews = await $axios.$get(`/bartas/?category=editorial&_sort=id:DESC&_limit=4`)
    // let videoNews = await $axios.$get(`/bartas/?lang=bn&category=video&_sort=id:DESC&_limit=5`)


      //_ne:category=video&
      // let latestNews = await $axios.$get(`/bartas/?_sort=id:DESC&_limit=40&category=:video`)

      // need to create the json / var first
      // if(worldNews.length < 1) { worldNews[0].image.url="", worldNews[0].slug="404", worldNews[0].slug="not found";}
      // if(nationalNews.length < 1) { nationalNews[0].image.url="", nationalNews[0].slug="404", nationalNews[0].slug="not found";}
      // if(localNews.length < 1) { localNews[0].image.url="", localNews[0].slug="404", localNews[0].slug="not found";}
      // if(articleNews.length < 1) { articleNews[0].image.url="", articleNews[0].slug="404", articleNews[0].slug="not found";}
      // if(editorialNews.length < 1) { editorialNews[0].image.url="", editorialNews[0].slug="404", editorialNews[0].slug="not found";}
      // if(videoNews.length < 1) { videoNews[0].image.url="", videoNews[0].slug="404", videoNews[0].slug="not found";}

      // worldNews = JSON.parse(
      //   JSON.stringify(worldNews).replace(/\:null/gi, '\:""')
      // );
      // nationalNews = JSON.parse(
      //   JSON.stringify(nationalNews).replace(/\:null/gi, '\:""')
      // );
      // localNews = JSON.parse(
      //   JSON.stringify(localNews).replace(/\:null/gi, '\:""')
      // );
      // articleNews = JSON.parse(JSON.stringify(articleNews).replace(/\:null/gi, "\:\"\""));
      // editorialNews = JSON.parse(JSON.stringify(editorialNews).replace(/\:null/gi, "\:\"\""));

      let video = post.filter(item => { if (item.category == "video") return item }); //console.log(video)
      video = JSON.parse(JSON.stringify(video).replace(/\:null/gi, "\:\"\""));
      this.videoNews = video;
      let latest = post.filter(item => { if (item.category != "video") return item });
      latest = JSON.parse(JSON.stringify(latest).replace(/\:null/gi, "\:\"\""));
      this.latestNews = latest;

      // return { videoNews, latestNews };
    },
    // fetchOnServer: false,



    head() {
      return {
        title: "barta-india.in news with views",
        meta: [
          // hid is used as unique identifier. Do not use `vmid` for it as it will not work
          {
            hid: "description",
            name: "description",
            content:
              "local news, national and international news with our views.",
          },
          {
            hid: "og:description",
            name: "og:description",
            content:
              "local news, national and international news with our views.",
          },
          {
            hid: "og:title",
            name: "og:title",
            content: "barta-india.in news with views",
          },
          {
            hid: "og:url",
            name: "og:url",
            content: "https://barta-india.in/",
          },
          {
            hid: "og:image",
            name: "og:image",
            content: "https://barta-india.in/icon.png",
          },
          {
            hid: "og:image:secure_url",
            name: "og:image:secure_url",
            content: "https://barta-india.in/icon.png",
          },
          {
            hid: "og:type",
            name: "og:type",
            content: "News list",
          },
        ],
      };
    },
  };
</script>
<style scoped>
</style>