Log inSign up
substrate avatar
Public
HTTP
Forked from substrate/substrateBadge
Fork
0 Likes
substrate-promptheader.web.val.run
Readme

Prompt header

Create val
import promptHeader from "https://esm.town/v/substrate/promptHeader";

export default async function(req: Request): Promise<Response> {
  const searchParams = new URL(req.url).searchParams;
  const { prompt = "foo" } = Object.fromEntries(searchParams);
  
  const html = `
    ${promptHeader(prompt)}
    <div>content</div>
  `;
  return new Response(html, {
    headers: {
      "Content-Type": "text/html",
    },
  });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
function header(prompt?: Request | string | undefined): string {
let value = "";
if (typeof prompt === "string") {
value = prompt;
}
return `<div style="position:fixed;top:0;left:0;right:0;background-color: #fff;border-width: 0px;border-bottom-width: 1px;border-color: #000;border-style: solid;padding:4px;">
<div style="display:flex;justify-content:center;">
<input value="${value}" style="font-size: 1.2rem; padding: 8px; border-radius: 8px; border: 1px solid #ccc; margin-right: 8px;" type="text" id="inputField" placeholder="Enter a prompt">
<button style="font-size: 1.2rem; padding: 8px 16px; border-radius: 8px; border: none; background-color: #000; color: white; cursor: pointer;" onclick="go()">Go</button>
</div>
<div style="position:absolute;top:8px;right:8px;text-align:right;">
<a href="https://www.substrate.run" target="_blank" style="font-size:0.8rem;color:#000;text-decoration:none;display:block;">made with Substrate</a>
<a href="#" onclick="window.open(getSourceUrl(), '_blank')" style="font-size:0.8rem;color:#000;text-decoration:none;display:block;">view source on val.town</a>
</div>
<script>
function getSourceUrl() {
const currentUrl = window.location.href;
const match = currentUrl.match(/^https:\\/\\/([\\w-]+)\\.web\\.val\\.run/);
if (match) {
const username = match[1].split('-')[0];
const appName = match[1].split('-')[1];
return \`https://www.val.town/v/\${username}/\${appName}\`;
}
return '#';
}
function go() {
const input = document.getElementById('inputField').value;
const encodedInput = encodeURIComponent(input);
const link = \`/?prompt=\${encodedInput}\`;
window.location.href = link;
}
document.getElementById('inputField').addEventListener('keyup', function(event) {
if (event.key === 'Enter') {
go();
}
});
</script>
</div>`;
}
function handler(req: Request): Response {
return new Response(header(), {
headers: {
"Content-Type": "text/html",
},
});
}
export default function htmlOrResponse(args?: Request | string | undefined): string {
if (args === undefined || typeof args === "string") return header(args);
// @ts-ignore handle Request for development, but used as a string in practice
if (args instanceof Request) return handler(args);
throw new Error("bad args");
}
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Sign up with GitHub
Comments
Nobody has commented on this val yet: be the first!
July 11, 2024