Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mattjennings/remark-preview
Adds a preview of markdown content to frontmatter
https://github.com/mattjennings/remark-preview
Last synced: about 7 hours ago
JSON representation
Adds a preview of markdown content to frontmatter
- Host: GitHub
- URL: https://github.com/mattjennings/remark-preview
- Owner: mattjennings
- Created: 2021-07-10T00:37:08.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-10-27T22:53:44.000Z (10 days ago)
- Last Synced: 2024-10-28T01:39:54.237Z (10 days ago)
- Language: JavaScript
- Size: 18.6 KB
- Stars: 1
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# remark-preview
Extracts a preview of the markdown and adds it to the frontmatter
## Usage
```js
import preview, { textFormatter } from "remark-preview";
const md = `
# Welcome to my blog
In this post, I will talk about dogs, cats, squirrels, llamas and polar bears.
`;
remark()
.use(
preview(
textFormatter({
length: 50,
})
)
)
.process(md, function (err, file) {
console.log(file.data.fm.preview);
// Welcome to my blog\n\nIn this post, I will talk about dogs, cats...
});
```
You can also format it as HTML:
```js
import remark from "remark";
import preview, { htmlFormatter } from "remark-preview";
const md = `
# Welcome to my blog
Here is a very cool [website](example.com) I found on dogs, cats, squirrels, llamas and polar bears.
`;
remark()
.use(
preview(
htmlFormatter({
length: 70,
})
)
)
.process(md, function (err, file) {
console.log(file.data.fm.preview);
//
Welcome to my blog
Here is a very cool website I found on dogs, cats, ...
});
```
## Formatters
### textFormatter
```js
preview(textFormatter(options));
```
| Option | Type | Default | Description |
| ----------------- | ------- | ------- | ------------------------------------------ |
| options.length | number | 300 | Max number of characters before truncating |
| options.ellipsis | boolean | true | Adds an ellipsis when truncating |
| options.headings | boolean | true | Includes headings in the preview content |
| options.maxBlocks | number | | Max number of block elements to include |
### htmlFormatter
```js
preview(htmlFormatter(options));
```
| Option | Type | Default | Description |
| ----------------- | ------ | ------- | ------------------------------------------ |
| options.length | number | 300 | Max number of characters before truncating |
| options.maxBlocks | number | | Max number of block elements to include |
It uses [truncate-html](https://www.npmjs.com/package/truncate-html) for truncation, so it can receive all of its options as well
### custom formatter
If you wish, you can make your own formatter as well:
```js
import remark from "remark";
import { visit } from "unist-util-visit";
remark().use(
preview({
truncate(text) {
return text.slice(0, 100);
},
parse(tree) {
// see https://github.com/syntax-tree/unist to learn how to parse a remark node tree
let text = "";
visit(tree, "text", (node) => {
text += node.value;
});
return text;
},
})
);
```
## API
### `preview`
```js
preview(formatter, options);
```
| Option | Type | Default | Description |
| ----------------- | ------ | --------- | --------------------------------------------------------------- |
| formatter | object | | The formatter to use to parse and truncate the preview contents |
| options.attribute | string | "preview" | The frontmatter attribute to store the preview under |