diff --git a/css/tomorrow.css b/css/tomorrow.css new file mode 100644 index 0000000000000..06ca554e5ccd6 --- /dev/null +++ b/css/tomorrow.css @@ -0,0 +1,45 @@ +/* Tomorrow Theme */ +/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */ +/* Original theme - https://github.com/chriskempson/tomorrow-theme */ +/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */ +.tomorrow-comment, pre .comment, pre .title { + color: #8e908c; +} + +.tomorrow-red, pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo { + color: #c82829; +} + +.tomorrow-orange, pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant { + color: #f5871f; +} + +.tomorrow-yellow, pre .class, pre .ruby .class .title, pre .css .rules .attribute { + color: #eab700; +} + +.tomorrow-green, pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata { + color: #718c00; +} + +.tomorrow-aqua, pre .css .hexcolor { + color: #3e999f; +} + +.tomorrow-blue, pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title { + color: #4271ae; +} + +.tomorrow-purple, pre .keyword, pre .javascript .function { + color: #8959a8; +} + +pre code { + display: block; + background: white; + color: #4d4d4c; + font-family: Menlo, Monaco, Consolas, monospace; + line-height: 1.5; + border: 1px solid #ccc; + padding: 10px; +} diff --git a/css/zenburn.css b/css/zenburn.css new file mode 100644 index 0000000000000..dbe6fdef1950e --- /dev/null +++ b/css/zenburn.css @@ -0,0 +1,150 @@ +/* + +Zenburn style from voldmar.ru (c) Vladimir Epifanov +based on dark.css by Ivan Sagalaev + +*/ + +.markdown pre { + display: block; + background: #3F3F3F; + color: #DCDCDC; + overflow-y: hidden; +} + +.markdown pre code { + background: none; + border: none; + border-radius: 3px; + display: inline-block; + overflow: inherit; + padding: 1.58333rem; + white-space: inherit; + word-wrap: normal; +} + +code { + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + white-space: pre; + white-space: pre-wrap; + white-space: pre-line; + white-space: -pre-wrap; + white-space: -o-pre-wrap; + white-space: -moz-pre-wrap; + white-space: -hp-pre-wrap; + word-wrap: break-word; + background: #e5e5e5; + border: 1px solid #cccccc; + display: inline; + font-family: Inconsolata, monospace, serif; + max-width: 100%; + overflow: auto; + padding: 0 0.1625rem; +} + +.hljs-keyword, +.hljs-tag, +.css .hljs-class, +.css .hljs-id, +.lisp .hljs-title, +.nginx .hljs-title, +.hljs-request, +.hljs-status, +.clojure .hljs-attribute { + color: #E3CEAB; +} + +.django .hljs-template_tag, +.django .hljs-variable, +.django .hljs-filter .hljs-argument { + color: #DCDCDC; +} + +.hljs-number, +.hljs-date { + color: #8CD0D3; +} + +.dos .hljs-envvar, +.dos .hljs-stream, +.hljs-variable, +.apache .hljs-sqbracket { + color: #EFDCBC; +} + +.dos .hljs-flow, +.diff .hljs-change, +.python .exception, +.python .hljs-built_in, +.hljs-literal, +.tex .hljs-special { + color: #EFEFAF; +} + +.diff .hljs-chunk, +.hljs-subst { + color: #8F8F8F; +} + +.dos .hljs-keyword, +.python .hljs-decorator, +.hljs-title, +.haskell .hljs-type, +.diff .hljs-header, +.ruby .hljs-class .hljs-parent, +.apache .hljs-tag, +.nginx .hljs-built_in, +.tex .hljs-command, +.hljs-prompt { + color: #efef8f; +} + +.dos .hljs-winutils, +.ruby .hljs-symbol, +.ruby .hljs-symbol .hljs-string, +.ruby .hljs-string { + color: #DCA3A3; +} + +.diff .hljs-deletion, +.hljs-string, +.hljs-tag .hljs-value, +.hljs-preprocessor, +.hljs-pragma, +.hljs-built_in, +.sql .hljs-aggregate, +.hljs-javadoc, +.smalltalk .hljs-class, +.smalltalk .hljs-localvars, +.smalltalk .hljs-array, +.css .hljs-rules .hljs-value, +.hljs-attr_selector, +.hljs-pseudo, +.apache .hljs-cbracket, +.tex .hljs-formula, +.coffeescript .hljs-attribute { + color: #CC9393; +} + +.hljs-shebang, +.diff .hljs-addition, +.hljs-comment, +.java .hljs-annotation, +.hljs-template_comment, +.hljs-pi, +.hljs-doctype { + color: #7F9F7F; +} + +.coffeescript .javascript, +.javascript .xml, +.tex .hljs-formula, +.xml .javascript, +.xml .vbscript, +.xml .css, +.xml .hljs-cdata { + opacity: 0.5; +} + diff --git a/package.json b/package.json index 0d2af22914346..8e6dedb01a0e2 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "react-responsive-grid": "^0.3.0", "react-router": "^2.0.0", "safe-access": "^0.1.0", + "toml-js": "0.0.8", "typography": "^0.7.0" }, "devDependencies": { diff --git a/pages/404.md b/pages/404.md new file mode 100644 index 0000000000000..7376ed2887fc1 --- /dev/null +++ b/pages/404.md @@ -0,0 +1,3 @@ +# NOT FOUND + +You just hit a route that doesn't exist... the sadness. diff --git a/pages/coffee-react.cjsx b/pages/coffee-react.cjsx new file mode 100644 index 0000000000000..1ccaa764dd8ba --- /dev/null +++ b/pages/coffee-react.cjsx @@ -0,0 +1,20 @@ +React = require 'react' + +module.exports = React.createClass + getInitialState: -> + count: 0 + + handlePlusClick: -> + @setState count: @state.count + 1 + + handleMinusClick: -> + @setState count: @state.count - 1 + + render: -> +
+

Coffeescript React.js components

+

Counter example

+

{@state.count}

+ + +
diff --git a/pages/example.css b/pages/example.css new file mode 100644 index 0000000000000..dba9cd1c9c22b --- /dev/null +++ b/pages/example.css @@ -0,0 +1,27 @@ +:root { + --color: pink; +} + +.postcss-nav-example { + & ul { + margin: 0; + padding: 0; + list-style: none; + } + + & li { display: inline-block; } + + & a { + background: var(--color); + border-radius: 3px; + display: block; + margin-right: 6px; + padding: 3px 9px; + text-decoration: none; + } +} + +.the-postcss-class { + text-decoration: underline; +} + diff --git a/pages/example.less b/pages/example.less new file mode 100644 index 0000000000000..1c464ec9e8f73 --- /dev/null +++ b/pages/example.less @@ -0,0 +1,31 @@ +/* Variables */ +@color: pink; + +/* Mixin */ +.border-radius (@radius: 5px) { + -webkit-border-radius: @radius; + -moz-border-radius: @radius; + border-radius: @radius; +} + +.less-nav-example { + ul { + margin: 0; + padding: 0; + list-style: none; + } + + li { display: inline-block; } + + a { + background: @color; + .border-radius(3px); + display: block; + margin-right: 6px; + padding: 3px 9px; + text-decoration: none; + } +} +.the-less-class { + text-decoration: underline; +} diff --git a/pages/example.scss b/pages/example.scss new file mode 100644 index 0000000000000..59179c1921ebb --- /dev/null +++ b/pages/example.scss @@ -0,0 +1,31 @@ +$color: pink; + +@mixin borderRadius ($radius: 5px) { + -webkit-border-radius: $radius; + -moz-border-radius: $radius; + border-radius: $radius; +} + +.sass-nav-example { + ul { + margin: 0; + padding: 0; + list-style: none; + } + + li { display: inline-block; } + + a { + @include borderRadius(3px); + + background: $color; + display: block; + margin-right: 6px; + padding: 3px 9px; + text-decoration: none; + } +} + +.the-sass-class { + text-decoration: underline; +} diff --git a/pages/html.html b/pages/html.html new file mode 100644 index 0000000000000..c72a360796680 --- /dev/null +++ b/pages/html.html @@ -0,0 +1,5 @@ + +

You can also author content in raw HTML if that's your flavoring. Gatsby handles +that just fine.

diff --git a/pages/index.js b/pages/index.js new file mode 100644 index 0000000000000..19424b3589bcd --- /dev/null +++ b/pages/index.js @@ -0,0 +1,54 @@ +import React from 'react' +import { Link } from 'react-router' +// Styles for highlighted code blocks. +import 'css/zenburn.css' + +export default class Sass extends React.Component { + render () { + return ( +
+

+ Hi people +

+

Welcome to your new Gatsby site

+

Below are some pages showing different capabilities built-in to Gatsby

+

Supported file types

+ +

Supported CSS Preprocessors

+ +
+ ) + } +} diff --git a/pages/index.md b/pages/index.md deleted file mode 100644 index 144893cef2e16..0000000000000 --- a/pages/index.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: Hi people ---- -Welcome to your new Gatsby site. diff --git a/pages/json.json b/pages/json.json new file mode 100644 index 0000000000000..9ce0943dad802 --- /dev/null +++ b/pages/json.json @@ -0,0 +1,8 @@ +{ + "title": "Create pages from JSON!", + "imagine": "What you can do with raw data", + "integrationsWithOtherSystems": { + "possible": true, + "awesome": true + } +} diff --git a/pages/less.js b/pages/less.js new file mode 100644 index 0000000000000..9ca5eb4f62d77 --- /dev/null +++ b/pages/less.js @@ -0,0 +1,30 @@ +import React from 'react' +import './example.less' + +export default class Less extends React.Component { + render () { + return ( +
+

+ Hi lessy friends +

+
+

Nav example

+ +
+
+ ) + } +} diff --git a/pages/markdown.md b/pages/markdown.md new file mode 100644 index 0000000000000..e1f49d7c79b34 --- /dev/null +++ b/pages/markdown.md @@ -0,0 +1,53 @@ +--- +title: I'm a markdown file! +--- + +Markdown is pretty cool if you ask me. + +## You can have lists + +### Numbered +1. me first! +2. I'm second! +3. third :( + +### Unordered +* Cheese +* is actually +* really good + +And **lots** of other *fun* stuff. + +> Block quotes are +> written like so. +> +> They can span multiple paragraphs, +> if you like. + +## Some code + +Javascript +```javascript +function $initHighlight(block, flags) { + try { + if (block.className.search(/\bno\-highlight\b/) != -1) + return processBlock(block, true, 0x0F) + ' class=""'; + } catch (e) { + /* handle exception */ + } + for (var i = 0 / 2; i < classes.length; i++) { // "0 / 2" should not be parsed as regexp + if (checkCondition(classes[i]) === undefined) + return /\d+/g; + } +} +``` + +Python +```python +import time +# Quick, count to ten! +for i in range(10): + # (but not *too* quick) + time.sleep(0.5) + print i +``` diff --git a/pages/postcss.js b/pages/postcss.js new file mode 100644 index 0000000000000..d6980fa43dd13 --- /dev/null +++ b/pages/postcss.js @@ -0,0 +1,28 @@ +import React from 'react' +import './example.css' + +export default class PostCSS extends React.Component { + render () { + return ( +
+

+ Hi PostCSSy friends +

+
+

Nav example

+ +
+
+ ) + } +} diff --git a/pages/react.js b/pages/react.js new file mode 100644 index 0000000000000..3b81cbdec3990 --- /dev/null +++ b/pages/react.js @@ -0,0 +1,28 @@ +import React from 'react' + +export default class ReactComponent extends React.Component { + constructor () { + super() + this.state = { count: 0 } + } + + handlePlusClick () { + this.setState({ count: this.state.count + 1 }) + } + + handleMinusClick () { + this.setState({ count: this.state.count - 1 }) + } + + render () { + return ( +
+

React.js components

+

Counter example

+

{this.state.count}

+ + +
+ ) + } +} diff --git a/pages/sass.js b/pages/sass.js new file mode 100644 index 0000000000000..8bf2eaa162f82 --- /dev/null +++ b/pages/sass.js @@ -0,0 +1,30 @@ +import React from 'react' +import './example.scss' + +export default class Sass extends React.Component { + render () { + return ( +
+

+ Hi sassy friends +

+
+

Nav example

+ +
+
+ ) + } +} diff --git a/pages/toml.toml b/pages/toml.toml new file mode 100644 index 0000000000000..6758c24dae993 --- /dev/null +++ b/pages/toml.toml @@ -0,0 +1,7 @@ +title = "Create pages from TOML!" +imagine = "What you can do with raw data" + +[integrationsWithOtherSystems] +possible = true +awesome = true + diff --git a/pages/yaml.yaml b/pages/yaml.yaml new file mode 100644 index 0000000000000..d1df2cb0bdd1b --- /dev/null +++ b/pages/yaml.yaml @@ -0,0 +1,5 @@ +title: Create pages from YAML! +imagine: What you can do with raw data +integrationsWithOtherSystems: + possible: true + awesome: true diff --git a/wrappers/html.js b/wrappers/html.js new file mode 100644 index 0000000000000..8b7958536f34a --- /dev/null +++ b/wrappers/html.js @@ -0,0 +1,18 @@ +import React from 'react' + +module.exports = React.createClass({ + propTypes () { + return { + router: React.PropTypes.object, + } + }, + render () { + const post = this.props.route.page.data + return ( +
+

+
+
+ ) + }, +}) diff --git a/wrappers/json.js b/wrappers/json.js new file mode 100644 index 0000000000000..982eca4b2410e --- /dev/null +++ b/wrappers/json.js @@ -0,0 +1,19 @@ +import React from 'react' + +module.exports = React.createClass({ + propTypes () { + return { + route: React.PropTypes.object, + } + }, + render () { + const data = this.props.route.page.data + return ( +
+

{data.title}

+

Raw view of json file

+ 
+
+ ) + }, +}) diff --git a/wrappers/md.jsx b/wrappers/md.js similarity index 91% rename from wrappers/md.jsx rename to wrappers/md.js index cf7288061c0e7..ead3ce593622f 100644 --- a/wrappers/md.jsx +++ b/wrappers/md.js @@ -9,7 +9,7 @@ module.exports = React.createClass({ render () { const post = this.props.route.page.data return ( -
+

{post.title}

diff --git a/wrappers/toml.js b/wrappers/toml.js new file mode 100644 index 0000000000000..039ac6a5f10de --- /dev/null +++ b/wrappers/toml.js @@ -0,0 +1,20 @@ +import React from 'react' +import toml from 'toml-js' + +module.exports = React.createClass({ + propTypes () { + return { + route: React.PropTypes.object, + } + }, + render () { + const data = this.props.route.page.data + return ( +
+

{data.title}

+

Raw view of toml file

+ 
+
+ ) + }, +}) diff --git a/wrappers/yaml.js b/wrappers/yaml.js new file mode 100644 index 0000000000000..275ad3e554a70 --- /dev/null +++ b/wrappers/yaml.js @@ -0,0 +1,20 @@ +import React from 'react' +import yaml from 'js-yaml' + +module.exports = React.createClass({ + propTypes () { + return { + route: React.PropTypes.object, + } + }, + render () { + const data = this.props.route.page.data + return ( +
+

{data.title}

+

Raw view of yaml file

+ 
+
+ ) + }, +})