contribution updated

content/guide/contribute/plura.mdx

@@ -6,6 +6,7 @@ toc:
   visible: true
 date: 2024-01-06
 github: https://github.com/plura-ai
+contributors: https://api.github.com/repos/plura-ai/docs/contributors
 ---
 
 ## Quick Start
@@ -21,6 +22,7 @@ Clone the repository
 git clone https://github.com/rudrodip/mext15.git my-docs
 cd my-docs
 ```
+
 </Step>
 
 <Step>
@@ -29,6 +31,7 @@ Install dependencies
 ```bash
 bun install
 ```
+
 </Step>
 
 <Step>
@@ -37,6 +40,7 @@ Start the development server
 ```bash
 bun run dev
 ```
+
 </Step>
 
 </Steps>
@@ -86,6 +90,7 @@ You can customize the site by editing `src/config/site.config.ts`. This includes
 ## Next Steps
 
 You can start adding your own content by:
+
 1. Adding MDX files in the `content/guide` directory
 2. Customizing the theme in `tailwind.config.ts`
 3. Modifying site configuration in `src/config/site.config.ts`

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",
     "@radix-ui/react-accordion": "^1.2.2",
+    "@radix-ui/react-avatar": "^1.1.2",
     "@radix-ui/react-collapsible": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-dropdown-menu": "^2.1.4",
@@ -36,6 +37,7 @@
     "prettier": "^3.4.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-icons": "^5.4.0",
     "react-wrap-balancer": "^1.1.1",
     "remark": "^15.0.1",
     "tailwind-merge": "^2.5.5",

src/app/(routes)/guide/[[...slug]]/page.tsx

@@ -15,6 +15,7 @@ import { absoluteUrl, cn } from "@/lib/utils";
 import { MDXContentRenderer } from "@/components/mdx/mdx-content-renderer";
 import { DashboardTableOfContents } from "@/components/mdx/toc";
 import { guide } from "#site/content";
+import { ContributorsList } from "@/components/contributors/contributors";
 
 type DocPageProps = {
     slug: string[];
@@ -128,9 +129,16 @@ export default async function GuidePage({ params }: { params: Promise<DocPagePro
         </div>
       </div>
       <div className="hidden text-sm xl:block">
-        <div className="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] pt-4">
+        <div className="sticky top-10 -mt-8 h-[calc(100vh-3.5rem)] pt-4">
           {doc.toc.visible && (
-            <DashboardTableOfContents toc={doc.toc.content} github={doc.github} />
+            <>
+
+              <DashboardTableOfContents
+                toc={doc.toc.content}
+                github={doc.github}
+              />
+              <ContributorsList contributorUrl={doc.contributors} />
+            </>
           )}
         </div>
       </div>

src/components/contributors/contributors.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+import { Card, CardContent, CardTitle } from "@/components/ui/card";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { Button } from "../ui/button";
+import { Github, GithubIcon, Users, X } from "lucide-react";
+import { FaGithub } from "react-icons/fa";
+
+type Contributor = {
+  login: string;
+  avatar_url: string;
+  id: string;
+  type: string;
+  contributions: number;
+};
+
+export async function ContributorsList({
+  contributorUrl,
+}: {
+  contributorUrl: string;
+}) {
+  const response = await fetch(contributorUrl);
+  const users: Contributor[] = await response.json();
+  const contributors = users.filter(
+    (contributor) =>
+      contributor.type === "User" &&
+      !contributor.login.toLowerCase().includes("bot")
+  );
+
+  return (
+    <Card className="bg-transparent border-none shadow-none top-0 ">
+        <CardTitle className="flex gap-1">
+            <Users className="h-4 w-4 text-neutral-500" />
+            <span className="text-xs text-neutral-500">Contributors</span>
+        </CardTitle>
+      <CardContent className="p-2 bg-neutral-900 rounded-lg mt-2 ">
+        <div className="flex flex-wrap items-center gap-2">
+          {contributors.map((contributor) => (
+            <TooltipProvider key={contributor.id}>
+              <Tooltip>
+                <TooltipTrigger>
+                  <Avatar className="h-10 w-10 transition-transform hover:scale-110">
+                    <AvatarImage
+                      src={contributor.avatar_url}
+                      alt={contributor.login}
+                    />
+                    <AvatarFallback>
+                      <Skeleton className="h-full w-full rounded-full" />
+                    </AvatarFallback>
+                  </Avatar>
+                </TooltipTrigger>
+                <TooltipContent className="bg-transparent text-sm text-white">
+                  <ContributorBox {...contributor} />
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+const ContributorBox = (Contributor: Contributor) => {
+  return (
+    <Card className="">
+      <CardContent className="flex flex-col p-2">
+        <div className="flex flex-row items-center justify-start gap-2">
+          <div>
+            <Avatar>
+              <AvatarImage src={Contributor.avatar_url} />
+              <AvatarFallback>
+                <Skeleton className="h-24 w-24 rounded-full" />
+              </AvatarFallback>
+            </Avatar>
+          </div>
+          <span className="w-full flex-grow text-center ">{Contributor.login}</span>
+          {Contributor.type === "User" && (
+            <>
+              <a href={`https://github.com/${Contributor.login}`}>
+                <Button className="bg-neutral-800/60 w-7 h-8 hover:bg-neutral-700/30">
+                  <FaGithub className="w-4 h-4 fill-white" />
+                </Button>
+              </a>
+            </>
+          )}
+        </div>
+        <span className="text-sm text-neutral-500 p-2">
+          Total contributions{" "}
+          <p className="text-green-500 inline-flex">
+            {" "}+
+            {Contributor.contributions}!
+          </p>
+        </span>
+      </CardContent>
+    </Card>
+  );
+};

