Skip to content

Commit 210ee68

Browse files
kitsonkkitsonk
committed
add acorn landing page
1 parent 09bcb1c commit 210ee68

File tree

6 files changed

+244
-6
lines changed

6 files changed

+244
-6
lines changed

‎fresh.gen.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
import * as $_404 from "./routes/_404.tsx";
66
import * as $_app from "./routes/_app.tsx";
7+
import * as $acorn from "./routes/acorn.tsx";
78
import * as $index from "./routes/index.tsx";
89
import * as $CopyToClipboard from "./islands/CopyToClipboard.tsx";
910
import * as $PMSelect from "./islands/PMSelect.tsx";
@@ -13,6 +14,7 @@ const manifest = {
1314
routes: {
1415
"./routes/_404.tsx": $_404,
1516
"./routes/_app.tsx": $_app,
17+
"./routes/acorn.tsx": $acorn,
1618
"./routes/index.tsx": $index,
1719
},
1820
islands: {

‎islands/PMSelect.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import CopyText from "../components/CopyText.tsx";
22
import { useRef } from "preact/hooks";
33

4-
export default function PMSelect() {
4+
export default function PMSelect(
5+
{ pkg = "@oak/oak" }: { pkg?: string },
6+
) {
57
const detailsRef = useRef<HTMLDetailsElement>(null);
68

79
return (
@@ -123,19 +125,19 @@ export default function PMSelect() {
123125
</nav>
124126
<div>
125127
<div id="pm-deno-content" class="my-4">
126-
<CopyText text="deno add @oak/oak" />
128+
<CopyText text={`deno add ${pkg}`} />
127129
</div>
128130
<div id="pm-npm-content" class="my-4">
129-
<CopyText text="npx jsr add @oak/oak" />
131+
<CopyText text={`npx jsr add ${pkg}`} />
130132
</div>
131133
<div id="pm-yarn-content" class="my-4">
132-
<CopyText text="yarn dlx jsr add @oak/oak" />
134+
<CopyText text={`yarn dlx jsr add ${pkg}`} />
133135
</div>
134136
<div id="pm-pnpm-content" class="my-4">
135-
<CopyText text="pnpm dlx jsr add @oak/oak" />
137+
<CopyText text={`pnpm dlx jsr add ${pkg}`} />
136138
</div>
137139
<div id="pm-bun-content" class="my-4">
138-
<CopyText text="bunx jsr add @oak/oak" />
140+
<CopyText text={`bunx jsr add ${pkg}`} />
139141
</div>
140142
</div>
141143
</div>

‎routes/_app.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,20 @@ export default function App({ Component }: PageProps) {
55
<head lang="en-AU">
66
<meta charset="utf-8" />
77
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
9+
<meta name="twitter:card" content="summary_large_image" />
10+
<meta name="twitter:domain" content="oakserver.org" />
11+
<meta name="twitter:site" content="@kitsonk" />
12+
<meta name="twitter:creator" content="@kitsonk" />
13+
14+
<meta property="og:site_name" content="oak: a middleware framework" />
15+
<meta property="og:locale" content="en_AU" />
16+
17+
<meta
18+
name="keywords"
19+
content="deno, node, bun, cloudflare workers, middleware"
20+
/>
21+
822
<title>oak</title>
923
<link rel="stylesheet" href="/styles.css" />
1024
</head>

‎routes/acorn.tsx‎

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
import { Head } from "$fresh/runtime.ts";
2+
3+
import CodeBlock from "../components/CodeBlock.tsx";
4+
import PMSelect from "../islands/PMSelect.tsx";
5+
6+
export default function Acorn() {
7+
const title = "acorn: a focused RESTful framework";
8+
const description =
9+
"acorn, a focused RESTful framework for HTTP requests across Deno, Node.js, Bun and Cloudflare Workers.";
10+
const image = "https://oakserver.org/acorn-social.png";
11+
const alt = "an icon of an acorn";
12+
return (
13+
<>
14+
<Head>
15+
<title>{title}</title>
16+
<meta name="twitter:title" content={title} />
17+
<meta property="og:title" content={title} />
18+
<meta name="twitter:description" content={description} />
19+
<meta property="og:description" content={description} />
20+
<meta name="description" content={description} />
21+
<meta name="twitter:image" content={image} />
22+
<meta name="twitter:image:alt" content={alt} />
23+
<meta property="og:image" content={image} />
24+
<meta property="og:image:alt" content={alt} />
25+
26+
<meta
27+
name="keywords"
28+
content="deno, node, bun, javascript, typescript, cloudflare workers, rest, framework"
29+
/>
30+
31+
<meta property="og:type" content="website" />
32+
</Head>
33+
<section class="bg-white dark:bg-gray-900">
34+
<div class="gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl xl:gap-16 md:grid md:grid-cols-2 sm:py-16 lg:px-6">
35+
<img
36+
class="w-full p-8 lg:p-20 xl:p-32"
37+
src="/acorn_logo.svg"
38+
alt="an icon of an acorn"
39+
/>
40+
<div class="mt-4 md:mt-0">
41+
<h2 class="mb-4 text-4xl tracking-tight font-extrabold text-black dark:text-white">
42+
A RESTful server framework for JavaScript and TypeScript
43+
</h2>
44+
<p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
45+
acorn is a RESTful server framework for handling HTTP requests
46+
across{" "}
47+
<a href="https://deno.com/" target="blank_" class="underline">
48+
Deno
49+
</a>,{" "}
50+
<a href="https://nodejs.org/" target="blank_" class="underline">
51+
Node.js
52+
</a>,{" "}
53+
<a href="https://bun.sh/" target="blank_" class="underline">
54+
Bun
55+
</a>{" "}
56+
and{" "}
57+
<a
58+
href="https://workers.cloudflare.com/"
59+
target="blank_"
60+
class="underline"
61+
>
62+
Cloudflare Workers
63+
</a>.
64+
</p>
65+
<PMSelect pkg="@oak/acorn" />
66+
</div>
67+
</div>
68+
</section>
69+
<section class="bg-white dark:bg-gray-900">
70+
<div class="gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl xl:gap-16 md:grid md:grid-cols-2 sm:py-16 lg:px-6">
71+
<CodeBlock
72+
code={`import { Router } from "@oak/acorn";
73+
74+
const BOOKS = {
75+
"1": { id: 1, title: "The Hound of the Baskervilles" },
76+
"2": { id: 2, title: "It" },
77+
};
78+
79+
const router = new Router();
80+
81+
router.get("/", () => ({ hello: "world" }));
82+
router.get("/books/:id", (ctx) => BOOKS[ctx.params.id]);
83+
84+
router.listen({ port: 3000 });
85+
`}
86+
/>
87+
<div class="mt-4 md:mt-0">
88+
<h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">
89+
Rapidly create endpoints
90+
</h2>
91+
<p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
92+
acorn focuses on the primary use case of handling JSON data in a
93+
RESTful way, with a focused and familiar router API.
94+
</p>
95+
<a
96+
href="https://jsr.io/@oak/acorn/doc/~/Router"
97+
target="_blank"
98+
class="inline-flex items-center text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-primary-900"
99+
>
100+
See the docs
101+
</a>
102+
</div>
103+
</div>
104+
</section>
105+
<footer class="p-4 bg-white sm:p-6 dark:bg-gray-800">
106+
<div class="mx-auto max-w-screen-xl">
107+
<div class="md:flex md:justify-between">
108+
<div class="mb-6 md:mb-0">
109+
<a href="https://flowbite.com" class="flex items-center">
110+
<img
111+
src="/oak_logo_head.svg"
112+
class="mr-3 h-8"
113+
alt="oak Logo"
114+
/>
115+
<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
116+
oak
117+
</span>
118+
</a>
119+
</div>
120+
<div class="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3">
121+
<div>
122+
<h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">
123+
Projects
124+
</h2>
125+
<ul class="text-gray-600 dark:text-gray-400">
126+
<li class="mb-4">
127+
<a href="https://jsr.io/@oak/acorn" class="hover:underline">
128+
acorn
129+
</a>
130+
</li>
131+
<li>
132+
<a
133+
href="https://jsr.io/@oak/commons"
134+
class="hover:underline"
135+
>
136+
Commons
137+
</a>
138+
</li>
139+
</ul>
140+
</div>
141+
<div>
142+
<h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">
143+
Source
144+
</h2>
145+
<ul class="text-gray-600 dark:text-gray-400">
146+
<li class="mb-4">
147+
<a
148+
href="https://jsr.io/@oak/oak"
149+
class="hover:underline"
150+
>
151+
JSR
152+
</a>
153+
</li>
154+
<li>
155+
<a
156+
href="https://github.com/oakserver/oak"
157+
class="hover:underline"
158+
>
159+
GitHub
160+
</a>
161+
</li>
162+
</ul>
163+
</div>
164+
<div>
165+
<h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">
166+
Guidelines
167+
</h2>
168+
<ul class="text-gray-600 dark:text-gray-400">
169+
<li class="mb-4">
170+
<a
171+
href="https://github.com/oakserver/oak/blob/main/docs/CODE_OF_CONDUCT.md"
172+
class="hover:underline"
173+
>
174+
Code of Conduct
175+
</a>
176+
</li>
177+
</ul>
178+
</div>
179+
</div>
180+
</div>
181+
<hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
182+
<div class="sm:flex sm:items-center sm:justify-between">
183+
<span class="text-sm text-gray-500 sm:text-center dark:text-gray-400">
184+
© 2024 oak. All Rights Reserved.
185+
</span>
186+
<div class="flex mt-4 space-x-6 sm:justify-center sm:mt-0">
187+
<a
188+
href="https://github.com/oakserver"
189+
class="text-gray-500 hover:text-gray-900 dark:hover:text-white"
190+
>
191+
<svg
192+
className="w-6 h-6 text-gray-800 dark:text-white"
193+
aria-hidden="true"
194+
xmlns="http://www.w3.org/2000/svg"
195+
width="24"
196+
height="24"
197+
fill="currentColor"
198+
viewBox="0 0 24 24"
199+
>
200+
<path
201+
fill-rule="evenodd"
202+
d="M12.006 2a9.847 9.847 0 0 0-6.484 2.44 10.32 10.32 0 0 0-3.393 6.17 10.48 10.48 0 0 0 1.317 6.955 10.045 10.045 0 0 0 5.4 4.418c.504.095.683-.223.683-.494 0-.245-.01-1.052-.014-1.908-2.78.62-3.366-1.21-3.366-1.21a2.711 2.711 0 0 0-1.11-1.5c-.907-.637.07-.621.07-.621.317.044.62.163.885.346.266.183.487.426.647.71.135.253.318.476.538.655a2.079 2.079 0 0 0 2.37.196c.045-.52.27-1.006.635-1.37-2.219-.259-4.554-1.138-4.554-5.07a4.022 4.022 0 0 1 1.031-2.75 3.77 3.77 0 0 1 .096-2.713s.839-.275 2.749 1.05a9.26 9.26 0 0 1 5.004 0c1.906-1.325 2.74-1.05 2.74-1.05.37.858.406 1.828.101 2.713a4.017 4.017 0 0 1 1.029 2.75c0 3.939-2.339 4.805-4.564 5.058a2.471 2.471 0 0 1 .679 1.897c0 1.372-.012 2.477-.012 2.814 0 .272.18.592.687.492a10.05 10.05 0 0 0 5.388-4.421 10.473 10.473 0 0 0 1.313-6.948 10.32 10.32 0 0 0-3.39-6.165A9.847 9.847 0 0 0 12.007 2Z"
203+
clip-rule="evenodd"
204+
/>
205+
</svg>
206+
</a>
207+
</div>
208+
</div>
209+
</div>
210+
</footer>
211+
</>
212+
);
213+
}

‎static/acorn-social.png‎

65.5 KB
Loading

‎static/acorn_logo.svg‎

Lines changed: 7 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)