Skip to content

Commit 12b6f30

Browse files
hyp3rflowhyp3rflow
committed
Implement prototype
1 parent 1facc1e commit 12b6f30

File tree

4 files changed

+162
-13
lines changed

4 files changed

+162
-13
lines changed

‎components/Footer.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/** @jsx h */
2+
/** @jsxFrag Fragment */
3+
import { h, Fragment } from 'preact';
4+
import { tw } from '@twind';
5+
6+
export default function Footer() {
7+
return (
8+
<footer class={tw`flex items-center justify-center h-12 bg-[#00000022]`}>
9+
<p class={tw`text-gray-400`}>
10+
&copy; {new Date().getFullYear()} pbkit authors
11+
</p>
12+
</footer>
13+
);
14+
}

‎main.ts

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,26 @@
44
/// <reference lib="deno.ns" />
55
/// <reference lib="deno.unstable" />
66

7-
import { InnerRenderFunction, RenderContext, start } from "$fresh/server.ts";
8-
import manifest from "./fresh.gen.ts";
7+
import { InnerRenderFunction, RenderContext, start } from '$fresh/server.ts';
8+
import manifest from './fresh.gen.ts';
99

10-
import { config, setup } from "@twind";
11-
import { virtualSheet } from "twind/sheets";
10+
import { config, setup } from '@twind';
11+
import { virtualSheet } from 'twind/sheets';
1212

1313
const sheet = virtualSheet();
1414
sheet.reset();
15-
setup({ ...config, sheet });
15+
setup({
16+
...config,
17+
sheet,
18+
});
1619

1720
function render(ctx: RenderContext, render: InnerRenderFunction) {
18-
const snapshot = ctx.state.get("twind") as unknown[] | null;
21+
const snapshot = ctx.state.get('twind') as unknown[] | null;
1922
sheet.reset(snapshot || undefined);
2023
render();
21-
ctx.styles.splice(0, ctx.styles.length, ...(sheet).target);
24+
ctx.styles.splice(0, ctx.styles.length, ...sheet.target);
2225
const newSnapshot = sheet.reset();
23-
ctx.state.set("twind", newSnapshot);
26+
ctx.state.set('twind', newSnapshot);
2427
}
2528

2629
await start(manifest, { render });

‎routes/index.tsx

Lines changed: 94 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,101 @@
11
/** @jsx h */
2-
import { h } from 'preact';
2+
/** @jsxFrag Fragment */
3+
import { h, Fragment } from 'preact';
34
import { tw } from '@twind';
5+
import { Head } from '$fresh/runtime.ts';
6+
import Footer from '../components/Footer.tsx';
47

58
export default function Home() {
69
return (
7-
<div class={tw`p-4 mx-auto max-w-screen-md`}>
8-
<h1>WRP!</h1>
9-
</div>
10+
<>
11+
<Head>
12+
<title>WRP 🌯 - Webview/worker request protocol</title>
13+
<meta name="description" content="Webview/worker request protocol" />
14+
<link
15+
rel="stylesheet"
16+
as="style"
17+
crossOrigin="true"
18+
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.4/dist/web/static/pretendard.css"
19+
/>
20+
</Head>
21+
<div class={tw`min-h-screen flex flex-col justify-between`}>
22+
<div class={tw` flex flex-col gap-4`}>
23+
<section
24+
class={tw`p-4 max-w-screen-lg tracking-tight bg-[#00000044]`}
25+
></section>
26+
<section class={tw`flex flex-col p-4 max-w-screen-lg tracking-tight`}>
27+
<div class={tw`flex flex-col`}>
28+
<div class={tw`flex justify-between`}>
29+
<h1
30+
class={tw`text(4xl sm:6xl lg:8xl gray-200) font-extrabold mb-2`}
31+
>
32+
<span
33+
class={tw`text-transparent bg-clip-text bg-gradient-to-br from-amber-200 to-red-600 animate-gradient-x bg-repeat`}
34+
>
35+
WRP
36+
</span>{' '}
37+
🌯
38+
</h1>
39+
<div>
40+
<a
41+
href="https://github.com/pbkit/wrp-ts"
42+
target="_blank"
43+
rel="noreferrer"
44+
>
45+
<svg
46+
class={tw`h(8 sm:12 lg:16)`}
47+
viewBox="2 2 20 20"
48+
fill="none"
49+
aria-hidden="true"
50+
>
51+
<path
52+
fill-rule="evenodd"
53+
clip-rule="evenodd"
54+
d="M12 3C7.0275 3 3 7.12937 3 12.2276C3 16.3109 5.57625 19.7597 9.15374 20.9824C9.60374 21.0631 9.77249 20.7863 9.77249 20.5441C9.77249 20.3249 9.76125 19.5982 9.76125 18.8254C7.5 19.2522 6.915 18.2602 6.735 17.7412C6.63375 17.4759 6.19499 16.6569 5.8125 16.4378C5.4975 16.2647 5.0475 15.838 5.80124 15.8264C6.51 15.8149 7.01625 16.4954 7.18499 16.7723C7.99499 18.1679 9.28875 17.7758 9.80625 17.5335C9.885 16.9337 10.1212 16.53 10.38 16.2993C8.3775 16.0687 6.285 15.2728 6.285 11.7432C6.285 10.7397 6.63375 9.9092 7.20749 9.26326C7.1175 9.03257 6.8025 8.08674 7.2975 6.81794C7.2975 6.81794 8.05125 6.57571 9.77249 7.76377C10.4925 7.55615 11.2575 7.45234 12.0225 7.45234C12.7875 7.45234 13.5525 7.55615 14.2725 7.76377C15.9937 6.56418 16.7475 6.81794 16.7475 6.81794C17.2424 8.08674 16.9275 9.03257 16.8375 9.26326C17.4113 9.9092 17.76 10.7281 17.76 11.7432C17.76 15.2843 15.6563 16.0687 13.6537 16.2993C13.98 16.5877 14.2613 17.1414 14.2613 18.0065C14.2613 19.2407 14.25 20.2326 14.25 20.5441C14.25 20.7863 14.4188 21.0746 14.8688 20.9824C16.6554 20.364 18.2079 19.1866 19.3078 17.6162C20.4077 16.0457 20.9995 14.1611 21 12.2276C21 7.12937 16.9725 3 12 3Z"
55+
fill="currentColor"
56+
></path>
57+
</svg>
58+
</a>
59+
</div>
60+
</div>
61+
<p
62+
class={tw`text(2xl sm:3xl lg:4xl gray-200) font-bold tracking-tighter`}
63+
>
64+
Webview<span class={tw`text-gray-300`}>/Worker</span> Request
65+
Protocol
66+
</p>
67+
</div>
68+
<p class={tw`text(xl sm:2xl lg:3xl gray-400) font-bolder`}>
69+
Develop Webview faster powered by Protocol Buffers
70+
</p>
71+
</section>
72+
<section
73+
class={tw`flex flex-col items-end p-4 max-w-screen-lg tracking-tight text-right`}
74+
>
75+
<p class={tw`text(xl sm:2xl lg:3xl gray-200) font-bold`}>
76+
Supports{' '}
77+
<span class={tw`text-orange-300`}>Web, iOS, Android</span> out of
78+
the box
79+
</p>
80+
<p class={tw`text(xl sm:2xl lg:3xl gray-200) font-bold`}>
81+
<span class={tw`text-orange-300`}>Schema first development</span>{' '}
82+
using Protocol Buffers
83+
</p>
84+
<p class={tw`text(xl sm:2xl lg:3xl gray-200) font-bold`}>
85+
Provides <span class={tw`text-orange-300`}>Remote DevTools</span>{' '}
86+
for local app development
87+
</p>
88+
</section>
89+
<section class={tw`flex justify-center`}>
90+
<button
91+
class={tw`px-8 py-4 rounded-full bg-gradient-to-br from-amber-200 to-red-500 text(l sm:xl lg:2xl black) font-bold`}
92+
>
93+
Watch example →
94+
</button>
95+
</section>
96+
</div>
97+
<Footer />
98+
</div>
99+
</>
10100
);
11101
}

‎utils/twind.ts

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,50 @@
11
import { IS_BROWSER } from '$fresh/runtime.ts';
2-
import { Configuration, setup } from 'twind';
2+
import { apply, Configuration, setup } from 'twind';
33
export * from 'twind';
4+
import * as colors from 'twind/colors';
45
export const config: Configuration = {
56
darkMode: 'class',
67
mode: 'silent',
8+
theme: {
9+
extend: {
10+
colors,
11+
fontFamily: {
12+
sans: [
13+
'Pretendard',
14+
'-apple-system',
15+
'BlinkMacSystemFont',
16+
'system-ui',
17+
'Roboto',
18+
'Helvetica Neue',
19+
'Segoe UI',
20+
'Apple SD Gothic Neo',
21+
'Noto Sans KR',
22+
'Malgun Gothic',
23+
'Apple Color Emoji',
24+
'Segoe UI Emoji',
25+
'Segoe UI Symbol',
26+
'sans-serif',
27+
],
28+
},
29+
animation: {
30+
'gradient-x': 'gradient-x 5s ease infinite',
31+
},
32+
keyframes: {
33+
'gradient-x': {
34+
'0%, 100%': {
35+
'background-size': '100% 100%',
36+
'background-position': 'bottom',
37+
},
38+
'50%': {
39+
'background-size': '200% 200%',
40+
'background-position': 'top',
41+
},
42+
},
43+
},
44+
},
45+
},
46+
preflight: {
47+
body: apply`bg-gray-900 text-white min-h-full`,
48+
},
749
};
850
if (IS_BROWSER) setup(config);

0 commit comments

Comments
 (0)