fix issue #260

app/[lang]/projects/sections/ProjectContent.tsx

@@ -36,6 +36,16 @@ export const ProjectContent = ({
 
   const editPageURL = siteConfig?.editProjectPage(project?.id, lang)
 
+  const ProjectStatusMessageMap: Record<ProjectStatus, string> = {
+    [ProjectStatus.ACTIVE]: "",
+    [ProjectStatus.INACTIVE]: t("projectSunset"),
+    [ProjectStatus.MAINTAINED]: t("projectMaintenance"),
+  }
+
+  // @ts-ignore
+  const projectStatusMessage =
+    ProjectStatusMessageMap?.[project?.projectStatus as ProjectStatus]
+
   if (!project?.id) {
     router.push("/404")
   }
@@ -117,11 +127,11 @@ export const ProjectContent = ({
                   </div>
 
                   <div className="flex flex-col w-full gap-6 mt-6 md:gap-10 md:mt-10">
-                    {project?.projectStatus === ProjectStatus.INACTIVE && (
+                    {projectStatusMessage?.length > 0 && (
                       <span className="relative pl-6 text-tuatara-500">
                         <div className="border-l-[4px] border-l-orangeDark absolute left-0 top-0 bottom-0"></div>
                         <span className="text-tuatara-500">
-                          {t("projectSunset")}
+                          {projectStatusMessage}
                         </span>
                       </span>
                     )}
@@ -166,7 +176,7 @@ export const ProjectContent = ({
                                 ...props,
                               }),
                             p: ({ node, ...props }) =>
-                              createMarkdownElement("p" , {
+                              createMarkdownElement("p", {
                                 className:
                                   "text-tuatara-700 font-sans text-base font-normal peer mt-4 first:mt-0",
                                 ...props,

app/i18n/locales/en/common.json

@@ -56,6 +56,7 @@
     "inactive": "Inactive"
   },
   "projectSunset": "This project has been sunset and is not actively worked on anymore.",
+  "projectMaintenance": "This project is still being monitored for bug fixes, but are not under active feature development",
   "sortBy": "Sort by: {{option}}",
   "tryItOut": "Try it out!",
   "learnMore": "Learn more",

components/project/project-list.tsx

@@ -8,13 +8,12 @@ import { cva } from "class-variance-authority"
 
 import { LangProps } from "@/types/common"
 import {
-  ProjectCategories,
-  ProjectCategory,
-  ProjectCategoryLabelMapping,
+  ProjectInterface,
   ProjectSection,
-  ProjectSectionDescriptionMapping,
   ProjectSectionLabelMapping,
   ProjectSections,
+  ProjectStatus,
+  ProjectStatusDescriptionMapping,
 } from "@/lib/types"
 import { cn } from "@/lib/utils"
 import { useTranslation } from "@/app/i18n/client"
@@ -43,6 +42,8 @@ const NoResults = ({ lang }: LangProps["params"]) => {
   )
 }
 
+const ProjectStatusOrderList = ["active", "maintained", "inactive"]
+
 export const ProjectList = ({ lang }: LangProps["params"]) => {
   const { t } = useTranslation(lang, "resources-page")
   const SCROLL_OFFSET = -400
@@ -50,7 +51,7 @@ export const ProjectList = ({ lang }: LangProps["params"]) => {
   const [isManualScroll, setIsManualScroll] = useState(false)
   const [isMounted, setIsMounted] = useState(false)
 
-  const { projects, currentCategory } = useProjectFiltersState((state) => state)
+  const { projects } = useProjectFiltersState((state) => state)
 
   const noItems = projects?.length === 0
 
@@ -117,56 +118,37 @@ export const ProjectList = ({ lang }: LangProps["params"]) => {
 
   if (noItems) return <NoResults lang={lang} />
 
-  console.log("ProjectCategories", ProjectCategories)
+  const projectsGroupByStatus = projects.reduce((acc, project) => {
+    acc[project.projectStatus] = [
+      ...(acc[project.projectStatus] || []),
+      project,
+    ]
+    return acc
+  }, {} as Record<ProjectStatus, ProjectInterface[]>)
 
   return (
     <div className="relative grid items-start justify-between grid-cols-1">
       <div className="flex flex-col">
-        {ProjectCategories.map((category: any, index: number) => {
-          const sectionProjects =
-            projects.filter(
-              (project) =>
-                project.category === category && project.section !== "archived"
-            ) ?? []
+        {ProjectStatusOrderList.map((status) => {
+          const projects = projectsGroupByStatus[status as ProjectStatus] ?? []
+          const description =
+            ProjectStatusDescriptionMapping?.[status as ProjectStatus]
 
-          const hasProjectsForSection = sectionProjects.length > 0
+          const hasProjects = projects?.length > 0
 
-          const sectionTitle =
-            ProjectCategoryLabelMapping[category as ProjectCategory]
+          if (!hasProjects) return null // no projects for this status, hide the section
 
-          const sectionDescription =
-            // @ts-ignore
-            ProjectSectionDescriptionMapping[category as any]
-
-          // todo: filter by project section
-          if (!hasProjectsForSection) return null
-
-          const showTitle = ["archived"].includes(category)
-
-
-          
-          
           return (
-            <div
-              key={category}
-              id={category}
-              data-section={category}
-              className="flex justify-between gap-10"
-            >
-              <div
-                className={cn(
-                  "flex w-full flex-col",
-                  hasProjectsForSection ? "gap-6 md:gap-10" : "gap-2",
-                  showTitle
-                    ? currentCategory == null && "pt-[120px]"
-                    : index > 0 && currentCategory == null
-                    ? "pt-10"
-                    : ""
-                )}
-              >
-               
+            <div data-section={status} className="flex justify-between gap-10">
+              <div className={cn("flex w-full flex-col gap-10 pt-10")}>
+                <div className="flex flex-col gap-6 overflow-hidden">
+                  <h3 className={cn(sectionTitleClass())}>{status}</h3>
+                  <span className="font-sans text-base italic text-tuatara-950">
+                    {description}
+                  </span>
+                </div>
                 <div className="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-x-6 md:gap-y-10 lg:grid-cols-4">
-                  {sectionProjects.map((project) => (
+                  {projects.map((project) => (
                     <ProjectCard
                       key={project?.id}
                       project={project}
@@ -181,33 +163,6 @@ export const ProjectList = ({ lang }: LangProps["params"]) => {
             </div>
           )
         })}
-
-        {currentCategory == undefined && (
-          <div data-section="archived" className="flex justify-between gap-10">
-            <div className={cn("flex w-full flex-col gap-10 pt-10")}>
-              <div className="flex flex-col gap-6 overflow-hidden">
-                <h3 className={cn(sectionTitleClass())}>Archived</h3>
-                <span className="font-sans text-base italic text-tuatara-950">
-                  {ProjectSectionDescriptionMapping.archived}
-                </span>
-              </div>
-              <div className="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-x-6 md:gap-y-10 lg:grid-cols-4">
-                {projects
-                  .filter((project) => project.section === "archived")
-                  .map((project) => (
-                    <ProjectCard
-                      key={project?.id}
-                      project={project}
-                      lang={lang}
-                      showBanner
-                      showLinks
-                      border
-                    />
-                  ))}
-              </div>
-            </div>
-          </div>
-        )}
       </div>
 
       <div id="sidebar" className="sticky hidden p-8 top-20 bg-white/30">

data/projects/ecip-halo2.ts

@@ -16,7 +16,7 @@ export const ECIPHalo2: ProjectInterface = {
   id: "ecip-halo2",
   image: "",
   category: ProjectCategory.DEVTOOLS,
-  projectStatus: ProjectStatus.ACTIVE,
+  projectStatus: ProjectStatus.MAINTAINED,
   section: "pse",
   content,
   imageAlt: "ECIP + Halo 2",

lib/types.ts

@@ -39,20 +39,18 @@ export const ProjectSectionLabelMapping: Record<ProjectSection, string> = {
   archived: "Archived",
 }
 
-export const ProjectSectionDescriptionMapping: Record<ProjectSection, string> =
-  {
-    pse: "",
-    grant: "",
-    collaboration: "",
-    archived:
-      "The projects in our archive are not currently being worked on by PSE, but we encourage everyone to check out their findings and continue experimentation!",
-  }
 export const ProjectStatusLabelMapping: Record<ProjectStatus, string> = {
   active: "Active",
   inactive: "Inactive",
   maintained: "Maintained",
 }
 
+export const ProjectStatusDescriptionMapping: Record<ProjectStatus, string> = {
+  active: "These projects are under active development by PSE-supported teams",
+  inactive: "The projects in our archive are not currently being worked on by PSE, but we encourage everyone to check out their findings and continue experimentation!",
+  maintained: "Maintenance projects are still being monitored for bug fixes, but are not under active feature development",
+}
+
 export interface AnnounceInterface {
   id: number
   type?: number