Visual consistency and design in CLI logs

[swyxio]

currently our logs look like this: (compare with gatsby below)

with a little love we can make our CLI output look a lot better with some consistency. any ideas?

[swyxio]

here's an example of how it could look

[swyxio]

also lets fix that rediretor typo, it sticks out like a sore thumb

[calavera]

That redirector log is not really useful, let's remove it, or print it only in debug mode.

[swyxio]

that is controlled by @biilmann https://unpkg.com/netlify-redirector@0.0.3/index.js and i have asked him to patch: https://github.com/netlify/netlify-redirector

[swyxio]

i have experimented with:

const NETLIFYDEV = chalk
  .rgb(40, 180, 170) // netlify colors
  .inverse
  .bold(`<Netlify Dev>`);

which looks like this

[swyxio]

more subtle unicode branding/separators

∥

« »

↯
⇄

[swyxio]

we tried

const chalk = require("chalk");
console.log(`[${chalk.cyan("Netlify Dev")}] The cake is a lie - original`);
console.log(`«${chalk.cyan("Netlify Dev")}» The cake is a lie - 1`);
console.log(
  `${chalk.rgb(40, 180, 170).bold("Netlify Dev")} ${chalk.greenBright(
    "◈"
  )} The cake is a lie - 2`
);
console.log(
  `${chalk.rgb(40, 180, 170).bold("Netlify Dev")} ${chalk.yellowBright(
    "◈"
  )} The cake is a lie - 2 - warning`
);
console.log(
  `${chalk.rgb(40, 180, 170).bold("Netlify Dev")} ${chalk.redBright(
    "◈"
  )} The cake is a lie - 2 error`
);
console.log(
  `${chalk.rgb(40, 180, 170)("Netlify Dev")} ${chalk.green(
    "◆"
  )} The cake is a lie - 3`
);
console.log(
  `${chalk.rgb(40, 180, 170)("Netlify Dev")} ${chalk.green(
    "◊"
  )} The cake is a lie - 4`
);
console.log(
  `${chalk.rgb(40, 180, 170)("Netlify Dev")} ${chalk.green(
    "◇"
  )} The cake is a lie - 5`
);
console.log(
  `${chalk.rgb(40, 180, 170)("Netlify Dev")} ${chalk.green(
    "↯"
  )} The cake is a lie - 6`
);
console.log(
  `${chalk.rgb(40, 180, 170)("Netlify Dev")} ${chalk.green(
    "⇄"
  )} The cake is a lie - 7`
);

and we like 2: