diff options
Diffstat (limited to 'www/content/extensions/head-support.md')
| -rw-r--r-- | www/content/extensions/head-support.md | 29 |
1 files changed, 26 insertions, 3 deletions
diff --git a/www/content/extensions/head-support.md b/www/content/extensions/head-support.md index dd034de7..67c1aaef 100644 --- a/www/content/extensions/head-support.md +++ b/www/content/extensions/head-support.md @@ -13,10 +13,33 @@ The [`hx-boost`](@/attributes/hx-boost.md) attribute moved htmx closer to this w support for extracting the `title` tag out of head elements was eventually added, but full head tag support has never been a feature of the library. This extension addresses that shortcoming. -## Install +## Installing -```html -<script src="https://unpkg.com/htmx-ext-head-support@2.0.1/head-support.js"></script> +The fastest way to install `head-support` is to load it via a CDN. Remember to always include the core htmx library before the extension and [enable the extension](#usage). +```HTML +<head> + <script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script> + <script src="https://unpkg.com/htmx-ext-head-support@2.0.2" integrity="sha384-cvMqHzjCJsOHgGuyB3sWXaUSv/Krm0BdzjuI1rtkjCbL1l1oHJx+cHyVRJhyuEz0" crossorigin="anonymous"></script> +</head> +<body hx-ext="head-support"> +... +``` +An unminified version is also available at https://unpkg.com/htmx-ext-head-support/dist/head-support.js. + +While the CDN approach is simple, you may want to consider [not using CDNs in production](https://blog.wesleyac.com/posts/why-not-javascript-cdn). The next easiest way to install `head-support` is to simply copy it into your project. Download the extension from `https://unpkg.com/htmx-ext-head-support`, add it to the appropriate directory in your project and include it where necessary with a `<script>` tag. + +For npm-style build systems, you can install `head-support` via [npm](https://www.npmjs.com/): +```shell +npm install htmx-ext-head-support +``` +After installing, you'll need to use appropriate tooling to bundle `node_modules/htmx-ext-head-support/dist/head-support.js` (or `.min.js`). For example, you might bundle the extension with htmx core from `node_modules/htmx.org/dist/htmx.js` and project-specific code. + +If you are using a bundler to manage your javascript (e.g. Webpack, Rollup): +- Install `htmx.org` and `htmx-ext-head-support` via npm +- Import both packages to your `index.js` +```JS +import `htmx.org`; +import `htmx-ext-head-support`; ``` ## Usage |