/** * This val creates an enhanced NPM package explorer using the npm registry API. * It displays a grid of npm packages with basic information, categories, and navigation. * The approach uses React for the frontend and fetch for API calls. * It includes a details view for each package, a link to the npm page, and category navigation. * Icons are added for each category, and additional pill boxes are included for specific topics. * Clicking on a category pill box loads related packages. * The app includes a left column for categories and a right column for package details. */ /** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useState, useCallback } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const ITEMS_PER_PAGE = 30; // Icon mapping for categories const categoryIcons = { all: "🌐", popular: "🔥", new: "✨", frontend: "🖥️", backend: "🖧", tools: "🛠️", css: "🎨", obsidian: "📓", architecture: "🏛️", bim: "🏗️", geojson: "🗺️", city: "🏙️", "3d": "🧊", projects: "📁", interior: "🛋️", furniture: "🪑", construction: "🚧", utilities: "🔧", security: "🔒", database: "💾", testing: "🧪", performance: "⚡", devops: "🚀", api: "🔌", authentication: "🔑", deployment: "📦", analytics: "📊", data: "📚", animations: "🎞️", forms: "📝", plan: "📝", floorplan: "🔄", "parametric": "🔧", "responsive-grids": "🔲", "svg-editors": "✏️", "product-sourcing": "📦", "shipping-calculators": "🚚", "order-management": "📋", "payment-gateways": "💳", "ecommerce-platforms": "🛒", "supplier-integration": "🔗", "shopping-carts": "🛍️", "product-catalogs": "📚", mesh: "🕸️", sculpting: "🎭", "seamless-textures": "🔄", "ambient-lighting": "🌤️", "dynamic-lighting": "🌟", "svg-optimization": "🗜️", "icon-design": "✒️", "svg-animations": "🎥", "flat-illustration": "🟩", "isometric-illustration": "🔺", "digital-painting": "🎨", "css-animations": "🌀", "javascript-animations": "💻", keyframes: "🎥", "fluid-layouts": "💧", "media-queries": "📏", breakpoints: "📐", flexbox: "📐", "customer-reviews": "⭐", "storefront-themes": "🎨", "multi-language": "🌍", "multi-currency": "💱", "invoice": "📝", "pdf": "📄", "tax-calculations": "💰", "payment-tracking": "📊", "automated-reminders": "⏰", "recurring-billing": "🔄", "invoice-customization": "🎨", "invoice-templates": "📑", blender: "🗿", "data-science": "📊", pandas: "🐼", numpy: "🔢", matplotlib: "📈", "machine-learning": "🤖", }; function App() { const [searchTerm, setSearchTerm] = useState(""); const [packages, setPackages] = useState([]); const [selectedPackage, setSelectedPackage] = useState(null); const [category, setCategory] = useState("all"); const [page, setPage] = useState(1); const [loading, setLoading] = useState(false); const fetchPackages = useCallback(async () => { setLoading(true); let url = `/search?q=${encodeURIComponent(searchTerm)}&size=${ITEMS_PER_PAGE}&from=${(page - 1) * ITEMS_PER_PAGE}`; if (category !== "all") { url += `&category=${encodeURIComponent(category)}`; } try { const response = await fetch(url); const data = await response.json(); setPackages(data.objects || []); } catch (error) { console.error("Error fetching packages:", error); setPackages([]); } finally { setLoading(false); } }, [searchTerm, category, page]); useEffect(() => { fetchPackages(); }, [fetchPackages]); const handleSearch = (e) => { e.preventDefault(); setPage(1); fetchPackages(); }; const categories = Object.keys(categoryIcons); return (

NPM Package Explorer

Package Details

{selectedPackage ? (

{selectedPackage.name}

{selectedPackage.description}

Version: {selectedPackage.version}

Author: {selectedPackage.author?.name || "N/A"}

License: {selectedPackage.license || "N/A"}

Last Updated: {new Date(selectedPackage.date).toLocaleDateString()}

View on npm

{selectedPackage.links && (

Links:

Homepage
Repository
Issues

)}

) :

Select a package to view details

}

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

`, { headers: { "content-type": "text/html", }, }, ); } const css = ` body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f0f0f0; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; } h1 { text-align: center; color: #333; } .layout { display: flex; gap: 20px; } .left-column, .right-column { flex: 1; background-color: white; border-radius: 8px; padding: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); max-height: 80vh; overflow-y: auto; } .main-content { flex: 2; } .search-input { width: calc(100% - 100px); padding: 10px; font-size: 16px; margin-bottom: 20px; border: 1px solid #ddd; border-radius: 4px; } .search-button { width: 90px; padding: 10px; font-size: 16px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; } .category-list { display: flex; flex-wrap: wrap; gap: 5px; } .category-pill { display: inline-block; padding: 5px 10px; border: none; border-radius: 20px; background-color: #ddd; cursor: pointer; transition: background-color 0.3s; font-size: 14px; margin-bottom: 5px; } .category-pill.active { background-color: #007bff; color: white; } .package-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; } .package-item { background-color: white; border-radius: 8px; padding: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); cursor: pointer; transition: transform 0.2s; } .package-item:hover { transform: translateY(-5px); } .package-details { margin-top: 20px; } .package-details h3 { margin-bottom: 10px; } .package-details p { margin: 5px 0; } .package-details ul { padding-left: 20px; } .pagination { display: flex; justify-content: center; align-items: center; margin-top: 20px; } .pagination button { margin: 0 10px; padding: 5px 10px; border: none; background-color: #007bff; color: white; cursor: pointer; border-radius: 4px; } .pagination button:disabled { background-color: #ccc; cursor: not-allowed; } footer { text-align: center; margin-top: 20px; font-size: 14px; } footer a { color: #666; text-decoration: none; } footer a:hover { text-decoration: underline; } `; export default server;

NPM Package Explorer

Categories

{pkg.package.name}

Package Details

{selectedPackage.name}

npmExplorer