AstroとNewtを使ってブログサイトを作る②

---
import type {Article} from '../../lib/newt';
import Date from "@components/utilities/Date";

const article: Article = Astro.props.article
---

<div class="cover-box">
	<a class="slug-link" href={`/articles/${article.slug}`}>
		<h2>
			{article.title}
			<p class="date" style="font-size: 50%;"><Date date={article.first_date}/></p>
			<img src={article.coverImage["src"]} />
		</h2>
		<div class="dark-cover"></div>
	</a>
</div>

<style>
	h2 {
		background-color: hsl(188 8% 95%);
		width: auto;
		padding: 5%;
	}

	.slug-link {
		color: hsl(188 5% 27%);
		text-decoration: none;
	}

	.cover-box {
		position: relative;
	}

	img {
		margin-top: 3%;
		width: 100%;
		height: 300px;
		object-fit: cover;
	}

	.dark-cover {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		opacity: .1;
	}

	.dark-cover:hover {
		background-color: black;
	}
</style>

import { createClient } from "newt-client-js"

export interface Article{
    title: string
    slug: string
    body: string
    coverImage: object
    tags: []
}

export const newtClient = createClient({
    spaceUid: import.meta.env.NEWT_SPACE_UID,
    token: import.meta.env.NEWT_CDN_API_TOKEN,
    apiType: 'cdn',
})

---
import Blog from "@layouts/blog";
import Date from "@components/utilities/Date";

import {newtClient} from '../../lib/newt'
import type {Article} from '../../lib/newt'

export async function getStaticPaths({ rss }) {
    const {items: articles} = await newtClient.getContents<Article>({
        appUid: 'blog2',
        modelUid: 'article',
        query: {
            select: ['title', 'meta', 'slug', 'body', 'coverImage', 'tags', 'first_date', 'update_date'],
        },
    })
    return articles.map((article)=>({
        params: {slug: article.slug},
        props: {article},
    }))
}

// Destructure to get both `Astro.props.post` and `Astro.props.post.Content`
const { article } = Astro.props;
---

<Blog title={article.meta.title} description={article.meta.description}>
	<div class="post-header container">
		<h1 class="post-title">{article.title}</h1>
		<div class="post-date">
			<p>公開日：<Date date={article.first_date}/></p>
			{
				article.update_date === "" ? (
					<p></p>
				) : (
					<p>更新日：<Date date={article.update_date}/></p>
				)
			}
		</div>
		<img src={article.coverImage["src"]} />
	</div>
	<div class="content container">
        <!-- set:htmlはXSS攻撃の危険がある。今回はNewtで作成された記事以外を受け付けないので、安全としている -->
        <article set:html={article.body} />
	</div>
</Blog>


<style>
	.post-header {
		margin-top: 60px;
		margin-bottom: 40px;
	}
	.post-date {
		font-size: 0.75rem;
	}

	.content {
		margin-bottom: 40px;
	}
</style>

---
import Blog from "@layouts/blog";
import Preview from "@components/blog/preview";

import {newtClient} from '../lib/newt'
import type {Article} from '../lib/newt'

const {items: articles} = await newtClient.getContents<Article>({
	// https://app.newt.so/romy-will-become-dragon/apps/blog2/settings/general に書いてあるやつ
	appUid: 'blog2',
	modelUid: 'article',
	query: {
		select: ['title', 'slug', 'body', 'coverImage', 'tags', 'first_date']
	},
})
---

<Blog title="ろみぃちゃんはドラゴンになりたい" description="ろみぃちゃんが雑多に書くブログ">
	<div class="content container">
		{articles.map((a) => <Preview article={a} />)}
	</div>
</Blog>