feat: implement publicationState and show a draft badge

components/blog/BlogSection.tsx

@@ -13,12 +13,30 @@ interface BlogSectionProps {
 
 const BlogSection = ({ data }: BlogSectionProps) => {
   const {
-    attributes: { publishedAt, listImage, blogTags, title, slug },
+    attributes: { publishedAt, listImage, blogTags, title, slug, publicationState },
   } = data;
 
   return (
     <Stack direction="column">
-      <Link href={`/blog/${slug}`} underline="none">
+      <Link href={`/blog/${slug}`} underline="none" position="relative">
+        {publicationState === 'draft' ? (
+          <Typography
+            variant="caption"
+            sx={{
+              position: 'absolute',
+              top: 8,
+              right: 8,
+              backgroundColor: 'error.main',
+              color: 'common.white',
+              padding: '4px 8px',
+              borderRadius: '4px',
+              zIndex: 1,
+              userSelect: 'none',
+            }}
+          >
+            Draft
+          </Typography>
+        ) : null}
         <ImageWrapperComponent
           data={{
             src: listImage.data[0].attributes.url,

models/strapi.model.ts

@@ -273,6 +273,7 @@ export interface BlogItem {
     slug: string;
     keywords: string;
     publishedAt: string;
+    createdAt: string;
     updatedAt: string;
     technologies: Technologies;
     heroImage: {
@@ -305,6 +306,7 @@ export interface BlogItem {
     callToAction: {
       data: Collection<CallToAction>;
     };
+    publicationState: 'live' | 'draft';
   };
 }
 
@@ -348,6 +350,7 @@ export interface BlogItemStaticProps {
     callToAction: {
       data: Collection<CallToAction>;
     };
+    publicationState: 'live' | 'draft';
   };
 }
 

pages/blog/[blogId].page.tsx

@@ -102,6 +102,25 @@ const BlogDetailPage = (props: BlogIdStaticProps) => {
           mainEntityOfPage={`${baseUrl}/blog/${attributes.slug}`}
         />
 
+        {attributes.publicationState === 'draft' ? (
+          <Typography
+            variant="caption"
+            sx={{
+              position: 'sticky',
+              top: 100,
+              left: 'calc(100% - 100px)',
+              backgroundColor: 'error.main',
+              color: 'common.white',
+              padding: '4px 8px',
+              borderRadius: '4px',
+              zIndex: 1,
+              userSelect: 'none',
+            }}
+          >
+            Draft
+          </Typography>
+        ) : null}
+
         <HeroBlogDetails
           title={attributes.title}
           projectTags={attributes.blogTags.data.map(tag => ({

stories/mocks/page-data.ts

@@ -10,6 +10,7 @@ import type {
   Collection,
   Section,
   HeadingLevel,
+  BlogItemStrapi,
 } from '../../models';
 import type { BlogStaticProps } from '../../utils/api.blog';
 import type { Technology } from '../../models/strapi.model';
@@ -508,7 +509,7 @@ Note: This content uses HTML tags to represent headings and paragraphs.
   },
 };
 
-const blogItem = {
+const blogItem: BlogItemStrapi = {
   id: 1,
   attributes: {
     title: 'Designing design systems that scale',
@@ -517,6 +518,7 @@ const blogItem = {
     slug: 'design-systems-that-scale',
     keywords: 'design systems, SaaS, front-end development',
     publishedAt: '2025-02-16T15:40:22.829Z',
+    createdAt: '2024-01-15T00:00:00.000Z',
     updatedAt: '2024-01-16T00:00:00.000Z',
     technologies: {
       data: technologiesData[0][1],
@@ -553,10 +555,11 @@ const blogItem = {
         },
       },
     },
+    publicationState: 'live',
   },
 };
 
-const secondBlogItem = {
+const secondBlogItem: BlogItemStrapi = {
   ...blogItem,
   id: 2,
   attributes: {
@@ -578,14 +581,15 @@ const secondBlogItem = {
   },
 };
 
-const thirdBlogItem = {
+const thirdBlogItem: BlogItemStrapi = {
   ...blogItem,
   id: 3,
   attributes: {
     ...blogItem.attributes,
     title: 'Building collaborative workflows with design tokens',
     slug: 'design-tokens-workflows',
     publishedAt: 'March 12, 2024',
+    publicationState: 'draft',
   },
 };
 

utils/api.blog.ts

@@ -34,8 +34,11 @@ const blogFields = [
 const populateBlog = generatePopulate(blogFields);
 
 const fetchAllBlogPosts = async (): Promise<ResponseData<BlogItemStrapi>> => {
+  const publicationState = process.env.NODE_ENV === 'production' ? 'live' : 'preview';
   const params = {
     populate: populateBlog,
+    publicationState,
+    sort: ['publishedAt:desc'],
   };
   const urlParams = stringify(params);
 
@@ -76,9 +79,10 @@ export const getStaticPropsIndex: GetStaticProps<BlogStaticProps> = async () =>
     props: {
       className: '',
       data: allBlogPosts.data.map(({ id, attributes }) => {
-        const { publishedAt } = attributes;
+        const { publishedAt, createdAt } = attributes;
+        const publicationState = publishedAt === null ? 'draft' : 'live';
 
-        const dateRaw = new Date(publishedAt);
+        const dateRaw = new Date(process.env.NODE_ENV === 'production' ? publishedAt : createdAt);
 
         const date = dateRaw
           .toLocaleDateString('en-US', {
@@ -94,6 +98,7 @@ export const getStaticPropsIndex: GetStaticProps<BlogStaticProps> = async () =>
           attributes: {
             ...attributes,
             publishedAt: `${date}, ${dateRaw.getFullYear()}`,
+            publicationState,
           },
         };
       }),
@@ -106,8 +111,10 @@ export const getStaticPropsIndex: GetStaticProps<BlogStaticProps> = async () =>
 };
 
 export const getStaticPropsBlogId: GetStaticProps<BlogIdStaticProps> = async ({ params: p }) => {
+  const publicationState = process.env.NODE_ENV === 'production' ? 'live' : 'preview';
   const params = {
     populate: populateBlog,
+    publicationState,
     filters: {
       slug: {
         $eq: String(p?.blogId),
@@ -159,6 +166,11 @@ export const getStaticPropsBlogId: GetStaticProps<BlogIdStaticProps> = async ({
   const technologiesGrouped = Object.entries(
     technologiesGroupedByTechnologyField(json.data[0].attributes.technologies.data),
   );
+  const isDraft = json.data[0].attributes.publishedAt === null;
+  const publishedAt = isDraft
+    ? json.data[0].attributes.createdAt
+    : json.data[0].attributes.publishedAt;
+  const publicationStateAttr = isDraft ? 'draft' : 'live';
 
   return {
     props: {
@@ -168,6 +180,8 @@ export const getStaticPropsBlogId: GetStaticProps<BlogIdStaticProps> = async ({
         attributes: {
           ...json.data[0].attributes,
           technologies: technologiesGrouped,
+          publishedAt,
+          publicationState: publicationStateAttr,
         },
       },
       hireEngineersLinks: hireEngineersLinks.props.data,