Skip to content

Commit 7161785

Browse files
penalosapenalosa
authored
Address feedback around forms, icons and default worker content (#4024)
* Address feedback * 🤦
1 parent 63e937a commit 7161785

File tree

6 files changed

+99
-59
lines changed

6 files changed

+99
-59
lines changed

‎packages/workers-playground/generate-default-hash.ts

+8
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,14 @@ const metadata = {
2020

2121
worker.set("metadata", JSON.stringify(metadata));
2222

23+
worker.set(
24+
"data.js",
25+
new Blob([await readFile("./welcome/data.js", "utf8")], {
26+
type: "application/javascript+module",
27+
}),
28+
"data.js"
29+
);
30+
2331
worker.set(
2432
"index.js",
2533
new Blob([await readFile("./welcome/index.js", "utf8")], {

‎packages/workers-playground/src/QuickEditor/ToolsPane.tsx

+4
Original file line numberDiff line numberDiff line change
@@ -44,24 +44,28 @@ export default function ToolsPane() {
4444
gap={2}
4545
>
4646
<A
47+
title="Open Worker’s documentation"
4748
target="_blank"
4849
display={"inline-flex"}
4950
href={`https://developers.cloudflare.com/workers`}
5051
>
5152
<Icon
5253
type="documentation"
54+
size={20}
5355
color={
5456
isDarkMode() ? theme.colors.black : theme.colors.gray[5]
5557
}
5658
></Icon>
5759
</A>
5860
<A
61+
title="Join Cloudflare’s developer Discord"
5962
target="_blank"
6063
display={"inline-flex"}
6164
href={`https://discord.gg/cloudflaredev`}
6265
>
6366
<Icon
6467
type="discord"
68+
size={20}
6569
color={
6670
isDarkMode() ? theme.colors.black : theme.colors.gray[5]
6771
}

‎packages/workers-playground/src/QuickEditor/TopBar.tsx

+75-57
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useEffect, useState } from "react";
2-
import { A, Div, Strong } from "@cloudflare/elements";
2+
import { A, Div, Form, Span, Strong } from "@cloudflare/elements";
33
import { createComponent } from "@cloudflare/style-container";
44
import { Button } from "@cloudflare/component-button";
55
import { Icon } from "@cloudflare/component-icon";
@@ -64,68 +64,86 @@ export function TopBar() {
6464
}
6565
}, [hasCopied]);
6666
return (
67-
<>
68-
<Wrapper>
69-
<A href="/" color="inherit">
70-
<WorkersLogo />
71-
</A>
72-
<A target="_blank" href="/playground">
73-
<Button ml={2} type="primary" inverted={true}>
74-
<Icon label="Add" type="plus" mr={1} />
75-
New
76-
</Button>
77-
</A>
78-
<Div ml="auto" mr="auto" display="flex" gap={1} alignItems="center">
79-
{isEditing ? (
80-
<Input
81-
name="path"
82-
value={value}
83-
autoComplete="off"
84-
spellCheck={false}
85-
onChange={(e) => setValue(e.target.value)}
86-
mb={0}
87-
/>
88-
) : (
89-
<Strong>{value}</Strong>
90-
)}
91-
<Button
92-
type="plain"
93-
p={2}
94-
ml={1}
95-
onClick={() => {
96-
if (isEditing) {
97-
persistValue();
98-
}
99-
setIsEditing(!isEditing);
100-
}}
101-
>
102-
<Icon type={isEditing ? "ok" : "edit"} />
103-
</Button>
104-
</Div>
67+
<Wrapper>
68+
<A href="/" color="inherit">
69+
<WorkersLogo />
70+
</A>
71+
<A target="_blank" href="/playground">
72+
<Button ml={2} type="primary" inverted={true}>
73+
<Icon label="Add" type="plus" mr={1} />
74+
New
75+
</Button>
76+
</A>
77+
<Form
78+
ml="auto"
79+
mr="auto"
80+
display="flex"
81+
gap={1}
82+
alignItems="center"
83+
onSubmit={(e) => {
84+
e.preventDefault();
85+
if (isEditing) {
86+
persistValue();
87+
}
88+
}}
89+
>
90+
{isEditing ? (
91+
<Input
92+
name="path"
93+
value={value}
94+
autoComplete="off"
95+
spellCheck={false}
96+
onChange={(e) => setValue(e.target.value)}
97+
mb={0}
98+
/>
99+
) : (
100+
<Strong>{value}</Strong>
101+
)}
105102
<Button
106-
type="primary"
107-
inverted={true}
103+
type="plain"
104+
p={2}
105+
ml={1}
106+
submit={isEditing}
108107
onClick={() => {
109-
void navigator.clipboard.writeText(location.href);
110-
setHasCopied(!hasCopied);
108+
setIsEditing(!isEditing);
111109
}}
112110
>
113-
<Icon label="Add" type="link" mr={1} />
114-
Copy Link
111+
<Icon type={isEditing ? "ok" : "edit"} />
115112
</Button>
116-
<A
117-
target="_blank"
118-
href={`https://dash.cloudflare.com/workers-and-pages/deploy/playground/${value}${location.hash}`}
119-
>
120-
<Button type="primary">Deploy</Button>
121-
</A>
122-
</Wrapper>
113+
</Form>
123114
{hasCopied && (
124-
<AnimatedToast type="success">
125-
<Icon type="ok-sign"></Icon>
126-
Copied Playground link to clipboard
127-
</AnimatedToast>
115+
<Div position="relative">
116+
<Span
117+
height="100%"
118+
display="flex"
119+
gap={1}
120+
alignItems="center"
121+
mr={2}
122+
position={"absolute"}
123+
right={0}
124+
>
125+
<Icon type="ok" color={"green"} size={20}></Icon>
126+
Copied!
127+
</Span>
128+
</Div>
128129
)}
129-
</>
130+
<Button
131+
type="primary"
132+
inverted={true}
133+
onClick={() => {
134+
void navigator.clipboard.writeText(location.href);
135+
setHasCopied(!hasCopied);
136+
}}
137+
>
138+
<Icon label="Add" type="link" mr={1} />
139+
Copy Link
140+
</Button>
141+
<A
142+
target="_blank"
143+
href={`https://dash.cloudflare.com/workers-and-pages/deploy/playground/${value}${location.hash}`}
144+
>
145+
<Button type="primary">Deploy</Button>
146+
</A>
147+
</Wrapper>
130148
);
131149
}

‎packages/workers-playground/src/QuickEditor/defaultHash.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export default "LYVwNgLglgDghgJwgegGYHsHALQBM4RwDcABAEbogB2+CAngLzbPYZb6HYAcXApgExkAnAAYh2AMwBGLgGNsAFn65U2OKhG5sogOw7UEibJ1CeALhYs2wDnG59Bo8dLmLlq9Zu0i9BoyZ4AWAAoAGF0KgheSOwAESgAZxh0BKhoCLMSazwCYhIqOGBeBgAiIsJbEpCQgG8yuCgqAH1gdFxwXhKzEsbcXgAPADoAKwSSgBoS2XRgeGgyKDA0uiaOTu7+EX4JbDFsKSEJqZm5qAWliBXUMDgAczGzAG0SqjbeUabp2YISgF0AXxClmY1ls9gEwj2LnkShUag0Wl0+kMxlMXBC4Ui0QgcUSyVS6SomWytlIBSKpV6AxGY1IqEW0UKxR6NGpoyqYQiURiABU6DBeJk4DAYEtZAQoBFkMM4AA3OAJWQIWAQADUrXaYF41WCUFmmAgJAA7rwwF9eFkEDMSCUTWaZrxBgALCDAMAlIjBYLIABUPuCJB9JAAApcBX1UCQagB5MjDXiyCD-EgAUSosoDPuQXoGySQJAjcHAhpqwQAkL7-WXAyH4AhClGAEq8ACOIF4CSTJAQrfbnfLNeDdYbNTTsuT0Qz1aDQ8QI5T-QTIEJmKi-S7if6A5nPYgIAQVASUYAClbgIleAAeZtJCIJXgAPn+2+zZYVdCosiyvAgsidAAoezbDsIHGEhJzAzcAEoo3LMtpkPdAtUGMB0Fuf8SgACVNVCSFCVCQBUG4exIAB1TAAGteAQBIAEISigz04N3fcqHyXgjRIG9kkPXh-ztc0wNLMsRKdXg4D6GjMmEkSy2OLEYjDdYbTXFAXTdCY4LLf5xjg-5GPLHTgn+T0gWBUFcnBRwoRkGF3HhLwkT8VEgk5BScXiW8CUlIkskwHBSXyJlSgEh1nVdd06QZclmVCopwo0jEuWxbA+QFTJVOQUUGioHVL1o2Jo1CHkAE1jxTEh1LAB9gkvKqSBuKhblKaIShqss6vE3B2o68o4BIP9EHvCBSgAVR5AAxbgShIZAesvPrKogCAYGwXsoFlUoAA1sFGgBBbBwm+eYtRmhDuRGkoAEkUwYXhcFuTpZvmxaYtKWUoA4vMIDO5LIhCqBcAgJ0GD6D7ZF4bAjUB4GwMaNIoDgMBsEVJHiikQYRBmua4MvaAIC1B98MoIjEAtciEComiSGPG46FuK1qFwS9kHxwncaWKgKK0nswFKTs6C1BIxJ-EotKdHtUFKF0VoSMxkCyumGcoGhBjBmArVwQZZAI0mezV3hZWQOLIYF5DZASMY4JxjrkDEiSavLS8KFwOh5twDaBpuS3SmuMmxh6jq9VuEgEgQWRpeWmA5YV7L6cZ1X1c17Xdb9-WwbQYiO0GGAmux+bkA92UXpywPLyLr2FQSELKOohJsFQ250Dalmi7LmBA7LUjTXNWiSFG+8SGBxIaaVhPcCH9Ah5AgtlVlC1+opqnIJ7AgF4LXhWknrSy2FsmSAiTneDAuAaGNMS2NX12N9FdA6ALKAe0TMB74gKfgYte7HvIe-hugJqSAgBgCQOAO9iaETTgvWQ0xqAQEGFpFmHcEFOikA+UiToCAkBHovWuCAAD8LMUHt07ntPCqcs5kVwVgo8AApOUcAADKSoVQDTeCQOglBjTKiiEPDBhoME0CFuwygCBjS8DIDvAkvAADkR5MI8h5MeIe9ZUD0i-B7J+BN76NDISTSBsjwIPQtKhcUhIjyIBVhPD+O8jSYDALgE+YBULQwARwkAk8GroFMRaaYfQvYpAtG-YR+5wJnxAPeamOjMCSW3rJMsPZbxnyCR-YAJBWgkTbFAWQFEX4IKymXIhPJ6BYMNG4mippUCENQQgpBcToxsTKQ1XgqBDTYNDoUUU5MqHA0wSPBA1AqCNBDhEXhI8pGDBICVTh4oqA73umkEpDUNoLzPveQJYluwdmLEeMS+tUwe0NB-EgcwnQgIoPPDxyBhRQFibJNZlV0CcSOQMDpWpKGU2opVU+uAhEe1UdRbE3ZKBRASBMqZ7iZkgLAAkKe8yIA7yOb4wJU97lGj4QY-EqQyBvO+eQZUriRHsXXFgvo-UglLFQI6PJtTbbAFLk7ZALs3a1TthFGqZlLAWU4DwCEThJC2TcHCTwiIfDIn8GiZgQA";
1+
export default "LYVwNgLglgDghgJwgegGYHsHALQBM4RwDcABAEbogB2+CAngLzbPYZb6HYAcXApgExkAnAAYh2AMwBGLgGNsAFn65U2OKhG5sogOw7UEibJ1CeALhYs2wDnG59Bo8dLmLlq9Zu0i9BoyZ4AWAAoAGF0KgheSOwAESgAZxh0BKhoCLMSazwCYhIqOGBeBgAiIsJbEpCQgG8yuCgqAH1gdFxwXhKzEsbcXgAPADoAKwSSgBoS2XRgeGgyKDA0uiaOTu7+EX4JbDFsfn4JqZm5qAWliBXUMDgAczGzAG0SqjbeUabp2YISgF0AXxClmY1ls9gEwj2LnkShUag0Wl0+kMxlMXBC4Ui0QgcUSyVS6SomWytlIBSKpVsIzGpFQi2ihWKJSpoyqYQiURiABU6DBeJk4DAYEtZAQoBFkMM4AA3OAJWQIWAQADUrXaYF41WCA2SSBIfVQcHAEBINWCAEhyfySCUAKL9QrC3gkACCAAUAJITC2Ee6ZZ4DR0aiY2wVQEMlBC8JIRBKdX7jYL-IjBIHA0G5cGOKEyGHueFeJF+VFBdlYmLxGME8VErKYHCk-KM0q9AbUkq0+lWls0NusjEc7HYHl8gVCkViiVS2XyxUwFVqjpaqCzTAmgDuvDAX2dqAQMxtm+3M14gwAFhBgGAO8FgsgAFT34Ike8kAAClz5BtNAHkyMNeFkCB-hIW0qGlZ972QW8dTXfVeENY1TQtB8n3NF933gBBClNAAlXgAEcQGjYCSCjIiSItDC3ywnCajA6UQOiCD0NfGjEDo+1AJAQlMSifpSKA-oqLYqMIBABAqASU03X3YBEl4AAefCYyk3gAD5-hE6DzTlOgqFkLJeAgWQzwACnI4iEggcYSGY2yhIASmQ81zWmKSTQksASAYfJeHXEgAFVcIAGQswirIgQYvMclNXPchJ0A1QYwHQW4zIAAwACS3VKSAAEhqAppSgW4CEwaK4wQF1bmxECCBIOYzwKmovMGJqrX+ABCDLYtvVyoFQEgzLajrGR8hhfJKZAwxKZyzVc81kGQEgAE1KBIaZwFwEg4DARLNr27y4BICAzygBAdqwy5XU9Egz14KMLXi2MTVsHzdvXBoTRXXUIDMkpBmQFkxj6xaxIkqgSBU5I1OpCIzNsMHzS01yIckvyAph2NeDMo8d1shbXIeuA+gQBJMiJ1zjnLHFP3WG1+JQC8r29Rb-kTVz-jBjmkxTNNLAzTgeAhJxJFzNw4U8REfGRfw0QHWncSrNIa2JesckIMlmxKfGT3PS9r07DVu11rcdwN1nFc5HER2tJnkGFBoqC1RSutiH9Qi5Va3Vte7DfU4JFJZ7ybioW5SmiEpA-NYPeFJmPY-KE7TMQOMIFKQKuQAMW4EoSGQRPFOT-2IBgbAIqgaVSgADWwQKXWwcJvnmYNNsHSJSg9W0GF4XBavzwvnuL4yTtNkr-L+-P3Jt0p1ygXAzoYPoStkXhsHnxez1sxpVb27B5T24opEGERB6L6AIA1dTQlSkAVBuKMSAAdUwABrR7pLdG46FufdqFwIpZAl9r7DyWFQN+z1zRRjAKUaydANQJAesZEoUCzxRlQKUC8ZcKbLSdr-f+NBBgrxgPuXAgxZB3wfogU8K9kB6yKAfS4yVZAJDGM9IesdkAk1wIHC0ikKC4DoEXXAVdNo3DYaUa4NCxiJ1jiuW4JAEgIFkFgiAOCzB4J-n-SgRCSFkIoVQ6RUZiG8GlGgR+0Z2rh3PsPYGVci7AGdnIxSojpTiLlAkOe79P7YFSrcdA0cgFuJcTAOR5pn7mxPF1IKcZTrnS-towhO0IDoFOiRfUippTOhOq-BAH8EAOSjAQHJ8FWinXQFA80SCaEkAiOA3gtk4A0BIOuB6UNilCPgsKdAdB9QXUAlfPpqT4nOj7rVcgfT07QHDiQEAMBdpVNvpQahT84CyC2pEQYUCgFhJ2WeKQ6ln5ngaokXaL8fEIAAPxAIOaE8JLoSDLPvsY50eSCkkDOQAKRlHAAAygqJU7c+gkDoBtdcioojxIaicmgiDQWUAQK03gZAqkEl4AAcmkllLkXI3SnWwqgOkhlRFRiAmAPpjQnlGMsViuy-dnSpVFISaSiBdEpIelU9cmAwC4CaWAVK89ZlgpABUkgTKSnAudJQlIzoRkiqRdEHaIAqrSSpZgMmFSqlRlUiktJZ1eDABIK0J+REoCyDfhSnZjsXF3K5PQT5JoFVxjAKgW5hydl7MWuaH8UMFXioQj9VlSigxvMudCoNZFqBUEaIoiI8SznosGGtDaooqBVL7mkR14qq45JaXGOVD0yLRmNNJB6JjQKiJNAaxqBBmpwAoNksVM0YBQC1d6gt910ABRrYGWYGoLn5MevdZpuB4WiKJY9bEZFKBRASMm9aoq027X2mkzNEAqk1umCCkZna2kEDpfiVIZAB2jvIIqYViK-ICU+X0E6IylioFPNar1XCnGNBjkAwRwig7cIDqmYIwJWD1jBCLbMzgJawg8AibwvgUQBC4MwIAA";

‎packages/workers-playground/welcome/data.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export default {
2+
name: "Example API",
3+
tags: ["example", "api", "response"],
4+
};

‎packages/workers-playground/welcome/index.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,14 @@ export default {
1212
* @returns {Promise<Response>}
1313
*/
1414
async fetch(request, env, ctx) {
15-
console.log("Hello Cloudflare Workers!");
15+
const url = new URL(request.url);
16+
console.log(`Hello ${navigator.userAgent} at path ${url.pathname}!`);
1617

18+
if (url.pathname === "/api") {
19+
// You could also call a third party API here
20+
const data = await import("./data.js");
21+
return Response.json(data);
22+
}
1723
return new Response(welcome, {
1824
headers: {
1925
"content-type": "text/html",

0 commit comments

Comments
 (0)