{"id":16788753,"url":"https://github.com/markmead/alpinejs-head","last_synced_at":"2025-04-10T23:24:53.849Z","repository":{"id":45281578,"uuid":"441493489","full_name":"markmead/alpinejs-head","owner":"markmead","description":"Alpine JS Head is a simple plugin that lets you control your HTML `\u003chead\u003e` elements using Alpine JS 🦆","archived":false,"fork":false,"pushed_at":"2025-03-07T10:58:01.000Z","size":28,"stargazers_count":23,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-24T20:12:27.862Z","etag":null,"topics":["alpine","alpinejs","head","helmet"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/markmead.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":"2021-12-24T15:02:05.000Z","updated_at":"2025-03-19T05:12:09.000Z","dependencies_parsed_at":"2025-03-07T09:22:43.359Z","dependency_job_id":"2ce1486f-49fc-40e4-8090-7e484d6d2ae8","html_url":"https://github.com/markmead/alpinejs-head","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmead%2Falpinejs-head","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmead%2Falpinejs-head/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmead%2Falpinejs-head/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmead%2Falpinejs-head/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/markmead","download_url":"https://codeload.github.com/markmead/alpinejs-head/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248313586,"owners_count":21082881,"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":["alpine","alpinejs","head","helmet"],"created_at":"2024-10-13T08:24:39.148Z","updated_at":"2025-04-10T23:24:53.837Z","avatar_url":"https://github.com/markmead.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Alpine JS Head\n\n![](https://img.shields.io/bundlephobia/min/alpinejs-head)\n![](https://img.shields.io/npm/v/alpinejs-head)\n![](https://img.shields.io/npm/dt/alpinejs-head)\n![](https://img.shields.io/github/license/markmead/alpinejs-head)\n\n# Alpine JS Head\n\nAlpine JS Head is a simple plugin that lets you control your HTML `\u003chead\u003e`\nelements using Alpine JS.\n\n## What It Does\n\nThis plugin lets you dynamically update:\n\n- 📄 Page title\n- 📝 Meta descriptions\n- 🔍 SEO elements\n\n## Why Use It?\n\n- **Simple**: Change head elements without writing complex JavaScript\n- **Reactive**: Head elements update automatically when your data changes\n- **Flexible**: Use JSON, directives, or methods - whatever fits your style\n- **SEO-friendly**: Update meta tags on the fly for better search results\n\n## Install\n\n### CDN\n\n```html\n\u003cscript\n  defer\n  src=\"https://unpkg.com/alpinejs-head@latest/dist/cdn.min.js\"\n\u003e\u003c/script\u003e\n\n\u003cscript defer src=\"https://unpkg.com/alpinejs@latest/dist/cdn.min.js\"\u003e\u003c/script\u003e\n```\n\n### Package\n\n```shell\nyarn add -D alpinejs-head\nnpm install -D alpinejs-head\n```\n\n```js\nimport Alpine from 'alpinejs'\nimport head from 'alpinejs-head'\n\nAlpine.plugin(head)\n\nAlpine.start()\n```\n\n## Examples\n\n### JSON\n\nYou can use `x-head.json` to set the initial dynamic values and update them\nlater through Alpine JS data binding.\n\nThis approach is ideal when you need to manage multiple head elements at once or\nwhen working with complex metadata structures.\n\n```html\n\u003cscript x-data x-head.json type=\"application/json\"\u003e\n  {\n    \"title\": \"Alpine JS Head Demo\",\n    \"meta\": [\n      {\n        \"name\": \"description\",\n        \"content\": \"Dynamically control your page metadata with Alpine JS Head\"\n      },\n      {\n        \"name\": \"theme-color\",\n        \"content\": \"#00f\"\n      }\n    ]\n  }\n\u003c/script\u003e\n```\n\n### Directives\n\nThe directive approach offers a clean, declarative way to manage head elements\ndirectly in your HTML structure. It's perfect for components that need to update\nmetadata based on their state.\n\n```html\n\u003cdiv\n  x-data=\"{\n    title: 'Alpine JS Head Demo',\n    description: 'Dynamically control your page metadata with Alpine JS Head',\n    theme: '#00f'\n  }\"\n  x-head.title=\"title\"\n  x-head.meta.description=\"description\"\n  x-head.meta.theme-color=\"theme\"\n\u003e\n  \u003cinput type=\"text\" x-model=\"title\" placeholder=\"Change page title\" /\u003e\n\n  \u003ctextarea\n    x-model=\"description\"\n    placeholder=\"Update meta description\"\n  \u003e\u003c/textarea\u003e\n\n  \u003cdiv\u003e\n    \u003cbutton type=\"button\" @click=\"theme = '#00f'\"\u003eBlue\u003c/button\u003e\n    \u003cbutton type=\"button\" @click=\"theme = '#f00'\"\u003eRed\u003c/button\u003e\n    \u003cbutton type=\"button\" @click=\"theme = '#0f0'\"\u003eGreen\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n`x-head` will track the data of `title`, `description`, and `theme` and update\nthe HTML `\u003chead\u003e` elements targeted through the modifiers.\n\nYou can bind multiple head elements to the same component, making it easy to\nupdate related metadata together.\n\n### Method\n\n```html\n\u003cbutton x-data type=\"button\" @click=\"$head('title', 'Alpine JS Head Demo')\"\u003e\n  Title\n\u003c/button\u003e\n\n\u003cbutton\n  x-data\n  type=\"button\"\n  @click=\"$head('meta.description', 'Dynamically control your page metadata with Alpine JS Head')\"\n\u003e\n  Description\n\u003c/button\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkmead%2Falpinejs-head","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarkmead%2Falpinejs-head","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkmead%2Falpinejs-head/lists"}