Merge 4a8572c into 7c17611

package.json

@@ -9,7 +9,7 @@
     "jest": "jest",
     "lerna": "lerna bootstrap -- --no-optional --no-package-lock",
     "lint": "eslint packages/clay-*/src/*.js packages/clay-*/src/**/*.js && npm run mcritic",
-    "mcritic": "mcritic packages/ --ignore '**/{browserslist-config-clay-components,generator-metal-clay,node_modules}/**'",
+    "mcritic": "mcritic packages/ --ignore '**/{browserslist-config-clay-components,claycss.com,generator-metal-clay,node_modules}/**'",
     "precommit": "lint-staged",
     "prettier": "prettier-eslint packages/clay-*/src/*.js packages/clay-*/src/**/*.js",
     "start": "http-server . -p 4000",

packages/claycss.com/.editorconfig

@@ -0,0 +1,12 @@
+# This file is for unifying the coding style for different editors and IDEs
+# See editorconfig.org
+
+root = true
+
+[*]
+indent_style = tab
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

packages/claycss.com/.gitignore

@@ -0,0 +1,5 @@
+claycss.json
+dist
+node_modules
+temp
+.temp

packages/claycss.com/README.md

@@ -0,0 +1,63 @@
+# claycss.com
+
+[![Built with Electric](https://img.shields.io/badge/built%20with-electric-f3c302.svg?style=flat)](http://electricjs.com)
+
+## Setup
+
+1. Make sure you have [node and npm](https://nodejs.org/en/download/) installed:
+
+```sh
+node -v && npm -v
+```
+
+2. Install our global dependencies:
+
+```sh
+[sudo] npm i -g electric-cli@alpha
+```
+
+3. Install our local dependencies:
+
+```sh
+npm i
+```
+
+## Usage
+
+* Build the site, serve it locally, and watch for any changes:
+
+```
+electric run
+```
+
+* Deploy to production (send build files to `wedeploy` branch):
+
+```
+electric deploy
+```
+
+## Clay Development
+
+As this site contains all documentation for Clay, npm scripts have been added to
+speed up development for the
+[https://github.com/liferay/clay](https://github.com/liferay/clay) repo.
+
+### Setting up the watch task
+
+```
+npm run config
+```
+
+This will open a prompt that will ask you for the path to your clone of the
+liferay/clay repo.
+
+```
+npm run watch
+```
+
+This will startup Electric's `electric run` command, as well as a custom watch
+task that will rebuild everything in `src/styles` when changes are made to your
+clone of liferay/clay.
+
+If you want to rebuild the site without pointing to your clone of liferay/clay,
+simple delete the `claycss.json` file that was generated in the project root.

packages/claycss.com/electric.config.js

@@ -0,0 +1,48 @@
+'use strict';
+
+const clay = require('clay');
+const gulp = require('gulp');
+const path = require('path');
+
+require('gulp-storage')(gulp);
+
+gulp.storage.create('claycss', 'claycss.json');
+
+const generateIconData = require('./lib/icons');
+
+var clayJSPath = path.join(clay.srcDir, 'js');
+
+const clayPath = gulp.storage.get('clayPath');
+let clayIncludePaths = clay.includePaths;
+
+if (clayPath) {
+	clayIncludePaths = path.join(path.join(process.cwd(), clayPath, 'src/scss'));
+
+	console.log('Warning! using ' + clayIncludePaths + ' to compile sass.\nDelete claycss.json to reset.');
+}
+
+module.exports = {
+	frontMatterHook: function(data) {
+		return generateIconData(data);
+	},
+	codeMirrorLanguages: ['xml', 'htmlmixed', 'soy'],
+	metalComponents: ['electric-quartz-components'],
+	sassOptions: {
+		includePaths: ['node_modules', clayIncludePaths]
+	},
+	vendorSrc: [
+		{
+			dest: 'dist/vendor/lexicon',
+			src: path.join(clay.buildDir, 'images', 'icons', '*')
+		},
+		{
+			src: [
+				path.join(clayJSPath, 'svg4everybody.js'),
+				path.join(clayJSPath, 'bootstrap.js')
+			]
+		},
+		{
+			src: path.join(clayJSPath, 'svg4everybody.js')
+		}
+	]
+};

packages/claycss.com/gulpfile.js

@@ -0,0 +1,59 @@
+const fs = require('fs');
+const gulp = require('gulp');
+const inquirer = require('inquirer');
+const path = require('path');
+const sass = require('gulp-sass');
+
+require('gulp-storage')(gulp);
+
+const storage = gulp.storage;
+
+storage.create('claycss', 'claycss.json');
+
+const CLAY_PATH = 'clayPath';
+
+gulp.task('config', function(cb) {
+	inquirer.prompt({
+		default: storage.get(CLAY_PATH) || '../clay',
+		message: 'Please provide the path to your clay repo.',
+		validate: function(value) {
+			let valid = true;
+
+			if (!fs.existsSync(path.join(process.cwd(), value))) {
+				valid = value + ' is not a valid file path.';
+			}
+
+			return valid;
+		},
+		name: 'clayPath'
+	}).then(function(answers) {
+		storage.set(CLAY_PATH, answers.clayPath);
+
+		cb();
+	});
+});
+
+gulp.task('styles', function() {
+	const clayPath = storage.get(CLAY_PATH);
+
+	gulp.src('src/styles/*.scss')
+		.pipe(sass({
+			includePaths: ['node_modules', path.join(clayPath, 'src/scss')]
+		}).on('error', handleError))
+		.pipe(gulp.dest('dist/styles'))
+});
+
+gulp.task('watch', function() {
+	const clayPath = storage.get(CLAY_PATH);
+
+	if (!clayPath) {
+		console.log('Please run "npm run config" to configure the watch task.');
+	}
+	else {
+		gulp.watch(path.join(clayPath, 'src/scss/**/*.scss'), ['styles']);
+	}
+});
+
+function handleError(err) {
+	console.log(err);
+}

packages/claycss.com/lib/icons.js

@@ -0,0 +1,88 @@
+const _ = require('lodash');
+const clay = require('clay');
+const countries = require('countries-list').countries
+const fs = require('fs');
+const langs = require('languages');
+const path = require('path');
+
+const alternateCodes = {
+	'in': 'id',
+	'iw': 'he',
+	'nb': 'no'
+}
+
+function generateIconData(data) {
+	const iconsDoc = _.get(data, 'index.children.docs.children.components.children.icons-lexicon');
+
+	if (iconsDoc) {
+		const iconsPath = path.join(clay.buildDir, 'images', 'icons');
+
+		let files = fs.readdirSync(iconsPath);
+
+		files = _.reject(
+			files,
+			function(file) {
+				return file === 'icons.svg';
+			}
+		);
+
+		files = _.partition(
+			files,
+			function(file) {
+				return !_.startsWith(file, 'flags-');
+			}
+		);
+
+		let icons = files[0];
+		let flags = files[1];
+
+		icons = icons.map(mapSVG);
+		flags = flags.map(mapSVG);
+
+		const flagData = flags.reduce(
+			function(prev, item, index) {
+				prev[item] = getLangInfo(item);
+
+				return prev;
+			},
+			{}
+		);
+
+		iconsDoc.icons = icons;
+		iconsDoc.flags = flags;
+		iconsDoc.flagData = flagData;
+	}
+
+	return data;
+}
+
+function getLangInfo(code) {
+	const parts = code.split('-');
+
+	const langCode = parts[0];
+	const countryCode = parts[1];
+
+	let lang = langs.getLanguageInfo(alternateCodes[langCode] || langCode).name;
+
+	if (countryCode) {
+		const country = countries[countryCode.toUpperCase()];
+
+		if (country) {
+			lang += ' (' + country.name + ')';
+		}
+	}
+
+	return lang;
+}
+
+function mapSVG(item, index) {
+	let iconName = path.basename(item, '.svg').toLowerCase();
+
+	if (_.startsWith(iconName, 'flags-')) {
+		iconName = iconName.replace(/^flags-/, '');
+	}
+
+	return iconName;
+}
+
+module.exports = generateIconData;

packages/claycss.com/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "claycss.com",
+  "version": "0.0.0",
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/liferay/claycss.com"
+  },
+  "scripts": {
+    "config": "gulp config",
+    "watch": "concurrent --kill-others \"gulp watch\" \"el run\""
+  },
+  "dependencies": {
+    "clay": "^2.0.0-beta.5",
+    "jquery": "^3.2.1",
+    "metal-storage": "^1.1.0"
+  },
+  "devDependencies": {
+    "concurrently": "^3.5.0",
+    "countries-list": "^2.0.0",
+    "electric-quartz-components": "alpha",
+    "gulp": "^3.9.1",
+    "gulp-sass": "^3.1.0",
+    "gulp-storage": "^1.0.6",
+    "inquirer": "^3.2.2",
+    "languages": "^0.1.3",
+    "lodash": "^4.17.4",
+    "metal-toggler": "^2.0.0",
+    "run-sequence": "^1.2.2"
+  }
+}

packages/claycss.com/src/components/DocsList.soy

@@ -0,0 +1,33 @@
+{namespace DocsList}
+
+/**
+ * @param section
+ */
+{template .render}
+	{if $section.children}
+		<div class="docs-list row">
+			{foreach $childId in $section.childIds}
+				{let $childPage: $section.children[$childId] /}
+
+				{if not $childPage.hidden}
+					<div class="col-md-4">
+						{call .anchor data="all"}
+							{param page: $childPage /}
+						{/call}
+					</div>
+				{/if}
+			{/foreach}
+		</div>
+	{/if}
+{/template}
+
+/**
+ * @param page
+ */
+{template .anchor}
+	<div class="docs-item">
+		<a href="{$page.url}">
+			<span>{$page.title}</span>
+		</a>
+	</div>
+{/template}

packages/claycss.com/src/components/MainNavigation.js

@@ -0,0 +1,23 @@
+'use strict';
+
+import Component from 'metal-component';
+import dom from 'metal-dom';
+import Soy from 'metal-soy';
+
+import templates from './MainNavigation.soy';
+
+class MainNavigation extends Component {
+	handleCollapseClick_(event) {
+		event.preventDefault();
+
+		const parent = dom.parent(event.target, 'li');
+
+		let cssClass = 'active';
+
+		dom.toggleClasses(parent, cssClass);
+	}
+};
+
+Soy.register(MainNavigation, templates);
+
+export default MainNavigation;