DanielDe / Org Web

• org-web - org mode on the web org-web lets you directly edit your org files online. It syncs with Dropbox and Google Drive and is optimized for mobile use. You can check out a [[https://www.youtube.com/watch?v=ijNqZQxNgiA][video demo here]].

[[./screenshots/overview.png]]

It was born out of my desire to be able to easily view and edit my org files from my phone. It's available for use [[https://org-web.org][here]].

If you don't already keep your org files in Dropbox or Google Drive, I recommend symlinking them in:

#+BEGIN_SRC ln -s ~/Documents/todo.org ~/Dropbox/todo.org #+END_SRC ** Gitter chat If you're interested in learning more about using or developing org-web, feel free to ask for help in [[https://gitter.im/org-web/Lobby?source=orgpage][this Gitter room]]. It's quiet right now, but I still monitor it closely :) ** Capture params and Siri support org-web supports a flexible mechanism for capturing using URL parameters. This mechanism integrates very nicely with the new [[https://support.apple.com/guide/shortcuts/welcome/ios][Siri Shortcuts]] feature in iOS 12, allowing you to use Siri to execute capture templates.

You can use [[https://www.icloud.com/shortcuts/4e51e8b748d14a50aa70ac6fb963f775][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_, and should also be URL encoded. In your capture template they'd show up as %.

Here's an example URL:

https://org-web.org?captureTemplateName=Grocery%20item&captureContent=Lemon&captureFile=/org/todo.org&captureVariable_location=Home ** Development org-web is built with React and Redux. It was bootstrapped with [[https://github.com/facebook/create-react-app][Create React App]].

To install the necessary packages, run:

#+BEGIN_SRC yarn install #+END_SRC

To run the app, run:

#+BEGIN_SRC yarn start #+END_SRC

*** Synchronization back-ends

To test against your actual Dropbox, you'll need to create a .env file by copying .env.sample to just .env. To test against your Google Drive you'll need to generate an API key as described on [[https://developers.google.com/drive/api/v3/quickstart/js][this page]].

Note that this 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 and Google developer consoles.

Alternatively, you can create your own 'application' on Dropbox [[https://www.dropbox.com/developers/apps/][here]] and then use this app key. Make sure to add your own URL as a =Redirect URI=. (See the discussion [[https://github.com/DanielDe/org-web/issues/74][here]] for more detail).

*** Contributions

To make contributions to this repository, please install [[https://prettier.io/][Prettier]] and use it to format your code. This repository includes a .prettierrc.json with some configuration options that Prettier will use automatically. I also highly recommend installing [[https://github.com/prettier/prettier-emacs][prettier-emacs]] which will format your files on save, saving you the trouble of manually running Prettier.

** Deployment

Since org-web 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=

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

#+BEGIN_SRC shell HOST='your_ftp_server_host' USER='ftp_user' PASSWD='ftp_password'

lftp $HOST <<END_SCRIPT user $USER $PASSWD put ../.env mirror -R build/ quit END_SCRIPT exit 0 #+END_SRC

*** Heroku Assuming, you have an account and have installed the [[https://devcenter.heroku.com/articles/heroku-cli][command line tools]], deployment is as easy as:

#+BEGIN_SRC shell heroku create git push heroku master #+END_SRC ** Triplebyte I used to work at Triplebyte and I think they're a fantastic service for both candidates looking for jobs and companies looking to hire. If you're looking for a job and want to support this project you can check out Triplebyte via [[https://triplebyte.com/a/YWIwst4/owr][this referral link]]. If you get a job through that link then Triplebyte will send me a referral bonus. ** Thanks org-web is built on the shoulders of giants. These are some packages I rely on that I think are absolutely fantastic:

• [[https://github.com/JedWatson/classnames][JedWatson/classnames]]
• [[https://github.com/atlassian/react-beautiful-dnd][atlassian/react-beautiful-dnd]]
• [[https://github.com/motdotla/dotenv#readme][motdotla/dotenv]]
• [[https://github.com/facebook/immutable-js][facebook/immutable-js]]
• [[https://github.com/lodash/lodash][lodash/lodash]]
• [[https://github.com/facebook/create-react-app][facebook/create-react-app]]
• [[https://github.com/nkbt/react-collapse][nkbt/react-collapse]]
• [[https://github.com/greena13/react-hotkeys][greena13/react-hotkeys]]
• [[https://github.com/chenglou/react-motion][chenglou/react-motion]]
• [[https://github.com/reduxjs/redux][reduxjs/redux]]
• [[https://github.com/ReactTraining/react-router][ReactTraining/react-router]]