feat: load devops hobbies top 10 repositories added

mehdi-ra · mehdi-ra · commit 049c532df711 · 2025-05-30T20:58:17.000+03:30
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "@react-three/fiber": "9.1.2",
     "@tabler/icons-react": "3.33.0",
     "@types/three": "0.176.0",
+    "axios": "1.9.0",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "gsap": "3.13.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -7,6 +7,7 @@ import { Inter } from 'next/font/google'
 
 import { Layout } from '@/components'
 import { ThemeProvider } from '@/components/theme-provider'
+import { cn } from '@/lib'
 
 const inter = Inter({ subsets: ['latin'] })
 config.autoAddCss = false
@@ -23,7 +24,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={inter.className}>
+      <body className={cn(inter.className, 'lg:h-screen lg:overflow-hidden')}>
         <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
           <Layout>{children}</Layout>
         </ThemeProvider>
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,90 +1,13 @@
 import { BellIcon, CalendarIcon, FileTextIcon, GlobeIcon, InputIcon } from '@radix-ui/react-icons'
-import { FaMobileAlt, FaNodeJs, FaPython, FaReact, FaServer, FaVuejs } from 'react-icons/fa'
 
 import { BentoCard, BentoGrid } from '@/components/magicui/bento-grid'
 import RepositorySlider from '@/components/ui/repository-slider'
+import { GitHubOrganizationRepos } from '@/lib/repository'
+
+export default async function Home() {
+  const organizationRepos = new GitHubOrganizationRepos()
+  const repositories = await organizationRepos.getTopStarredRepos('devopshobbies', 10)
 
-export default function Home() {
-  const repositories = [
-    {
-      id: '1',
-      name: 'React Dashboard',
-      author: 'by devuser',
-      description: 'A beautiful admin dashboard built with React, featuring multiple widgets, charts, and a responsive layout.',
-      stars: 1200,
-      forks: 45,
-      watchers: 5700,
-      language: 'JavaScript',
-      languageColor: '#61DAFB',
-      icon: <FaReact />,
-      updated: 'Updated 2 days ago',
-    },
-    {
-      id: '2',
-      name: 'AI Chatbot',
-      author: 'by mlengineer',
-      description: 'An intelligent chatbot using natural language processing and machine learning to provide human-like responses.',
-      stars: 3400,
-      forks: 128,
-      watchers: 12500,
-      language: 'Python',
-      languageColor: '#3572A5',
-      icon: <FaPython />,
-      updated: 'Updated 1 week ago',
-    },
-    {
-      id: '3',
-      name: 'Vue E-commerce',
-      author: 'by frontenddev',
-      description: 'Complete e-commerce solution with Vue.js, featuring product listings, cart functionality, and secure checkout.',
-      stars: 876,
-      forks: 32,
-      watchers: 4200,
-      language: 'Vue',
-      languageColor: '#41B883',
-      icon: <FaVuejs />,
-      updated: 'Updated 3 days ago',
-    },
-    {
-      id: '4',
-      name: 'API Gateway',
-      author: 'by backenddev',
-      description: 'A high-performance API gateway built with Node.js and Express, featuring rate limiting, authentication, and caching.',
-      stars: 2100,
-      forks: 87,
-      watchers: 8900,
-      language: 'Node.js',
-      languageColor: '#339933',
-      icon: <FaNodeJs />,
-      updated: 'Updated 5 days ago',
-    },
-    {
-      id: '5',
-      name: 'Flutter App',
-      author: 'by mobiledev',
-      description: 'A cross-platform mobile application with Flutter featuring beautiful UI components and smooth animations.',
-      stars: 1500,
-      forks: 56,
-      watchers: 6300,
-      language: 'Dart',
-      languageColor: '#02569B',
-      icon: <FaMobileAlt />,
-      updated: 'Updated yesterday',
-    },
-    {
-      id: '6',
-      name: 'Microservices',
-      author: 'by architect',
-      description: 'A complete microservices architecture with Docker, Kubernetes, and service discovery implemented.',
-      stars: 3800,
-      forks: 142,
-      watchers: 15200,
-      language: 'Go',
-      languageColor: '#007396',
-      icon: <FaServer />,
-      updated: 'Updated 2 weeks ago',
-    },
-  ]
   const features = [
     {
       Icon: FileTextIcon,
diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx
@@ -17,7 +17,7 @@ function AppFooter() {
             2024 Devops Hobbies
           </p>
         </div>
-        <div className="flex pt-2">
+        <div className="flex pt-2 max-sm:flex-wrap">
           <Link href="#" className="pr-4 flex items-center "><span className="underline">Pricing</span></Link>
           <Link href="#" className="pr-4 flex items-center "><span className="underline">Contact</span></Link>
           <Link href="#" className="pr-4 flex items-center "><span className="underline">Twitter</span></Link>
diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx
@@ -9,13 +9,13 @@ import Hero from './hero'
 
 export function Layout({ children }: { children: ReactNode }) {
   return (
-    <div className="flex flex-col mx-auto max-w-[1920px] min-h-screen overflow-hidden">
+    <div className="flex flex-col mx-auto max-w-[1920px] lg:max-h-screen lg:overflow-hidden">
       <div className="flex flex-col lg:flex-row flex-1">
-        <div id="hero" className="lg:w-4/12 w-full p-4 border-r border-gray-900">
+        <div id="hero" className="lg:w-4/12 w-full p-4 border-r border-gray-900 lg:h-screen ">
           <Hero />
         </div>
 
-        <div id="context" className="relative lg:w-8/12 w-full overflow-y-auto no-scrollbar p-4 border-r border-gray-900">
+        <div id="context" className="relative lg:h-screen lg:w-8/12 w-full overflow-y-auto no-scrollbar p-4 border-r border-gray-900">
           <DotPattern
             className={cn(
               '[mask-image:radial-gradient(300px_circle_at_center,orange,transparent)]',
diff --git a/src/lib/repository.tsx b/src/lib/repository.tsx
