Ghost/ghost/portal
2020-07-20 18:03:34 +02:00
..
.github/workflows Added basic github workflow for running tests 2020-04-10 16:42:25 +01:00
public Initialize project using Create React App 2020-03-24 18:37:04 +05:30
scripts Fixed lint in build script 2020-06-07 01:26:58 +05:30
src Removed paddings in plans page 2020-07-20 18:03:34 +02:00
.editorconfig Initial commit 2020-03-24 18:37:38 +05:30
.env Switched to recommended absolute test-utils path setup 2020-04-28 23:29:56 +05:30
.env.development.local.example Updated local env file example to use default page 2020-05-01 22:21:44 +05:30
.gitignore Allowed .env file in source control for test-utils setup 2020-04-28 23:15:09 +05:30
LICENSE Initial commit 2020-03-24 18:37:38 +05:30
package.json v0.8.10 2020-07-16 12:48:06 +05:30
README.md Updated readme 2020-07-08 10:26:14 +05:30
renovate.json Updated Renovate config 2020-04-13 10:46:29 +01:00
webpack.config.js Updated build and publish setup for unpkg deployment 2020-04-20 22:10:58 +05:30
yarn.lock Update dependency @testing-library/jest-dom to v5.11.1 2020-07-15 15:05:12 +00:00

Members.js

CI Status npm version

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

  1. Clone this repository:
git@github.com:TryGhost/members.js.git
  1. 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 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 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

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.