Updated Readme

This commit is contained in:
Rish 2020-04-20 22:12:20 +05:30
parent e59e8186bd
commit 88d8008bcf

View File

@ -1,16 +1,61 @@
# Members.js # Members.js
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). Drop-in script to make the bulk of members work on any theme
## Basic Setup
1. Clone this repository:
```shell
git@github.com:TryGhost/members.js.git
```
2. Change into the new directory and install the dependencies:
```shell
cd members.js
yarn
```
## Configure for local development ## Configure for local development
- Copy `.env.development.local.example` to `.env.development.local` #### In your local Ghost setup:
- Update the values to match your local dev version of Ghost
- Add `rish-upstream` as remote on your local Ghost repo -
```
git remote add rish-upstream git@github.com:rishabhgrg/Ghost.git
```
- Fetch and checkout membersjs branch from the remote -
```
git fetch rish-upstream membersjs && git checkout membersjs
```
- Ensure your local Ghost is running - Ensure your local Ghost is running
### In this repo(Members.js):
- Run `yarn build` to create the minified bundle with your changes at `umd/members.min.js`
#### In your theme(Ex. Lyra):
- Copy `members.min.js` from above and paste it in your theme at `assets/built/members.min.js`
- Add below code in your theme's `default.hbs` just above `{{{block "scripts"}}}` to add and initialize members script
```html
<script src="{{asset "built/members.min.js"}}"></script>
<script>
// Pass Admin URL
var data = {
adminUrl: window.location.origin + "/ghost",
};
// Initialize members.js
window.GhostMembers.initMembersJS(data);
</script>
```
## Available Scripts ## Available Scripts
In the project directory, you can run: In the project directory, you can also run:
### `yarn start` ### `yarn start`
@ -20,30 +65,31 @@ Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.<br /> The page will reload if you make edits.<br />
You will also see any lint errors in the console. You will also see any lint errors in the console.
Note: You'll need to configure the local Admin API url for script initialization.
- Copy `.env.development.local.example` to `.env.development.local`
- Update the values to match your local dev version of Ghost
### `yarn build`
Creates the production single minified bundle for external use in `umd/members.min.js`. <br />
### `yarn test` ### `yarn test`
Launches the test runner in the interactive watch mode.<br /> Launches the test runner in the interactive watch mode.<br />
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `yarn build`
Builds the app for production to the `build` folder.<br /> ## Publish
The build is minified and the filenames include the hashes.<br />
Also creates a standalone single minified bundle for external use in `dist/build/static/js`.<br /> Before shipping, please ensure the intended version is updated in `package.json`.
### `yarn eject` - Run `npm publish --access public` to ship the new version to npm and unpkg.
- Builds the script with latest code using `yarn build` (prePublish)
**Note: this is a one-way operation. Once you `eject`, you cant go back!** - Publishes package on npm as `@tryghost/members-js` and creates an unpkg link for script at https://unpkg.com/@tryghost/members-js@VERSION
If you arent satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point youre on your own.
You dont have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldnt feel obligated to use this feature. However we understand that this tool wouldnt be useful if you couldnt customize it when you are ready for it.
## Learn More ## Learn More
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
# Copyright & License # Copyright & License