love2d version badge generator

readme.md

LÖVE badge generator

This is just a small snippet that generates a github badge with supported version of love2d that you can use for your game projects.

It makes use of MoonXML to make generate the actual SVG (XML) code and a string buffer to save the result, which wouldn't be needed in most production situations.

badge.moon

height = 20
width = 100
split = 6/10

tag = (number, color='#ea316e') ->
  buf = require'strbuffer'!
  generator = require'moonxml'.xml ->
    svg {
      xmlns: 'http://www.w3.org/2000/svg'
      :width
      :height
      viewBox: "0 0 #{width} #{height}"
      fill: 'white'
      ['font-family']: 'sans-serif'
    }, ->
      linearGradient {id:'gradient', x2: '0', y2: '100%'}, ->
        stop offset: 0, ['stop-color']: '#bbb', ['stop-opacity']: .1
        stop offset: 1, ['stop-opacity']: .1
      clipPath {id: 'clip'}, ->
        rect
          :width
          :height
          rx: 3
      g {['clip-path']: "url('#clip')"}, ->
        rect
          fill: '#555'
          :height
          :width
        rect
          fill: color
          :height
          width: width*(1-split)
          x: width*split
        rect
          fill: 'url(#gradient)'
          :height
          :width
        text 'Löve ♥',
          ['text-anchor']: 'middle'
          ['alignment-baseline']: 'central'
          x: width*split / 2
          y: height/2
        text number,
          ['text-anchor']: 'middle'
          ['alignment-baseline']: 'central'
          x: width*split + width*(1-split) / 2
          y: height/2
  generator buf\append
  buf

print tag '11.1'

badge.svg

<svg xmlns="http://www.w3.org/2000/svg" font-family="sans-serif" height="80" width="400" fill="white" viewBox="0 0 100 20"><linearGradient y2="100%" id="gradient" x2="0"><stop stop-color="#bbb" offset="0" stop-opacity="0.1"/><stop stop-opacity="0.1" offset="1"/></linearGradient><clipPath id="clip"><rect rx="3" height="20" width="100"/></clipPath><g clip-path="url('#clip')"><rect height="20" fill="#555" width="100"/><rect x="60.0" height="20" fill="#ea316e" width="40.0"/><rect height="20" fill="url(#gradient)" width="100"/><text y="10.0" x="30.0" text-anchor="middle" alignment-baseline="central">Löve ♥</text><text y="10.0" x="80.0" text-anchor="middle" alignment-baseline="central">11.1</text></g></svg>