Formed in 2009, the Archive Team (not to be confused with the archive.org Archive-It Team) is a rogue archivist collective dedicated to saving copies of rapidly dying or deleted websites for the sake of history and digital heritage. The group is 100% composed of volunteers and interested parties, and has expanded into a large amount of related projects for saving online and digital history.
Fetch Remote Content
A plugin for fetching and working with remote content
About
This plugin allows you to fetch remote content and display it in your HTML.
Input:
<fetch url="https://jsonplaceholder.typicode.com/users/1">
{{ response.name }}'s username is {{ response.username }}
</fetch>Output:
Leanne Graham's username is BretInstall
$ npm i posthtml posthtml-fetch
Usage
const posthtml = require('posthtml')
const pf = require('posthtml-fetch')
posthtml()
.use(pf())
.process('<fetch url="https://example.test">{{ response }}</fetch>')
.then(result => console.log(result.html))
// response bodyThe response body will be available under the response local variable.
Response types
The plugin supports json and text responses.
Only the response body is returned.
Expressions
The plugin uses posthtml-expressions, so you can use any of its tags to work with the response.
For example, you can iterate over items in a JSON response:
<fetch url="https://jsonplaceholder.typicode.com/users">
<each loop="user in response">
{{ user.name }}
</each>
</fetch>Options
You can configure the plugin with the following options.
tags
Default: ['fetch', 'remote']
Array of supported tag names.
Only tags from this array will be processed by the plugin.
Example:
const posthtml = require('posthtml')
const pf = require('posthtml-fetch')
posthtml()
.use(pf({
tags: ['get']
}))
.process('<get url="https://example.test">{{ response }}</get>')
.then(result => console.log(result.html))attribute
Default: 'url'
String representing attribute name containing the URL to fetch.
Example:
const posthtml = require('posthtml')
const pf = require('posthtml-fetch')
posthtml()
.use(pf({
attribute: 'from'
}))
.process('<fetch from="https://example.test">{{ response }}</fetch>')
.then(result => {
console.log(result.html)
// => ...interpolated response from https://example.test
})got
The plugin uses got to fetch data. You can pass options directly to it, inside the got object.
Example:
const posthtml = require('posthtml')
const pf = require('posthtml-fetch')
posthtml()
.use(pf({
got: {
// pass options to got...
}
}))
.process('<fetch url="https://example.test">{{ response }}</fetch>')
.then(result => {
console.log(result.html)
// => ...interpolated response from https://example.test
})preserveTag
Allows you to leave an item. Default value false.
Example:
const posthtml = require('posthtml')
const pf = require('posthtml-fetch')
posthtml()
.use(pf({
preserveTag: true
}))
.process('<fetch url="https://example.test">{{ response }}</fetch>')
.then(result => {
console.log(result.html)
// => <fetch url="https://example.test">...interpolated response from https://example.test</fetch>
})Plugins
after/before
List of plugins that will be called after/before receiving and processing locals
Example:
const posthtml = require('posthtml')
const pf = require('posthtml-fetch')
posthtml()
.use(pf({
plugins: {
after(tree) {
// Your plugin implementation
},
before: [
tree => {
// Your plugin implementation
},
tree => {
// Your plugin implementation
}
]
}
}))
.process('<fetch url="https://example.test">{{ response }}</fetch>')
.then(result => {
console.log(result.html)
// => ...interpolated response from https://example.test
})
