NPM Package Explorer

\n {\n setSearchTerm(e.target.value);\n setPage(1);\n }}\n className=\"search-input\"\n />\n

\n {[\"all\", \"popular\", \"new\", \"frontend\", \"backend\", \"tools\"].map(cat => (\n \n ))}\n

\n {packages.map(pkg => (\n

setSelectedPackage(pkg.package)}>\n

{pkg.package.name}

{pkg.package.description.slice(0, 100)}...

\n ))}\n

\n \n Page {page}\n \n

\n {selectedPackage && (\n

{selectedPackage.name}

{selectedPackage.description}

Version: {selectedPackage.version}

\n View on npm\n \n

\n )}\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nasync function server(request: Request): Promise {\n const url = new URL(request.url);\n \n if (url.pathname === \"/search\") {\n const searchTerm = url.searchParams.get(\"q\") || \"\";\n const size = url.searchParams.get(\"size\") || \"30\";\n const from = url.searchParams.get(\"from\") || \"0\";\n const category = url.searchParams.get(\"category\") || \"\";\n\n let apiUrl = `https://registry.npmjs.org/-/v1/search?text=${encodeURIComponent(searchTerm)}&size=${size}&from=${from}`;\n \n if (category === \"popular\") {\n apiUrl += \"&popularity=1.0\";\n } else if (category === \"new\") {\n apiUrl += \"&maintenance=0&quality=0&popularity=0\";\n } else if (category !== \"all\" && category) {\n apiUrl += `&keywords=${encodeURIComponent(category)}`;\n }\n\n const response = await fetch(apiUrl);\n const data = await response.json();\n return new Response(JSON.stringify(data), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n\n return new Response(`\n \n \n \n \n \n NPM Package Explorer\n \n \n \n

\n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n background-color: #f0f0f0;\n}\n\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n}\n\nh1 {\n text-align: center;\n color: #333;\n}\n\n.search-input {\n width: 100%;\n padding: 10px;\n font-size: 16px;\n margin-bottom: 20px;\n border: 1px solid #ddd;\n border-radius: 4px;\n}\n\n.category-nav {\n display: flex;\n justify-content: center;\n margin-bottom: 20px;\n}\n\n.category-pill {\n margin: 0 5px;\n padding: 5px 15px;\n border: none;\n border-radius: 20px;\n background-color: #ddd;\n cursor: pointer;\n transition: background-color 0.3s;\n}\n\n.category-pill.active {\n background-color: #007bff;\n color: white;\n}\n\n.package-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n gap: 20px;\n}\n\n.package-item {\n background-color: white;\n border-radius: 8px;\n padding: 15px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n cursor: pointer;\n transition: transform 0.2s;\n}\n\n.package-item:hover {\n transform: translateY(-5px);\n}\n\n.package-details {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: white;\n border-radius: 8px;\n padding: 20px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n z-index: 1000;\n max-width: 80%;\n max-height: 80%;\n overflow-y: auto;\n}\n\n.pagination {\n display: flex;\n justify-content: center;\n align-items: center;\n margin-top: 20px;\n}\n\n.pagination button {\n margin: 0 10px;\n padding: 5px 10px;\n border: none;\n background-color: #007bff;\n color: white;\n cursor: pointer;\n border-radius: 4px;\n}\n\n.pagination button:disabled {\n background-color: #ccc;\n cursor: not-allowed;\n}\n\nfooter {\n text-align: center;\n margin-top: 20px;\n font-size: 14px;\n}\n\nfooter a {\n color: #666;\n text-decoration: none;\n}\n\nfooter a:hover {\n text-decoration: underline;\n}\n`;\n\nexport default server;","deleted","label",[98],"permalink","https://www.val.town/x/all/iconExplorer/code/main.tsx","extension","actionData","errors"]