144 lines
3.7 KiB
Vue
144 lines
3.7 KiB
Vue
<template>
|
|
<SMMastHead title="Blog" />
|
|
<SMContainer>
|
|
<SMInput type="text" label="Search articles" v-model="searchInput">
|
|
<template #append
|
|
><SMButton
|
|
type="primary"
|
|
label="Search"
|
|
@click="handleClickSearch"
|
|
/></template>
|
|
</SMInput>
|
|
<SMPagination
|
|
v-model="postsPage"
|
|
:total="postsTotal"
|
|
:per-page="postsPerPage" />
|
|
<div class="posts">
|
|
<article
|
|
class="article-card"
|
|
v-for="(post, idx) in posts"
|
|
:key="idx">
|
|
<div
|
|
class="thumbnail"
|
|
:style="{
|
|
backgroundImage: `url(${mediaGetVariantUrl(
|
|
post.hero,
|
|
'medium'
|
|
)})`,
|
|
}"></div>
|
|
<div class="content">
|
|
{{ post.content }}
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</SMContainer>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Ref, ref, watch } from "vue";
|
|
import SMMessage from "../components/SMMessage.vue";
|
|
import SMPagination from "../components/SMPagination.vue";
|
|
import SMPanel from "../components/SMPanel.vue";
|
|
import SMPanelList from "../components/SMPanelList.vue";
|
|
import { api } from "../helpers/api";
|
|
import { Post, PostCollection } from "../helpers/api.types";
|
|
import { SMDate } from "../helpers/datetime";
|
|
import { mediaGetVariantUrl } from "../helpers/media";
|
|
import SMMastHead from "../components/SMMastHead.vue";
|
|
import SMInput from "../components/SMInput.vue";
|
|
import SMForm from "../components/SMForm.vue";
|
|
import SMButton from "../components/SMButton.vue";
|
|
|
|
const message = ref("");
|
|
const pageLoading = ref(true);
|
|
const posts: Ref<Post[]> = ref([]);
|
|
|
|
const postsPerPage = 24;
|
|
let postsPage = ref(1);
|
|
let postsTotal = ref(0);
|
|
|
|
let searchInput = ref("");
|
|
|
|
const handleClickSearch = () => {
|
|
alert(searchInput.value);
|
|
};
|
|
|
|
/**
|
|
* Load the page data.
|
|
*/
|
|
const handleLoad = () => {
|
|
message.value = "";
|
|
pageLoading.value = true;
|
|
|
|
api.get({
|
|
url: "/posts",
|
|
params: {
|
|
limit: postsPerPage,
|
|
page: postsPage.value,
|
|
},
|
|
})
|
|
.then((result) => {
|
|
const data = result.data as PostCollection;
|
|
|
|
posts.value = data.posts;
|
|
postsTotal.value = data.total;
|
|
posts.value.forEach((post) => {
|
|
post.publish_at = new SMDate(post.publish_at, {
|
|
format: "ymd",
|
|
utc: true,
|
|
}).format("yyyy/MM/dd HH:mm:ss");
|
|
});
|
|
})
|
|
.catch((error) => {
|
|
if (error.status != 404) {
|
|
message.value =
|
|
error.data?.message ||
|
|
"The server is currently not available";
|
|
}
|
|
})
|
|
.finally(() => {
|
|
pageLoading.value = false;
|
|
});
|
|
};
|
|
|
|
watch(
|
|
() => postsPage.value,
|
|
() => {
|
|
handleLoad();
|
|
}
|
|
);
|
|
|
|
handleLoad();
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.posts {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 30px;
|
|
|
|
.article-card {
|
|
.thumbnail {
|
|
aspect-ratio: 16 / 9;
|
|
border-radius: 7px;
|
|
background-position: center;
|
|
background-size: cover;
|
|
background-color: var(--card-background-color);
|
|
box-shadow: 0 5px 10px -3px #00000078;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.posts {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.posts {
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
}
|
|
}
|
|
</style>
|