fusionstrings · fusionstrings · Dec 3, 2021 · Dec 3, 2021 · Dec 3, 2021 · Dec 3, 2021
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/css/style.css b/css/style.css
diff --git a/deploy.js b/deploy.js
diff --git a/dom/main.js b/dom/main.js
diff --git a/functions/main.js b/functions/main.js
diff --git a/functions/package/[[package]].js b/functions/package/[[package]].js
@@ -0,0 +1,100 @@
+import { Helmet, jsx, renderSSR } from "nano-jsx";
+import { marked } from "marked";
+import Package from "../../components/package.js";
+
+async function customFetch(url, options){
+  const response = await fetch(url, options);
+  if(response.status === 404 || response.status === 500){
+    throw new Error(`fetch error on ${url}`);
+  }
+  return response;
+}
+
+async function onRequestGet({ params, env, waitUntil }) {
+  try {
+    const NPM_PROVIDER_URL = "https://ga.jspm.io/npm:";
+    const packageName = params.package.join("/");
+    const baseURL = `${NPM_PROVIDER_URL}${packageName}`;
+    const jspmPackage = await fetch(
+      `${baseURL}/package.json`,
+      {
+        cf: {
+          cacheTtlByStatus: { "200-299": 86400, 404: 1, "500-599": 0 },
+        },
+      },
+    )
+    const readmeFilesToFetch = ["README.md", "readme.md"];
+
+    const readmeResponse = await Promise.any(
+      readmeFilesToFetch.map((file) =>
+      customFetch(
+          `${baseURL}/${file}`,
+          {
+            cf: {
+              cacheTtlByStatus: { "200-299": 86400, 404: 1, "500-599": 0 },
+            },
+          },
+        )
+      ),
+    );
+
+    const readmeFileContent = await readmeResponse.text();
+
+    const readmeHTML = marked.parse(readmeFileContent);
+
+    const {
+      name,
+      description,
+      keywords,
+      version,
+      homepage,
+      license,
+      files,
+      exports,
+    } = await jspmPackage.json();
+
+    const app = renderSSR(
+      jsx
+        `<${Package} name=${name} description=${description} version=${version} homepage=${homepage} license=${license} files=${files} exports=${exports} readme=${readmeHTML} keywords=${keywords} />`,
+    );
+
+    const { body, head, footer } = Helmet.SSR(app);
+
+    const css = `
+      jspm-package-name, jspm-package-version, jspm-package-description, jspm-package-license, jspm-package-file{
+          display: block;
+      }
+    `;
+
+    const html = `
+    <!DOCTYPE html>
+    <html lang="en">
+      <head>
+        <title>${name}@${version} - JSPM</title>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="description" content=${description}>
+        <style>
+          ${css}
+        </style>
+        ${head.join("\n")}
+      </head>
+      <body>
+        ${body}
+        ${footer.join("\n")}
+      </body>
+    </html>`;
+
+    return new Response(html, {
+      headers: {
+        "content-type": "text/html; charset=UTF-8",
+        "Cache-Control": "s-maxage=1500, public, immutable, stale-while-revalidate=1501",
+      },
+    });
+  } catch (error) {
+    console.log(error.stack);
+    return new Response(`${error.message}`, { status: 500 });
+  }
+}
+
+export { onRequestGet };
diff --git a/functions/remove-slash.js b/functions/remove-slash.js
diff --git a/importmap-generator.js b/importmap-generator.js
diff --git a/index.html b/index.html
@@ -13,13 +13,13 @@
     <h1>@jspm/packages / Home Page</h1>
     <nav>
       <ul>
-        <li><a href="packages">packages</a></li>
-        <li><a href="packages/es-module-shims">es-module-shims</a></li>
-        <li><a href="packages/@jspm/generator">@jspm/generator</a></li>
-        <li><a href="packages/react">react</a></li>
+        <li><a href="/">packages</a></li>
+        <li><a href="package/es-module-shims@1.3.5">es-module-shims</a></li>
+        <li><a href="package/@jspm/generator@1.0.0-beta.19">@jspm/generator</a></li>
+        <li><a href="package/react@17.0.2">react</a></li>
       </ul>
     </nav>
   </main>
 </body>
 
-</html>
+</html>