3b8b2c3f2a
no issue - Allows development mode to open account pages with dummy member for testing |
||
---|---|---|
.. | ||
.github/workflows | ||
public | ||
scripts | ||
src | ||
.editorconfig | ||
.env | ||
.env.development.local.example | ||
.gitignore | ||
LICENSE | ||
package.json | ||
README.md | ||
renovate.json | ||
webpack.config.js | ||
yarn.lock |
Members.js
Drop-in script to make the bulk of members work on any theme.
Usage
Add below script in your theme's default.hbs
just before the end of body tag OR in the code injection footer in Ghost Admin.
<script type="text/javascript" src="https://unpkg.com/@tryghost/members-js@latest/umd/members.min.js"></script>
Custom trigger button
By default, the script adds a default floating trigger button on the bottom right of your page which is used to trigger the popup on screen.
Its possible to override the default trigger button with your own by adding data attribute data-portal
to any HTML tag on page, which will hide the default trigger and allow controlling the popup state by clicking on this element.
The script also adds custom class names to this element for open and close state of popup - gh-members-popup-open
and gh-members-popup-close
, allowing devs to update its UI based on popup state.
Basic Setup
- Clone this repository:
git@github.com:TryGhost/members.js.git
- Change into the new directory and install the dependencies:
cd members.js
yarn
Configure for local development
Only useful for active UI development without publishing a version on unpkg. Always use the unpkg link for testing latest released members.js.
In this repo(Members.js):
- Run
yarn build
to create the minified bundle with your changes atumd/members.min.js
In your theme(Ex. Lyra):
- Copy
members.min.js
from above and paste it in your theme atassets/built/members.min.js
- Add below code in your theme's
default.hbs
just before end of body tag
<script src="{{asset "built/members.min.js"}}"></script>
Available Scripts
In the project directory, you can also run:
yarn start
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
yarn build
Creates the production single minified bundle for external use in umd/members.min.js
.
yarn test
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Publish
Run yarn ship
to publish new version of script.
yarn ship
is an alias for npm publish
- Builds the script with latest code using
yarn build
(prePublish) - Publishes package on npm as
@tryghost/members-js
and creates an unpkg link for script at https://unpkg.com/@tryghost/members-js@VERSION
Learn More
This project was bootstrapped with Create React App. You can learn more in the Create React App documentation.
Copyright & License
Copyright (c) 2020 Ghost Foundation - Released under the MIT license.