記事一覧に表示するカードのUIを更新

タグの表示位置を最下部へ

今まで記事一覧に表示するタグは、特に配置を設定していませんでした。

記事一覧の見た目に統一感を出すためタグを記事カードの最下部に表示するよう更新しました。

<div class="tag-container">
	{#each post.tags as tag}
		<p class="tags">{tag}</p>
	{/each}
</div>

<style>
/* postクラスは親DOM */
	.post {
		border-radius: 10px;
		box-shadow: 2px 2px 4px gray;
		padding: 10px;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.tag-container {
		display: flex;
		margin-top: auto;
	}

	.tags {
		padding: 4px;
		margin: 4px;
		border-radius: 4px;
		background-color: #c3c4c0;
	}
</style>

これだけでも、少し見やすくなりました。

記事カードに最新加筆日のみ表示

今までは、公開日と更新日をどちらも表示していました。

しかし、これはどちらも表示するメリットあるのかなぁと感じていました。
色々試した結果、「最終加筆日を表示する」という仕様にしました。
まずは公開日を最終加筆日として表示し、記事の更新を行った場合、更新日を最終加筆日として表示します。更新日を表示する場合、編集したことが分かりやすいように鉛筆マークを付けました。

<div class="date-container">
	{#if post.updatedAt}
		<p class="update-date">{formatDate(post.updatedAt)}
			<span class="material-symbols-outlined">
				edit
			</span>
		</p>
	{:else}
		<p class="create-date">{formatDate(post.createdAt)}</p>
	{/if}
</div>

我ながら良いアイディアだと思いました。

Svelteの each も使い慣れてきました。