Pouchdb: Add a visual diagram to adapters.html

[nolanlawson]

Somebody asked in IRC about this quote from adapters.html:

In the Adapter docs for Node Pouch mentions it can be used 'over SQLite3 in Node, using the WebSQL adapter and node-websql'. That kind of confuses me, are those 3 separate, interacting modules?

This made me realize that we support so many adapters, it's just far too confusing. The "browser support" diagram is nice, but I wish we had a diagram to explain the whole thing, i.e.:

• 3 adapters: idb, leveldb, websql
• http adapter (special case)
• *down adapters
• node-websql
• SQLite Plugin

I have an idea of how this might be laid out, but I think it needs a human touch (hand-drawn? styled with CSS?) and I'm a terrible artist, so I nominate this as a "good first-timer issue."

First-timer instructions: click the pencil icon on that page to start editing, and to upload any images you may have, just add them to docs/static/img. If you need to modify CSS, that'll be in docs/static/less and you can build using npm install && npm run build-site.

[nickcolley]

If possible let's try to avoid any information in images so we can make the information accessible.

So if we could do this in CSS or SVG that'd be great.

We could potentially do this as a dependency graph, this could be a static SVG image that we could inline and make accessible for example however that's just one way this could be done.

[nolanlawson]

I agree accessibility is a big concern issue. BTW I went back and actually drew some ASCII art to show what I had in mind:

                           |PouchDB |
                           +--------+
      Browser                            Node.js


+----------+  +-----------+  +---------------------+  +-----------+
|IndexedDB |  |WebSQL     |  |HTTP                 |  |LevelDB    |
+----------+  +----+------+  +----------+----------+  +------+----+
                   |                    |                    |
                   |                    |                    |
                   |                    |                    |
              +----+------+  +----------+----------+  +------+-----------------------------+
              |SQLite     |  |CouchDB,             |  |MemDOWN                             |
              |Plugin     |  |Cloudant,            |  |LocalStorageDOWN                    |
              |(Cordova), |  |PouchDB Server       |  |FruitDOWN                           |
              |node-websql|  |Couchbase SG         |  |*DOWN (not officially unsupported)  |
              | (Node),   |  +---------------------+  |                                    |
              |WebSQL     |                           |LevelDOWN (default)                 |
              | (default) |                           |                                    |
              |           |                           +------------------------------------+
              |           |
              |           |
              +-----------+

[pjhampton]

Sure, I can take this. Is there a specific diagram style you guys would like me to follow already on the site?

[nolanlawson]

Yay! :) As Nick said, as long as it's CSS or SVG (and hence accessible and easily modifiable), that should be great. Just use whatever style you think fits the site well.

[pjhampton]

Opps! I completely forgot about this!
I'm on it :-)

[KlausTrainer]

Looks like this has been resolved with #5691 🎉

Thanks @pjhampton :)