\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

\n {result.image_url && (\n

\n ${result.project_name}$ \n

\n )}\n

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

\n \n {usernameMatches\n ? <>@{highlightText(result.username, searchTerm)}\n : <>@{result.username}}\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

\n {result.image_url && (\n

\n )}\n

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

\n \n {usernameMatches\n ? <>@{highlightText(result.username, searchTerm)}\n : <>@{result.username}}\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 📰 Newsletter Tool\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