about project section

kudos-ink · Oct 15, 2024 · 5a348f9 · 5a348f9
1 parent 9176733
commit 5a348f9
Show file tree

Hide file tree

Showing 11 changed files with 466 additions and 39 deletions.
diff --git a/app/projects/[slug]/_components/ProjectAbout.tsx b/app/projects/[slug]/_components/ProjectAbout.tsx
@@ -0,0 +1,29 @@
+import DOMPurify from "isomorphic-dompurify";
+import { marked } from "marked";
+
+interface IProjectAboutProps {
+  richText: string;
+}
+
+const ProjectAbout = ({ richText }: IProjectAboutProps) => {
+  const parsedRichText = DOMPurify.sanitize(
+    marked.parse(richText, { breaks: true }) as string,
+  );
+
+  return (
+    <>
+      <div className="flex-center gap-2 spread border-b-small pb-2">
+        <div className="text-tinted fs-sm">About the Project</div>
+      </div>
+      <div
+        id="description"
+        className="mdc mt-4 font-normal leading-snug md:text-lg"
+        dangerouslySetInnerHTML={{
+          __html: parsedRichText,
+        }}
+      />
+    </>
+  );
+};
+
+export default ProjectAbout;
diff --git a/app/projects/[slug]/_components/ProjectMetrics.tsx b/app/projects/[slug]/_components/ProjectMetrics.tsx
@@ -7,15 +7,15 @@ interface IProjectMetricsProps {
 }
 
 const ProjectMetrics = ({ metrics }: IProjectMetricsProps) => {
-  const { repositoriesTotal, suggestedTotal } = metrics;
+  const { repositoriesTotal, suggestedTotal, kudosTotal } = metrics;
 
   return (
     <div className="bg-gradient-to-r from-background to-background-200 to-80% py-4 px-6 border-[1px] rounded-md flex flex-col gap-6 h-full">
       <div className="font-semibold">Metrics</div>
       <div className="text-small flex flex-col gap-2">
         <MetricItem label="Unified Repositories" value={repositoriesTotal} />
         <MetricItem label="Suggested Issues" value={suggestedTotal} />
-        {/* <MetricItem label="Kudos Carnival Issues" value={kudosWeeksTotal} /> */}
+        <MetricItem label="Kudos Issues" value={kudosTotal} />
         {/* <MetricItem label="Rewards Issues" value={rewardsTotal} /> */}
       </div>
       {/* <div className="flex gap-4 mx-auto">

diff --git a/app/projects/[slug]/page.tsx b/app/projects/[slug]/page.tsx
@@ -11,6 +11,7 @@ import { fetchProjectInfo } from "@/lib/api/projects";
 import { buildCheckboxFilters } from "@/lib/filters";
 import { Issue, IssueQueryParams } from "@/types/issue";
 import { PaginatedCustomResponse } from "@/types/pagination";
+import ProjectAbout from "./_components/ProjectAbout";
 import ProjectHeader from "./_components/ProjectHeader";
 import ProjectInfos, { LayersMap } from "./_components/ProjectInfos";
 import ProjectMetrics from "./_components/ProjectMetrics";
@@ -68,10 +69,10 @@ export default async function SingleProjectPage({ params }: IProps) {
               <ProjectInfos
                 labels={labels}
                 infos={[
-                  {
-                    title: "Networks",
-                    items: infos?.attributes.networks ?? [],
-                  },
+                  // {
+                  //   title: "Networks",
+                  //   items: infos?.attributes.networks ?? [],
+                  // },
                   {
                     title: "Technologies",
                     items: infos?.attributes.technologies ?? [],
@@ -103,7 +104,7 @@ export default async function SingleProjectPage({ params }: IProps) {
       </section>
 
       {metrics.kudosTotal > 0 && (
-        <section className={"mt-20 mb-4 " + container()}>
+        <section className={"mt-20 " + container()}>
           <KudosWeeksBanner>
             ♨️ <strong className="capitalize">{infos.name}</strong> participates
             to <strong>Kudos Carnival</strong>! -{" "}
@@ -115,6 +116,10 @@ export default async function SingleProjectPage({ params }: IProps) {
         </section>
       )}
 
+      <section className={"mt-12 mb-4 " + container()}>
+        <ProjectAbout richText={infos.richText} />
+      </section>
+
       <DefaultFiltersProvider repositoryIds={repositoryIds}>
         <div className="flex flex-col">
           <Toolbar

diff --git a/components/table/issue-modal.tsx b/components/table/issue-modal.tsx
@@ -1,4 +1,4 @@
-import DOMPurify from "dompurify";
+import DOMPurify from "isomorphic-dompurify";
 import { marked } from "marked";
 import Link from "next/link";
 import { Button } from "@nextui-org/button";
@@ -72,7 +72,7 @@ export const IssueModal = ({ issue }: IIssueModalProps) => {
             </NuiLink>
             {parsedTitle && (
               <h3
-                className="font-semibold leading-tight capitalize mt-4"
+                className="mdc font-semibold leading-tight capitalize mt-4"
                 dangerouslySetInnerHTML={{ __html: parsedTitle }} // Safely render sanitized HTML
               />
             )}
@@ -85,7 +85,7 @@ export const IssueModal = ({ issue }: IIssueModalProps) => {
               className="w-full h-[200px] md:h-[320px] p-4 border border-gray-300 rounded-lg mb-4 shadow-sm"
             >
               <div
-                id="issue-description"
+                className="mdc"
                 dangerouslySetInnerHTML={{ __html: parsedDescription }}
               />
             </ScrollShadow>

diff --git a/components/table/row.tsx b/components/table/row.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { useState, useRef, useEffect, useMemo } from "react";
 import { marked } from "marked";
-import DOMPurify from "dompurify";
+import DOMPurify from "isomorphic-dompurify";
 import { usePathname, useRouter } from "next/navigation";
 import Link from "next/link";
 import { Button } from "@nextui-org/button";
@@ -119,7 +119,7 @@ export const Content = ({
       </span>
       <div className="w-fit text-base flex gap-1 flex-grow relative">
         <h3
-          className="font-semibold max-w-48 sm:max-w-none leading-tight line-clamp-2 capitalize hover:text-primary hover:underline"
+          className="mdc font-semibold max-w-48 sm:max-w-none leading-tight line-clamp-2 capitalize hover:text-primary hover:underline"
           dangerouslySetInnerHTML={{ __html: parsedTitle }} // Safely render sanitized HTML
         />
         {isCertified && (

diff --git a/data/filters.ts b/data/filters.ts
@@ -12,6 +12,8 @@ export const GOOD_FIRST_ISSUE_LABELS = [
   "good first issue :baby:",
   "C1-mentor",
   "D0-easy",
+  "Q1 - Easy",
+  "C-simple",
 ];
 
 export const KUDOS_ISSUE_LABELS = ["kudos"];

diff --git a/package.json b/package.json
@@ -39,12 +39,12 @@
     "autoprefixer": "^10.4.20",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
-    "dompurify": "^3.1.7",
     "edge-csrf": "^1.0.9",
     "eslint": "8.56.0",
     "eslint-config-next": "14.2.3",
     "framer-motion": "^11.5.6",
     "is-email": "^1.0.2",
+    "isomorphic-dompurify": "^2.16.0",
     "marked": "^14.1.2",
     "next": "14.2.13",
     "next-themes": "^0.3.0",