preview mode, done only for prod, dev shows drafts always

.env.development.example

@@ -1,2 +1,7 @@
+# SSG - ALL env vars are BUILD time ONLY
+
 # must have https:// or http://
 SITE_URL=http://localhost:3000
+
+# always true in development, set only on prod build
+# PREVIEW_MODE=

.env.production.example

@@ -1,4 +1,9 @@
-# build time only, not needed at runtime
+# SSG - ALL env vars are BUILD time ONLY
+
 # with https://
 # https://nemanjamitic.com | https://nemanjam.github.io
-SITE_URL=https://nemanjam.github.io
+SITE_URL=https://nemanjam.github.io
+
+# see draft posts and projects, true | false | empty
+# optional, default false, set only on prod build
+# PREVIEW_MODE=

docs/todo3.md

@@ -342,6 +342,7 @@ share
     code blocks responsive fonts 14, 16px, md or lg?
     pagination 3 items
 styleguide
-sitemap
+    sitemap
     transistor favicon
+rewrite env vars with new types and import.meta instead of process.env
 ```

env.d.ts

@@ -2,5 +2,7 @@ declare namespace NodeJS {
   interface ProcessEnv {
     NODE_ENV: 'development' | 'production' | 'test';
     SITE_URL: string;
+    /** Optional in .env file but always defined in type. Default: false. */
+    PREVIEW_MODE: boolean;
   }
 }

package.json

@@ -4,11 +4,11 @@
   "private": true,
   "scripts": {
     "dev": "astro dev",
-    "start": "astro dev",
+    "start": "serve ./dist",
+    "preview": "astro preview",
     "build": "astro build",
     "build:nginx": "SITE_URL='https://nemanjamitic.com' astro build",
     "build:nginx:local": "SITE_URL='https://blog.local.nemanjamitic.com' astro build",
-    "preview": "astro preview",
     "astro": "astro",
     "sync": "astro sync",
     "lint": "eslint --ext .astro,.tsx,.ts,.js,.mdx src",
@@ -74,6 +74,7 @@
     "eslint-plugin-tailwindcss": "^3.17.3",
     "prettier": "^3.3.2",
     "prettier-plugin-astro": "^0.14.0",
+    "serve": "^14.2.3",
     "shiki": "^1.7.0",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.4.5"

src/components/PostCard.astro

@@ -6,6 +6,7 @@ import { getPublishedOrUpdatedDate } from '@/modules/common';
 import { getCategoryProps } from '@/modules/post/category';
 import Link from '@/components/Link.astro';
 import TagList from '@/components/TagList.astro';
+import { draftText } from '@/constants/data';
 import { ROUTES } from '@/constants/routes';
 import { formatDate, formatDateIso } from '@/utils/datetime';
 import { cn } from '@/utils/styles';
@@ -89,7 +90,7 @@ const { lastAccessDate, isUpdatedDate } = getPublishedOrUpdatedDate({
     <h2 class="text-2xl font-bold break-words md:line-clamp-2 mt-0 mb-2">
       <Link href={`${ROUTES.BLOG}${slug}`} variant="link-heading">
         {title}
-        {draft && <sup class="text-sm text-red-400">(draft)</sup>}
+        {draft && <sup class="text-sm text-red-500 ml-1">{draftText}</sup>}
       </Link>
     </h2>
 

src/components/PostCardMore.astro

@@ -2,6 +2,7 @@
 import { Image } from 'astro:assets';
 
 import Link from '@/components/Link.astro';
+import { draftText } from '@/constants/data';
 import { ROUTES } from '@/constants/routes';
 
 import type { Post } from '@/types/post';
@@ -12,7 +13,7 @@ export interface Props {
 
 const { post } = Astro.props;
 const { data, slug } = post;
-const { title, heroImage, heroAlt, description } = data;
+const { title, heroImage, heroAlt, description, draft } = data;
 ---
 
 <div>
@@ -26,6 +27,7 @@ const { title, heroImage, heroAlt, description } = data;
   <h4 class="break-words line-clamp-2 mt-3 mb-2">
     <Link variant="link-heading" href={`${ROUTES.BLOG}${slug}`}>
       {title}
+      {draft && <sup class="text-sm text-red-500 ml-1">{draftText}</sup>}
     </Link>
   </h4>
   {description && <p class="text-base text-captions line-clamp-2">{description}</p>}

src/components/PostCardSmall.astro

@@ -4,6 +4,7 @@ import { Image } from 'astro:assets';
 
 import { getPublishedOrUpdatedDate } from '@/modules/common';
 import Link from '@/components/Link.astro';
+import { draftText } from '@/constants/data';
 import { ROUTES } from '@/constants/routes';
 import { formatDate, formatDateIso } from '@/utils/datetime';
 import { cn } from '@/utils/styles';
@@ -17,7 +18,7 @@ export interface Props extends HTMLAttributes<'article'> {
 
 const { post, class: className } = Astro.props;
 const { data, slug } = post;
-const { title, heroImage, heroAlt, description, publishDate, updatedDate, tags } = data;
+const { title, heroImage, heroAlt, description, publishDate, updatedDate, draft } = data;
 
 const { lastAccessDate, isUpdatedDate } = getPublishedOrUpdatedDate({
   publishDate,
@@ -41,8 +42,9 @@ const { lastAccessDate, isUpdatedDate } = getPublishedOrUpdatedDate({
     class="object-cover rounded-box hidden xs:block"
   />
   <div>
-    <h4 class="text-xl line-clamp-1 leading-none mb-1">
+    <h4 class="text-xl leading-none line-clamp-1 mb-1">
       <Link variant="link-heading" href={`${ROUTES.BLOG}${slug}`}>
+        {draft && <sup class="text-sm text-red-500 mr-1">{draftText}</sup>}
         {title}
       </Link>
     </h4>

src/config.ts

@@ -20,8 +20,10 @@ dotenv.config({ path: envFileName });
 
 /*-------------------- configData -------------------*/
 
+/** SSG - all env vars are build time only. */
 const configData: ConfigType = {
   NODE_ENV: process.env.NODE_ENV,
+  PREVIEW_MODE: process.env.PREVIEW_MODE,
   /** without '/' */
   SITE_URL: process.env.SITE_URL,
   SITE_TITLE: 'Nemanja Mitic',

src/constants/data.ts

@@ -0,0 +1 @@
+export const draftText = '(draft)';

src/constants/routes.ts

@@ -9,6 +9,7 @@ export const ROUTES = {
   EXPLORE: '/blog/explore/',
   EXPLORE_TAGS: '/blog/explore/tags/',
   EXPLORE_CATEGORIES: '/blog/explore/categories/',
+  /** maybe in future */
   DRAFTS: '/drafts/',
   _404: '/404/',
   _500: '/500/',

src/content/post/2024-01-21-example-article-5.mdx

@@ -11,6 +11,7 @@ tags:
   - react
 category: video
 toc: true
+draft: true
 ---
 
 import { Icon } from 'astro-icon/components';

src/libs/api/feed.ts

@@ -4,6 +4,7 @@ import { getAllPosts } from '@/modules/post/common';
 import { ROUTES } from '@/constants/routes';
 import { CONFIG } from '@/config';
 import { renderMarkdown } from '@/utils/markdown';
+import { isPreviewMode } from '@/utils/preview';
 
 import type { Item } from 'feed';
 
@@ -42,8 +43,10 @@ export const getFeed = async (): Promise<Feed> => {
     const { data, body, slug } = post;
     const { title, description, publishDate, heroImage, noHero, draft } = data;
 
+    const includeDrafts = isPreviewMode() && draft;
+
     // omit drafts
-    if (draft) continue;
+    if (!includeDrafts) continue;
 
     const url = `${SITE_URL}${ROUTES.BLOG}${slug}/`;
     const { code: content } = await renderMarkdown(body);

src/modules/common.ts

@@ -1,5 +1,7 @@
 import { getCollection } from 'astro:content';
 
+import { isPreviewMode } from '@/utils/preview';
+
 import type { CollectionEntry, CollectionKey } from 'astro:content';
 
 /*-------------------------------- all entries ------------------------------*/
@@ -11,13 +13,15 @@ export interface GetAllEntriesOptions {
 
 /**
  * Sorts by publishDate desc by default. Newest on top.
- * Omits drafts by default.
+ * Omits drafts by default - set by PREVIEW_MODE env var.
+ *
+ * ONLY place to filter draft posts and projects.
  */
 export const getAllEntries = async <T extends CollectionKey>(
   collectionName: T,
   options?: GetAllEntriesOptions
 ): Promise<CollectionEntry<T>[]> => {
-  const { skipSort = false, includeDrafts = false } = options ?? {};
+  const { skipSort = false, includeDrafts = isPreviewMode() } = options ?? {};
 
   const entries = await getCollection<T>(collectionName, ({ data }) => {
     const isProdAndDraft = import.meta.env.PROD && data.draft;

src/pages/blog/[slug].astro

@@ -10,6 +10,7 @@ import PostMeta from '@/components/PostMeta.astro';
 import SharePost from '@/components/SharePost.astro';
 import TagList from '@/components/TagList.astro';
 import TocWidget from '@/components/TocWidget.astro';
+import { draftText } from '@/constants/data';
 import { getOpenGraphImagePath } from '@/utils/open-graph-image';
 
 import type { Metadata } from '@/types/common';
@@ -88,7 +89,7 @@ const metadata: Metadata = { title, description, image };
     {/* title */}
     <h1>
       {title}
-      {draft && <sup class="text-red-400">(draft)</sup>}
+      {draft && <sup class="text-red-500 ml-1">{draftText}</sup>}
     </h1>
 
     {/* description */}

src/schemas/config.ts

@@ -1,11 +1,16 @@
 import { z } from 'zod';
 
 export const nodeEnvValues = ['development', 'test', 'production'] as const;
+export const booleanValues = ['true', 'false', ''] as const;
 
 export const configSchema = z.object({
   NODE_ENV: z.enum(nodeEnvValues),
+  PREVIEW_MODE: z
+    .enum(booleanValues)
+    .transform((value) => value === 'true')
+    .default('false'),
   // ensure no trailing slash
-  SITE_URL: z.string().url().regex(/[^/]$/, 'SITE_URL should not end with a slash'),
+  SITE_URL: z.string().url().regex(/[^/]$/, 'SITE_URL should not end with a slash "/"'),
   SITE_TITLE: z.string().min(1),
   SITE_DESCRIPTION: z.string().min(1),
   PAGE_SIZE: z.object({

src/utils/preview.ts

@@ -0,0 +1,4 @@
+import { CONFIG } from '@/config';
+
+/** independent from prod or dev */
+export const isPreviewMode = () => CONFIG.PREVIEW_MODE === true;