https://github.com/donavon/transformer-open-graph
https://github.com/donavon/transformer-open-graph
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/donavon/transformer-open-graph
- Owner: donavon
- License: mit
- Created: 2022-04-03T12:29:34.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-04-03T16:06:35.000Z (over 3 years ago)
- Last Synced: 2025-03-17T19:28:43.898Z (7 months ago)
- Language: TypeScript
- Size: 1.2 MB
- Stars: 23
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# transformer-open-graph
A transformer for [`@remark-embedder/core`](https://github.com/remark-embedder/core) that extracts Open Graph metadata from a URL and create an HTML preview.
- Works with [`@remark-embedder/core`](https://github.com/remark-embedder/core)
- Supports Twitter Cards and Open Graph
- Powered by [Open Graph Ninja](https://opengraph.ninja/)'s API
- 100% test coverage
- Written in TypeScript and fully typed
- Awesome! 🎉
Want to see an example? Check out [https://donavon.com/blog/markdown#social-links](https://donavon.com/blog/markdown#social-links)
## Usage
```ts
import remarkEmbedder from '@remark-embedder/core';
import transformerOpenGraph from 'transformer-open-graph';
import remark from 'remark';
import html from 'remark-html';
const exampleMarkdown = `
This is my website:
https://donavon.com
`;
async function go() {
const result = await remark()
.use(remarkEmbedder, {
transformers: [transformerOpenGraph],
})
.use(html)
.process(exampleMarkdown);
console.log(result.toString());
// logs:
//
This is my website:
//
}
go();
```
## Config options
You can pass the following config options
| Options name | description |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
| `render` | A custom render function that accepts one argument, `data` of type [`OpenGraphNinja`](./src/openGraphNinja.ts), and returns an HTML string. |
### Example custom render
```ts
const exampleMarkdown = `
This is my website:
https://donavon.com
`;
const customRender: OpenGraphRender = (data) =>
`
Hello ${data.hostname}
`;
const config: OpenGraphConfig = { render: customRender };
const result = await remark()
.use(remarkEmbedder, {
transformers: [[transformerOpenGraph, config]],
})
.use(html)
.process(exampleMarkdown);
//
This is my website:
// Hello donavon.com
```
## Use with other transformers
If you are using other @remark-embedder transformers (e.g. [`@remark-embedder/transformer-oembed`](https://github.com/remark-embedder/transformer-oembed)), place `transformer-open-graph` last in the `transformers` array.
For example.
```ts
import remarkEmbedder, { RemarkEmbedderOptions } from '@remark-embedder/core';
import oembedTransformer from '@remark-embedder/transformer-oembed';
import transformerOpenGraph from 'transformer-open-graph';
const remarkEmbedderOptions: RemarkEmbedderOptions = {
transformers: [oembedTransformer, transformerOpenGraph],
};
const result = await remark()
.use(remarkEmbedder, remarkEmbedderOptions)
.use(html)
.process(exampleMarkdown);
```
## Example output
You'll need to B.Y.O. CSS, but you can get beautiful web page preview output like this.
## Getting Started
Install the library with your package manager of choice, e.g.:
```
$ npm i transformer-open-graph
# or
$ yarn add transformer-open-graph
```
## License
© 2022 Donavon West. Released under [MIT license](./LICENSE).
