fix: spoiler display when used as a block

src/components/shortcodes/Spoiler.astro

@@ -1,9 +1,17 @@
 ---
 const { tip = '' } = Astro.props
+let divNeeded = false
+const content = await Astro.slots.render('default')
+if (content.includes('<p>')) {
+    divNeeded = true
+}
+
 ---
-<span class="spoiler" title={tip}>
-    <slot/>
-</span>
+{divNeeded ?
+    <div class="spoiler" title={tip} set:html={content}></div>
+        :
+    <span class="spoiler" title={tip} set:html={content}></span>
+}
 <style>
     :global(.spoiler p) {
         background-color: #252525;

src/content/posts/_schemas.ts

@@ -4,6 +4,7 @@ import { z, reference } from 'astro:content';
 export const posts = ({ image }) => z.object({
   title: z.string(),
   description: z.string().optional(),
+  draft: z.boolean().optional().default(false),
   summary: z.string().optional(),
   date: z.coerce.date(),
   categories: z.union([z.array(z.string()), z.string()]).transform(val => Array.isArray(val) ? val : [val]).default(['uncategorized']),

src/pages/blog.astro

@@ -9,7 +9,9 @@ import { getLangFromUrl, useTranslations, useTranslatedPath } from '../i18n/util
 const lang = getLangFromUrl(Astro.url);
 const t = useTranslations(lang);
 const translatePath = useTranslatedPath(lang);
-const posts = await getCollection('posts');
+const posts = await getCollection('posts', ({ data }) => {
+    return import.meta.env.PROD ? data.draft !== true : true;
+});
 posts.sort((a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime());
 ---
 

src/pages/blog/[...slug].astro

@@ -17,7 +17,9 @@ const t = useTranslations(lang);
 const translatePath = useTranslatedPath(lang);
 
 export async function getStaticPaths() {
-  const blogEntries = await getCollection('posts');
+  const blogEntries = await getCollection('posts', ({ data }) => {
+    return import.meta.env.PROD ? data.draft !== true : true;
+});
   return blogEntries.map(entry => ({
     params: { slug: entry.slug }, props: { entry },
   }));

src/pages/blog/[...slug].txt.js

@@ -2,7 +2,9 @@ import { getCollection } from 'astro:content';
 
 export const prerender = true;
 export async function getStaticPaths() {
-    const blogEntries = await getCollection('posts');
+    const blogEntries = await getCollection('posts', ({ data }) => {
+    return import.meta.env.PROD ? data.draft !== true : true;
+});
     return blogEntries.map(entry => ({
         params: { slug: entry.slug }, props: { entry },
     }));

src/pages/blog/[slug]/featured.png.js

@@ -62,7 +62,9 @@ const fileCache = {
 };
 
 export async function getStaticPaths() {
-  const blogEntries = await getCollection('posts');
+  const blogEntries = await getCollection('posts', ({ data }) => {
+    return import.meta.env.PROD ? data.draft !== true : true;
+});
   return blogEntries.map(post => ({
     params: { slug: post.slug }, props: { post },
   }));

src/pages/categories.astro

@@ -1,17 +1,26 @@
 ---
 import {getCollection} from "astro:content";
 import Layout from "../layouts/Layout.astro";
-const allPosts = await getCollection('posts');
+const allPosts = await getCollection('posts', ({ data }) => {
+    return import.meta.env.PROD ? data.draft !== true : true;
+});
 const uniqueCategories = [...new Set(allPosts.map((post: any) => post.data.categories ? post.data.categories : []).flat())];
 ---
 <Layout title="Categoies" description="List all categories used in the blog posts.">
     <h1 class="title">~/blog/categories</h1>
     <div style="margin-top: 2rem;">
-        <span class="command">ls -l categories/</span>
-        <div style="margin-top: 1rem; margin-left: 1rem;">
-            {uniqueCategories.map((tag) => (
-                    <p><a href={`/categories/${tag}`}>{tag}</a></p>
+        <span class="command">ls categories/</span>
+        <div style="margin-top: 1rem; margin-left: 1rem;" class="category-list">
+            {uniqueCategories.map((category) => (
+                    <p><a href={`/categories/${category}`}>{category}</a></p>
             ))}
         </div>
     </div>
 </Layout>
+<style>
+    div.category-list {
+        display: flex;
+        gap: 1rem;
+        flex-wrap: wrap;
+    }
+</style>

src/pages/categories/[...category].astro

@@ -4,7 +4,9 @@ import {getCollection} from "astro:content";
 import ArticleList from "../../components/ArticleList.astro";
 
 export async function getStaticPaths() {
-    const allPosts = await getCollection('posts');
+    const allPosts = await getCollection('posts', ({ data }) => {
+    return import.meta.env.PROD ? data.draft !== true : true;
+});
     // Get all categories, ensuring the default 'uncategorized' is used when categories is undefined
     const uniqueCategories = [...new Set(allPosts.map((post: any) =>
         post.data.categories || ['uncategorized']).flat())];

src/pages/index.astro

@@ -12,7 +12,7 @@ try {
 }
 ---
 
-<Layout>
+<Layout ogImage={siteConfig.homepageOgImage || ""}>
   <h1 class="title">~/</h1>
   <div class="content">
     {HomePageContent ? <HomePageContent/> :

src/pages/search-index.json.js

@@ -1,7 +1,9 @@
 import { getCollection } from 'astro:content';
 
 export async function GET() {
-  const posts = await getCollection('posts');
+  const posts = await getCollection('posts', ({ data }) => {
+    return import.meta.env.PROD ? data.draft !== true : true;
+});
   const searchIndex = posts.map(post => ({
     title: post.data.title,
     description: post.data.description || '',

src/pages/tags.astro

@@ -1,17 +1,26 @@
 ---
 import {getCollection} from "astro:content";
 import Layout from "../layouts/Layout.astro";
-const allPosts = await getCollection('posts');
+const allPosts = await getCollection('posts', ({ data }) => {
+    return import.meta.env.PROD ? data.draft !== true : true;
+});
 const uniqueTags = [...new Set(allPosts.map((post: any) => post.data.tags ? post.data.tags : []).flat())];
 ---
 <Layout title="Tags" description="List all tags used in the blog posts.">
     <h1 class="title">~/blog/tags</h1>
     <div style="margin-top: 2rem;">
-        <span class="command">ls -l tags/</span>
-        <div style="margin-top: 1rem; margin-left: 1rem;">
+        <span class="command">ls tags/</span>
+        <div style="margin-top: 1rem; margin-left: 1rem;" class="tags-list">
             {uniqueTags.map((tag) => (
                     <p><a href={`/tags/${tag}`}>{tag}</a></p>
             ))}
         </div>
     </div>
 </Layout>
+<style>
+    div.tags-list {
+        display: flex;
+        gap: 1rem;
+        flex-wrap: wrap;
+    }
+</style>

src/pages/tags/[...tag].astro

@@ -4,7 +4,9 @@ import {getCollection} from "astro:content";
 import ArticleList from "../../components/ArticleList.astro";
 
 export async function getStaticPaths() {
-    const allPosts = await getCollection('posts');
+    const allPosts = await getCollection('posts', ({ data }) => {
+    return import.meta.env.PROD ? data.draft !== true : true;
+});
     const uniqueTags = [...new Set(allPosts.map((post: any) => post.data.tags ? post.data.tags : []).flat())];
     return uniqueTags.map((tag) => {
         const filteredPosts = allPosts.filter((post: any) => post.data.tags?.includes(tag));

src/pages/twtxt.txt.js

@@ -1,7 +1,9 @@
 import { getCollection } from 'astro:content';
 
 export async function GET(context) {
-    const posts = await getCollection('posts');
+    const posts = await getCollection('posts', ({ data }) => {
+    return import.meta.env.PROD ? data.draft !== true : true;
+});
     // Sort posts by date (newest first)
     posts.sort((a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime());
 

src/plugins/heatmapdata/local.js

@@ -1,7 +1,9 @@
 import { getCollection, render } from 'astro:content';
 
 async function fetchPostsData() {
-    const posts = await getCollection('posts');
+    const posts = await getCollection('posts', ({ data }) => {
+    return import.meta.env.PROD ? data.draft !== true : true;
+});
     const entriesData = {};
 
     for (const post of posts) {