feat: top projects list

Author: load1n9

client_deps.ts

@@ -2,9 +2,7 @@ export * from "https://raw.githubusercontent.com/lucacasonato/fresh/main/runtime
 import { IS_BROWSER } from "https://raw.githubusercontent.com/lucacasonato/fresh/main/runtime.ts";
 import { apply, setup, tw } from "https://esm.sh/[email protected]";
 export { apply, setup, tw };
-export {default as hljs} from "https://jspm.dev/[email protected]";
-import {default as hljs} from "https://jspm.dev/[email protected]";
+export { default as hljs } from "https://jspm.dev/[email protected]";
 if (IS_BROWSER) {
   setup({});
-//   hljs.highlightAll()
-}
+}

components/Card.tsx

@@ -0,0 +1,19 @@
+/** @jsx h */
+/** @jsxFrag Fragment */
+
+import { h, tw } from "../client_deps.ts";
+
+export default function Header() {
+    const container = tw`w-full h-64 flex justify-center items-center flex-col`;
+    const title = tw`max-w-screen-sm mt-4 font-bold text(4xl gray-900 center)`;
+    const subtitle = tw`max-w-screen-sm mt-4 text(xl gray-600 center)`;
+    return (
+      <section class={container}>
+        <p class={title}>python.mod.land</p>
+        <p class={subtitle}>
+          A fast CDN to use statically typed Python modules in Deno.
+        </p>
+      </section>
+    );
+}
+  

components/Header.tsx

@@ -5,14 +5,17 @@
 import * as $0 from "./routes/[name].tsx";
 import * as $1 from "./routes/_render.ts";
 import * as $2 from "./routes/index.tsx";
+import * as $$0 from "./islands/List.tsx";
 
 const manifest = {
   routes: {
     "./routes/pkg/[name].tsx": $0,
     "./routes/_render.ts": $1,
     "./routes/index.tsx": $2,
   },
-  islands: {},
+  islands: {
+    "./islands/List.tsx": $$0,
+  },
   baseUrl: import.meta.url,
 };
 

components/List.tsx

@@ -0,0 +1,56 @@
+/** @jsx h */
+/** @jsxFrag Fragment */
+
+import { h, tw, useEffect, useState } from "../client_deps.ts";
+
+type Top = {
+  rows: {
+    download_count: number;
+    project: string;
+  }[];
+};
+
+// deno-lint-ignore no-explicit-any
+function Card({index, name, count}: any) {
+  const row = tw`border-b-2 leading-10 hover:bg-gray-100 cursor-pointer`
+  return (
+    <tr class={row} onClick={() => {window.location.replace(`pkg/${name}`)}}>
+      <td class="font-bold">#{index}</td>
+      <td>{name}</td>
+      <td class="font-bold">{count}</td>
+    </tr>
+  )
+}
+
+export default function List() {
+  const [data, setData] = useState([] as h.JSX.Element[]);
+  const container = tw`max-w-screen-sm mx-auto px(4 sm:4 md:4) space-y-3`;
+  const list = tw`max-w-screen-sm mt-4 text(lg gray-600 center)`;
+  const table = tw`w-full table-auto mt-2`
+  const header = tw`border(b-2 t-2) leading-10`
+  useEffect(() => {
+    fetch(
+      "https://hugovk.github.io/top-pypi-packages/top-pypi-packages-30-days.min.json",
+    )
+      .then((r) => r.json())
+      .then((r) => {
+        const top = (r as Top).rows.slice(0, 10);
+        const data = top.map((mod, i) => <Card index={i+1} name={mod.project} count={mod.download_count} />);
+        setData(data);
+      });
+  }, []);
+  return (
+    <div class={container}>
+      <table class={table}>
+        <thead class={header}>
+          <th class="font-bold">No.</th>
+          <th class="font-bold">Project</th>
+          <th class="font-bold">Downloads</th>
+        </thead>
+        <tbody class={list} onLoad={() => setData([])}>
+          {data}
+        </tbody>
+      </table>
+    </div>
+  );
+}

fresh.gen.ts

@@ -1,19 +1,43 @@
 /** @jsx h */
