Source View more articles and date fix

app/Http/Controllers/API/SourcesAPIController.php

@@ -30,7 +30,7 @@ class SourcesAPIController extends Controller
     {
         return response()->json([
             'source' => new SourceResource($source),
-            'articles' => ArticleResource::collection($source->articles()->latest("published_date")->paginate(8))
+            'articles' =>  $source->articles()->with('source')->latest('published_date')->paginate(8)
         ]);
     }
 }

app/Http/Controllers/SourcesController.php

@@ -16,8 +16,7 @@ class SourcesController extends Controller
     public function show(Source $source)
     {
         return view('sources.show', [
-            'source' => $source,
+            'source' => $source
-            'articles' => $source->articles()->with('source')->latest('published_date')->paginate(20)
         ]);
     }
 }

package-lock.json

@@ -1068,6 +1068,17 @@
                 "purgecss": "^2.3.0"
             }
         },
+        "@lottiefiles/lottie-player": {
+            "version": "0.3.0",
+            "resolved": "https://registry.npmjs.org/@lottiefiles/lottie-player/-/lottie-player-0.3.0.tgz",
+            "integrity": "sha512-XxRTIEiD3LUUOmsymhLmtyMpGpjRMQhuOqjF3K8PDIE0UEi/yWS67N4klx5UccTACc/pI2TSB5oKl31Z9qVSeA==",
+            "requires": {
+                "@types/pako": "^1.0.1",
+                "lit-element": "^2.3.1",
+                "lottie-web": "^5.6.6",
+                "pako": "^1.0.11"
+            }
+        },
         "@mrmlnc/readdir-enhanced": {
             "version": "2.2.1",
             "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -1117,6 +1128,11 @@
             "integrity": "sha512-kVrqXhbclHNHGu9ztnAwSncIgJv/FaxmzXJvGXNdcCpV1b8u1/Mi6z6m0vwy0LzKeXFTPLH0NzwmoJ3fNCIq0g==",
             "dev": true
         },
+        "@types/pako": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@types/pako/-/pako-1.0.1.tgz",
+            "integrity": "sha512-GdZbRSJ3Cv5fiwT6I0SQ3ckeN2PWNqxd26W9Z2fCK1tGrrasGy4puvNFtnddqH9UJFMQYXxEuuB7B8UK+LLwSg=="
+        },
         "@types/q": {
             "version": "1.5.4",
             "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
@@ -5445,6 +5461,19 @@
                 "leven": "^3.1.0"
             }
         },
+        "lit-element": {
+            "version": "2.4.0",
+            "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-2.4.0.tgz",
+            "integrity": "sha512-pBGLglxyhq/Prk2H91nA0KByq/hx/wssJBQFiYqXhGDvEnY31PRGYf1RglVzyLeRysu0IHm2K0P196uLLWmwFg==",
+            "requires": {
+                "lit-html": "^1.1.1"
+            }
+        },
+        "lit-html": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-1.3.0.tgz",
+            "integrity": "sha512-0Q1bwmaFH9O14vycPHw8C/IeHMk/uSDldVLIefu/kfbTBGIc44KGH6A8p1bDfxUfHdc8q6Ct7kQklWoHgr4t1Q=="
+        },
         "loader-runner": {
             "version": "2.4.0",
             "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz",
@@ -5520,6 +5549,19 @@
                 "js-tokens": "^3.0.0 || ^4.0.0"
             }
         },
+        "lottie-player-vue": {
+            "version": "0.0.14",
+            "resolved": "https://registry.npmjs.org/lottie-player-vue/-/lottie-player-vue-0.0.14.tgz",
+            "integrity": "sha512-0Gznqnxdsz+mNGkI9xYuX03E/z3k9oYDClKAMLx/8BVbmKLGRof9LVxhNz+eirT4hqACUnWfsUaaJzfAOrhApA==",
+            "requires": {
+                "@lottiefiles/lottie-player": "^0.3.0-rc2"
+            }
+        },
+        "lottie-web": {
+            "version": "5.7.2",
+            "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.7.2.tgz",
+            "integrity": "sha512-lLQ/r/WlYxXe+J8zki/0blBNtNRJJBKm0AdBcD8KJXxpY4Epf70+9XwBM/Z4OHRP+89V1Tuma1wq5oR+hy08qg=="
+        },
         "lower-case": {
             "version": "1.1.4",
             "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz",
@@ -6346,8 +6388,7 @@
         "pako": {
             "version": "1.0.11",
             "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
-            "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+            "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
-            "dev": true
         },
         "parallel-transform": {
             "version": "1.2.0",
@@ -9411,11 +9452,6 @@
                 "vue-style-loader": "^4.1.0"
             }
         },
