Log inSign Up
jxnblk avatar
Public
Script
Fork
0 Likes
Readme

Add a Val Town badge to your own HTTP vals

View source on Val Town

Option 1: Middleware

  1. Import the middleware from https://www.val.town/v/jxnblk/valTownBadgeMiddleware
  2. Wrap your HTML request handler with middleware, and pass import.meta.url to link to your val
Create val
import wrapper from "https://esm.town/v/jxnblk/valTownBadgeMiddleware";

async function handler(req: Request): Promise<Response> {
  const html = `
    <h1>Hello, world</h1>
  `;
  return new Response(html, {
    headers: {
      "Content-Type": "text/html; charset=utf-8",
    },
  });
}

export default wrapper(handler, import.meta.url);

Option 2: HTML string generator

  1. Get the HTML string for the badge using https://www.val.town/v/jxnblk/valTownBadge
  2. Add the HTML to your response's HTML string wherever you like
Create val
import valTownBadge from "https://esm.town/v/jxnblk/valTownBadge";

export default async function(req: Request): Promise<Response> {
  const badge = valTownBadge(import.meta.url);
  const html = `
    <h1>Hello, world</h1>
    ${badge}
  `;
  return new Response(html, {
    headers: {
      "Content-Type": "text/html; charset=utf-8",
    },
  });
}

Manual options

You can also edit the snippet below to manually add the badge in HTML

<a href="https://www.val.town/v/jxnblk/valTownBadgeExample" target="_blank" style="text-decoration:none;color:inherit">
  <img src="https://jxnblk-valtownbadgesvg.web.val.run/" width="160" height="160">
</a>

Or markdown:

[![View source on Val Town](https://jxnblk-valtownbadgesvg.web.val.run/)](https://www.val.town/v/jxnblk/valTownBadgeExample)

Vals used to create this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function getHREF(mod) {
const url = new URL(mod);
return `https://val.town${url.pathname}`;
}
export interface BadgeOptions {
width?: number;
}
export default function GetBadgeHTML(url: string, opts: BadgeOptions = {}): string {
const href = getHREF(url);
const {
width = 160,
} = opts;
const height = width * 0.3;
return `
<a href="${href}" target="_blank" style="text-decoration:none;color:inherit">
<img src="https://jxnblk-valtownbadgesvg.web.val.run/" width="${width}" height="${height}">
</a>
`;
}
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Sign up with GitHub
Comments
2
stevekrouse avatar
stevekrouse…

Some reactions:

  • I think it looks good!
  • I personally don't love the app-store aesthetic. For example, I wouldn't want to put it on stevekrouse.com or dateme.directory.
  • I don't like how it loads kinda slowly, and after the rest of the page loads. Maybe caching could help with that. Or it could be inlined somehow. Or fade in somehow.
  • The readme feels verbose. I wonder if the two options could also be made more concise, or if we could drop one of them. I don't know if the name wrapper is good. I wonder if the "vals used to create this" could be shorter, maybe just link to the image service, and that links to everything else.
jxnblk avatar
jxnblk…

@stevekrouse Took a stab at inlining the html + svg to get around the perf hit of the image here: https://www.val.town/v/jxnblk/valTownBadge02

Also, slight variation in the style to try to get away from the "app store" vibes; have some other sketches I can share as well.

WRT the readme, we can probably keep this whole thing in a single val and pare down the usage to be more succinct

v16
May 24, 2024