Skip to content

Commit 5060ec2

Browse files
load1n9load1n9
committed
feat: improve ui
1 parent 99b6a21 commit 5060ec2

17 files changed

+139
-91
lines changed

‎.vscode/extensions.json

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"recommendations": [
3+
"denoland.vscode-deno",
4+
"sastan.twind-intellisense"
5+
]
6+
}

‎.vscode/settings.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"deno.enable": true,
3-
"deno.lint": true,
4-
"deno.unstable": true
5-
}
2+
"deno.enable": true,
3+
"deno.lint": true,
4+
"editor.defaultFormatter": "denoland.vscode-deno"
5+
}

‎components/Footer.tsx

+2-7
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
1-
/** @jsx h */
2-
/** @jsxFrag Fragment */
3-
4-
import { h, tw } from "../client_deps.ts";
5-
61
export default function Footer() {
7-
const container = tw`text-gray-600 text-sm`;
8-
const text = tw`mt-5 flex justify-center text-gray-400 hover:text-gray-400`;
2+
const container = `text-gray-600 text-sm`;
3+
const text = `mt-5 flex justify-center text-gray-400 hover:text-gray-400`;
94
return (
105
<section class={container}>
116
<a class={text} href="https://github.com/denosaurs">© 2022 Denosaurs</a>

‎components/Header.tsx

+4-9
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,8 @@
1-
/** @jsx h */
2-
/** @jsxFrag Fragment */
3-
4-
import { h, tw } from "../client_deps.ts";
5-
61
export default function Header() {
7-
const container = tw`w-full h-64 flex justify-center items-center flex-col border-b-2`;
8-
const title = tw`max-w-screen-sm mt-4 font-bold text(4xl gray-900 center)`;
9-
const subtitle = tw`max-w-screen-sm mt-4 text(xl gray-600 center)`;
10-
const icon = tw`bi bi-github`;
2+
const container = `w-full h-64 flex justify-center items-center flex-col border-b-2`;
3+
const title = `max-w-screen-sm mt-4 font-bold text(4xl gray-900 center)`;
4+
const subtitle = `max-w-screen-sm mt-4 text(xl gray-600 center)`;
5+
const icon = `bi bi-github`;
116
return (
127
<section class={container}>
138
<p class={title}>python.mod.land <a class={icon} href="https://github.com/denosaurs/python.mod.land" style="font-size: 1.5rem;" ></a></p>

‎components/Placeholder.tsx

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
export default function Placeholder() {
2+
return (
3+
<div role="status" class="space-y-2.5 animate-pulse max-w-lg">
4+
<div class="flex items-center space-x-2 w-full">
5+
<div class="h-2.5 bg-gray-200 rounded-full w-32"></div>
6+
<div class="h-2.5 bg-gray-300 rounded-full w-24"></div>
7+
<div class="h-2.5 bg-gray-300 rounded-full w-full"></div>
8+
</div>
9+
<div class="flex items-center w-full space-x-2 max-w-[480px]">
10+
<div class="h-2.5 bg-gray-200 rounded-full w-full"></div>
11+
<div class="h-2.5 bg-gray-300 rounded-full w-full"></div>
12+
<div class="h-2.5 bg-gray-300 rounded-full w-24"></div>
13+
</div>
14+
<div class="flex items-center w-full space-x-2 max-w-[400px]">
15+
<div class="h-2.5 bg-gray-300 rounded-full w-full"></div>
16+
<div class="h-2.5 bg-gray-200 rounded-full w-80"></div>
17+
<div class="h-2.5 bg-gray-300 rounded-full w-full"></div>
18+
</div>
19+
<div class="flex items-center w-full space-x-2 max-w-[480px]">
20+
<div class="h-2.5 bg-gray-200 rounded-full w-full"></div>
21+
<div class="h-2.5 bg-gray-300 rounded-full w-full"></div>
22+
<div class="h-2.5 bg-gray-300 rounded-full w-24"></div>
23+
</div>
24+
<div class="flex items-center w-full space-x-2 max-w-[440px]">
25+
<div class="h-2.5 bg-gray-300 rounded-full w-32"></div>
26+
<div class="h-2.5 bg-gray-300 rounded-full w-24"></div>
27+
<div class="h-2.5 bg-gray-200 rounded-full w-full"></div>
28+
</div>
29+
<div class="flex items-center w-full space-x-2 max-w-[360px]">
30+
<div class="h-2.5 bg-gray-300 rounded-full w-full"></div>
31+
<div class="h-2.5 bg-gray-200 rounded-full w-80"></div>
32+
<div class="h-2.5 bg-gray-300 rounded-full w-full"></div>
33+
</div>
34+
<span class="sr-only">Loading...</span>
35+
</div>)
36+
}

‎deno.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"tasks": {
3+
"start": "deno run -A --watch=static/,routes/ dev.ts"
4+
},
5+
"importMap": "./import_map.json",
6+
"compilerOptions": {
7+
"jsx": "react-jsx",
8+
"jsxImportSource": "preact"
9+
}
10+
}

‎dev.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
#!/usr/bin/env -S deno run -A --watch=static/,routes/
2+
3+
import dev from "$fresh/dev.ts";
4+
5+
await dev(import.meta.url, "./main.ts");

‎fresh.gen.ts

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
1-
// DO NOT EDIT. This file is generated by `fresh`.
1+
// DO NOT EDIT. This file is generated by fresh.
22
// This file SHOULD be checked into source version control.
3-
// To update this file, run `fresh manifest`.
3+
// This file is automatically updated during development when running `dev.ts`.
44

5+
import config from "./deno.json" assert { type: "json" };
56
import * as $0 from "./routes/[name].tsx";
6-
import * as $1 from "./routes/_render.ts";
7-
import * as $2 from "./routes/index.tsx";
7+
import * as $1 from "./routes/index.tsx";
88
import * as $$0 from "./islands/List.tsx";
99
import * as $$1 from "./islands/Module.tsx";
1010

1111
const manifest = {
1212
routes: {
13-
"./routes/pkg/[name].tsx": $0,
14-
"./routes/_render.ts": $1,
15-
"./routes/index.tsx": $2,
13+
"./routes/[name].tsx": $0,
14+
"./routes/index.tsx": $1,
1615
},
1716
islands: {
1817
"./islands/List.tsx": $$0,
1918
"./islands/Module.tsx": $$1,
2019
},
2120
baseUrl: import.meta.url,
21+
config,
2222
};
2323

2424
export default manifest;

‎import_map.json

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"imports": {
3+
"$fresh/": "https://deno.land/x/[email protected]/",
4+
"preact": "https://esm.sh/[email protected]",
5+
"preact/": "https://esm.sh/[email protected]/",
6+
"preact-render-to-string": "https://esm.sh/*[email protected]/",
7+
"@preact/signals": "https://esm.sh/*@preact/[email protected]",
8+
"@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
9+
"twind": "https://esm.sh/[email protected]",
10+
"twind/": "https://esm.sh/[email protected]/",
11+
"gfm": "https://deno.land/x/[email protected]/mod.ts"
12+
}
13+
}

‎islands/List.tsx

+7-10
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
/** @jsx h */
2-
/** @jsxFrag Fragment */
3-
4-
import { h, tw, useEffect, useState } from "../client_deps.ts";
1+
import { useEffect, useState } from "preact/hooks";
52

63
type Top = {
74
rows: {
@@ -12,9 +9,9 @@ type Top = {
129

1310
// deno-lint-ignore no-explicit-any
1411
function Card({index, name, count}: any) {
15-
const row = tw`border-b-2 leading-10 hover:bg-gray-100 cursor-pointer`
12+
const row = `border-b-2 leading-10 hover:bg-gray-100 cursor-pointer`
1613
return (
17-
<tr class={row} onClick={() => {window.location.replace(`pkg/${name}`)}}>
14+
<tr class={row} onClick={() => {window.location.replace(`${name}`)}}>
1815
<td class="font-bold">#{index}</td>
1916
<td>{name}</td>
2017
<td class="font-bold">{count}</td>
@@ -24,10 +21,10 @@ function Card({index, name, count}: any) {
2421

2522
export default function List() {
2623
const [data, setData] = useState([] as h.JSX.Element[]);
27-
const container = tw`max-w-screen-sm mx-auto px(4 sm:4 md:4) space-y-3`;
28-
const list = tw`max-w-screen-sm mt-4 text(lg gray-600 center)`;
29-
const table = tw`w-full table-auto mt-2`
30-
const header = tw`border(b-2 t-2) leading-10`
24+
const container = `max-w-screen-sm mx-auto px(4 sm:4 md:4) space-y-3`;
25+
const list = `max-w-screen-sm mt-4 text(lg gray-600 center)`;
26+
const table = `w-full table-auto mt-2`
27+
const header = `border(b-2 t-2) leading-10`
3128
useEffect(() => {
3229
fetch(
3330
"https://hugovk.github.io/top-pypi-packages/top-pypi-packages-30-days.min.json",

‎islands/Module.tsx

+16-15
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,37 @@
1-
/** @jsx h */
2-
/** @jsxFrag Fragment */
3-
4-
import { h, tw, useEffect, useState } from "../client_deps.ts";
5-
1+
import { useEffect, useState } from "preact/hooks";
2+
import Placeholder from "../components/Placeholder.tsx";
3+
import * as marked from "https://cdn.jsdelivr.net/npm/marked/marked.min.js";
64
// deno-lint-ignore no-explicit-any
7-
function Card({name, description}: any) {
8-
const title = tw`px-4 py-3 mb-4 font-bold text(2xl gray-900 center)`;
9-
const subtitle = tw`px-4 py-3 mb-4 text(xl gray-600 center)`;
5+
function Card({name, summary, description, version, source_code}: any) {
6+
const title = `px-4 py-3 mb-4 font-bold text(2xl gray-900 center)`;
7+
const subtitle = `px-4 py-3 mb-4 text(xl gray-600 center)`;
8+
const descript = `px-4 py-3 mb-4 text(lg gray-400 center) mt-4 max-h-24 overflow-y-auto`;
9+
const num = `px-2 py-2 mb-4 font-bold text(sm gray-500 center)`;
1010

1111
return (
1212
<div>
13-
<div class={title}>{name}</div>
14-
<div class={subtitle}>{description}</div>
13+
<div class={title}>{name} <a class={`bi bi-github`} href={source_code} style="font-size: 1rem;" ></a> <a class={num}>v.{version}</a></div>
14+
<div class={subtitle}>{summary}</div>
15+
16+
<div class={descript} dangerouslySetInnerHTML={{ __html: marked.parse(description) }}></div>
1517
</div>
1618
);
1719
}
1820

1921
export default function Module({name}:any) {
20-
const [data, setData] = useState(<div>loading...</div> as h.JSX.Element);
21-
const container = tw`max-w-screen-sm mx-auto px(4 sm:4 md:4) space-y-3`;
22+
const [data, setData] = useState(<Placeholder /> as h.JSX.Element);
23+
const container = `max-w-screen-sm mx-auto px(4 sm:4 md:4) space-y-3`;
2224
useEffect(() => {
2325
fetch(
2426
`https://pypi.org/pypi/${name}/json/`,
2527
)
2628
.then((r) => r.json())
2729
.then((r) => {
28-
console.log(r)
29-
setData(<Card name={r.info.name} description={r.info.summary} />);
30+
setData(<Card name={r.info.name} summary={r.info.summary} description={r.info.description} version={r.info.version} source_code={r.info.project_urls["Source Code"]}/>);
3031
});
3132
}, []);
3233
return (
33-
<div class={container} onLoad={() => setData(<div>loading...</div> as h.JSX.Element)}>
34+
<div class={container} onLoad={() => setData(<Placeholder /> as h.JSX.Element)}>
3435
{data}
3536
</div>
3637
);

‎main.ts

+7-5
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
1-
#!/usr/bin/env -S deno run --allow-read --allow-net --allow-env --allow-run --allow-hrtime --no-check --watch
2-
31
/// <reference no-default-lib="true" />
42
/// <reference lib="dom" />
3+
/// <reference lib="dom.iterable" />
54
/// <reference lib="dom.asynciterable" />
65
/// <reference lib="deno.ns" />
7-
/// <reference lib="deno.unstable" />
86

9-
import { start } from "./server_deps.ts";
7+
import { start } from "$fresh/server.ts";
108
import manifest from "./fresh.gen.ts";
119

12-
await start(manifest);
10+
import twindPlugin from "$fresh/plugins/twind.ts";
11+
import twindConfig from "./twind.config.ts";
12+
13+
await start(manifest, { plugins: [twindPlugin(twindConfig)] });
14+

‎routes/[name].tsx

+5-7
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
1-
/** @jsx h */
2-
/** @jsxFrag Fragment */
3-
import { Fragment, h, tw, hljs } from "../client_deps.ts";
1+
import { hljs } from "../client_deps.ts";
42
import Header from "../components/Header.tsx";
53
import Footer from "../components/Footer.tsx";
64
import Module from "../islands/Module.tsx";
75
import { Handlers, css } from "../server_deps.ts";
86
import { checkExist, isHtmlRequest } from "../utils.ts";
97
// deno-lint-ignore no-explicit-any
108
function Block(props: any) {
11-
const block = tw`bg-gray-100 p-3 hljs rounded`;
9+
const block = `bg-gray-100 p-3 hljs rounded`;
1210
// deno-lint-ignore no-explicit-any
1311
const code = (hljs as any).highlight(props.code, { language: 'javascript' }).value
1412
return (
@@ -31,8 +29,8 @@ export const handler: Handlers = {
3129
};
3230

3331
export default function ModulePage(ctx: any) {
34-
const main = tw`max-w-screen-sm mx-auto px(4 sm:4 md:4) space-y-3 mb-8 pt-10`;
35-
const text = tw`text-gray-600 text-lg`;
32+
const main = `max-w-screen-sm mx-auto px(4 sm:4 md:4) space-y-3 mb-8 pt-10`;
33+
const text = `text-gray-600 text-lg`;
3634
return <html>
3735
<head>
3836
<title>{ctx.params.name} - Python Land</title>
@@ -44,7 +42,7 @@ export default function ModulePage(ctx: any) {
4442
<section class={main}>
4543
<Module name={ctx.params.name}/>
4644
<p class={text}>Import from a URL</p>
47-
<Block code={`import ${ctx.params.name.replace(".", "")} from "https://python.mod.land/pkg/${ctx.params.name}"`}></Block>
45+
<Block code={`import ${ctx.params.name.replace(".", "")} from "${ctx.url.href}"`}></Block>
4846
</section>
4947
<Footer />
5048
</body>

‎routes/_render.ts

-15
This file was deleted.

‎routes/index.tsx

+12-10
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
1-
/** @jsx h */
2-
/** @jsxFrag Fragment */
3-
4-
import { Fragment, h, Head, hljs, tw } from "../client_deps.ts";
1+
import { hljs} from "../client_deps.ts";
52
import { css } from "../server_deps.ts";
63
import Header from "../components/Header.tsx";
74
import Footer from "../components/Footer.tsx";
85
import List from "../islands/List.tsx";
6+
import { Head } from "$fresh/runtime.ts";
97

10-
export default function Index() {
11-
const main = tw`max-w-screen-sm mx-auto px(4 sm:4 md:4) space-y-3 mb-8 pt-8`;
12-
const projects = tw`max-w-screen-sm mx-auto px(4 sm:4 md:4) space-y-3 mb-8 `;
13-
const text = tw`text-gray-600 text-lg`;
148

9+
export default function Index() {
10+
const main = `max-w-screen-sm mx-auto px(4 sm:4 md:4) space-y-3 mb-8 pt-8`;
11+
const projects = `max-w-screen-sm mx-auto px(4 sm:4 md:4) space-y-3 mb-8 `;
12+
const text = `text-gray-600 text-lg`;
13+
function handleSearch(e) {
14+
e.preventDefault()
15+
console.log(e)
16+
}
1517
return (
1618
<>
1719
<Head>
@@ -26,7 +28,7 @@ export default function Index() {
2628
<Header />
2729
<section class={main}>
2830
<p class={text}>Import from a URL</p>
29-
<Block code={'import np from "https://python.mod.land/pkg/numpy"'}></Block>
31+
<Block code={'import np from "https://python.mod.land/numpy"'}></Block>
3032
</section>
3133
<section class={projects}>
3234
<p class={text}>Top Projects</p>
@@ -39,7 +41,7 @@ export default function Index() {
3941

4042
// deno-lint-ignore no-explicit-any
4143
function Block(props: any) {
42-
const block = tw`bg-gray-100 p-3 hljs rounded`;
44+
const block = `bg-gray-100 p-3 hljs rounded`;
4345
// deno-lint-ignore no-explicit-any
4446
const code = (hljs as any).highlight(props.code, { language: 'javascript' }).value
4547
return (

‎server_deps.ts

-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
export * from "https://raw.githubusercontent.com/lucacasonato/fresh/main/server.ts";
21

3-
export { virtualSheet } from "https://esm.sh/[email protected]/sheets";
42
const link =
53
`https://raw.githubusercontent.com/highlightjs/highlight.js/main/src/styles/atom-one-dark.css`;
64
export const css = await fetch(link).then((file) => file.text())

‎twind.config.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { Options } from "$fresh/plugins/twind.ts";
2+
3+
export default {
4+
selfURL: import.meta.url,
5+
} as Options;

0 commit comments

Comments
 (0)