Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/r4ai/remark-embed
A remark plugin to embed the content of the URL.
https://github.com/r4ai/remark-embed
link-card oembed ogp open-graph remark remark-plugin
Last synced: 20 days ago
JSON representation
A remark plugin to embed the content of the URL.
- Host: GitHub
- URL: https://github.com/r4ai/remark-embed
- Owner: r4ai
- License: mit
- Created: 2024-06-23T00:29:09.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-12-13T13:22:04.000Z (22 days ago)
- Last Synced: 2024-12-13T14:24:56.925Z (22 days ago)
- Topics: link-card, oembed, ogp, open-graph, remark, remark-plugin
- Language: TypeScript
- Homepage: https://jsr.io/@r4ai/remark-embed
- Size: 1.05 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @r4ai/remark-embed
[](https://jsr.io/@r4ai/remark-embed)
[](https://codecov.io/gh/r4ai/remark-embed)
[](https://github.com/r4ai/remark-embed/actions/workflows/ci.yml)
[](https://github.com/r4ai/remark-embed/actions/workflows/changeset-version.yml)
[](https://github.com/r4ai/remark-embed/actions/workflows/github-code-scanning/codeql)
A remark plugin to embed the content of the URL.
## Features
- Embed website using [oEmbed](https://en.wikipedia.org/wiki/OEmbed) by [`transformerOEmbed`](https://jsr.io/@r4ai/remark-embed/doc/transformers/~/transformerOEmbed)
- YouTube
- Spotify
- SpeakerDeck
- ...
- Generate link card using [Open Graph](https://ogp.me/) metadata by [`transformerLinkCard`](https://jsr.io/@r4ai/remark-embed/doc/transformers/~/transformerLinkCard)
- Twitter
- Facebook
- ...
- Fully customizable with [transformers](https://jsr.io/@r4ai/remark-embed/doc/~/RemarkEmbedOptions.transformers)
- You can define your own [transformer](https://jsr.io/@r4ai/remark-embed/doc/~/Transformer)
### About this plugin
This plugin rewrite a paragraph containing only a URL, such as the following, into any element through the [transformer](https://jsr.io/@r4ai/remark-embed/doc/~/Transformer).
```md
https://example.com/hoge
```
> [!note]
> Note that URLs such as the following will not be converted:
>
> - `according to https://example.com/hoge`
> - `[example](https://example.com/hoge)`
>
> URL must be the only content in the paragraph.
>
> Also, if there is no blank line before and after the paragraph, it will not be converted.
### Transformer
Currently, this plugin provides the following transformers:
- [`transformerOEmbed`](https://jsr.io/@r4ai/remark-embed/doc/transformers/~/transformerOEmbed) - embeds the URL content by fetching the oEmbed metadata
- [`transformerLinkCard`](https://jsr.io/@r4ai/remark-embed/doc/transformers/~/transformerLinkCard) - generates a link card by fetching the Open Graph metadata
You can also define your own [transformer](https://jsr.io/@r4ai/remark-embed/doc/~/Transformer). Please refer to the transformer in the [./src/transformers](./src/transformers) directory for details on how to define them.
Following is the algorithm of how this plugin will apply the transformers.
1. let `elements` be a list of link nodes such that each node's parent paragraph contains only one link\
Example: `elements = [{ type: 'link', url: 'https://example.com/hoge' }]`
2. for each `element` of `elements`, do the following in parallel:
1. let `url` be the `element`'s url value.
2. for each `transformer` of `transformers`, do the following in sequence:
1. if `transformer.match(url)` is `true`:
1. replace the `element`'s tag name with the result of `transformer.tagName(url)`
2. replace the `element`'s properties with the result of `transformer.properties(url)`
3. replace the `element`'s children with the result of `transformer.children(url)`
## Installation
- **Bun**:
```sh
bun add @r4ai/remark-embed
```
- **Deno**:
```sh
deno add @r4ai/remark-embed
```
- **NPM**:
```sh
npm install @r4ai/remark-embed
```
- **PNPM**:
```sh
pnpm add @r4ai/remark-embed
```
- **Yarn**:
```sh
yarn add @r4ai/remark-embed
```
## Usage
```ts
import rehypeStringify from "rehype-stringify";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import { unified } from "unified";
import remarkEmbed from "@r4ai/remark-embed";
import { transformerOEmbed } from "@r4ai/remark-embed/transformers";
const md = `
`;
const html = (
await unified()
.use(remarkParse)
.use(remarkRehype)
.use(remarkEmbed, {
transformers: [transformerOEmbed()],
})
.use(rehypeStringify)
.process(md)
).toString();
console.log(html);
```
Yields:
```html
```
## Documentation
See: