feat: website design

load1n9 · web-flow · commit d751c8528001 · 2022-05-23T13:57:32.000Z
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+    "deno.enable": true,
+    "deno.lint": true,
+    "deno.unstable": true
+}
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -0,0 +1,14 @@
+/** @jsx h */
+/** @jsxFrag Fragment */
+
+import { h, tw } from "../client_deps.ts";
+
+export default function Footer() {
+  const container = tw`text-gray-600 text-sm`;
+  const text = tw`mt-5 flex justify-center text-gray-400 hover:text-gray-400`;
+  return (
+    <section class={container}>
+      <a class={text} href="https://github.com/denosaurs">© 2022 Denosaurs</a>
+    </section>
+  );
+}
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -4,16 +4,16 @@
 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>
-    );
+  const container = tw`w-full h-64 flex justify-center items-center flex-col border-b-2`;
+  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)`;
+  const icon = tw`bi bi-github`;
+  return (
+    <section class={container}>
+      <p class={title}>python.mod.land <a class={icon} href="https://github.com/denosaurs/python.mod.land" style="font-size: 1.5rem;" ></a></p>
+      <p class={subtitle}>
+        A fast CDN to use statically typed Python modules in Deno.
+      </p>
+    </section>
+  );
 }
-  
diff --git a/routes/[name].tsx b/routes/[name].tsx
@@ -2,16 +2,17 @@
 /** @jsxFrag Fragment */
 import { Fragment, h, tw, hljs } from "../client_deps.ts";
 import Header from "../components/Header.tsx";
+import Footer from "../components/Footer.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
+  const code = (hljs as any).highlight(props.code, { language: 'javascript' }).value
   return (
     <div class={block}>
-      <pre><code dangerouslySetInnerHTML={{__html: code}}></code></pre>
+      <pre><code dangerouslySetInnerHTML={{ __html: code }}></code></pre>
     </div>
   );
 }
@@ -30,14 +31,20 @@ export const handler: Handlers = {
 
 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>
-  </>
+  const text = tw`text-gray-600 text-lg pt-8`;
+  return <html>
+    <head>
+      <title>{ctx.params.name} - Python Land</title>
+    </head>
+    <body>
+      <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>
+      <Footer />
+    </body>
+  </html>
 }
 
diff --git a/routes/index.tsx b/routes/index.tsx
@@ -4,32 +4,35 @@
 import { Fragment, h, Head, hljs, tw } from "../client_deps.ts";
 import { css } from "../server_deps.ts";
 import Header from "../components/Header.tsx";
+import Footer from "../components/Footer.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 mb-8`;
+  const main = tw`max-w-screen-sm mx-auto px(4 sm:4 md:4) space-y-3 mb-8 pt-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 (
     <>
       <Head>
-        <title>Python Land</title>
+        <title>Python Land - A fast CDN to use statically typed Python modules in Deno.</title>
         <meta
           name="description"
           content="A fast CDN to use statically typed Python modules in Deno."
         />
-        <style>{css}</style>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.2/font/bootstrap-icons.css"/>
+          <style>{css}</style>
       </Head>
-      <Header/>
+      <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/>
+        <List />
       </section>
+      <Footer />
     </>
   );
 }
@@ -38,10 +41,10 @@ export default function Index() {
 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
+  const code = (hljs as any).highlight(props.code, { language: 'javascript' }).value
   return (
     <div class={block}>
-      <pre><code dangerouslySetInnerHTML={{__html: code}}></code></pre>
+      <pre><code dangerouslySetInnerHTML={{ __html: code }}></code></pre>
     </div>
   );
 }
diff --git a/utils.ts b/utils.ts
@@ -6,6 +6,4 @@ export function checkExist(name: string, callback: (exists: any) => void) {
   });
 }
 
-export function isHtmlRequest(req: Request) {
-  return accepts(req, "application/*", "text/html") === "text/html";
-}
+export const isHtmlRequest = (req: Request) =>  accepts(req, "application/*", "text/html") === "text/html";

Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,4 @@ export function checkExist(name: string, callback: (exists: any) => void) {`
`6`	`6`	`});`
`7`	`7`	`}`
`8`	`8`
`9`		`-export function isHtmlRequest(req: Request) {`
`10`		`- return accepts(req, "application/*", "text/html") === "text/html";`
`11`		`-}`
	`9`	`+export const isHtmlRequest = (req: Request) => accepts(req, "application/*", "text/html") === "text/html";`