Reorganize site

geekorn · May 27, 2018 · 37263df · 37263df
1 parent ebf4146
commit 37263df
Show file tree

Hide file tree

Showing 103 changed files with 104 additions and 762 deletions.
diff --git a/.npmignore b/.npmignore
@@ -1,6 +1,6 @@
 docs
+site
 test
-stories
 coverage
 .nyc_output
 .site

diff --git a/.travis.yml b/.travis.yml
@@ -8,14 +8,11 @@ before_deploy:
   - npm install
   - npm run build
   - npm run card
-  - cd ..
-  - cp .site/index.html .site/404.html
+  - cp dist/index.html dist/404.html
 deploy:
-  edge:
-    branch: v1.8.47
   provider: pages
   skip_cleanup: true
   github_token: $GH_TOKEN
-  local_dir: .site
+  local_dir: docs/dist
   on:
     branch: master
diff --git a/docs/404.html b/docs/404.html
diff --git a/docs/demo/bundle.js b/docs/demo/bundle.js
diff --git a/docs/demo/index.html b/docs/demo/index.html
diff --git a/docs/package.json b/docs/package.json
diff --git a/docs/webpack.config.js b/docs/webpack.config.js
diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
     "system-components": "^2.0.2"
   },
   "devDependencies": {
-    "@compositor/x0": "^5.0.0-11",
+    "@compositor/x0": "^5.0.0",
     "ava": "^0.25.0",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",

diff --git a/docs/src/App.js → site/_src/App.js b/docs/src/App.js → site/_src/App.js
diff --git a/docs/src/Component.js → site/_src/Component.js b/docs/src/Component.js → site/_src/Component.js
diff --git a/docs/src/ComponentList.js → site/_src/ComponentList.js b/docs/src/ComponentList.js → site/_src/ComponentList.js
diff --git a/docs/src/Container.js → site/_src/Container.js b/docs/src/Container.js → site/_src/Container.js
diff --git a/docs/src/Example.js → site/_src/Example.js b/docs/src/Example.js → site/_src/Example.js
diff --git a/docs/src/ExampleList.js → site/_src/ExampleList.js b/docs/src/ExampleList.js → site/_src/ExampleList.js
diff --git a/docs/src/Extending.js → site/_src/Extending.js b/docs/src/Extending.js → site/_src/Extending.js
diff --git a/docs/src/Footer.js → site/_src/Footer.js b/docs/src/Footer.js → site/_src/Footer.js
diff --git a/docs/src/GettingStarted.js → site/_src/GettingStarted.js b/docs/src/GettingStarted.js → site/_src/GettingStarted.js
diff --git a/docs/src/GridSystem.js → site/_src/GridSystem.js b/docs/src/GridSystem.js → site/_src/GridSystem.js
diff --git a/docs/src/Head.js → site/_src/Head.js b/docs/src/Head.js → site/_src/Head.js
diff --git a/docs/src/Home.js → site/_src/Home.js b/docs/src/Home.js → site/_src/Home.js
diff --git a/docs/src/Live.js → site/_src/Live.js b/docs/src/Live.js → site/_src/Live.js
diff --git a/docs/src/Markdown.js → site/_src/Markdown.js b/docs/src/Markdown.js → site/_src/Markdown.js
diff --git a/docs/src/NavBar.js → site/_src/NavBar.js b/docs/src/NavBar.js → site/_src/NavBar.js
diff --git a/docs/src/PageTitle.js → site/_src/PageTitle.js b/docs/src/PageTitle.js → site/_src/PageTitle.js
diff --git a/docs/src/Pagination.js → site/_src/Pagination.js b/docs/src/Pagination.js → site/_src/Pagination.js
diff --git a/docs/src/Preview.js → site/_src/Preview.js b/docs/src/Preview.js → site/_src/Preview.js
diff --git a/docs/src/PropsView.js → site/_src/PropsView.js b/docs/src/PropsView.js → site/_src/PropsView.js
diff --git a/docs/src/Scripts.js → site/_src/Scripts.js b/docs/src/Scripts.js → site/_src/Scripts.js
diff --git a/docs/src/ScrollTop.js → site/_src/ScrollTop.js b/docs/src/ScrollTop.js → site/_src/ScrollTop.js
diff --git a/docs/src/ServerSide.js → site/_src/ServerSide.js b/docs/src/ServerSide.js → site/_src/ServerSide.js
diff --git a/docs/src/Sidebar.js → site/_src/Sidebar.js b/docs/src/Sidebar.js → site/_src/Sidebar.js
diff --git a/docs/src/Theming.js → site/_src/Theming.js b/docs/src/Theming.js → site/_src/Theming.js
diff --git a/docs/src/examples/Absolute.jsx → site/_src/examples/Absolute.jsx b/docs/src/examples/Absolute.jsx → site/_src/examples/Absolute.jsx
diff --git a/docs/src/examples/Arrow.jsx → site/_src/examples/Arrow.jsx b/docs/src/examples/Arrow.jsx → site/_src/examples/Arrow.jsx
diff --git a/docs/src/examples/Avatar.jsx → site/_src/examples/Avatar.jsx b/docs/src/examples/Avatar.jsx → site/_src/examples/Avatar.jsx
diff --git a/docs/src/examples/BackgroundImage.jsx → site/_src/examples/BackgroundImage.jsx b/docs/src/examples/BackgroundImage.jsx → site/_src/examples/BackgroundImage.jsx
diff --git a/docs/src/examples/Badge.jsx → site/_src/examples/Badge.jsx b/docs/src/examples/Badge.jsx → site/_src/examples/Badge.jsx
diff --git a/docs/src/examples/Banner.jsx → site/_src/examples/Banner.jsx b/docs/src/examples/Banner.jsx → site/_src/examples/Banner.jsx
diff --git a/docs/src/examples/BlockLink.jsx → site/_src/examples/BlockLink.jsx b/docs/src/examples/BlockLink.jsx → site/_src/examples/BlockLink.jsx
diff --git a/docs/src/examples/Blockquote.jsx → site/_src/examples/Blockquote.jsx b/docs/src/examples/Blockquote.jsx → site/_src/examples/Blockquote.jsx
diff --git a/docs/src/examples/Border.jsx → site/_src/examples/Border.jsx b/docs/src/examples/Border.jsx → site/_src/examples/Border.jsx
diff --git a/docs/src/examples/Button.jsx → site/_src/examples/Button.jsx b/docs/src/examples/Button.jsx → site/_src/examples/Button.jsx
diff --git a/docs/src/examples/ButtonCircle.jsx → site/_src/examples/ButtonCircle.jsx b/docs/src/examples/ButtonCircle.jsx → site/_src/examples/ButtonCircle.jsx
diff --git a/docs/src/examples/ButtonOutline.jsx → site/_src/examples/ButtonOutline.jsx b/docs/src/examples/ButtonOutline.jsx → site/_src/examples/ButtonOutline.jsx
diff --git a/docs/src/examples/ButtonTransparent.jsx → site/_src/examples/ButtonTransparent.jsx b/docs/src/examples/ButtonTransparent.jsx → site/_src/examples/ButtonTransparent.jsx
diff --git a/docs/src/examples/Card.jsx → site/_src/examples/Card.jsx b/docs/src/examples/Card.jsx → site/_src/examples/Card.jsx
diff --git a/docs/src/examples/Carousel.jsx → site/_src/examples/Carousel.jsx b/docs/src/examples/Carousel.jsx → site/_src/examples/Carousel.jsx
diff --git a/docs/src/examples/Checkbox.jsx → site/_src/examples/Checkbox.jsx b/docs/src/examples/Checkbox.jsx → site/_src/examples/Checkbox.jsx
diff --git a/docs/src/examples/Circle.jsx → site/_src/examples/Circle.jsx b/docs/src/examples/Circle.jsx → site/_src/examples/Circle.jsx
diff --git a/docs/src/examples/Close.jsx → site/_src/examples/Close.jsx b/docs/src/examples/Close.jsx → site/_src/examples/Close.jsx
diff --git a/docs/src/examples/Code.jsx → site/_src/examples/Code.jsx b/docs/src/examples/Code.jsx → site/_src/examples/Code.jsx
diff --git a/docs/src/examples/Column.jsx → site/_src/examples/Column.jsx b/docs/src/examples/Column.jsx → site/_src/examples/Column.jsx
diff --git a/docs/src/examples/Container.jsx → site/_src/examples/Container.jsx b/docs/src/examples/Container.jsx → site/_src/examples/Container.jsx
diff --git a/docs/src/examples/Divider.jsx → site/_src/examples/Divider.jsx b/docs/src/examples/Divider.jsx → site/_src/examples/Divider.jsx
diff --git a/docs/src/examples/Donut.jsx → site/_src/examples/Donut.jsx b/docs/src/examples/Donut.jsx → site/_src/examples/Donut.jsx
diff --git a/docs/src/examples/Dot.jsx → site/_src/examples/Dot.jsx b/docs/src/examples/Dot.jsx → site/_src/examples/Dot.jsx
diff --git a/docs/src/examples/Drawer.jsx → site/_src/examples/Drawer.jsx b/docs/src/examples/Drawer.jsx → site/_src/examples/Drawer.jsx
diff --git a/docs/src/examples/Embed.jsx → site/_src/examples/Embed.jsx b/docs/src/examples/Embed.jsx → site/_src/examples/Embed.jsx
diff --git a/docs/src/examples/Fixed.jsx → site/_src/examples/Fixed.jsx b/docs/src/examples/Fixed.jsx → site/_src/examples/Fixed.jsx
diff --git a/docs/src/examples/Group.jsx → site/_src/examples/Group.jsx b/docs/src/examples/Group.jsx → site/_src/examples/Group.jsx
diff --git a/docs/src/examples/Heading.jsx → site/_src/examples/Heading.jsx b/docs/src/examples/Heading.jsx → site/_src/examples/Heading.jsx
diff --git a/docs/src/examples/Image.jsx → site/_src/examples/Image.jsx b/docs/src/examples/Image.jsx → site/_src/examples/Image.jsx
diff --git a/docs/src/examples/Input.jsx → site/_src/examples/Input.jsx b/docs/src/examples/Input.jsx → site/_src/examples/Input.jsx
diff --git a/docs/src/examples/Label.jsx → site/_src/examples/Label.jsx b/docs/src/examples/Label.jsx → site/_src/examples/Label.jsx
diff --git a/docs/src/examples/Lead.jsx → site/_src/examples/Lead.jsx b/docs/src/examples/Lead.jsx → site/_src/examples/Lead.jsx
diff --git a/docs/src/examples/Link.jsx → site/_src/examples/Link.jsx b/docs/src/examples/Link.jsx → site/_src/examples/Link.jsx
diff --git a/docs/src/examples/Measure.jsx → site/_src/examples/Measure.jsx b/docs/src/examples/Measure.jsx → site/_src/examples/Measure.jsx
diff --git a/docs/src/examples/Message.jsx → site/_src/examples/Message.jsx b/docs/src/examples/Message.jsx → site/_src/examples/Message.jsx
diff --git a/docs/src/examples/Modal.jsx → site/_src/examples/Modal.jsx b/docs/src/examples/Modal.jsx → site/_src/examples/Modal.jsx
diff --git a/docs/src/examples/NavLink.jsx → site/_src/examples/NavLink.jsx b/docs/src/examples/NavLink.jsx → site/_src/examples/NavLink.jsx
diff --git a/docs/src/examples/Panel.jsx → site/_src/examples/Panel.jsx b/docs/src/examples/Panel.jsx → site/_src/examples/Panel.jsx
diff --git a/docs/src/examples/PanelFooter.jsx → site/_src/examples/PanelFooter.jsx b/docs/src/examples/PanelFooter.jsx → site/_src/examples/PanelFooter.jsx
diff --git a/docs/src/examples/PanelHeader.jsx → site/_src/examples/PanelHeader.jsx b/docs/src/examples/PanelHeader.jsx → site/_src/examples/PanelHeader.jsx
diff --git a/docs/src/examples/Pre.jsx → site/_src/examples/Pre.jsx b/docs/src/examples/Pre.jsx → site/_src/examples/Pre.jsx
diff --git a/docs/src/examples/Progress.jsx → site/_src/examples/Progress.jsx b/docs/src/examples/Progress.jsx → site/_src/examples/Progress.jsx
diff --git a/docs/src/examples/Radio.jsx → site/_src/examples/Radio.jsx b/docs/src/examples/Radio.jsx → site/_src/examples/Radio.jsx
diff --git a/docs/src/examples/Relative.jsx → site/_src/examples/Relative.jsx b/docs/src/examples/Relative.jsx → site/_src/examples/Relative.jsx
diff --git a/docs/src/examples/Row.jsx → site/_src/examples/Row.jsx b/docs/src/examples/Row.jsx → site/_src/examples/Row.jsx
diff --git a/docs/src/examples/Samp.jsx → site/_src/examples/Samp.jsx b/docs/src/examples/Samp.jsx → site/_src/examples/Samp.jsx
diff --git a/docs/src/examples/Select.jsx → site/_src/examples/Select.jsx b/docs/src/examples/Select.jsx → site/_src/examples/Select.jsx
diff --git a/docs/src/examples/Slider.jsx → site/_src/examples/Slider.jsx b/docs/src/examples/Slider.jsx → site/_src/examples/Slider.jsx
diff --git a/docs/src/examples/Small.jsx → site/_src/examples/Small.jsx b/docs/src/examples/Small.jsx → site/_src/examples/Small.jsx
diff --git a/docs/src/examples/Sticky.jsx → site/_src/examples/Sticky.jsx b/docs/src/examples/Sticky.jsx → site/_src/examples/Sticky.jsx
diff --git a/docs/src/examples/Subhead.jsx → site/_src/examples/Subhead.jsx b/docs/src/examples/Subhead.jsx → site/_src/examples/Subhead.jsx
diff --git a/docs/src/examples/Switch.jsx → site/_src/examples/Switch.jsx b/docs/src/examples/Switch.jsx → site/_src/examples/Switch.jsx
diff --git a/docs/src/examples/Tab.jsx → site/_src/examples/Tab.jsx b/docs/src/examples/Tab.jsx → site/_src/examples/Tab.jsx
diff --git a/docs/src/examples/Tabs.jsx → site/_src/examples/Tabs.jsx b/docs/src/examples/Tabs.jsx → site/_src/examples/Tabs.jsx
diff --git a/docs/src/examples/Text.jsx → site/_src/examples/Text.jsx b/docs/src/examples/Text.jsx → site/_src/examples/Text.jsx
diff --git a/docs/src/examples/Textarea.jsx → site/_src/examples/Textarea.jsx b/docs/src/examples/Textarea.jsx → site/_src/examples/Textarea.jsx
diff --git a/docs/src/examples/Toolbar.jsx → site/_src/examples/Toolbar.jsx b/docs/src/examples/Toolbar.jsx → site/_src/examples/Toolbar.jsx
diff --git a/docs/src/examples/Tooltip.jsx → site/_src/examples/Tooltip.jsx b/docs/src/examples/Tooltip.jsx → site/_src/examples/Tooltip.jsx
diff --git a/docs/src/examples/Truncate.jsx → site/_src/examples/Truncate.jsx b/docs/src/examples/Truncate.jsx → site/_src/examples/Truncate.jsx
diff --git a/docs/src/examples/index.js → site/_src/examples/index.js b/docs/src/examples/index.js → site/_src/examples/index.js
diff --git a/docs/src/updaters.js → site/_src/updaters.js b/docs/src/updaters.js → site/_src/updaters.js
diff --git a/site/package.json b/site/package.json
@@ -0,0 +1,48 @@
+{
+  "private": true,
+  "scripts": {
+    "start": "x0 dev pages -op 9000",
+    "build": "x0 build pages",
+    "card": "repng src/Card.js -w 1024 -h 512 -d dist -f card.png"
+  },
+  "devDependencies": {
+    "@compositor/kit": "^1.0.35",
+    "@compositor/x0": "^5.0.1",
+    "rebass": "^2.0.0-2",
+    "refunk": "^3.0.1",
+    "repng": "^3.0.0",
+    "styled-components": "^3.3.0"
+  },
+  "x0": {
+    "title": "Rebass",
+    "basename": "/rebass",
+    "meta": [
+      {
+        "name": "twitter:card",
+        "content": "summary_large_image"
+      },
+      {
+        "name": "twitter:site",
+        "content": "@jxnblk"
+      },
+      {
+        "name": "twitter:title",
+        "content": "Rebass"
+      },
+      {
+        "name": "twitter:description",
+        "content": "React UI component library & design system, built with styled-components and styled-system"
+      },
+      {
+        "name": "twitter:image",
+        "content": "https://jxnblk.com/rebass/card.png"
+      }
+    ],
+    "links": [
+      {
+        "rel": "stylesheet",
+        "href": "https://fonts.googleapis.com/css?family=Roboto+Mono"
+      }
+    ]
+  }
+}
diff --git a/site/pages/_app.js b/site/pages/_app.js
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Provider as RebassProvider } from 'rebass'
+import { Provider as RefunkProvider } from 'refunk'
+import pkg from 'rebass/package.json'
+
+export default ({ render }) =>
+  <RefunkProvider pkg={pkg}>
+    <RebassProvider>
+      {render()}
+    </RebassProvider>
+  </RefunkProvider>
diff --git a/site/pages/index.js b/site/pages/index.js
@@ -0,0 +1,8 @@
+import React from 'react'
+
+import Hero from '../src/Hero'
+
+export default () =>
+  <React.Fragment>
+    <Hero />
+  </React.Fragment>
diff --git a/docs/pages/demo.js → site/pages/library.js b/docs/pages/demo.js → site/pages/library.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import connect from 'refunk'
+import { connect } from 'refunk'
 import {
   Provider as KitProvider,
   Library,

diff --git a/docs/src/Card.js → site/src/Card.js b/docs/src/Card.js → site/src/Card.js
diff --git a/docs/src/Hero.js → site/src/Hero.js b/docs/src/Hero.js → site/src/Hero.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import connect from 'refunk'
+import { connect } from 'refunk'
 import styled from 'styled-components'
 import { Link } from 'react-router-dom'
 import {
@@ -18,28 +18,24 @@ import {
 import Logo from './Logo'
 // import Tweet from './Tweet'
 
-const Root = styled(Banner)`
-  background-attachment: fixed;
-`
-
-const PrimaryButton = styled(Button)`
-  transition: background-color .2s ease-out;
-  &:hover {
-    background-color: magenta;
+const PrimaryButton = styled(Button)({
+  transition: 'background-color .2s ease-out',
+  '&:hover': {
+    backgroundColor: 'magenta'
   }
-`
-const SecondaryButton = ButtonOutline.extend`
-  transition: .2s ease-out;
-  transition-property: color, box-shadow;
-  &:hover {
-    color: magenta;
-    background-color: transparent;
-    box-shadow: inset 0 0 0 2px magenta;
+})
+
+const SecondaryButton = styled(ButtonOutline)({
+  transition: '.2s ease-out',
+  transitionProperty: 'color, box-shadow',
+  '&:hover': {
+    color: 'magenta',
+    backgroundColor: 'transparent',
+    boxShadow: 'inset 0 0 0 2px magenta'
   }
-`
+})
 
-const Title = Heading.extend`
-`
+const Title = styled(Heading)([])
 
 const Header = connect(props => (
   <Banner
@@ -65,12 +61,12 @@ const Header = connect(props => (
           Rebass
         </Title>
         <Pre mb={2}>v{props.pkg.version}</Pre>
-        <Lead fontWeight='bold'>
+        <Lead mb={3} fontWeight='bold'>
           {props.pkg.description}
         </Lead>
         <Flex
           mx={-3}
-          mb={3}
+          mb={4}
           width={1}
           flexWrap='wrap'
           alignItems='center'>
@@ -95,7 +91,7 @@ const Header = connect(props => (
             mx={3}
             my={3}
           />
-          <Pre mx={3}>npm i rebass@next</Pre>
+          <Pre color='magenta' mx={3} my={3}>npm i rebass@next</Pre>
         </Flex>
         <Flex
           mt={3}

diff --git a/docs/src/Logo.js → site/src/Logo.js b/docs/src/Logo.js → site/src/Logo.js
@@ -22,18 +22,25 @@ const spin2 = keyframes`
   100% { transform: rotate3d(1, 0, 1, 360deg) }
 `
 
+const fade1 = keyframes`
+  0% { stroke: magenta }
+  33% { stroke: cyan }
+  66% { stroke: yellow }
+  100% { stroke: magenta }
+`
+
 const Electron1 = styled.circle`
   transform-origin: 50% 50%;
-  animation-name: ${spin1};
-  animation-duration: 3s;
+  animation-name: ${spin1}, ${fade1};
+  animation-duration: 3s, 5s;
   animation-timing-function: linear;
   animation-iteration-count: infinite;
 `
 
 const Electron2 = styled.circle`
   transform-origin: 50% 50%;
-  animation-name: ${spin2};
-  animation-duration: 3s;
+  animation-name: ${spin2}, ${fade1};
+  animation-duration: 3s, 6s;
   animation-timing-function: linear;
   animation-iteration-count: infinite;
 `
@@ -100,8 +107,9 @@ const Logo = props => {
         cx={32}
         cy={32}
         r={30}
-        strokeWidth={4}
+        strokeWidth={1}
         vectorEffect='non-scaling-stroke'
+        opacity={1/2}
       />
       {electrons}
     </Svg>

diff --git a/docs/src/Tweet.js → site/src/Tweet.js b/docs/src/Tweet.js → site/src/Tweet.js
diff --git a/docs/src/constants.js → site/src/constants.js b/docs/src/constants.js → site/src/constants.js