├── wrangler.toml
├── src
    ├── stub.ts
    ├── text.ts
    ├── global.d.ts
    ├── xml.ts
    ├── color.ts
    ├── index.ts
    ├── badge.ts
    └── index.html
├── package.json
├── LICENSE.md
├── README.md
├── .gitignore
└── tsconfig.json


/wrangler.toml:
--------------------------------------------------------------------------------
1 | name = "pride-badges"
2 | main = "src/index.ts"
3 | compatibility_date = "2023-03-31"
4 | 


--------------------------------------------------------------------------------
/src/stub.ts:
--------------------------------------------------------------------------------
1 | export function promisify() { return () => { } }
2 | export function readFile() { }
3 | export function readFileSync() { }
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "pride-badges",
 3 |   "version": "1.0.1",
 4 |   "devDependencies": {
 5 |     "@cloudflare/workers-types": "^4.20230321.0",
 6 |     "typescript": "^5.0.3",
 7 |     "wrangler": "2.13.0"
 8 |   },
 9 |   "private": true,
10 |   "scripts": {
11 |     "start": "wrangler dev",
12 |     "deploy": "wrangler publish"
13 |   },
14 |   "dependencies": {
15 |     "anafanafo": "^2.0.0",
16 |     "css-color-converter": "^2.0.0"
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/src/text.ts:
--------------------------------------------------------------------------------
 1 | import anafanafo from 'anafanafo'
 2 | 
 3 | export const FONT_SCALE_UP_FACTOR = 10
 4 | export const FONT_SCALE_DOWN_VALUE = 'scale(.1)'
 5 | export const FONT_FAMILY = 'Verdana,Geneva,DejaVu Sans,sans-serif'
 6 | export const WIDTH_FONT = '11px Verdana'
 7 | 
 8 | function roundUpToOdd(val: number) {
 9 |     return val % 2 === 0 ? val + 1 : val
10 | }
11 | 
12 | export function preferredWidthOf(str: string) {
13 |     return roundUpToOdd(anafanafo(str, { font: WIDTH_FONT }) | 0)
14 | }
15 | 


--------------------------------------------------------------------------------
/src/global.d.ts:
--------------------------------------------------------------------------------
 1 | declare module 'anafanafo' {
 2 |     export = (text: string, options?: { font?: string, guess?: boolean }) => number
 3 | }
 4 | declare module 'css-color-converter' {
 5 |     export interface Color {
 6 |         toRgbString(): string
 7 |         toHslString(): string
 8 |         toHexString(): string
 9 |         toRgbaArray(): [number, number, number, number]
10 |         toHslaArray(): [number, number, number, number]
11 |     }
12 |     export function fromRgba(str: string): Color
13 |     export function fromRgb(str: string): Color
14 |     export function fromHsla(str: string): Color
15 |     export function fromHsl(str: string): Color
16 |     export function fromString(str: string): Color | null
17 | }
18 | declare module '*.html' {
19 |     const html: string
20 |     export = html
21 | }
22 | 


--------------------------------------------------------------------------------
/src/xml.ts:
--------------------------------------------------------------------------------
 1 | const escapeChars = [[/&/g, '&amp;'], [/</g, '&lt;'], [/>/g, '&gt;'], [/"/g, '&quot;'], [/'/g, '&apos;']] as const
 2 | 
 3 | function escape(value: string): string {
 4 |     return escapeChars.reduce((v, [c, r]) => v.replace(c, r), value)
 5 | }
 6 | 
 7 | export type XmlChild = XmlElement | XmlFragment | string
 8 | 
 9 | export class XmlElement {
10 |     constructor(
11 |         public name: string,
12 |         public props: Record<string, string | number> = {},
13 |         public children: Array<XmlChild> = [],
14 |     ) { }
15 |     public toString(): string {
16 |         const props = Object.entries(this.props).map(([k, v]) => ` ${k}="${escape(`${v}`)}"`).join('')
17 |         const children = this.children.join('')
18 |         return children
19 |             ? `<${this.name}${props}>${children}</${this.name}>`
20 |             : `<${this.name}${props}/>`
21 |     }
22 | }
23 | 
24 | export class XmlFragment {
25 |     constructor(public children: Array<XmlChild>) { }
26 |     public toString(): string {
27 |         return this.children.join('')
28 |     }
29 | }
30 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | =====================
 3 | 
 4 | Copyright (c) 2023 Tyler Schrock
 5 | 
 6 | Permission is hereby granted, free of charge, to any person obtaining a copy
 7 | of this software and associated documentation files (the "Software"), to deal
 8 | in the Software without restriction, including without limitation the rights
 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10 | copies of the Software, and to permit persons to whom the Software is
11 | furnished to do so, subject to the following conditions:
12 | 
13 | The above copyright notice and this permission notice shall be included in all
14 | copies or substantial portions of the Software.
15 | 
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22 | SOFTWARE.
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Pride Badges
 2 | 
 3 | Customizable pride badges for your projects.
 4 | 
 5 | ![Trans Rights][badge-trans]
 6 | ![LGBTQ+ Friendly][badge-lgbtq]
 7 | ![Sponsored by the Gay Agenda][sponsored]
 8 | ![Dependencies](https://img.shields.io/librariesio/github/tschrock/pride-badges)
 9 | ![GitHub](https://img.shields.io/github/license/tschrock/pride-badges)
10 | 
11 | https://pride-badges.pony.workers.dev/
12 | 
13 | 
14 | ## API
15 | 
16 | ### GET `/static/v1`
17 | #### Parameters
18 | <dl>
19 |     <dt><code>label</code></dt>
20 |     <dd>The badge label. Required.</dd>
21 |     <dt><code>labelColor</code></dt>
22 |     <dd>The background color for the badge label. Default is <code>#555</code>.</dd>
23 |     <dt><code>stripeWidth</code></dt>
24 |     <dd>The width of the stripes. Default is <code>8</code>.</dd>
25 |     <dt><code>stripeColors</code></dt>
26 |     <dd>A comma seperated list of stripe colors. Required.</dd>
27 | </dl>
28 | 
29 | #### Examples
30 | 
31 | 
32 | ![LGBTQ+ Friendly][badge-lgbtq]
33 | 
34 | ```
35 | https://pride-badges.pony.workers.dev/static/v1?label=lgbtq%2B%20friendly&stripeWidth=6&stripeColors=E40303,FF8C00,FFED00,008026,24408E,732982
36 | ```
37 | 
38 | ![Trans Rights][badge-trans]
39 | ```
40 | https://pride-badges.pony.workers.dev/static/v1?label=trans%20rights&stripeWidth=6&stripeColors=5BCEFA,F5A9B8,FFFFFF,F5A9B8,5BCEFA
41 | ```
42 | 
43 | 
44 | 
45 | ## License
46 | This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.
47 | 
48 | ----
49 | 
50 | <p>Made with <img height="18" src="https://emoji.lgbt/assets/svg/bi-heart.svg"/> by <a href="https://twitter.com/CyberPon3">@CyberPon3</a><br>Like pride tech? Check out <a href="https://emoji.lgbt">https://emoji.lgbt</a></p>
51 | 
52 | [badge-trans]: https://pride-badges.pony.workers.dev/static/v1?label=trans%20rights&stripeWidth=6&stripeColors=5BCEFA,F5A9B8,FFFFFF,F5A9B8,5BCEFA
53 | [badge-lgbtq]: https://pride-badges.pony.workers.dev/static/v1?label=lgbtq%2B%20friendly&stripeWidth=6&stripeColors=E40303,FF8C00,FFED00,008026,24408E,732982
54 | [sponsored]: https://pride-badges.pony.workers.dev/static/v1?label=sponsored+by+the+gay+agenda&labelColor=%23555&stripeWidth=6&stripeColors=E40303%2CFF8C00%2CFFED00%2C008026%2C24408E%2C732982
55 | 


--------------------------------------------------------------------------------
/src/color.ts:
--------------------------------------------------------------------------------
 1 | // Copied from shields.io + Added TypeScript types
 2 | // https://github.com/badges/shields/blob/74c7b062ddcc043a64da69a568c385856100ba6d/badge-maker/lib/color.js
 3 | // License: CC0-1.0
 4 | 
 5 | import { fromString } from 'css-color-converter'
 6 | 
 7 | const namedColors = {
 8 |     brightgreen: '#4c1',
 9 |     green: '#97ca00',
10 |     yellow: '#dfb317',
11 |     yellowgreen: '#a4a61d',
12 |     orange: '#fe7d37',
13 |     red: '#e05d44',
14 |     blue: '#007ec6',
15 |     grey: '#555',
16 |     lightgrey: '#9f9f9f',
17 | }
18 | 
19 | const aliases = {
20 |     gray: 'grey',
21 |     lightgray: 'lightgrey',
22 |     critical: 'red',
23 |     important: 'orange',
24 |     success: 'brightgreen',
25 |     informational: 'blue',
26 |     inactive: 'lightgrey',
27 | }
28 | 
29 | const resolvedAliases: Record<string, string> = {}
30 | Object.entries(aliases).forEach(([alias, original]) => {
31 |   resolvedAliases[alias] = namedColors[original as keyof typeof namedColors]
32 | })
33 | 
34 | const hexColorRegex = /^([\da-f]{3}){1,2}$/i
35 | function isHexColor(s = '') {
36 |     return hexColorRegex.test(s)
37 | }
38 | 
39 | function isCSSColor(color: string) {
40 |     return typeof color === 'string' && fromString(color.trim())
41 | }
42 | 
43 | function normalizeColor(color: string): string {
44 |     if (color === undefined) {
45 |         return namedColors.lightgrey
46 |     } else if (color in namedColors) {
47 |         return color
48 |     } else if (color in aliases) {
49 |         return aliases[color as keyof typeof aliases]
50 |     } else if (isHexColor(color)) {
51 |         return `#${color.toLowerCase()}`
52 |     } else if (isCSSColor(color)) {
53 |         return color.toLowerCase()
54 |     } else {
55 |         return namedColors.lightgrey
56 |     }
57 | }
58 | 
59 | export function toSvgColor(color: string): string {
60 |     const normalized = normalizeColor(color)
61 |     if (normalized in namedColors) {
62 |         return namedColors[normalized as keyof typeof namedColors]
63 |     } else if (normalized in resolvedAliases) {
64 |         return resolvedAliases[normalized]
65 |     } else {
66 |         return normalized
67 |     }
68 | }
69 | 
70 | export function colorsForBackground(color: string) {
71 |     const brightnessThreshold = 0.69
72 |     if (brightness(color) <= brightnessThreshold) {
73 |         return { textColor: '#fff', shadowColor: '#010101' }
74 |     } else {
75 |         return { textColor: '#333', shadowColor: '#ccc' }
76 |     }
77 | }
78 | 
79 | export function brightness(color: string) {
80 |     if (color) {
81 |         const cssColor = fromString(color)
82 |         if (cssColor) {
83 |             const rgb = cssColor.toRgbaArray()
84 |             return +((rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 255000).toFixed(2)
85 |         }
86 |     }
87 |     return 0
88 | }
89 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | import { errorBadge, prideBadge } from './badge';
 2 | import { toSvgColor } from './color';
 3 | import { XmlElement } from './xml';
 4 | 
 5 | import indexText from './index.html'
 6 | 
 7 | export interface Env { }
 8 | 
 9 | function svgResponse(xml: XmlElement): Response {
10 |     return new Response(xml.toString(), {
11 |         status: 200,
12 |         headers: {
13 |             "Access-Control-Allow-Origin": "*",
14 |             "Content-Type": "image/svg+xml;charset=utf-8",
15 |             "Cache-Control": "max-age=86400, s-maxage=86400"
16 |         }
17 |     })
18 | }
19 | 
20 | const EXAMPLES = [
21 |     "/static/v1?label=lgbtq%2B%20friendly&stripeWidth=6&stripeColors=E40303,FF8C00,FFED00,008026,24408E,732982",
22 |     "/static/v1?label=trans%20rights&stripeWidth=6&stripeColors=5BCEFA,F5A9B8,FFFFFF,F5A9B8,5BCEFA"
23 | ]
24 | 
25 | export default {
26 |     async fetch(
27 |         request: Request,
28 |         env: Env,
29 |         ctx: ExecutionContext
30 |     ): Promise<Response> {
31 |         const url = new URL(request.url)
32 |         const method = request.method
33 |         if (url.pathname == "/static/v1") {
34 |             if (method == "GET") {
35 |                 const label = url.searchParams.get("label")
36 |                 const labelColor = url.searchParams.get("labelColor") ?? "#555"
37 |                 const stripeWidth = url.searchParams.get("stripeWidth") ?? "6"
38 |                 const stripeColors = url.searchParams.get("stripeColors")
39 | 
40 |                 if (!stripeColors) return svgResponse(errorBadge("stripeColors is required"))
41 | 
42 |                 const stripeWidthInt = Number(stripeWidth)
43 | 
44 |                 if (!Number.isSafeInteger(stripeWidthInt) || stripeWidthInt <= 0 || stripeWidthInt > 100) {
45 |                     return svgResponse(errorBadge("stripeWidth must be a positive integer between 1 and 100"))
46 |                 }
47 | 
48 |                 const stripeColorsArr = stripeColors.split(",").map(x => x.trim()).filter(x => x)
49 | 
50 |                 if (!stripeColorsArr.length) return svgResponse(errorBadge("stripeColors is required"))
51 | 
52 |                 return svgResponse(prideBadge(label, toSvgColor(labelColor), stripeWidthInt, stripeColorsArr.map(toSvgColor)))
53 |             } else {
54 |                 return new Response("Method Not Allowed", { status: 405, headers: { "Allow": "GET" } })
55 |             }
56 |         } else if (url.pathname == "/") {
57 |             if (method == "GET") {
58 |                 const examplesHtml = EXAMPLES.map(e => `<img src="${e}" /><pre>${new URL(e, url).toString()}</pre>`).join('')
59 |                 return new Response(indexText.replace("<!-- EXAMPLES -->", examplesHtml), { status: 200, headers: { "Content-Type": "text/html;charset=utf-8" } })
60 |             } else {
61 |                 return new Response("Method Not Allowed", { status: 405, headers: { "Allow": "GET" } })
62 |             }
63 |         } else {
64 |             return new Response("Not Found", { status: 404 })
65 |         }
66 |     }
67 | }
68 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | # Logs
  2 | 
  3 | logs
  4 | _.log
  5 | npm-debug.log_
  6 | yarn-debug.log*
  7 | yarn-error.log*
  8 | lerna-debug.log*
  9 | .pnpm-debug.log*
 10 | 
 11 | # Diagnostic reports (https://nodejs.org/api/report.html)
 12 | 
 13 | report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
 14 | 
 15 | # Runtime data
 16 | 
 17 | pids
 18 | _.pid
 19 | _.seed
 20 | \*.pid.lock
 21 | 
 22 | # Directory for instrumented libs generated by jscoverage/JSCover
 23 | 
 24 | lib-cov
 25 | 
 26 | # Coverage directory used by tools like istanbul
 27 | 
 28 | coverage
 29 | \*.lcov
 30 | 
 31 | # nyc test coverage
 32 | 
 33 | .nyc_output
 34 | 
 35 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 36 | 
 37 | .grunt
 38 | 
 39 | # Bower dependency directory (https://bower.io/)
 40 | 
 41 | bower_components
 42 | 
 43 | # node-waf configuration
 44 | 
 45 | .lock-wscript
 46 | 
 47 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 48 | 
 49 | build/Release
 50 | 
 51 | # Dependency directories
 52 | 
 53 | node_modules/
 54 | jspm_packages/
 55 | 
 56 | # Snowpack dependency directory (https://snowpack.dev/)
 57 | 
 58 | web_modules/
 59 | 
 60 | # TypeScript cache
 61 | 
 62 | \*.tsbuildinfo
 63 | 
 64 | # Optional npm cache directory
 65 | 
 66 | .npm
 67 | 
 68 | # Optional eslint cache
 69 | 
 70 | .eslintcache
 71 | 
 72 | # Optional stylelint cache
 73 | 
 74 | .stylelintcache
 75 | 
 76 | # Microbundle cache
 77 | 
 78 | .rpt2_cache/
 79 | .rts2_cache_cjs/
 80 | .rts2_cache_es/
 81 | .rts2_cache_umd/
 82 | 
 83 | # Optional REPL history
 84 | 
 85 | .node_repl_history
 86 | 
 87 | # Output of 'npm pack'
 88 | 
 89 | \*.tgz
 90 | 
 91 | # Yarn Integrity file
 92 | 
 93 | .yarn-integrity
 94 | 
 95 | # dotenv environment variable files
 96 | 
 97 | .env
 98 | .env.development.local
 99 | .env.test.local
100 | .env.production.local
101 | .env.local
102 | 
103 | # parcel-bundler cache (https://parceljs.org/)
104 | 
105 | .cache
106 | .parcel-cache
107 | 
108 | # Next.js build output
109 | 
110 | .next
111 | out
112 | 
113 | # Nuxt.js build / generate output
114 | 
115 | .nuxt
116 | dist
117 | 
118 | # Gatsby files
119 | 
120 | .cache/
121 | 
122 | # Comment in the public line in if your project uses Gatsby and not Next.js
123 | 
124 | # https://nextjs.org/blog/next-9-1#public-directory-support
125 | 
126 | # public
127 | 
128 | # vuepress build output
129 | 
130 | .vuepress/dist
131 | 
132 | # vuepress v2.x temp and cache directory
133 | 
134 | .temp
135 | .cache
136 | 
137 | # Docusaurus cache and generated files
138 | 
139 | .docusaurus
140 | 
141 | # Serverless directories
142 | 
143 | .serverless/
144 | 
145 | # FuseBox cache
146 | 
147 | .fusebox/
148 | 
149 | # DynamoDB Local files
150 | 
151 | .dynamodb/
152 | 
153 | # TernJS port file
154 | 
155 | .tern-port
156 | 
157 | # Stores VSCode versions used for testing VSCode extensions
158 | 
159 | .vscode-test
160 | 
161 | # yarn v2
162 | 
163 | .yarn/cache
164 | .yarn/unplugged
165 | .yarn/build-state.yml
166 | .yarn/install-state.gz
167 | .pnp.\*
168 | 
169 | # wrangler project
170 | 
171 | .dev.vars
172 | .wrangler/
173 | 


--------------------------------------------------------------------------------
/src/badge.ts:
--------------------------------------------------------------------------------
  1 | import { colorsForBackground } from "./color";
  2 | import { FONT_FAMILY, FONT_SCALE_DOWN_VALUE, FONT_SCALE_UP_FACTOR, preferredWidthOf } from "./text";
  3 | import { XmlChild, XmlElement, XmlFragment } from "./xml";
  4 | 
  5 | const PADDING_HORIZ = 5
  6 | const LABEL_MARGIN = 1
  7 | const BADGE_HEIGHT = 20
  8 | 
  9 | const GRADIENT = new XmlElement('linearGradient', { id: 's', x2: 0, y2: '100%' }, [
 10 |     new XmlElement('stop', { offset: 0, 'stop-color': '#bbb', 'stop-opacity': '.1' }),
 11 |     new XmlElement('stop', { offset: 1, 'stop-opacity': '.1' }),
 12 | ])
 13 | 
 14 | function rect(x: number, width: number, height: number, fill: string): XmlElement {
 15 |     return new XmlElement('rect', { ...(x == 0 ? {} : { x }), width, height, fill })
 16 | }
 17 | 
 18 | function clipPath(width: number, height: number): XmlElement {
 19 |     return new XmlElement('clipPath', { id: 'r' }, [
 20 |         new XmlElement('rect', { width, height, rx: 3, fill: '#fff' })
 21 |     ])
 22 | }
 23 | 
 24 | function backgroundGroup(children: XmlChild[]): XmlElement {
 25 |     return new XmlElement('g', { 'clip-path': 'url(#r)' }, children)
 26 | }
 27 | 
 28 | function foregroundGroup(children: XmlChild[]): XmlElement {
 29 |     return new XmlElement('g', {
 30 |         fill: '#fff',
 31 |         'text-anchor': 'middle',
 32 |         'font-family': FONT_FAMILY,
 33 |         'text-rendering': 'geometricPrecision',
 34 |         'font-size': 110,
 35 |     }, children)
 36 | }
 37 | 
 38 | function getTextElement(leftMargin: number, content: string, bgColor: string, textWidth: number) {
 39 |     const { textColor, shadowColor } = colorsForBackground(bgColor)
 40 |     const x = FONT_SCALE_UP_FACTOR * (leftMargin + 0.5 * textWidth + PADDING_HORIZ)
 41 | 
 42 |     const text = new XmlElement('text', {
 43 |         x,
 44 |         y: 140,
 45 |         transform: FONT_SCALE_DOWN_VALUE,
 46 |         fill: textColor,
 47 |         textLength: FONT_SCALE_UP_FACTOR * textWidth,
 48 |     }, [content])
 49 | 
 50 |     const shadowText = new XmlElement('text', {
 51 |         'aria-hidden': 'true',
 52 |         x,
 53 |         y: 150,
 54 |         fill: shadowColor,
 55 |         'fill-opacity': '.3',
 56 |         transform: FONT_SCALE_DOWN_VALUE,
 57 |         textLength: FONT_SCALE_UP_FACTOR * textWidth,
 58 |     }, [content])
 59 |     return new XmlFragment([shadowText, text])
 60 | }
 61 | 
 62 | export function svgBadge(title: string | null, width: number, height: number, content: XmlChild[]): XmlElement {
 63 |     return new XmlElement('svg', {
 64 |         xmlns: 'http://www.w3.org/2000/svg',
 65 |         'xmlns:xlink': 'http://www.w3.org/1999/xlink',
 66 |         width,
 67 |         height,
 68 |         role: 'img',
 69 |         'aria-label': title ?? ''
 70 |     }, [
 71 |         title ? new XmlElement('title', {}, [title]) : '',
 72 |         GRADIENT,
 73 |         clipPath(width, height),
 74 |         ...content
 75 |     ])
 76 | }
 77 | 
 78 | export function errorBadge(message: string): XmlElement {
 79 |     const messageWidth = preferredWidthOf(message)
 80 |     const badgeWidth = messageWidth + 2 * PADDING_HORIZ
 81 |     return svgBadge("Error", badgeWidth, BADGE_HEIGHT, [
 82 |         backgroundGroup([
 83 |             rect(0, badgeWidth, BADGE_HEIGHT, '#ff0000'),
 84 |             rect(0, badgeWidth, BADGE_HEIGHT, 'url(#s)')
 85 |         ]),
 86 |         foregroundGroup([getTextElement(LABEL_MARGIN, message, '#ff0000', messageWidth)]),
 87 |     ])
 88 | }
 89 | 
 90 | export function prideBadge(label: string | null, labelColor: string, stripeWidth: number, stripes: string[]): XmlElement {
 91 |     const background: XmlChild[] = []
 92 |     const foreground: XmlChild[] = []
 93 |     let badgeWidth = 0
 94 | 
 95 |     if (label && label.length) {
 96 |         const labelWidth = preferredWidthOf(label)
 97 |         const leftWidth = labelWidth + 2 * PADDING_HORIZ
 98 |         background.push(rect(badgeWidth, leftWidth, BADGE_HEIGHT, labelColor))
 99 |         badgeWidth += leftWidth
100 |         foreground.push(getTextElement(LABEL_MARGIN, label, labelColor, labelWidth))
101 |     }
102 | 
103 |     for (const stripeColor of stripes) {
104 |         background.push(rect(badgeWidth, stripeWidth, BADGE_HEIGHT, stripeColor))
105 |         badgeWidth += stripeWidth
106 |     }
107 |     background.push(rect(0, badgeWidth, BADGE_HEIGHT, 'url(#s)'))
108 | 
109 |     return svgBadge(label, badgeWidth, BADGE_HEIGHT, [
110 |         backgroundGroup(background),
111 |         foregroundGroup(foreground)
112 |     ])
113 | }
114 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |     <head>
  4 |         <title>Pride Badges API</title>
  5 |         <meta name="viewport" content="width=device-width, initial-scale=1" />
  6 |         <meta name="twitter:card" content="summary_large_image">
  7 |         <meta name="twitter:creator" content="@CyberPon3">
  8 |         <meta name="twitter:title" content="Pride Badge API">
  9 |         <meta name="twitter:description" content="A pride-themed badge generator.">
 10 |         <meta name="twitter:image" content="https://p.cp3.es/ss1680310496-81cb65-2.png">
 11 |         <style>
 12 |             body {
 13 |                 font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 14 |                 padding: 0 1em 2rem;
 15 |                 margin: auto;
 16 |             }
 17 |             code {
 18 |                 display: inline-block;
 19 |                 background: #eee;
 20 |                 padding: 0 0.25em;
 21 |                 border-radius: 0.2em;
 22 |                 font-size: inherit;
 23 |                 font-family: monospace, monospace;
 24 |             }
 25 |             pre {
 26 |                 display: block;
 27 |                 background: #eee;
 28 |                 padding: 1rem;
 29 |                 font-size: inherit;
 30 |                 font-family: monospace, monospace;
 31 |                 overflow: auto;
 32 |             }
 33 |             pre:after {
 34 |                 content: "";
 35 |                 display: inline-block;
 36 |                 position: relative;
 37 |                 width: 1rem;
 38 |             }
 39 |             dt {
 40 |                 margin-bottom: 0.5em;
 41 |             }
 42 |             dd + dt {
 43 |                 margin-top: 1em;
 44 |             }
 45 |             form {
 46 |                 display: flex;
 47 |                 flex-direction: column;
 48 |                 gap: 0.5rem;
 49 |             }
 50 |             label {
 51 |                 display: flex;
 52 |                 gap: 1rem;
 53 |             }
 54 |             input[type=text],
 55 |             input[type=number] {
 56 |                 width: 200px;
 57 |             }
 58 |             input[type=submit] {
 59 |                 width: fit-content;
 60 |                 min-width: 80px;
 61 |             }
 62 |             #byo-container {
 63 |                 margin: 1.5rem 0;
 64 |                 opacity: 0;
 65 |             }
 66 |             #byo-container.show {
 67 |                 opacity: 1;
 68 |             }
 69 |             @media screen and (min-width: 800px) { body { max-width: 700px; } }
 70 |             @media screen and (min-width: 1000px) { body { max-width: 900px; } }
 71 |             @media screen and (min-width: 1200px) { body { max-width: 1100px; } }
 72 |         </style>
 73 |     </head>
 74 |     <body>
 75 |         <h1>Pride Badges API</h2>
 76 |         <h2>GET <code>/static/v1</code></h2>
 77 |         <h3>Parameters</h3>
 78 |         <dl>
 79 |             <dt><code>label</code></dt>
 80 |             <dd>The badge label. Required.</dd>
 81 | 
 82 |             <dt><code>labelColor</code></dt>
 83 |             <dd>The background color for the badge label. Default is <code>#555</code>.</dd>
 84 | 
 85 |             <dt><code>stripeWidth</code></dt>
 86 |             <dd>The width of the stripes. Default is <code>8</code>.</dd>
 87 | 
 88 |             <dt><code>stripeColors</code></dt>
 89 |             <dd>A comma seperated list of stripe colors. Required.</dd>
 90 |         </dl>
 91 |         <h3>Examples</h3>
 92 |         <!-- EXAMPLES -->
 93 |         <h3>Build your own!</h3>
 94 |         <form id="byo-form">
 95 |             <label>Label <input name="label" type="text" value="Sponsored by the Gay Agenda"/></label>
 96 |             <label>Label Color <input name="labelColor" type="text" value="#555"/></label>
 97 |             <label>Stripe Width <input name="stripeWidth" type="number" value="8"/></label>
 98 |             <label>Stripe Colors <input name="stripeColors" type="text" style="width: 300px;" value="E40303,FF8C00,FFED00,008026,24408E,732982"/></label>
 99 |             <input type="submit" value="go"/>
100 |         </form>
101 |         <div id="byo-container">
102 |             <img id="byo-img" src=""/>
103 |             <pre id="byo-out"></pre>
104 |         </div>
105 |         <script>
106 |             document.addEventListener('DOMContentLoaded', () => {
107 |                 const form = document.getElementById('byo-form')
108 |                 const container = document.getElementById('byo-container')
109 |                 const img = document.getElementById('byo-img')
110 |                 const out = document.getElementById('byo-out')
111 |                 form.addEventListener('submit', event => {
112 |                     event.preventDefault()
113 |                     const data = new URLSearchParams(new FormData(event.target, event.submitter))
114 |                     const url = "/static/v1?" + data.toString()
115 |                     img.src = url
116 |                     out.innerText = new URL(url, window.location).toString()
117 |                     container.classList.add("show")
118 |                 })
119 |             })
120 |         </script>
121 |         <hr>
122 |         <p>
123 |             Source on <a href="https://github.com/tschrock/pride-badges">GitHub</a><br>
124 |             Made with <img style="height: 1.25em; vertical-align: bottom;" src="https://emoji.lgbt/assets/svg/bi-heart.svg"/> by <a href="https://twitter.com/CyberPon3">@CyberPon3</a><br>
125 |             Like pride tech? Check out <a href="https://emoji.lgbt">https://emoji.lgbt</a>
126 |         </p>
127 |     </body>
128 | </html>
129 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
  1 | {
  2 | 	"compilerOptions": {
  3 | 		/* Visit https://aka.ms/tsconfig.json to read more about this file */
  4 | 
  5 | 		/* Projects */
  6 | 		// "incremental": true,                              /* Enable incremental compilation */
  7 | 		// "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
  8 | 		// "tsBuildInfoFile": "./",                          /* Specify the folder for .tsbuildinfo incremental compilation files. */
  9 | 		// "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects */
 10 | 		// "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
 11 | 		// "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 12 | 
 13 | 		/* Language and Environment */
 14 | 		"target": "es2021" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
 15 | 		"lib": [
 16 | 			"es2021"
 17 | 		] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
 18 | 		"jsx": "react" /* Specify what JSX code is generated. */,
 19 | 		// "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
 20 | 		// "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
 21 | 		// "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */
 22 | 		// "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
 23 | 		// "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */
 24 | 		// "reactNamespace": "",                             /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */
 25 | 		// "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
 26 | 		// "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
 27 | 
 28 | 		/* Modules */
 29 | 		"module": "es2022" /* Specify what module code is generated. */,
 30 | 		// "rootDir": "./",                                  /* Specify the root folder within your source files. */
 31 | 		"moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
 32 | 		// "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
 33 | 		"paths": {
 34 | 			"util": ["./src/stub"],
 35 | 			"fs": ["./src/stub"]
 36 | 		},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
 37 | 		// "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
 38 | 		// "typeRoots": [],                                  /* Specify multiple folders that act like `./node_modules/@types`. */
 39 | 		"types": [
 40 | 			"@cloudflare/workers-types"
 41 | 		] /* Specify type package names to be included without being referenced in a source file. */,
 42 | 		// "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
 43 | 		"resolveJsonModule": true /* Enable importing .json files */,
 44 | 		// "noResolve": true,                                /* Disallow `import`s, `require`s or `<reference>`s from expanding the number of files TypeScript should add to a project. */
 45 | 
 46 | 		/* JavaScript Support */
 47 | 		"allowJs": true /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */,
 48 | 		"checkJs": false /* Enable error reporting in type-checked JavaScript files. */,
 49 | 		// "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */
 50 | 
 51 | 		/* Emit */
 52 | 		// "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
 53 | 		// "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
 54 | 		// "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
 55 | 		// "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
 56 | 		// "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
 57 | 		// "outDir": "./",                                   /* Specify an output folder for all emitted files. */
 58 | 		// "removeComments": true,                           /* Disable emitting comments. */
 59 | 		"noEmit": true /* Disable emitting files from a compilation. */,
 60 | 		// "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
 61 | 		// "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types */
 62 | 		// "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
 63 | 		// "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
 64 | 		// "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
 65 | 		// "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
 66 | 		// "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
 67 | 		// "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
 68 | 		// "newLine": "crlf",                                /* Set the newline character for emitting files. */
 69 | 		// "stripInternal": true,                            /* Disable emitting declarations that have `@internal` in their JSDoc comments. */
 70 | 		// "noEmitHelpers": true,                            /* Disable generating custom helper functions like `__extends` in compiled output. */
 71 | 		// "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
 72 | 		// "preserveConstEnums": true,                       /* Disable erasing `const enum` declarations in generated code. */
 73 | 		// "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
 74 | 		// "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
 75 | 
 76 | 		/* Interop Constraints */
 77 | 		"isolatedModules": true /* Ensure that each file can be safely transpiled without relying on other imports. */,
 78 | 		"allowSyntheticDefaultImports": true /* Allow 'import x from y' when a module doesn't have a default export. */,
 79 | 		// "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
 80 | 		// "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
 81 | 		"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
 82 | 
 83 | 		/* Type Checking */
 84 | 		"strict": true /* Enable all strict type-checking options. */,
 85 | 		// "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied `any` type.. */
 86 | 		// "strictNullChecks": true,                         /* When type checking, take into account `null` and `undefined`. */
 87 | 		// "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
 88 | 		// "strictBindCallApply": true,                      /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */
 89 | 		// "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
 90 | 		// "noImplicitThis": true,                           /* Enable error reporting when `this` is given the type `any`. */
 91 | 		// "useUnknownInCatchVariables": true,               /* Type catch clause variables as 'unknown' instead of 'any'. */
 92 | 		// "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
 93 | 		// "noUnusedLocals": true,                           /* Enable error reporting when a local variables aren't read. */
 94 | 		// "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read */
 95 | 		// "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
 96 | 		// "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
 97 | 		// "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
 98 | 		// "noUncheckedIndexedAccess": true,                 /* Include 'undefined' in index signature results */
 99 | 		// "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
100 | 		// "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type */
101 | 		// "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
102 | 		// "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
103 | 
104 | 		/* Completeness */
105 | 		// "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
106 | 		"skipLibCheck": true /* Skip type checking all .d.ts files. */
107 | 	}
108 | }
109 | 


--------------------------------------------------------------------------------