Fix the draft system 🔧.

README.md

@@ -15,7 +15,6 @@ Adapted from [tailwind-astro-starting-blog](https://github.com/wanoo21/tailwind-
 - For post titles, try to use the cover image as a dimmed background for the title.
 - Restore OG meta data.
 - Configure related posts.
-- Once live, check the comment system.
 - Restore the estimated reading time feature.
 - Implement a service worker strategy.
 - Use local avatar instead of gravatar.

src/functions.ts

@@ -26,4 +26,4 @@ export const sortBlogPosts = (
  * @returns True if the post is not a draft
  */
 export const excludeDrafts = ({ data }: CollectionEntry<'blog'>): boolean =>
-  import.meta.env.PROD ? true : !data.draft
+  import.meta.env.DEV ? true : !data.draft

src/layouts/PostLayout.astro

@@ -132,8 +132,8 @@ const { Content, headings } = await post.render()
           <div class="xl:col-span-3 xl:row-span-2 xl:pb-0">
             {
               post.data.draft && (
-                <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 dark:bg-yellow-500 dark:border-yellow-300 mt-10">
-                  <p class="leading-5 text-yellow-700 dark:text-yellow-300">
+                <div class="bg-yellow-100 dark:bg-yellow-900 border-yellow-400 dark:border-yellow-600 border-l-4 p-4 mt-10">
+                  <p class="text-yellow-700 dark:text-yellow-300">
                     {t('layouts.postLayout.draftMessage')}
                   </p>
                 </div>

src/layouts/SimplePostLayout.astro

@@ -82,8 +82,8 @@ const { Content, headings } = await post.render()
       >
         {
           post.data.draft && (
-            <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 dark:bg-yellow-500 dark:border-yellow-300 mt-10">
-              <p class="leading-5 text-yellow-700 dark:text-yellow-300">
+            <div class="bg-yellow-100 dark:bg-yellow-900 border-yellow-400 dark:border-yellow-600 border-l-4 p-4 mt-10">
+              <p class="text-yellow-700 dark:text-yellow-300">
                 {t('layouts.postLayout.draftMessage')}
               </p>
             </div>