From a98a926b700ffccee47a139df95026501ed66974 Mon Sep 17 00:00:00 2001 From: Enrique Benitez Date: Mon, 5 Mar 2018 16:05:19 -0600 Subject: [PATCH] Start from scratch --- .eslintrc | 22 +- .gitignore | 2 +- components/Error.jsx | 24 - components/Post.jsx | 24 - components/PostLink.jsx | 25 - components/styled/index.js | 314 -- config.toml | 4 - gatsby-config.js | 6 + html.jsx | 40 - package.json | 35 +- pages/404.md | 7 - pages/_template.jsx | 15 - pages/about.jsx | 47 - .../articles/2017-04-01-pirate-ipsum/index.md | 13 - .../articles/2017-04-02-alien-ipsum/index.md | 11 - pages/blog.jsx | 57 - pages/components.jsx | 73 - pages/index.jsx | 29 - src/layouts/index.js | 35 + src/pages/index.js | 13 + src/pages/page-2.js | 12 + utils/hedron.js | 11 - wrappers/md.jsx | 40 - yarn.lock | 4638 ++++++++++------- 24 files changed, 2735 insertions(+), 2762 deletions(-) delete mode 100644 components/Error.jsx delete mode 100644 components/Post.jsx delete mode 100644 components/PostLink.jsx delete mode 100644 components/styled/index.js delete mode 100644 config.toml create mode 100644 gatsby-config.js delete mode 100644 html.jsx delete mode 100644 pages/404.md delete mode 100644 pages/_template.jsx delete mode 100644 pages/about.jsx delete mode 100644 pages/articles/2017-04-01-pirate-ipsum/index.md delete mode 100644 pages/articles/2017-04-02-alien-ipsum/index.md delete mode 100644 pages/blog.jsx delete mode 100644 pages/components.jsx delete mode 100644 pages/index.jsx create mode 100644 src/layouts/index.js create mode 100644 src/pages/index.js create mode 100644 src/pages/page-2.js delete mode 100644 utils/hedron.js delete mode 100644 wrappers/md.jsx diff --git a/.eslintrc b/.eslintrc index 1a6a85a..186a840 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,22 +1,16 @@ { - "parser": "babel-eslint", - "plugins": [ - "react" - ], + "extends": "standard", "ecmaFeatures": { - "jsx": true + "jsx": true, + "modules": true }, + "rules": { + "no-unused-vars": 0, + "no-useless-return": 0 + }, + "plugins": ["react"], "env": { - "es6": true, "browser": true, "node": true - }, - "rules": { - "quotes": ["error", "single"], - "jsx-quotes": ["error", "prefer-double"], - "newline-before-return": "error", - "object-curly-spacing": ["error", "always"], - "no-unused-vars": "error", - "react/jsx-uses-vars": 1 } } diff --git a/.gitignore b/.gitignore index 9f9ac17..6a1ba21 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,5 @@ .DS_Store node_modules/ public/ +.cache/ *.log -.gatsby-context.js diff --git a/components/Error.jsx b/components/Error.jsx deleted file mode 100644 index 0c16fc4..0000000 --- a/components/Error.jsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { prefixLink } from 'gatsby-helpers'; -import { ErrorTitle, ErrorBody, StyledLink, Row, Column } from './styled/'; - -export default class Error extends React.Component { - render() { - const { route } = this.props; - const { body } = route.page.data; - - return ( - - - Yikes! - - - -
- back home - - - - ); - } -} diff --git a/components/Post.jsx b/components/Post.jsx deleted file mode 100644 index 5e2fabe..0000000 --- a/components/Post.jsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import moment from 'moment'; -import { PostTitle, PostBody, PostDate, Row, Column } from './styled/'; - -export default class Post extends React.Component { - render() { - const { route } = this.props; - const { title, body, date } = route.page.data; - - return ( - - - {title} - {`Published on ${moment(date).format('MMMM Do YYYY')}`} - - - -
- - - - ); - } -} diff --git a/components/PostLink.jsx b/components/PostLink.jsx deleted file mode 100644 index 4933a7e..0000000 --- a/components/PostLink.jsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import { - Column, - PostLinkContainer, - PostLinkTitle, - PostLinkDescription, - StyledLink -} from './styled/'; - -export default class PostLink extends React.Component { - render() { - const { title, description, path } = this.props.postData; - - return ( - - - - {title} - - {description} - - - ); - } -} diff --git a/components/styled/index.js b/components/styled/index.js deleted file mode 100644 index fdfa451..0000000 --- a/components/styled/index.js +++ /dev/null @@ -1,314 +0,0 @@ -import styled, { injectGlobal, css } from 'styled-components'; -import { darken, lighten } from 'polished'; -import { Link } from 'react-router'; -import { compute, ifDefined } from '../../utils/hedron'; -import { - Page as HedronPage, - Row as HedronRow, - Column as HedronColumn -} from 'hedron'; - -/* - * Global Styles - */ -injectGlobal` - @import url('https://fonts.googleapis.com/css?family=Slabo+27px'); - - body { - font-family: 'Slabo 27px', serif; - color: palevioletred; - background: papayawhip; - text-align: center; - } - - a { - color: palevioletred; - - &:hover, &:focus, &:visited { - color: palevioletred; - } - } -`; - -/* - * Media Queries - */ -const media = { - tablet: (...args) => css` - @media (min-width: 420px) { - ${ css(...args) } - } - ` -} - -/* - * Grid - */ -export const Page = styled(HedronPage)` - ${props => - props.fluid - ? 'width: 100%;' - : ` - margin: 0 auto; - max-width: 100%; - ${props.width - ? `width: ${props.width};` - : 'width: 960px;' - } - ` - } -`; - -export const Row = styled(HedronRow)` - display: flex; - flex-direction: row; - flex-wrap: wrap; - ${ifDefined('alignContent', 'align-content')} - ${ifDefined('alignItems', 'align-items')} - ${ifDefined('alignSelf', 'align-self')} - ${ifDefined('justifyContent', 'justify-content')} - ${ifDefined('order')} -`; - -export const Column = styled(HedronColumn)` - display: block; - ${props => props.debug - ? `background-color: rgba(50, 50, 255, .1); - outline: 1px solid #fff;` - : '' - } - box-sizing: border-box; - padding: ${props => props.fluid ? '0' : '20px'}; - width: 100%; - ${compute('xs')} - ${compute('sm')} - ${compute('md')} - ${compute('lg')} -`; - - -/* - * Wrapper - */ -export const Wrapper = styled.div` - display: flex; - flex-direction: column; - align-items: center; - margin-top: 12.5%; -`; - -/* - * Title - */ - export const Title = styled.h1` - font-size: 30px; - text-decoration: underline; - `; - -/* - * Subtitle - */ -export const Subtitle = styled.h2` - font-size: 20px; - margin-top: 5px; - margin-bottom: 20px; -`; - -/* - * StyledLink - */ -export const StyledLink = styled(Link)` - color: palevioletred; - font-size: 18px; - text-decoration: ${props => props.underline ? 'underline' : 'none'}; - - &:hover { - text-decoration: underline; - } -`; - -/* - * StyledAnchor - */ - export const StyledAnchor = styled.a` - color: palevioletred; - font-size: 18px; - `; - -/* - * Message - */ -export const Message = styled.h2` - font-size: 27px; - text-decoration: underline; -`; - -/* - * Button - */ -export const Button = styled.button` - padding: ${props => props.large ? '16px 48px' : '8px 24px'}; - color: white; - font-size: 16px; - font-weight: 600; - background-color: black; - border: 0; - cursor: pointer; -`; - -/* - * DefaultButton - */ -export const DefaultButton = styled(Button)` - background-color: lightblue; - &:hover { - background: ${darken(0.1, '#add8e6')}; - } -`; - -/* - * PrimaryButton - */ -export const PrimaryButton = styled(Button)` - background-color: lightseagreen; - &:hover { - background: ${darken(0.1, '#20b2aa')}; - } -`; - -/* - * Success - */ -export const SuccessButton = styled(Button)` - background-color: lightgreen; - &:hover { - background: ${darken(0.1, '#90ee90')}; - } -`; - -/* - * Warning - */ -export const WarningButton = styled(Button)` - background-color: lightsalmon; - &:hover { - background: ${darken(0.1, '#ffa07a')}; - } -`; - -/* - * Danger - */ -export const DangerButton = styled(Button)` - background-color: lightcoral; - &:hover { - background: ${darken(0.1, '#f08080')}; - } -`; - -/* - * Input - */ -export const Input = styled.input` - color: ${props => props.color}; - font-size: 16px; - padding: ${props => props.large ? '16px 48px' : '8px 24px'}; - border: 2px solid ${props => props.color}; - background: transparent; -`; - -/* - * Text - */ -export const Text = styled.p` - font-size: ${props => props.fontSize || '16px'}; - ${ media.tablet` - font-size: 20px; - ` } -`; - -/* - * PostLinkContainer - */ -export const PostLinkContainer = styled(Row)` - border-bottom: 2px solid ${lighten(0.1, '#db7093')}; -`; - -/* - * PostLinkTitle - */ -export const PostLinkTitle = styled.h2` - font-size: 18px; - font-weight: 900; -`; - -/* - * PostLinkDescription - */ -export const PostLinkDescription = styled.p` - font-size: 16px; - font-weight: 400; -`; - -/* - * PostTitle - */ -export const PostTitle = styled.h1` - font-size: 30px; - text-decoration: underline; - margin-bottom: 7px; -`; - -/* - * PostBody - */ -export const PostBody = styled.div` - padding: 0px 50px; - font-size: 17px; - ${ media.tablet` - font-size: 20px; - ` } -`; - -/* - * PostDate - */ -export const PostDate = styled.span` - font-size: 13px; - font-weight: lighter; -`; - -/* - * From - */ -export const From = styled.div` - position: fixed; - bottom: 8px; - right: 8px; - font-size: 13px; - - a { - text-decoration: none; - font-weight: bolder; - } -`; - -/* - * ErrorTitle - */ -export const ErrorTitle = styled.h4` - font-size: 34px; - margin-bottom: 0; -`; - -/* - * ErrorBody - */ -export const ErrorBody = styled.div` - font-size: 18px; - - a { - display: block; - margin-top: 50px; - } -`; diff --git a/config.toml b/config.toml deleted file mode 100644 index 2905360..0000000 --- a/config.toml +++ /dev/null @@ -1,4 +0,0 @@ -siteTitle="Superstylin'" -siteDescription="A Gatsby starter with styled-components" - -linkPrefix = "/gatsby-starter-superstylin" diff --git a/gatsby-config.js b/gatsby-config.js new file mode 100644 index 0000000..b6bbd57 --- /dev/null +++ b/gatsby-config.js @@ -0,0 +1,6 @@ +module.exports = { + siteMetadata: { + title: 'Superstylin', + description: 'A Gatsby Starter with styled-components' + } +} diff --git a/html.jsx b/html.jsx deleted file mode 100644 index f116552..0000000 --- a/html.jsx +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import Helmet from 'react-helmet'; -import { prefixLink } from 'gatsby-helpers'; -import styleSheet from 'styled-components/lib/models/StyleSheet'; - -const BUILD_TIME = new Date().getTime() - -module.exports = React.createClass({ - propTypes () { - return { - body: React.PropTypes.string, - } - }, - render () { - const head = Helmet.rewind(); - - let css; - if (process.env.NODE_ENV === 'production') { - const styles = styleSheet.rules().map(rule => rule.cssText).join('\n'); - css =