Skip to content

Commit 05d6979

Browse files
dai-shidai-shi
committed
Merge branch 'main' into feat/server-context
2 parents 7e8ccbb + df6c88d commit 05d6979

27 files changed

+466
-190
lines changed

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@
8181
"engines": {
8282
"node": ">=18.0.0"
8383
},
84+
"prettier": {},
8485
"dependencies": {
8586
"@swc/core": "1.3.64",
8687
"@vitejs/plugin-react": "^4.0.0",

‎tailwind.config.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,13 @@
22
export default {
33
content: ["./website/index.html", "./website/{src,routes}/**/*.{ts,tsx}"],
44
theme: {
5-
extend: {},
5+
colors: {
6+
cCarmine: "#B0452D",
7+
cVanilla: "#ECC5BC",
8+
cBlack: "#392B28",
9+
cWhite: "#FAF7F7",
10+
transparent: "#00000000",
11+
},
612
},
713
plugins: [],
814
};

‎website/src/components/Button.tsx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { ReactNode } from "react";
2+
3+
export function Button(props: {
4+
text: string;
5+
href: string;
6+
icon: ReactNode;
7+
variant: "primary" | "secondary";
8+
}) {
9+
return (
10+
<a
11+
href={props.href}
12+
className={`rounded-full px-4 py-1 flex flex-row items-center gap-1 border border-cBlack ${
13+
props.variant === "primary"
14+
? "bg-cCarmine text-cWhite"
15+
: "bg-transparent"
16+
}`}
17+
>
18+
<p>{props.text}</p>
19+
{props.icon}
20+
</a>
21+
);
22+
}

‎website/src/components/Code.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { Code as BrightCode, BrightProps } from "bright";
22

33
export const Code = ({ children }: { children: string }) => (
4-
<code className="bg-gray-200 p-1 rounded">{children}</code>
4+
<code className="text-cCarmine font-mono rounded-full px-1 py-1">
5+
{children}
6+
</code>
57
);
68

79
export const CodeBlock = ({
@@ -12,8 +14,8 @@ export const CodeBlock = ({
1214
lang: BrightProps["lang"];
1315
}) => (
1416
<BrightCode
15-
className="p-0 !rounded-lg"
16-
theme="poimandres"
17+
className="!p-0 !rounded-2xl overflow-scroll max-w-xs sm:max-w-sm md:max-w-md lg:max-w-full !m-0 border-2 border-cVanilla"
18+
theme="solarized-light"
1719
code={children}
1820
lang={lang}
1921
/>

‎website/src/components/Footer.tsx

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
export const Footer = () => {
2+
return (
3+
<nav className="px-6 md:px-16 py-3 flex gap-4 flex-col md:flex-row justify-between items-center text-sm bg-cCarmine text-cVanilla">
4+
<div>
5+
<h1>
6+
a library by{" "}
7+
<a
8+
className="underline underline-offset-4"
9+
href="https://github.com/dai-shi/"
10+
>
11+
daishi kato
12+
</a>
13+
</h1>
14+
</div>
15+
<div>
16+
<h1>Copyright © 2023</h1>
17+
</div>
18+
{/* pages */}
19+
<div className="flex flex-row gap-4 items-center">
20+
<a
21+
className="underline underline-offset-4"
22+
href="https://github.com/dai-shi/waku#diagrams"
23+
>
24+
architecture
25+
</a>
26+
<a
27+
className="underline underline-offset-4"
28+
href="https://github.com/dai-shi/waku"
29+
>
30+
repository
31+
</a>
32+
</div>
33+
</nav>
34+
);
35+
};

‎website/src/components/IconArrowDown.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export function IconArrowDown() {
2+
return (
3+
<svg
4+
xmlns="http://www.w3.org/2000/svg"
5+
width="24"
6+
height="24"
7+
viewBox="0 0 256 256"
8+
>
9+
<path
10+
fill="currentColor"
11+
d="m204.24 148.24l-72 72a6 6 0 0 1-8.48 0l-72-72a6 6 0 0 1 8.48-8.48L122 201.51V40a6 6 0 0 1 12 0v161.51l61.76-61.75a6 6 0 0 1 8.48 8.48Z"
12+
/>
13+
</svg>
14+
);
15+
}

‎website/src/components/IconChevronRight.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
export function IconChevronRight() {
2+
return (
3+
<svg
4+
xmlns="http://www.w3.org/2000/svg"
5+
width="24"
6+
height="24"
7+
viewBox="0 0 24 24"
8+
strokeWidth="2"
9+
stroke="currentColor"
10+
fill="none"
11+
strokeLinecap="round"
12+
strokeLinejoin="round"
13+
>
14+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
15+
<path d="M9 6l6 6l-6 6"></path>
16+
</svg>
17+
);
18+
}

‎website/src/components/IconFile.tsx

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
export function IconFile() {
2+
return (
3+
<svg
4+
xmlns="http://www.w3.org/2000/svg"
5+
width="16"
6+
height="16"
7+
viewBox="0 0 24 24"
8+
>
9+
<g
10+
fill="none"
11+
stroke="currentColor"
12+
strokeLinecap="round"
13+
strokeLinejoin="round"
14+
strokeWidth="2"
15+
>
16+
<path d="M14 3v4a1 1 0 0 0 1 1h4" />
17+
<path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z" />
18+
</g>
19+
</svg>
20+
);
21+
}

‎website/src/components/IconFolder.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export function IconFolder() {
2+
return (
3+
<svg
4+
xmlns="http://www.w3.org/2000/svg"
5+
width="16"
6+
height="16"
7+
viewBox="0 0 24 24"
8+
>
9+
<path
10+
fill="currentColor"
11+
d="M4 20q-.825 0-1.413-.588T2 18V6q0-.825.588-1.413T4 4h6l2 2h8q.825 0 1.413.588T22 8v10q0 .825-.588 1.413T20 20H4ZM4 6v12h16V8h-8.825l-2-2H4Zm0 0v12V6Z"
12+
/>
13+
</svg>
14+
);
15+
}

‎website/src/components/IconGithub.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
export function IconGithub() {
2+
return (
3+
<svg
4+
xmlns="http://www.w3.org/2000/svg"
5+
width="24"
6+
height="24"
7+
viewBox="0 0 24 24"
8+
strokeWidth="2"
9+
stroke="currentColor"
10+
fill="none"
11+
strokeLinecap="round"
12+
strokeLinejoin="round"
13+
>
14+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
15+
<path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"></path>
16+
</svg>
17+
);
18+
}

‎website/src/components/IconWaku.tsx

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
export function IconWaku() {
2+
return (
3+
<svg
4+
width="109"
5+
height="10mm"
6+
viewBox="0 0 108.389 40"
7+
xmlns="http://www.w3.org/2000/svg"
8+
>
9+
<defs>
10+
<path id="a" d="M127.137 292.176h525.161v332.37H127.137z" />
11+
</defs>
12+
<g
13+
transform="translate(-56.468 -88.446)"
14+
paintOrder="markers stroke fill"
15+
>
16+
<circle cx="76.468" cy="108.446" r="20" fill="#b0452d" />
17+
<text
18+
transform="translate(-8.72 10.67) scale(.26458)"
19+
fontFamily="Vampiro One"
20+
fontWeight="400"
21+
fontSize="144"
22+
fill="#fff"
23+
strokeWidth="25.181"
24+
strokeLinecap="round"
25+
>
26+
<tspan x="257.451" y="420.307">
27+
W<tspan fill="#392b28">aku</tspan>
28+
</tspan>
29+
</text>
30+
</g>
31+
</svg>
32+
);
33+
}

‎website/src/components/MyLink.tsx

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { Link } from "waku/router/server";
2+
3+
const Pending = ({ isPending }: { isPending: boolean }) => (
4+
<div
5+
className="animate-ping w-2 h-2 rounded-full"
6+
style={{
7+
backgroundColor: isPending ? "#B0452D" : "transparent",
8+
transition: "background-color 75ms 100ms",
9+
}}
10+
></div>
11+
);
12+
13+
export const MyLink = (props: {
14+
href: string;
15+
noPending?: boolean;
16+
children: React.ReactNode;
17+
}) => (
18+
<div className="flex flex-row gap-1 items-center">
19+
<Link
20+
href={props.href}
21+
pending={props.noPending ? undefined : <Pending isPending />}
22+
notPending={props.noPending ? undefined : <Pending isPending={false} />}
23+
unstable_prefetchOnEnter
24+
>
25+
{props.children}
26+
</Link>
27+
</div>
28+
);

‎website/src/components/Nav.tsx

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { IconWaku } from "./IconWaku.js";
2+
import { MyLink } from "./MyLink.js";
3+
4+
export const Nav = () => {
5+
return (
6+
<nav className="px-6 md:px-16 py-4 flex gap-4 flex-row justify-between items-center">
7+
{/* logo */}
8+
<div className="w-8 h-8">
9+
<MyLink href="/">
10+
<IconWaku />
11+
</MyLink>
12+
</div>
13+
14+
{/* pages */}
15+
<div className="flex flex-row gap-4 items-center font-bold">
16+
<MyLink href="/">
17+
<h1>Home</h1>
18+
</MyLink>
19+
<MyLink href="/docs/introduction">
20+
<h1>Docs</h1>
21+
</MyLink>
22+
</div>
23+
</nav>
24+
);
25+
};

‎website/src/components/Sidebar.tsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { SidebarGroup } from "./SidebarGroup.js";
2+
import { SidebarItem } from "./SidebarItem.js";
3+
4+
export const Sidebar = () => (
5+
<aside className="md:sticky md:top-10 flex flex-col gap-2">
6+
<SidebarItem
7+
selected={true}
8+
link="/docs/introduction"
9+
text="Introduction"
10+
/>
11+
<SidebarItem link="/docs/installing" text="Installing" />
12+
<SidebarGroup text="Practices">
13+
<SidebarItem link="/docs/practices/minimal" text="Minimal" />
14+
<SidebarItem link="/docs/practices/router" text="Router" />
15+
</SidebarGroup>
16+
</aside>
17+
);

‎website/src/components/SidebarGroup.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { IconFolder } from "./IconFolder.js";
2+
3+
export function SidebarGroup(props: {
4+
text: string;
5+
children: JSX.Element | JSX.Element[];
6+
}) {
7+
return (
8+
<div className="flex flex-col gap-2">
9+
<div className="flex flex-row gap-2 items-center px-4 py-1 rounded-2xl">
10+
<IconFolder />
11+
<h1>{props.text}</h1>
12+
</div>
13+
<div className="flex flex-col gap-2 ps-4">
14+
<>{props.children}</>
15+
</div>
16+
</div>
17+
);
18+
}

‎website/src/components/SidebarItem.tsx

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { IconFile } from "./IconFile.js";
2+
import { MyLink } from "./MyLink.js";
3+
4+
export function SidebarItem(props: {
5+
link: string;
6+
text: string;
7+
selected?: boolean;
8+
}) {
9+
return (
10+
<MyLink href={props.link}>
11+
<div
12+
className={`flex gap-2 items-center px-4 py-1 rounded-2xl ${
13+
props.selected && "bg-cCarmine text-cWhite"
14+
}`}
15+
>
16+
<IconFile />
17+
<p>{props.text}</p>
18+
</div>
19+
</MyLink>
20+
);
21+
}

‎website/src/entries.ts

+2
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ export default defineRouter(
1313
return import(`./routes/${items[0]}.tsx`);
1414
case 2:
1515
return import(`./routes/${items[0]}/${items[1]}.tsx`);
16+
case 3:
17+
return import(`./routes/${items[0]}/${items[1]}/${items[2]}.tsx`);
1618
default:
1719
throw new Error("too deep route");
1820
}

‎website/src/index.html

+20
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,17 @@
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width" />
66
<title>Waku website</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com" />
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap"
11+
rel="stylesheet"
12+
/>
713
<style>
14+
@tailwind base;
15+
@tailwind components;
16+
@tailwind utilities;
17+
818
@keyframes spinner {
919
to {
1020
transform: rotate(360deg);
@@ -19,6 +29,16 @@
1929
border-radius: 50%;
2030
animation: spinner 1s linear infinite;
2131
}
32+
33+
.pattern {
34+
background-color: #faf7f700;
35+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='199' viewBox='0 0 100 199'%3E%3Cg fill='%23ecc5bc' fill-opacity='0.7'%3E%3Cpath d='M0 199V0h1v1.99L100 199h-1.12L1 4.22V199H0zM100 2h-.12l-1-2H100v2z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
36+
}
37+
38+
body {
39+
font-family: "Rubik", sans-serif;
40+
}
41+
2242
#root > .spinner {
2343
margin-top: calc(50% - 18px);
2444
}

‎website/src/main.css

-3
This file was deleted.

0 commit comments

Comments
 (0)