Generate SVG displaying palette for docs

[Nick Williams]

I was thinking yesterday it might be nice to show the palette in the readme. I see you've done that now with a PNG. Github supports SVG files in markdown.

Perhaps we could generate an SVG for display in the readme? Happy to give it a go

[Nick Williams]

very rough code:

const svg = `
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    ${Object.values(colors).map(
      (color, i) =>
        `<circle
            r="5"
            stroke="rgba(0,0,0,0.1)"
            stroke-width="1px"
            cy="${Math.ceil((i + 1) / 4) * 10}"
            cx="${((i % 4) + 1) * 10}"
            fill=${color}
          />`
    )}
  </svg>
`

[—]

sounds good, you could generate it inside the watcher.

just npm install, npm run start, and when you edit and save theme.js it creates these themes (and the svg perhaps).

[—]

something like:

const { colors } = eval(`${data};noitalics`)

should give you fresh colors on file-save.

[Nick Williams]

Yeah i was just hacking something together locally. Will continue later today.

I was wondering why you eval the file, instead of using exports and requiring? You can bust the require cache like:

function requireUncached(module) {
  delete require.cache[require.resolve(module)]
  return require(module)
}
requireUncached("./theme")

Or is there some other reason i'm not seeing?

[—]

i had no idea, let's use requireUncached and real exports then :-)

[Nick Williams]

OK will do