{"id":24983699,"url":"https://github.com/posthtml/posthtml-content","last_synced_at":"2025-04-07T10:22:34.630Z","repository":{"id":9420375,"uuid":"61911998","full_name":"posthtml/posthtml-content","owner":"posthtml","description":"Apply functions to tags through custom attributes","archived":false,"fork":false,"pushed_at":"2024-10-26T20:11:07.000Z","size":1156,"stargazers_count":23,"open_issues_count":2,"forks_count":6,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-10-29T21:06:04.524Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"static-dev/posthtml-content","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/posthtml.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-06-24T20:56:16.000Z","updated_at":"2024-10-26T20:11:10.000Z","dependencies_parsed_at":"2023-01-16T21:00:43.744Z","dependency_job_id":"5f4a6070-2d99-4a33-86e3-3a3458e0376d","html_url":"https://github.com/posthtml/posthtml-content","commit_stats":{"total_commits":144,"total_committers":7,"mean_commits":"20.571428571428573","dds":"0.48611111111111116","last_synced_commit":"8dde5ed9568a050906a88bbcecb8e32794426c37"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posthtml%2Fposthtml-content","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posthtml%2Fposthtml-content/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posthtml%2Fposthtml-content/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posthtml%2Fposthtml-content/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/posthtml","download_url":"https://codeload.github.com/posthtml/posthtml-content/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247175486,"owners_count":20896296,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-04T09:20:21.381Z","updated_at":"2025-04-07T10:22:34.601Z","avatar_url":"https://github.com/posthtml.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg width=\"150\" height=\"150\" alt=\"PostHTML\" src=\"https://posthtml.github.io/posthtml/logo.svg\"\u003e\n  \u003ch1\u003ePostHTML Content\u003c/h1\u003e\n  \u003cp\u003eApply functions to nodes through custom attributes\u003c/p\u003e\n\n  [![Version][npm-version-shield]][npm]\n  [![Build][github-ci-shield]][github-ci]\n  [![Downloads][npm-stats-shield]][npm-stats]\n  [![License][license-shield]][license]\n\u003c/div\u003e\n\n## About\n\n`posthtml-content` allows you to define functions that map to custom HTML attributes. When the plugin runs, it will search for those attributes and apply the corresponding function to the contents of the node.\n\n## Install\n\n```\nnpm i posthtml posthtml-content\n```\n\n## Usage\n\nStart with some HTML you want to transform in some way. Add an attribute of your choosing to an element that has contents you want to transform. For example:\n\n```html\n\u003cp uppercase\u003eposthtml is great\u003c/p\u003e\n```\n\nNow process your HTML with `posthtml-content`:\n\n```js\nimport posthtml from'posthtml'\nimport content from'posthtml-content'\n\nconst html = posthtml([\n  content({\n    // Map your custom attribute to a function that takes and returns a string\n    uppercase: str =\u003e str.toUpperCase()\n  })\n])\n  .process('\u003cp uppercase\u003eposthtml is great\u003c/p\u003e')\n  .then(result =\u003e result.html)\n```\n\nResult:\n\n```html\n\u003cp\u003ePOSTHTML IS GREAT\u003c/p\u003e\n```\n\nIf you return an [A+ compliant promise](https://promisesaplus.com/) from your content function, it will resolve and work in your templates as well.\n\nYou can use external libraries for this as well, no problem. Just make sure you are passing in a function that takes a string and returns a string. You might have to wrap the library function if it doesn't behave like this, but it will work with anything that transforms content.\n\n### Using the attribute's value\n\nYou can also access the attribute's value in your function, as the second argument.\n\n```js\nimport posthtml from'posthtml'\nimport content from'posthtml-content'\n\nconst html = posthtml([\n  content({\n    append: (content, attrValue) =\u003e content + attrValue\n  })\n])\n  .process('\u003cp append=\" bar\"\u003efoo\u003c/p\u003e')\n  .then(result =\u003e result.html)\n```\n\nResult:\n\n```html\n\u003cp\u003efoo bar\u003c/p\u003e\n```\n\n## Examples\n\n### Markdown\n\n```html\n\u003cp md\u003eWow, it's **Markdown**!\u003c/p\u003e\n```\n\n```js\nimport markdown from 'markdown-it'\nimport content from 'posthtml-content'\n\nconst {html} = await posthtml([\n  content({\n    md: md =\u003e markdown.renderInline(md)\n  })\n]).process(html)\n```\n\nResult:\n\n```html\n\u003cp\u003eWow, it's \u003cstrong\u003eMarkdown\u003c/strong\u003e!\u003c/p\u003e\n```\n\n### PostCSS\n\n```postcss\n\u003cstyle postcss\u003e\n  .test\n    text-transform: uppercase;\n\n    \u0026__hello\n      color: red;\n\n    \u0026__world\n      color: blue;\n\u003c/style\u003e\n```\n\n```js\nimport postcss from 'postcss'\nimport nested from 'postcss-nested'\nimport content from 'posthtml-content'\n\nconst plugin = content({\n  postcss: css =\u003e postcss(nested()).process(css).css\n})\n\nconst {html} = await posthtml([plugin]).process(html)\n```\n\nResult:\n\n```html\n\u003cstyle\u003e\n  .test {\n    text-transform: uppercase;\n  }\n\n  .test__hello {\n    color: red;\n  }\n\n  .test__world {\n    color: blue;\n  }\n\u003c/style\u003e\n```\n\n### Babel\n\n```html\n\u003cscript babel\u003e\n  const hello = 'Hello World!'\n  let greeter = {\n    greet(msg) { alert (msg) }\n  }\n  greeter.greet(hello)\n\u003c/script\u003e\n```\n\n```js\nimport babel from 'babel-core'\nimport content from 'posthtml-content'\n\nconst options = {\n  presets: ['es2015'],\n  sourceMaps: false\n}\n\nconst plugin = content({\n  babel: js =\u003e babel.transform(js, options).code\n})\n\nconst {html} = await posthtml([plugin]).process(html)\n```\n\nResult:\n\n```html\n\u003cscript\u003e\n  'use strict';\n  var hello = \"Hello World!\";\n  var greeter = {\n    greet: function greet (msg) {\n      alert(msg);\n    };\n  };\n  greeter.greet(hello);\n\u003c/script\u003e\n```\n\n### Return a Promise\n\n```postcss\n\u003cstyle postcss\u003e\n  .test\n    text-transform: uppercase;\n\n    \u0026__hello\n      color: red;\n\n    \u0026__world\n      color: blue;\n\u003c/style\u003e\n```\n\n```js\nimport postcss from 'postcss'\nimport nested from 'postcss-nested'\nimport content from 'posthtml-content'\n\nconst plugin = content({\n  postcss: css =\u003e {\n    return postcss(nested()).process(css).then(res =\u003e res.css)\n  }\n})\n\nconst {html} = await posthtml([plugin]).process(html)\n```\n\n## License\n\n`posthtml-content` is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).\n\n[npm]: https://www.npmjs.com/package/posthtml-content\n[npm-version-shield]: https://img.shields.io/npm/v/posthtml-content.svg\n[npm-stats]: http://npm-stat.com/charts.html?package=posthtml-content\n[npm-stats-shield]: https://img.shields.io/npm/dt/posthtml-content.svg\n[github-ci]: https://github.com/posthtml/posthtml-content/actions/workflows/nodejs.yml\n[github-ci-shield]: https://github.com/posthtml/posthtml-content/actions/workflows/nodejs.yml/badge.svg\n[license]: ./LICENSE\n[license-shield]: https://img.shields.io/npm/l/posthtml-content.svg\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposthtml%2Fposthtml-content","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fposthtml%2Fposthtml-content","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposthtml%2Fposthtml-content/lists"}