Merge pull request #469 from HoomanDgtl/categories

fix: ecosystem
akash-network · Dec 21, 2024 · 4ba1f12 · 4ba1f12
2 parents 8ca0da0 + db3237b
commit 4ba1f12
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 109 deletions.
diff --git a/src/components/ecosystem-pages/categories-mobile.tsx b/src/components/ecosystem-pages/categories-mobile.tsx
@@ -15,7 +15,10 @@ const Categories = ({
   page: string;
   className?: string;
 }) => {
-  console.log(page);
+  const sortedTags = [
+    ...tags.filter((tag: string) => tag.toLowerCase().includes("ai")),
+    ...tags.filter((tag: string) => !tag.toLowerCase().includes("ai")),
+  ];
 
   return (
     <Menu
@@ -76,7 +79,7 @@ const Categories = ({
               </Menu.Item>
             )}
 
-            {tags?.map((tag: string) => (
+            {sortedTags?.map((tag: string) => (
               <Menu.Item key={tag}>
                 {({ active }) => (
                   <a
@@ -88,9 +91,7 @@ const Categories = ({
                       "block px-4 py-2 text-sm",
                     )}
                   >
-                    {tag === "ai & ml"
-                      ? "AI & ML"
-                      : tag.charAt(0).toUpperCase() + tag.slice(1)}
+                    {tag}
                   </a>
                 )}
               </Menu.Item>

diff --git a/src/components/ecosystem-pages/categories.astro b/src/components/ecosystem-pages/categories.astro
@@ -1,97 +1,86 @@
 ---
 import { ArrowUpCircle } from "lucide-react";
 import ButtonLink from "../ui/button-link.astro";
-const astroUrl = Astro.url;
-type Props = {
+
+interface Props {
   tags: string[];
-};
-const pathName = astroUrl.pathname.split("/");
-const { tags } = Astro.props;
+}
 
-const normalizedTags = [...new Set(tags.map((tag) => tag.toLowerCase()))];
+const { tags } = Astro.props;
+const astroUrl = Astro.url;
+const pathName = astroUrl.pathname.split("/");
+const isDeployedOnAkash = pathName.includes("deployed-on-akash");
+const currentCategory = decodeURIComponent(astroUrl?.pathname?.split("/")?.[3]);
 
-const aiMlTag = normalizedTags?.find((tag) => tag === "ai & ml")
-  ? ["ai & ml"]
-  : [];
 const sortedTags = [
-  ...aiMlTag,
-  ...normalizedTags
-    .filter((tag) => tag !== "ai & ml")
-    .sort((a, b) => a.localeCompare(b)),
+  ...tags.filter((tag) => tag.toLowerCase().includes("ai")),
+  ...tags.filter((tag) => !tag.toLowerCase().includes("ai")),
 ];
 
-const displayTag = (tag: string) => {
-  const specialCases: Record<string, string> = {
-    dao: "DAO",
-    "pos validator": "PoS Validator",
-    "ai & ml": "AI & ML",
-  };
+const getCategoryLink = (category?: string) => {
+  return `/ecosystem/${pathName[2]}${category ? `/${category}` : "/"}`;
+};
 
-  return (
-    specialCases[tag.toLowerCase()] ||
-    tag
-      .split(" ")
-      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-      .join(" ")
-  );
+const isActiveLink = (path: string) => {
+  return path === astroUrl.pathname ? "text-primary" : "text-para";
 };
 ---
 
-<div class="hidden w-[200px] flex-shrink-0 pt-5 lg:block">
-  <p class="text-sm font-medium leading-[20px] text-cardGray">Categories</p>
+<aside class="hidden w-[200px] flex-shrink-0 pt-5 lg:block">
+  <header>
+    <h2 class="text-sm font-medium leading-[20px] text-cardGray">Categories</h2>
+    <div class="border-b pb-2"></div>
+  </header>
 
-  <div class="border-b pb-2"></div>
-
-  <div class="mt-4 flex flex-col gap-y-4">
+  <nav class="mt-4 flex flex-col gap-y-4">
     <a
-      href={`/ecosystem/${pathName?.[2]}/`}
-      class={`inline-flex cursor-pointer text-base   hover:text-primary ${
-        astroUrl.pathname === `/ecosystem/${pathName?.[2]}/`
-          ? "text-primary"
-          : "text-para"
-      }`}
+      href={getCategoryLink()}
+      class:list={[
+        "inline-flex cursor-pointer text-base hover:text-primary",
+        isActiveLink(getCategoryLink()),
+      ]}
     >
       All
     </a>
+
     {
-      astroUrl.pathname.includes("deployed-on-akash") && (
+      isDeployedOnAkash && (
         <a
-          href={`/ecosystem/${pathName?.[2]}/showcase/`}
-          class={`inline-flex cursor-pointer text-base  hover:text-primary ${
+          href={getCategoryLink("showcase")}
+          class:list={[
+            "inline-flex cursor-pointer text-base hover:text-primary",
             astroUrl.pathname?.includes("showcase")
               ? "text-primary"
-              : "text-para"
-          }`}
+              : "text-para",
+          ]}
         >
           Showcase
         </a>
       )
     }
+
     {
       sortedTags.map((tag: string) => (
         <a
-          href={`/ecosystem/${pathName?.[2]}/${tag.toLowerCase()}`}
-          class={`inline-flex cursor-pointer text-base   hover:text-primary ${
-            astroUrl?.pathname
-              ?.split("/")?.[3]
-              ?.split("%20")
-              ?.join(" ")
-              ?.toLowerCase() === tag?.toLowerCase()
+          href={getCategoryLink(tag.toLowerCase())}
+          class:list={[
+            "inline-flex cursor-pointer text-base hover:text-primary",
+            currentCategory === tag.toLowerCase()
               ? "text-primary"
-              : "text-para"
-          }`}
+              : "text-para",
+          ]}
         >
-          {displayTag(tag)}
+          {tag}
         </a>
       ))
     }
-  </div>
+  </nav>
 
   {
-    pathName.includes("deployed-on-akash") && (
-      <div class="">
-        <div class="my-8 border-b pb-2" />
-        <p class="text-sm font-medium text-para">
+    isDeployedOnAkash && (
+      <section class="mt-10">
+        <div class="border-b" />
+        <p class="pt-8 text-sm font-medium text-para">
           Are you using Akash Network for your project?
         </p>
 
@@ -103,7 +92,7 @@ const displayTag = (tag: string) => {
           <ArrowUpCircle className="w-4 rotate-45" />
           <span class="ml-1 line-clamp-1 text-left">Add to Ecosystem</span>
         </ButtonLink>
-      </div>
+      </section>
     )
   }
-</div>
+</aside>
diff --git a/src/pages/ecosystem/deployed-on-akash/[tag]/index.astro b/src/pages/ecosystem/deployed-on-akash/[tag]/index.astro
@@ -1,8 +1,7 @@
 ---
 import EcosystemPage from "@/components/ecosystem-pages/ecosystem-page.astro";
 import { getPriorityIndex } from "@/utils/sequences/deployedOnAkash";
-import { getCollection, type CollectionEntry } from "astro:content";
-type Project = CollectionEntry<"Ecosystem_Page">;
+import { getCollection } from "astro:content";
 
 export async function getStaticPaths() {
   const projects = (await getCollection("Ecosystem_Page"))
@@ -17,41 +16,28 @@ export async function getStaticPaths() {
       );
     });
 
-  const tags: string[] = [];
+  const tags = Array.from(
+    new Set(projects.flatMap((project) => project.data.tags)),
+  );
 
-  projects.forEach((project) => {
-    project.data.tags.forEach((tag: string) => {
-      const lowerCasedTag = tag.toLowerCase();
-      if (!tags.includes(lowerCasedTag)) {
-        tags.push(lowerCasedTag);
-      }
-    });
-  });
-
-  return tags.flatMap((tag) => {
-    const lowercasedTag = tag.toLowerCase();
+  return tags.map((tag) => {
     const filteredPosts = projects.filter((post) =>
-      post.data.tags.some((tag: string) => tag.toLowerCase() === lowercasedTag),
+      post.data.tags.includes(tag),
     );
 
     return {
-      params: { tag },
-
-      props: { currentTag: tag, tags: tags, page: filteredPosts },
+      params: { tag: tag.toLowerCase() },
+      props: {
+        currentTag: tag,
+        tags: tags,
+        page: filteredPosts,
+      },
     };
   });
 }
 
 const { page, currentTag, tags } = Astro.props;
 const astroUrl = Astro.url;
-const pathName = astroUrl.pathname.split("/");
-const formattedTag = currentTag.charAt(0).toUpperCase() + currentTag.slice(1);
 ---
 
-<EcosystemPage
-  title={currentTag === "ai & ml"
-    ? "AI & ML"
-    : currentTag.charAt(0).toUpperCase() + currentTag.slice(1)}
-  tags={tags}
-  projects={page}
-/>
+<EcosystemPage title={currentTag} tags={tags} projects={page} />
diff --git a/src/pages/ecosystem/deployed-on-akash/index.astro b/src/pages/ecosystem/deployed-on-akash/index.astro
@@ -35,17 +35,9 @@ const nonPriorityProjects = (await getCollection("Ecosystem_Page"))
 
 const projects = [...priorityProjects, ...nonPriorityProjects];
 
-const tags: string[] = [];
-
-projects.forEach((project) => {
-  project.data.tags.forEach((tag: any) => {
-    const lowerCasedTag = tag.toLowerCase();
-
-    if (!tags.includes(lowerCasedTag)) {
-      tags.push(lowerCasedTag);
-    }
-  });
-});
+const tags = Array.from(
+  new Set(projects.flatMap((project) => project.data.tags)),
+);
 ---
 
 <EcosystemPage projects={projects} tags={tags} />
diff --git a/src/pages/ecosystem/deployed-on-akash/showcase.astro b/src/pages/ecosystem/deployed-on-akash/showcase.astro
@@ -27,13 +27,7 @@ const projects = sortProjects(
   data.filter((project) => project.data.showcase === true),
 );
 
-const tags: string[] = Array.from(
-  new Set(
-    cards.flatMap((project) =>
-      project.data.tags.map((tag) => tag.toLowerCase()),
-    ),
-  ),
-);
+const tags = Array.from(new Set(cards.flatMap((project) => project.data.tags)));
 ---
 
 <EcosystemPage tags={tags} projects={projects} title="Showcase" />