Public | Automated Build

Last pushed: 2 years ago
Short Description
Docker container for an offline markdown editor
Full Description

MD

This project contains the code to create "MD", an in-browser, offline-first, Markdown word processor.

To run it, simply clone this repository and run

npm install
node app.js

and visit "http://localhost:3000/" in your browser. Alternatively, this app can be hosted on IBM Bluemix or another Node.js hosting platform. It can be tried out by visiting http://mddoc.mybluemix.net

  • click “New” to create a new document
  • add some Markdown into the grey box e.g. ## Hello World
  • give your document a name
  • press save
  • your document should now be visible in the "Load" popup
  • disconnect yourself from the internet (or kill the node app.js, if you’re self-hosting)
  • refresh the app in the browser - it should still work!

How do I try it?

The easiest way is to click the button below:

<a href="https://bluemix.net/deploy?repository=https://github.com/glynnbird/md" target="_blank"><img src="http://bluemix.net/deploy/button.png" alt="Deploy to Bluemix" /></a>

This will deploy this App to your Bluemix account, or allow you to create one first if you don't have one. Bluemix is IBM's Platform-as-a-Service and allows you to deploy your code together with open-source and proprietary services with a few clicks, or using the CloudFoundry tools.

How does it work?

PouchDB

PouchDB is an in-browser database. In a few lines of code, Javascript objects can be saved an retrieved using the browser's internal storage. As no internet connection is required after the browser has loaded the page, PouchDB is a great tool to create offline-first applications. Here's some example code to create a database 'md' and add a simple document to it:

var db = new PouchDB("md");
var doc = { name: "fred", body: "Document body" };
db.post(doc, function(err, data) {
  console.log("Saved", err, data);
});

PouchDB is NoSQL data store; it does not force you to define a database schema up front, nor does it force you to follow the same document pattern for every document in the database. For this application, the documents look like this:

{
  "_id": "23966717-5A6F-E581-AF79-BB55D6BBB613",
  "_rev": "1-96daf2e7c7c0c277d0a63c49b57919bc",
  "doc_id": "0d7c2bf2-d9d5-4db3-a412-5f85aa8d2f76",
  "doc_name": "Markdown Reference",
  "body": "Lorem Ipsum",
  "ts": 1422358827
}

The _id and _rev are auto-generated by PouchDB. The doc_id is generated programmatically by us and is used to uniquely identify a document. The same doc_id may appear in several PouchDB documents, representing different iterations of the same document. Each document has a doc_name, body and ts, representing the name, the Markdown of the document and the Unix timestamp when the document was saved.

Manifest files

In order for your app to be work offline, the app needs to instruct the browser to retain some files locally for offline use. A project's manifest file contains a list of urls that need to cached by the browser e.g. the site's home page and all of its Javascript and CSS assets.

Markdown

Markdown is a simple text-based syntax that allows basic document formatting to be defined and converted programmatically into HTML. The full Markdown syntax reference can be found here http://daringfireball.net/projects/markdown/syntax.

Syncing with Cloudant

This web app can function quite happily, saving its data to your local web browser. For a real-world application, however, we may wish to backup our store of documents to the Cloud. With PouchDB this is easy, as PouchDB is compatible with CouchDB's replication protocol. Cloudant, which is based on CouchDB, is also a compatible target for PouchDB replication. With a single line of code, your local PouchDB database is synced to the cloud:

db.sync("https://myusername:mypassword@myhost.cloudant.com/mydb");

Simply:

The app will save your Cloudant URL in a different PouchDB database. When the app loads again, it will retrieve the Cloudant URL from local storage and re-initialise synchronisation.

Docker Pull Command
Owner
allmightyspiff
Source Repository