Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

rehype-document

Package Overview
Dependencies
Maintainers
2
Versions
22
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

rehype-document - npm Package Compare versions

Comparing version 6.0.0 to 6.0.1

16

index.d.ts
/**
* Wrap a document around a fragment.
*
* @type {import('unified').Plugin<[Options] | [], Root>}
* @type {import('unified').Plugin<[Options?] | Array<void>, Root>}
*/
export default function rehypeDocument(
options?: Options | undefined
options?: void | Options | undefined
):

@@ -33,7 +33,7 @@ | void

*/
style?: string | string[] | undefined
style?: string | Array<string> | undefined
/**
* Links to stylesheets to include in `head`.
*/
css?: string | string[] | undefined
css?: string | Array<string> | undefined
/**

@@ -47,3 +47,3 @@ * Metadata to include in `head`.

*/
meta?: Properties | Properties[] | undefined
meta?: Properties | Array<Properties> | undefined
/**

@@ -57,11 +57,11 @@ * Link tags to include in `head`.

*/
link?: Properties | Properties[] | undefined
link?: Properties | Array<Properties> | undefined
/**
* Inline scripts to include at end of `body` in `<script>`s.
*/
script?: string | string[] | undefined
script?: string | Array<string> | undefined
/**
* External scripts to include at end of `body` in `script[src]`s.
*/
js?: string | string[] | undefined
js?: string | Array<string> | undefined
}

22

index.js

@@ -16,7 +16,7 @@ /**

* Whether to insert a `meta[viewport]`.
* @property {string|string[]|undefined} [style=[]]
* @property {string|Array<string>|undefined} [style=[]]
* CSS to include in `head` in `<style>` elements.
* @property {string|string[]|undefined} [css=[]]
* @property {string|Array<string>|undefined} [css=[]]
* Links to stylesheets to include in `head`.
* @property {Properties|Properties[]|undefined} [meta=[]]
* @property {Properties|Array<Properties>|undefined} [meta=[]]
* Metadata to include in `head`.

@@ -28,3 +28,3 @@ *

* `meta` element.
* @property {Properties|Properties[]|undefined} [link=[]]
* @property {Properties|Array<Properties>|undefined} [link=[]]
* Link tags to include in `head`.

@@ -36,5 +36,5 @@ *

* element.
* @property {string|string[]|undefined} [script=[]]
* @property {string|Array<string>|undefined} [script=[]]
* Inline scripts to include at end of `body` in `<script>`s.
* @property {string|string[]|undefined} [js=[]]
* @property {string|Array<string>|undefined} [js=[]]
* External scripts to include at end of `body` in `script[src]`s.

@@ -48,3 +48,3 @@ */

*
* @type {import('unified').Plugin<[Options] | [], Root>}
* @type {import('unified').Plugin<[Options?] | Array<void>, Root>}
*/

@@ -68,5 +68,5 @@ export default function rehypeDocument(options = {}) {

const title = options.title || file.stem
/** @type {Node[]} */
/** @type {Array<Node>} */
const contents = tree.type === 'root' ? tree.children.concat() : [tree]
/** @type {Node[]} */
/** @type {Array<Node>} */
const head = [{type: 'text', value: '\n'}, h('meta', {charset: 'utf-8'})]

@@ -150,4 +150,4 @@ let index = -1

* @template Thing
* @param {Thing|Thing[]|null|undefined} value
* @returns {Thing[]}
* @param {Thing|Array<Thing>|null|undefined} value
* @returns {Array<Thing>}
*/

@@ -154,0 +154,0 @@ function cast(value) {

8

package.json
{
"name": "rehype-document",
"version": "6.0.0",
"version": "6.0.1",
"description": "rehype plugin to wrap a document around a fragment",

@@ -46,4 +46,4 @@ "license": "MIT",

"rehype": "^12.0.0",
"remark-cli": "^9.0.0",
"remark-preset-wooorm": "^8.0.0",
"remark-cli": "^10.0.0",
"remark-preset-wooorm": "^9.0.0",
"rimraf": "^3.0.0",

@@ -53,3 +53,3 @@ "tape": "^5.0.0",

"typescript": "^4.0.0",
"xo": "^0.42.0"
"xo": "^0.47.0"
},

@@ -56,0 +56,0 @@ "scripts": {

326

readme.md

@@ -11,11 +11,53 @@ # rehype-document

[**rehype**][rehype] plugin to wrap a document around a fragment.
**[rehype][]** plugin to wrap a fragment in a document.
## Contents
* [What is this?](#what-is-this)
* [When should I use this?](#when-should-i-use-this)
* [Install](#install)
* [Use](#use)
* [API](#api)
* [`unified().use(rehypeDocument[, options])`](#unifieduserehypedocument-options)
* [Example](#example)
* [Example: language](#example-language)
* [Example: CSS](#example-css)
* [Example: JS](#example-js)
* [Example: metadata and links](#example-metadata-and-links)
* [Types](#types)
* [Compatibility](#compatibility)
* [Security](#security)
* [Related](#related)
* [Contribute](#contribute)
* [License](#license)
## What is this?
This package is a [unified][] ([rehype][]) plugin to wrap a fragment in a
document.
It’s especially useful when going from a markdown file that represents an
article and turning it into a complete HTML document.
**unified** is a project that transforms content with abstract syntax trees
(ASTs).
**rehype** adds support for HTML to unified.
**hast** is the HTML AST that rehype uses.
This is a rehype plugin that wraps a fragment in a document.
## When should I use this?
This project is useful when you want to turn a fragment (specifically, some
nodes that can exist in a `<body>` element) into a whole document (a `<html>`,
`<head>`, and `<body>`, where the latter will contain the fragment).
This plugin can make fragments valid whole documents.
It’s not a (social) metadata manager.
That’s done by [`rehype-meta`][rehype-meta].
You can use both together.
## Install
This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c):
Node 12+ is needed to use it and it must be `import`ed instead of `require`d.
This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).
In Node.js (version 12.20+, 14.14+, or 16.0+), install with [npm][]:
[npm][]:
```sh

@@ -25,5 +67,19 @@ npm install rehype-document

In Deno with [Skypack][]:
```js
import rehypeDocument from 'https://cdn.skypack.dev/rehype-document@6?dts'
```
In browsers with [Skypack][]:
```html
<script type="module">
import rehypeDocument from 'https://cdn.skypack.dev/rehype-document@6?min'
</script>
```
## Use
Say `example.md` looks as follows:
Say we have the following file `example.md`:

@@ -36,7 +92,6 @@ ```markdown

…and `example.js` like this:
And our module `example.js` looks as follows:
```js
import {readSync} from 'to-vfile'
import {reporter} from 'vfile-reporter'
import {read} from 'to-vfile'
import {unified} from 'unified'

@@ -48,20 +103,19 @@ import remarkParse from 'remark-parse'

const file = readSync('example.md')
main()
unified()
.use(remarkParse)
.use(remarkRehype)
.use(rehypeDocument, {title: 'Hi!'})
.use(rehypeStringify)
.process(file)
.then((file) => {
console.error(reporter(file))
console.log(String(file))
})
async function main() {
const file = await unified()
.use(remarkParse)
.use(remarkRehype)
.use(rehypeDocument, {title: 'Hi!'})
.use(rehypeStringify)
.process(await read('example.md'))
console.log(String(file))
}
```
Now, running `node example` yields:
Now running `node example.js` yields:
```html
example.md: no issues found
<!doctype html>

@@ -88,9 +142,11 @@ <html lang="en">

Wrap a document around a fragment.
Wrap a fragment in a document.
##### `options`
Configuration (optional).
###### `options.title`
Text to use as title (`string`, default: name of file, if any).
Text to use as title (`string`, default: `stem` of file).

@@ -102,2 +158,4 @@ ###### `options.language`

> 👉 **Note**: you should set this if the content isn’t in English.
###### `options.responsive`

@@ -109,3 +167,3 @@

CSS to include in `head` in `<style>` elements (`string` or `Array.<string>`,
CSS to include in `head` in `<style>` elements (`string` or `Array<string>`,
default: `[]`).

@@ -115,3 +173,3 @@

Links to stylesheets to include in `head` (`string` or `Array.<string>`,
Links to stylesheets to include in `head` (`string` or `Array<string>`,
default: `[]`).

@@ -121,3 +179,3 @@

Metadata to include in `head` (`Object` or `Array.<Object>`, default: `[]`).
Metadata to include in `head` (`Object` or `Array<Object>`, default: `[]`).
Each object is passed as [`properties`][props] to [`hastscript`][h] with a

@@ -128,3 +186,3 @@ `meta` element.

Link tags to include in `head` (`Object` or `Array.<Object>`, default: `[]`).
Link tags to include in `head` (`Object` or `Array<Object>`, default: `[]`).
Each object is passed as [`properties`][props] to [`hastscript`][h] with a

@@ -135,3 +193,3 @@ `link` element.

Inline scripts to include at end of `body` (`string` or `Array.<string>`,
Inline scripts to include at end of `body` (`string` or `Array<string>`,
default: `[]`).

@@ -141,5 +199,194 @@

External scripts to include at end of `body` (`string` or `Array.<string>`,
External scripts to include at end of `body` (`string` or `Array<string>`,
default: `[]`).
## Example
### Example: language
This example shows how to set a language:
```js
import {unified} from 'unified'
import rehypeParse from 'rehype-parse'
import rehypeDocument from 'rehype-document'
import rehypeStringify from 'rehype-stringify'
main()
async function main() {
const file = await unified()
.use(rehypeParse, {fragment: true})
.use(rehypeDocument, {title: 'Плутон', language: 'ru'})
.use(rehypeStringify)
.process('<h1>Привет, Плутон!</h1>')
console.log(String(file))
}
```
Yields:
```html
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Плутон</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Привет, Плутон!</h1>
</body>
</html>
```
### Example: CSS
This example shows how to reference CSS files and include stylesheets:
```js
import {unified} from 'unified'
import rehypeParse from 'rehype-parse'
import rehypeDocument from 'rehype-document'
import rehypeStringify from 'rehype-stringify'
main()
async function main() {
const file = await unified()
.use(rehypeParse, {fragment: true})
.use(rehypeDocument, {
css: 'https://example.com/index.css',
style: 'body { color: red }'
})
.use(rehypeStringify)
.process('')
console.log(String(file))
}
```
Yields:
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>body { color: red }</style>
<link rel="stylesheet" href="https://example.com/index.css">
</head>
<body>
</body>
</html>
```
### Example: JS
This example shows how to reference JS files and include scripts:
```js
import {unified} from 'unified'
import rehypeParse from 'rehype-parse'
import rehypeDocument from 'rehype-document'
import rehypeStringify from 'rehype-stringify'
main()
async function main() {
const file = await unified()
.use(rehypeParse, {fragment: true})
.use(rehypeDocument, {
js: 'https://example.com/index.js',
script: 'console.log(1)'
})
.use(rehypeStringify)
.process('')
console.log(String(file))
}
```
Yields:
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>console.log(1)</script>
<script src="https://example.com/index.js"></script>
</body>
</html>
```
### Example: metadata and links
This example shows how to define metadata and include links (other than styles):
```js
import {unified} from 'unified'
import rehypeParse from 'rehype-parse'
import rehypeDocument from 'rehype-document'
import rehypeStringify from 'rehype-stringify'
main()
async function main() {
const file = await unified()
.use(rehypeParse, {fragment: true})
.use(rehypeDocument, {
link: [
{rel: 'icon', href: '/favicon.ico', sizes: 'any'},
{rel: 'icon', href: '/icon.svg', type: 'image/svg+xml'}
],
meta: [{name: 'generator', content: 'rehype-document'}]
})
.use(rehypeStringify)
.process('')
console.log(String(file))
}
```
Yields:
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="rehype-document">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
</head>
<body>
</body>
</html>
```
> 💡 **Tip**: [`rehype-meta`][rehype-meta] is a (social) metadata manager.
## Types
This package is fully typed with [TypeScript][].
It exports an `Options` type, which specifies the interface of the accepted
options.
## Compatibility
Projects maintained by the unified collective are compatible with all maintained
versions of Node.js.
As of now, that is Node.js 12.20+, 14.14+, and 16.0+.
Our projects sometimes work with older versions, but this is not guaranteed.
This plugin works with `rehype-parse` version 3+, `rehype-stringify` version 3+,
`rehype` version 5+, and `unified` version 6+.
## Security

@@ -149,13 +396,12 @@

attack if you pass user provided content in options.
Always be wary of user input and use [`rehype-sanitize`][rehype-sanitize].
Always be wary of user input and use [`rehype-sanitize`][sanitize].
## Related
* [`rehype-meta`](https://github.com/rehypejs/rehype-meta)
— Add metadata to the head of a document
— add metadata to the head of a document
* [`rehype-format`](https://github.com/rehypejs/rehype-format)
— Format HTML
— format HTML
* [`rehype-minify`](https://github.com/rehypejs/rehype-minify)
— Minify HTML
— minify HTML

@@ -204,2 +450,4 @@ ## Contribute

[skypack]: https://www.skypack.dev
[npm]: https://docs.npmjs.com/cli/install

@@ -219,2 +467,4 @@

[unified]: https://github.com/unifiedjs/unified
[rehype]: https://github.com/rehypejs/rehype

@@ -230,2 +480,6 @@

[sanitize]: https://github.com/rehypejs/rehype-sanitize
[typescript]: https://www.typescriptlang.org
[rehype-sanitize]: https://github.com/rehypejs/rehype-sanitize
[rehype-meta]: https://github.com/rehypejs/rehype-meta
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc