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

Dynamic-ish recent blog articles

Browse Source
This commit is contained in:
Daniel_I_Am 2021-09-01 22:16:34 +02:00
parent 9182794b66
commit 6759c892ec
2 changed files with 47 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
resources/js/components/BlogRecent.vue
View File

@ -8,7 +8,7 @@
</div> </div>
<div class="list"> <div class="list">
<ul class="blog-items"> <ul class="blog-items">
<li class="blog-item"> <li class="blog-item" v-for="article of articles" :key="article.id">
<img <img
class="article-image" class="article-image"
src="//via.placeholder.com/128" src="//via.placeholder.com/128"
@ -16,129 +16,46 @@
/> />
<div class="article-text"> <div class="article-text">
<h4 class="article-title"> <h4 class="article-title">
Lorem ipsum dolor sit amet, consectetur adipisicing. {{ article.title }}
</h4> </h4>
<span class="article-date">March 8, 2021</span> <span class="article-date" :title="absDate(article.date)">{{ relDate(article.date) }}</span>
</div>
</li>
<li class="blog-item">
<img
class="article-image"
src="//via.placeholder.com/128"
alt="Article Topic"
/>
<div class="article-text">
<h4 class="article-title">
Lorem ipsum dolor sit amet, consectetur adipisicing.
</h4>
<span class="article-date">March 8, 2021</span>
</div>
</li>
<li class="blog-item">
<img
class="article-image"
src="//via.placeholder.com/128"
alt="Article Topic"
/>
<div class="article-text">
<h4 class="article-title">
Lorem ipsum dolor sit amet, consectetur adipisicing.
</h4>
<span class="article-date">March 8, 2021</span>
</div>
</li>
<li class="blog-item">
<img
class="article-image"
src="//via.placeholder.com/128"
alt="Article Topic"
/>
<div class="article-text">
<h4 class="article-title">
Lorem ipsum dolor sit amet, consectetur adipisicing.
</h4>
<span class="article-date">March 8, 2021</span>
</div>
</li>
<li class="blog-item">
<img
class="article-image"
src="//via.placeholder.com/128"
alt="Article Topic"
/>
<div class="article-text">
<h4 class="article-title">
Lorem ipsum dolor sit amet, consectetur adipisicing.
</h4>
<span class="article-date">March 8, 2021</span>
</div>
</li>
<li class="blog-item">
<img
class="article-image"
src="//via.placeholder.com/128"
alt="Article Topic"
/>
<div class="article-text">
<h4 class="article-title">
Lorem ipsum dolor sit amet, consectetur adipisicing.
</h4>
<span class="article-date">March 8, 2021</span>
</div>
</li>
<li class="blog-item">
<img
class="article-image"
src="//via.placeholder.com/128"
alt="Article Topic"
/>
<div class="article-text">
<h4 class="article-title">
Lorem ipsum dolor sit amet, consectetur adipisicing.
</h4>
<span class="article-date">March 8, 2021</span>
</div>
</li>
<li class="blog-item">
<img
class="article-image"
src="//via.placeholder.com/128"
alt="Article Topic"
/>
<div class="article-text">
<h4 class="article-title">
Lorem ipsum dolor sit amet, consectetur adipisicing.
</h4>
<span class="article-date">March 8, 2021</span>
</div>
</li>
<li class="blog-item">
<img
class="article-image"
src="//via.placeholder.com/128"
alt="Article Topic"
/>
<div class="article-text">
<h4 class="article-title">
Lorem ipsum dolor sit amet, consectetur adipisicing.
</h4>
<span class="article-date">March 8, 2021</span>
</div>
</li>
<li class="blog-item">
<img
class="article-image"
src="//via.placeholder.com/128"
alt="Article Topic"
/>
<div class="article-text">
<h4 class="article-title">
Lorem ipsum dolor sit amet, consectetur adipisicing.
</h4>
<span class="article-date">March 8, 2021</span>
</div> </div>
</li> </li>
</ul> </ul>
</div> </div>
</section> </section>
</template> </template>
<script>
export default {
data() {
return {
loading: false,
articles: [],
error: null,
};
},
mounted() {
axios.get("/api/blog/recent").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;
});
},
methods: {
relDate(date) {
return moment(date).fromNow();
},
absDate(date) {
return moment(date).format('MMMM Do YYYY, hh:mm:ss');
},
},
}
</script>

10
routes/api.php
View File

@ -17,3 +17,13 @@ use Illuminate\Support\Facades\Route;
Route::middleware('auth:sanctum')->get('/user', function (Request $request) { Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
return $request->user(); return $request->user();
}); });
Route::get('/blog/recent', function() {
return [
['title' => 'asdf', 'id' => 1, 'summary' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo consequatur et, velit earum magni necessitatibus?', 'date' => Carbon::now()->sub('13s')],
['title' => 'asdf', 'id' => 2, 'summary' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo consequatur et, velit earum magni necessitatibus?', 'date' => Carbon::now()->sub('10m')],
['title' => 'asdf', 'id' => 3, 'summary' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo consequatur et, velit earum magni necessitatibus?', 'date' => Carbon::now()->sub('15h')],
['title' => 'asdf', 'id' => 4, 'summary' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo consequatur et, velit earum magni necessitatibus?', 'date' => Carbon::now()->sub('5d')],
['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')],
];
});