55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
import { defineComponent } from "vue";
|
|
import useAsyncState from "@/useAsyncState.ts";
|
|
import getDjAPI from "@/api.ts";
|
|
import { RouterLink } from "vue-router";
|
|
import { addCSS, css } from "@/util.ts";
|
|
|
|
const style = css`
|
|
.dj-blog-main {
|
|
.entry {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 4px;
|
|
}
|
|
|
|
em {
|
|
color: gray;
|
|
}
|
|
|
|
|
|
h2 {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
`;
|
|
|
|
export default defineComponent({
|
|
name: "DjBlogMain",
|
|
async setup() {
|
|
addCSS('DjBlogMain', style);
|
|
|
|
const blogEntries = useAsyncState('blog-entries-meta', ({ hostUrl }) => getDjAPI(hostUrl, "/blog-entries"));
|
|
|
|
await blogEntries.done;
|
|
|
|
return () => <>
|
|
<main class="dj-blog-main">
|
|
<h2>Entries</h2>
|
|
<ul>
|
|
{blogEntries.result.value?.map(_ => (
|
|
<li key={_.slug}>
|
|
<div class="entry">
|
|
<RouterLink to={{ name: 'DjBlogEntry', params: { slug: _.slug }}}>{ _.title }</RouterLink>
|
|
</div>
|
|
<div>
|
|
<em>first published <time datetime={ _.createdAt }>{ new Date(_.createdAt).toLocaleDateString() }</time></em>
|
|
</div>
|
|
</li>
|
|
)) ?? <li>Blog posts loading...</li>}
|
|
</ul>
|
|
</main>
|
|
</>;
|
|
},
|
|
});
|
|
|