Enable multi-language repo search and selection

Updated the hero component to allow users to select multiple programming languages via checkboxes, both from main and 'other' languages. Modified the repo page logic to accept and process multiple languages, fetching and merging results from GitHub for each selected language. This enhances the search experience by supporting multi-language queries.
(commit desc by copilot)

Author: offbeatjs

src/app/(public)/_components/hero.tsx

@@ -1,11 +1,10 @@
 'use client';
 
 import { useRouter } from 'next/navigation';
+import { useMemo, useState } from 'react';
 
 import { Search } from 'lucide-react';
-import { LanguageButton } from './language-button';
 import { Button } from './button';
-import Link from 'next/link';
 
 import { sortByName } from '@/lib/utils';
 import languages from '@/assets/languages.json';
@@ -17,11 +16,34 @@ const { main: mainLanguages, others: otherLanguages } = languages;
 export function Hero() {
   const router = useRouter();
 
+  // Track selected languages as a string array
+  const [selected, setSelected] = useState<string[]>([]);
+
+  const toggleLanguage = (language: string) => {
+    setSelected(prev =>
+      prev.includes(language) ? prev.filter(l => l !== language) : [...prev, language]
+    );
+  };
+
+  const sortedOthers = useMemo(() => [...otherLanguages].sort(sortByName), []);
+
   function handleSearch(e: React.FormEvent) {
+    e.preventDefault();
     const formData = new FormData(e.target as HTMLFormElement);
-    const lang = formData.get('search') as string;
-    if (lang.trim() === '') return;
-    router.push(`/repos/${lang}`);
+    let chosen = selected;
+
+    // Fallback: if no checkbox selected, use the single input value
+    if (chosen.length === 0) {
+      const typed = String(formData.get('search') || '').trim();
+      if (typed) {
+        chosen = [typed];
+      }
+    }
+
+    if (chosen.length === 0) return; // nothing to search
+
+    const csv = chosen.map(l => l.toLowerCase()).join(',');
+    router.push(`/repos?l=${encodeURIComponent(csv)}`);
   }
 
   return (
@@ -39,7 +61,7 @@ export function Hero() {
               <div className="relative flex w-full">
                 <input
                   type="text"
-                  placeholder="Search for your language"
+                  placeholder="Type a language (optional)"
                   className="w-full max-w-xs bg-transparent rounded-tr-none rounded-br-none input input-bordered text-hacktoberfest-light border-hacktoberfest-light
                   focus:border-hacktoberfest-light focus:!outline-none focus-visible:!outline-none placeholder:text-hacktoberfest-light text-sm sm:text-base"
                   name="search"
@@ -54,33 +76,56 @@ export function Hero() {
             </div>
           </form>
           <p className="font-medium uppercase text-hacktoberfest-light text-sm sm:text-base">
-            Or select the programming language you would like to find
+            Or select the programming languages you would like to find
             repositories for.
           </p>
+
           <div className="flex flex-wrap gap-4 sm:gap-6 items-center justify-center">
-            {mainLanguages.map(language => (
-              <LanguageButton key={language} language={language} />
-            ))}
+            {mainLanguages.map(language => {
+              const id = `lang-${language}`;
+              const checked = selected.includes(language);
+              return (
+                <label key={language} htmlFor={id} className="flex items-center gap-2 cursor-pointer select-none">
+                  <input
+                    id={id}
+                    type="checkbox"
+                    className="checkbox checkbox-primary"
+                    checked={checked}
+                    onChange={() => toggleLanguage(language)}
+                  />
+                  <span className="text-hacktoberfest-light text-sm sm:text-base">{language}</span>
+                </label>
+              );
+            })}
           </div>
+
           <div className="dropdown dropdown-top">
             <Button tabIndex={0} className="umami--click--otherlangs-button text-sm sm:text-base">
               Other languages
             </Button>
 
             <ul
               tabIndex={0}
-              className="h-64 p-2 overflow-y-auto shadow-lg menu dropdown-content bg-white/95 backdrop-blur-sm rounded-xl w-60 border border-gray-200/50 z-[9999]"
+              className="h-64 p-2 overflow-y-auto shadow-lg menu dropdown-content bg-white/95 backdrop-blur-sm rounded-xl w-72 border border-gray-200/50 z-[9999]"
             >
-              {otherLanguages.sort(sortByName).map(language => (
-                <li key={language}>
-                  <Link
-                    href={`/repos/${language.toLowerCase()}`}
-                    className="text-gray-700 hover:text-white hover:bg-hacktoberfest-blue rounded-lg transition-colors duration-200 px-3 py-2 text-sm"
-                  >
-                    {language}
-                  </Link>
-                </li>
-              ))}
+              {sortedOthers.map(language => {
+                const id = `other-${language}`;
+                const checked = selected.includes(language);
+                return (
+                  <li key={language} className="px-1">
+                    <label htmlFor={id} className="flex items-center gap-3 rounded-lg px-3 py-2 hover:bg-hacktoberfest-blue/80 hover:text-white cursor-pointer">
+                      <input
+                        id={id}
+                        type="checkbox"
+                        className="checkbox checkbox-primary"
+                        checked={checked}
+                        onChange={() => toggleLanguage(language)}
+                      />
+                      <span className="text-sm text-gray-800">{language}</span>
+                    </label>
+                  </li>
+                );
+              })}
             </ul>
           </div>
         </div>

src/app/(public)/repos/[language]/page.tsx

@@ -105,16 +105,7 @@ async function getRepos(
           ? `stars:<${endStars}`
           : '';
 
-  const apiUrl = new URL('https://api.github.com/search/repositories');
-  apiUrl.searchParams.set('page', page.toString());
-  apiUrl.searchParams.set('per_page', '21');
-  apiUrl.searchParams.set('sort', sort.toString());
-  apiUrl.searchParams.set('order', order.toString());
-  apiUrl.searchParams.set(
-    'q',
-    `topic:hacktoberfest language:${language} ${searchQuery} ${starsQuery}`
-  );
-
+  const languages = language.split(',').map(l => l.trim()); // split multi-language
   const headers: HeadersInit = {
     Accept: 'application/vnd.github.mercy-preview+json'
   };
@@ -136,25 +127,50 @@ async function getRepos(
     headers.Authorization = `Bearer ${env.AUTH_GITHUB_TOKEN}`;
   }
 
-  const res = await fetch(apiUrl, { headers });
-  if (!res.ok) return undefined;
-
-  const repos = (await res.json()) as RepoData;
   const reports = await getReportedRepos();
+  let allRepos: RepoItem[] = [];
+
+  // fetch github repos for each language and merge
+  for (const lang of languages) {
+    const apiUrl = new URL('https://api.github.com/search/repositories');
+    apiUrl.searchParams.set('page', page.toString());
+    apiUrl.searchParams.set('per_page', '21');
+    apiUrl.searchParams.set('sort', sort.toString());
+    apiUrl.searchParams.set('order', order.toString());
+    apiUrl.searchParams.set(
+      'q',
+      `topic:hacktoberfest language:${lang} ${searchQuery} ${starsQuery}`
+    );
+
+    const res = await fetch(apiUrl, { headers });
+    if (!res.ok) continue;
+
+    const reposData: RepoData = await res.json();
+    const filteredItems = reposData.items.filter(
+      (repo: RepoItem) => !repo.archived && !reports.find(r => r.repoId === repo.id)
+    );
+
+    allRepos = allRepos.concat(filteredItems);
+  }
 
-  repos.items = repos.items.filter((repo: RepoItem) => {
-    return !repo.archived && !reports.find(report => report.repoId === repo.id);
-  });
+  if (allRepos.length < 1) return undefined;
 
-  if (!Array.isArray(repos.items) || repos.items?.length < 1) return undefined;
+  // sort merged repos by updated date descending
+  allRepos.sort(
+    (a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime()
+  );
 
   return {
     page: +page.toString(),
     languageName: language,
-    repos
+    repos: {
+      ...{ total_count: allRepos.length, incomplete_results: false },
+      items: allRepos
+    }
   };
 }
 
+
 async function getReportedRepos() {
   const reports = await db
     .select()