Merge pull request #231 from privacy-scaling-explorations/prpjects-by…

…-category

Projects by category

components/project/project-card.tsx

@@ -40,7 +40,7 @@ const tagCardVariants = cva(
   }
 )
 const projectCardVariants = cva(
-  "flex cursor-pointer flex-col overflow-hidden rounded-lg transition duration-200 ease-in border border-transparent hover:border-anakiwa-500",
+  "flex flex-col overflow-hidden rounded-lg transition duration-200 ease-in border border-transparent",
   {
     variants: {
       showLinks: {
@@ -77,9 +77,6 @@ export default function ProjectCard({
         "group",
         projectCardVariants({ showLinks, border, className })
       )}
-      onClick={() => {
-        router.push(`/projects/${id}`)
-      }}
     >
       {showBanner && (
         <div className="relative flex flex-col border-b border-black/10">
@@ -88,7 +85,7 @@ export default function ProjectCard({
             alt={`${name} banner`}
             width={1200}
             height={630}
-            className="min-h-[160px] w-full overflow-hidden rounded-t-lg border-none object-cover"
+            className="h-[160px] w-full overflow-hidden rounded-t-lg border-none object-cover"
           />
           {!image && (
             <span className="absolute w-full px-5 text-xl font-bold text-center text-black -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2">
@@ -99,7 +96,14 @@ export default function ProjectCard({
       )}
       <div className="flex flex-col justify-between h-full gap-8 p-4 bg-white rounded-b-lg">
         <div className="flex flex-col justify-start gap-2">
-          <h1 className="text-2xl font-bold leading-7 text-black">{name}</h1>
+          <h1
+            className="text-2xl font-bold leading-7 text-black duration-200 cursor-pointer hover:text-anakiwa-500"
+            onClick={() => {
+              router.push(`/projects/${id}`)
+            }}
+          >
+            {name}
+          </h1>
           {projectContent?.tldr && (
             <div className="flex flex-col h-24 gap-4">
               <p className="text-slate-900/80 line-clamp-4">

components/project/project-filters-bar.tsx

@@ -16,6 +16,8 @@ import { useDebounce } from "react-use"
 
 import { IThemeStatus, IThemesButton, LangProps } from "@/types/common"
 import {
+  ProjectCategories,
+  ProjectCategory,
   ProjectSectionLabelMapping,
   ProjectSections,
   ProjectStatus,
@@ -134,8 +136,8 @@ export default function ProjectFiltersBar({ lang }: LangProps["params"]) {
     queryString,
     activeFilters,
     onFilterProject,
-    currentSection,
-    setCurrentSection,
+    currentCategory,
+    setCurrentCategory,
   } = useProjectFiltersState((state) => state)
 
   useEffect(() => {
@@ -309,25 +311,25 @@ export default function ProjectFiltersBar({ lang }: LangProps["params"]) {
             <div
               className={cn(
                 "relative block px-2 py-1 text-sm font-medium uppercase transition-colors cursor-pointer hover:text-primary",
-                currentSection == null
+                currentCategory == null
                   ? "text-sky-400 after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-full after:bg-sky-400"
                   : ""
               )}
-              onClick={() => setCurrentSection(null)}
+              onClick={() => setCurrentCategory(null)}
             >
               All
             </div>
-            {ProjectSections.map((key) => {
+            {ProjectCategories.map((key) => {
               return (
                 <div
                   key={key}
                   className={cn(
                     "relative block px-2 py-1 text-sm font-medium uppercase transition-colors cursor-pointer hover:text-primary",
-                    currentSection === key
+                    currentCategory === key
                       ? "text-sky-400 after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-full after:bg-sky-400"
                       : ""
                   )}
-                  onClick={() => setCurrentSection(key)}
+                  onClick={() => setCurrentCategory(key as ProjectCategory)}
                 >
                   {key}
                 </div>

components/project/project-link.tsx

@@ -1,7 +1,5 @@
 "use client"
 
-import Image from "next/image"
-
 import { ProjectLinkWebsite } from "@/lib/types"
 
 import { ProjectLinkIconMap } from "./project-links"

components/project/project-list.tsx

@@ -8,6 +8,9 @@ import { cva } from "class-variance-authority"
 
 import { LangProps } from "@/types/common"
 import {
+  ProjectCategories,
+  ProjectCategory,
+  ProjectCategoryLabelMapping,
   ProjectSection,
   ProjectSectionDescriptionMapping,
   ProjectSectionLabelMapping,
@@ -47,7 +50,7 @@ export const ProjectList = ({ lang }: LangProps["params"]) => {
   const [isManualScroll, setIsManualScroll] = useState(false)
   const [isMounted, setIsMounted] = useState(false)
 
-  const { projects, currentSection } = useProjectFiltersState((state) => state)
+  const { projects, currentCategory } = useProjectFiltersState((state) => state)
 
   const noItems = projects?.length === 0
 
@@ -95,17 +98,17 @@ export const ProjectList = ({ lang }: LangProps["params"]) => {
   // loading state skeleton
   if (!isMounted) {
     return (
-      <div className="grid items-start justify-between w-4/5 grid-cols-1 gap-8 md:grid-cols-4 md:gap-10">
-        <div className="min-h-[420px] border border-gray-200 rounded-lg overflow-hidden">
+      <div className="grid items-start justify-between w-full grid-cols-1 gap-2 md:grid-cols-4 md:gap-6">
+        <div className="min-h-[380px] border border-gray-200 rounded-lg overflow-hidden">
           <div className="bg-gray-300 animate-pulse h-[180px] w-full"></div>
         </div>
-        <div className="min-h-[420px] border border-gray-200 rounded-lg overflow-hidden">
+        <div className="min-h-[380px] border border-gray-200 rounded-lg overflow-hidden">
           <div className="bg-gray-300 animate-pulse h-[180px] w-full"></div>
         </div>
-        <div className="min-h-[420px] border border-gray-200 rounded-lg overflow-hidden">
+        <div className="min-h-[380px] border border-gray-200 rounded-lg overflow-hidden">
           <div className="bg-gray-300 animate-pulse h-[180px] w-full"></div>
         </div>
-        <div className="min-h-[420px] border border-gray-200 rounded-lg overflow-hidden">
+        <div className="min-h-[380px] border border-gray-200 rounded-lg overflow-hidden">
           <div className="bg-gray-300 animate-pulse h-[180px] w-full"></div>
         </div>
       </div>
@@ -114,42 +117,46 @@ export const ProjectList = ({ lang }: LangProps["params"]) => {
 
   if (noItems) return <NoResults lang={lang} />
 
+  console.log("ProjectCategories", ProjectCategories)
+
   return (
     <div className="relative grid items-start justify-between grid-cols-1">
       <div className="flex flex-col">
-        {ProjectSections.map((section, index) => {
+        {ProjectCategories.map((category: any, index: number) => {
           const sectionProjects =
             projects.filter(
               (project) =>
-                project.section?.toLowerCase() === section?.toLowerCase()
+                project.category === category && project.section !== "archived"
             ) ?? []
 
           const hasProjectsForSection = sectionProjects.length > 0
 
           const sectionTitle =
-            ProjectSectionLabelMapping[section as ProjectSection]
+            ProjectCategoryLabelMapping[category as ProjectCategory]
+
           const sectionDescription =
-            ProjectSectionDescriptionMapping[section as ProjectSection]
+            // @ts-ignore
+            ProjectSectionDescriptionMapping[category as any]
 
           // todo: filter by project section
           if (!hasProjectsForSection) return null
 
-          const showTitle = ["archived"].includes(section)
+          const showTitle = ["archived"].includes(category)
 
           return (
             <div
-              key={section}
-              id={section}
-              data-section={section}
+              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
-                    ? currentSection == null && "pt-[120px]"
-                    : index > 0 && currentSection == null
+                    ? currentCategory == null && "pt-[120px]"
+                    : index > 0 && currentCategory == null
                     ? "pt-10"
                     : ""
                 )}
@@ -178,6 +185,33 @@ 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">

components/project/project-result-bar.tsx

@@ -13,7 +13,7 @@ import { useTranslation } from "@/app/i18n/client"
 import { CategoryTag } from "../ui/categoryTag"
 import { Dropdown } from "../ui/dropdown"
 
-const labelClass = "h-5 text-xs text-base md:h-6 text-slate-900/70 md:text-lg"
+const labelClass = "h-5 text-xs text-base md:h-6 text-slate-900/70 md:text-sm"
 
 export const ProjectResultBar = ({ lang }: LangProps["params"]) => {
   const { t } = useTranslation(lang, "common")

config/site.ts

@@ -30,5 +30,5 @@ export const siteConfig = {
   addGithubResource:
     "https://github.com/privacy-scaling-explorations/website-v2/blob/main/app/%5Blang%5D/content/resources.md",
   editProjectPage: (id: string, locale = "en") =>
-    `https://github.com/privacy-scaling-explorations/pse.dev/blob/main/app/i18n/locales/${locale}/projects/${id}.json`,
+    `https://github.com/privacy-scaling-explorations/pse.dev/blob/main/data/projects/${id}.ts`,
 }

data/projects/anon-aadhaar.ts

@@ -1,4 +1,9 @@
-import { ProjectContent, ProjectInterface, ProjectStatus } from "@/lib/types"
+import {
+  ProjectCategory,
+  ProjectContent,
+  ProjectInterface,
+  ProjectStatus,
+} from "@/lib/types"
 
 const content: ProjectContent = {
   en: {
@@ -7,25 +12,25 @@ const content: ProjectContent = {
 ### Overview
 
 Anon Aadhaar is a project that allows Aadhaar ID holders to prove their Indian residency, optionally revealing some aspects of their identity while hiding the others. The project provides ZK Circuits, SDK for Javascript and Solidity, a demo application, and integrates with the PCD framework for a better developer experience.
-    
+
 ### Features
 
 Anon Aadhaar is a zero knowledge protocol that let Aadhaar owners prove their identity in a privacy preserving way.
 Key features include:
 - **Selective Disclosure**:  If your app request to reveal one of the field from the identity the circuit will reveal it in its output. There only four fields that could be revealed (Age > 18, Gender, State, Pincode). Note that by default the Prover will reveal nothing from the ID.
-- **Nullifier**: Nullifier is a unique identifiers derived from data fields, used to prevent double-spending or duplicate proofs without revealing the actual data. 
-- **Timestamp**: The timestamp of the signature associated with the data is converted into a UNIX UTC format, enabling Timebased One Time Passord verification at the verifier level. 
-  
+- **Nullifier**: Nullifier is a unique identifiers derived from data fields, used to prevent double-spending or duplicate proofs without revealing the actual data.
+- **Timestamp**: The timestamp of the signature associated with the data is converted into a UNIX UTC format, enabling Timebased One Time Passord verification at the verifier level.
+
 The protocol is served through an SDK containing:
 - TypeScript Library: [@anon-aadhaar/core](https://www.npmjs.com/package/@anon-aadhaar/core)
 - Solidity Library: [@anon-aadhaar/contracts](https://www.npmjs.com/package/@anon-aadhaar/contracts)
 - React Library: [@anon-aadhaar/react](https://www.npmjs.com/package/@anon-aadhaar/react)
-  
+
 You can play with our **mobile prover**, which offer a faster proving time:
 - [Anon Aadhaar React Native](https://github.com/anon-aadhaar/anon-aadhaar-react-native)
 
 We developed a prover for [Digilocker](https://www.digilocker.gov.in/), that let you generate ZKPs from official documents stored in the Digolocker App, enabling use cases with proof of degrees, UPI, driver license and more.
-  
+
 ### Applications:
 - Quick Setup - [Website](https://anon-aadhaar-quick-setup.vercel.app/) | [GitHub](https://github.com/anon-aadhaar/quick-setup)
 - Boilerplate On-Chain Voting App - [Website](https://boilerplate.anon-aadhaar.pse.dev/) | [GitHub](https://github.com/anon-aadhaar/boilerplate)
@@ -36,6 +41,7 @@ We developed a prover for [Digilocker](https://www.digilocker.gov.in/), that let
 
 export const anonAadhaar: ProjectInterface = {
   id: "anon-aadhaar",
+  category: ProjectCategory.APPLICATION,
   section: "pse",
   content,
   projectStatus: ProjectStatus.ACTIVE,

data/projects/anon-klub.ts

@@ -1,4 +1,9 @@
-import { ProjectContent, ProjectInterface, ProjectStatus } from "@/lib/types"
+import {
+  ProjectCategory,
+  ProjectContent,
+  ProjectInterface,
+  ProjectStatus,
+} from "@/lib/types"
 
 const content: ProjectContent = {
   en: {
@@ -9,6 +14,7 @@ const content: ProjectContent = {
 
 export const anonKlub: ProjectInterface = {
   id: "anon-klub",
+  category: ProjectCategory.APPLICATION,
   section: "archived",
   content,
   projectStatus: ProjectStatus.INACTIVE,

data/projects/bandada.ts

@@ -1,13 +1,18 @@
-import { ProjectContent, ProjectInterface, ProjectStatus } from "@/lib/types"
+import {
+  ProjectCategory,
+  ProjectContent,
+  ProjectInterface,
+  ProjectStatus,
+} from "@/lib/types"
 
 const content: ProjectContent = {
   en: {
     tldr: "An open-source tool for managing privacy-preserving groups of anonymous individuals.",
     description: `### Overview
 
-[Bandada](https://bandada.pse.dev/) is a project designed to simplify the management of privacy-preserving groups. It is aimed at developers who want to build privacy-based applications and integrate anonymity sets, as well as non-developers working in DAOs, governments, international institutions, non-profit organizations, and associations that want to create and manage anonymous groups. 
+[Bandada](https://bandada.pse.dev/) is a project designed to simplify the management of privacy-preserving groups. It is aimed at developers who want to build privacy-based applications and integrate anonymity sets, as well as non-developers working in DAOs, governments, international institutions, non-profit organizations, and associations that want to create and manage anonymous groups.
 
-Bandada offers a plug-and-play infrastructure, reducing the time and complexity required for managing anonymity sets. It enables anonymous signaling, such as voting, messaging, logging in, or endorsing, in various use cases like private organizations, GitHub repository contributors, and groups of wallets holding a specific NFT. 
+Bandada offers a plug-and-play infrastructure, reducing the time and complexity required for managing anonymity sets. It enables anonymous signaling, such as voting, messaging, logging in, or endorsing, in various use cases like private organizations, GitHub repository contributors, and groups of wallets holding a specific NFT.
 
 ### Features
 
@@ -21,7 +26,7 @@ Bandada offers a plug-and-play infrastructure, reducing the time and complexity
 
 ### Background
 
-In Spanish, "Bandada" means "flock" or "group” of birds or animals moving together in a coordinated manner. Groups are an important concept when we speak about privacy and zero-knowledge technologies, they can be thought of as anonymity sets. Credentials are a way to establish necessary trust between a set of participants while letting users keep control over how their identities are stored and used. 
+In Spanish, "Bandada" means "flock" or "group” of birds or animals moving together in a coordinated manner. Groups are an important concept when we speak about privacy and zero-knowledge technologies, they can be thought of as anonymity sets. Credentials are a way to establish necessary trust between a set of participants while letting users keep control over how their identities are stored and used.
 
 Bandada allows you to create groups and establish trust within the participants by ensuring that everyone who joins the group must meet the credential requirements.
 
@@ -59,6 +64,7 @@ Bandada also provides a preset of credential validators that can be extended wit
 
 export const bandada: ProjectInterface = {
   id: "bandada",
+  category: ProjectCategory.APPLICATION,
   section: "pse",
   content,
   projectStatus: ProjectStatus.ACTIVE,

data/projects/channel-4.ts

@@ -1,4 +1,9 @@
-import { ProjectContent, ProjectInterface, ProjectStatus } from "@/lib/types"
+import {
+  ProjectCategory,
+  ProjectContent,
+  ProjectInterface,
+  ProjectStatus,
+} from "@/lib/types"
 
 const content: ProjectContent = {
   en: {
@@ -9,8 +14,9 @@ const content: ProjectContent = {
 
 export const channel4: ProjectInterface = {
   id: "channel-4",
-  section: "archived",
   content,
+  category: ProjectCategory.APPLICATION,
+  section: "archived",
   projectStatus: ProjectStatus.INACTIVE,
   image: "channel4.svg",
   name: "Channel 4",