\n {/* Top navigation */}\n

\n \n \n \n \n

\n \n Sign Up\n \n \n Sign In\n \n

\n\n {children}\n

\n );\n}\n",[],[346,352,358,365],{"_103":373,"_95":374,"_157":375,"_159":359,"_160":138,"_161":376,"_162":163,"_105":377,"_100":118,"_165":193,"_167":378,"_168":22,"_169":-5,"_170":379,"_98":380},"aa899b50-343c-11f0-b255-9e149126039e","Layout.tsx","d2b7b406-343a-11f0-b709-9e149126039e",705,["D",1747609561226],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface LayoutProps {\n header: React.ReactNode;\n children: React.ReactNode;\n}\n\nexport function Layout({ header, children }: LayoutProps) {\n return (\n

\n {header}\n

\n {children}\n

\n );\n}\n",[],[346,352,358,374],[346,352,358],{"_103":383,"_95":384,"_157":385,"_159":353,"_160":138,"_161":386,"_162":163,"_105":387,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":388,"_98":398},"b79c5846-340a-11f0-8213-9e149126039e","icons","f0f4f75f-b921-4df5-8832-eb9cab4eeb30",516,["D",1747588108303],[389],{"_103":390,"_95":391,"_157":392,"_159":385,"_160":138,"_161":393,"_162":163,"_105":394,"_100":118,"_165":193,"_167":395,"_168":22,"_169":-5,"_170":396,"_98":397},"a9e747a6-343c-11f0-b255-9e149126039e","SearchIcon.tsx","b79c3406-340a-11f0-8213-9e149126039e",693,["D",1747609560110],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface SearchIconProps {\n className?: string;\n}\n\nexport function SearchIcon(\n { className = \"w-4 h-4 text-gray-500\" }: SearchIconProps,\n) {\n return (\n \n \n \n \n );\n}\n",[],[346,352,384,391],[346,352,384],{"_103":400,"_95":287,"_157":401,"_159":353,"_160":138,"_161":213,"_162":163,"_105":402,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":403,"_98":414},"abd75a60-3284-11f0-ae91-569c3dd06744","abd75af6-3284-11f0-ae91-569c3dd06744",["D",1747420584852],[404],{"_103":405,"_95":406,"_157":407,"_159":401,"_160":138,"_161":408,"_162":163,"_105":409,"_100":410,"_165":193,"_167":411,"_168":22,"_169":-5,"_170":412,"_98":413},"c5ef212a-3285-11f0-9d8b-569c3dd06744","LibraryItem.tsx","abe19264-3284-11f0-8d0a-569c3dd06744",49,["D",1747421058122],16,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ntype LibraryItemProps = {\n title: string;\n subtitle: string;\n tags: string[];\n avatarText: string;\n author: string;\n version: string;\n updated: string;\n dependents: number | string;\n license: string;\n downloads: number;\n};\n\nexport default function LibraryItem({\n title,\n subtitle,\n tags,\n avatarText,\n author,\n version,\n updated,\n dependents,\n license,\n downloads,\n}: LibraryItemProps) {\n return (\n

{title}

{subtitle}

\n\n

\n {tags.map((tag) => (\n \n {tag}\n \n ))}\n

\n\n

\n \n {avatarText}\n \n {author}\n • {version}\n • {updated}\n • {dependents} dependents\n • {license}\n

\n\n

\n {downloads.toLocaleString()}\n

\n );\n}\n",[],[346,352,287,406],[346,352,287],{"_103":416,"_95":417,"_157":418,"_159":353,"_160":138,"_161":419,"_162":163,"_105":420,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":421,"_98":476},"6a3ab90a-343a-11f0-888f-9e149126039e","package","568ada4d-9b31-4617-9d8e-078a4a8100f6",666,["D",1747608594341],[422,431,440,449,458,467],{"_103":423,"_95":424,"_157":425,"_159":418,"_160":138,"_161":426,"_162":163,"_105":427,"_100":118,"_165":193,"_167":428,"_168":22,"_169":-5,"_170":429,"_98":430},"aa669ec0-343c-11f0-aaa4-9e149126039e","PackageHeader.tsx","6a3a97ea-343a-11f0-888f-9e149126039e",702,["D",1747609560640],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { NpmPackage } from \"../../../shared/schemas.ts\";\n\ninterface PackageHeaderProps {\n packageData: NpmPackage;\n}\n\nexport function PackageHeader({ packageData }: PackageHeaderProps) {\n return (\n

\n {packageData.name}\n

\n {packageData.tags.map((tag) => (\n \n {tag}\n \n ))}\n

\n\n

\n v{packageData.version}\n •\n \n Published {new Date(packageData.updated).toLocaleDateString()}\n \n

\n License: {packageData.license}\n

\n \n {packageData.downloads.toLocaleString()} weekly downloads\n \n

\n );\n}\n",[],[346,352,417,424],{"_103":432,"_95":433,"_157":434,"_159":418,"_160":138,"_161":435,"_162":163,"_105":436,"_100":118,"_165":193,"_167":437,"_168":22,"_169":-5,"_170":438,"_98":439},"ab293976-343c-11f0-848f-9e149126039e","PackageLoading.tsx","823db80e-343a-11f0-82ca-9e149126039e",712,["D",1747609560986],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport function PackageLoading() {\n return (\n

