diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..d8b6f7c
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,3 @@
+{
+ "stage": 0
+}
diff --git a/.gitignore b/.gitignore
index 0c3a2d9..2283c97 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
*.idea
-*.iml
\ No newline at end of file
+*.iml
+node_modules
diff --git a/INSTALLATION.md b/INSTALLATION.md
new file mode 100644
index 0000000..ed21887
--- /dev/null
+++ b/INSTALLATION.md
@@ -0,0 +1,10 @@
+# Setup Instructions
+
+You need to install NodeJS with NPM, go to [https://nodejs.org](https://nodejs.org/)
+
+1. run `npm install`.
+2. run `npm run start`.
+3. open http://127.0.0.1:8080
+
+If you need help setting SourceJS help, can can ask for help at the Gitter chat:
+[](https://gitter.im/sourcejs/Source)
diff --git a/LICENSE b/LICENSE.md
similarity index 100%
rename from LICENSE
rename to LICENSE.md
diff --git a/README.md b/README.md
index 52f3eac..2c621cb 100644
--- a/README.md
+++ b/README.md
@@ -1,26 +1,11 @@
-# SourceJS Spec Page Showcase
+# SourceJS Showcase
-[](https://gitter.im/sourcejs/Source)
+Welcome to SourceJS the dynamic Style Guide platform. It allows to combine multiple project UI component libraries, based on many technologies.
+Following Living Style Guide driven development, SourceJS allows you to code new components directly in the Style Guide.
-View source code of component folders (`/default`, `/jade` and etc) and compare them with [rendered output](https://sourcejs.com/specs/example-specs-showcase/).
+This catalogue repository showcases the use of SourceJS and it's plugins.
+It demonstrates UI blocks (called specs), created with a variaty of technologies.
-Examples are made for SourceJS 0.5.4+ version.
+Examples are made for SourceJS 0.6.0+ version.
-## Setup Instructions
-
-1. [Install SourceJS](https://sourcejs.com/docs/base/#install).
-2. Install SourceJS plugins [sourcejs-contrib-dss](https://github.com/sourcejs/sourcejs-contrib-dss), [sourcejs-jade](https://github.com/sourcejs/sourcejs-jade), [sourcejs-react](https://github.com/szarouski/sourcejs-react).
-3. Checkout this repo contents as a nested folder in `sourcejs/user/specs`:
-
-```
-cd sourcejs/user/specs
-git clone https://github.com/sourcejs/example-specs-showcase
-```
-
-Re-run SourceJS app, and open http://127.0.0.1:8080/specs/example-specs-showcase.
-
-```
-cd sourcejs
-node app.js
-open http://127.0.0.1:8080/specs/example-specs-showcase
-```
+For install instruction see [INSTALLATION.md](./INSTALLATION.md)
diff --git a/assets/css/defaults.css b/assets/css/defaults.css
new file mode 100644
index 0000000..a25c203
--- /dev/null
+++ b/assets/css/defaults.css
@@ -0,0 +1,17 @@
+.styleguide_welcome {
+ position: relative;
+ margin-bottom: 20px;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 15px;
+ line-height: 1.5;
+ color: #999 !important;
+}
+
+.source_licence {
+ position: relative;
+ margin-bottom: 20px;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 15px;
+ line-height: 1.5;
+ color: #999 !important;
+}
diff --git a/default/css/default.css b/default/css/default.css
deleted file mode 100755
index e14490e..0000000
--- a/default/css/default.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.default-btn {
- display: inline-block;
- padding: 10px;
- background: #73c051;
- border-radius: 3px;
- color: #fff;
- text-decoration: none;
- }
-
-.default-btn:hover {
- background: #309124;
- color: #fff;
- text-decoration: none;
- }
\ No newline at end of file
diff --git a/default/index.src.html b/default/index.src.html
deleted file mode 100755
index cd4c8b5..0000000
--- a/default/index.src.html
+++ /dev/null
@@ -1,48 +0,0 @@
-
-
-
This spec is rendered out of index.src.html.
-
-
- Wrapper view with linked Boostrap CSS styles is taken from doc.ejs file , which is configured in Spec's info.json.
-
-
-
View this Spec source code .
-
- Basic button
-
- Button description.
-
-
-
-
-
- Button group
-
- Button group description.
-
-
-
- Left
- Middle
- Right
-
-
-
-
- Custom button
-
- Style for this button are from linked Spec CSS file css/markdown.css.
-
-
\ No newline at end of file
diff --git a/default/info.json b/default/info.json
deleted file mode 100644
index f3f854d..0000000
--- a/default/info.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "author": "Robert Haritonov",
- "template": "doc",
- "title": "Default Spec"
-}
\ No newline at end of file
diff --git a/dss/info.json b/dss/info.json
deleted file mode 100644
index a86e4dd..0000000
--- a/dss/info.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "author": "Robert Haritonov",
- "template": "doc",
- "tag": ["plugins"],
- "title": "DSS Spec"
-}
\ No newline at end of file
diff --git a/index.src.html b/index.src.html
index deab7ad..f968547 100644
--- a/index.src.html
+++ b/index.src.html
@@ -1,22 +1,19 @@
-
Examples Specs
-
-
This Spec catalogue features showcase of SourceJS Spec features and it's plugins. View source code of this library to compare it with rendered results.
-
-
Navigation pages like this, are hand crafted, following Data Nav API .
-
+ <%- includeMD('README.md') %>
-
Native Specs
-
-
-
+
+
+
+
+
+
+ <%- includeMD('INSTALLATION.md') %>
+
+
+
-
Rendered With Plugins
-
-
-
+ <%- includeMD('LICENSE.md') %>
+
diff --git a/info.json b/info.json
index afeec32..f5cbaf4 100644
--- a/info.json
+++ b/info.json
@@ -1,4 +1,4 @@
{
- "title": "Examples Specs",
- "role": "navigation"
-}
\ No newline at end of file
+ "title": "Source - Home",
+ "role": "navigation"
+}
diff --git a/jade/css/jade.css b/jade/css/jade.css
deleted file mode 100644
index fd94640..0000000
--- a/jade/css/jade.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.jade-btn {
- display: inline-block;
- padding: 10px;
- background: #73c051;
- border-radius: 3px;
- color: #fff;
- text-decoration: none;
- }
-
-.jade-btn:hover {
- background: #309124;
- color: #fff;
- text-decoration: none;
- }
\ No newline at end of file
diff --git a/jade/index.jade b/jade/index.jade
deleted file mode 100644
index 0f3683a..0000000
--- a/jade/index.jade
+++ /dev/null
@@ -1,32 +0,0 @@
-link(href='css/jade.css', rel='stylesheet')
-
-.source_info
- p This spec is rendered out of index.jade file using sourcejs-jade plugin.
- p Wrapper view with linked Boostrap CSS styles is taken from doc.ejs file , which is configured in Spec's info.json.
- p View this Spec source code .
-
-section.source_section
- h2 Basic button
-
- p Button description.
-
- .source_example
- include templates/default
-
-section.source_section
- h2 Button group
-
- p Button group description.
-
- code.src-html.source_visible
- .source_example
- include templates/group
-
-section.source_section
- h2 Custom button
-
- p Style for this button are from linked Spec CSS file css/jade.css.
-
- code.src-html.source_visible
- .source_example
- a.jade-btn(href="#777") Jade Button
\ No newline at end of file
diff --git a/jade/info.json b/jade/info.json
deleted file mode 100644
index 42d4533..0000000
--- a/jade/info.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "author": "Robert Haritonov",
- "title": "Jade Spec",
- "template": "doc",
- "tag": ["plugins"]
-}
\ No newline at end of file
diff --git a/jade/templates/group.jade b/jade/templates/group.jade
deleted file mode 100644
index 3128608..0000000
--- a/jade/templates/group.jade
+++ /dev/null
@@ -1,4 +0,0 @@
-div.btn-group
- button.btn.btn-default Left
- button.btn.btn-default Middle
- button.btn.btn-default Right
\ No newline at end of file
diff --git a/markdown/css/markdown.css b/markdown/css/markdown.css
deleted file mode 100755
index cab569f..0000000
--- a/markdown/css/markdown.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.markdown-btn {
- display: inline-block;
- padding: 10px;
- background: #73c051;
- border-radius: 3px;
- color: #fff;
- text-decoration: none;
- }
-
-.markdown-btn:hover {
- background: #309124;
- color: #fff;
- text-decoration: none;
- }
\ No newline at end of file
diff --git a/markdown/info.json b/markdown/info.json
deleted file mode 100644
index 1f58c85..0000000
--- a/markdown/info.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "author": "Robert Haritonov",
- "template": "doc",
- "title": "Markdown Spec"
-}
\ No newline at end of file
diff --git a/options.js b/options.js
new file mode 100644
index 0000000..20092bf
--- /dev/null
+++ b/options.js
@@ -0,0 +1,40 @@
+// User options for overriding core options.js
+
+module.exports = {
+ // Restart the app after changing core (back-end) options
+ // Core options could be only redefined from user/options.js, context options are not supported
+ core: {
+ processMd: {
+ languageRenderers: {
+ jsx: require('sourcejs-react-styleguidist/core/lang-jsx').processExample
+ }
+ },
+ server: {
+ }
+ },
+
+ // Page rendering configuration (redefinable from context options)
+ rendering: {},
+
+ // Client-side options (redefinable from context options)
+ assets: {
+ modulesEnabled : {
+ // Overriding example
+ // trimSpaces: true
+ },
+
+ modulesOptions : {
+ // Modules options example
+ // navHighlight: {
+ // updateHash: false
+ // }
+ },
+
+ // Legacy options object support for some older plugins
+ pluginsOptions: {}
+ },
+
+ // External plugins options (are also exposed to client-side
+ plugins: {
+ }
+};
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..99ead1f
--- /dev/null
+++ b/package.json
@@ -0,0 +1,24 @@
+{
+ "version": "1.0.0",
+ "author": {
+ "name": "Norbert de Langen"
+ },
+ "description": "Example of pre-configured SourceJS instance for building a basic Styleguide / Documentation website.",
+ "scripts": {
+ "build-source": "cd ./node_modules/sourcejs && npm run build",
+ "start": "node ./node_modules/sourcejs/app.js -p $PORT"
+ },
+ "dependencies": {
+ "react": "^0.14.2",
+ "react-dom": "^0.14.2",
+ "sourcejs": "^0.6.0-nightly.6",
+ "sourcejs-contrib-dss": "^0.1.1",
+ "sourcejs-jade": "^0.0.2",
+ "sourcejs-react-docgen": "^0.3.0",
+ "sourcejs-react-styleguidist": "^0.4.0"
+ },
+ "devDependencies": {
+ "amdefine": "^1.0.0",
+ "express": "^4.13.3"
+ }
+}
diff --git a/react/css/react.css b/react/css/react.css
deleted file mode 100644
index 922a355..0000000
--- a/react/css/react.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.react-btn {
- display: inline-block;
- padding: 10px;
- background: #73c051;
- border-radius: 3px;
- color: #fff;
- text-decoration: none;
- }
-
-.react-btn:hover {
- background: #309124;
- color: #fff;
- text-decoration: none;
- }
\ No newline at end of file
diff --git a/react/index.jsx b/react/index.jsx
deleted file mode 100644
index 2d75572..0000000
--- a/react/index.jsx
+++ /dev/null
@@ -1,50 +0,0 @@
-var React = require('sourcejs-react/node_modules/react/addons');
-var Button = require('./templates/default.jsx');
-var ButtonGroup = require('./templates/group.jsx');
-module.exports = React.createClass({
- render: function () {
- return (
-
-
-
-
-
This spec is rendered out of index.jsx file using sourcejs-react plugin.
-
-
Wrapper view with linked Boostrap CSS styles is taken from doc.ejs file , which is
- configured in Spec's info.json.
-
-
- View this Spec source code .
-
-
-
- Basic button
-
- Button description.
-
- Button
-
-
-
- Button group
-
- Button group description.
-
-
-
-
- Custom button
-
- Style for this button are from linked Spec CSS file css/react.css.
-
-
{this.props.children}
- );
- }
-});
\ No newline at end of file
diff --git a/react/templates/group.jsx b/react/templates/group.jsx
deleted file mode 100644
index 2cb2af5..0000000
--- a/react/templates/group.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-var React = require('sourcejs-react/node_modules/react/addons');
-module.exports = React.createClass({
- render: function () {
- var children = this.props.data.map(function (item) {
- return {item} ;
- });
- return (
-
- {children}
-
- );
- }
-});
\ No newline at end of file
diff --git a/dss/css/dss.css b/specs/dss/css/dss.css
similarity index 79%
rename from dss/css/dss.css
rename to specs/dss/css/dss.css
index d660dee..6166623 100644
--- a/dss/css/dss.css
+++ b/specs/dss/css/dss.css
@@ -38,17 +38,17 @@
*/
.dss-btn {
- display: inline-block;
- padding: 10px;
- background: #73c051;
- border-radius: 3px;
- color: #fff;
- text-decoration: none;
- }
+ display: inline-block;
+ padding: 10px;
+ background: #73c051;
+ border-radius: 3px;
+ color: #fff;
+ text-decoration: none;
+}
.dss-btn.pseudo-class-hover,
.dss-btn:hover {
- background: #309124;
- color: #fff;
- text-decoration: none;
- }
\ No newline at end of file
+ background: #309124;
+ color: #fff;
+ text-decoration: none;
+}
diff --git a/specs/dss/info.json b/specs/dss/info.json
new file mode 100644
index 0000000..a3e8bb8
--- /dev/null
+++ b/specs/dss/info.json
@@ -0,0 +1,6 @@
+{
+ "author": "Robert Haritonov",
+ "template": "doc",
+ "tag": ["plugins", "dss"],
+ "title": "DSS Spec"
+}
diff --git a/dss/readme.md b/specs/dss/readme.md
similarity index 100%
rename from dss/readme.md
rename to specs/dss/readme.md
diff --git a/specs/ejs/css/default.css b/specs/ejs/css/default.css
new file mode 100644
index 0000000..286ed63
--- /dev/null
+++ b/specs/ejs/css/default.css
@@ -0,0 +1,14 @@
+.default-btn {
+ display: inline-block;
+ padding: 10px;
+ background: #73c051;
+ border-radius: 3px;
+ color: #fff;
+ text-decoration: none;
+}
+
+.default-btn:hover {
+ background: #309124;
+ color: #fff;
+ text-decoration: none;
+}
diff --git a/specs/ejs/index.ejs b/specs/ejs/index.ejs
new file mode 100644
index 0000000..53a93df
--- /dev/null
+++ b/specs/ejs/index.ejs
@@ -0,0 +1,16 @@
+
+
This spec is rendered out of index.ejs.
+
+ <%- example.title %>
+ <%- example.description %>
+
+
+ <%- include('templates/' + example.template, {data: example.data}); %>
+
+
+<% }); %>
diff --git a/specs/ejs/info.json b/specs/ejs/info.json
new file mode 100644
index 0000000..8952a1b
--- /dev/null
+++ b/specs/ejs/info.json
@@ -0,0 +1,35 @@
+{
+ "author": "Norbert de Langen",
+ "template": "doc",
+ "specFile": "index.ejs",
+ "title": "EJS Spec",
+
+ "examples": [
+ {
+ "title": "Basic Button",
+ "description": "Button description.",
+ "template": "single",
+ "data": "Button"
+ },
+ {
+ "title": "Button Group",
+ "description": "Button group description.",
+ "template": "multiple",
+ "data": [
+ {"text": "Left", "active": false},
+ {"text": "Middle", "active": false},
+ {"text": "Right", "active": false}
+ ]
+ },
+ {
+ "title": "Button Group with first active",
+ "description": "Button group description.",
+ "template": "multiple",
+ "data": [
+ {"text": "Left", "active": true},
+ {"text": "Middle", "active": false},
+ {"text": "Right", "active": false}
+ ]
+ }
+ ]
+}
diff --git a/specs/ejs/templates/multiple.ejs b/specs/ejs/templates/multiple.ejs
new file mode 100644
index 0000000..1fa46a9
--- /dev/null
+++ b/specs/ejs/templates/multiple.ejs
@@ -0,0 +1,5 @@
+
+ <% data.forEach(function(item){ %>
+ <%- item.text %>
+ <% }); %>
+
diff --git a/specs/ejs/templates/single.ejs b/specs/ejs/templates/single.ejs
new file mode 100644
index 0000000..ad935e8
--- /dev/null
+++ b/specs/ejs/templates/single.ejs
@@ -0,0 +1 @@
+<%- data %>
diff --git a/specs/html/css/default.css b/specs/html/css/default.css
new file mode 100755
index 0000000..286ed63
--- /dev/null
+++ b/specs/html/css/default.css
@@ -0,0 +1,14 @@
+.default-btn {
+ display: inline-block;
+ padding: 10px;
+ background: #73c051;
+ border-radius: 3px;
+ color: #fff;
+ text-decoration: none;
+}
+
+.default-btn:hover {
+ background: #309124;
+ color: #fff;
+ text-decoration: none;
+}
diff --git a/specs/html/index.src.html b/specs/html/index.src.html
new file mode 100755
index 0000000..53dd4af
--- /dev/null
+++ b/specs/html/index.src.html
@@ -0,0 +1,48 @@
+
+
+
This spec is rendered out of index.src.html.
+
+
+ Wrapper view with linked Boostrap CSS styles is taken from doc.ejs file , which is configured in Spec's info.json.
+
+
+
View this Spec source code .
+
+ Basic button
+
+ Button description.
+
+
+
+
+
+ Button group
+
+ Button group description.
+
+
+
+ Left
+ Middle
+ Right
+
+
+
+
+ Custom button
+
+ Style for this button are from linked Spec CSS file css/markdown.css.
+
+
diff --git a/specs/html/info.json b/specs/html/info.json
new file mode 100644
index 0000000..ea4788c
--- /dev/null
+++ b/specs/html/info.json
@@ -0,0 +1,5 @@
+{
+ "author": "Robert Haritonov",
+ "template": "doc",
+ "title": "Html Spec"
+}
diff --git a/specs/index.src.html b/specs/index.src.html
new file mode 100644
index 0000000..6070d9d
--- /dev/null
+++ b/specs/index.src.html
@@ -0,0 +1,22 @@
+
+
Examples Specs
+
+
This Spec catalogue features showcase of SourceJS Spec features and it's plugins. View source code of this library to compare it with rendered results.
+
+
Navigation pages like this, are hand crafted, following Data Nav API .
+
+
+
Native Specs
+
+
+
+
Rendered With Plugins
+
+
+
index.jade file using sourcejs-jade plugin.
+ p Wrapper view with linked Boostrap CSS styles is taken from doc.ejs file , which is configured in Spec's info.json.
+ p View this Spec source code .
+
+section.source_section
+ h2 Basic button
+
+ p Button description.
+
+ .source_example
+ include jade/templates/default
+
+section.source_section
+ h2 Button group
+
+ p Button group description.
+
+ code.src-html.source_visible
+ .source_example
+ include jade/templates/group
+
+section.source_section
+ h2 Custom button
+
+ p Style for this button are from linked Spec CSS file css/jade.css.
+
+ code.src-html.source_visible
+ .source_example
+ a.jade-btn(href="#777") Jade Button
diff --git a/specs/jade/info.json b/specs/jade/info.json
new file mode 100644
index 0000000..1b911fb
--- /dev/null
+++ b/specs/jade/info.json
@@ -0,0 +1,6 @@
+{
+ "author": "Robert Haritonov",
+ "title": "Jade Spec",
+ "template": "doc",
+ "tag": ["plugins", "jade"]
+}
diff --git a/jade/templates/default.jade b/specs/jade/templates/default.jade
similarity index 100%
rename from jade/templates/default.jade
rename to specs/jade/templates/default.jade
diff --git a/specs/jade/templates/group.jade b/specs/jade/templates/group.jade
new file mode 100644
index 0000000..da462b0
--- /dev/null
+++ b/specs/jade/templates/group.jade
@@ -0,0 +1,4 @@
+div.btn-group
+ button.btn.btn-default Left
+ button.btn.btn-default Middle
+ button.btn.btn-default Right
diff --git a/specs/markdown/css/markdown.css b/specs/markdown/css/markdown.css
new file mode 100755
index 0000000..917444f
--- /dev/null
+++ b/specs/markdown/css/markdown.css
@@ -0,0 +1,14 @@
+.markdown-btn {
+ display: inline-block;
+ padding: 10px;
+ background: #73c051;
+ border-radius: 3px;
+ color: #fff;
+ text-decoration: none;
+}
+
+.markdown-btn:hover {
+ background: #309124;
+ color: #fff;
+ text-decoration: none;
+}
diff --git a/specs/markdown/info.json b/specs/markdown/info.json
new file mode 100644
index 0000000..3540c36
--- /dev/null
+++ b/specs/markdown/info.json
@@ -0,0 +1,5 @@
+{
+ "author": "Robert Haritonov",
+ "template": "doc",
+ "title": "Markdown Spec"
+}
diff --git a/markdown/readme.md b/specs/markdown/readme.md
similarity index 77%
rename from markdown/readme.md
rename to specs/markdown/readme.md
index 70bd487..331daf8 100755
--- a/markdown/readme.md
+++ b/specs/markdown/readme.md
@@ -1,5 +1,5 @@
-
- Left
+ Left
- Middle
+ Middle
- Right
+ Right
```
@@ -36,4 +36,4 @@ Style for this button are from linked Spec CSS file `css/markdown.css`.
```example
Markdown Button
-```
\ No newline at end of file
+```
diff --git a/specs/react/Button.css b/specs/react/Button.css
new file mode 100644
index 0000000..0f84e06
--- /dev/null
+++ b/specs/react/Button.css
@@ -0,0 +1,10 @@
+.root {
+ padding: .5em 1.5em;
+ color: #666;
+ background-color: #fff;
+ border: 1px solid currentColor;
+ border-radius: .3em;
+ text-align: center;
+ vertical-align: middle;
+ cursor: pointer;
+}
diff --git a/specs/react/Button.jsx b/specs/react/Button.jsx
new file mode 100644
index 0000000..e714603
--- /dev/null
+++ b/specs/react/Button.jsx
@@ -0,0 +1,41 @@
+import { Component, PropTypes } from 'react';
+
+import s from './Button.css';
+
+/**
+ * The only true button.
+ */
+export default class Button extends Component {
+ static propTypes = {
+ /**
+ * Button label.
+ */
+ children: PropTypes.string.isRequired,
+ color: PropTypes.string,
+ size: PropTypes.oneOf(['small', 'normal', 'large']),
+ }
+ static defaultProps = {
+ color: '#222',
+ size: 'normal'
+ }
+ static sizes = {
+ small: '10px',
+ normal: '14px',
+ large: '18px'
+ }
+
+ onClick() {
+ alert('click');
+ }
+
+ render() {
+ let styles = {
+ color: this.props.color,
+ fontSize: Button.sizes[this.props.size]
+ };
+
+ return (
+ {this.props.children}
+ );
+ }
+}
diff --git a/specs/react/info.json b/specs/react/info.json
new file mode 100644
index 0000000..0b1c9e8
--- /dev/null
+++ b/specs/react/info.json
@@ -0,0 +1,5 @@
+{
+ "author": "Robert Haritonov",
+ "title": "React Spec",
+ "tag": ["plugins", "react"]
+}
diff --git a/specs/react/readme.md b/specs/react/readme.md
new file mode 100755
index 0000000..503f704
--- /dev/null
+++ b/specs/react/readme.md
@@ -0,0 +1,19 @@
+# Button Spec
+
+<%- info.__docGenRaw.description %>
+
+## Properties
+
+<%- info.__docGenHTML %>
+
+## Basic button
+
+```jsx
+Default Button
+```
+
+## Big button
+
+```jsx
+Large Pink
+```
-