{"id":16506813,"url":"https://github.com/cannikin/cameronjs-html-webpack-plugin","last_synced_at":"2025-10-27T10:40:27.256Z","repository":{"id":57193324,"uuid":"208158654","full_name":"cannikin/cameronjs-html-webpack-plugin","owner":"cannikin","description":"Webpack plugin for CameronJS to add simple layouts and partials support","archived":false,"fork":false,"pushed_at":"2020-06-30T23:04:41.000Z","size":18,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-12T16:17:01.027Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"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/cannikin.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}},"created_at":"2019-09-12T22:48:31.000Z","updated_at":"2020-06-30T23:04:44.000Z","dependencies_parsed_at":"2022-09-15T22:30:40.588Z","dependency_job_id":null,"html_url":"https://github.com/cannikin/cameronjs-html-webpack-plugin","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/cannikin%2Fcameronjs-html-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cannikin%2Fcameronjs-html-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cannikin%2Fcameronjs-html-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cannikin%2Fcameronjs-html-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cannikin","download_url":"https://codeload.github.com/cannikin/cameronjs-html-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241445046,"owners_count":19963917,"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":"2024-10-11T15:22:26.845Z","updated_at":"2025-10-27T10:40:27.172Z","avatar_url":"https://github.com/cannikin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## CameronJS HTML Webpack Plugin\n\nAdds support for simple HTML layouts and partials\n\n## Install\n\n    yarn add cameronjs-html-webpack-plugin\n\nAdd to your webpack.config.js:\n\n```javascript\nconst CameronJSHtmlWebpackPlugin = require(\"cameronjs-html-webpack-plugin\");\n\nmodule.exports = {\n  // ...\n  output: {\n    //...\n    path: path.resolve(__dirname, \"public\")\n  },\n  plugins: [\n    new CameronJSHtmlWebpackPlugin({\n      source: \"./src/html\",\n      layouts: \"layouts\"\n    })\n  ],\n  // ...\n};\n```\n\n## Options\n\n`source` is relative to `webpack.config.js` and is where your HTML templates live.\n\n`layouts` is relative to `source` and is where your layout files live.\n\nGenerated HTML pages will be emitted to the `output.path` set in the config file.\n\n## Usage\n\n### Layouts\n\n**Layouts** surround your HTML content and provide a \"frame\". The standard \u003chtml\u003e declarations for your pages probably don't change much between pages so they're perfect for a layout:\n\n```html\n\u003c!-- src/html/layouts/application.html --\u003e\n\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003ctitle\u003e@@title\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  @@content\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nYou use `@@content` to denote where the real content of your page will be inserted into the layout and any other variables you want to be replaced by prefixing them with `@@`.\n\nTo denote that a page should use a layout add a `@@layout` declaration at the top of the page to say which one to use, with an optional list of those variables you want to substitute:\n\n```html\n\u003c!-- src/html/index.html --\u003e\n\n@@layout(\"application\", { \"title\": \"My Site\" })\n\u003ch1\u003eHello, world\u003c/h1\u003e\n```\n\nThe final rendered HTML will be emitted to wherever output.path is set in `webpack.config.js`:\n\n```html\n\u003c!-- public/index.html --\u003e\n\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003ctitle\u003eMy Site\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003ch1\u003eHello, world\u003c/h1\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nLayouts are great for parts of your site that don't change between pages. This way you write them once and share them everywhere.\n\n#### Named Content\n\nYou may find the need to insert content into more than one place in your layout. For example, if you have a banner that should be displayed on the page, but it needs to be outside of the container for your normal content:\n\n```html\n\u003c!-- src/html/layouts/application.html --\u003e\n\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003ctitle\u003eMy Site\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cheader\u003e\n    \u003ch1\u003eLogo\u003c/h1\u003e\n    \u003c!-- Banner needs to go here --\u003e\n  \u003c/header\u003e\n  \u003cmain\u003e\n    \u003c!-- Main content goes here --\u003e\n  \u003c/main\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nYou can mark the spot where the named content will go by passing a parameter to `@@content`:\n\n```html\n\u003c!-- src/html/layouts/application.html --\u003e\n\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003ctitle\u003eMy Site\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cheader\u003e\n    \u003ch1\u003eLogo\u003c/h1\u003e\n    @@content(\"banner\")\n  \u003c/header\u003e\n  \u003cmain\u003e\n    @@content\n  \u003c/main\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nAnd then in the main content HTML include a `@@content` declaration with the same name:\n\n```html\n\u003c!-- src/html/index.html --\u003e\n\n@@content(\"banner\",\n  \u003cdiv id=\"banner\"\u003eThis is important info\u003c/div\u003e\n)\n\n\u003cp\u003eThis is the main body text.\u003c/p\u003e\n```\n\nThe resulting HTML will be:\n\n```html\n\u003c!-- public/index.html --\u003e\n\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003ctitle\u003eMy Site\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cheader\u003e\n    \u003ch1\u003eLogo\u003c/h1\u003e\n    \u003cdiv id=\"banner\"\u003eThis is important info\u003c/div\u003e\n  \u003c/header\u003e\n  \u003cmain\u003e\n    \u003cp\u003eThis is the main body text.\u003c/p\u003e\n  \u003c/main\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Partials\n\n**Partials** are smaller snippets of HTML that you want to share between pages. A navigation bar is a good example:\n\n```html\n\u003c!-- src/html/_nav.html --\u003e\n\n\u003cnav\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u003ca href=\"/\"\u003eHome\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"/account\"\u003eAccount\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/nav\u003e\n```\n\nNote that the filename must begin with a _underscore. This helps you distinguish between full pages and partials when you're looking at a list of files in your editor. In the page where you want to use the partial you'll provide a `@@partial` declaration (this time *without* the leading underscore, or `.html` extension):\n\n```html\n\u003c!-- src/html/index.html --\u003e\n\n@@partial(\"nav\")\n\u003ch1\u003eHello, world\u003c/h1\u003e\n```\n\nAnd the final built HTML page would look like:\n\n```html\n\u003c!-- public/index.html --\u003e\n\n\u003cnav\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u003ca href=\"/\"\u003eHome\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"/account\"\u003eAccount\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/nav\u003e\n\n\u003ch1\u003eHello, world\u003c/h1\u003e\n```\n\n(Note the `@@layout` declaration was not present so this page won't be wrapped in a layout.)\n\nYou can pass variable substitutions to partials if you want the parent page to make some data available to the child partial.\n\n```html\n\u003c!-- src/html/parts/_title.html --\u003e\n\n\u003cheader\u003e\n  \u003ch1\u003e@@pageTitle\u003c/h1\u003e\n  \u003ch2\u003eWelcome @@user.name\u003c/h2\u003e\n\u003c/nav\u003e\n\n\u003c!-- src/html/index.html --\u003e\n\n@@partial(\"parts/title\", { \"pageTitle\": \"Welcome!\", \"user\": { \"name\": \"Rob\" } })\n\n\u003cmain\u003e\n  \u003cp\u003eLorem ipsum dolar sit amet...\u003c/p\u003e\n\u003c/main\u003e\n```\n\nNote that in the above example the partial lived in a different directory than the main file.\n\n### Notes\n\nYou can combine partials and layouts and reference one from the other. Perhaps you have multiple layouts but they should all share the same `\u003chead\u003e` tag content. Include the `@@partial` in both layouts and you're good to go:\n\n```html\n\u003c!-- src/html/layouts/site.html --\u003e\n\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n@@partial(\"head.html\")\n\u003cbody\u003e\n  \u003ch1\u003eMy Site\u003c/h1\u003e\n  @@content\n\u003c/body\u003e\n\u003c/html\u003e\n\n\u003c!-- src/html/layouts/admin.html --\u003e\n\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n@@partial(\"admin.html\")\n\u003cbody\u003e\n  \u003ch1\u003eAdmins Only\u003c/h1\u003e\n  @@content\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Thanks\n\nThis package was made possible by digging through the source on [file-include-webpack-plugin](https://www.npmjs.com/package/) and this plugin borrowed some code from it!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcannikin%2Fcameronjs-html-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcannikin%2Fcameronjs-html-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcannikin%2Fcameronjs-html-webpack-plugin/lists"}