\n {/* Month labels at the top */}\n

\n {monthLabels.map((month, i) => (\n \n {month.label}\n

\n ))}\n\n {/* Day labels on the left */}\n {dayLabels.map((day, i) => (\n \n {day}\n \n ))}\n\n {/* Activity cells */}\n {weeks.map((week, weekIndex) => (\n week.map((date, dayIndex) => {\n const colorLevel = getColorLevel(date);\n const dateStr = date.toISOString().split(\"T\")[0];\n const count = activityMap.get(dateStr) || 0;\n const formattedDate = date.toLocaleDateString(\"en-US\", {\n month: \"short\",\n day: \"numeric\",\n year: \"numeric\",\n });\n\n return (\n \n

\n {count} files on {formattedDate}\n

\n \n );\n })\n ))}\n \n );\n}\n\n// Helper to highlight the search terms in the code\nexport function highlightText(text: string, searchTerm: string): JSX.Element {\n if (!searchTerm) return <>{text};\n\n const regex = new RegExp(\n `(${searchTerm.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\")})`,\n \"gi\",\n );\n const parts = text.split(regex);\n\n return (\n <>\n {parts.map((part, i) =>\n regex.test(part)\n ? {part}\n : {part}\n )}\n \n );\n}\n\n// CodeBlock component for displaying code with line numbers\nexport function CodeBlock(\n { matchedLines, searchTerm, totalMatches: _totalMatches }: {\n matchedLines: EnhancedSearchResult[\"matchedLines\"];\n searchTerm: string;\n totalMatches: number;\n },\n) {\n return (\n

\n      {matchedLines.map((line, index) => (\n        line.lineNumber === -1 ? (\n          ...
\n        ) : (\n          \n            {line.lineNumber}\n            \n              {highlightText(line.lineContent, searchTerm)}\n            \n          
\n        )\n      ))}\n

\n );\n}\n\n// File search result component\nexport function FileSearchResultComponent(\n { result, searchTerm }: { result: EnhancedSearchResult; searchTerm: string },\n) {\n const relativeTime = formatRelativeTime(result.updated_at);\n const fullDate = formatFullDate(result.updated_at);\n\n // Check for metadata matches to highlight\n const lowercaseSearchTerm = searchTerm.toLowerCase();\n const projectNameMatches = result.project_name.toLowerCase().includes(lowercaseSearchTerm);\n const fileNameMatches = result.name.toLowerCase().includes(lowercaseSearchTerm);\n const usernameMatches = result.username.toLowerCase().includes(lowercaseSearchTerm);\n\n return (\n

\n {result.image_url && (\n

\n ${result.project_name}$ \n

\n )}\n

\n \n \n {projectNameMatches\n ? highlightText(result.project_name, searchTerm)\n : result.project_name}\n \n \n \n \n {fileNameMatches\n ? highlightText(result.name, searchTerm)\n : result.name}\n \n \n \n {result.totalMatches} {result.totalMatches === 1 ? \"match\" : \"matches\"}\n \n

\n \n \n {usernameMatches\n ? <>@{highlightText(result.username, searchTerm)}\n : <>@{result.username}}\n \n \n •\n \n Updated {relativeTime}\n \n

\n \n

\n );\n}\n\n// Project search result component\nexport function ProjectSearchResultComponent(\n { result, searchTerm }: { result: ProjectSearchResult; searchTerm: string },\n) {\n const relativeTime = formatRelativeTime(result.updated_at);\n const fullDate = formatFullDate(result.updated_at);\n\n // Check for metadata matches to highlight\n const lowercaseSearchTerm = searchTerm.toLowerCase();\n const projectNameMatches = result.name.toLowerCase().includes(lowercaseSearchTerm);\n const usernameMatches = result.username.toLowerCase().includes(lowercaseSearchTerm);\n const descriptionMatches = result.description?.toLowerCase().includes(lowercaseSearchTerm);\n\n return (\n

\n {result.image_url && (\n

\n )}\n

