diff --git a/components/Button.tsx b/components/Button.tsx deleted file mode 100644 index f1b80a0..0000000 --- a/components/Button.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { JSX } from "preact"; -import { IS_BROWSER } from "$fresh/runtime.ts"; - -export function Button(props: JSX.HTMLAttributes) { - return ( - + + + ); +} diff --git a/fresh.gen.ts b/fresh.gen.ts index e2b0eb1..227285f 100644 --- a/fresh.gen.ts +++ b/fresh.gen.ts @@ -4,22 +4,20 @@ import * as $_404 from "./routes/_404.tsx"; import * as $_app from "./routes/_app.tsx"; -import * as $api_joke from "./routes/api/joke.ts"; -import * as $greet_name_ from "./routes/greet/[name].tsx"; import * as $index from "./routes/index.tsx"; -import * as $Counter from "./islands/Counter.tsx"; +import * as $CopyToClipboard from "./islands/CopyToClipboard.tsx"; +import * as $PMSelect from "./islands/PMSelect.tsx"; import { type Manifest } from "$fresh/server.ts"; const manifest = { routes: { "./routes/_404.tsx": $_404, "./routes/_app.tsx": $_app, - "./routes/api/joke.ts": $api_joke, - "./routes/greet/[name].tsx": $greet_name_, "./routes/index.tsx": $index, }, islands: { - "./islands/Counter.tsx": $Counter, + "./islands/CopyToClipboard.tsx": $CopyToClipboard, + "./islands/PMSelect.tsx": $PMSelect, }, baseUrl: import.meta.url, } satisfies Manifest; diff --git a/islands/CopyToClipboard.tsx b/islands/CopyToClipboard.tsx new file mode 100644 index 0000000..5c76862 --- /dev/null +++ b/islands/CopyToClipboard.tsx @@ -0,0 +1,5 @@ +import CopyText from "../components/CopyText.tsx"; + +export default function CopyToClipboard({ text }: { text: string }) { + return ; +} diff --git a/islands/Counter.tsx b/islands/Counter.tsx deleted file mode 100644 index f3ea080..0000000 --- a/islands/Counter.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import type { Signal } from "@preact/signals"; -import { Button } from "../components/Button.tsx"; - -interface CounterProps { - count: Signal; -} - -export default function Counter(props: CounterProps) { - return ( -
- -

{props.count}

- -
- ); -} diff --git a/islands/PMSelect.tsx b/islands/PMSelect.tsx new file mode 100644 index 0000000..ca0596f --- /dev/null +++ b/islands/PMSelect.tsx @@ -0,0 +1,143 @@ +import CopyText from "../components/CopyText.tsx"; +import { useRef } from "preact/hooks"; + +export default function PMSelect() { + const detailsRef = useRef(null); + + return ( +
+ + + + + + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ ); +} diff --git a/routes/_app.tsx b/routes/_app.tsx index 1830114..12f18be 100644 --- a/routes/_app.tsx +++ b/routes/_app.tsx @@ -8,7 +8,7 @@ export default function App({ Component }: PageProps) { oak-website - + diff --git a/routes/api/joke.ts b/routes/api/joke.ts deleted file mode 100644 index db17edd..0000000 --- a/routes/api/joke.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { FreshContext } from "$fresh/server.ts"; - -// Jokes courtesy of https://punsandoneliners.com/randomness/programmer-jokes/ -const JOKES = [ - "Why do Java developers often wear glasses? They can't C#.", - "A SQL query walks into a bar, goes up to two tables and says “can I join you?”", - "Wasn't hard to crack Forrest Gump's password. 1forrest1.", - "I love pressing the F5 key. It's refreshing.", - "Called IT support and a chap from Australia came to fix my network connection. I asked “Do you come from a LAN down under?”", - "There are 10 types of people in the world. Those who understand binary and those who don't.", - "Why are assembly programmers often wet? They work below C level.", - "My favourite computer based band is the Black IPs.", - "What programme do you use to predict the music tastes of former US presidential candidates? An Al Gore Rhythm.", - "An SEO expert walked into a bar, pub, inn, tavern, hostelry, public house.", -]; - -export const handler = (_req: Request, _ctx: FreshContext): Response => { - const randomIndex = Math.floor(Math.random() * JOKES.length); - const body = JOKES[randomIndex]; - return new Response(body); -}; diff --git a/routes/greet/[name].tsx b/routes/greet/[name].tsx deleted file mode 100644 index 9c06827..0000000 --- a/routes/greet/[name].tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { PageProps } from "$fresh/server.ts"; - -export default function Greet(props: PageProps) { - return
Hello {props.params.name}
; -} diff --git a/routes/index.tsx b/routes/index.tsx index fc8061e..4fd920f 100644 --- a/routes/index.tsx +++ b/routes/index.tsx @@ -1,25 +1,40 @@ -import { useSignal } from "@preact/signals"; -import Counter from "../islands/Counter.tsx"; +import PMSelect from "../islands/PMSelect.tsx"; export default function Home() { - const count = useSignal(3); return ( -
-
+
+
the Fresh logo: a sliced lemon dripping with juice -

Welcome to Fresh

-

- Try updating this message in the - ./routes/index.tsx file, and refresh. -

- +
+

+ A middleware framework for JavaScript and TypeScript. +

+

+ oak is a middleware framework for handling HTTP requests across{" "} + + Deno + ,{" "} + + Node.js + ,{" "} + Bun + {" "} + and{" "} + + Cloudflare Workers + . +

+ +
-
+ ); } diff --git a/static/android-chrome-192x192.png b/static/android-chrome-192x192.png new file mode 100644 index 0000000..1a9d85c Binary files /dev/null and b/static/android-chrome-192x192.png differ diff --git a/static/android-chrome-512x512.png b/static/android-chrome-512x512.png new file mode 100644 index 0000000..05d310a Binary files /dev/null and b/static/android-chrome-512x512.png differ diff --git a/static/apple-touch-icon.png b/static/apple-touch-icon.png new file mode 100644 index 0000000..f63c236 Binary files /dev/null and b/static/apple-touch-icon.png differ diff --git a/static/favicon-16x16.png b/static/favicon-16x16.png new file mode 100644 index 0000000..7913318 Binary files /dev/null and b/static/favicon-16x16.png differ diff --git a/static/favicon-32x32.png b/static/favicon-32x32.png new file mode 100644 index 0000000..4e783e0 Binary files /dev/null and b/static/favicon-32x32.png differ diff --git a/static/favicon.ico b/static/favicon.ico index 1cfaaa2..b5c3110 100644 Binary files a/static/favicon.ico and b/static/favicon.ico differ diff --git a/static/logo.svg b/static/logo.svg deleted file mode 100644 index ef2fbe4..0000000 --- a/static/logo.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/static/logos/bun.svg b/static/logos/bun.svg new file mode 100644 index 0000000..6576217 --- /dev/null +++ b/static/logos/bun.svg @@ -0,0 +1 @@ + diff --git a/static/logos/deno.svg b/static/logos/deno.svg new file mode 100644 index 0000000..9affa30 --- /dev/null +++ b/static/logos/deno.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/logos/npm_textless.svg b/static/logos/npm_textless.svg new file mode 100644 index 0000000..401f998 --- /dev/null +++ b/static/logos/npm_textless.svg @@ -0,0 +1 @@ +n \ No newline at end of file diff --git a/static/logos/pnpm_textless.svg b/static/logos/pnpm_textless.svg new file mode 100644 index 0000000..d60132a --- /dev/null +++ b/static/logos/pnpm_textless.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/static/logos/yarn_textless.svg b/static/logos/yarn_textless.svg new file mode 100644 index 0000000..86edb18 --- /dev/null +++ b/static/logos/yarn_textless.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/oak_logo.svg b/static/oak_logo.svg new file mode 100644 index 0000000..fb88bf5 --- /dev/null +++ b/static/oak_logo.svg @@ -0,0 +1,142 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/oak_logo_head.svg b/static/oak_logo_head.svg new file mode 100644 index 0000000..6f8c2de --- /dev/null +++ b/static/oak_logo_head.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/site.webmanifest b/static/site.webmanifest new file mode 100644 index 0000000..e028e1b --- /dev/null +++ b/static/site.webmanifest @@ -0,0 +1,19 @@ +{ + "name": "oak", + "short_name": "oak", + "icons": [ + { + "src": "/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "theme_color": "#FF8531", + "background_color": "#FFFDFA", + "display": "standalone" +} diff --git a/static/styles.css b/static/styles.css index bd6213e..73d4629 100644 --- a/static/styles.css +++ b/static/styles.css @@ -1,3 +1,27 @@ @tailwind base; @tailwind components; -@tailwind utilities; \ No newline at end of file +@tailwind utilities; + +#pm-deno:checked ~ *:last-child > :not(#pm-deno-content), +#pm-npm:checked ~ *:last-child > :not(#pm-npm-content), +#pm-yarn:checked ~ *:last-child > :not(#pm-yarn-content), +#pm-pnpm:checked ~ *:last-child > :not(#pm-pnpm-content), +#pm-bun:checked ~ *:last-child > :not(#pm-bun-content) { + @apply hidden; +} + +#pm-deno:checked ~ nav #pm-deno-dropdown, +#pm-npm:checked ~ nav #pm-npm-dropdown, +#pm-yarn:checked ~ nav #pm-yarn-dropdown, +#pm-pnpm:checked ~ nav #pm-pnpm-dropdown, +#pm-bun:checked ~ nav #pm-bun-dropdown { + @apply flex; +} + +#pm-deno:checked ~ nav label[for='pm-deno'], +#pm-npm:checked ~ nav label[for='pm-npm'], +#pm-yarn:checked ~ nav label[for='pm-yarn'], +#pm-pnpm:checked ~ nav label[for='pm-pnpm'], +#pm-bun:checked ~ nav label[for='pm-bun'] { + @apply bg-primary-100 dark:bg-primary-900; +} diff --git a/tailwind.config.ts b/tailwind.config.ts index 99dba8f..fd86162 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,7 +1,168 @@ import { type Config } from "tailwindcss"; +const colors = { + "daintree": { + DEFAULT: "#00202E", + 50: "#8ADBFF", + 100: "#75D5FF", + 200: "#4DC9FF", + 300: "#24BCFF", + 400: "#00AEFA", + 500: "#0092D1", + 600: "#0075A8", + 700: "#005980", + 800: "#003C57", + 900: "#00202E", + 950: "#000C12", + }, + "astronaut-blue": { + DEFAULT: "#003F5C", + 50: "#8FDCFF", + 100: "#7BD5FF", + 200: "#52C8FF", + 300: "#29BCFF", + 400: "#00AFFF", + 500: "#0093D6", + 600: "#0077AE", + 700: "#005B85", + 800: "#003F5C", + 900: "#001924", + 950: "#000508", + }, + "astronaut": { + DEFAULT: "#2C4875", + 50: "#C2D1E8", + 100: "#B3C5E3", + 200: "#96AFD7", + 300: "#7898CC", + 400: "#5A82C1", + 500: "#426CB0", + 600: "#375A93", + 700: "#2C4875", + 800: "#1D2F4C", + 900: "#0D1623", + 950: "#06090F", + }, + "trendy-pink": { + DEFAULT: "#8A508F", + 50: "#E7D7E9", + 100: "#DFCAE1", + 200: "#D0B0D3", + 300: "#C095C4", + 400: "#B17BB5", + 500: "#A161A7", + 600: "#8A508F", + 700: "#673C6B", + 800: "#452847", + 900: "#221423", + 950: "#100A11", + }, + "mulberry": { + DEFAULT: "#BC5090", + 50: "#EFD5E4", + 100: "#E9C6DB", + 200: "#DEA9C8", + 300: "#D38BB5", + 400: "#C76EA3", + 500: "#BC5090", + 600: "#993B73", + 700: "#712B54", + 800: "#481C36", + 900: "#200C18", + 950: "#0B0408", + }, + "bittersweet": { + DEFAULT: "#FF6361", + 50: "#FFF0F0", + 100: "#FFDCDB", + 200: "#FFB4B3", + 300: "#FF8B8A", + 400: "#FF6361", + 500: "#FF2C29", + 600: "#F00300", + 700: "#B80200", + 800: "#800200", + 900: "#470100", + 950: "#2B0100", + }, + "crusta": { + DEFAULT: "#FF8531", + 50: "#FFF2E9", + 100: "#FFE6D4", + 200: "#FFCDAB", + 300: "#FFB583", + 400: "#FF9D5A", + 500: "#FF8531", + 600: "#F86500", + 700: "#C04E00", + 800: "#883700", + 900: "#502000", + 950: "#341500", + }, + "web-orange": { + DEFAULT: "#FFA600", + 50: "#FFE6B8", + 100: "#FFDFA3", + 200: "#FFD17A", + 300: "#FFC252", + 400: "#FFB429", + 500: "#FFA600", + 600: "#C78100", + 700: "#8F5D00", + 800: "#573800", + 900: "#1F1400", + 950: "#030200", + }, + "grandis": { + DEFAULT: "#FFD380", + 50: "#FFF6E6", + 100: "#FFEFD2", + 200: "#FFE1A9", + 300: "#FFD380", + 400: "#FFC048", + 500: "#FFAC10", + 600: "#D78C00", + 700: "#9F6800", + 800: "#664300", + 900: "#2E1E00", + 950: "#120C00", + }, + "woodsmoke": { + DEFAULT: "#151819", + 50: "#BFC7CA", + 100: "#B3BDC1", + 200: "#9DA9AF", + 300: "#86969C", + 400: "#71828A", + 500: "#5E6D73", + 600: "#4C575D", + 700: "#394246", + 800: "#272D30", + 900: "#151819", + 950: "#08090A", + }, +}; + export default { content: [ "{routes,islands,components}/**/*.{ts,tsx}", ], + theme: { + extend: { + colors: { + white: "#FFFDFA", + black: "#000C12", + primary: colors.crusta, + darkBlue: colors.daintree, + blue: colors["astronaut-blue"], + darkPurple: colors.astronaut, + purple: colors["trendy-pink"], + red: colors.mulberry, + darkOrange: colors.crusta, + orange: colors["web-orange"], + yellow: colors.grandis, + gray: colors.woodsmoke, + }, + }, + }, } satisfies Config;