/organice

An implementation of Org mode without the dependency of Emacs - built for mobile and desktop browsers

Primary LanguageJavaScriptGNU Affero General Public License v3.0AGPL-3.0

organice - /’ɔ:gənaɪz/

organice organizes Org files nicely!

public/organice-small.png

Tests (CircleCI): https://circleci.com/gh/200ok-ch/organice.svg?style=svg

Maintainability (Codeclimate): https://api.codeclimate.com/v1/badges/41d614b1f85c8b261067/maintainability.png

Dependency management: https://badges.greenkeeper.io/200ok-ch/organice.svg

An implementation of Org mode without the dependency of Emacs - built for mobile and desktop browsers.

organice lets you directly edit your org files online. It syncs with Dropbox and Google Drive and is optimized for mobile use.

At 200ok, we run an instance of organice at https://organice.200ok.ch, which is open for anyone to use! organice does not have a back-end (it’s just a front-end application, which uses either Dropbox or Google Drive as back-end storage). Hence no data stored on our servers.

./images/screenshot--overview.png

Capture params and Siri support

organice supports a flexible mechanism for capturing using URL parameters. This mechanism integrates very nicely with the new Siri Shortcuts feature in iOS 12, allowing you to use Siri to execute capture templates.

You can use this sample Shortcut to get started with this right away in iOS 12. Open the link on your iOS device and click “Get Shortcut”. Then open up the Shortcuts app and edit the template by following the directions in the comments. Then record a Siri trigger and you’re good to go!

Alternatively, you can take advantage of the URL parameters yourself to build your own custom capture mechanism. All three of the following parameters are required and must be URL encoded:

  • captureTemplateName: the name of the capture template to use. This capture template must already exist in Settings > Capture templates.
  • captureFile: the path (for Dropbox) or id (for Google Drive) of the file in which to execute the capture template.
  • captureContent: the content you’d like to capture. This content will be placed at the cursor position if specified in the capture template (with %?), or at the end of the template if its not specified.

You can also specify additional custom variables for use in your templates. They should be in the format captureVariable_<your custom variable>, and should also be URL encoded. In your capture template they’d show up as %<your custom variable>.

Here’s an example URL:

https://org.200ok.ch?captureTemplateName=Grocery%2520item&captureContent=Lemon&captureFile=/org/todo.org&captureVariable_location=Home

Development

organice is built with React and Redux. It was bootstrapped with Create React App.

To install the necessary packages, run:

yarn install

To test against your own Dropbox account, you’ll need to create a .env file by copying .env.sample to just .env.

cp .env.sample .env

To run the app, run:

yarn start

Synchronization back-ends

Note that logging in to Dropbox will only work if you’re running the app on http://localhost:3000, because all redirect URIs must be specified ahead of time on the Dropbox developer console.

To configure your own application on Dropbox, please go here and then configure this app key in the .env file. Make sure to add your own URL as Redirect URI.

To configure your own application on Google Drive, please generate an API key as described on this page.

Contributions

To make contributions to this repository, please install Prettier and use it to format your code. This repository includes a .prettierrc.json with some configuration options that Prettier will use automatically.

If you’re using Emacs, you can autoformat your source files: https://github.com/munen/emacs.d/#auto-formatting

Deployment

Since organice is a front-end only application, it can easily be deployed to any server capable of serving a static application.

Please note: If you want the hosted application to connect to Dropbox or Google Drive, please read the section above on Synchronization back-ends.

FTP

First create the production build locally: yarn run build Note: Creating a build will actually make your REACT_APP_* variables from the .env file available under process.env even though it’ll be a front-end application.

And then upload to your web-server. Here’s a script for your convenience:

HOST='your_ftp_server_host'
USER='ftp_user'
PASSWD='ftp_password'

lftp $HOST <<END_SCRIPT
user $USER $PASSWD
mirror -R build/
quit
END_SCRIPT
exit 0

Heroku

Assuming, you have an account and have installed the command line tools, deployment is as easy as:

heroku create
heroku config:set ON_HEROKU=1
git push heroku master

Routing

Whilst organice is a true SPA and therefore has no back-end whatsoever, this does have an implication for deployment with regard to routing. For routes like example.com/foo to work, we need a little something extra. Within the context of a running SPA, /foo would be matched by the React Router and the proper page would be rendered by JavaScript. When initially requesting a route like that from the web server itself, the SPA is not running yet and the web server itself wouldn’t find a file called /foo. It would return a 404. The whole topic is explained in depth in this SO answer: https://stackoverflow.com/a/36623117

For https://organice.200ok.ch we’ve opted to:

  • Use the modern HTML5 history API with BrowserRouter
  • Not configure a back-end for isomorphic routing, because it would complicate application and deployment unnecessarily (SEO is a non-issue for organice)
  • Use good old Apache Webserver for hosting the compiled static assets

Therefore configuring a catchall is as easy as setting up a .htaccess file in the root of the organice folder containing:

RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

RewriteRule ^ /index.html [L]

Comparison

Beorg

Before starting work on organice, I did use Beorg and donated to it multiple times, because I was very happy to have a good option to access Org files on my phone with it.

The important differences to me are:

  • organice is FOSS which is very much in the spirit of Org whilst Beorg is proprietary
  • organice is web based, so there is no lock-in to a specific device or OS
  • Beorg currently has better offline support

org-web

organice has a shared history with org-web. In fact, it is a friendly fork.

organice differs from org-web in that:

  • It’s a community driven project. See our
  • It has the commitment of a Swiss company behind it to continually work on it.
  • It has many bug fixes (for example on parsing and exporting org files) compared to its ancestry.
  • It continues to evolve independently with it’s own feature set.
  • It is a project with equal focus on mobile as desktop browsers.

What’s new?

To see how organice differs from org-web, please consult the changelog which contains all changes since forking.

Acknowledgment

We are extraordinarily grateful to DanielDe the original creator! \_/\_

We forked the project, because we have different visions on how to go forward. He envisions a mobile only solution, we think it’s great to have organice be available to any browser to enable anyone on the go or any non-Emacs user easy access to Org files. Also, DanielDe thinks of org-web as his pet project whereas organice has the full power of 200ok llc behind it whilst building a strong self-sufficient community around it.

Thank you for all, DanielDe!

Attributions

Logo

Illustration credit: Vecteezy.com