\n \n \n {projectNameMatches\n ? highlightText(result.name, searchTerm)\n : result.name}\n \n \n {result.matchCount > 0 && (\n \n {result.matchCount} {result.matchCount === 1 ? \"file match\" : \"file matches\"}\n \n )}\n

\n \n \n {usernameMatches\n ? <>@{highlightText(result.username, searchTerm)}\n : <>@{result.username}}\n \n \n •\n \n Updated {relativeTime}\n \n

\n {result.description && (\n

\n {descriptionMatches\n ? highlightText(result.description, searchTerm)\n : result.description}\n

\n )}\n

\n );\n}\n\n// User search result component\nexport function UserSearchResultComponent(\n { result, searchTerm }: { result: UserSearchResult; searchTerm: string },\n) {\n const relativeTime = formatRelativeTime(result.updated_at);\n const fullDate = formatFullDate(result.updated_at);\n\n // Check for metadata matches to highlight\n const lowercaseSearchTerm = searchTerm.toLowerCase();\n const usernameMatches = result.username && result.username.toLowerCase().includes(lowercaseSearchTerm);\n const bioMatches = result.bio && result.bio.toLowerCase().includes(lowercaseSearchTerm);\n\n return (\n

\n {result.profile_image_url && (\n

\n )}\n

\n \n \n {usernameMatches && result.username\n ? <>@{highlightText(result.username, searchTerm)}\n : <>@{result.username || \"anonymous\"}}\n \n \n \n {result.matchCount} {result.matchCount === 1 ? \"val\" : \"vals\"}\n \n

\n \n Updated {relativeTime}\n \n

\n\n {result.bio && (\n

\n {bioMatches\n ? highlightText(result.bio, searchTerm)\n : result.bio}\n

\n )}\n

\n );\n}\n\n// Sub-section result for docs\nexport function SubDocResultComponent(\n { result, _searchTerm }: { result: SubDocResult; _searchTerm: string },\n) {\n return (\n

\n \n {result.title}\n \n

\n );\n}\n\n// Doc search result component\nexport function DocSearchResultComponent(\n { result, searchTerm }: { result: DocSearchResult; searchTerm: string },\n) {\n const titleMatches = result.meta.title.toLowerCase().includes(searchTerm.toLowerCase());\n\n return (\n

\n \n \n {titleMatches\n ? highlightText(result.meta.title, searchTerm)\n : result.meta.title}\n \n \n \n {result.word_count} words\n \n

\n {result.url}\n

\n\n

\n\n {result.sub_results && result.sub_results.length > 0 && (\n

Sections

\n {result.sub_results.map((subResult, index) => (\n \n ))}\n

\n )}\n

\n );\n}\n\n// Result count tabs component\nexport function ResultTypeTabs({\n totalFileResults,\n totalProjectResults,\n totalUserResults,\n totalDocResults,\n resultType,\n searchTerm,\n _currentPage,\n}: {\n totalFileResults: number;\n totalProjectResults: number;\n totalUserResults: number;\n totalDocResults: number;\n resultType: \"files\" | \"projects\" | \"users\" | \"docs\";\n searchTerm: string;\n _currentPage: number;\n}) {\n return (\n

\n \n Files {totalFileResults}\n \n \n Vals {totalProjectResults}\n \n \n Users {totalUserResults}\n \n \n Docs {totalDocResults}\n \n

\n );\n}\n\n// Pagination component\nexport function Pagination({\n currentPage,\n totalPages,\n searchTerm,\n resultType,\n}: {\n currentPage: number;\n totalPages: number;\n searchTerm: string;\n resultType: \"files\" | \"projects\" | \"users\" | \"docs\";\n}) {\n if (totalPages <= 1) return null;\n\n // Create an array of page numbers to display\n const pageNumbers: (number | string)[] = [];\n const maxPagesToShow = 7; // Odd number works best for symmetry\n\n if (totalPages <= maxPagesToShow) {\n // Show all pages if there are fewer than maxPagesToShow\n for (let i = 1; i <= totalPages; i++) {\n pageNumbers.push(i);\n }\n } else {\n // Always include first page\n pageNumbers.push(1);\n\n // Calculate range around current page\n const leftSide = Math.floor(maxPagesToShow / 2);\n const rightSide = maxPagesToShow - leftSide - 1;\n\n // Determine if we need to show ellipsis\n if (currentPage > leftSide + 1) {\n pageNumbers.push(\"...\");\n }\n\n // Determine the range of pages to show around current page\n let rangeStart = Math.max(2, currentPage - leftSide);\n let rangeEnd = Math.min(totalPages - 1, currentPage + rightSide);\n\n // Adjust range if at the beginning\n if (currentPage - leftSide < 2) {\n rangeEnd = Math.min(totalPages - 1, maxPagesToShow - 1);\n }\n\n // Adjust range if at the end\n if (currentPage + rightSide > totalPages - 1) {\n rangeStart = Math.max(2, totalPages - maxPagesToShow + 2);\n }\n\n // Add the range of pages\n for (let i = rangeStart; i <= rangeEnd; i++) {\n pageNumbers.push(i);\n }\n\n // Add ellipsis if needed\n if (rangeEnd < totalPages - 1) {\n pageNumbers.push(\"...\");\n }\n\n // Always include last page if not already included\n if (rangeEnd < totalPages) {\n pageNumbers.push(totalPages);\n }\n }\n\n return (\n

\n {currentPage > 1 && (\n \n « Previous\n \n )}\n\n

