react-styled-ghp

GitHub Pages component for React built with styled-components < 💅>

Install

npm install --save react-styled-ghp
yarn add react-styled-ghp

Basic Usage

• Import the GhPage component from package
• Wrap the demo conent inside GhPage
• Pass the in the desired options

import React, { Component } from 'react';
import GhPage from 'react-styled-ghp';

class Example extends Component {
  render () {
    const options = {
      logo: './path/to/logo',
      username: 'username',
      github: './url/of/repo',
      npm: './url/of/module',
      title: 'title',
      description: 'description',
      readMe: './path/to/readMe',
    }
    return (
      <GhPage {...options}>
        <div>Demo content goes here</div>
      </GhPage>
    )
  }
}

Partial Usage

If you only want to render parts of the GhPage, you can import the indiviual components (Header, Demo, Layout). Make sure to pass the layout object to all of the components you wish to render.

import { Header, Demo }  from 'react-styled-ghp';

...
return (
  <div>
    <Header {...options} />
    <Demo {...options}>
      <div>Demo content goes here</div>
    </Demo>
  </div>
);
...

Features

• Simple setup
• Clean & responsive design
• Readme w/ syntax highlighting
• Easy to use BEM class hooks

Examples

• Demo - https://alexcasche.github.io/react-styled-ghp/

Props

The GhPage component accepts the following props.

| Prop | Type | Default | Description: Options | |-------------------|-------------|------------------|----------------------------| | logo | string | null | Path to logo: url | | username | string | null | Github username | | github | string | null | Github repo: url | | npm | string | null | NPM pacakge: url | | title | string | null | Page title: [base]-subname | | description | string | null | Page decription | | readme | string | null | Path to readme: url | | theme | object | see below | Theme object: see below |

Note: The page title text is colored using the format [hoverText]-lightText. For example, the current page uses: [react]-styled-ghp

Theme

The theme object can be used to customize the look of the component, with the following values.

| Prop | Type | Default | |-------------------|-------------|------------------| | headerBG | string | #20232A | | bannerBG | string | #292C34 | | pageBG | string | #484C59 | | fontSans | string | inherit | | headerColor | string | #DDDDDD | | bannerColor | string | #DDDDDD | | pageColor | string | #20232A | | hoverColor | string | #34f96E |

There are two ways to use the theme object.

1. Pass the theme to the styled-components ThemeProvider (recommended)

import { ThemeProvider } from 'styled-components';

...
return (
  <ThemeProvider theme={theme}>
    <GhPage>
      <div>Demo content goes here</div>
    </GhPage>
  </ThemeProvider>
);
...

2. Pass the theme directly to the GhPage component (not recommended)

...
return (
  <GhPage theme={theme} />
);
...

Classes

For more control over the styles, you can use the following BEM classes.

| Class | Description | |--------------------------|----------------------| | .ghp__page | Page wrapper | | .ghp__header | Header section | | .ghp__username | Header username | | .ghp__logo | Header logo | | .ghp__link | Header link | | .ghp__demo | Demo section | | .ghp__title | Demo title | | .ghp__description | Demo description | | .ghp__readme | Readme section | | .ghp__markdown | Readme markdown |

Development

Follow these steps to setup a local development environment. Use yarn or npm - not both.

1. Clone the repo from Github

git clone https://github.com/alexcasche/react-styled-ghp

2. Setup project & start rollup watch

npm install && npm start
yarn install && yarn add

3. Setup react app & start dev server

cd example
npm install && npm start
yarn install && yarn start

Shoutouts

• Setup: create-react-library 🙌

License

MIT © alexcasche