feat: add category and section page

rollup.config.mjs

@@ -39,6 +39,8 @@ export default defineConfig([
       footer: 'src/modules/footer/index.ts',
       homepage: 'src/modules/homepage/index.ts',
       'article-page': 'src/modules/article-page/index.ts',
+      'category-page': 'src/modules/category-page/index.ts',
+      'section-page': 'src/modules/section-page/index.ts',
     },
     output: {
       dir: 'assets',

src/lib/types.ts

@@ -218,3 +218,11 @@ export type HomepageData = {
 export type ArticlePageData = {
   article: Article;
 };
+
+export type CategoryPageData = {
+  category: Category;
+};
+
+export type SectionPageData = {
+  section: Section;
+};

src/modules/article-page/ArticlePageModule.tsx

@@ -6,10 +6,12 @@ type Props = {
   articlePageData: ArticlePageData;
 };
 
+// We are not using reusable component since we are having issue navigation and footer not rendering when we use reusable component accross page.
+// If you change breadcrumbs, you should also update the breadcrumbs in the CategoryPageModule.tsx file to have consistant design.
 export const ArticleBreadcrumbs: FC<Props> = ({ articlePageData }) => {
   return (
     <>
-      <div className="Breadcrumbs mb-8 flex flex-row items-center overflow-scroll col-span-4 sm:col-span-8">
+      <div className="ArticleBreadcrumbs mb-8 flex flex-row items-center overflow-scroll col-span-4 sm:col-span-8">
         <a href="/" target="_self" className="group flex">
           <span className="body-3 text-nowrap transition text-light-neutral-1 dark:text-dark-neutral-1 group-hover:text-light-neutral-2 group-hover:dark:text-dark-neutral-2">
             Home
@@ -27,6 +29,12 @@ export const ArticleBreadcrumbs: FC<Props> = ({ articlePageData }) => {
             </>
           );
         })}
+        <Chevron />
+        <a href={articlePageData.article.url} target="_self" className="group flex">
+          <span className="body-3 text-nowrap transition text-light-neutral-1 dark:text-dark-neutral-1 group-hover:text-light-neutral-2 group-hover:dark:text-dark-neutral-2">
+            {articlePageData.article.title}
+          </span>
+        </a>
       </div>
     </>
   );

src/modules/category-page/CategoryPageModule.tsx

@@ -0,0 +1,62 @@
+import { FC } from 'react';
+import { CategoryPageData } from '../../lib/types';
+import cn from 'classnames';
+
+type Props = {
+  categoryPageData: CategoryPageData;
+};
+
+// We are not using reusable component since we are having issue navigation and footer not rendering when we use reusable component accross page.
+// If you change breadcrumbs, you should also update the breadcrumbs in the ArticlePageModule.tsx file to have consistant design.
+export const CategoryBreadcrumbs: FC<Props> = ({ categoryPageData }) => {
+  const category = categoryPageData.category;
+  const pathSteps = [{ name: category.name, url: category.url, target: '_self' }];
+
+  return (
+    <>
+      <div className="CategoryBreadcrumbs mb-8 flex flex-row items-center overflow-scroll col-span-4 sm:col-span-8">
+        <a href="/" target="_self" className="group flex">
+          <span className="body-3 text-nowrap transition text-light-neutral-1 dark:text-dark-neutral-1 group-hover:text-light-neutral-2 group-hover:dark:text-dark-neutral-2">
+            Home
+          </span>
+        </a>
+        {pathSteps.map((step) => {
+          return (
+            <>
+              <Chevron />
+              <a href={step.url} target={step.target} className="group flex">
+                <span className="body-3 text-nowrap text-light-neutral-1 dark:text-dark-neutral-1 transition group-hover:text-light-neutral-2 group-hover:dark:text-dark-neutral-2">
+                  {step.name}
+                </span>
+              </a>
+            </>
+          );
+        })}
+      </div>
+    </>
+  );
+};
+
+const Chevron: FC<{
+  color?: 'neutral-1';
+}> = ({ color = 'neutral-1' }) => {
+  return (
+    <svg
+      className="mx-0.5 min-w-4 min-h-4"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M5.52827 3.52827C5.26792 3.78862 5.26792 4.21073 5.52827 4.47108L9.05687 7.99967L5.52827 11.5283C5.26792 11.7886 5.26792 12.2107 5.52827 12.4711C5.78862 12.7314 6.21073 12.7314 6.47108 12.4711L10.4711 8.47108C10.7314 8.21073 10.7314 7.78862 10.4711 7.52827L6.47108 3.52827C6.21073 3.26792 5.78862 3.26792 5.52827 3.52827Z"
+        className={cn({
+          'fill-light-neutral-1 dark:fill-dark-neutral-1': color === 'neutral-1',
+        })}
+      />
+    </svg>
+  );
+};

src/modules/category-page/index.ts

@@ -0,0 +1 @@
+export { renderCategoryBreadcrumbs } from './renderCategoryPage';