Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/cannikin/cameronjs-html-webpack-plugin

Webpack plugin for CameronJS to add simple layouts and partials support
https://github.com/cannikin/cameronjs-html-webpack-plugin

Last synced: about 2 months ago
JSON representation

Webpack plugin for CameronJS to add simple layouts and partials support

Awesome Lists containing this project

README 

        
## CameronJS HTML Webpack Plugin



Adds support for simple HTML layouts and partials



## Install



    yarn add cameronjs-html-webpack-plugin



Add to your webpack.config.js:



```javascript

const CameronJSHtmlWebpackPlugin = require("cameronjs-html-webpack-plugin");



module.exports = {

  // ...

  output: {

    //...

    path: path.resolve(__dirname, "public")

  },

  plugins: [

    new CameronJSHtmlWebpackPlugin({

      source: "./src/html",

      layouts: "layouts"

    })

  ],

  // ...

};

```



## Options



`source` is relative to `webpack.config.js` and is where your HTML templates live.



`layouts` is relative to `source` and is where your layout files live.



Generated HTML pages will be emitted to the `output.path` set in the config file.



## Usage



### Layouts



**Layouts** surround your HTML content and provide a "frame". The standard  declarations for your pages probably don't change much between pages so they're perfect for a layout:



```html



  @@title



  @@content



```



You 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 `@@`.



To 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:



```html



@@layout("application", { "title": "My Site" })

Hello, world


```



The final rendered HTML will be emitted to wherever output.path is set in `webpack.config.js`:



```html



  My Site



  
Hello, world



```



Layouts are great for parts of your site that don't change between pages. This way you write them once and share them everywhere.



#### Named Content



You 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:



```html



  My Site



  

    
Logo


    

  

  

    

  



```



You can mark the spot where the named content will go by passing a parameter to `@@content`:



```html



  My Site



  

    
Logo


    @@content("banner")

  

  

    @@content

  



```



And then in the main content HTML include a `@@content` declaration with the same name:



```html



@@content("banner",

  
This is important info


)



This is the main body text.


```



The resulting HTML will be:



```html



  My Site



  

    
Logo


    
This is important info


  

  

    
This is the main body text.


  



```



### Partials



**Partials** are smaller snippets of HTML that you want to share between pages. A navigation bar is a good example:



```html



  



```



Note 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):



```html



@@partial("nav")

Hello, world


```



And the final built HTML page would look like:



```html



  



Hello, world


```



(Note the `@@layout` declaration was not present so this page won't be wrapped in a layout.)



You can pass variable substitutions to partials if you want the parent page to make some data available to the child partial.



```html



  
@@pageTitle


  
Welcome @@user.name



@@partial("parts/title", { "pageTitle": "Welcome!", "user": { "name": "Rob" } })



  
Lorem ipsum dolar sit amet...



```



Note that in the above example the partial lived in a different directory than the main file.



### Notes



You can combine partials and layouts and reference one from the other. Perhaps you have multiple layouts but they should all share the same `` tag content. Include the `@@partial` in both layouts and you're good to go:



```html



@@partial("head.html")



  
My Site


  @@content



@@partial("admin.html")



  
Admins Only


  @@content



```



## Thanks



This 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!