https://github.com/phenomnomnominal/fancy
dumb little library for fancy console error messages
https://github.com/phenomnomnominal/fancy
Last synced: 14 days ago
JSON representation
dumb little library for fancy console error messages
- Host: GitHub
- URL: https://github.com/phenomnomnominal/fancy
- Owner: phenomnomnominal
- License: mit
- Created: 2018-11-13T04:30:42.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-11-13T06:51:40.000Z (over 6 years ago)
- Last Synced: 2025-04-18T14:15:41.557Z (about 1 month ago)
- Language: TypeScript
- Size: 429 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @phenomnomnominal/fancy
[](https://img.shields.io/npm/v/@phenomnomnominal/fancy.svg)
[](https://codeclimate.com/github/phenomnomnominal/fancy)
[](https://codeclimate.com/github/phenomnomnominal/fancy/coverage)
## Installation
```zsh
npm install @phenomnomnominal/fancy --save-dev
```
## Fancy
**fancy** is a pretty dumb little library for making slightly more interesting console error messages.
You can do kind of Markdown-y things like this:
```typescript
fancy(`
# Error:
## Error type:
Oh no, this thing here happened
[http://some.website/picture-of-a-cat.png]
`);
```
[**Try it out here!**](https://stackblitz.com/edit/js-d1yxwk) or look at this:
It works good as in Chrome, kinda in Safari, not really in Firefox, and I haven't looked at Edge 😎.
### Currently supported
* Headings: `#`, `##`, `###`, `####`, `#####`, `######`
* Plain text: `Just normal text`
* Images: `[URL]`
## API
### `fancy (layout: string, options?: FancyOptions, data: FancyData = {}): void`
`fancy` will parse and log a message!
```typescript
import { fancy } from '@phenomnomnominal/fancy';
fancy(`
# Heading:
## Sub-heading
Here is a message for you!
`);
```
### `template (layout: string, options: FancyOptions): (data: FancyData) => void`
`template` will parse a message and return a template which can then be reused with different data!
```typescript
import { template } from '@phenomnomnominal/fancy';
const message = template(`
# {{ heading }}:
## {{ subheading }}
{{ message }}
`);
message({
heading: 'Heading',
subheading: 'Sub-heading',
message: 'Here is a message for you!'
});
```
### Style options
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`: `string`
* `color`: `string`
* `fontSize`: `number`
* `fontWeight`: `number`
* `padding`: `number`
```typescript
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:
```typescript
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
}
}
```
## Production mode
You probably don't want to ship all of `fancy` to production. If you're using [Webpack](https://webpack.js.org/), you can use the production version:
```typescript
plugins: [
new webpack.NormalModuleReplacementPlugin(/@phenomnomnominal\/fancy/, function (resource) {
resource.request = require.resolve('@phenomnomnominal/fancy').replace('index.js', 'index.prod.js');
})
]
```