daniel/Personal_Website
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Dynamic-ish popular blog articles

Browse Source
This commit is contained in:
Daniel_I_Am 2021-09-01 22:16:39 +02:00
parent 6759c892ec
commit 378e35a925
2 changed files with 48 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
resources/js/components/BlogPopular.vue
View File

@ -2,9 +2,9 @@
<section class="blog-popular"> <section class="blog-popular">
<h3>Popular content</h3> <h3>Popular content</h3>
<ul class="popular-items"> <ul class="popular-items">
<li> <li v-for="article of articles" :key="article.id">
<span class="arrow" <span class="arrow">
><svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="20" width="20"
height="20" height="20"
@ -16,90 +16,39 @@
stroke-linejoin="round" stroke-linejoin="round"
> >
<line x1="5" y1="12" x2="19" y2="12"></line> <line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline></svg <polyline points="12 5 19 12 12 19"></polyline>
></span> </svg>
<a class="link" href="#" </span>
>Lorem ipsum dolor sit, amet consectetur adipisicing.</a <a class="link" href="#">
> {{ article.title }}
</li> </a>
<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
>
</li> </li>
</ul> </ul>
</section> </section>
</template> </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>

13
routes/api.php
View File

@ -1,6 +1,7 @@
<?php <?php
use Illuminate\Http\Request; use Illuminate\Http\Request;
use Illuminate\Support\Carbon;
use Illuminate\Support\Facades\Route; 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')], ['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],
];
});