Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity
ghost/apps/portal
History
Daniel Lockyer c97cc08455 Updated ESLint config for React+Typescript packages 
refs https://github.com/TryGhost/DevOps/issues/50

- `react-app` comes from `eslint-config-react-app`, which is a CRA package
- we're moving away from that so this commit switches the linting over
  to a more recently updated plugin
- once that was removed, we started using a newer version of
  `@typescript-eslint/eslint-plugin`, so there were plenty of
  updates/exemptions to make
2023-07-27 11:40:31 +02:00
..
src Updated ESLint config for React+Typescript packages 2023-07-27 11:40:31 +02:00
.env
.env.development.local.example
.eslintignore
.yarnrc Prevented git tags from being created for apps 2023-07-10 13:09:28 +02:00
jsconfig.json
package.json Updated ESLint config for React+Typescript packages 2023-07-27 11:40:31 +02:00
README.md Converted CRA packages to Vite 2023-07-27 09:43:35 +02:00
vite.config.js

README.md

Portal

npm version

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

Usage

Ghost automatically injects Portal script on all sites running Ghost 4 or higher.

Alternatively, Portal can be enabled on non-ghost pages directly by inserting the below script on the page.

<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 Ghost site, which is the only input Portal needs to work with your site's membership data via Ghost APIs.

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 specific 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.

Refer the docs to read about ways in which Portal can be customized for your site.

Basic Setup

This section is mostly relevant for core team only for active Portal development. Always use the unpkg link for testing/using latest released portal script.

  • Run yarn start:dev to start Portal in development mode
  • Open http://localhost:3000 to view it in the browser.
  • To use the local Portal script in a local Ghost site
    • Update config.local.json in Ghost repo to add "portal" config pointing to local dev server url as instructed on terminal.
    • By default, this uses port 5368 for loading local Portal script on Ghost site. It's also possible to specify a custom port when running the script using - --port=xxxx.

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.

Publish

Run yarn ship to publish new version of script.

yarn ship is an alias for npm publish

(Core team only)