-import { Handlers } from "../server_deps.ts";
-import { checkExist } from "../utils.ts";
+/** @jsxFrag Fragment */
+import { Fragment, h, tw, hljs } from "../client_deps.ts";
+import Header from "../components/Header.tsx";
+import { Handlers, css } from "../server_deps.ts";
+import { checkExist, isHtmlRequest } from "../utils.ts";
+// deno-lint-ignore no-explicit-any
+function Block(props: any) {
+  const block = tw`bg-gray-100 p-3 hljs rounded`;
+  // deno-lint-ignore no-explicit-any
+  const code = (hljs as any).highlight(props.code, {language: 'javascript'}).value
+  return (
+    <div class={block}>
+      <pre><code dangerouslySetInnerHTML={{__html: code}}></code></pre>
+    </div>
+  );
+}
 export const handler: Handlers = {
   GET(_, ctx) {
-    let exists: boolean;
-    checkExist(ctx.params.name, (_exists: boolean) => {
-      exists = _exists;
-    });
-    const mod = exists!
-      ? `import { python } from "https://deno.land/x/[email protected]/mod.ts";
-export const python_mod = python.import("${ctx.params.name}");
-export default python_mod;`
-      : `404 not found`;
+    if (isHtmlRequest(_)) {
+      return ctx.render()
+    }
+    const mod =
+      `import { python } from "https://deno.land/x/[email protected]/mod.ts";\nexport const python_mod = python.import("${ctx.params.name}");\nexport default python_mod;`;
     return new Response(mod, {
       headers: { "Content-Type": "application/javascript" },
     });
   },
 };
+
+export default function ModulePage(ctx: any) {
+  const main = tw`max-w-screen-sm mx-auto px(4 sm:4 md:4) space-y-3 mb-8`;
+  const text = tw`text-gray-600 text-lg`;
+  return <>
+    <style>{css}</style>
+    <Header/>
+    <section class={main}>
+      <p class={text}>Import from a URL</p>
+      <Block code={`import ${ctx.params.name.replace(".","")} from "https://python.mod.land/pkg/${ctx.params.name}"`}></Block>
+    </section>
+  </>
+}
+

islands/List.tsx

@@ -1,5 +1,3 @@
-// This module adds twind support.
-
 import { setup } from "../client_deps.ts";
 import { RenderContext, RenderFn, virtualSheet } from "../server_deps.ts";
 

routes/[name].tsx

@@ -2,10 +2,13 @@
 /** @jsxFrag Fragment */
 
 import { Fragment, h, Head, hljs, tw } from "../client_deps.ts";
-import { List } from "../components/List.tsx";
+import { css } from "../server_deps.ts";
+import Header from "../components/Header.tsx";
+import List from "../islands/List.tsx";
 
 export default function Index() {
-  const main = tw`max-w-screen-sm mx-auto px(4 sm:4 md:4) space-y-3`;
+  const main = tw`max-w-screen-sm mx-auto px(4 sm:4 md:4) space-y-3 mb-8`;
+  const projects = tw`max-w-screen-sm mx-auto px(4 sm:4 md:4) space-y-3 mb-8 `;
   const text = tw`text-gray-600 text-lg`;
 
   return (
@@ -16,35 +19,24 @@ export default function Index() {
           name="description"
           content="A fast CDN to use statically typed Python modules in Deno."
         />
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css"/>
+        <style>{css}</style>
       </Head>
-      <Hero />
+      <Header/>
       <section class={main}>
         <p class={text}>Import from a URL</p>
         <Block code={'import np from "https://python.mod.land/pkg/numpy"'}></Block>
+      </section>
+      <section class={projects}>
+        <p class={text}>Top Projects</p>
         <List/>
       </section>
     </>
   );
 }
 
-function Hero() {
-  const container = tw`w-full h-64 flex justify-center items-center flex-col`;
-  const title = tw`max-w-screen-sm mt-4 font-bold text(4xl gray-900 center)`;
-  const subtitle = tw`max-w-screen-sm mt-4 text(xl gray-600 center)`;
-  return (
-    <section class={container}>
-      <p class={title}>python.mod.land</p>
-      <p class={subtitle}>
-        A fast CDN to use statically typed Python modules in Deno.
-      </p>
-    </section>
-  );
-}
-
 // deno-lint-ignore no-explicit-any
 function Block(props: any) {
-  const block = tw`bg-gray-100 p-3`;
+  const block = tw`bg-gray-100 p-3 hljs rounded`;
   // deno-lint-ignore no-explicit-any
   const code = (hljs as any).highlight(props.code, {language: 'javascript'}).value
   return (

routes/_render.ts

@@ -1,3 +1,6 @@
 export * from "https://raw.githubusercontent.com/lucacasonato/fresh/main/server.ts";
 
-export { virtualSheet } from "https://esm.sh/[email protected]/sheets";
+export { virtualSheet } from "https://esm.sh/[email protected]/sheets";
+const link =
+  `https://raw.githubusercontent.com/highlightjs/highlight.js/main/src/styles/atom-one-dark.css`;
+export const css = await fetch(link).then((file) => file.text())

routes/index.tsx

@@ -1,6 +1,11 @@
+import { accepts } from "https://deno.land/x/[email protected]/negotiation.ts";
 // deno-lint-ignore no-explicit-any
 export function checkExist(name: string, callback: (exists: any) => void) {
   fetch(`https://pypi.org/pypi/${name}`, { method: "head" }).then((res) => {
     callback(res.status === 200);
   });
 }
+
+export function isHtmlRequest(req: Request) {
+  return accepts(req, "application/*", "text/html") === "text/html";
+}