LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Packages Projects Releases 4 Wiki Activity

added customization guide

Browse source
This commit is contained in:
bill bittner 2018-08-09 16:12:02 -07:00
parent 0637f325d2
commit 49b834036e
2 changed files with 28 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -45,6 +45,10 @@ $ npm run start
#### view in browser
* visit [http://localhost:3000](http://localhost:3000) in your browser
#### customize your app
check out the [customization guide](https://github.com/lbryio/spee.ch/blob/readme-update/customize.md) to change your app's appearance and components
#### (optional) add custom components and update the styles

84
customize.md
View file

@ -1,73 +1,37 @@
# Configure your own spee.ch
## * Change some **css**
_note:this guide assumes you have done the []quickstart](https://github.com/lbryio/spee.ch/blob/readme-update/README.md) or [fullstart](https://github.com/lbryio/spee.ch/blob/readme-update/fullstart.md) guide and have a working spee.ch server_
* Navigate to *public/assets/css* folder and open **general.css** for editing.
`$ cd public/assets/css`
`$ nano general.css`
## Custom Components
The components used by spee.ch are taken from the `client/` folder, but you can override those components by defining your own in the `client_custom/` folder.
### Add a new custom Logo component.
* Add `background-color: yellow;` to the `html, body` declaration.
```css
html, body {
margin: 0;
padding: 0;
height: 100%;
word-wrap: break-word;
background-color: yellow;
}
To create your own custom component to override the defaults, create a folder and an `index.jsx` file for the component in the `client_custom/src/components/` folder.
```
$ cd client_custom/src/components/
$ mkdir Logo
$ cd Logo
$ touch index.jsx
$ nano index.jsx
```
*
* Restart the server, and you should see your site with a yellow background!
`$ npm run start:dev`
* Update the custom **About** Page component
* Most of the components used by [www.spee.ch](http://www.spee.ch) are taken from the spee.ch-components repo, but you can override those components by defining your own locally. As part of the [www.spee.ch](http://www.spee.ch) repo, a local custom **About** page is already included. You can edit the contents of this component in the *src/views/pages/* folder.
`$ cd src/views/pages/AboutPage`
`$ nano index.jsx`
Create a simple react component in `index.jsx`.
* Change the text, or edit the **HTML** however you like.
* Restart the server, and you should see your site with an updated **About** page!
`$ npm run start:dev`
* Add a new custom Logo component.
* To create your own custom component to override the defaults, create a folder and **index.jsx** file for the component in the *src/views/components* folder.
`$ cd src/views/components`
`$ mkdir Logo`
`$ cd Logo`
`$ touch index.jsx`
`$ nano index.jsx`
* Create a simple react component in **index.jsx**.
```js
```
import React from 'react';
function Logo () {
return (
<p>My Logo</p>
);
return (
<p>My Logo</p>
);
};
export default Logo;
```
*
* Restart the server, and you should see your site with a new Logo in the top left corner!
`$ npm run start:dev`
**__4. Bonus:__**
* [Install PM2](http://pm2.keymetrics.io/docs/usage/quick-start/) and run your server with PM2.
* Install PM2.
`$ sudo npm i -g pm2`
* From inside your project’s folder, start your server with PM2.
`$ pm2 start server.js`
* Visit your site and see if it is running!
* Sync Your Spee.ch Instance with the full **Blockchain**
* Install **lbrycrdd**.
* Install **lbry-decoder**.
* Start **lbry-decoder**.
* Install & run [spee.ch-sync](https://github.com/billbitt/spee.ch-sync)
* Configure **spee.ch-sync**.
Restart the server, and you should see your site with a new Logo in the top left corner!
```
$ npm run start
```