refactor(homepage): migrate hard coded cards component to cms cards l…

…ayout component
ocftw · Oct 19, 2023 · 7b330f4 · 7b330f4
1 parent 51bcde0
commit 7b330f4
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 107 deletions.
diff --git a/homepage/src/components/cards.jsx b/homepage/src/components/cards.jsx
@@ -0,0 +1,35 @@
+import { ParseMarkdownAndHtml } from './parseMarkdownAndHtml';
+
+const Cards = ({ id, title, cards }) => {
+  return (
+    <div className="section" id={id}>
+      <div className="container">
+        <div className="section-head">
+          <h2>{title}</h2>
+        </div>
+        <div className="row">
+          {cards.map((card) => (
+            <Card key={card.data.title} card={card} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Card = ({ card }) => (
+  <div className="col-md-4 mb-3">
+    <div className="section-main">
+      <h3>{card.data.title}</h3>
+      <div>
+        <img src={card.data.image} alt={card.data.title} />
+        <strong>{card.data.description}</strong>
+        <ParseMarkdownAndHtml markdown={true}>
+          {card.content}
+        </ParseMarkdownAndHtml>
+      </div>
+    </div>
+  </div>
+);
+
+export default Cards;
diff --git a/homepage/src/layouts/contentMapper.jsx b/homepage/src/layouts/contentMapper.jsx
@@ -4,6 +4,7 @@ import ThreeColumns from '../components/threeColumns';
 import ImageAndText from '../components/imageAndText';
 import Section from '../components/section';
 import Headline from '../components/headline';
+import Cards from '../components/cards';
 import { componentTypes } from '../lib/componentMapper';
 
 const contentMapper = (component) => {
@@ -20,6 +21,8 @@ const contentMapper = (component) => {
       return <TwoColumns key={component.id} {...component.props} />;
     case componentTypes.ThreeColumns:
       return <ThreeColumns key={component.id} {...component.props} />;
+    case componentTypes.Cards:
+      return <Cards key={component.id} {...component.props} />;
     default:
       return null;
   }

diff --git a/homepage/src/lib/componentMapper.js b/homepage/src/lib/componentMapper.js
@@ -8,7 +8,7 @@ const removeUndefined = (obj) => {
     }
   });
   return newObj;
-}
+};
 
 export const componentTypes = {
   Banner: 'Banner',
@@ -17,9 +17,10 @@ export const componentTypes = {
   TwoColumns: 'TwoColumns',
   ThreeColumns: 'ThreeColumns',
   ImageAndText: 'ImageAndText',
-}
+  Cards: 'Cards',
+};
 
-export const componentMapper = (layout) => {
+export const componentMapper = (layout, cards = []) => {
   let type = '';
   let props = {};
   switch (layout.type) {
@@ -88,10 +89,33 @@ export const componentMapper = (layout) => {
         break;
       }
     }
+    case 'layout_cards': {
+      let filteredCards = cards;
+      // filter cards by card_type
+      if (layout.card_type) {
+        filteredCards = cards.filter(
+          (card) => layout.card_type === card.data.type,
+        );
+      }
+      // filter cards by card_tags
+      if (layout.card_tags && layout.card_tags.length > 0) {
+        filteredCards = filteredCards.filter((card) =>
+          layout.card_tags.every((tag) => card.data.tags?.includes(tag)),
+        );
+      }
+
+      type = componentTypes.Cards;
+      props = {
+        id: titleToAnchorId(layout.title),
+        title: layout.title,
+        cards: filteredCards,
+      };
+      break;
+    }
   }
 
   return {
     type,
     props: removeUndefined(props),
   };
-}
+};
diff --git a/homepage/src/pages/cards.jsx b/homepage/src/pages/cards.jsx
@@ -1,6 +1,4 @@
 import Head from 'next/head';
-import Headline from '../components/headline';
-import CardsGrid from '../components/cardsGrid';
 import contentMapper from '../layouts/contentMapper';
 import { fetchPage } from '../lib/fetchPage';
 import { fetchCards } from '../lib/fetchCards';
@@ -23,12 +21,9 @@ export const getStaticProps = async ({ locale }) => {
 
     data.image = image;
 
-    const { markdownToHtml } = await import('../lib/markdownToHtml');
-    const processedContent = await markdownToHtml(content);
-
     return {
-      frontMatter: data,
-      content: processedContent,
+      data,
+      content,
     };
   });
   const cards = await Promise.all(cardTasks);
@@ -38,44 +33,9 @@ export const getStaticProps = async ({ locale }) => {
   const page = fetchPage(locale, 'cards');
 
   const contentList = page.data['layout_list']?.map((layout) =>
-    componentMapper(layout, rawCards),
+    componentMapper(layout, cards),
   );
 
-  const title = {
-    en: 'Card Introduction',
-    'zh-tw': '卡片介紹',
-  };
-
-  const projectCardTitle = {
-    en: 'Project Card',
-    'zh-tw': '專案卡',
-  };
-
-  const jobCardTitle = {
-    en: 'Job Card',
-    'zh-tw': '人力卡',
-  };
-
-  const eventCardTitle = {
-    en: 'Event Card',
-    'zh-tw': '事件卡',
-  };
-
-  const projectCardSubtitle = {
-    'open gov': {
-      en: 'Open Government',
-      'zh-tw': '開放政府專案',
-    },
-    'open data': {
-      en: 'Open Data',
-      'zh-tw': '開放資料專案',
-    },
-    'open source': {
-      en: 'Open Source',
-      'zh-tw': '開放原始碼專案',
-    },
-  };
-
   const headInfo = {
     title: {
       en: `OpenStarTerVillage - Card Introduction`,
@@ -85,81 +45,25 @@ export const getStaticProps = async ({ locale }) => {
 
   return {
     props: {
-      cards,
       navigationList,
       headInfo: {
         title: headInfo.title[locale],
       },
-      title: title[locale],
-      projectCardTitle: projectCardTitle[locale],
-      jobCardTitle: jobCardTitle[locale],
-      eventCardTitle: eventCardTitle[locale],
-      projectCardSubtitle: {
-        'open gov': projectCardSubtitle['open gov'][locale],
-        'open data': projectCardSubtitle['open data'][locale],
-        'open source': projectCardSubtitle['open source'][locale],
-      },
       page: {
         contentList,
       },
     },
   };
 };
 
-const cards = ({
-  cards,
-  headInfo,
-  title,
-  projectCardTitle,
-  jobCardTitle,
-  eventCardTitle,
-  projectCardSubtitle,
-  page,
-}) => {
+const cards = ({ headInfo, page }) => {
   return (
     <>
       <Head>
         <title>{headInfo.title}</title>
-        <meta name="description" content="" />
+        <meta name="description" content={headInfo.description} />
       </Head>
       {page.contentList?.map(contentMapper)}
-      <Headline title={title} />
-      <CardsGrid
-        id={`project-cards`}
-        title={projectCardTitle}
-        cards={cards}
-        filter={`project`}
-        projectCardSubtype={`open gov`}
-        projectCardSubtitle={projectCardSubtitle['open gov']}
-      />
-      <CardsGrid
-        id={`project-cards`}
-        title={projectCardTitle}
-        cards={cards}
-        filter={`project`}
-        projectCardSubtype={`open data`}
-        projectCardSubtitle={projectCardSubtitle['open data']}
-      />
-      <CardsGrid
-        id={`project-cards`}
-        title={projectCardTitle}
-        cards={cards}
-        filter={`project`}
-        projectCardSubtype={`open source`}
-        projectCardSubtitle={projectCardSubtitle['open source']}
-      />
-      <CardsGrid
-        id={`job-cards`}
-        title={jobCardTitle}
-        cards={cards}
-        filter={`job`}
-      />
-      <CardsGrid
-        id={`event-cards`}
-        title={eventCardTitle}
-        cards={cards}
-        filter={`event`}
-      />
     </>
   );
 };

diff --git a/homepage/src/pages/index.jsx b/homepage/src/pages/index.jsx
@@ -24,7 +24,9 @@ export const getStaticProps = async ({ locale }) => {
   };
 
   const page = fetchPage(locale, 'index');
-  const contentList = page.data['layout_list']?.map(componentMapper);
+  const contentList = page.data['layout_list']?.map((layout) =>
+    componentMapper(layout, []),
+  );
 
   return {
     props: {

diff --git a/homepage/src/pages/resource.jsx b/homepage/src/pages/resource.jsx
@@ -9,7 +9,9 @@ import { getNavigationList } from '../lib/getNavigationList';
  */
 export const getStaticProps = async ({ locale }) => {
   const page = fetchPage(locale, 'resource');
-  const contentList = page.data['layout_list']?.map(componentMapper);
+  const contentList = page.data['layout_list']?.map((layout) =>
+    componentMapper(layout, []),
+  );
   const navigationList = await getNavigationList(locale);
 
   return {