add draft notice to post list and fix draft-hiding logic
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Example after post
|
||||
date: 2026-02-28
|
||||
draft: true
|
||||
---
|
||||
|
||||
## After
|
||||
|
||||
@@ -4,8 +4,8 @@ import '@styles/prose.css';
|
||||
import { getCollection, render } from 'astro:content';
|
||||
import BaseLayout from '@layouts/BaseLayout.astro';
|
||||
|
||||
// return all posts
|
||||
let entries = await getCollection('posts', ({ data }) => !data.draft || import.meta.env.PROD );
|
||||
// return all posts in dev, only non-draft in prod
|
||||
let entries = await getCollection('posts', ({ data }) => !data.draft || import.meta.env.DEV );
|
||||
entries.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
|
||||
const posts = await Promise.all(entries.map(async entry => {
|
||||
const { remarkPluginFrontmatter } = await render(entry);
|
||||
@@ -24,6 +24,7 @@ const posts = await Promise.all(entries.map(async entry => {
|
||||
<a href={`/${p.id}`} data-astro-prefetch>
|
||||
{p.data.title}
|
||||
</a>
|
||||
{p.data.draft && <span class="draft-notice">Draft</span>}
|
||||
</h2>
|
||||
<p>
|
||||
{p.remarkPluginFrontmatter.description}
|
||||
@@ -55,6 +56,20 @@ const posts = await Promise.all(entries.map(async entry => {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
display: flex;
|
||||
gap: 01rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.draft-notice {
|
||||
font-size: 0.5em;
|
||||
font-family: 'Figtree Variable', sans-serif;
|
||||
background-color: var(--accent-color);
|
||||
padding: 0.05em 0.5em;
|
||||
border-radius: 20% / 50%;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
height: 1px;
|
||||
|
||||
Reference in New Issue
Block a user