npm install @phenomnomnominal/fancy --save-devfancy is a pretty dumb little library for making slightly more interesting console error messages.
You can do kind of Markdown-y things like this:
fancy(`
# Error:
## Error type:
Oh no, this thing here happened
[http://some.website/picture-of-a-cat.png]
`);Try it out here! or look at this:
It works good as in Chrome, kinda in Safari, not really in Firefox, and I haven't looked at Edge 😎.
- Headings:
#,##,###,####,#####,###### - Plain text:
Just normal text - Images:
[URL]
fancy will parse and log a message!
import { fancy } from '@phenomnomnominal/fancy';
fancy(`
# Heading:
## Sub-heading
Here is a message for you!
`);template will parse a message and return a template which can then be reused with different data!
import { template } from '@phenomnomnominal/fancy';
const message = template(`
# {{ heading }}:
## {{ subheading }}
{{ message }}
`);
message({
heading: 'Heading',
subheading: 'Sub-heading',
message: 'Here is a message for you!'
});You can change how fancy renders your content! You can set styles for each of the different types of content, h1, h2, h3, h4, h5, h6, text. The following properties can be changed:
backgroundColor:stringcolor:stringfontSize:numberfontWeight:numberpadding:number
fancy(`
# HEADING 1
## HEADING 2
TEXT
`, {
h1: {
backgroundColor: 'yellow',
color: 'blue'
},
h2: {
padding: 30
},
text: {
fontSize: 20,
fontWeight: 200
}
})You can also modify fontSize, and fontWeight of all the headings at once, based on the settings for text content:
fancy(`
# HEADING 1
## HEADING 2
TEXT
`, {
size: [10, 8, 6, 4, 3, 2], // Resulting sizes will be size[i] * text.fontSize
weight: [9, 8, 7, 6, 5, 4] // Resulting sizes will be weight[i] * text.fontWeight
text: {
fontSize: 10,
fontWeight: 100
}
}You probably don't want to ship all of fancy to production. If you're using Webpack, you can use the production version:
plugins: [
new webpack.NormalModuleReplacementPlugin(/@phenomnomnominal\/fancy/, function (resource) {
resource.request = require.resolve('@phenomnomnominal/fancy').replace('index.js', 'index.prod.js');
})
]