feat: use new api endpoints

[shelegdmitriy]

This pull request introduces significant improvements to the modules and sources browsing experience, focusing on better UI, infinite scrolling, data handling, and code maintainability. The most important changes include refactoring the module and source components for improved data structures, implementing infinite scrolling for modules, and enhancing metrics and badge components. Some dependencies have also been updated or replaced.

Modules Browsing Improvements

• Refactored the modules data model to use the new Repository type, updating ModuleCard, ModulesGrid, and related utilities for better type safety and future extensibility. [1] [2]
• Added infinite scrolling to the modules grid using react-infinite-scroll-component and useInfiniteQuery, improving performance and user experience when browsing large lists of modules. [1] [2] [3]
• Updated module sorting options to only include "Newest" and "Recently Updated" for clarity and relevance.

Metrics and Badges Enhancements

• Refactored the GitHubStats component to fetch stars and followers separately, introduced a reusable MetricsBadge component for displaying metrics with loading states, and improved code organization. [1] [2]

Sources Browsing Refactor

• Simplified and improved the SourcesCardsView component to accept a flat list of sources, removed unnecessary grouping, and cleaned up the rendering logic for better maintainability. [1] [2]

Dependency Updates

• Removed the unused @types/js-yaml dependency, added yaml for YAML parsing, and introduced react-infinite-scroll-component for infinite scrolling. [1] [2]

Documentation Updates

• Updated the README.md to include new features, data sources, navigation structure, and caching strategies, reflecting the latest changes in the application. [1] [2] [3] [4]

[Copilot]

Pull Request Overview

This pull request modernizes the modules and sources browsing experience by migrating from REST API endpoints to GraphQL-based endpoints, implementing infinite scrolling, and refactoring data structures for better type safety and maintainability.

Key Changes:

• Replaced REST API endpoints (/api/modules, /api/sources) with direct GraphQL API calls via Zuplo
• Implemented infinite scrolling for modules using react-infinite-scroll-component and useInfiniteQuery
• Refactored type definitions to use Repository instead of GitHubModule and updated manifest parsing to use the yaml package

Reviewed Changes

Copilot reviewed 24 out of 25 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
src/types/index.ts	Updated type exports to reflect new data structures (Repository, Repositories, GraphQLPagination)
src/types/github.ts	Complete refactor from REST-based types to GraphQL schema types with stricter type definitions
src/types/data.ts	Expanded data source types and added AsimovModule interface for better YAML manifest handling
src/pages/modules.astro	Changed default sort option from 'relevant' to 'created_at'
src/pages/api/sources.ts	Deleted - replaced with direct API calls
src/pages/api/modules.ts	Deleted - replaced with direct API calls
src/lib/utils.ts	Added utility functions for formatting, provider info, and API fetching with fallbacks
src/lib/queries/sources.ts	Simplified to call fetchDataSources directly instead of REST endpoint
src/lib/queries/modules.ts	Converted from queryOptions to infiniteQueryOptions for pagination support
src/lib/github.ts	Complete rewrite to use GraphQL endpoints and remove client-side sorting logic
src/lib/config.ts	Renamed EXCLUDED_REPOS to WHITELISTED_MODULES (semantic issue noted)
src/layouts/Layout.astro	Added is:inline directive to Umami analytics script tag
src/components/SourcesTableViewSkeleton.tsx	New component for loading states in table view
src/components/SourcesTableView.tsx	Refactored to use new DataSource type structure
src/components/SourcesTable.tsx	Updated to work with new data structures and added skeleton loading states
src/components/SourcesCardsViewSkeleton.tsx	New component for loading states in cards view
src/components/SourcesCardsView.tsx	Refactored for new data structure with simplified module references
src/components/ModulesGrid.tsx	Changed key from module.id to module.name to match new type
src/components/ModulesApp.tsx	Implemented infinite scrolling with filtering logic for modules
src/components/ModuleCard.tsx	Refactored to parse YAML manifests and use new Repository type
src/components/MetricsBadge.tsx	New reusable component for displaying metrics with loading states
src/components/GitHubStats.tsx	Refactored to fetch stars and followers separately with new API structure
package.json	Removed @types/js-yaml, added yaml and react-infinite-scroll-component
package-lock.json	Updated dependencies including Astro, Vite, Sharp, and Shiki packages
README.md	Minor formatting improvements with blank lines

Comments suppressed due to low confidence (1)

src/components/ModuleCard.tsx:106

• CSS class name typos throughout the file: border-sSlate-200, text-sSlate-800, text-gGray-400, text-gGray-500, bg-sSlate-100, text-sSlate-600. The pattern of double uppercase letters is incorrect - should be single lowercase (e.g., border-slate-200, text-gray-400).

    <div className="group border-sSlate-200 hover:border-sSlate-300 relative overflow-hidden rounded-lg border bg-white p-6 shadow-sm transition-all duration-200 hover:shadow-lg">
      <div className="mb-4 flex items-start justify-between">
        <div className="flex items-center space-x-3">
          <img
            src={`https://github.com/asimov-modules.png`}
            alt="asimov-modules avatar"
            className="h-8 w-8 rounded-full"
          />
          <div>
            <h3 className="text-sSlate-800 group-hover:text-oOrange-500 font-medium transition-colors">
              {moduleName}
            </h3>
            <p className="text-gGray-400 text-sm">asimov-modules</p>
          </div>
        </div>
        <div className="text-gGray-400 flex items-center space-x-1">
          <Star className="text-base" />
          <span className="text-sm font-medium">{stars}</span>
        </div>
      </div>

      <p className="text-gGray-500 mb-4 line-clamp-2 text-sm leading-relaxed">
        {moduleDescription}
      </p>

      {moduleLinks && moduleLinks.length > 0 && (
        <div className="mb-4 flex items-center space-x-2">
          <span className="text-gGray-400 text-xs font-medium">Links:</span>
          <div className="flex items-center space-x-2">
            {moduleLinks.map((link) => {
              const provider = getProviderInfo(link);
              return (
                <a
                  key={link}
                  href={link}
                  target="_blank"
                  rel="noopener noreferrer"
                  className={`relative z-20 transition-transform hover:scale-110 ${provider.color}`}
                  title={provider.title}
                >
                  <provider.icon className="h-5 w-5 text-xs" />
                </a>
              );
            })}
          </div>
        </div>
      )}

      <div className="text-gGray-400 flex w-full items-center justify-between text-xs">
        <div className="flex items-center space-x-4">
          {module.primaryLanguage && (
            <div className="flex items-center space-x-1">
              <div
                className="h-3 w-3 rounded-full"
                style={{ backgroundColor: languageColor || '#6B7280' }}
              ></div>
              <span className="text-gGray-500 text-xs">{module.primaryLanguage.name}</span>
            </div>
          )}

          {/* TODO: collect this data */}
          {/* {module.contributors_count && module.contributors_count > 0 && (
            <div className="flex items-center space-x-1">
              <Users size={12} />
              <span>{module.contributors_count}</span>
            </div>
          )} */}
        </div>
        <div className="text-gGray-400 flex items-center space-x-1">
          <Calendar className="text-xs" />
          <span className="text-xs">Updated: {updatedDate}</span>
        </div>
      </div>
      <a
        href={module.url}
        target="_blank"
        rel="noopener noreferrer"
        className="absolute inset-0 z-10"
        aria-label={`View ${module.name} on GitHub`}

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.