node-amp-mustache-skeleton

# node-amp-mustache-skeleton AMP page skeleton served via node.js featuring mustache templating and equipped for Dockerization. ## Quick start * Fork this repo. * `npm i -g gulp-cli` * `npm i` * `npm start` * Navigate to [`http://localhost:8080`](http://localhost:8080) in your browser to see stuff. * Start developing. ![Intro](src/img/intro.gif) ## Directory layout ```bash dist/ # production code pageA/ index.html pageB/ index.html img/ google-site-verification.html index.html index.js package.json package-lock.json robots.txt sitemap.xml src/ # source code img/ # images json/ # json data seo/ # seo related files robots.txt google-site-verification.html sitemap.xml server/ # node server source index.js # koa server styles/ # css mystyles.css templates/ # mustache templates vars.json # variables global to all templates views.json # array of views to render, can override variables in vars.json wireframe.mustache # base wireframe pageA.mustache # view partial to be wrapped in wireframe.mustache pageB.mustache Dockerfile gulpfile.js package.json package-lock.json ``` ## Features ### CI When executing `npm start` without the `NODE_ENV` environment variable set to `production`, gulp is instructed to watch changes to source files and automatically rebuild the project. ### AMP validation With each build, the resulting HTML is validated against the AMP standard and the build fails if invalid. ### (LD+)JSON The skeleton is setup so you can inline JSON data, e.g. to add microdata. Put your JSON files into [`src/json/`](src/json) and reference them in your HTML via ```html <script type="application/ld+json" src="my-data.json"></script> ``` ### Styles All stylesheets located in [`src/styles`](src/styles) will be combined, processed by [postcss/autoprefixer](https://github.com/postcss/autoprefixer), minified and inlined into generated HTML files. ### Templating #### Wireframe Templates are rendered by including a view partial into the base [wireframe](src/templates/wireframe.mustache). Please take a look at [src/templates/wireframe.mustache](src/templates/wireframe.mustache) and adjust it according to your needs. #### Adding pages/views When you add a new page/view, it needs to be configured in [`src/templates/views.json`](src/templates/views.json). This file contains an array of all views/pages to publish. Each entry in the array is an object with the following signature: ```javascript { "name": "pagename", "vars": { "href": "/path/to/this/page", // ... } } ``` The important parts are the `name` and the `vars.href` property. The build process will create the path referenced in `vars.href` in the `dist/` directory and render the view into an `index.html` file therein. By convention the build task looks for a partial named `pagename.mustache` in the [`src/templates`](src/templates) directory. Please look at [`src/templates/views.json`](src/templates/views.json) for some basic examples. #### Variables Variables global to all templates are set in [`src/templates/vars.json`](src/templates/vars.json). Any variable can be overriden by a view via the `vars` property in [`src/templates/views.json`](src/templates/views.json). Please look at [`src/templates/vars.json`](src/templates/vars.json) and [`src/templates/views.json`](src/templates/views.json) for some basic examples. ### Server This skeleton comes equipped with a environment aware [`Koa`](http://koajs.com/) server with compression and basic caching enabled. Configure the server via the following environment variables: * `PORT` [default: 8080] * `COMPRESSION_THRESHOLD` [default: 0] * `CACHE_MAXAGE`: [default: 60000 *(= 1 minute)*] Please have a look at [`src/server/index.js`](src/server/index.js) and adjust according to your needs. ### Docker This skeleton provides a rudimentary [`Dockerfile`](Dockerfile) ## [Changelog](CHANGELOG.md) ## [License](LICENSE)