New infra from clayui.com with Gatsbyjs

README.md

@@ -14,7 +14,7 @@ The pillar to give colors and structure to Clay, where is the css and examples o
 
 All components that follow clay-css marking and Lexicon use cases, developed on [Metal.js](https://metaljs.com/) with [Soy (Closure templates)](https://developers.google.com/closure/templates/docs/commands).
 
-### [Clayui.com](./packages/clayui.com)
+### [Clayui.com](./clayui.com)
 
 Contains the source code and documentation powering [clayui.com](https://clayui.com/).
 
@@ -33,7 +33,7 @@ Contains the source code and documentation powering [clayui.com](https://clayui.
 
 You can find the Clay documentation on the [site](https://clayui.com/docs/components/alerts.html).
 
-* [Getting Started](https://clayui.com/docs/getting_started/introduction.html)
+* [Getting Started](https://clayui.com/docs/getting-started/introduction.html)
 * [Layout](https://clayui.com/docs/layout/grid.html)
 * [Components Library](https://clayui.com/docs/components/alerts.html)
 * [News](https://clayui.com/docs/news/)
@@ -66,7 +66,7 @@ Each package contains a page with demos, check.
 
 Clay is available as the `clay` package in npm for components and for css like `clay-css`. It is also available on a [CDN](https://cdn.jsdelivr.net/npm/clay/lib/js/clay.js) for components and for css, [check](https://cdn.jsdelivr.net/npm/clay/lib/css/atlas.css). But if you just want the separate components, it's also available in the npm as [clay-](https://www.npmjs.com/search?q=clay-).
 
-See the [Getting Started](https://clayui.com/docs/getting_started/introduction.html) guide for more information.
+See the [Getting Started](https://clayui.com/docs/getting-started/introduction.html) guide for more information.
 
 Even if your application does not use the framework [Metal.js](https://metaljs.com/) Clay is flexible and can be used as WebComponents see some examples with:
 

clayui.com/.gitignore

@@ -0,0 +1,62 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+.cache/
+public
+yarn-error.log

clayui.com/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 gatsbyjs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

clayui.com/README.md

@@ -0,0 +1,5 @@
+# clayui.com
+The main Clay site at clayui.com
+
+## Running in development
+`gatsby develop`

clayui.com/content/docs/advanced-guides/using-js-components-with-metal.md

@@ -0,0 +1,76 @@
+---
+title: "Using JS Components with Metal.js"
+---
+
+<article id="using-js-components-with-metal">
+
+Clay Components are made according to Lexicon standards and built on top of the [Metal.js](https://metaljs.com/) framework, so you can use Clay Components in your JSX and SOY templates.
+
+## Jsx
+
+You can import your components as described in [Importing the JS Component](/docs/getting-started/importing-the-js-component.html). Consider the example below:
+
+
+```javascript
+import {ClayBadge} from 'clay';
+```
+
+You can call Clay components in your JSX templates just like you would call Metal.js components:
+
+```javascript
+import Component from 'metal-jsx';
+import {ClayBadge} from 'clay';
+
+class App extends Component {
+    render() {
+        return(
+            <div>
+                <h4>My Application with Clay<h4>
+                <hr />
+                <ClayBadge
+                    id="myId"
+                    label="badge"
+                    style="danger"
+                />
+            </div>
+        );
+    }
+};
+```
+
+## Soy
+
+You can call Clay components in your SOY templates the same way you would call any SOY component. Consider the example below:
+
+<div class="alert alert-warning" role="alert">
+	<span class="alert-indicator">
+		<svg aria-hidden="true" class="lexicon-icon lexicon-icon-warning-full">
+			<use xlink:href="/vendor/lexicon/icons.svg#warning-full"></use>
+		</svg>
+	</span>
+	<strong class="lead">Warning:</strong> Make sure you import the Clay component where you want to use it.
+</div>
+
+```javascript
+import Component from 'metal-component';
+import Soy from 'metal-soy';
+
+import {ClayBadge} from 'clay';
+
+class App extends Component {}
+
+// more...
+```
+```soy
+{namespace App}
+
+{template .render}
+    {call ClayBadge.render}
+        {param id: 'myId' /}
+        {param label: 'badge' /}
+        {param style: 'danger' /}
+    {/call}
+{/template}
+```
+
+</article>