-        "vue-localstorage": {
-            "version": "0.6.2",
-            "resolved": "https://registry.npmjs.org/vue-localstorage/-/vue-localstorage-0.6.2.tgz",
-            "integrity": "sha512-29YQVVkIdoS6BZBCJAyu9d0OR0eKSm5gk5OjsLssV1+NM4zJnf9cxhN1AVeXkUHJLqOonECweuaR8PZ2x307dw=="
-        },
         "vue-moment": {
             "version": "4.1.0",
             "resolved": "https://registry.npmjs.org/vue-moment/-/vue-moment-4.1.0.tgz",

package.json

@@ -23,8 +23,8 @@
         "laravel-mix-tailwind": "^0.1.0"
     },
     "dependencies": {
+        "lottie-player-vue": "0.0.14",
         "tailwindcss": "^1.6.2",
-        "vue": "^2.6.11",
+        "vue": "^2.6.11"
-        "vue-moment": "^4.1.0"
     }
 }

public/js/vendor.js.LICENSE.txt

@@ -14,3 +14,7 @@
  */
 
 //! moment.js
+
+//! moment.js language configuration
+
+//! moment.js locale configuration

public/mix-manifest.json

@@ -1,6 +1,6 @@
 {
-    "/js/app.js": "/js/app.js?id=713804f0b0e614772183",
+    "/js/app.js": "/js/app.js?id=e47cdeeda3dbde02b161",
-    "/css/app.css": "/css/app.css?id=5dced5120f246bf09705",
+    "/css/app.css": "/css/app.css?id=1a87fdd2f7566b3e8bee",
     "/js/manifest.js": "/js/manifest.js?id=3c768977c2574a34506e",
-    "/js/vendor.js": "/js/vendor.js?id=596002803ce0d197ef4c"
+    "/js/vendor.js": "/js/vendor.js?id=968f85387c9bab0e92d2"
 }

resources/js/app.js

@@ -6,8 +6,8 @@ import TodaysPick from "./components/TodaysPick";
 import DiscoverTopics from "./components/DiscoverTopics";
 import RecentStories from "./components/RecentStories";
 import AvailableSources from './components/AvailableSources';
+import SourceView from './components/SourceView';
 
