andreterron avatar
andreterron
codeOnValTown
Script
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) import { modifyFetchHandler } from "https://esm.town/v/andreterron/codeOnValTown?v=50"; 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 import { modifyHtmlString } from "https://esm.town/v/andreterron/codeOnValTown?v=50"; 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: modifyFetchHandler(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.
5
vladimyr avatar
vladimyr
serveReadme
Script
// SPDX-License-Identifier: 0BSD
2
nbbaier avatar
nbbaier
modifyIframeResponse
Script
Forked from andreterron/codeOnValTown
0
vladimyr avatar
vladimyr
codeOnValTown
Script
Forked from andreterron/codeOnValTown
0
vladimyr avatar
vladimyr
appendFragment_example
HTTP
An interactive, runnable TypeScript val by vladimyr
0
stevekrouse avatar
stevekrouse
codeOnValTown
Script
Forked from andreterron/codeOnValTown
0
MichaelNollox avatar
MichaelNollox
outsideBlushShrimp
Script
Forked from andreterron/codeOnValTown
0
pomdtr avatar
pomdtr
codeOnValTown
Script
Forked from andreterron/codeOnValTown
0
willthereader avatar
willthereader
coralPuma
Script
Forked from andreterron/codeOnValTown
0
nicosql avatar
nicosql
codeOnValTown
Script
Forked from andreterron/codeOnValTown
0
willthereader avatar
willthereader
codeOnValTown
Script
Forked from andreterron/codeOnValTown
0
MichaelNollox avatar
MichaelNollox
codeOnValTown
Script
Forked from andreterron/codeOnValTown
0
Serizon avatar
Serizon
codeOnValTown
Script
Forked from andreterron/codeOnValTown
0
andreterron avatar
andreterron
InjectCodeOnValTownStream
Script
Injects the "Code on Val Town" ribbon on an HTML string stream Usage new InjectCodeOnValTownStream({ handle: "andre", name: "foo" }) - define which val to link to; new InjectCodeOnValTownStream() - infer the val from the call stack. Example: @andreterron/openable_stream import { InjectCodeOnValTownStream } from "https://esm.town/v/andreterron/InjectCodeOnValTownStream"; import { blob } from "https://esm.town/v/std/blob?v=11"; import { html } from "https://esm.town/v/stevekrouse/html?v=5"; export default async (req: Request): Promise<Response> => { await blob.set( "openable_test", `<h2>Hello world!</h2> <style>* { font-family: sans-serif }</style>`, ); const value = await blob.get("openable_test"); return html( value.body .pipeThrough(new TextDecoderStream()) .pipeThrough(new InjectCodeOnValTownStream()) .pipeThrough(new TextEncoderStream()), ); };
0
MichaelNollox avatar
MichaelNollox
crazyPeachCrayfish
Script
Forked from MichaelNollox/codeOnValTown
0
1
Next
Updated: February 29, 2024