Merge pull request #624 from dzcode-io/global-search

Global Search
dzcode-io · Dec 24, 2024 · 58ea3c9 · 58ea3c9
2 parents 9988863 + 3af1e4e
commit 58ea3c9
Show file tree

Hide file tree

Showing 14 changed files with 551 additions and 198 deletions.
diff --git a/api/src/app/endpoints.ts b/api/src/app/endpoints.ts
@@ -12,6 +12,7 @@ import {
   GetProjectsForSitemapResponse,
   GetProjectsResponse,
 } from "src/project/types";
+import { SearchResponse } from "src/search/types";
 
 // ts-prune-ignore-next
 export interface Endpoints {
@@ -50,4 +51,8 @@ export interface Endpoints {
   "api:MileStones/dzcode": {
     response: GetMilestonesResponse;
   };
+  "api:Search": {
+    response: SearchResponse;
+    query: [["query", string], ["limit", number]];
+  };
 }
diff --git a/api/src/search/service.ts b/api/src/search/service.ts
@@ -34,7 +34,7 @@ export class SearchService {
           indexUid: "contribution",
           q,
           limit,
-          attributesToRetrieve: ["id", "title", "type", "activityCount"],
+          attributesToRetrieve: ["id", "title", "type", "activityCount", "url"],
         },
         { indexUid: "contributor", q, limit, attributesToRetrieve: ["id", "name", "avatarUrl"] },
       ],

diff --git a/web/src/_entry/app.tsx b/web/src/_entry/app.tsx
@@ -9,6 +9,7 @@ import { TopBar, TopBarProps } from "src/components/top-bar";
 import { StoreProvider } from "src/redux/store";
 import { getInitialLanguageCode } from "src/utils/website-language";
 import React from "react";
