add deno blocks icon

Credit: <https://twitter.com/_tanakaworld>
Hosted artwork URL: <https://deno.com/images/deno_logo_4.gif>, <https://deno.com/artwork#:~:text=Instagram-,Pixelated%20Deno,-tanakaworld>

.vscode/settings.json

@@ -15,5 +15,8 @@
   },
   "[javascript]": {
     "editor.defaultFormatter": "denoland.vscode-deno"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }

components/deno_blocks_icon.tsx

@@ -0,0 +1,15 @@
+export interface DenoBlocksIconProps {
+  size?: string;
+}
+
+export default function DenoBlocksIcon(props: DenoBlocksIconProps) {
+  return (
+    <div
+      class="deno-blocks-icon"
+      role="img"
+      aria-label="Deno Blocks"
+      title="Deno Blocks"
+      style={props.size ? { width: props.size, height: props.size } : undefined}
+    />
+  );
+}

fresh.gen.ts

@@ -4,6 +4,7 @@
 
 import * as $_404 from "./routes/_404.tsx";
 import * as $_app from "./routes/_app.tsx";
+import * as $icon from "./routes/icon.tsx";
 import * as $index from "./routes/index.tsx";
 import * as $deno_blocks_ide_island from "./islands/deno_blocks_ide_island.tsx";
 import { type Manifest } from "$fresh/server.ts";
@@ -12,6 +13,7 @@ const manifest = {
   routes: {
     "./routes/_404.tsx": $_404,
     "./routes/_app.tsx": $_app,
+    "./routes/icon.tsx": $icon,
     "./routes/index.tsx": $index,
   },
   islands: {

islands/deno_blocks_ide_island.tsx

@@ -3,11 +3,18 @@ import {
   denoBlockly,
   type DenoBlocklyOptions,
 } from "#/lib/blockly/examples/deno_blockly/mod.ts";
+import DenoBlocksIcon from "#/components/deno_blocks_icon.tsx";
 
-export type DenoBlocksIDEIslandProps = Pick<
-  DenoBlocklyOptions,
-  "getInitialWorkspace" | "onWorkspaceChange"
->;
+export interface DenoBlocksIDEIslandProps extends
+  Pick<
+    DenoBlocklyOptions,
+    "getInitialWorkspace" | "onWorkspaceChange"
+  > {
+  projects?: {
+    id: string;
+    name: string;
+  }[];
+}
 
 export default function DenoBlocksIDEIsland(props: DenoBlocksIDEIslandProps) {
   const blocklyRef = useRef<HTMLDivElement>(null);
@@ -27,12 +34,30 @@ export default function DenoBlocksIDEIsland(props: DenoBlocksIDEIslandProps) {
   }, [blocklyRef, codeRef]);
 
   return (
-    <div className="container">
-      <div className="blockly" ref={blocklyRef} />
-      <div className="output-pane">
-        <pre className="generated-code"><code ref={codeRef}/></pre>
-        <div className="output" />
-      </div>
-    </div>
+    <>
+      <nav>
+        <DenoBlocksIcon />
+
+        <div id="project-selector">
+          <select id="project-list">
+            {props.projects?.map((p) => <option value={p.id}>{p.name}</option>)}
+          </select>
+          <form action="/project" method="POST">
+            <button type="submit" id="new-project">
+              Generate New Project
+            </button>
+          </form>
+        </div>
+      </nav>
+      <main>
+        <div className="container">
+          <div className="blockly" ref={blocklyRef} />
+          <div className="output-pane">
+            <pre className="generated-code"><code ref={codeRef}/></pre>
+            <div className="output" />
+          </div>
+        </div>
+      </main>
+    </>
   );
 }

routes/icon.tsx

@@ -0,0 +1,6 @@
+import DenoBlocksIcon from "#/components/deno_blocks_icon.tsx";
+
+export default function Icon(_request: Request) {
+  // TODO: Load workspace from Deno KV by session ID.
+  return <DenoBlocksIcon size="min(50vw, 50vh)" />;
+}

routes/index.tsx

@@ -3,9 +3,5 @@ import DenoBlocksIDEIsland from "#/islands/deno_blocks_ide_island.tsx";
 
 export default /*async*/ function Home(_request: Request) {
   // TODO: Load workspace from Deno KV by session ID.
-  return (
-    <main>
-      <DenoBlocksIDEIsland />
-    </main>
-  );
+  return <DenoBlocksIDEIsland />;
 }

static/styles.css

@@ -1,3 +1,6 @@
+:root {
+  --nav-height: 42px;
+}
 
 *,
 *::before,
@@ -7,13 +10,13 @@
 
 * {
   margin: 0;
-
 }
 button {
   color: inherit;
 }
 
-button, [role="button"] {
+button,
+[role="button"] {
   cursor: pointer;
 }
 
@@ -42,6 +45,71 @@ html {
     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
+.deno-blocks-icon {
+  background-image: url("/deno-blocks-icon-frame-0.gif");
+  width: var(--nav-height);
+  height: var(--nav-height);
+  image-rendering: pixelated;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+.deno-blocks-icon:hover {
+  background-image: url("/deno-blocks-icon.gif");
+}
+
+nav {
+  position: absolute;
+  height: var(--nav-height);
+  top: 0;
+  left: 0;
+  right: 0;
+  border-bottom: 1px solid #555;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  overflow: hidden;
+}
+
+main {
+  position: absolute;
+  top: var(--nav-height);
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+}
+
+h1 {
+  display: inline-block;
+  margin: 0 0 0 10px;
+  padding: 0;
+  font-size: 28px;
+}
+
+h3 {
+  font-size: 22px;
+  margin: 10px;
+  padding: 0;
+}
+
+select,
+button {
+  height: 28px;
+}
+
+form {
+  display: inline;
+}
+
+#project-list {
+  margin-right: 10px;
+}
+
+#project-selector {
+  display: inline-block;
+}
+
 .container {
   display: flex;
   width: 100%;
@@ -53,15 +121,25 @@ html {
   flex-basis: 100%;
   height: 100%;
   min-width: 600px;
+  position: absolute;
+  right: 30%;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  overflow: hidden;
 }
 
 .output-pane {
   display: flex;
   flex-direction: column;
-  width: 400px;
   flex: 0 0 400px;
   overflow: auto;
   margin: 1rem;
+  position: absolute;
+  width: 30%;
+  right: 0;
+  overflow: auto;
+  border-left: 1px solid #555;
 }
 
 .generated-code {
@@ -71,7 +149,7 @@ html {
 
 .output {
   height: 50%;
- }
+}
 
 .transition-colors {
   transition-property: background-color, border-color, color, fill, stroke;