Ghost/ghost/portal
Rish 487bea51b2 Refactored code structure using react context
ref https://github.com/TryGhost/members.js/issues/5

React context allows us cleaner setup in codebase with shared data and methods across components at different nesting levels. This should allow faster iteration and easier development going forward.

- Uses Parent context for shared data and methods across different components instead of passed down props
- Uses new `init` method in API for data initialization
- Removes `PopupMenu` component in favor of `PopupModal`
- Adds new test util for custom render for easier base setup - https://testing-library.com/docs/react-testing-library/setup#custom-render
- Updates tests to use new test util for easier test setup
2020-04-28 01:10:08 +05:30
..
.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 Updated build process for single minified script 2020-03-24 18:49:04 +05:30
src Refactored code structure using react context 2020-04-28 01:10:08 +05:30
.editorconfig Initial commit 2020-03-24 18:37:38 +05:30
.env.development.local.example Cleaned up script intiailization data 2020-04-20 22:12:08 +05:30
.gitignore Updated build and publish setup for unpkg deployment 2020-04-20 22:10:58 +05:30
LICENSE Initial commit 2020-03-24 18:37:38 +05:30
package.json 0.2.1 2020-04-23 21:19:23 +05:30
README.md Updated readme 2020-04-27 11:53:18 +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 eslint-plugin-ghost to v1.2.0 2020-04-17 11:14:03 +00:00

Members.js

CI Status npm version

Drop-in script to make the bulk of members work on any theme.

Usage

To load members.js in any Ghost theme, add below code in theme's default.hbs before the end of body tag.

<script type="text/javascript" src="https://unpkg.com/@tryghost/members-js@0.2.1"></script>
<script>
    // Initializes members.js
    // adminUrl: Your API domain, must not end in a trailing slash(Ref: https://ghost.org/docs/api/v3/javascript/admin/#authentication)
    window.GhostMembers.init({
      adminUrl: 'https://youradminurl.com'
    });
</script>

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 above {{{block "scripts"}}} to add and initialize members script
<script src="{{asset "built/members.min.js"}}"></script>
<script>
    // Initialize members.js
    window.GhostMembers.init({
        adminUrl: 'youradminurl.com'
    });
</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.

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.

yarn test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

Publish

Before shipping, please ensure the intended version is updated in package.json.

  • Run npm publish --access public to ship the new version to npm and unpkg.

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.