+import { Search } from "src/components/search";
 
 let routes: Array<
   RouteProps & {
@@ -119,6 +120,7 @@ const App = () => {
   return (
     <>
       <div className="flex flex-col min-h-screen">
+        <Search />
         <TopBar version={window.bundleInfo.version} links={topBarLinks} />
         <Routes>
           {routes.map((route) => {

diff --git a/web/src/components/contribution-card.tsx b/web/src/components/contribution-card.tsx
@@ -0,0 +1,72 @@
+import { GetContributionsResponse } from "@dzcode.io/api/dist/contribution/types";
+import React from "react";
+import { Link } from "src/components/link";
+import { useLocale } from "src/components/locale";
+import { Markdown } from "src/components/markdown";
+import { getElapsedTime } from "src/utils/elapsed-time";
+
+export function ContributionCard({
+  contribution,
+  compact = false,
+}: {
+  contribution: GetContributionsResponse["contributions"][number];
+  compact?: boolean;
+}) {
+  const { localize } = useLocale();
+
+  return (
+    <div dir="ltr" className="card card-compact bg-base-300 flex-auto w-full max-w-xs sm:max-w-sm">
+      <div className="card-body markdown">
+        <div className="card-body">
+          <h2 className="card-title">
+            <Markdown content={contribution.title} />
+          </h2>
+          <span className="flex-1" />
+          {!compact && (
+            <>
+              <span className="card-normal">{contribution.repository.project.name}</span>
+              <span className="card-normal">
+                {contribution.repository.owner}/{contribution.repository.name}
+              </span>
+            </>
+          )}
+          <div className="card-actions justify-end mt-4 gap-4">
+            {!compact && (
+              <img className="w-6 h-6 rounded-full" src={contribution.contributor.avatarUrl} />
+            )}
+            <div className="flex-1" />
+            {contribution.activityCount > 0 && (
+              <div className="flex flex-row">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  strokeWidth={1.5}
+                  stroke="currentColor"
+                  className="size-6"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155"
+                  />
+                </svg>
+                <span className="">{contribution.activityCount}</span>
+              </div>
+            )}
+            {!compact && (
+              <div className="flex flex-row">
+                {getElapsedTime(contribution.updatedAt, localize("elapsed-time-suffixes"))}
+              </div>
+            )}
+            <Link href={contribution.url} className="link">
+              {contribution.type === "ISSUE"
+                ? localize("contribute-read-issue")
+                : localize("contribute-review-changes")}
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/components/contributor-card.tsx b/web/src/components/contributor-card.tsx
@@ -0,0 +1,83 @@
+import React from "react";
+import { Link } from "src/components/link";
+import { getContributorURL } from "src/utils/contributor";
+import { GetContributorsResponse } from "@dzcode.io/api/dist/contributor/types";
+
+export function ContributorCard({
+  contributor,
+  compact = false,
+  onClick,
+}: {
+  contributor: GetContributorsResponse["contributors"][number];
+  compact?: boolean;
+  onClick?: () => void;
+}) {
+  return (
+    <Link
+      className="card bg-base-300 w-full sm:max-w-52 rounded-lg flex flex-row border-base-200 border-2 overflow-hidden"
+      href={getContributorURL(contributor)}
+      // TODO-OB: there's a bug here: when passing onClick to Link, the link no longer work as a SPA link, and instead causes a full reload of the page
+      onClick={onClick}
+    >
+      <img
+        src={contributor.avatarUrl}
+        alt={contributor.name}
+        className="flex sm:hidden rounded-none size-28"
+      />
+      <div className="flex-1 flex flex-col items-center">
+        <div className="flex-1 flex flex-row sm:flex-col justify-start sm:justify-center items-center p-4 gap-4 w-full">
+          <img
+            src={contributor.avatarUrl}
+            alt={contributor.name}
+            className="hidden sm:flex rounded-full size-20"
+          />
+          <span className="card-title break-all">{contributor.name}</span>
+        </div>
+        {!compact && (
+          <div className="flex flex-row gap-4 w-full justify-around bg-base-200 text-gray-500 p-2">
+            <div className="flex flex-row gap-2">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+                className="size-6"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z"
+                />
+              </svg>
+              {contributor.totalContributionScore}
+            </div>
+            <div className="divider divider-horizontal" />
+            <div className="flex flex-row gap-2">
+              {contributor.totalRepositoryCount}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+                className="size-6"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 3.75 9.375v-4.5ZM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 0 1-1.125-1.125v-4.5ZM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 13.5 9.375v-4.5Z"
+                />
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M6.75 6.75h.75v.75h-.75v-.75ZM6.75 16.5h.75v.75h-.75v-.75ZM16.5 6.75h.75v.75h-.75v-.75ZM13.5 13.5h.75v.75h-.75v-.75ZM13.5 19.5h.75v.75h-.75v-.75ZM19.5 13.5h.75v.75h-.75v-.75ZM19.5 19.5h.75v.75h-.75v-.75ZM16.5 16.5h.75v.75h-.75v-.75Z"
+                />
+              </svg>
+            </div>
+          </div>
+        )}
+      </div>
+    </Link>
+  );
+}
diff --git a/web/src/components/locale/dictionary.ts b/web/src/components/locale/dictionary.ts
@@ -16,6 +16,7 @@ export const dictionary = {
   "navbar-section-projects": { en: "Projects", ar: "مشاريع" },
   "navbar-section-articles": { en: "Articles", ar: "مقالات" },
   "navbar-section-faq": { en: "FAQ", ar: "أسئلة / أجوبة" },
+  "navbar-section-search": { en: "Search...", ar: "بحث..." },
 
   "footer-category-title-helpful-links": {
     en: "Helpful Links",
@@ -433,4 +434,24 @@ Besides the open tasks on [/Contribute](/Contribute) page, you can also contribu
     en: "Algeria Codes",
     ar: "الجزائر تبرمج",
   },
+  "search-contributions": {
+    en: "Contributions",
+    ar: "مساهمات",
+  },
+  "search-contributors": {
+    en: "Contributors",
+    ar: "مساهمين",
+  },
+  "search-projects": {
+    en: "Projects",
+    ar: "مشاريع",
+  },
+  "search-type-to-search": {
+    en: "Type to search...",
+    ar: "اكتب للبحث...",
+  },
+  "search-no-results-found": {
+    en: "No results found",
+    ar: "لم يتم العثور على نتائج",
+  },
 } as const;
diff --git a/web/src/components/project-card.tsx b/web/src/components/project-card.tsx
@@ -0,0 +1,85 @@
+import { GetProjectsResponse } from "@dzcode.io/api/dist/project/types";
+import React from "react";
+import { Link } from "src/components/link";
+import { getProjectURL } from "src/utils/project";
+
+export function ProjectCard({
+  project,
+  compact = false,
+  onClick,
+}: {
+  project: GetProjectsResponse["projects"][number];
+  compact?: boolean;
+  onClick?: () => void;
+}) {
+  return (
+    <Link
+      href={getProjectURL(project)}
+      dir="ltr"
+      className="bg-base-300 w-full max-w-xs sm:max-w-sm flex flex-col rounded-lg border-base-200 border-2 overflow-hidden"
+      onClick={onClick}
+    >
+      <h2 className="card-title p-4">{project.name}</h2>
+      {!compact && (
+        <>
+          <div className="flex-1" />
+          <div className="flex flex-row gap-4 justify-around bg-base-200 text-gray-500 p-2">
+            <div className="flex flex-row gap-2">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+                className="size-6"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"
+                />
+              </svg>
+              {project.totalRepoStars}
+            </div>
+            <div className="divider divider-horizontal" />
+            <div className="flex flex-row gap-2">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+                className="size-6"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z"
+                />
+              </svg>
+              {project.totalRepoScore}
+            </div>
+            <div className="divider divider-horizontal" />
+            <div className="flex flex-row gap-2">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+                className="size-6"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"
+                />
+              </svg>
+              {project.totalRepoContributorCount}
+            </div>
+          </div>
+        </>
+      )}
+    </Link>
+  );
+}