mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-01 13:54:35 +03:00

History

Rish b739f14183 Added currency and pricing preview params no issue As part of launch wizard in Ghost-Admin, we allow site owner/admins to try different pricing and currency in Admin preview. This change allows Portal popup to consume and update pricing/currency/background on the preview screen using `monthlyPrice`, `yearlyPrice`, `currency` and `disableBackground` params. - `monthlyPrice`- Allows updating monthly price value via preview - `yearlyPrice`- Allows updating yearly price value via preview - `currency`- Allows updating currency value via preview - `disableBackground`- Allows disabling preview background for Portal UI		2021-02-09 13:31:05 +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	Fixed lint in build script	2020-06-07 01:26:58 +05:30
src	Added currency and pricing preview params	2021-02-09 13:31:05 +05:30
.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	2021	2021-01-25 16:35:55 +00:00
package.json	v1.0.0-rc.2	2021-02-03 08:46:19 +05:30
README.md	2021	2021-01-25 16:35:55 +00:00
renovate.json	Updated Renovate config	2020-04-13 10:46:29 +01:00
webpack.config.js	Updated npm/unpkg name to portal	2020-09-23 23:43:46 +05:30
yarn.lock	Update dependency @testing-library/react to v11.2.3	2021-01-24 19:51:16 +00:00

README.md

Portal

Drop-in script to make the bulk of Ghost membership features work on any theme.

Usage

Portal can be enabled on any theme directly by adding the 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 defer src="https://unpkg.com/@tryghost/portal@latest/umd/portal.min.js" data-ghost="https://mymemberssite.com"></script>

The data-ghost attribute expects the URL for your site which is the only input Portal needs to work with your site's membership data via Ghost APIs.

Alternatively, Ghost automatically injects this Portal script to any site behind a dedicated flag(see below) which can be added via config, which also enables Site owner/admins to customize specific Portal settings from Ghost-Admin.

NOTE: Since this is currently under active development, Portal can be switched on with a new dedicated flag - portal - in Ghost config, which needs to be added to config file before starting the server.

{
    ...,
    "portal": true
}

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 add custom trigger button of your own by adding data attribute data-portal to any HTML tag on page, and also specify a specfic page to open from it by using it as data-portal=signup.

The script also adds custom class names to this element for open and close state of popup - gh-portal-open and gh-portal-close, allowing devs to update its UI based on popup state.

Basic Setup

Clone this repository:

git@github.com:TryGhost/portal.git

Change into the new directory and install the dependencies:

cd portal
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 portal script.

In this repo(Portal):

Run yarn build to create the minified bundle with your changes at umd/portal.min.js

In your theme(Ex. Lyra):

Copy portal.min.js from above and paste it in your theme at assets/built/portal.min.js
Add below code in your theme's default.hbs just before end of body tag

<script src='{{asset "built/portal.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/portal.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/portal and creates an unpkg link for script at https://unpkg.com/@tryghost/portal@VERSION

Learn More

This project was bootstrapped with Create React App. You can learn more in the Create React App documentation.