valTownBadge

Add a Val Town badge to your own HTTP vals

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

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)

• https://www.val.town/v/jxnblk/valTownBadgeSVG SVG badge image service
• https://www.val.town/v/jxnblk/valTownLogotypeReact Val Town logo React component
• https://www.val.town/v/jxnblk/codeIconReact Code icon React component
• https://www.val.town/v/jxnblk/valTownBadge HTML generator that uses import.meta.url to create a link to your val
• https://www.val.town/v/jxnblk/valTownBadgeMiddleware Middleware to inject badge HTML in the lower right corner of your page