src/components/ui/avatar.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }

velite.config.ts

@@ -4,7 +4,7 @@ import rehypeKatex from "rehype-katex";
 import remarkMath from "remark-math";
 import remarkGfm from "remark-gfm";
 import rehypePrettyCode from "rehype-pretty-code";
-import { visit } from "unist-util-visit"
+import { visit } from "unist-util-visit";
 import { LineElement } from "rehype-pretty-code";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
 
@@ -13,7 +13,6 @@ const computedFields = <T extends { slug: string }>(data: T) => ({
   slugAsParams: data.slug.split("/").slice(1).join("/"),
 });
 
-
 export const guide = defineCollection({
   name: "Guide",
   pattern: "guide/**/*.mdx",
@@ -23,6 +22,7 @@ export const guide = defineCollection({
       title: s.string(),
       description: s.string(),
       github: s.string().optional(),
+      contributors: s.string(),
       published: s.boolean().default(false),
       date: s.coerce.date().default(new Date()),
       label: s.enum(["New", "Updated"]).optional(),
@@ -35,7 +35,7 @@ export const guide = defineCollection({
     .transform(computedFields),
 });
 
-export const plura =  defineCollection({
+export const plura = defineCollection({
   name: "Plura",
   pattern: "plura/**/*.mdx",
   schema: s
@@ -55,7 +55,7 @@ export const plura =  defineCollection({
     .transform(computedFields),
 });
 
-export const pluraAi =  defineCollection({
+export const pluraAi = defineCollection({
   name: "PluraAi",
   pattern: "plura-ai/**/*.mdx",
   schema: s
@@ -112,35 +112,35 @@ export default defineConfig({
         visit(tree, (node) => {
           if (node?.type === "element" && node?.tagName === "div") {
             if ("data-rehype-pretty-code-title" in node.properties) {
-              node.properties["data-rehype-pretty-code-title"] = "Code"
+              node.properties["data-rehype-pretty-code-title"] = "Code";
             }
 
             if (!("data-rehype-pretty-code-fragment" in node.properties)) {
-              return
+              return;
             }
 
-            const preElement = node.children.at(-1)
+            const preElement = node.children.at(-1);
             if (preElement.tagName !== "pre") {
-              return
+              return;
             }
 
             preElement.properties["__withMeta__"] =
-              node.children.at(0).tagName === "div"
-            preElement.properties["__rawString__"] = node.__rawString__
+              node.children.at(0).tagName === "div";
+            preElement.properties["__rawString__"] = node.__rawString__;
 
             if (node.__src__) {
-              preElement.properties["__src__"] = node.__src__
+              preElement.properties["__src__"] = node.__src__;
             }
 
             if (node.__event__) {
-              preElement.properties["__event__"] = node.__event__
+              preElement.properties["__event__"] = node.__event__;
             }
 
             if (node.__style__) {
-              preElement.properties["__style__"] = node.__style__
+              preElement.properties["__style__"] = node.__style__;
             }
           }
-        })
+        });
       },
       [
         rehypeAutolinkHeadings,