# transformer-open-graph

> @remark-embedder transformer for URLs that support Open Graph

Latest version **0.3.0** (published 2022-04-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install transformer-open-graph
pnpm add transformer-open-graph
yarn add transformer-open-graph
bun add transformer-open-graph
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.0 |
| Published | 2022-04-03 |
| First published | 2022-04-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=12 |
| Dependencies | 2 |
| Unpacked size | 10 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 23 |
| Author | Donavon West |
| Maintainers | donavon |
| Keywords | remark, remark-plugin, remark-embedder, transformer, open-graph, open graph |

## Links

- npm: https://www.npmjs.com/package/transformer-open-graph
- Repository: https://github.com/donavon/transformer-open-graph
- Homepage: https://github.com/donavon/transformer-open-graph#readme
- Issues: https://github.com/donavon/transformer-open-graph/issues
- npm.io page: https://npm.io/package/transformer-open-graph

## Dependencies (2)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.17.8
- [make-fetch-happen](https://npm.io/package/make-fetch-happen.md) ^10.1.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.3.0 (latest) — 2022-04-03
- 0.2.1 — 2022-04-03
- 0.2.0 — 2022-04-03
- 0.1.1 — 2022-04-02
- 0.1.0 — 2022-04-02
- 0.0.0 — 2022-04-02

## 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:
  // <p>This is my website:</p>
  // <div class="ogn-outer-container">
  //   <a class="ogn-container" href="https://donavon.com/" target="_blank" rel="noopener noreferrer" data-twitter-card="summary">
  //     <img class="ogn-image" src="https://donavon.com/img/donavon-avatar.jpeg" alt="Donavon West's website">
  //     <div class="ogn-content">
  //       <p class="ogn-content-title">Donavon West's website</p>
  //       <p class="ogn-content-description">Donavon West is a full-stack software engineer living in the New York City area.</p>
  //       <p class="ogn-content-url">donavon.com</p>
  //     </div>
  //   </a>
  // </div>
}

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) =>
  `<h2>Hello ${data.hostname}</h2>`;

const config: OpenGraphConfig = { render: customRender };

const result = await remark()
  .use(remarkEmbedder, {
    transformers: [transformerOpenGraph, config],
  })
  .use(html)
  .process(exampleMarkdown);
// <p>This is my website:</p>
// <h2>Hello donavon.com</h2>
```

## Example output

You'll need to B.Y.O. CSS, but you can get beautiful web page preview output like this.

![sample screen](./docs/example.jpeg?raw=true)

## 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

&copy; 2022 Donavon West. Released under [MIT license](./LICENSE).

---
_Source: https://npm.io/package/transformer-open-graph · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._