valTownBadgeExample

Example of how to add a Val Town badge to your val

Demo: https://jxnblk-valtownbadgeexample.web.val.run/

1. Wrap your HTTP response handler with https://www.val.town/v/jxnblk/valTownBadgeMiddleware ¹

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);

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",
    },
  });
}

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)