Cybre pinafore fork
Go to file
Stephane Zermatten c2bd2f306a feat: Add support for keyboard shortcuts (#870)
* Add support for keyboard shortcuts.

This change introduces a Shortcut component for defining global
keyboard shortcuts from whichever component makes more sense.

This change also adds an initial set of navigation shortcuts:
- Backspace to leave a modal dialog or to go back
- g t to go to the federated timeline
- g f to go to the favorite page
- g h to go to the home page
- g n to go to the notification page
- g c to go to the community page
- s to go to the search page

These shortcuts are loaded asynchronously from _layout.html

In modal dialogs, shortcuts are also modal, to avoid strange or
overly complex behavior. This is implemented by grouping
shortcuts into scopes, and activating a separate 'modal' scope
when entering a modal dialog, so a separate set of shortcuts can
be enabled in modal dialog. Modal dialogs can be exited by
pressing 'Backspace'.

* Navigate up/down lists using keyboard shortcuts.

This change introduces keyboard shortcuts for navigating in lists and
virtual lists. j or arrow up selects the next element, k or arrow down,
the previous element. Selecting an element scrolls the list up and down,
as necessary.

This change also allows directing keyboard shortcuts to the active
element and defines the following shortcuts, for the active status:
- f to favorite or unfavorite it
- b to boost or unboost it
- r to reply to it
- o to open its thread
- x to toggle the display of a CW
- y to toggle the display of sensitive medias

This works by defining a keyboard shortcut scope for each list element.
A new component, ScrollListShortcuts, keeps track of the active element,
based on list or virtual list elements and redirects shortcuts to the
active element's scope. ScrollListShortcuts keeps the active element in
the current realm of the store, so the active element is restored when
going back to the list.

* Typing h or ? displays the list of available keyboard shortcuts.

This change introduces a new modal dialog that documents the list of
available shortcuts.
2019-01-13 10:03:29 -08:00
bin Update rollup to the latest version 🚀 (#860) 2019-01-01 10:42:50 -08:00
docs fix: update Sapper to latest (#775) 2018-12-11 07:31:48 -08:00
fixtures chore(travis): update to mastodon v2.6.1 (#630) 2018-11-12 12:59:47 -08:00
original-static fix: update Sapper to latest (#775) 2018-12-11 07:31:48 -08:00
scss feat: Add support for keyboard shortcuts (#870) 2019-01-13 10:03:29 -08:00
src feat: Add support for keyboard shortcuts (#870) 2019-01-13 10:03:29 -08:00
src-build perf: load Toast asynchronously (#851) 2018-12-22 15:37:51 -08:00
static chore(git): remove ignored files from git (#801) 2018-12-13 21:32:32 -08:00
tests feat: Add support for keyboard shortcuts (#870) 2019-01-13 10:03:29 -08:00
thirdparty/font-awesome-svg-png fix: remove font-awesome-svg-png (#810) 2018-12-15 17:13:27 -08:00
webpack Revert "perf: use webpack splitChunks defaults (#855)" (#856) 2018-12-23 11:25:35 -08:00
.editorconfig chore(editor): add an editorconfig (#710) 2018-12-01 23:06:34 -08:00
.gitignore fix: use emoji-mart all.json, split out json (#839) 2018-12-18 12:45:49 -08:00
.travis.yml chore: use latest npm in travis (#863) 2019-01-12 09:49:29 -08:00
CONTRIBUTING.md docs: add some more contributing instructions (#861) 2018-12-30 14:50:51 -08:00
Dockerfile Fixing Dockerfile (#440) 2018-08-18 21:20:33 -07:00
LICENSE add footer and license 2018-03-07 09:25:07 -08:00
README.md Update README.md 2018-12-18 20:50:30 -08:00
inline-script.js fix: fix logging in and out with a refresh (#824) 2018-12-16 12:39:16 -08:00
package-lock.json chore: update now to latest (#885) 2019-01-12 13:13:59 -08:00
package.json chore: update now to latest (#885) 2019-01-12 13:13:59 -08:00
webpack.config.js fix: update Sapper to latest (#775) 2018-12-11 07:31:48 -08:00

README.md

Pinafore Build Status Greenkeeper badge

An alternative web client for Mastodon, focused on speed and simplicity.

Pinafore is available at pinafore.social. Beta releases are at dev.pinafore.social.

See the user guide for basic usage. See the admin guide if Pinafore cannot connect to your instance.

For updates and support, follow @pinafore@mastodon.technology.

Browser support

Pinafore supports the latest versions of the following browsers:

  • Chrome
  • Edge
  • Firefox
  • Safari

Compatible versions of each (Opera, Brave, Samsung, etc.) should be fine.

Goals and non-goals

Goals

  • Support the most common use cases
  • Small page weight
  • Fast even on low-end devices
  • Accessibility
  • Offline support in read-only mode
  • Progressive Web App features
  • Multi-instance support
  • Support latest versions of Chrome, Edge, Firefox, and Safari

Secondary / possible future goals

  • Support for Pleroma or other non-Mastodon backends
  • Serve as an alternative frontend tied to a particular instance
  • Support for non-English languages (i18n)
  • Offline search
  • Keyboard shortcuts

Non-goals

  • Supporting old browsers, proxy browsers, or text-based browsers
  • React Native / NativeScript / hybrid-native version
  • Android/iOS apps (using Cordova or similar)
  • Full functionality with JavaScript disabled
  • Emoji support beyond the built-in system emoji
  • Multi-column support
  • Admin/moderation panel
  • Offline support in read-write mode (would require sophisticated sync logic)

Building

Pinafore requires Node.js v8+ and npm.

To build Pinafore for production:

npm install
npm run build
PORT=4002 npm start

Docker

To build a Docker image for production:

docker build .
docker run -d -p 4002:4002 [your-image]

Now Pinafore is running at localhost:4002.

Updating

To keep your version of Pinafore up to date, you can use git to check out the latest tag:

git checkout $(git tag -l | sort -Vr | head -n 1)

Exporting

You can export Pinafore as a static site. Run:

npm run export

Static files will be written to __sapper__/export.

Note that this is not the recommended method, because CSP headers are not currently supported for the exported version.

Developing and testing

See CONTRIBUTING.md for how to run Pinafore in dev mode and run tests.

Changelog

For a changelog, see the GitHub releases.

What's with the name?

Pinafore is named after the Gilbert and Sullivan play. The soundtrack is very good.