\n {pageNumbers.map((page, index) => (\n typeof page === \"number\"\n ? (\n \n {page}\n \n )\n : {page}\n ))}\n

\n\n {currentPage < totalPages && (\n \n Next »\n \n )}\n

\n );\n}\n\n// Sample results component for preview of other result types\nexport function SampleResultsSection({\n title,\n linkText,\n resultType,\n searchTerm,\n count,\n showNoResults = false,\n}: {\n title: string;\n linkText: string;\n resultType: \"files\" | \"projects\" | \"users\" | \"docs\";\n searchTerm: string;\n count: number;\n showNoResults?: boolean;\n}) {\n if (count === 0 && !showNoResults) return null;\n\n return (\n

{title}

\n {count > 0 && (\n \n {linkText}\n \n )}\n

\n {count === 0 && showNoResults && (\n

\n No {resultType} match your search\n

\n )}\n

\n );\n}\n\n// Main search page component\nexport function SearchPage({\n fileResults,\n projectResults,\n userResults,\n docResults,\n searchTerm,\n totalFileResults,\n totalProjectResults,\n totalUserResults,\n totalDocResults,\n currentPage,\n totalPages,\n executionTimeMs,\n requestUrl,\n resultType = \"files\",\n stats,\n}: {\n fileResults: EnhancedSearchResult[];\n projectResults: ProjectSearchResult[];\n userResults: UserSearchResult[];\n docResults: DocSearchResult[];\n searchTerm: string;\n totalFileResults: number;\n totalProjectResults: number;\n totalUserResults: number;\n totalDocResults: number;\n currentPage: number;\n totalPages: number;\n executionTimeMs: number;\n requestUrl: string;\n resultType?: \"files\" | \"projects\" | \"users\" | \"docs\";\n stats: StatsData | null;\n}) {\n const totalResults = totalFileResults + totalProjectResults + totalUserResults + totalDocResults;\n\n // Determine which results to show based on result type\n let activeResults: JSX.Element[] = [];\n const otherResults: JSX.Element[] = [];\n\n // Prepare active results based on selected type\n if (searchTerm) {\n switch (resultType) {\n case \"files\":\n activeResults = fileResults.map((result, index) => (\n \n ));\n\n // Add preview of other result types if they have results\n if (totalProjectResults > 0) {\n otherResults.push(\n ,\n );\n\n // Add a few sample project results\n projectResults.slice(0, 2).forEach((result, index) => {\n otherResults.push(\n ,\n );\n });\n }\n\n if (totalUserResults > 0) {\n otherResults.push(\n ,\n );\n\n // Add a few sample user results\n userResults.slice(0, 2).forEach((result, index) => {\n otherResults.push(\n ,\n );\n });\n }\n\n if (totalDocResults > 0) {\n otherResults.push(\n ,\n );\n\n // Add a few sample doc results\n docResults.slice(0, 2).forEach((result, index) => {\n otherResults.push(\n ,\n );\n });\n }\n break;\n\n case \"projects\":\n activeResults = projectResults.map((result, index) => (\n \n ));\n\n // Add preview of other result types\n if (totalFileResults > 0) {\n otherResults.push(\n ,\n );\n\n // Add a few sample file results\n fileResults.slice(0, 2).forEach((result, index) => {\n otherResults.push(\n ,\n );\n });\n }\n\n if (totalUserResults > 0) {\n otherResults.push(\n ,\n );\n\n // Add a few sample user results\n userResults.slice(0, 2).forEach((result, index) => {\n otherResults.push(\n ,\n );\n });\n }\n\n if (totalDocResults > 0) {\n otherResults.push(\n ,\n );\n\n // Add a few sample doc results\n docResults.slice(0, 2).forEach((result, index) => {\n otherResults.push(\n ,\n );\n });\n }\n break;\n\n case \"users\":\n activeResults = userResults.map((result, index) => (\n \n ));\n\n // Add preview of other result types\n if (totalFileResults > 0) {\n otherResults.push(\n ,\n );\n\n // Add a few sample file results\n fileResults.slice(0, 2).forEach((result, index) => {\n otherResults.push(\n ,\n );\n });\n }\n\n if (totalProjectResults > 0) {\n otherResults.push(\n ,\n );\n\n // Add a few sample project results\n projectResults.slice(0, 2).forEach((result, index) => {\n otherResults.push(\n ,\n );\n });\n }\n\n if (totalDocResults > 0) {\n otherResults.push(\n ,\n );\n\n // Add a few sample doc results\n docResults.slice(0, 2).forEach((result, index) => {\n otherResults.push(\n ,\n );\n });\n }\n break;\n\n case \"docs\":\n activeResults = docResults.map((result, index) => (\n \n ));\n\n // Add preview of other result types\n if (totalFileResults > 0) {\n otherResults.push(\n ,\n );\n\n // Add a few sample file results\n fileResults.slice(0, 2).forEach((result, index) => {\n otherResults.push(\n ,\n );\n });\n }\n\n if (totalProjectResults > 0) {\n otherResults.push(\n ,\n );\n\n // Add a few sample project results\n projectResults.slice(0, 2).forEach((result, index) => {\n otherResults.push(\n ,\n );\n });\n }\n\n if (totalUserResults > 0) {\n otherResults.push(\n ,\n );\n\n // Add a few sample user results\n userResults.slice(0, 2).forEach((result, index) => {\n otherResults.push(\n ,\n );\n });\n }\n break;\n }\n }\n\n return (\n \n \n Val Town Code Search\n \n \n \n \n \n \n \n \n

