Prevents your http vals from being viewed inside iframes. If it's a valtown iframe, a helpful message is displayed. Usage:
Create valimport modifyIframeResponse from "https://esm.town/v/nbbaier/modifyIframeResponse";
export default modifyIframeResponse(async (req: Rquest): Promise<Response> => {
return Response.json({ ok: true })
});
Code on Val Town
Adds a "Code on Val Town" ribbon to your page. This lets your website visitors navigate to the code behind it.
This uses github-fork-ribbon-css under the hood.
Usage
Here are 2 different ways to add the "Code on Val Town" ribbon:
1. Wrap your fetch handler (recommended)
Create valimport { modifyFetchHandler } from "https://esm.town/v/andreterron/codeOnValTown?v=45";
import { html } from "https://esm.town/v/stevekrouse/html?v=5";
export default modifyFetchHandler(async (req: Request): Promise<Response> => {
return html(`<h2>Hello world!</h2>`);
});
Example: @andreterron/openable_handler
2. Wrap your HTML string
Create valimport { modifyHtmlString } from "https://esm.town/v/andreterron/codeOnValTown?v=45";
import { html } from "https://esm.town/v/stevekrouse/html?v=5";
export default async (req: Request): Promise<Response> => {
return html(modifyHtmlString(`<h2>Hello world!</h2>`));
};
Example: @andreterron/openable_html
Other ways
We made sure this was very modular, so you can also add the ribbon using these methods:
- Get the element string directly: @andreterron/codeOnVT_ribbonElement
- Modify an HTTP Response: @andreterron/codeOnVT_modifyResponse
- Use
.pipeThrough
to append to a stream: @andreterron/InjectCodeOnValTownStream
Customization
Linking to the val
These functions infer the val using the call stack or the request URL. If the inference isn't working, or if you want to ensure it links to a specific val, pass the val
argument:
modifyFetchHandler(handler, {val: { handle: "andre", name: "foo" }})
modifyHtmlString("<html>...", {val: { handle: "andre", name: "foo" }})
Styling
You can set the style parameter to a css string to customize the ribbon. Check out github-fork-ribbon-css to learn more about how to style the element.
modifyFetchHandler(handler, {style: ".github-fork-ribbon:before { background-color: #333; }"})
modifyHtmlString("<html>...", {style: ".github-fork-ribbon:before { background-color: #333; }"})
Here's how you can hide the ribbon on small screens:
Create valmodifyFetchHandler(handler, {style: `@media (max-width: 768px) {
.github-fork-ribbon {
display: none !important;
}
}`})
To-dos
- Let users customize the ribbon. Some ideas are the text, color or placement.
Code on Val Town
Adds a "Code on Val Town" ribbon to your page. This lets your website visitors navigate to the code behind it.
This uses github-fork-ribbon-css under the hood.
Usage
Here are 2 different ways to add the "Code on Val Town" ribbon:
1. Wrap your fetch handler (recommended)
Create valimport { modifyFetchHandler } from "https://esm.town/v/andreterron/codeOnValTown?v=45";
import { html } from "https://esm.town/v/stevekrouse/html?v=5";
export default modifyFetchHandler(async (req: Request): Promise<Response> => {
return html(`<h2>Hello world!</h2>`);
});
Example: @andreterron/openable_handler
2. Wrap your HTML string
Create valimport { modifyHtmlString } from "https://esm.town/v/andreterron/codeOnValTown?v=45";
import { html } from "https://esm.town/v/stevekrouse/html?v=5";
export default async (req: Request): Promise<Response> => {
return html(modifyHtmlString(`<h2>Hello world!</h2>`));
};
Example: @andreterron/openable_html
Other ways
We made sure this was very modular, so you can also add the ribbon using these methods:
- Get the element string directly: @andreterron/codeOnVT_ribbonElement
- Modify an HTTP Response: @andreterron/codeOnVT_modifyResponse
- Use
.pipeThrough
to append to a stream: @andreterron/InjectCodeOnValTownStream
Customization
Linking to the val
These functions infer the val using the call stack or the request URL. If the inference isn't working, or if you want to ensure it links to a specific val, pass the val
argument:
modifyFetchHandler(handler, {val: { handle: "andre", name: "foo" }})
modifyHtmlString("<html>...", {val: { handle: "andre", name: "foo" }})
Styling
You can set the style parameter to a css string to customize the ribbon. Check out github-fork-ribbon-css to learn more about how to style the element.
modifyFetchHandler(handler, {style: ".github-fork-ribbon:before { background-color: #333; }"})
modifyHtmlString("<html>...", {style: ".github-fork-ribbon:before { background-color: #333; }"})
Here's how you can hide the ribbon on small screens:
Create valmodifyFetchHandler(handler, {style: `@media (max-width: 768px) {
.github-fork-ribbon {
display: none !important;
}
}`})
To-dos
- Let users customize the ribbon. Some ideas are the text, color or placement.