webcomponents.github.io

Deprecated. Please see webcomponents/webcomponents.org.

WebComponents.org is a place for web component authors to discuss and share best practices, patterns and learning resources.

Setup

This site is made with DocPad, a static generator in Node, and the best way to install it is via npm.

First, you need to clone the project:

$ git clone https://github.com/webcomponents/webcomponents.github.io

Then go to the folder and install all dependencies:

$ cd webcomponents.github.io
$ npm install

Now you're good to go!

Usage

DocPad has three basic options used in this project:

To regenerate the site as you edit and save files, which can be viewed at http://localhost:9778, run:

$ npm run watch

To generate a static version of the site, that is ready to upload to a server (it will create a folder called out), run:

$ npm run build

To generate and send the output to gh-pages branch, run:

$ npm run deploy

Tasks

We use Grunt, a task-runner in Node, to automate things.

To install it and all the other dependencies, run:

$ npm install -g grunt-cli

To check performance regressions, run:

$ grunt pagespeed

P.S.: You'll need to generate a PageSpeed API key and defined it as an environment variable.

Browser Support

We do care about it.

| <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/chrome/chrome_64x64.png" width="48px" height="48px" alt="Chrome logo"> | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/edge/edge_64x64.png" width="48px" height="48px" alt="Edge logo"> | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/firefox/firefox_64x64.png" width="48px" height="48px" alt="Firefox logo"> | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/internet-explorer/internet-explorer_64x64.png" width="48px" height="48px" alt="Internet Explorer logo"> | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/opera/opera_64x64.png" width="48px" height="48px" alt="Opera logo"> | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/safari/safari_64x64.png" width="48px" height="48px" alt="Safari logo"> | |:---:|:---:|:---:|:---:|:---:|:---:| | Latest ✔ | Latest ✔ | Latest ✔ | IE 9+ ✔ | Latest ✔ | Latest ✔ |