This commit is contained in:
Christian Bundy
commit
e19790b891
|
|
@ -0,0 +1,7 @@
|
|||
node_modules/
|
||||
.nyc_output/
|
||||
coverage/
|
||||
dist/
|
||||
tmp/
|
||||
npm-debug.log*
|
||||
.DS_Store
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
# oasis
|
||||
oasis
|
||||
|
||||
## Commands
|
||||
Command | Description |
|
||||
-----------------------|--------------------------------------------------|
|
||||
`$ npm start` | Start the development server
|
||||
`$ npm test` | Lint, validate deps & run tests
|
||||
`$ npm run build` | Compile all files into `dist/`
|
||||
`$ npm run create` | Generate a scaffold file
|
||||
`$ npm run inspect` | Inspect the bundle's dependencies
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 302 B |
|
|
@ -0,0 +1,18 @@
|
|||
var css = require('sheetify')
|
||||
var choo = require('choo')
|
||||
|
||||
css('tachyons')
|
||||
|
||||
var app = choo()
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
app.use(require('choo-devtools')())
|
||||
} else {
|
||||
app.use(require('choo-service-worker')())
|
||||
}
|
||||
|
||||
app.use(require('./stores/clicks'))
|
||||
|
||||
app.route('/', require('./views/main'))
|
||||
app.route('/*', require('./views/404'))
|
||||
|
||||
module.exports = app.mount('body')
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"name": "oasis",
|
||||
"short_name": "oasis",
|
||||
"description": "oasis",
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"background_color": "#000",
|
||||
"theme_color": "#000",
|
||||
"icons": [{
|
||||
"src": "/assets/icon.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}]
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,26 @@
|
|||
{
|
||||
"name": "oasis",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "bankai build index.js",
|
||||
"create": "choo-scaffold",
|
||||
"inspect": "bankai inspect index.js",
|
||||
"start": "bankai start index.js",
|
||||
"test": "standard && npm run test-deps",
|
||||
"test-deps": "dependency-check . && dependency-check . --extra --no-dev -i tachyons"
|
||||
},
|
||||
"dependencies": {
|
||||
"choo": "^6.13.3",
|
||||
"choo-service-worker": "^3.0.0",
|
||||
"sheetify": "^7.4.0",
|
||||
"tachyons": "^4.11.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"bankai": "^9.15.0",
|
||||
"choo-devtools": "^3.0.0",
|
||||
"choo-scaffold": "^1.2.0",
|
||||
"dependency-check": "^3.3.0",
|
||||
"standard": "^12.0.1"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
module.exports = store
|
||||
|
||||
function store (state, emitter) {
|
||||
state.totalClicks = 0
|
||||
|
||||
emitter.on('DOMContentLoaded', function () {
|
||||
emitter.on('clicks:add', function (count) {
|
||||
state.totalClicks += count
|
||||
emitter.emit(state.events.RENDER)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
/* eslint-env serviceworker */
|
||||
|
||||
var VERSION = require('./package.json').version
|
||||
var URLS = process.env.FILE_LIST
|
||||
|
||||
// Respond with cached resources
|
||||
self.addEventListener('fetch', function (e) {
|
||||
e.respondWith(self.caches.match(e.request).then(function (request) {
|
||||
if (request) return request
|
||||
else return self.fetch(e.request)
|
||||
}))
|
||||
})
|
||||
|
||||
// Register worker
|
||||
self.addEventListener('install', function (e) {
|
||||
e.waitUntil(self.caches.open(VERSION).then(function (cache) {
|
||||
return cache.addAll(URLS)
|
||||
}))
|
||||
})
|
||||
|
||||
// Remove outdated resources
|
||||
self.addEventListener('activate', function (e) {
|
||||
e.waitUntil(self.caches.keys().then(function (keyList) {
|
||||
return Promise.all(keyList.map(function (key, i) {
|
||||
if (keyList[i] !== VERSION) return self.caches.delete(keyList[i])
|
||||
}))
|
||||
}))
|
||||
})
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
var html = require('choo/html')
|
||||
|
||||
var TITLE = 'oasis - route not found'
|
||||
|
||||
module.exports = view
|
||||
|
||||
function view (state, emit) {
|
||||
if (state.title !== TITLE) emit(state.events.DOMTITLECHANGE, TITLE)
|
||||
return html`
|
||||
<body class="sans-serif pa3">
|
||||
<h1>Route not found.</h1>
|
||||
<a class="pt2" href="/">Back to main.</a>
|
||||
</body>
|
||||
`
|
||||
}
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
var html = require('choo/html')
|
||||
|
||||
var TITLE = 'oasis - main'
|
||||
|
||||
module.exports = view
|
||||
|
||||
function view (state, emit) {
|
||||
if (state.title !== TITLE) emit(state.events.DOMTITLECHANGE, TITLE)
|
||||
|
||||
return html`
|
||||
<body class="code lh-copy">
|
||||
<main class="pa3 cf center">
|
||||
<section class="fl mw6 w-50-m w-third-l pa3">
|
||||
<h2>1.</h2>
|
||||
<p>
|
||||
Welcome to your new Choo application.
|
||||
We're very happy you've made it this far.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
You're now in control of your own Choo app. The moment you decide to
|
||||
deploy it, it'll work offline and on any device.
|
||||
</p>
|
||||
|
||||
<br>
|
||||
</section>
|
||||
|
||||
<section class="fl mw6 w-50-m w-third-l pa3">
|
||||
<h2>2.</h2>
|
||||
|
||||
<p>
|
||||
We've outfitted your project with a small selection of commands to
|
||||
help you achieve results faster:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li class="mb3">
|
||||
<strong>npm start</strong><br>
|
||||
start your project for local development.
|
||||
</li>
|
||||
<li class="mb3">
|
||||
<strong>npm run build</strong><br>
|
||||
compile your project for production.
|
||||
</li>
|
||||
<li class="mb3">
|
||||
<strong>npm run inspect</strong><br>
|
||||
visualize your project's dependencies.
|
||||
</li>
|
||||
<li class="mb3">
|
||||
<strong>npm run create</strong><br>
|
||||
scaffold a new file.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<br>
|
||||
</section>
|
||||
|
||||
<section class="fl mw6 w-50-m w-third-l pa3">
|
||||
<h2>3.</h2>
|
||||
|
||||
<p>
|
||||
Your project also comes with a few directories. These names have
|
||||
special meanings for the build tool, so it's good to know what they
|
||||
do.
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li class="mb3">
|
||||
<strong>assets/</strong><br>
|
||||
Static files that can be served up, such as images and fonts.
|
||||
</li>
|
||||
<li class="mb3">
|
||||
<strong>components/</strong><br>
|
||||
Reusable fragments that can be composed into views.
|
||||
</li>
|
||||
<li class="mb3">
|
||||
<strong>stores/</strong><br>
|
||||
Pieces of logic that are shared by multiple components.
|
||||
</li>
|
||||
<li class="mb3">
|
||||
<strong>views/</strong><br>
|
||||
Combinations of components that are mapped to routes.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<br>
|
||||
</section>
|
||||
|
||||
<section class="fl mw6 w-50-m w-third-l pa3">
|
||||
<h2>4.</h2>
|
||||
|
||||
<p>
|
||||
So far we've provided you with one base view, <a
|
||||
href="/oh-no">one fallback view</a>, and one store. This serves
|
||||
as an example. A place to start from. It's your project now, so
|
||||
go ahead and delete them once you know how they work.
|
||||
</p>
|
||||
|
||||
<p>Number of clicks stored: ${state.totalClicks}</p>
|
||||
|
||||
<button class="dim ph3 ba bw1 pv2 b--black pointer bg-white"
|
||||
onclick=${handleClick}>
|
||||
Emit a click event
|
||||
</button>
|
||||
|
||||
<br><br>
|
||||
</section>
|
||||
|
||||
<section class="fl mw6 w-50-m w-third-l pa3">
|
||||
<h2>5.</h2>
|
||||
|
||||
<p>
|
||||
To make your development journey more pleasant, we've also
|
||||
included <a
|
||||
href="https://github.com/choojs/choo-devtools">devtools</a>. If
|
||||
you open your browser console, here's a selection of the
|
||||
commands that are at your disposal:
|
||||
|
||||
<ul>
|
||||
<li class="mb3">
|
||||
<strong>choo.state</strong><br>
|
||||
Log the current application state.
|
||||
</li>
|
||||
<li class="mb3">
|
||||
<strong>choo.log</strong><br>
|
||||
Log the last 150 events received by the event bus.
|
||||
</li>
|
||||
<li class="mb3">
|
||||
<strong>choo.emit</strong><br>
|
||||
Emit an event inside the application event bus.
|
||||
</li>
|
||||
<li class="mb3">
|
||||
<strong>choo.help</strong><br>
|
||||
See an overview of all available commands.
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="fl mw6 w-50-m w-third-l pa3">
|
||||
<h2>6.</h2>
|
||||
|
||||
<p>
|
||||
And that's about it! Thanks for reading. If you have any
|
||||
questions, check out the <a href="https://choo.io">docs</a> or reach
|
||||
out on <a href="https://github.com/choojs/choo">GitHub</a> or <a
|
||||
href="https://www.irccloud.com/irc/freenode/channel/choo">IRC</a>.
|
||||
We're online everyday, and always around to help. Happy hacking!
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
`
|
||||
|
||||
function handleClick () {
|
||||
emit('clicks:add', 1)
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue