Landing Page Summarizing the Demo Apps

[bradley-holt]

We should create a landing page to aggregate these different demo apps, somewhat similar to:
https://hnpwa.com/

This should be created as a GitHub pages website using a gh-pages branch of the main shopping-list repo (which would place the URL for this at http://ibm-watson-data-lab.github.io/shopping-list/). For each implementation we should capture (at a minimum):

• The name of the stack it was built on (e.g. "Vue.js and PouchDB")
• Link to the GitHub repo
• More detailed stack information
• A link to view the live app
• Author(s)

Much of this info is already in the README file, but we can make this information more digestable on a landing page.

[ptitzler]

According to the documentation https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/ we cannot use a branch other than master:

If your site is a User or Organization Page that has a repository named .github.io or .github.io, you cannot publish your site's source files from different locations. User and Organization Pages that have this type of repository name are only published from the master branch.

Oddly enough this does work.

[isc-rsingh]

I think you're misunderstanding the docs @ptitzler (I went back over it multiple times too). They mean if your repo name is something.github.io, it has to use the master branch for GH publication. This repo's name is shopping-list so that rule doesn't apply.

[bradley-holt]

@ptitzler What @rajrsingh said. 😄

You should be able to create new orphan gh-pages branch with something like the following:

git checkout --orphan gh-pages
git rm -rf .
touch index.html
git add index.html
git commit -m "Make index"
git push -u origin gh-pages

[ptitzler]

Yup, my interpretation wasn't correct. I tested this in my own org.

[ptitzler]

Catalogued the following demo app implementations:

• Electron and PouchDB https://github.com/ibm-watson-data-lab/shopping-list-electron-pouchdb
• Cordova and PouchDB https://github.com/ibm-watson-data-lab/shopping-list-cordova-pouchdb
• Ionic and PouchDB https://github.com/ibm-watson-data-lab/shopping-list-ionic-pouchdb
• React Native and PouchDB https://github.com/ibm-watson-data-lab/shopping-list-react-native-pouchdb
• Kotlin and Cloudant Sync https://github.com/ibm-watson-data-lab/shopping-list-kotlin-cloudant-sync
• Swift and Cloudant Sync https://github.com/ibm-watson-data-lab/shopping-list-swift-cloudant-sync
• Ember.js and PouchDB https://github.com/ibm-watson-data-lab/shopping-list-emberjs-pouchdb
• Polymer and PouchDB https://github.com/ibm-watson-data-lab/shopping-list-polymer-pouchdb
• Preact and PouchDB https://github.com/ibm-watson-data-lab/shopping-list-preact-pouchdb
• React and PouchDB https://github.com/ibm-watson-data-lab/shopping-list-react-pouchdb
• Vanilla Javascript and PouchDB https://github.com/ibm-watson-data-lab/shopping-list-vanillajs-pouchdb
• Vue.js and PouchDB https://github.com/ibm-watson-data-lab/shopping-list-vuejs-pouchdb

Each entry is backed by a metadata file in https://github.com/ibm-watson-data-lab/shopping-list/tree/gh-pages/_how_tos. The structure of each metadata file is as shown in the following example:

---
title:      Cordova and PouchDB
headline:   Learn how to build an Offline First shopping list demo app using <a href="http://cordova.apache.org">Cordova</a> and <a href="https://pouchdb.com">PouchDB</a>
repo_url:   https://github.com/ibm-watson-data-lab/shopping-list-cordova-pouchdb
tutorial_url:   
demo_url: 
type: Hybrid Mobile App
author:     Glynn Bird
author_url: https://github.com/glynnbird
---

The title, headline, repo_url, author and author_url properties are required.
The following type values are considered valid: Progressive Web App, Native Mobile App, Hybrid Mobile App and Desktop App. (case matters!)

To add another demo app simply create a new metadata file in https://github.com/ibm-watson-data-lab/shopping-list/tree/gh-pages/_how_tos, using the following naming convention: <app_framework>_<offline_framework>.

[isc-rsingh]

@ptitzler can PWAs be the first/default tab on the page?

[bradley-holt]

@ptitzler Following on the comment from @rajrsingh, the ideal tab order would be:

1. Progressive Web Apps
2. Hybrid Mobile Apps
3. Native Mobile Apps
4. Desktop Apps

[ptitzler]

• Tab order was changed.
• About now links to the https://github.com/ibm-watson-data-lab/shopping-list repo

[vabarbosa]

@ptitzler initial commit of vanilla js tutorial: https://github.com/ibm-watson-data-lab/shopping-list-vanillajs-pouchdb/tree/master/tutorial

[ptitzler]

Metadata was added @vabarbosa

[vabarbosa]

@ptitzler initial draft for electron tutorial: https://github.com/ibm-watson-data-lab/shopping-list-electron-pouchdb/tree/master/tutorial