npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@manuscripts/article-editor

v3.6.7

Published

React components for editing and viewing manuscripts

Downloads

10,584

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

macimaci

Keywords

Readme

manuscripts-article-editor

This repository contains the editor package of Manuscripts app to be used in a react application.

Dependencies

Manuscripts is highly modular: it is composed out of a series of NPM published modules following a few different themes.

Data model

Data synchronisation

Editor components

ProseMirror specifics

Export

Reusable UI components

Datasets

Utilities

Installation

Run yarn install @manuscripts/article-editor in your application.

Build (for production)

The variables listed in .env.example must all be defined as environment variables in your project.

Run yarn build to build the app to the dist folder.

Deploy the files to S3 with scripts/deploy.sh.

Running the client in development mode

  1. cp .env.example .env. The variables listed in .env.example have appropriate default values for running in a mode where the backend API server is running locally (this is optional, and you can complete local development tasks in the absence of the backend services). See steps below under "Running the backend API in Docker" for steps to launch the API server locally.
  2. Run docker volume create --name=yarn-cache to create a yarn cache for the backend services that you will launch in the next step. This step is only needed once.
  3. docker-compose up jupyter to start the services needed for development.
  4. yarn start to start the app in development mode (using webpack-dev-server).
  5. To avoid signing up an account, open http://localhost:8080/developer to create a dummy user profile. Now you're good to go.

Running the backend API in Docker

  1. Add any environment variables needed for the API server in docker/server/.env.
  2. docker login registry.gitlab.com to log in to GitLab’s Container Registry using your GitLab username and password (or a deploy token for read-only access to the registry images).
  3. Run docker-compose pull to pull the latest server Docker images.
  4. [first run] Initialize the backend services: scripts/api/initialize.sh. If running on Windows or MacOS, it may be necessary to increase the RAM allocated to Docker. (This can be done through Docker Desktop > Preferences > Resources > Advanced > Memory.)
  5. [subsequent runs] Start the backend services: docker-compose up api
  6. Run docker-compose up jupyter to start the additional services.
  7. Open chrome://flags/#cookies-without-same-site-must-be-secure and set to Disabled.
  8. Run yarn start to start the frontend.
  9. Open Chrome, and enter http://localhost:8080/signup to create a user account. Confirmation emails generally won't be sent from a locally-running API, but you can ignore that message (see APP_SKIP_ACCOUNT_VERIFICATION in docker/server/defaults.env)
  10. To stop the service, run docker-compose down. Add an optional -v flag to delete the data volumes.

Running the Manuscripts stack in Kubernetes via Docker Desktop

  1. Make sure kubectl is using the appropriate context:
    1. Run kubectl config current-context to show the current context.
    2. Run kubectl config get-contexts to list the available contexts.
    3. Run kubectl config set-context docker-desktop to set the context.
  2. To build the client image, run docker-compose build client
  3. To start the services, run docker stack deploy --compose-file <(docker-compose config) manuscripts
  4. To stop the services, run docker stack rm manuscripts

Testing

Unit tests

Run yarn test to run the unit tests in Jest.

Running tests with Cypress

  1. Run yarn run cypress:open to launch the Cypress runner.
  2. From the Cypress runner, select an individual test to run or select Run all specs

Development

See the manuscripts-frontend wiki for more information.

Developing manuscripts-api

  1. If needed, initialize the backend services: scripts/api/initialize.sh
  2. Start the other backend services in Docker: docker-compose up sync-gateway jupyter
  3. Start the API: scripts/api/start-local.sh

Developing @manuscripts/style-guide

  1. Clone @manuscripts/style-guide to a folder alongside this one, run yarn install to install its dependencies, run yarn link to make it available as a local dependency, then run yarn dev in that folder to start building it.
  2. In this folder, run yarn link @manuscripts/style-guide to use the linked module as a local dependency.

Analysis

Run yarn stats to generate a stats.json file, then yarn analyze to open webpack-bundle-analyzer's visualization of the webpack bundle.