-Vue.use(require('vue-moment'));
 
 const app = new Vue({
     el: '#app',
@@ -15,6 +15,7 @@ const app = new Vue({
         TodaysPick,
         DiscoverTopics,
         RecentStories,
-        AvailableSources
+        AvailableSources,
+        SourceView
     }
 });

resources/js/components/RecentStories.vue

@@ -35,7 +35,7 @@
                                 <div class="flex justify-end items-center">
                                     <div>
                                         <p
-                                            class="font-semibold text-gray-700 text-sm capitalize MvTyper"
+                                            class="font-semibold text-gray-600 text-sm capitalize MvTyper"
                                             v-text="story.source.name"
                                         ></p>
                                     </div>
@@ -47,9 +47,12 @@
                                 </div>
                             </a>
                         </div>
-                        <span class="text-gray-600 text-xs ml-1">
+                        <p
-                            {{ story.published_date | moment("calendar") }}
+                            class="ml-1 text-gray-600 text-right MvTyper"
-                        </span>
+                            style="direction:rtl; font-size:13px;"
+                        >
+                            {{ story.published_date | dhivehiDate }}
+                        </p>
                     </div>
                 </div>
             </div>
@@ -58,6 +61,8 @@
 </template>
 
 <script>
+import * as moment from "moment";
+
 export default {
     name: "recent-stories",
 
@@ -67,6 +72,14 @@ export default {
         };
     },
 
+    filters: {
+        dhivehiDate: function(date) {
+            if (!date) return "";
+            moment.locale("dv");
+            return moment(date).format("Do MMMM YYYY  h:mm");
+        }
+    },
+
     mounted() {
         axios
             .get("api/recent")

resources/js/components/SourceView.vue

@@ -0,0 +1,151 @@
+<template>
+    <div>
+        <section class="mx-auto max-w-6xl py-5">
+            <div class="flex flex-col">
+                <div
+                    class="flex flex-col md:flex-row justify-center items-center"
+                >
+                    <div
+                        class="transition-all ease-in-out duration-1000 flex flex-col justify-center"
+                    >
+                        <div slot="middle-right" class="max-w-xs">
+                            <div class="flex flex-col justify-center h-48 p-3">
+                                <div
+                                    class="flex flex-col items-center  shadow hover:shadow-lg rounded-lg p-3"
+                                >
+                                    <img :src="source.logo" class="h-16 w-16" />
+                                    <div
+                                        class="text-3xl font-bold text-gray-800 text-center MvAamu mt-2"
+                                    >
+                                        {{ source.name }}
+                                    </div>
+                                </div>
+
+                                <div
+                                    class="text-sm my-3 MvTyper text-center leading-6"
+                                    style="direction:rtl;"
+                                >
+                                    {{ source.name }} ނޫހުން ޝާޢިޢުކޮއްފައިވާ
+                                    ލިޔުންތަށް
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div
+                    class="grid grid-cols-2 sm:grid-cols-3  md:grid-cols-4 gap-2 mb-10 mt-8"
+                >
+                    <div
+                        v-for="article in articles"
+                        :key="article.id"
+                        class="transition-all ease-in-out duration-1000 flex  flex-col justify-center mr-0 md:mr-2"
+                    >
+                        <div slot="bottom-left" class="max-w-xs">
+                            <div class="p-5 shadow-md m-2 mt-4">
+                                <a href="#">
+                                    <img
+                                        class="object-scale-down h-30"
+                                        :src="article.featured_image"
+                                        :alt="article.meta['title']"
+                                    />
+                                </a>
+
+                                <div
+                                    class="text-xs font-bold uppercase text-gray-500 text-right mt-1 mb-2 MvTyper"
+                                >
+                                    {{ article.source.name }}
+                                </div>
+                                <p
+                                    class="font-semibold text-gray-400 text-xs MvTyper"
+                                    style="direction: rtl;"
+                                >
+                                    {{ article.published_date | dhivehiDate }}
+                                </p>
+
+                                <a href="#">
+                                    <div
+                                        class="text-md font-bold leading-7 mb-2 mt-1 text-gray-800 MvTyper text-right hover:underline"
+                                    >
+                                        {{ article.title }}
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="flex justify-center">
+                <button
+                    :disabled="loading != 0"
+                    v-if="moreArticles"
+                    @click="fetchNewArticles()"
+                    class="ml-4 text-white h-10 flex items-center justify-center px-4 bg-main-link rounded shadow font-medium"
+                >
+                    {{ loading ? "Loading...." : "Show more" }}
+                </button>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script>
+import * as moment from "moment";
+export default {
+    props: {
+        source: Object
+    },
+    name: "source-view",
+
+    data() {
+        return {
+            articles: [],
+            current_page: 0,
+            totalCount: {
+                count: 0
+            },
+            loading: 0
+        };
+    },
+
+    mounted() {
+        axios.get(`/api/source/${this.source.slug}`).then(response => {
+            this.current_page = response.data.articles.current_page;
+            this.totalCount.count = response.data.articles.total;
+            this.articles = response.data.articles.data;
+        });
+    },
+
+    computed: {
+        moreArticles() {
+            //Calculating if there is any more articles
+            return this.articles.length < this.totalCount.count;
+        }
+    },
+
+    filters: {
+        dhivehiDate: function(date) {
+            if (!date) return "";
+            moment.locale("dv");
+            return moment(date).format("Do MMMM YYYY  h:mm");
+        }
+    },
+
+    methods: {
+        fetchNewArticles() {
+            this.loading = true;
+            axios
+                .get(
+                    `/api/source/${this.source.slug}?page=${this.current_page +
+                        1}`
+                )
+                .then(response => {
+                    this.current_page = response.data.articles.current_page;
+                    // spread the array item into individual arguments
+                    this.articles.push(...response.data.articles.data);
+                    this.loading = false;
+                });
+        }
+    }
+};
+</script>

resources/js/components/TodaysPick.vue

@@ -43,14 +43,12 @@
                             <div
                                 class="text-gray-600 text-md mt-1 flex justify-end items-center"
                             >
-                             
-
                                 <p
-                                    class="text-gray-600 text-sm text-right mb-2"
+                                    class="text-gray-600 text-sm text-right mb-2 MvTyper"
+                                    style="direction:rtl;"
                                 >
                                     {{
-                                        subarticle.published_date
+                                        subarticle.published_date | dhivehiDate
-                                            | moment("calendar")
                                     }}
                                 </p>
                             </div>
@@ -74,18 +72,14 @@
                 class="mb-4 lg:mb-0 p-4 lg:p-0 w-full md:w-4/7 relative rounded block"
                 v-if="article"
             >
-                <a
+                <a :href="'/article/' + article.id">
-                    :href="'/article/' + article.id"
-                >
                     <img
                         :src="article.featured_image"
                         class="rounded-md object-cover w-full h-3/4"
                     />
                 </a>
 
-                <a
+                <a :href="'/article/' + article.id">
-                    :href="'/article/' + article.id"
-                >
                     <h1
                         class="text-gray-800 text-xl xl:text-md lg:text-md font-bold mt-2 mb-2 leading-9 hover:underline text-right MvTyper"
                         style="direction:rtl;"
@@ -110,8 +104,11 @@
                 <div
                     class="text-gray-600 text-md mt-4 flex justify-end items-center mb-3"
                 >
-                    <p class="ml-1 text-gray-600 text-right">
+                    <p
-                        {{ article.published_date | moment("calendar") }}
+                        class="ml-1 text-gray-600 text-right MvTyper"
+                        style="direction:rtl;"
+                    >
+                        {{ article.published_date | dhivehiDate }}
                     </p>
                 </div>
             </div>
@@ -121,6 +118,8 @@
 </template>
 
 <script>
+import * as moment from "moment";
+
 export default {
     name: "todays-pick",
     data() {
@@ -130,6 +129,14 @@ export default {
         };
     },
 
+    filters: {
+        dhivehiDate: function(date) {
+            if (!date) return "";
+            moment.locale("dv");
+            return moment(date).format("Do MMMM YYYY  h:mm");
+        }
+    },
+
     mounted() {
         axios
             .get("api/today")

resources/views/sources/show.blade.php

@@ -1,61 +1,5 @@
 @extends('layouts.app')
 
 @section('content')
-<div>
+<source-view :source="{{$source}}" ></source-view>
-    <section class="mx-auto max-w-6xl py-5">
-        <div class="flex flex-col">
-            <div class="flex flex-col md:flex-row justify-center items-center">
-                <div class="transition-all ease-in-out duration-1000 flex flex-col justify-center">
-                    <div slot="middle-right" class="max-w-xs">
-                        <div class="flex flex-col justify-center h-48 p-3">
-                                <div class="flex flex-col items-center  shadow hover:shadow-lg rounded-lg p-3"> 
-                                    <img src="{{$source->logo}}" class="h-16 w-16">
-                                    <div class="text-3xl font-bold text-gray-800 text-center MvAamu mt-2">{{$source->name}}</div>
-                                
-                                </div>
-                               
-
-                            <div class="text-sm my-3 MvTyper text-center leading-6" style="direction:rtl;">
-                                {{$source->name}} ނޫހުން ޝާޢިޢުކޮއްފައިވާ ލިޔުންތަށް</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2 mb-10 mt-8">
-
-                @foreach ($articles as $article)
-                <div class="transition-all ease-in-out duration-1000 flex flex-col justify-center mr-0 md:mr-2">
-
-
-                    <div slot="bottom-left" class="max-w-xs">
-                        <div class="p-5 shadow-md m-2 mt-4">
-
-                            <a href="{{route('articles.show', $article->id)}}">
-                                <img class="object-scale-down h-30" src="{{$article->featured_image}}"
-                                    alt="{{$article->meta['title']}}">
-                            </a>
-
-                            <div class="text-xs font-bold uppercase text-gray-500 text-right mt-1 mb-2 MvTyper">
-                                {{$article->source->name}}</div>
-                            <p class="font-semibold text-gray-400 text-xs MvTyper" style="direction: rtl;">{{$article->published_date->locale('dv')->isoFormat('Do MMMM YYYY  h:mm')}}</p>    
-
-                            <a href="{{route('articles.show', $article->id)}}">
-                                <div class="text-md font-bold leading-7 mb-2 mt-1 text-gray-800 MvTyper text-right hover:underline">
-                                    {{$article->title}}</div>
-                            </a>
-
-                        </div>
-                    </div>
-
-
-                </div>
-
-                @endforeach
-
-
-
-            </div>
-        </div>
-    </section>
-</div>
 @endsection

storage/debugbar/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore