rough out site

oakserver · Jun 4, 2024 · 3a70bcc · 3a70bcc
1 parent 8ac4ea4
commit 3a70bcc
Show file tree

Hide file tree

Showing 27 changed files with 632 additions and 85 deletions.
diff --git a/components/Button.tsx b/components/Button.tsx
diff --git a/components/CopyText.tsx b/components/CopyText.tsx
@@ -0,0 +1,55 @@
+import { useSignal } from "@preact/signals";
+
+export default function CopyText({ text }: { text: string }) {
+  const copied = useSignal(false);
+  return (
+    <div class="bg-gray-800 rounded text-white flex items-center min-w-0">
+      <pre class="overflow-x-auto flex-1 py-2 px-4">{text}</pre>
+      <div class="relative my-2 mr-4">
+        <button
+          aria-label="Copy to Clipboard"
+          class="rounded p-1.5 border border-gray-300 hover:bg-gray-700 relative"
+          onClick={() => {
+            navigator.clipboard.writeText(text);
+            copied.value = true;
+            setTimeout(() => copied.value = false, 1000);
+          }}
+        >
+          {copied.value
+            ? (
+              <svg
+                className="h-4 w-4 text-primary"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden="true"
+              >
+                <path
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M5 11.917 9.724 16.5 19 7.5"
+                />
+              </svg>
+            )
+            : (
+              <svg
+                class="h-4 w-4"
+                viewBox="0 0 15 15"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden="true"
+              >
+                <path
+                  d="M1.55566 2.7C1.55566 2.03726 2.09292 1.5 2.75566 1.5H8.75566C9.41841 1.5 9.95566 2.03726 9.95566 2.7V5.1H12.3557C13.0184 5.1 13.5557 5.63726 13.5557 6.3V12.3C13.5557 12.9627 13.0184 13.5 12.3557 13.5H6.35566C5.69292 13.5 5.15566 12.9627 5.15566 12.3V9.9H2.75566C2.09292 9.9 1.55566 9.36274 1.55566 8.7V2.7ZM6.35566 9.9V12.3H12.3557V6.3H9.95566V8.7C9.95566 9.36274 9.41841 9.9 8.75566 9.9H6.35566ZM8.75566 8.7V2.7L2.75566 2.7V8.7H8.75566Z"
+                  fill="currentColor"
+                >
+                </path>
+              </svg>
+            )}
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git 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
@@ -0,0 +1,5 @@
+import CopyText from "../components/CopyText.tsx";
+
+export default function CopyToClipboard({ text }: { text: string }) {
+  return <CopyText text={text} />;
+}
diff --git a/islands/Counter.tsx b/islands/Counter.tsx
diff --git a/islands/PMSelect.tsx 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<HTMLDetailsElement>(null);
+
+  return (
+    <div>
+      <input type="radio" name="usage" id="pm-deno" class="hidden" checked />
+      <input type="radio" name="usage" id="pm-npm" class="hidden" />
+      <input type="radio" name="usage" id="pm-yarn" class="hidden" />
+      <input type="radio" name="usage" id="pm-pnpm" class="hidden" />
+      <input type="radio" name="usage" id="pm-bun" class="hidden" />
+      <nav class="flex items-center gap-4">
+        <h3 class="text-lg">Use with</h3>
+        <details ref={detailsRef}>
+          <summary class="flex border gap-1 rounded-md py-2 px-3 border-primary-500 dark:border-primary-400 bg-primary-100 dark:bg-primary-900">
+            <div id="pm-deno-dropdown" class="hidden gap-1 items-center">
+              <div class="h-4 *:h-4 *:w-auto flex-none">
+                <img
+                  src="/logos/deno.svg"
+                  alt="Deno logo"
+                />
+              </div>
+              <div class="leading-none">Deno</div>
+            </div>
+            <div id="pm-npm-dropdown" class="hidden gap-1 items-center">
+              <div class="h-4 *:h-4 *:w-auto flex-none">
+                <img
+                  src="/logos/npm_textless.svg"
+                  alt="npm logo"
+                />
+              </div>
+              <div class="leading-none">npm</div>
+            </div>
+            <div id="pm-yarn-dropdown" class="hidden gap-1 items-center">
+              <div class="h-4 *:h-4 *:w-auto flex-none">
+                <img
+                  src="/logos/yarn_textless.svg"
+                  alt="Yarn logo"
+                />
+              </div>
+              <div class="leading-none">Yarn</div>
+            </div>
+            <div id="pm-pnpm-dropdown" class="hidden gap-1 items-center">
+              <div class="h-4 *:h-4 *:w-auto flex-none">
+                <img
+                  src="/logos/pnpm_textless.svg"
+                  alt="pnpm logo"
+                />
+              </div>
+              <div class="leading-none">pnpm</div>
+            </div>
+            <div id="pm-bun-dropdown" class="hidden gap-1 items-center">
+              <div class="h-4 *:h-4 *:w-auto flex-none">
+                <img
+                  src="/logos/bun.svg"
+                  alt="Bun logo"
+                />
+              </div>
+              <div class="leading-none">Bun</div>
+            </div>
+            <div class="rotate-90">
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M5.76748 11.8159C5.5378 11.577 5.54525 11.1972 5.78411 10.9675L8.93431 8L5.78411 5.0325C5.54525 4.80282 5.5378 4.423 5.76748 4.18413C5.99715 3.94527 6.37698 3.93782 6.61584 4.1675L10.2158 7.5675C10.3335 7.68062 10.4 7.83679 10.4 8C10.4 8.16321 10.3335 8.31938 10.2158 8.4325L6.61584 11.8325C6.37698 12.0622 5.99715 12.0547 5.76748 11.8159Z"
+                  fill="currentColor"
+                >
+                </path>
+              </svg>
+            </div>
+          </summary>
+          <div class="relative md:-left-2 z-30">
+            <div
+              class="absolute mt-2 border rounded-md w-48 p-2 border-primary-500 dark:border-primary-400 bg-white dark:bg-black"
+              onClick={() => {
+                if (detailsRef.current) {
+                  detailsRef.current.open = false;
+                }
+              }}
+            >
+              <label for="pm-deno" class="flex gap-2 p-1 items-center">
+                <div class="h-5 *:h-5 *:w-auto flex-none">
+                  <img src="/logos/deno.svg" alt="Deno logo" />
+                </div>
+                <div>Deno</div>
+              </label>
+              <label for="pm-npm" class="flex gap-2 p-1 items-center">
+                <div class="h-5 *:h-5 *:w-auto flex-none">
+                  <img src="/logos/npm_textless.svg" alt="npm logo" />
+                </div>
+                <div>npm</div>
+              </label>
+              <label for="pm-yarn" class="flex gap-2 p-1 items-center">
+                <div class="h-5 *:h-5 *:w-auto flex-none">
+                  <img src="/logos/yarn_textless.svg" alt="yarn logo" />
+                </div>
+                <div>Yarn</div>
+              </label>
+              <label for="pm-pnpm" class="flex gap-2 p-1 items-center">
+                <div class="h-5 *:h-5 *:w-auto flex-none">
+                  <img src="/logos/pnpm_textless.svg" alt="pnpm logo" />
+                </div>
+                <div>pnpm</div>
+              </label>
+              <label for="pm-bun" class="flex gap-2 p-1 items-center">
+                <div class="h-5 *:h-5 *:w-auto flex-none">
+                  <img src="/logos/bun.svg" alt="bun logo" />
+                </div>
+                <div>Bun</div>
+              </label>
+            </div>
+          </div>
+        </details>
+      </nav>
+      <div>
+        <div id="pm-deno-content" class="my-4">
+          <CopyText text="deno add @oak/oak" />
+        </div>
+        <div id="pm-npm-content" class="my-4">
+          <CopyText text="npx jsr add @oak/oak" />
+        </div>
+        <div id="pm-yarn-content" class="my-4">
+          <CopyText text="yarn dlx jsr add @oak/oak" />
+        </div>
+        <div id="pm-pnpm-content" class="my-4">
+          <CopyText text="pnpm dlx jsr add @oak/oak" />
+        </div>
+        <div id="pm-bun-content" class="my-4">
+          <CopyText text="bunx jsr add @oak/oak" />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/routes/_app.tsx b/routes/_app.tsx
@@ -8,7 +8,7 @@ export default function App({ Component }: PageProps) {
         <title>oak-website</title>
         <link rel="stylesheet" href="/styles.css" />
       </head>
-      <body>
+      <body class="bg-white dark:bg-black text-black dark:text-white">
         <Component />
       </body>
     </html>

diff --git a/routes/api/joke.ts b/routes/api/joke.ts
diff --git a/routes/greet/[name].tsx b/routes/greet/[name].tsx
diff --git 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 (
-    <div class="px-4 py-8 mx-auto bg-[#86efac]">
-      <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
+    <section class="bg-white dark:bg-gray-900">
+      <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">
         <img
-          class="my-6"
-          src="/logo.svg"
-          width="128"
-          height="128"
-          alt="the Fresh logo: a sliced lemon dripping with juice"
+          class="w-full p-12 lg:p-28 xl:p-40"
+          src="/oak_logo.svg"
+          alt="dashboard image"
         />
-        <h1 class="text-4xl font-bold">Welcome to Fresh</h1>
-        <p class="my-4">
-          Try updating this message in the
-          <code class="mx-2">./routes/index.tsx</code> file, and refresh.
-        </p>
-        <Counter count={count} />
+        <div class="mt-4 md:mt-0">
+          <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-black dark:text-white">
+            A middleware framework for JavaScript and TypeScript.
+          </h2>
+          <p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
+            oak is a middleware framework for handling HTTP requests across{" "}
+            <a href="https://deno.com/" target="blank_" class="underline">
+              Deno
+            </a>,{" "}
+            <a href="https://nodejs.org/" target="blank_" class="underline">
+              Node.js
+            </a>,{" "}
+            <a href="https://bun.sh/" target="blank_" class="underline">Bun</a>
+            {" "}
+            and{" "}
+            <a
+              href="https://workers.cloudflare.com/"
+              target="blank_"
+              class="underline"
+            >
+              Cloudflare Workers
+            </a>.
+          </p>
+          <PMSelect />
+        </div>
       </div>
-    </div>
+    </section>
   );
 }
diff --git a/static/android-chrome-192x192.png b/static/android-chrome-192x192.png
diff --git a/static/android-chrome-512x512.png b/static/android-chrome-512x512.png
diff --git a/static/apple-touch-icon.png b/static/apple-touch-icon.png
diff --git a/static/favicon-16x16.png b/static/favicon-16x16.png
diff --git a/static/favicon-32x32.png b/static/favicon-32x32.png
diff --git a/static/favicon.ico b/static/favicon.ico
diff --git a/static/logo.svg b/static/logo.svg