deadsimple json-based SPA app-generator for gitlab (static pages)

Usage

$ npm install paperapp $ paperapp

paperapp init                     <-- inits a directory with a paper app
paperapp dev                      <-- runs development server

How to create a project

$ npm init
$ npm install paperapp --save
$ paperapp init
$ paperapp dev
   _   _   _   _   _   _   _   _  
  / \ / \ / \ / \ / \ / \ / \ / \ 
 ( P | A | P | E | R | A | P | P )
  \_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/ 

  https://npmjs.org/package/paperapp

Starting up http-server, serving .server
Available on:
  http://127.0.0.1:8080
  http://100.115.92.1:8080
  http://192.168.0.157:8080
Hit CTRL-C to stop the server

Now edit app.json, app.css and app.js in your current dir

$ git add .gitlab-ci.yml app.*
$ git commit -m "1st commit"
$ git push origin master

Voila you have a beautiful offline SPA up and running

Features

• Old device-friendly
• Offline SPA
• Reactive store
• SPA with SEO-support

Reference

| Feature | Example | Result | Comment | |-|-|-|-| | JSON Reactive store | { "store": { "name":"John" } } | | define default store variables | | | { "name": "${store.name}" } } | | use store-variable as value | | JSON js function | { "format":"div", "value":"${window.Date()}" } | | use function output as div-content | | JSON Webrequest | { "format":"div", "value":"${res/products.html}" } | | use url as div-content | | | { "$ref":"https://f.com/2.json" } | | uses fetched json-result as value | | JS Reactive | $.on('store.name', console.log ) | | reacts to value-change | | | $.set('store.name', "myname") | | updates value | | | $.set('store.name', $.store.name) | | retrigger last value | | Application Events| $.on('/init', console.log ) | | respond to event | | | $.on('/init/done', $.curry(console.log,"done!")) | | respond to event (curried) | | | $.on('/init/done', [alert,console.log]) | | respond to event (auto map) | | | $.on('/menu/change', console.log ) | | respond to event | | | $.trigger('/menu/change', {target:$('#menu select')}) | | trigger event | | | $.off('/menu/change',console.log | | unregister eventhandler | | *JS Forms" | $.createForm( myjsonschema ) | | renders a jsonschema form | | JS DOM | $.Element({format:"li",value:"hi",attr:{"id":"foo"},style:{"color":"#FFF"}}),class:"foo"}) | hi | | | | $('div>li#a') | HTMLElement | like jquery | | | $.all('div>li').map(console.dir) | HTMLElement[] | like jquery | | | $.addClass( $('#foo'),'red') | | | | | $.removeClass( $('#foo'),'red') | | | | JS Utility | $.extend({a:1},{b:2}) | {a:1,b:1} | like lodash | | | $.get($,'store.foo.bar','empty') | value or 'empty' | shorthand function like lodash | | | $.set($,'store.foo.bar',123) | | shorthand function like lodash | | | $.equals(property, a, b) | | example: myarr.find( equals('title', 'foo') ) | | | foo = $.curry(console.log,"foo") | foo() // prints 'foo' | lazy curry | | | $.renderString("hello ${world}",{world:"man"}) | "hello man" | es6 template evaluation to string | | | $.renderVar("${store}) | {...} | es6 template evaluation to object | | | $.mapasync([1,2,3],function(v,i,next){ next() }, alert) | | async iterator | | *JS webrequest | $.require("https://foo.com/1.js","js", alert ) | | require js or css file | | | $.request('PUT','http://f.com/1.json', console.dir) | string with json | will return cached version if offline | | url hash variables | http://foo.com#{"nomenu":true} | | hides menu icon | | | http://foo.com#{"nofooter":true} | | hides footer | | | http://foo.com#{"noheader":true} | | hides header | | | http://foo.com#{"nofullscreen":true} | | hides fullscreen icon | | | http://foo.com#{"card":"Foo"} | | sets 'Foo' as homepage |