cleaning readme

mo9a7i · mo9a7i · commit 9aa232814aa5 · 2025-01-23T13:32:42.000+03:00
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 6 Degrees
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -1,9 +1,93 @@
 # Github Stats Page Generator
 
-## Todo
+A powerful Next.js application that generates beautiful, interactive GitHub statistics dashboards for organizations and personal repositories.
+
+![6 Degrees Github Stats](https://mo9a7i.github.io/github_stats/assets/images/Screenshot 2025-01-23 132648.png)
+
+## 🌟 Features
+
+- **Comprehensive Statistics**
+  - Repository metrics (stars, forks, issues)
+  - Code analysis (languages, lines of code)
+  - Contribution insights
+  - Development time estimates
+
+- **Interactive Dashboard**
+  - Dark/light theme support
+  - Responsive design
+  - Real-time data updates
+  - Filterable repository list
+
+- **Advanced Visualization**
+  - Language distribution charts
+  - Activity timelines
+  - Contributor networks
+  - Performance metrics
+
+## 🚀 Quick Start
+
+1. **Clone the repository**
+```bash
+git clone https://github.com/yourusername/github_stats.git
+cd github_stats
+```
+
+2. **Install dependencies**
+```bash
+pnpm install
+```
+
+3. **Set up environment variables**
+Create a `.env` file in the root directory:
+```env
+GH_TOKEN=your_github_personal_access_token
+```
+
+4. **Run the development server**
+```bash
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) to view your dashboard.
+
+## 🛠️ Tech Stack
+
+- [Next.js 14](https://nextjs.org/) - React framework
+- [React 18](https://reactjs.org/) - UI library
+- [Chart.js](https://www.chartjs.org/) - Data visualization
+- [Radix UI](https://www.radix-ui.com/) - UI components
+- [Tailwind CSS](https://tailwindcss.com/) - Styling
+- [GitHub API](https://docs.github.com/en/rest) - Data source
+
+## 📦 Deployment
+
+This application is configured for easy deployment to GitHub Pages using GitHub Actions. The static export ensures optimal performance and reliability.
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+## 📝 License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## 🙏 Acknowledgments
+
+- GitHub API for providing the data
+- The amazing open-source community
+- All contributors who help improve this project
+
+## 📊 Screenshots
+
+[Add screenshots of your dashboard here]
+
+---
+
+Built with ❤️ for the GitHub community
 
-- [ ] all the stats are linked to a page showing the details.
-- [ ] add the personal repos as well.
-- [ ] add sorting functionality or filtering.
-- [ ] add common commits graph somehow.
-- [ ] add total commits number and graph.
diff --git a/TODO.md b/TODO.md
@@ -0,0 +1,7 @@
+# TODO
+
+- [ ] all the stats are linked to a page showing the details.
+- [x] add the personal repos as well.
+- [x] add sorting functionality or filtering.
+- [ ] add combined commits graph somehow.
+- [ ] add total commits number and graph.
diff --git a/components/cards/coffee-cups-card.tsx b/components/cards/coffee-cups-card.tsx
@@ -1,15 +1,14 @@
 "use client";
 
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { formatNumber } from "@/lib/utils";
 import { Coffee } from "lucide-react";
 
 interface CoffeeCupsCardProps {
     totalHours: number;
 }
 
-function formatNumber(num: number): string {
-    return num.toLocaleString(undefined, { maximumFractionDigits: 0 });
-}
+
 
 export function CoffeeCupsCard({ totalHours }: CoffeeCupsCardProps) {
     // 4 cups per 8-hour workday
@@ -23,7 +22,7 @@ export function CoffeeCupsCard({ totalHours }: CoffeeCupsCardProps) {
                 <Coffee className="h-4 w-4 text-muted-foreground" />
             </CardHeader>
             <CardContent>
-                    <div className="text-2xl font-bold">{formatNumber(totalCups)} cups</div>
+                    <div className="text-5xl font-bold">{formatNumber(totalCups)} cups</div>
                     
             </CardContent>
             <CardFooter>
diff --git a/components/cards/commits-card.tsx b/components/cards/commits-card.tsx
@@ -1,4 +1,5 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { formatNumber } from "@/lib/utils";
 import { GitCommit } from "lucide-react"
 
 interface CommitsCardProps {
@@ -14,7 +15,7 @@ export function CommitsCard({ totalCommits, lastUpdated }: CommitsCardProps) {
         <GitCommit className="h-4 w-4 text-muted-foreground" />
       </CardHeader>
       <CardContent>
-        <div className="text-2xl font-bold">{totalCommits}</div>
+        <div className="text-5xl font-bold">{formatNumber(totalCommits)}</div>
         <p className="text-xs text-muted-foreground">
           Last updated {new Date(lastUpdated).toLocaleDateString()}
         </p>
diff --git a/components/cards/contributors-card.tsx b/components/cards/contributors-card.tsx
@@ -14,9 +14,9 @@ interface ContributorsCardProps {
 }
 
 export function ContributorsCard({ totalContributors, contributors }: ContributorsCardProps) {
-  const AVATAR_SIZE = "h-8 w-8";
-  const AVATAR_GROUP_CLASS = "flex flex-wrap -space-x-2 mt-2 overflow-visible";
-  const AVATAR_CLASS = `inline-block ${AVATAR_SIZE} rounded-full ring-2 ring-white hover:ring-neutral-200 transition-all bg-neutral-800`;
+  const AVATAR_SIZE = "h-6 w-6";
+  const AVATAR_GROUP_CLASS = "flex flex-wrap -space-x-1 mt-2 overflow-visible";
+  const AVATAR_CLASS = `inline-block ${AVATAR_SIZE} rounded-full ring-1 ring-white hover:ring-neutral-200 transition-all bg-neutral-800`;
 
   return (
     <Card className="bg-gray-50 dark:bg-[#040113] dark:border-[#0c0339]">
@@ -25,7 +25,7 @@ export function ContributorsCard({ totalContributors, contributors }: Contributo
         <Users className="h-4 w-4 text-muted-foreground" />
       </CardHeader>
       <CardContent>
-        <div className="text-2xl font-bold">{totalContributors}</div>
+        <div className="text-5xl font-bold">{totalContributors}</div>
         <div className={AVATAR_GROUP_CLASS}>
           {contributors.map((contributor) => (
             <Link
diff --git a/components/cards/development-time-card.tsx b/components/cards/development-time-card.tsx
@@ -30,7 +30,7 @@ export function DevelopmentTimeCard({ totalLines }: DevelopmentTimeCardProps) {
         <Clock className="h-4 w-4 text-muted-foreground" />
       </CardHeader>
       <CardContent>
-        <div className="text-2xl font-bold">{formatHours(totalHours)}</div>
+        <div className="text-5xl font-bold">{formatHours(totalHours)}</div>
 
       </CardContent>
       <CardFooter>
diff --git a/components/cards/homepages-card.tsx b/components/cards/homepages-card.tsx
@@ -26,13 +26,13 @@ export function HomepagesCard({ homepages }: HomepagesCardProps) {
   }, {} as Record<string, Homepage[]>);
 
   return (
-    <Card className="bg-gray-50 dark:bg-[#040113] dark:border-[#0c0339] col-span-full">
+    <Card className="bg-gray-50 dark:bg-[#040113] dark:border-[#0c0339] col-span-full mb-6">
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
         <CardTitle className="text-sm font-medium">Project Homepages</CardTitle>
         <Globe className="h-4 w-4 text-muted-foreground" />
       </CardHeader>
       <CardContent>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
           {Object.entries(groupedHomepages).map(([orgName, orgHomepages]) => (
             <div key={orgName} className="space-y-2 border rounded-lg p-4 dark:border-neutral-800">
               <h3 className="text-sm font-medium">{orgName}</h3>
diff --git a/components/cards/issues-card.tsx b/components/cards/issues-card.tsx
@@ -13,7 +13,7 @@ export function IssuesCard({ totalIssues }: IssuesCardProps) {
         <AlertCircle className="h-4 w-4 text-muted-foreground" />
       </CardHeader>
       <CardContent>
-        <div className="text-2xl font-bold">{totalIssues}</div>
+        <div className="text-5xl font-bold">{totalIssues}</div>
         <p className="text-xs text-muted-foreground">
           Open issues
         </p>
diff --git a/components/cards/organizations-card.tsx b/components/cards/organizations-card.tsx
@@ -14,9 +14,9 @@ interface OrganizationsCardProps {
 }
 
 export function OrganizationsCard({ organizations }: OrganizationsCardProps) {
-  const AVATAR_SIZE = "h-8 w-8";
-  const AVATAR_GROUP_CLASS = "flex flex-wrap -space-x-2 mt-2 overflow-visible";
-  const AVATAR_CLASS = `inline-block ${AVATAR_SIZE} rounded-full ring-2 ring-white hover:ring-neutral-200 transition-all bg-neutral-800`;
+  const AVATAR_SIZE = "h-6 w-6";
+  const AVATAR_GROUP_CLASS = "flex flex-wrap -space-x-1 mt-2 overflow-visible";
+  const AVATAR_CLASS = `inline-block ${AVATAR_SIZE} rounded-full ring-1 ring-white hover:ring-neutral-200 transition-all bg-neutral-800`;
 
   return (
     <Card className="bg-gray-50 dark:bg-[#040113] dark:border-[#0c0339]">
@@ -25,7 +25,7 @@ export function OrganizationsCard({ organizations }: OrganizationsCardProps) {
         <Users className="h-4 w-4 text-muted-foreground" />
       </CardHeader>
       <CardContent>
-        <div className="text-2xl font-bold">{organizations.length}</div>
+        <div className="text-5xl font-bold">{organizations.length}</div>
         <div className={AVATAR_GROUP_CLASS}>
           {organizations?.map((org) => org && (
             <Link
@@ -36,6 +36,7 @@ export function OrganizationsCard({ organizations }: OrganizationsCardProps) {
               <Avatar
                 title={org.name || org.login}
                 className={AVATAR_CLASS}
+                
               >
                 <AvatarImage src={org.avatar_url} alt={org.login} />
                 <AvatarFallback>{org?.login?.slice(0, 2)?.toUpperCase() || '??'}</AvatarFallback>
diff --git a/components/cards/repositories-card.tsx b/components/cards/repositories-card.tsx
@@ -17,7 +17,7 @@ export function RepositoriesCard({ totalRepos, publicRepos, privateRepos }: Repo
         <GitBranch className="h-4 w-4 text-muted-foreground" />
       </CardHeader>
       <CardContent>
-        <div className="text-2xl font-bold" suppressHydrationWarning>{totalRepos}</div>
+        <div className="text-5xl font-bold" suppressHydrationWarning>{totalRepos}</div>
         <p className="text-xs text-muted-foreground">
           <span suppressHydrationWarning>{publicRepos} public, {privateRepos} private</span>
         </p>
diff --git a/components/cards/stars-card.tsx b/components/cards/stars-card.tsx
@@ -13,7 +13,7 @@ export function StarsCard({ totalStars }: StarsCardProps) {
         <Star className="h-4 w-4 text-muted-foreground" />
       </CardHeader>
       <CardContent>
-        <div className="text-2xl font-bold">{totalStars}</div>
+        <div className="text-5xl font-bold">{totalStars}</div>
         <p className="text-xs text-muted-foreground">
           Across all repositories
         </p>
diff --git a/components/github-org.tsx b/components/github-org.tsx
@@ -26,9 +26,9 @@ export function GitHubOrg({ org }: GitHubOrgProps) {
     const repoCountStr = formatRepoCount(org.public_repos || 0, org.total_private_repos || 0, org.type || "Organization");
 
     return (
-        <AccordionItem className="dark:border-[#11044f]" value={org.login}>
+        <AccordionItem className="dark:border-[#11044f] dark:bg-[#040113] background-white border border-gray-200 px-4 rounded-md mb-2" value={org.login}>
             <AccordionTrigger>
-                <div className="w-full text-xl flex-col md:flex-row md:justify-between font-medium items-start md:items-center md:gap-2">
+                <div className="w-full decora text-xl flex-col md:flex-row md:justify-between font-medium items-start md:items-center md:gap-2">
                     <div className="flex items-center gap-2">
                         <Image src={org.avatar_url} alt={org.login} width={64} height={64} className="rounded-lg shadow-md bg-neutral-800" />
                         <div className="w-full items-start md:items-center flex flex-col md:flex-row md:justify-between">
diff --git a/components/stats-cards.tsx b/components/stats-cards.tsx
@@ -61,7 +61,7 @@ interface StatsCardsProps {
 
 export function StatsCards({ stats }: StatsCardsProps) {
   return (
-    <div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-4 mb-6">
+    <div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-4  mb-6">
       <RepositoriesCard 
         totalRepos={stats.totalRepos}
         publicRepos={stats.publicRepos}
@@ -84,16 +84,18 @@ export function StatsCards({ stats }: StatsCardsProps) {
 
       <IssuesCard totalIssues={stats.totalIssues} />
 
+      
+
+      <DevelopmentTimeCard totalLines={stats.developmentStats.totalLines} />
+
+      <CoffeeCupsCard totalHours={stats.developmentStats.totalHours} />
+
       <LanguagesCard languages={stats.languages} />
 
       <LanguageBytesCard 
         languages={stats.languageBytes.languages}
         totalBytes={stats.languageBytes.totalBytes}
       />
-
-      <DevelopmentTimeCard totalLines={stats.developmentStats.totalLines} />
-
-      <CoffeeCupsCard totalHours={stats.developmentStats.totalHours} />
     </div>
   )
 } 
diff --git a/lib/utils.ts b/lib/utils.ts
@@ -12,3 +12,7 @@ export function getBasePath() {
   }
   return ''
 }
+
+export function formatNumber(num: number): string {
+  return num.toLocaleString(undefined, { maximumFractionDigits: 0 });
+}
diff --git a/package.json b/package.json
@@ -35,5 +35,6 @@
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
-  }
+  },
+  "packageManager": "pnpm@9.10.0+sha512.73a29afa36a0d092ece5271de5177ecbf8318d454ecd701343131b8ebc0c1a91c487da46ab77c8e596d6acf1461e3594ced4becedf8921b074fbd8653ed7051c"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/assets/images/Screenshot 2025-01-23 132648.png b/public/assets/images/Screenshot 2025-01-23 132648.png
diff --git a/public/assets/images/Screenshot 2025-01-23 132732.png b/public/assets/images/Screenshot 2025-01-23 132732.png
diff --git a/public/assets/images/Screenshot 2025-01-23 132745.png b/public/assets/images/Screenshot 2025-01-23 132745.png
