direct-loader.js

// Direct data loader for AI Python Libraries
// Fetches from local library-data.json (built by build.py)
document.addEventListener('DOMContentLoaded', function() {
  // Set initialization flag to prevent duplicate loading
  window.categoryLoaderInitialized = true;

  // Local data URL (generated by build.py from Libraries.csv and CATEGORIES.csv)
  const DATA_URL = '/library-data.json';

  // Function to get URL parameter or path segment
  function getCategoryFromUrl() {
    const pathSegments = window.location.pathname.split('/').filter(segment => segment);

    if (pathSegments.length >= 2 && pathSegments[0] === 'categories') {
      return pathSegments[1];
    }

    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get('category') || '';
  }

  // Convert kebab-case to Title Case
  function formatCategoryName(category) {
    return category.split('-')
      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
      .join(' ');
  }

  // Normalize category string for comparison
  function normalizeCategory(category) {
    return category.toLowerCase()
      .replace(/[^a-z0-9]+/g, ' ')
      .trim();
  }

  // Check if an item belongs to a category (exact match per semicolon-separated value)
  function itemMatchesCategory(item, categoryName) {
    if (!item.category) return false;

    const normalizedItemCategories = item.category.split(';').map(c => normalizeCategory(c));
    const normalizedCategory = normalizeCategory(categoryName);

    return normalizedItemCategories.some(cat => cat === normalizedCategory);
  }

  // Main loader function
  async function loadCategoryData() {
    const categorySlug = getCategoryFromUrl();
    if (!categorySlug) return;

    const categoryName = formatCategoryName(categorySlug);
    console.log('Loading category data for:', categoryName);

    try {
      // Show loading message
      const itemsList = document.querySelector('.directory-01__items');
      if (itemsList) {
        itemsList.innerHTML = '<li style="text-align: center; padding: 20px;">Loading items for ' + categoryName + '...</li>';
      }

      // Update page title and heading
      document.title = categoryName + " - AI Python Libraries";

      const heading = document.querySelector('.directory-01__heading');
      if (heading) {
        heading.textContent = 'Explore ' + categoryName + ' Libraries';
      }

      // Fetch library data from JSON (avoids CSV parsing issues)
      console.log('Fetching data from:', DATA_URL);
      const response = await fetch(DATA_URL);
      const data = await response.json();
      const allItems = data.libraries || [];
      const allCategories = data.categories || [];
      console.log('Loaded', allItems.length, 'items and', allCategories.length, 'categories');

      // Find current category in categories list (for description)
      const categoryInfo = allCategories.find(cat => {
        if (cat.slugified_title && cat.slugified_title.toLowerCase() === categorySlug.toLowerCase()) {
          return true;
        }
        if (cat.title && normalizeCategory(cat.title) === normalizeCategory(categoryName)) {
          return true;
        }
        return false;
      });

      // Update subtitle with category description
      const subtitle = document.querySelector('.directory-01__subtitle');
      if (subtitle) {
        if (categoryInfo && categoryInfo.text) {
          subtitle.textContent = categoryInfo.text;
        } else {
          subtitle.textContent = 'Libraries for ' + categoryName.toLowerCase() + ' in Python. Find the right tools for your AI project.';
        }
      }

      // Filter items by category
      const matchingItems = allItems.filter(item => itemMatchesCategory(item, categoryName));
      console.log('Found ' + matchingItems.length + ' items matching category "' + categoryName + '"');

      // Update DOM with matching items
      if (itemsList) {
        itemsList.innerHTML = '';

        if (matchingItems.length > 0) {
          matchingItems.forEach(item => {
            const itemElement = document.createElement('li');
            itemElement.className = 'directory-item-parent';
            itemElement.dataset.filters = JSON.stringify({category: item.category || ''});

            const logoHtml = item.logoUrl
              ? `<img loading="lazy" class="directory-01__logo" src="${item.logoUrl}" alt="${item.title} logo"/>`
              : '';

            itemElement.innerHTML = `
              <div class="directory-01__item card-container sc-br-0_5">
                <a target="_blank" href="${item.url || '#'}">
                  <div class="directory-01__title-box">
                    ${logoHtml}
                    <h3 class="title-text--inner directory-01__title def-16">${item.title || ''}</h3>
                    <div class="directory-01__rating">
                      <span class="directory-01__rating-text content-text def-14">${item.rank || ''}</span>
                      <svg viewBox="0 0 16 16" height="16" width="16" class="directory-01__rating-icon">
                        <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path>
                      </svg>
                    </div>
                  </div>
                  <div class="directory-01__text content_box content-text def-14">
                    <p>${item.text || ''}</p>
                  </div>
                </a>
              </div>
            `;

            itemsList.appendChild(itemElement);
          });
        } else {
          itemsList.innerHTML = '<li style="text-align: center; padding: 20px;">No libraries found for ' + categoryName + ' category.</li>';
        }

        // Update search input
        const searchInput = document.querySelector('.directory-01__search-input');
        if (searchInput) {
          searchInput.placeholder = 'Search among ' + matchingItems.length + ' items';
          searchInput.disabled = false;
        }

        // Remove loading state
        const directory = document.querySelector('.directory-01');
        if (directory) {
          directory.classList.remove('dir-is-loading');
        }

        // Update "no results" placeholder visibility
        const placeholder = document.querySelector('.directory-01__not-found-placeholder-container');
        if (placeholder) {
          placeholder.style.display = matchingItems.length > 0 ? 'none' : 'flex';
        }
      }

    } catch (error) {
      console.error('Error loading category data:', error);

      const itemsList = document.querySelector('.directory-01__items');
      if (itemsList) {
        itemsList.innerHTML = '<li style="text-align: center; padding: 20px; color: #e74c3c;">Error loading data. Please try again later.</li>';
      }

      const directory = document.querySelector('.directory-01');
      if (directory) {
        directory.classList.remove('dir-is-loading');
      }
    }
  }

  // Start loading data
  loadCategoryData();
});