Skip to content

Commit

Permalink
improve the box border
Browse files Browse the repository at this point in the history
  • Loading branch information
sindresorhus committed Apr 8, 2016
1 parent ed13351 commit ec79c37
Show file tree
Hide file tree
Showing 13 changed files with 28 additions and 21 deletions.
18 changes: 9 additions & 9 deletions README.md
Expand Up @@ -23,12 +23,12 @@ console.log(yosay('Hello, and welcome to my fantastic generator full of whimsy a

/*
_-----_
| | .--------------------------.
|--(o)--| | Hello, and welcome to my |
`---------´ | fantastic generator full |
( _´U`_ ) | of whimsy and bubble |
/___A___\ | gum! |
| ~ | '--------------------------'
| | ╭──────────────────────────╮
|--(o)--| Hello, and welcome to my
`---------´ fantastic generator full
( _´U`_ ) of whimsy and bubble
/___A___\ gum!
| ~ | ╰──────────────────────────╯
__'.___.'__
´ ` |° ´ Y `
*/
Expand All @@ -55,9 +55,9 @@ $ yosay --help
yosay 'Sindre is a horse'
_-----_
| | .--------------------------.
|--(o)--| | Sindre is a horse |
`---------´ '--------------------------'
| | ╭──────────────────────────╮
|--(o)--| Sindre is a horse
`---------´ ╰──────────────────────────╯
( _´U`_ )
/___A___\
| ~ |
Expand Down
10 changes: 7 additions & 3 deletions index.js
Expand Up @@ -7,7 +7,9 @@ var stripAnsi = require('strip-ansi');
var ansiStyles = require('ansi-styles');
var ansiRegex = require('ansi-regex')();
var repeating = require('repeating');
var cliBoxes = require('cli-boxes');

var border = cliBoxes.round;
var topOffset = 3;
var leftOffset = 17;
var defaultGreeting =
Expand Down Expand Up @@ -57,10 +59,12 @@ module.exports = function (message, options) {

regExNewLine = new RegExp('\\s{' + maxLength + '}');

var borderHorizontal = repeating(border.horizontal, maxLength + 2);

frame = {
top: '.' + repeating('-', maxLength + 2) + '.',
side: ansiStyles.reset.open + '|' + ansiStyles.reset.open,
bottom: ansiStyles.reset.open + '\'' + repeating('-', maxLength + 2) + '\''
top: border.topLeft + borderHorizontal + border.topRight,
side: ansiStyles.reset.open + border.vertical + ansiStyles.reset.open,
bottom: ansiStyles.reset.open + border.bottomLeft + borderHorizontal + border.bottomRight
};

message.replace(ansiRegex, function (match, offset) {
Expand Down
1 change: 1 addition & 0 deletions package.json
Expand Up @@ -33,6 +33,7 @@
"ansi-regex": "^2.0.0",
"ansi-styles": "^2.0.0",
"chalk": "^1.0.0",
"cli-boxes": "^1.0.0",
"pad-component": "0.0.1",
"repeating": "^2.0.0",
"string-width": "^1.0.0",
Expand Down
2 changes: 1 addition & 1 deletion test/fixture/ansi.json
@@ -1 +1 @@
"\n _-----_\n | | .--------------------------.\n |\u001b[31m--(o)--\u001b[39m| \u001b[0m|\u001b[0m \u001b[0m\u001b[31m\u001b[47mH\u001b[31m\u001b[47mi\u001b[0m \u001b[0m|\u001b[0m\n `---------´ \u001b[0m'--------------------------'\n \u001b[33m(\u001b[39m _\u001b[33m´U`\u001b[39m_ \u001b[33m)\u001b[39m \n /___A___\\ \n \u001b[33m| ~ |\u001b[39m \n __\u001b[33m'.___.'\u001b[39m__ \n ´ \u001b[31m` |\u001b[39m° \u001b[31m´ Y\u001b[39m ` \n"
"\n _-----_\n | | ╭──────────────────────────╮\n |\u001b[31m--(o)--\u001b[39m| \u001b[0m\u001b[0m \u001b[0m\u001b[31m\u001b[47mH\u001b[31m\u001b[47mi\u001b[0m \u001b[0m\u001b[0m\n `---------´ \u001b[0m╰──────────────────────────╯\n \u001b[33m(\u001b[39m _\u001b[33m´U`\u001b[39m_ \u001b[33m)\u001b[39m \n /___A___\\ \n \u001b[33m| ~ |\u001b[39m \n __\u001b[33m'.___.'\u001b[39m__ \n ´ \u001b[31m` |\u001b[39m° \u001b[31m´ Y\u001b[39m ` \n"
2 changes: 1 addition & 1 deletion test/fixture/correctly-formatted.json
@@ -1 +1 @@
"\n _-----_\n | | .--------------------------.\n |\u001b[31m--(o)--\u001b[39m| \u001b[0m|\u001b[0m \u001b[0mHi\u001b[0m \u001b[0m|\u001b[0m\n `---------´ \u001b[0m'--------------------------'\n \u001b[33m(\u001b[39m _\u001b[33m´U`\u001b[39m_ \u001b[33m)\u001b[39m \n /___A___\\ \n \u001b[33m| ~ |\u001b[39m \n __\u001b[33m'.___.'\u001b[39m__ \n ´ \u001b[31m` |\u001b[39m° \u001b[31m´ Y\u001b[39m ` \n"
"\n _-----_\n | | ╭──────────────────────────╮\n |\u001b[31m--(o)--\u001b[39m| \u001b[0m\u001b[0m \u001b[0mHi\u001b[0m \u001b[0m\u001b[0m\n `---------´ \u001b[0m╰──────────────────────────╯\n \u001b[33m(\u001b[39m _\u001b[33m´U`\u001b[39m_ \u001b[33m)\u001b[39m \n /___A___\\ \n \u001b[33m| ~ |\u001b[39m \n __\u001b[33m'.___.'\u001b[39m__ \n ´ \u001b[31m` |\u001b[39m° \u001b[31m´ Y\u001b[39m ` \n"
2 changes: 1 addition & 1 deletion test/fixture/half-ansi.json
@@ -1 +1 @@
"\n _-----_\n | | .--------------------------.\n |\u001b[31m--(o)--\u001b[39m| \u001b[0m|\u001b[0m \u001b[0m\u001b[31m\u001b[47mH\u001b[31m\u001b[47mi\u001b[49m\u001b[39m \u001b[49m\u001b[39mt\u001b[49m\u001b[39mh\u001b[49m\u001b[39me\u001b[49m\u001b[39mr\u001b[49m\u001b[39me\u001b[49m\u001b[39m,\u001b[49m\u001b[39m \u001b[49m\u001b[39ms\u001b[49m\u001b[39mi\u001b[49m\u001b[39mr\u001b[49m\u001b[39m!\u001b[0m \u001b[0m|\u001b[0m\n `---------´ \u001b[0m'--------------------------'\n \u001b[33m(\u001b[39m _\u001b[33m´U`\u001b[39m_ \u001b[33m)\u001b[39m \n /___A___\\ \n \u001b[33m| ~ |\u001b[39m \n __\u001b[33m'.___.'\u001b[39m__ \n ´ \u001b[31m` |\u001b[39m° \u001b[31m´ Y\u001b[39m ` \n"
"\n _-----_\n | | ╭──────────────────────────╮\n |\u001b[31m--(o)--\u001b[39m| \u001b[0m\u001b[0m \u001b[0m\u001b[31m\u001b[47mH\u001b[31m\u001b[47mi\u001b[49m\u001b[39m \u001b[49m\u001b[39mt\u001b[49m\u001b[39mh\u001b[49m\u001b[39me\u001b[49m\u001b[39mr\u001b[49m\u001b[39me\u001b[49m\u001b[39m,\u001b[49m\u001b[39m \u001b[49m\u001b[39ms\u001b[49m\u001b[39mi\u001b[49m\u001b[39mr\u001b[49m\u001b[39m!\u001b[0m \u001b[0m\u001b[0m\n `---------´ \u001b[0m╰──────────────────────────╯\n \u001b[33m(\u001b[39m _\u001b[33m´U`\u001b[39m_ \u001b[33m)\u001b[39m \n /___A___\\ \n \u001b[33m| ~ |\u001b[39m \n __\u001b[33m'.___.'\u001b[39m__ \n ´ \u001b[31m` |\u001b[39m° \u001b[31m´ Y\u001b[39m ` \n"
2 changes: 1 addition & 1 deletion test/fixture/handle-fullwidth.json
@@ -1 +1 @@
"\n _-----_\n | | .--------------------------.\n |\u001b[31m--(o)--\u001b[39m| \u001b[0m|\u001b[0m \u001b[0m项目可以更新了\u001b[0m \u001b[0m|\u001b[0m\n `---------´ \u001b[0m'--------------------------'\n \u001b[33m(\u001b[39m _\u001b[33m´U`\u001b[39m_ \u001b[33m)\u001b[39m \n /___A___\\ \n \u001b[33m| ~ |\u001b[39m \n __\u001b[33m'.___.'\u001b[39m__ \n ´ \u001b[31m` |\u001b[39m° \u001b[31m´ Y\u001b[39m ` \n"
"\n _-----_\n | | ╭──────────────────────────╮\n |\u001b[31m--(o)--\u001b[39m| \u001b[0m\u001b[0m \u001b[0m项目可以更新了\u001b[0m \u001b[0m\u001b[0m\n `---------´ \u001b[0m╰──────────────────────────╯\n \u001b[33m(\u001b[39m _\u001b[33m´U`\u001b[39m_ \u001b[33m)\u001b[39m \n /___A___\\ \n \u001b[33m| ~ |\u001b[39m \n __\u001b[33m'.___.'\u001b[39m__ \n ´ \u001b[31m` |\u001b[39m° \u001b[31m´ Y\u001b[39m ` \n"
2 changes: 1 addition & 1 deletion test/fixture/handle-new-line.json
@@ -1 +1 @@
"\n _-----_\n | | .--------------------------.\n |\u001b[31m--(o)--\u001b[39m| \u001b[0m|\u001b[0m \u001b[0mfirst line\u001b[0m \u001b[0m|\u001b[0m\n `---------´ \u001b[0m|\u001b[0m \u001b[0msecond line\u001b[0m \u001b[0m|\u001b[0m\n \u001b[33m(\u001b[39m _\u001b[33m´U`\u001b[39m_ \u001b[33m)\u001b[39m \u001b[0m|\u001b[0m \u001b[0m\u001b[0m \u001b[0m|\u001b[0m\n /___A___\\ \u001b[0m|\u001b[0m \u001b[0mfourth line\u001b[0m \u001b[0m|\u001b[0m\n \u001b[33m| ~ |\u001b[39m \u001b[0m'--------------------------'\n __\u001b[33m'.___.'\u001b[39m__ \n ´ \u001b[31m` |\u001b[39m° \u001b[31m´ Y\u001b[39m ` \n"
"\n _-----_\n | | ╭──────────────────────────╮\n |\u001b[31m--(o)--\u001b[39m| \u001b[0m\u001b[0m \u001b[0mfirst line\u001b[0m \u001b[0m\u001b[0m\n `---------´ \u001b[0m\u001b[0m \u001b[0msecond line\u001b[0m \u001b[0m\u001b[0m\n \u001b[33m(\u001b[39m _\u001b[33m´U`\u001b[39m_ \u001b[33m)\u001b[39m \u001b[0m\u001b[0m \u001b[0m\u001b[0m \u001b[0m\u001b[0m\n /___A___\\ \u001b[0m\u001b[0m \u001b[0mfourth line\u001b[0m \u001b[0m\u001b[0m\n \u001b[33m| ~ |\u001b[39m \u001b[0m╰──────────────────────────╯\n __\u001b[33m'.___.'\u001b[39m__ \n ´ \u001b[31m` |\u001b[39m° \u001b[31m´ Y\u001b[39m ` \n"
2 changes: 1 addition & 1 deletion test/fixture/length-customization.json
@@ -1 +1 @@
"\n _-----_\n | | .----------.\n |\u001b[31m--(o)--\u001b[39m| \u001b[0m|\u001b[0m \u001b[0mHi\u001b[0m \u001b[0m|\u001b[0m\n `---------´ \u001b[0m'----------'\n \u001b[33m(\u001b[39m _\u001b[33m´U`\u001b[39m_ \u001b[33m)\u001b[39m \n /___A___\\ \n \u001b[33m| ~ |\u001b[39m \n __\u001b[33m'.___.'\u001b[39m__ \n ´ \u001b[31m` |\u001b[39m° \u001b[31m´ Y\u001b[39m ` \n"
"\n _-----_\n | | ╭──────────╮\n |\u001b[31m--(o)--\u001b[39m| \u001b[0m\u001b[0m \u001b[0mHi\u001b[0m \u001b[0m\u001b[0m\n `---------´ \u001b[0m╰──────────╯\n \u001b[33m(\u001b[39m _\u001b[33m´U`\u001b[39m_ \u001b[33m)\u001b[39m \n /___A___\\ \n \u001b[33m| ~ |\u001b[39m \n __\u001b[33m'.___.'\u001b[39m__ \n ´ \u001b[31m` |\u001b[39m° \u001b[31m´ Y\u001b[39m ` \n"
2 changes: 1 addition & 1 deletion test/fixture/long-words.json
@@ -1 +1 @@
"\n _-----_\n | | .--------------------------.\n |\u001b[31m--(o)--\u001b[39m| \u001b[0m|\u001b[0m \u001b[0miloveunicornsiloveunicor\u001b[0m \u001b[0m|\u001b[0m\n `---------´ \u001b[0m|\u001b[0m \u001b[0mnsiloveunicornsiloveunic\u001b[0m \u001b[0m|\u001b[0m\n \u001b[33m(\u001b[39m _\u001b[33m´U`\u001b[39m_ \u001b[33m)\u001b[39m \u001b[0m|\u001b[0m \u001b[0mornsiloveunicornsiloveun\u001b[0m \u001b[0m|\u001b[0m\n /___A___\\ \u001b[0m|\u001b[0m \u001b[0micorns\u001b[0m \u001b[0m|\u001b[0m\n \u001b[33m| ~ |\u001b[39m \u001b[0m'--------------------------'\n __\u001b[33m'.___.'\u001b[39m__ \n ´ \u001b[31m` |\u001b[39m° \u001b[31m´ Y\u001b[39m ` \n"
"\n _-----_\n | | ╭──────────────────────────╮\n |\u001b[31m--(o)--\u001b[39m| \u001b[0m\u001b[0m \u001b[0miloveunicornsiloveunicor\u001b[0m \u001b[0m\u001b[0m\n `---------´ \u001b[0m\u001b[0m \u001b[0mnsiloveunicornsiloveunic\u001b[0m \u001b[0m\u001b[0m\n \u001b[33m(\u001b[39m _\u001b[33m´U`\u001b[39m_ \u001b[33m)\u001b[39m \u001b[0m\u001b[0m \u001b[0mornsiloveunicornsiloveun\u001b[0m \u001b[0m\u001b[0m\n /___A___\\ \u001b[0m\u001b[0m \u001b[0micorns\u001b[0m \u001b[0m\u001b[0m\n \u001b[33m| ~ |\u001b[39m \u001b[0m╰──────────────────────────╯\n __\u001b[33m'.___.'\u001b[39m__ \n ´ \u001b[31m` |\u001b[39m° \u001b[31m´ Y\u001b[39m ` \n"
2 changes: 1 addition & 1 deletion test/fixture/override-maxLength.json
@@ -1 +1 @@
"\n _-----_\n | | .--------.\n |\u001b[31m--(o)--\u001b[39m| \u001b[0m|\u001b[0m \u001b[0mHello,\u001b[0m \u001b[0m|\u001b[0m\n `---------´ \u001b[0m|\u001b[0m \u001b[0mbuddy!\u001b[0m \u001b[0m|\u001b[0m\n \u001b[33m(\u001b[39m _\u001b[33m´U`\u001b[39m_ \u001b[33m)\u001b[39m \u001b[0m'--------'\n /___A___\\ \n \u001b[33m| ~ |\u001b[39m \n __\u001b[33m'.___.'\u001b[39m__ \n ´ \u001b[31m` |\u001b[39m° \u001b[31m´ Y\u001b[39m ` \n"
"\n _-----_\n | | ╭────────╮\n |\u001b[31m--(o)--\u001b[39m| \u001b[0m\u001b[0m \u001b[0mHello,\u001b[0m \u001b[0m\u001b[0m\n `---------´ \u001b[0m\u001b[0m \u001b[0mbuddy!\u001b[0m \u001b[0m\u001b[0m\n \u001b[33m(\u001b[39m _\u001b[33m´U`\u001b[39m_ \u001b[33m)\u001b[39m \u001b[0m╰────────╯\n /___A___\\ \n \u001b[33m| ~ |\u001b[39m \n __\u001b[33m'.___.'\u001b[39m__ \n ´ \u001b[31m` |\u001b[39m° \u001b[31m´ Y\u001b[39m ` \n"
2 changes: 1 addition & 1 deletion test/fixture/wrap-ansi-styles.json
@@ -1 +1 @@
"\n _-----_\n | | .--------------------------.\n |\u001b[31m--(o)--\u001b[39m| \u001b[0m|\u001b[0m \u001b[0m\u001b[31m\u001b[47mH\u001b[31m\u001b[47mi\u001b[49m\u001b[39m \u001b[49m\u001b[39mt\u001b[49m\u001b[39mh\u001b[49m\u001b[39me\u001b[49m\u001b[39mr\u001b[49m\u001b[39me\u001b[49m\u001b[39m,\u001b[49m\u001b[39m \u001b[49m\u001b[39ms\u001b[49m\u001b[39mi\u001b[49m\u001b[39mr\u001b[49m\u001b[39m!\u001b[49m\u001b[39m \u001b[44m\u001b[37my\u001b[44m\u001b[37mo\u001b[44m\u001b[37mu\u001b[44m\u001b[37m \u001b[44m\u001b[37ma\u001b[44m\u001b[37mr\u001b[44m\u001b[37me\u001b[0m \u001b[0m|\u001b[0m\n `---------´ \u001b[0m|\u001b[0m \u001b[0m\u001b[44m\u001b[37ml\u001b[44m\u001b[37mo\u001b[44m\u001b[37mo\u001b[44m\u001b[37mk\u001b[44m\u001b[37mi\u001b[44m\u001b[37mn\u001b[44m\u001b[37mg\u001b[39m\u001b[49m \u001b[39m\u001b[49ms\u001b[39m\u001b[49mw\u001b[39m\u001b[49me\u001b[39m\u001b[49ml\u001b[39m\u001b[49ml\u001b[39m\u001b[49m \u001b[39m\u001b[49mt\u001b[39m\u001b[49mo\u001b[39m\u001b[49md\u001b[39m\u001b[49ma\u001b[39m\u001b[49my\u001b[39m\u001b[49m!\u001b[0m \u001b[0m|\u001b[0m\n \u001b[33m(\u001b[39m _\u001b[33m´U`\u001b[39m_ \u001b[33m)\u001b[39m \u001b[0m'--------------------------'\n /___A___\\ \n \u001b[33m| ~ |\u001b[39m \n __\u001b[33m'.___.'\u001b[39m__ \n ´ \u001b[31m` |\u001b[39m° \u001b[31m´ Y\u001b[39m ` \n"
"\n _-----_\n | | ╭──────────────────────────╮\n |\u001b[31m--(o)--\u001b[39m| \u001b[0m│\u001b[0m \u001b[0m\u001b[31m\u001b[47mH\u001b[31m\u001b[47mi\u001b[49m\u001b[39m \u001b[49m\u001b[39mt\u001b[49m\u001b[39mh\u001b[49m\u001b[39me\u001b[49m\u001b[39mr\u001b[49m\u001b[39me\u001b[49m\u001b[39m,\u001b[49m\u001b[39m \u001b[49m\u001b[39ms\u001b[49m\u001b[39mi\u001b[49m\u001b[39mr\u001b[49m\u001b[39m!\u001b[49m\u001b[39m \u001b[44m\u001b[37my\u001b[44m\u001b[37mo\u001b[44m\u001b[37mu\u001b[44m\u001b[37m \u001b[44m\u001b[37ma\u001b[44m\u001b[37mr\u001b[44m\u001b[37me\u001b[0m \u001b[0m│\u001b[0m\n `---------´ \u001b[0m│\u001b[0m \u001b[0m\u001b[44m\u001b[37ml\u001b[44m\u001b[37mo\u001b[44m\u001b[37mo\u001b[44m\u001b[37mk\u001b[44m\u001b[37mi\u001b[44m\u001b[37mn\u001b[44m\u001b[37mg\u001b[39m\u001b[49m \u001b[39m\u001b[49ms\u001b[39m\u001b[49mw\u001b[39m\u001b[49me\u001b[39m\u001b[49ml\u001b[39m\u001b[49ml\u001b[39m\u001b[49m \u001b[39m\u001b[49mt\u001b[39m\u001b[49mo\u001b[39m\u001b[49md\u001b[39m\u001b[49ma\u001b[39m\u001b[49my\u001b[39m\u001b[49m!\u001b[0m \u001b[0m│\u001b[0m\n \u001b[33m(\u001b[39m _\u001b[33m´U`\u001b[39m_ \u001b[33m)\u001b[39m \u001b[0m╰──────────────────────────╯\n /___A___\\ \n \u001b[33m| ~ |\u001b[39m \n __\u001b[33m'.___.'\u001b[39m__ \n ´ \u001b[31m` |\u001b[39m° \u001b[31m´ Y\u001b[39m ` \n"
2 changes: 2 additions & 0 deletions test/test.js
Expand Up @@ -99,6 +99,7 @@ describe('yosay', function () {
it('should handle new line properly', function (done) {
var testName = 'handle-new-line';
var expected = yosay('first line\nsecond line\n\nfourth line');

fs.readFile(getFixturePath(testName), function (err, data) {
assert.ifError(err);
assert.equal(JSON.parse(data), expected);
Expand All @@ -109,6 +110,7 @@ describe('yosay', function () {
it('should handle fullwidth characters', function (done) {
var testName = 'handle-fullwidth';
var expected = yosay('项目可以更新了');

fs.readFile(getFixturePath(testName), function (err, data) {
assert.ifError(err);
assert.equal(JSON.parse(data), expected);
Expand Down

5 comments on commit ec79c37

@sholladay
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI, this looks misaligned in my Terminal. Not sure if it is known. Need an issue with details?

screen shot 2016-04-16 at 1 53 23 pm

@sindresorhus
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's just your font. Try using Menlo.

@sholladay
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is Droid Sans Mono. Isn't that what you use too?

@sindresorhus
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I changed to Menlo in the Terminal as it looks better there.

@sholladay
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Alright, kicking the tires on that. Thanks.

Please sign in to comment.