Super Title

From 7a52ddeba2a68388b544f529d2d92104420f77b0 Mon Sep 17 00:00:00 2001 From: Shipwreckt Date: Fri, 31 Oct 2025 20:02:14 +0000 Subject: Changed from static to 11ty! --- node_modules/posthtml/readme.md | 366 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 366 insertions(+) create mode 100644 node_modules/posthtml/readme.md (limited to 'node_modules/posthtml/readme.md') diff --git a/node_modules/posthtml/readme.md b/node_modules/posthtml/readme.md new file mode 100644 index 0000000..1f582f1 --- /dev/null +++ b/node_modules/posthtml/readme.md @@ -0,0 +1,366 @@ +# PostHTML

+ +PostHTML is a tool for transforming HTML/XML with JS plugins. PostHTML itself is very small. It includes only a HTML parser, a HTML node tree API and a node tree stringifier. + +All HTML transformations are made by plugins. And these plugins are just small plain JS functions, which receive a HTML node tree, transform it, and return a modified tree. + +For more detailed information about PostHTML in general take a look at the [docs](https://github.com/posthtml/posthtml/tree/master/docs). + +### Dependencies + +| Name | Description | +|:----:|:-----------:| +|[posthtml-parser](https://github.com/posthtml/posthtml-parser)| Parser HTML/XML to PostHTMLTree | +|[posthtml-render](https://github.com/posthtml/posthtml-render)| Render PostHTMLTree to HTML/XML | + +## Create to your project + +```bash +npm init posthtml +``` + +## Install + +```bash +npm i -D posthtml +``` + +## Usage + +### API + +**Sync** + +```js +import posthtml from 'posthtml' + +const html = ` + + Super Title + Awesome Text + +` + +const result = posthtml() + .use(require('posthtml-custom-elements')()) + .process(html, { sync: true }) + .html + +console.log(result) +``` + +```html +

Super Title

Awesome Text

+``` + +> :warning: Async Plugins can't be used in sync mode and will throw an Error. It's recommended to use PostHTML asynchronously whenever possible. + +**Async** + +```js +import posthtml from 'posthtml' + +const html = ` + + +

OMG

+ + +` + +posthtml( + [ + require('posthtml-to-svg-tags')(), + require('posthtml-extend-attrs')({ + attrsTree: { + '.wow' : { + id: 'wow_id', + fill: '#4A83B4', + 'fill-rule': 'evenodd', + 'font-family': 'Verdana' + } + } + }) + ]) + .process(html/*, options */) + .then((result) => console.log(result.html)) +``` + +```html + +``` + +**Directives** + +```js +import posthtml from 'posthtml' + +const php = ` + + <?php echo $title; ?> + + +` + +const result = posthtml() + .use(require('posthtml-custom-elements')()) + .process(html, { + directives: [ + { name: '?php', start: '<', end: '>' } + ] + }) + .html + +console.log(result) +``` + +```html +

+``` + +### [CLI](https://npmjs.com/package/posthtml-cli) + +```bash +npm i posthtml-cli +``` + +```json +"scripts": { + "posthtml": "posthtml -o output.html -i input.html -c config.json" +} +``` + +```bash +npm run posthtml +``` + +### [Gulp](https://gulpjs.com) + +```bash +npm i -D gulp-posthtml +``` + +```js +import tap from 'gulp-tap' +import posthtml from 'gulp-posthtml' +import { task, src, dest } from 'gulp' + +task('html', () => { + let path + + const plugins = [ require('posthtml-include')({ root: `${path}` }) ] + const options = {} + + src('src/**/*.html') + .pipe(tap((file) => path = file.path)) + .pipe(posthtml(plugins, options)) + .pipe(dest('build/')) +}) +``` + +Check [project-stub](https://github.com/posthtml/project-stub) for an example with Gulp + +### [Grunt](https://gruntjs.com) + +```bash +npm i -D grunt-posthtml +``` + +```js +posthtml: { + options: { + use: [ + require('posthtml-doctype')({ doctype: 'HTML 5' }), + require('posthtml-include')({ root: './', encoding: 'utf-8' }) + ] + }, + build: { + files: [ + { + dot: true, + cwd: 'html/', + src: ['*.html'], + dest: 'tmp/', + expand: true, + } + ] + } +} +``` + +### [Webpack](https://webpack.js.org) + +```bash +npm i -D html-loader posthtml-loader +``` + +#### v1.x + +**webpack.config.js** + +```js +const config = { + module: { + loaders: [ + { + test: /\.html$/, + loader: 'html!posthtml' + } + ] + }, + posthtml: (ctx) => ({ + parser: require('posthtml-pug'), + plugins: [ + require('posthtml-bem')() + ] + }) +} + +export default config +``` + +#### v2.x + +**webpack.config.js** + +```js +import { LoaderOptionsPlugin } from 'webpack' + +const config = { + module: { + rules: [ + { + test: /\.html$/, + use: [ + { + loader: 'html-loader', + options: { minimize: true } + }, + { + loader: 'posthtml-loader' + } + ] + } + ] + }, + plugins: [ + new LoaderOptionsPlugin({ + options: { + posthtml(ctx) { + return { + parser: require('posthtml-pug'), + plugins: [ + require('posthtml-bem')() + ] + } + } + } + }) + ] +} + +export default config +``` + +### [Rollup](https://rollupjs.org/) + +```bash +$ npm i rollup-plugin-posthtml -D +# or +$ npm i rollup-plugin-posthtml-template -D +``` + +```js +import { join } from 'path'; + +import posthtml from 'rollup-plugin-posthtml-template'; +// or +// import posthtml from 'rollup-plugin-posthtml'; + +import sugarml from 'posthtml-sugarml'; // npm i posthtml-sugarml -D +import include from 'posthtml-include'; // npm i posthtml-include -D + +export default { + entry: join(__dirname, 'main.js'), + dest: join(__dirname, 'bundle.js'), + format: 'iife', + plugins: [ + posthtml({ + parser: sugarml(), + plugins: [include()], + template: true // only rollup-plugin-posthtml-template + }) + ] +}; +``` + +## Parser + +```js +import pug from 'posthtml-pug' + +posthtml().process(html, { parser: pug(options) }).then((result) => result.html) +``` + +| Name |Description| +|:-----|:----------| +|[posthtml-pug](https://github.com/posthtml/posthtml-pug)|Pug Parser| +|[sugarml](https://github.com/posthtml/sugarml)|SugarML Parser| + + +## Plugins + +In case you want to develop your own plugin, we recommend using [posthtml-plugin-starter][plugin] to get started. + +- [posthtml-plugins](http://maltsev.github.io/posthtml-plugins) +- [awesome-posthtml](https://github.com/posthtml/awesome-posthtml) + +[plugin]: https://github.com/posthtml/posthtml-plugin-starter + +## Maintainers + + + + + + + + +

+
+ Ivan Demidov +

+
+ Ivan Voischev +

+ +## Contributors + +

+ +## Backers + +Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/posthtml#backer)] + +

+ +[chat]: https://badges.gitter.im/posthtml/PostHTML.svg +[chat-url]: https://gitter.im/posthtml/posthtml?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge" -- cgit v1.2.3