\n );\n}\n",[],[346,352,417,433],{"_103":441,"_95":442,"_157":443,"_159":418,"_160":138,"_161":444,"_162":163,"_105":445,"_100":118,"_165":193,"_167":446,"_168":22,"_169":-5,"_170":447,"_98":448},"aa1674ae-343c-11f0-a736-9e149126039e","PackageNotFound.tsx","7d9b5964-343a-11f0-b6fb-9e149126039e",698,["D",1747609560384],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface PackageNotFoundProps {\n packageName: string;\n}\n\nexport function PackageNotFound({ packageName }: PackageNotFoundProps) {\n return (\n

\n Package not found\n

\n The package \"{packageName}\" could not be found.\n

\n \n Return to search\n \n

\n );\n}\n",[],[346,352,417,442],{"_103":450,"_95":451,"_157":452,"_159":418,"_160":138,"_161":453,"_162":163,"_105":454,"_100":118,"_165":193,"_167":455,"_168":22,"_169":-5,"_170":456,"_98":457},"aa300536-343c-11f0-9844-9e149126039e","PackageReadme.tsx","789dd9e6-343a-11f0-b158-9e149126039e",700,["D",1747609560546],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface PackageReadmeProps {\n readme: string;\n}\n\nexport function PackageReadme({ readme }: PackageReadmeProps) {\n return (\n

\n \n

\n \n );\n}\n",[],[346,352,417,451],{"_103":459,"_95":460,"_157":461,"_159":418,"_160":138,"_161":137,"_162":163,"_105":462,"_100":463,"_165":193,"_167":464,"_168":22,"_169":-5,"_170":465,"_98":466},"b07cd1a8-3441-11f0-a06a-9e149126039e","PackageSearchBar.tsx","88cb59ba-343a-11f0-8148-9e149126039e",["D",1747611718692],4,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { SearchIcon } from \"../icons/SearchIcon.tsx\";\n\nexport function PackageSearchBar() {\n return (\n

\n \n

\n \n \n

\n \n Back to Search\n \n

\n );\n}\n",[],[346,352,417,460],{"_103":468,"_95":469,"_157":470,"_159":418,"_160":138,"_161":471,"_162":163,"_105":472,"_100":118,"_165":193,"_167":473,"_168":22,"_169":-5,"_170":474,"_98":475},"aa719730-343c-11f0-9844-9e149126039e","PackageSidebar.tsx","735b770e-343a-11f0-8932-9e149126039e",703,["D",1747609560993],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { NpmPackage } from \"../../../shared/schemas.ts\";\n\ninterface PackageSidebarProps {\n packageData: NpmPackage;\n packageDownloadLink: string;\n}\n\nexport function PackageSidebar(\n { packageData, packageDownloadLink }: PackageSidebarProps,\n) {\n return (\n

\n Installation\n

\n {\n navigator.clipboard.writeText(\n `npm install ${packageDownloadLink}`,\n );\n const target = e.currentTarget;\n const originalText = target.textContent;\n target.textContent = \"Copied!\";\n setTimeout(() => {\n target.textContent = originalText;\n }, 1500);\n }}\n >\n npm install {packageDownloadLink}\n \n

\n\n

\n Author\n

\n {packageData.author}\n

\n );\n}\n",[],[346,352,417,469],[346,352,417],{"_103":478,"_95":479,"_157":480,"_159":353,"_160":138,"_161":481,"_162":163,"_105":482,"_100":213,"_165":193,"_167":483,"_168":22,"_169":-5,"_170":484,"_98":485},"aa1c8286-343c-11f0-87a4-9e149126039e","Header.tsx","b5f4ab68-3439-11f0-828a-9e149126039e",699,["D",1747609560347],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { AppHeader } from \"./common/AppHeader.tsx\";\nimport { SearchBar } from \"./SearchBar.tsx\";\n\ninterface HeaderProps {\n initialQuery: string;\n onSearch: (query: string) => void;\n}\n\nexport function Header({ initialQuery, onSearch }: HeaderProps) {\n return (\n \n \n \n );\n}\n",[],[346,352,479],{"_103":487,"_95":488,"_157":489,"_159":353,"_160":138,"_161":490,"_162":163,"_105":491,"_100":269,"_165":193,"_167":492,"_168":22,"_169":-5,"_170":493,"_98":494},"7c75ae24-343d-11f0-95cf-9e149126039e","PackageItem.tsx","a6768ab2-3439-11f0-a837-9e149126039e",716,["D",1747609913414],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { marked } from \"https://esm.sh/marked@4.3.0\";\nimport { NpmPackage } from \"../../shared/schemas.ts\";\nimport { ProfilePicture } from \"./ProfilePicture.tsx\";\n\ninterface PackageItemProps {\n item: NpmPackage;\n profilePictureUrl?: string;\n}\n\nexport function PackageItem({ item, profilePictureUrl }: PackageItemProps) {\n // Function to render markdown safely\n const renderMarkdown = (text: string) => {\n try {\n return { __html: marked(text) };\n } catch (error) {\n console.error(\"Error rendering markdown:\", error);\n return { __html: text };\n }\n };\n\n return (\n

\n \n {item.name}\n \n\n \n\n

\n {item.tags.map((tag) => (\n \n {tag}\n \n ))}\n

\n\n

\n \n \n {item.author}\n \n • v{item.version}\n \n • Published {new Date(item.updated).toLocaleDateString()}\n \n

\n\n

{new Intl.NumberFormat(\"en-US\").format(Number(item.downloads))}

\n {item.license}\n

\n );\n}\n",[],[346,352,488],{"_103":496,"_95":497,"_157":498,"_159":353,"_160":138,"_161":499,"_162":163,"_105":500,"_100":118,"_165":193,"_167":501,"_168":22,"_169":-5,"_170":502,"_98":503},"a9f6e512-343c-11f0-b89c-9e149126039e","PackageList.tsx","bdfa24dc-3439-11f0-a89e-9e149126039e",696,["D",1747609560251],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport InfiniteScroll from \"https://esm.sh/react-infinite-scroll-component@6.1.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { NpmPackage } from \"../../shared/schemas.ts\";\nimport { PackageItem } from \"./PackageItem.tsx\";\n\ninterface ProfilePictureCache {\n [key: string]: string;\n}\n\ninterface PackageListProps {\n items: NpmPackage[];\n hasMore: boolean;\n loading: boolean;\n loadMore: () => void;\n profilePictures: ProfilePictureCache;\n}\n\nexport function PackageList({\n items,\n hasMore,\n loading,\n loadMore,\n profilePictures,\n}: PackageListProps) {\n return (\n \n

\n \n }\n endMessage={\n

\n {items.length > 0\n ? \"Yay! You have seen all packages\"\n : \"No packages found\"}\n

\n }\n >\n

\n {items.map((item) => (\n \n ))}\n

\n \n );\n}\n",[],[346,352,497],{"_103":505,"_95":506,"_157":507,"_159":353,"_160":138,"_161":508,"_162":163,"_105":509,"_100":118,"_165":193,"_167":510,"_168":22,"_169":-5,"_170":511,"_98":512},"a9f46e90-343c-11f0-9b89-9e149126039e","ProfilePicture.tsx","959255be-3439-11f0-b83c-9e149126039e",695,["D",1747609560248],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface ProfilePictureProps {\n imageUrl?: string;\n author: string;\n avatarText: string;\n packageId: string;\n}\n\n// Function to generate profile pictures using the provided API\nexport const generateProfilePicture = async (\n prompt: string,\n): Promise => {\n try {\n const response = await fetch(\n \"https://stevekrouse--411c225025f011f0ad23569c3dd06744.web.val.run/api/fal/proxy\",\n {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"x-fal-target-url\": \"https://fal.run/fal-ai/flux/schnell\",\n \"Origin\":\n \"https://stevekrouse--411c225025f011f0ad23569c3dd06744.web.val.run\",\n },\n body: JSON.stringify({\n prompt,\n image_size: \"landscape_4_3\",\n num_inference_steps: 4,\n num_images: 1,\n enable_safety_checker: true,\n sync_mode: true,\n }),\n },\n );\n\n if (!response.ok) {\n throw new Error(`Failed to generate image: ${response.statusText}`);\n }\n\n const data = await response.json();\n return data.images[0].url;\n } catch (error) {\n console.error(\"Error generating profile picture:\", error);\n return \"\"; // Return empty string if generation fails\n }\n};\n\nexport function ProfilePicture(\n { imageUrl, author, avatarText, packageId }: ProfilePictureProps,\n) {\n const [profileImage, setProfileImage] = useState(\n imageUrl,\n );\n const [isLoading, setIsLoading] = useState(!imageUrl);\n\n useEffect(() => {\n // If we already have an image URL, don't fetch a new one\n if (imageUrl) {\n setProfileImage(imageUrl);\n setIsLoading(false);\n return;\n }\n\n // If we're already loading or have an image, don't fetch again\n if (!isLoading || profileImage) return;\n\n // Generate a profile picture if we don't have one\n const fetchProfilePicture = async () => {\n const prompt = `${packageId} ${avatarText} profile picture`;\n const url = await generateProfilePicture(prompt);\n if (url) {\n setProfileImage(url);\n }\n setIsLoading(false);\n };\n\n fetchProfilePicture();\n }, [imageUrl, packageId, avatarText, isLoading, profileImage]);\n\n if (profileImage) {\n return (\n \n );\n }\n\n return (\n

\n {avatarText}\n

\n );\n}\n",[],[346,352,506],{"_103":514,"_95":515,"_157":516,"_159":353,"_160":138,"_161":517,"_162":163,"_105":518,"_100":118,"_165":193,"_167":519,"_168":22,"_169":-5,"_170":520,"_98":521},"aa081ddc-343c-11f0-a2e4-9e149126039e","SearchBar.tsx","ae378472-3439-11f0-b724-9e149126039e",697,["D",1747609560263],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { FormEvent, useState } from \"https://esm.sh/react@18.2.0\";\nimport { SearchIcon } from \"./icons/SearchIcon.tsx\";\n\ninterface SearchBarProps {\n initialQuery: string;\n onSearch: (query: string) => void;\n}\n\nexport function SearchBar({ initialQuery, onSearch }: SearchBarProps) {\n const [query, setQuery] = useState(initialQuery);\n\n const handleSubmit = (e: FormEvent) => {\n e.preventDefault();\n if (query.trim()) {\n onSearch(query.trim());\n }\n };\n\n return (\n

\n );\n}\n",[],[346,352,515],{"_103":523,"_95":524,"_157":525,"_159":353,"_160":138,"_161":526,"_162":163,"_105":527,"_100":269,"_165":193,"_167":528,"_168":22,"_169":-5,"_170":529,"_98":530},"bdd65b4e-340a-11f0-bc2c-9e149126039e","SearchBox.tsx","9e754796-328f-11f0-808f-569c3dd06744",518,["D",1747588118769],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { FormEvent, useState } from \"https://esm.sh/react@18.2.0\";\nimport { SearchIcon } from \"./icons/SearchIcon.tsx\";\n\ninterface SearchBoxProps {\n onSearch: (query: string) => void;\n initialQuery?: string;\n}\n\nexport function SearchBox({ onSearch, initialQuery = \"\" }: SearchBoxProps) {\n const [query, setQuery] = useState(initialQuery);\n\n const handleSubmit = (e: FormEvent) => {\n e.preventDefault();\n if (query.trim()) {\n onSearch(query.trim());\n }\n };\n\n return (\n

\n \n

\n );\n}\n",[],[346,352,524],[346,352],{"_103":533,"_95":534,"_157":535,"_159":347,"_160":138,"_161":536,"_162":163,"_105":537,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":538,"_98":558},"6220c49e-343a-11f0-8c42-9e149126039e","pages","70322a61-8486-4183-9922-c6f2af78d1ff",665,["D",1747608580746],[539,549],{"_103":540,"_95":541,"_157":542,"_159":535,"_160":138,"_161":543,"_162":163,"_105":544,"_100":545,"_165":193,"_167":546,"_168":22,"_169":-5,"_170":547,"_98":548},"457eea6a-343e-11f0-926c-9e149126039e","PackageDetailPage.tsx","97609daa-343a-11f0-a3e8-9e149126039e",723,["D",1747610250698],5,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { marked } from \"https://esm.sh/marked@4.3.0\";\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { APP_URL } from \"../../shared/consts.ts\";\nimport { NpmPackage } from \"../../shared/schemas.ts\";\nimport { client } from \"../hono.ts\";\nimport { AppHeader } from \"../components/common/AppHeader.tsx\";\nimport { Layout } from \"../components/common/Layout.tsx\";\nimport { PackageHeader } from \"../components/package/PackageHeader.tsx\";\nimport { PackageLoading } from \"../components/package/PackageLoading.tsx\";\nimport { PackageNotFound } from \"../components/package/PackageNotFound.tsx\";\nimport { PackageReadme } from \"../components/package/PackageReadme.tsx\";\nimport { PackageSearchBar } from \"../components/package/PackageSearchBar.tsx\";\nimport { PackageSidebar } from \"../components/package/PackageSidebar.tsx\";\n\ninterface PackageDetailPageProps {\n packageName: string;\n}\n\nexport function PackageDetailPage({ packageName }: PackageDetailPageProps) {\n const [packageData, setPackageData] = useState(null);\n const [readme, setReadme] = useState(\"\");\n const [loading, setLoading] = useState(true);\n\n const packageDownloadLink = packageData\n ? `${APP_URL}api/npm-package/${packageData.name}`\n : \"\";\n\n useEffect(() => {\n const fetchPackageDetails = async () => {\n try {\n // Fetch package details\n const response = await client.package\n .$get({ query: { name: packageName } });\n const data = await response.json();\n setPackageData(data.package);\n setReadme(marked(data.readme || \"\"));\n } catch (error) {\n console.error(\"Error fetching package details:\", error);\n } finally {\n setLoading(false);\n }\n };\n\n fetchPackageDetails();\n }, [packageName]);\n\n if (loading) {\n return ;\n }\n\n if (!packageData) {\n return ;\n }\n\n return (\n \n \n \n }\n >\n

\n \n\n {/* Package content */}\n

\n \n \n

\n \n );\n}\n",[],[346,534,541],{"_103":550,"_95":551,"_157":552,"_159":535,"_160":138,"_161":553,"_162":163,"_105":554,"_100":213,"_165":193,"_167":555,"_168":22,"_169":-5,"_170":556,"_98":557},"aaca8df4-343c-11f0-9b89-9e149126039e","SearchPage.tsx","6220a176-343a-11f0-8c42-9e149126039e",711,["D",1747609561620],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { DEFAULT_QUERY } from \"../../shared/consts.ts\";\nimport { NpmPackage } from \"../../shared/schemas.ts\";\nimport { client } from \"../hono.ts\";\nimport { Header } from \"../components/Header.tsx\";\nimport { Layout } from \"../components/common/Layout.tsx\";\nimport { PackageList } from \"../components/PackageList.tsx\";\nimport { generateProfilePicture } from \"../components/ProfilePicture.tsx\";\n\n// Interface for profile picture cache\ninterface ProfilePictureCache {\n [key: string]: string;\n}\n\nexport function SearchPage() {\n const [items, setItems] = useState([]);\n const [query, setQuery] = useState(DEFAULT_QUERY);\n const [page, setPage] = useState(1);\n const [hasMore, setHasMore] = useState(true);\n const [loading, setLoading] = useState(false);\n const [profilePictures, setProfilePictures] = useState(\n {},\n );\n\n const fetchPackages = async (\n searchQuery: string,\n pageNum: number,\n append = false,\n ) => {\n if (loading) return;\n\n setLoading(true);\n try {\n const response = await client.search.$get({\n query: {\n q: searchQuery,\n n: \"10\",\n page: pageNum.toString(),\n },\n });\n\n const data = await response.json();\n\n // Generate profile pictures for new packages\n const newPackages = data.packages;\n const newProfilePictures: ProfilePictureCache = { ...profilePictures };\n\n // Generate profile pictures in parallel\n const picturePromises = newPackages.map(async (pkg: NpmPackage) => {\n // Skip if we already have a picture for this package\n if (newProfilePictures[pkg.id]) return;\n\n // Use the package name and avatarText as the prompt\n const prompt = `${pkg.name} ${pkg.avatarText} profile picture`;\n const imageUrl = await generateProfilePicture(prompt);\n if (imageUrl) {\n newProfilePictures[pkg.id] = imageUrl;\n }\n });\n\n // Wait for all profile pictures to be generated\n await Promise.all(picturePromises);\n setProfilePictures(newProfilePictures);\n\n if (append) {\n setItems((prevItems) => [...prevItems, ...data.packages]);\n } else {\n setItems(data.packages);\n }\n\n setHasMore(data.hasMore || false);\n setLoading(false);\n } catch (error) {\n console.error(\"Error fetching packages:\", error);\n setLoading(false);\n }\n };\n\n const handleSearch = (searchQuery: string) => {\n setPage(1);\n setItems([]);\n setQuery(searchQuery);\n fetchPackages(searchQuery, 1);\n };\n\n const loadMorePackages = () => {\n if (!hasMore || loading) return;\n const nextPage = page + 1;\n setPage(nextPage);\n fetchPackages(query, nextPage, true);\n };\n\n useEffect(() => {\n fetchPackages(query, 1);\n }, []);\n\n return (\n }\n >\n

\n \n

\n \n );\n}\n",[],[346,534,551],[346,534],{"_103":560,"_95":561,"_157":562,"_159":347,"_160":138,"_161":563,"_162":163,"_105":564,"_100":118,"_165":193,"_167":565,"_168":22,"_169":-5,"_170":566,"_98":567},"58ac73a8-328d-11f0-a390-569c3dd06744","hono.ts","39fc6f7e-328a-11f0-878e-569c3dd06744",356,["D",1747424310626],"// deno-lint-ignore-file no-window\n\nimport { hc } from \"https://esm.sh/hono@4.7.7/client?deps=hono@4.7.7\";\nimport { QueryClient } from \"https://esm.sh/@tanstack/react-query@5.74.7?deps=react@19.0.0\";\nimport { AppType } from \"../backend/api/mod.ts\";\nimport { APP_URL } from \"../shared/consts.ts\";\n\nexport const client = hc(\n typeof window !== \"undefined\"\n ? window.location.origin + \"/api\"\n : APP_URL + \"/api\",\n { init: { credentials: \"include\" } },\n);\nexport const queryClient = new QueryClient();\n",[],[346,561],{"_103":569,"_95":570,"_157":571,"_159":347,"_160":138,"_161":572,"_162":163,"_105":573,"_100":574,"_165":575,"_167":576,"_168":22,"_169":-5,"_170":577,"_98":578},"45771eac-343e-11f0-8db4-9e149126039e","index.html","12ae2341-bde2-4eec-9439-3f72856d6a68",721,["D",1747610250649],18,"file","\n\n \n \n \n NPLLM\n \n \n \n \n \n \n\n \n

