From 378e35a925d15e6b289f4ea397d8fd782cd8fad4 Mon Sep 17 00:00:00 2001
From: Daniel-I-Am <djdecloet@gmail.com>
Date: Wed, 1 Sep 2021 22:16:39 +0200
Subject: [PATCH] Dynamic-ish popular blog articles

---
 resources/js/components/BlogPopular.vue | 121 +++++++-----------------
 routes/api.php                          |  13 +++
 2 files changed, 48 insertions(+), 86 deletions(-)

diff --git a/resources/js/components/BlogPopular.vue b/resources/js/components/BlogPopular.vue
index e1dedd6..c8ad892 100644
--- a/resources/js/components/BlogPopular.vue
+++ b/resources/js/components/BlogPopular.vue
@@ -2,9 +2,9 @@
     <section class="blog-popular">
         <h3>Popular content</h3>
         <ul class="popular-items">
-            <li>
-                <span class="arrow"
-                    ><svg
+            <li v-for="article of articles" :key="article.id">
+                <span class="arrow">
+                    <svg
                         xmlns="http://www.w3.org/2000/svg"
                         width="20"
                         height="20"
@@ -16,90 +16,39 @@
                         stroke-linejoin="round"
                     >
                         <line x1="5" y1="12" x2="19" y2="12"></line>
-                        <polyline points="12 5 19 12 12 19"></polyline></svg
-                ></span>
-                <a class="link" href="#"
-                    >Lorem ipsum dolor sit, amet consectetur adipisicing.</a
-                >
-            </li>
-            <li>
-                <span class="arrow"
-                    ><svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="20"
-                        height="20"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                    >
-                        <line x1="5" y1="12" x2="19" y2="12"></line>
-                        <polyline points="12 5 19 12 12 19"></polyline></svg
-                ></span>
-                <a class="link" href="#">Lorem ipsum dolor sit.</a>
-            </li>
-            <li>
-                <span class="arrow"
-                    ><svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="20"
-                        height="20"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                    >
-                        <line x1="5" y1="12" x2="19" y2="12"></line>
-                        <polyline points="12 5 19 12 12 19"></polyline></svg
-                ></span>
-                <a class="link" href="#"
-                    >Lorem ipsum dolor sit, amet consectetur adipisicing.</a
-                >
-            </li>
-            <li>
-                <span class="arrow"
-                    ><svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="20"
-                        height="20"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                    >
-                        <line x1="5" y1="12" x2="19" y2="12"></line>
-                        <polyline points="12 5 19 12 12 19"></polyline></svg
-                ></span>
-                <a class="link" href="#"
-                    >Lorem ipsum dolor sit, amet consectetur adipisicing.</a
-                >
-            </li>
-            <li>
-                <span class="arrow"
-                    ><svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="20"
-                        height="20"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                    >
-                        <line x1="5" y1="12" x2="19" y2="12"></line>
-                        <polyline points="12 5 19 12 12 19"></polyline></svg
-                ></span>
-                <a class="link" href="#"
-                    >Lorem ipsum dolor sit, amet consectetur adipisicing.</a
-                >
+                        <polyline points="12 5 19 12 12 19"></polyline>
+                    </svg>
+                </span>
+                <a class="link" href="#">
+                    {{ article.title }}
+                </a>
             </li>
         </ul>
     </section>
 </template>
+
+<script>
+export default {
+    data() {
+        return {
+            loading: true,
+            articles: [],
+            error: null,
+        };
+    },
+    mounted() {
+        axios.get("/api/blog/popular").then((res) => {
+            if (res.status > 399) {
+                this.error = res.statusText;
+            } else {
+                this.articles = res.data;
+            }
+
+            this.loading = false;
+        }).catch(ex => {
+            this.loading = false;
+            this.error = ex.message;
+        });
+    },
+};
+</script>
diff --git a/routes/api.php b/routes/api.php
index 08e912b..3737860 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -1,6 +1,7 @@
 <?php
 
 use Illuminate\Http\Request;
+use Illuminate\Support\Carbon;
 use Illuminate\Support\Facades\Route;
 
 /*
@@ -27,3 +28,15 @@ Route::get('/blog/recent', function() {
         ['title' => 'asdf', 'id' => 5, 'summary' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo consequatur et, velit earum magni necessitatibus?', 'date' => Carbon::now()->sub('52d')],
     ];
 });
+
+Route::get('/blog/popular', function() {
+    return [
+        ['title' => 'Lorem, ipsum dolor sit amet consectetur adipisicing.', 'id' => 1],
+        ['title' => 'Lorem, ipsum dolor sit amet consectetur adipisicing.', 'id' => 2],
+        ['title' => 'Lorem, ipsum dolor sit amet consectetur adipisicing.', 'id' => 3],
+        ['title' => 'Lorem, ipsum dolor sit.', 'id' => 4],
+        ['title' => 'Lorem, ipsum dolor sit amet consectetur adipisicing.', 'id' => 5],
+        ['title' => 'Lorem, ipsum dolor sit amet consectetur adipisicing.', 'id' => 6],
+        ['title' => 'Lorem, ipsum dolor sit amet consectetur adipisicing.', 'id' => 7],
+    ];
+});