\n Val Town Code Search\n Return to Val Town\n

API Access

\n You can access search results via JSON API by adding format=json to your query:\n

\n {searchTerm\n ? (\n \n

\n                          {new URL(`?q=${encodeURIComponent(searchTerm)}&page=${currentPage}&format=json`, requestUrl)\n                            .toString()}\n

\n \n )\n : (\n \n {new URL(`?q=example&format=json`, requestUrl).toString()}\n \n )}\n\n

\n For typeahead suggestions, use the /typeahead endpoint:\n

\n \n

\n                      {`${new URL(\"/typeahead\", requestUrl).origin}/typeahead?q=${\n                        encodeURIComponent(searchTerm || \"example\")\n                      }`}\n

\n \n

\n Returns an array of strings in format \"username\" or \"username/projectName\"\n

\n \n \n \n

\n\n \n\n {searchTerm && (\n

\n {totalResults > 0\n ? (\n

\n Found {totalResults} {totalResults === 1 ? \"result\" : \"results\"} for \"{searchTerm}\"\n \n ({executionTimeMs}ms)\n \n

\n {(totalFileResults > 0 || totalProjectResults > 0 || totalUserResults > 0 || totalDocResults > 0)\n && (\n \n )}\n

\n )\n : (\n

\n No results found for \"{searchTerm}\"{\" \"}\n \n ({executionTimeMs}ms)\n \n

\n )}\n

\n )}\n\n

\n {activeResults.length > 0 || otherResults.length > 0\n ? (\n <>\n

\n {activeResults.length > 0\n ? activeResults\n : (\n

\n No matches found in{\" \"}\n {resultType === \"files\" ? \"files\" : resultType === \"projects\" ? \"vals\" : \"users\"}.\n

Try switching to another result type using the tabs above.

\n )}\n

\n\n {activeResults.length > 0 && (\n \n )}\n\n {otherResults.length > 0 && (\n

\n {otherResults}\n

\n )}\n \n )\n : searchTerm\n ? (\n

No matching results found. Try a different search term.

\n\n {stats && (\n

\n Search across {stats.totalProjects.toLocaleString()} vals and{\" \"}\n {stats.totalFiles.toLocaleString()} files from the ValTown community\n

\n\n

Try searching for:

\n fetch\n api\n database\n image\n function\n discord\n openai\n react\n

\n )}\n

\n )\n : (\n stats && (\n

\n Search across {stats.totalProjects.toLocaleString()} vals and{\" \"}\n {stats.totalFiles.toLocaleString()} files in Val Town\n

\n\n

{stats.totalProjects.toLocaleString()}

Total Vals

\n\n

{stats.projectsLastDay.toLocaleString()}

New in Last 24h

\n\n

{stats.projectsLastWeek.toLocaleString()}

New This Week

\n\n

{stats.projectsLastMonth.toLocaleString()}

New This Month

\n\n {/* Activity Heatmap */}\n

Files Indexed

\n \n

\n\n {/* Contributors and Projects Row */}\n

\n {/* Top Contributors */}\n

Recently Active Contributors

\n {stats.topContributors.map((contributor: ContributorData, index: number) => (\n \n

\n {contributor.profile_image_url\n ? {contributor.username}

\n : (\n \n {contributor.username.charAt(0).toUpperCase()}\n

\n )}\n

\n @{contributor.username.length > 15\n ? contributor.username.substring(0, 12) + \"...\"\n : contributor.username}\n

\n {contributor.projectCount} {contributor.projectCount === 1 ? \"val\" : \"vals\"}\n

\n \n ))}\n

\n\n {/* Most Active Projects */}\n

Most Active Vals

\n {stats.mostActiveProjects.map((project: ActiveProjectData, index: number) => (\n \n

\n {project.image_url\n ? {project.name}

\n : (\n \n {project.name.charAt(0).toUpperCase()}\n

\n )}\n

{project.name}

\n by @{project.username} • {formatRelativeTime(project.updated_at)}\n

\n \n ))}\n

\n\n

Try searching for:

\n fetch\n api\n database\n image\n function\n discord\n openai\n react\n

\n )\n )}\n