\n \n \n \n \n\n",[],[346,570],{"_103":580,"_95":581,"_157":582,"_159":347,"_160":138,"_161":583,"_162":163,"_105":584,"_100":585,"_165":193,"_167":586,"_168":22,"_169":-5,"_170":587,"_98":588},"c6d659da-343a-11f0-9579-9e149126039e","index.tsx","621f4726-fe57-4b90-a1a7-17eac2bad6fb",679,["D",1747608749711],9,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { SearchPage } from \"./pages/SearchPage.tsx\";\nimport { PackageDetailPage } from \"./pages/PackageDetailPage.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) throw new Error(\"No root element found\");\n\n// Check if we're on a package page\nconst packageName = (window as any).packageName;\n\nif (packageName) {\n createRoot(root).render();\n} else {\n createRoot(root).render();\n}\n",[],[346,581],{"_103":590,"_95":591,"_157":592,"_159":347,"_160":138,"_161":593,"_162":163,"_105":594,"_100":269,"_165":575,"_167":595,"_168":22,"_169":-5,"_170":596,"_98":597},"aac5b55e-343c-11f0-b255-9e149126039e","style.css","e6b83858-3404-11f0-b86f-9e149126039e",709,["D",1747609561285],"/* Base styles */\nbody {\n font-family:\n -apple-system,\n BlinkMacSystemFont,\n \"Segoe UI\",\n Helvetica,\n Arial,\n sans-serif;\n line-height: 1.5;\n color: #24292e;\n margin: 0;\n padding: 0;\n}\n\n/* Prose styles for markdown content */\n.prose {\n max-width: 80ch;\n color: #24292e;\n}\n\n.prose a {\n color: #0969da;\n text-decoration: none;\n}\n\n.prose a:hover {\n text-decoration: underline;\n}\n\n.prose strong {\n font-weight: 600;\n color: #24292e;\n}\n\n.prose h1,\n.prose h2,\n.prose h3,\n.prose h4,\n.prose h5,\n.prose h6 {\n margin-top: 1.5em;\n margin-bottom: 0.5em;\n font-weight: 600;\n line-height: 1.25;\n color: #24292e;\n}\n\n.prose h1 {\n font-size: 2em;\n border-bottom: 1px solid #eaecef;\n padding-bottom: 0.3em;\n}\n\n.prose h2 {\n font-size: 1.5em;\n border-bottom: 1px solid #eaecef;\n padding-bottom: 0.3em;\n}\n\n.prose h3 {\n font-size: 1.25em;\n}\n\n.prose h4 {\n font-size: 1em;\n}\n\n.prose p,\n.prose ul,\n.prose ol {\n margin-top: 0;\n margin-bottom: 1em;\n}\n\n.prose code {\n font-family: SFMono-Regular, Consolas, \"Liberation Mono\", Menlo, monospace;\n padding: 0.2em 0.4em;\n margin: 0;\n font-size: 85%;\n background-color: rgba(27, 31, 35, 0.05);\n border-radius: 3px;\n}\n\n.prose pre {\n font-family: SFMono-Regular, Consolas, \"Liberation Mono\", Menlo, monospace;\n padding: 16px;\n overflow: auto;\n font-size: 85%;\n line-height: 1.45;\n background-color: #f6f8fa;\n border-radius: 3px;\n margin-top: 0;\n margin-bottom: 16px;\n}\n\n.prose pre code {\n background-color: transparent;\n padding: 0;\n margin: 0;\n font-size: 100%;\n word-break: normal;\n white-space: pre;\n}\n\n.prose blockquote {\n padding: 0 1em;\n color: #6a737d;\n border-left: 0.25em solid #dfe2e5;\n margin: 0 0 16px 0;\n}\n\n.prose img {\n max-width: 100%;\n box-sizing: content-box;\n background-color: #fff;\n}\n\n.prose hr {\n height: 0.25em;\n padding: 0;\n margin: 24px 0;\n background-color: #e1e4e8;\n border: 0;\n}\n\n.prose table {\n border-spacing: 0;\n border-collapse: collapse;\n margin-top: 0;\n margin-bottom: 16px;\n width: 100%;\n overflow: auto;\n}\n\n.prose table th {\n font-weight: 600;\n padding: 6px 13px;\n border: 1px solid #dfe2e5;\n}\n\n.prose table td {\n padding: 6px 13px;\n border: 1px solid #dfe2e5;\n}\n\n.prose table tr {\n background-color: #fff;\n border-top: 1px solid #c6cbd1;\n}\n\n.prose table tr:nth-child(2n) {\n background-color: #f6f8fa;\n}\n\n/* Prose size variants */\n.prose-sm {\n font-size: 0.875rem;\n}\n\n.prose-sm p {\n margin-bottom: 0.75em;\n}\n\n.prose-sm h1,\n.prose-sm h2,\n.prose-sm h3,\n.prose-sm h4,\n.prose-sm h5,\n.prose-sm h6 {\n margin-top: 1.25em;\n margin-bottom: 0.5em;\n}\n\n/* Override GitHub markdown CSS to ensure light theme */\n.markdown-body {\n background-color: #fff !important;\n color: #24292e !important;\n}\n",[],[346,591],[346],{"_103":600,"_95":601,"_157":602,"_159":-5,"_160":138,"_161":603,"_162":163,"_105":604,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":605,"_98":625},"1921ad6e-328a-11f0-9ec5-569c3dd06744","shared","1921ae18-328a-11f0-9ec5-569c3dd06744",322,["D",1747422915693],[606,616],{"_103":607,"_95":608,"_157":609,"_159":602,"_160":138,"_161":610,"_162":163,"_105":611,"_100":612,"_165":193,"_167":613,"_168":22,"_169":-5,"_170":614,"_98":615},"a8a18fd4-343f-11f0-8c37-9e149126039e","consts.ts","2ea90650-328a-11f0-9931-569c3dd06744",730,["D",1747610846515],10,"export const APP_URL = \"https://npllm.val.run/\";\nexport const DEFAULT_QUERY = \"left-pad\";\nexport const S3_PREFIX = \"npllm-004/\";\n",[],[601,608],{"_103":617,"_95":618,"_157":619,"_159":602,"_160":138,"_161":620,"_162":163,"_105":621,"_100":269,"_165":193,"_167":622,"_168":22,"_169":-5,"_170":623,"_98":624},"b7648612-32a4-11f0-9f0b-569c3dd06744","schemas.ts","a494a05e-328f-11f0-a571-569c3dd06744",463,["D",1747434348119],"import { z } from \"https://esm.sh/zod@3.23.4\";\n\nexport const packageSchema = z.object({\n name: z.string()\n .describe(\"NPM package name following standard naming conventions\"),\n description: z.string()\n .describe(\"Brief description of what the package does\"),\n tags: z.array(\n z.string()\n .describe(\"Technologies or categories related to this package\"),\n ),\n author: z.string()\n .describe(\"Name of the fictional package author\"),\n version: z.string()\n .describe(\"Package version (e.g., '1.2.3')\"),\n license: z.string()\n .describe(\"Open source license (e.g., MIT, Apache-2.0)\"),\n downloads: z.number()\n .describe(\"Number of downloads (between 1,000 and 5,000,000)\"),\n avatarText: z.string()\n .describe(\"Text to display in the package avatar (usually initials)\"),\n updated: z.string()\n .describe(\"Date when the package was last updated (ISO format)\"),\n dependents: z.number()\n .describe(\"Number of packages that depend on this one\"),\n id: z.string()\n .describe(\"Unique identifier for the package\"),\n});\n\nexport const searchResultSchema = z.object({\n packages: z.array(packageSchema),\n hasMore: z.boolean().optional(),\n page: z.number().optional(),\n});\n\nexport type NpmPackage = z.infer;\nexport type SearchResult = z.infer;\n",[],[601,618],[601],{"_103":627,"_95":628,"_157":629,"_159":-5,"_160":138,"_161":630,"_162":163,"_105":631,"_100":32,"_165":575,"_167":632,"_168":22,"_169":-5,"_170":633,"_98":634},"abf0baaa-3284-11f0-830a-569c3dd06744",".vtignore","abf0bb72-3284-11f0-830a-569c3dd06744",6,["D",1747420584941],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[],[628],{"_103":636,"_95":637,"_157":638,"_159":-5,"_160":138,"_161":639,"_162":163,"_105":640,"_100":612,"_165":575,"_167":641,"_168":22,"_169":-5,"_170":642,"_98":643},"aac7bcd2-343c-11f0-aaa4-9e149126039e","README.md","e3cac2a8-48b1-4e18-8b51-3166155e5a6e",710,["D",1747609561634],"# NPM Clone\n\nThis app is a clone of the npm website with search functionality, package detail\npages, and the ability to download npm packages as tar files.\n\n> **Note**: The Townie folder is for reference only and should be deleted\n> manually.\n\n## Features\n\n- **Search Page**: Search for npm packages with infinite scrolling\n- **Package Detail Page**: View package details and README\n- **Package Download**: Download npm packages as tar files\n- **Caching**: Search results, package details, and package tars are cached\n using Val Town's blob storage\n- **Responsive Design**: Looks good on all screen sizes\n- **Markdown Support**: Package descriptions and READMEs are rendered as\n markdown\n- **Realistic Content**: Generated packages focus on practical, realistic use\n cases\n\n## Technical Details\n\n- **Frontend**: React with TypeScript\n- **Backend**: Hono server\n- **Infinite Scrolling**: Using react-infinite-scroll-component\n- **Data Validation**: Using Zod schemas\n- **Caching**: Using Val Town's blob storage\n- **Package Generation**: Dynamically generates npm packages with TypeScript\n support\n- **Markdown Rendering**: Using marked library to render markdown content\n\n## Routes\n\n- `/`: The main search page\n- `/package/:name`: Package detail page\n- `/api/search`: API endpoint for searching packages\n- `/api/package`: API endpoint for getting package details\n- `/api/npm-package/:packageName`: API endpoint for downloading npm packages as\n tar files\n\n## Package Download\n\nThe app allows you to download any package as a tar file. These packages:\n\n1. Are generated dynamically based on the package name\n2. Feature a multi-file structure with proper directory organization\n3. Use modern ESM imports/exports (not CommonJS)\n4. Include both TypeScript and JavaScript implementations\n5. Have proper package.json, README, and type definitions\n6. Include tests, license, and other standard npm package files\n7. Are cached in Val Town's blob storage for faster subsequent downloads\n8. Can be installed via npm by extracting the tar file\n\n## Development\n\nThis project is built on Val Town's React Hono Starter template.\n\n- The **entrypoint** is `/backend/index.ts`. That's the backend HTTP server,\n which also serves all the frontend assets.\n\n- The **client-side entrypoint** is `/frontend/index.html`, which in turn\n imports `/frontend/index.tsx`, which renders either the SearchPage or\n PackageDetail component.\n",[],[637],{"_103":645,"_95":646,"_157":647,"_159":-5,"_160":138,"_161":648,"_162":163,"_105":649,"_100":213,"_165":575,"_167":650,"_168":22,"_169":-5,"_170":651,"_98":652},"7c7bd77c-328a-11f0-bc3f-569c3dd06744","deno.json","abe8581a-3284-11f0-ab4e-569c3dd06744",327,["D",1747423082376],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"tasks\": {\n \"check\": \"deno check .\"\n },\n \"compilerOptions\": {\n \"strict\": true,\n \"types\": [\"https://www.val.town/types/valtown.d.ts\"],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ],\n \"strictNullChecks\": true\n },\n \"lint\": {\n \"files\": {\n \"include\": [\"deno:/https/esm.town/**/*\"]\n },\n \"rules\": {\n \"exclude\": [\"no-explicit-any\", \"no-window\"]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}\n",[],[646],"files",[154,172,179,186,197,207,218,225,235,245,256,263,274,285,292,301,311,321,331,344,350,356,363,372,382,389,399,404,415,422,431,440,449,458,467,477,486,495,504,513,522,532,539,549,559,568,579,589,599,606,616,626,635,644],"counts",{"_657":32,"_658":213,"_659":32,"_660":118},"pulls","branches","forks","envVars","contents",[],{"_103":580,"_95":581,"_157":582,"_159":347,"_160":138,"_161":583,"_162":163,"_105":664,"_100":585,"_165":193,"_167":586,"_168":22,"_169":-5,"_98":665},["D",1747608749711],[346,581],"upstreamProject",{"_103":146,"_95":668,"_111":669,"_112":-5,"_109":110,"_23":670},"reactHonoStarter","Starter template with client-side React & Hono server",{"_93":671,"_130":672},"std","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJVaVhpQ1BId3dscVpBbkdZVWlMNjJtcjkxWS5wbmcifQ","upstreamBranch",{"_103":141,"_105":675,"_676":677,"_95":43,"_139":146,"_100":678,"_140":-5,"_142":-5,"_679":680,"_107":-5,"_151":22,"_109":110,"_150":671,"_16":148,"_149":668},["D",1740674013689],"updatedAt",["D",1755284984205],72,"lockfileKey","1755284987385-esm.town_v_std_reactHonoStarter@72-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_93":94,"_95":96,"_97":43,"_98":99,"_101":687,"_575":692,"_695":696,"_742":743,"_755":-7,"_756":32,"_757":22},{"_103":104,"_95":96,"_105":688,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":-5,"_115":22,"_116":-5,"_117":118,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":689,"_132":690,"_135":691,"_151":22},["D",1747420256725],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_100":137,"_95":43,"_103":138,"_139":104,"_140":141,"_142":143,"_144":110,"_145":146,"_147":148,"_149":96,"_150":94},{"_103":580,"_95":581,"_157":582,"_159":347,"_160":138,"_161":583,"_162":163,"_105":693,"_100":585,"_165":193,"_167":586,"_168":22,"_169":-5,"_98":694},["D",1747608749711],[346,581],"history",[697,699,704,709,714,719,724,729,734,738],{"_103":580,"_160":138,"_157":582,"_95":581,"_167":586,"_165":193,"_100":585,"_159":347,"_105":698,"_161":583,"_169":-5},["D",1747608749711],{"_103":700,"_160":138,"_157":582,"_95":581,"_167":701,"_165":193,"_100":307,"_159":347,"_105":702,"_161":703,"_169":-5},"6ee2313c-3290-11f0-b8c8-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { SearchPage } from \"./components/SearchPage.tsx\";\nimport { PackageDetail } from \"./components/PackageDetail.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) throw new Error(\"No root element found\");\n\n// Check if we're on a package page\nconst packageName = (window as any).packageName;\n\nif (packageName) {\n createRoot(root).render();\n} else {\n createRoot(root).render();\n}\n",["D",1747425636539],392,{"_103":705,"_160":138,"_157":582,"_95":581,"_167":706,"_165":193,"_100":241,"_159":347,"_105":707,"_161":708,"_169":-5},"4c4a69f8-328d-11f0-8574-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { SearchPage } from \"./components/SearchPage.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) throw new Error(\"No root element found\");\n\ncreateRoot(root).render();\n",["D",1747424290005],348,{"_103":710,"_160":138,"_157":582,"_95":581,"_167":711,"_165":193,"_100":630,"_159":347,"_105":712,"_161":713,"_169":-5},"3e4dd7c4-3286-11f0-9d8b-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { Search } from \"./components/Search.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) throw new Error(\"No root element found\");\n\ncreateRoot(root).render();\n",["D",1747421260065],84,{"_103":715,"_160":138,"_157":582,"_95":581,"_167":716,"_165":193,"_100":545,"_159":347,"_105":717,"_161":718,"_169":-5},"3ba78970-3286-11f0-914f-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { Search } from \"./components/Search.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) { throw new Error(\"No root element found\"); }\n\ncreateRoot(root).render();\n",["D",1747421255624],83,{"_103":720,"_160":138,"_157":582,"_95":581,"_167":721,"_165":193,"_100":463,"_159":347,"_105":722,"_161":723,"_169":-5},"32188544-3286-11f0-9220-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { Search } from \"./components/Search.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();\n",["D",1747421239575],82,{"_103":725,"_160":138,"_157":582,"_95":581,"_167":726,"_165":193,"_100":269,"_159":347,"_105":727,"_161":728,"_169":-5},"2e59c72e-3286-11f0-bff7-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/Search.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();\n",["D",1747421233304],80,{"_103":730,"_160":138,"_157":582,"_95":581,"_167":731,"_165":193,"_100":213,"_159":347,"_105":732,"_161":733,"_169":-5},"2df41604-3286-11f0-9066-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/Sear.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();\n\n",["D",1747421232637],79,{"_103":735,"_160":138,"_157":582,"_95":581,"_167":736,"_165":193,"_100":118,"_159":347,"_105":737,"_161":463,"_169":-5},"abe5221c-3284-11f0-ab60-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();\n\n",["D",1747420584938],{"_103":739,"_160":138,"_157":582,"_95":581,"_167":740,"_165":193,"_100":32,"_159":347,"_105":741,"_161":118,"_169":-5},"e848aafe-3283-11f0-bd7a-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",["D",1747420256725],"versions",[744,746,747,748,749,750,751,752,753,754],{"_575":697,"_745":699},"previous",{"_575":699,"_745":704},{"_575":704,"_745":709},{"_575":709,"_745":714},{"_575":714,"_745":719},{"_575":719,"_745":724},{"_575":724,"_745":729},{"_575":729,"_745":734},{"_575":734,"_745":738},{"_575":738,"_745":-5},"versionNumber","page","hasNext","actionData","errors"]

History for index.tsx