feat: add tags to articles (#917)

## Problem we need to add tags to article pages ## Solution 1. add the prop to `Article` - specified as props **and not on schema** because we don't want users to be able to add this on studio yet 2. pass the props down to `ArticlePageHeader` and render it ## Screenshots <img width="766" alt="image" src="https://github.com/user-attachments/assets/85340047-4a93-463e-a997-a20e107babb3">
opengovsg · Dec 20, 2024 · ba3520d · ba3520d
1 parent 01c3d31
commit ba3520d
Show file tree

Hide file tree

Showing 8 changed files with 206 additions and 43 deletions.
diff --git a/packages/components/src/interfaces/internal/ArticlePageHeader.ts b/packages/components/src/interfaces/internal/ArticlePageHeader.ts
@@ -15,6 +15,7 @@ export const ArticlePageHeaderSchema = Type.Object({
 })
 
 export type ArticlePageHeaderProps = Static<typeof ArticlePageHeaderSchema> & {
+  tags?: CollectionCardProps["tags"]
   breadcrumb: BreadcrumbProps
   title: string
   category: CollectionCardProps["category"]

diff --git a/...ts/src/templates/next/components/internal/ArticlePageHeader/ArticlePageHeader.stories.tsx b/...ts/src/templates/next/components/internal/ArticlePageHeader/ArticlePageHeader.stories.tsx
@@ -16,30 +16,44 @@ const meta: Meta<ArticlePageHeaderProps> = {
 export default meta
 type Story = StoryObj<typeof ArticlePageHeader>
 
+const ARTICLE = {
+  breadcrumb: {
+    links: [
+      {
+        title: "Newsroom",
+        url: "/newsroom",
+      },
+      {
+        title: "News",
+        url: "/newsroom/news",
+      },
+      {
+        title:
+          "Man sentenced to 24 months' imprisonment for smuggling 34.7 kg of rhinoceros horns",
+        url: "/newsroom/news/man-sentenced-to-24-months-imprisonment-for-smuggling-34-7-kg-of-rhinoceros-horns",
+      },
+    ],
+  },
+  category: "NParks Happenings",
+  title:
+    "Man sentenced to 24 months' imprisonment for smuggling 34.7 kg of rhinoceros horns",
+  date: "1 May 2024",
+  summary:
+    "20 pieces of rhinoceros horns were found in two pieces of transit baggage bound for Laos. The 34.7 kg seizure is the largest seizure of rhinoceros horns in Singapore to date.",
+}
+
 export const SingleSummaryItem: Story = {
+  args: ARTICLE,
+}
+
+export const ArticleWithTags: Story = {
   args: {
-    breadcrumb: {
-      links: [
-        {
-          title: "Newsroom",
-          url: "/newsroom",
-        },
-        {
-          title: "News",
-          url: "/newsroom/news",
-        },
-        {
-          title:
-            "Man sentenced to 24 months' imprisonment for smuggling 34.7 kg of rhinoceros horns",
-          url: "/newsroom/news/man-sentenced-to-24-months-imprisonment-for-smuggling-34-7-kg-of-rhinoceros-horns",
-        },
-      ],
-    },
-    category: "NParks Happenings",
-    title:
-      "Man sentenced to 24 months' imprisonment for smuggling 34.7 kg of rhinoceros horns",
-    date: "1 May 2024",
-    summary:
-      "20 pieces of rhinoceros horns were found in two pieces of transit baggage bound for Laos. The 34.7 kg seizure is the largest seizure of rhinoceros horns in Singapore to date.",
+    ...ARTICLE,
+    tags: [
+      {
+        category: "Tags",
+        selected: ["NParks Happenings", "Wild dinosaur"],
+      },
+    ],
   },
 }
diff --git a/...components/src/templates/next/components/internal/ArticlePageHeader/ArticlePageHeader.tsx b/...components/src/templates/next/components/internal/ArticlePageHeader/ArticlePageHeader.tsx
@@ -2,6 +2,7 @@ import type { ArticlePageHeaderProps } from "~/interfaces"
 import { getFormattedDate } from "~/utils"
 import BaseParagraph from "../BaseParagraph"
 import Breadcrumb from "../Breadcrumb"
+import { Tag } from "../Tag"
 
 const ArticleSummaryContent = ({
   summary,
@@ -28,6 +29,7 @@ const ArticlePageHeader = ({
   summary,
   site,
   LinkComponent,
+  tags = [],
 }: ArticlePageHeaderProps) => {
   return (
     <div className="mx-auto w-full">
@@ -38,9 +40,21 @@ const ArticlePageHeader = ({
       <div className="mb-3 text-base font-medium text-gray-600">{category}</div>
 
       <div className="flex flex-col gap-5">
-        <h1 className="break-words text-3xl font-semibold tracking-tight text-content-strong lg:text-4xl">
-          {title}
-        </h1>
+        <div className="flex flex-col gap-4">
+          <h1 className="break-words text-3xl font-semibold tracking-tight text-content-strong lg:text-4xl">
+            {title}
+          </h1>
+          {tags.length > 0 &&
+            tags.flatMap(({ selected: labels }) => {
+              return (
+                <div className="flex w-full flex-wrap items-center gap-2">
+                  {labels.map((label) => {
+                    return <Tag key={label}>{label}</Tag>
+                  })}
+                </div>
+              )
+            })}
+        </div>
 
         {date && (
           <p className="text-sm text-gray-800">{getFormattedDate(date)}</p>

diff --git a/...mponents/src/templates/next/components/internal/CollectionCard/CollectionCard.stories.tsx b/...mponents/src/templates/next/components/internal/CollectionCard/CollectionCard.stories.tsx
@@ -86,8 +86,6 @@ export const TagsWithImage: Story = {
     title: "Collection card with tags",
     description: "This is a random description that will be on the card",
     tags: [
-      { category: "tagged", selected: ["tagged"] },
-      { category: "tag", selected: ["A tag"] },
       {
         category: "long",
         selected: [
@@ -104,14 +102,6 @@ export const TagsWithoutImage: Story = {
     withoutImage: true,
     description: "This is a random description that will be on the card",
     tags: [
-      { category: "tag", selected: ["A tag"] },
-      { category: "tagged", selected: ["tagged"] },
-      {
-        category: "long",
-        selected: [
-          "This is a very long tag that shuold be reflowed on smaller screens maybe",
-        ],
-      },
       {
         category: "very long",
         selected: [

diff --git a/packages/components/src/templates/next/layouts/Article/Article.stories.tsx b/packages/components/src/templates/next/layouts/Article/Article.stories.tsx
@@ -404,3 +404,140 @@ export const NoSummary: Story = {
     ],
   },
 }
+
+export const TaggedArticle: Story = {
+  name: "TaggedArticle",
+  args: {
+    layout: "article",
+    site: {
+      siteName: "Isomer Next",
+      siteMap: {
+        id: "1",
+        title: "Home",
+        permalink: "/",
+        lastModified: "",
+        layout: "homepage",
+        summary: "",
+        children: [
+          {
+            id: "2",
+            title: "Newsroom",
+            permalink: "/newsroom",
+            lastModified: "",
+            layout: "content",
+            summary: "",
+            children: [
+              {
+                id: "3",
+                title: "News",
+                permalink: "/newsroom/news",
+                lastModified: "",
+                layout: "content",
+                summary: "",
+                children: [
+                  {
+                    id: "4",
+                    title:
+                      "Man sentenced to 24 months' imprisonment for smuggling 34.7 kg of rhinoceros horns",
+                    permalink:
+                      "/newsroom/news/man-sentenced-to-24-months-imprisonment-for-smuggling-34-7-kg-of-rhinoceros-horns",
+                    lastModified: "",
+                    layout: "content",
+                    summary: "",
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      theme: "isomer-next",
+      isGovernment: true,
+      logoUrl: "https://www.isomer.gov.sg/images/isomer-logo.svg",
+      navBarItems: [
+        {
+          name: "Home",
+          url: "/",
+        },
+        {
+          name: "Newsroom",
+          url: "/newsroom",
+          items: [
+            {
+              name: "News",
+              url: "/newsroom/news",
+            },
+          ],
+        },
+      ],
+      footerItems: {
+        privacyStatementLink: "https://www.isomer.gov.sg/privacy",
+        termsOfUseLink: "https://www.isomer.gov.sg/terms",
+        siteNavItems: [],
+      },
+      lastUpdated: "1 Jan 2021",
+      search: {
+        type: "localSearch",
+        searchUrl: "/search",
+      },
+    },
+    page: {
+      title:
+        "Singapore's Spectacular Citizens' Festival: a Celebration of Unity and Diversity",
+      permalink:
+        "/newsroom/news/man-sentenced-to-24-months-imprisonment-for-smuggling-34-7-kg-of-rhinoceros-horns",
+      lastModified: "2024-05-02T14:12:57.160Z",
+      category: "Citizen Engagement",
+      date: "1 May 2024",
+      articlePageHeader: {
+        summary:
+          "Singapore is preparing to host its inaugural Citizens' Festival in Marina Boulevard. The festival aims to unite Singaporeans of all backgrounds through cultural showcases, food markets, live music, and wellness activities.",
+      },
+      tags: [
+        {
+          category: "Tags",
+          selected: ["NParks Happenings", "Wild dinosaur"],
+        },
+      ],
+    },
+    content: [
+      {
+        type: "image",
+        src: "https://images.unsplash.com/photo-1570441262582-a2d4b9a916a5?q=80&w=2948&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        alt: "A man is serving food out of a blue food",
+      },
+      {
+        type: "prose",
+        content: [
+          {
+            type: "paragraph",
+            content: [
+              {
+                type: "text",
+                text: "Singapore - In a bid to foster community spirit and celebrate the rich tapestry of its diverse population, Singapore is gearing up to host its first-ever Citizens' Festival. This unprecedented event promises to be a dazzling extravaganza filled with entertainment, cultural showcases, and gastronomic delights.",
+              },
+            ],
+          },
+          {
+            type: "paragraph",
+            content: [
+              {
+                type: "text",
+                text: "One of the highlights of the festival is the Cultural Village, where visitors can immerse themselves in the sights, sounds, and flavors of Singapore's various ethnic communities. From traditional Malay dance performances to Chinese calligraphy demonstrations and Indian culinary workshops, attendees will have the opportunity to gain a deeper appreciation for the country's multicultural heritage.",
+              },
+            ],
+          },
+          {
+            type: "paragraph",
+            content: [
+              {
+                type: "text",
+                text: "This is a Chat-GPT4 generated article for visual testing purposes.",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}
diff --git a/packages/components/src/templates/next/layouts/Article/Article.tsx b/packages/components/src/templates/next/layouts/Article/Article.tsx
@@ -34,6 +34,7 @@ const ArticleLayout = ({
           date={page.date}
           site={site}
           LinkComponent={LinkComponent}
+          tags={page.tags}
         />
 
         <div className="mx-auto w-full gap-10 pb-20">

diff --git a/packages/components/src/types/page.ts b/packages/components/src/types/page.ts
@@ -113,8 +113,13 @@ type BasePageAdditionalProps = BaseItemAdditionalProps & {
   language?: "en"
 }
 
+interface ArticlePageAdditionalProps {
+  tags?: CollectionPagePageProps["tags"]
+}
+
 export type ArticlePagePageProps = Static<typeof ArticlePagePageSchema> &
-  BasePageAdditionalProps
+  BasePageAdditionalProps &
+  ArticlePageAdditionalProps
 export type CollectionPagePageProps = Static<typeof CollectionPagePageSchema> &
   BasePageAdditionalProps
 export type ContentPagePageProps = Static<typeof ContentPagePageSchema> &

diff --git a/tooling/build/scripts/publishing/index.ts b/tooling/build/scripts/publishing/index.ts
@@ -104,6 +104,13 @@ async function main() {
           ...resource.content.page,
           title: resource.title,
         }
+
+        await writeContentToFile(
+          resource.fullPermalink,
+          resource.content,
+          resource.parentId,
+        )
+
         const idOfFolder = resources.find(
           (item) =>
             resource.fullPermalink.endsWith(INDEX_PAGE_PERMALINK) &&
@@ -135,12 +142,6 @@ async function main() {
         }
 
         sitemapEntries.push(sitemapEntry)
-
-        await writeContentToFile(
-          resource.fullPermalink,
-          resource.content,
-          resource.parentId,
-        )
       } else {
         logDebug(
           `Skipping resource with id ${resource.id} as it is not a Page or has no content.`,