Merge pull request #86 from adastackio/os_builders

Add Documentation page, improve and reorganize many pages

.gitignore

@@ -8,7 +8,5 @@ pnpm-lock.yaml
 .env
 .vercel
 .env*.local
-.aider*
-data/
 .vscode/settings.json
 

components/LibraryInfo.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import RepoShieldIo from "./badges/shield_io_badges/RepoShieldIo";
+import LanguageShieldIo from "./badges/shield_io_badges/LanguageShieldIo";
+import LatestCommitShieldIo from "./badges/shield_io_badges/LatestCommitShieldIo";
+import DiscordShieldIo from "./badges/shield_io_badges/DiscordShieldIo";
+import DocsShieldIo from "./badges/shield_io_badges/DocsShieldIo";
+
+interface DiscordInfo {
+  discordInviteURL: string;
+  DiscordServerName: string;
+}
+
+interface LibraryInfoProps {
+  repoURL: string;
+  language: string;
+  docsURL: string;
+  discord: DiscordInfo[];
+}
+
+const LibraryInfo: React.FC<LibraryInfoProps> = ({
+  repoURL,
+  language,
+  discord,
+  docsURL,
+}) => {
+  return (
+    <div className="code-library-info-bar flex gap-2 items-center pb-5">
+      {language && (
+        <LanguageShieldIo language={language} isColorChanging={false} />
+      )}
+      {docsURL && <DocsShieldIo docsURL={docsURL} />}
+
+      {discord &&
+        discord.length > 0 &&
+        discord.map((info, index) => (
+          <DiscordShieldIo
+            key={index}
+            discordInviteURL={info.discordInviteURL}
+            DiscordServerName={info.DiscordServerName}
+          />
+        ))}
+      {repoURL && <LatestCommitShieldIo repoURL={repoURL} />}
+      {repoURL && <RepoShieldIo repoURL={repoURL} />}
+    </div>
+  );
+};
+
+export default LibraryInfo;

components/badges/shield_io_badges/DiscordShieldIo.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+interface DiscordShieldIoProps {
+  discordInviteURL?: string;
+  DiscordServerName?: string;
+}
+
+const DiscordShieldIo: React.FC<DiscordShieldIoProps> = ({
+  discordInviteURL,
+  DiscordServerName = "Discord",
+}) => {
+  if (!discordInviteURL) {
+    return null;
+  }
+
+  // Replace dashes with HTML entity for en dash
+  const formattedChannelName = DiscordServerName.replace(/-/g, "–");
+
+  return (
+    <a
+      href={discordInviteURL}
+      className="inline-block"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <img
+        className="shield_io_badge badge-io-custom-shading shields_io_repo_badge"
+        alt={`${DiscordServerName} Discord`}
+        src={`https://img.shields.io/badge/${encodeURIComponent(
+          formattedChannelName
+        )}-ffffff?style=flat&logo=discord&logoColor=7289DA&labelColor=dfe8f0`}
+      />
+    </a>
+  );
+};
+
+export default DiscordShieldIo;

components/badges/shield_io_badges/DocsShieldIo.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+interface DocsShieldIoProps {
+  docsURL: string;
+}
+
+const DocsShieldIo = ({ docsURL }: DocsShieldIoProps) => {
+  return (
+    <a
+      className="inline-block"
+      target="_blank"
+      rel="noopener noreferrer"
+      href={docsURL}
+    >
+      <img
+        src="https://img.shields.io/badge/-Docs-white?logo=readme&labelColor=white&logoColor=61a6fa"
+        className="shield_io_badge badge-io-custom-shading shields_io_repo_badge"
+        alt="Latest Commit"
+      />
+    </a>
+  );
+};
+
+export default DocsShieldIo;

components/badges/shield_io_badges/LatestCommitBadgeIo.tsx → components/badges/shield_io_badges/LatestCommitShieldIo.tsx

@@ -1,29 +1,32 @@
 import React from "react";
 
-interface LatestCommitBadgeIoProps {
+interface LatestCommitShieldIoProps {
   repoURL: string;
 }
 
-const LatestCommitBadgeIo = ({ repoURL }: LatestCommitBadgeIoProps) => {
+const LatestCommitShieldIo = ({ repoURL }: LatestCommitShieldIoProps) => {
   const url = new URL(repoURL);
   const cleanPath = url.pathname.replace(/\/+$/, "");
   const pathSegments = cleanPath.split("/").filter(Boolean);
   const [owner, repo] = pathSegments;
 
   const isGitLab = url.hostname === "gitlab.com";
 
-
   const latestURL = isGitLab
     ? `${url.origin}/${owner}/${repo}/-/commits/`
     : `${url.origin}/${owner}/${repo}/commits/`;
 
-
   const shieldUrl = isGitLab
-    ? `https://img.shields.io/gitlab/last-commit/${owner}/${repo}?color=dfe8f0&labelColor=white`
-    : `https://img.shields.io/github/last-commit/${owner}/${repo}?color=dfe8f0&labelColor=white`;
+    ? `https://img.shields.io/gitlab/last-commit/${owner}/${repo}?color=white&labelColor=dfe8f0`
+    : `https://img.shields.io/github/last-commit/${owner}/${repo}?color=white&labelColor=dfe8f0`;
 
   return (
-    <a className="inline-block" href={latestURL}>
+    <a
+      className="inline-block"
+      target="_blank"
+      rel="noopener noreferrer"
+      href={latestURL}
+    >
       <img
         src={shieldUrl}
         className="shield_io_badge badge-io-custom-shading shields_io_repo_badge"
@@ -33,4 +36,4 @@ const LatestCommitBadgeIo = ({ repoURL }: LatestCommitBadgeIoProps) => {
   );
 };
 
-export default LatestCommitBadgeIo;
+export default LatestCommitShieldIo;

components/badges/shield_io_badges/RepoShieldIo.tsx

@@ -17,7 +17,7 @@ const RepoShieldIo = ({ repoURL }: RepoShieldIoProps) => {
     : `https://img.shields.io/github/stars/${owner}/${repo}?style=social&label=GitHub`;
 
   return (
-    <a className="inline-block" href={repoURL}>
+    <a className="inline-block"  target="_blank" rel="noopener noreferrer" href={repoURL}>
       <img
         src={shieldUrl}
         className="shield_io_badge shields_io_repo_badge"

components/tables/OpenSourceBuildersTable.jsx

@@ -285,7 +285,7 @@ const OpenSourceBuildersTable = ({ data }) => {
             "Organization",
             "dApp",
             "Audits",
-            "Dev Company",
+            "dev_company",
             "Tools",
           ];
 
@@ -319,23 +319,23 @@ const OpenSourceBuildersTable = ({ data }) => {
       filters: [
         {
           text: "Organization",
-          value: "Organization",
+          value: "organization",
         },
         {
           text: "Dapp",
-          value: "dApp",
+          value: "dapp",
         },
         {
           text: "Dev Company",
-          value: "Dev Company",
+          value: "dev_company",
         },
         {
           text: "Audits",
-          value: "Audits",
+          value: "audits",
         },
         {
           text: "Tools",
-          value: "Tools",
+          value: "tools",
         },
       ],
       filterMode: "tree",
@@ -369,7 +369,10 @@ const OpenSourceBuildersTable = ({ data }) => {
                 }
                 return (
                   <>
-                    <CategoryTag color={color} category={tag.toUpperCase()} />
+                    <CategoryTag
+                      color={color}
+                      category={tag.replace(/_/g, " ").toUpperCase()}
+                    />
                   </>
                 );
               })}