Skip to content

Instantly share code, notes, and snippets.

@outhouse

outhouse/index.js

Last active August 17, 2016 21:04
Download ZIP

Revisions

  1. outhouse revised this gist Aug 17, 2016. No changes.
  2. outhouse revised this gist Aug 17, 2016. 2 changed files with 2 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,7 @@ const app = choo()

    const pages = [
    { title : 'Bear', content : 'I\'m a bear', media : 'http://placebear.com/600/400' , slug : '/' },
    { title : 'Kitten', content : 'Meow', media : 'http://placekitten.com/600/400' , slug : 'kitten' }
    { title : 'Kitten', content : 'Meow', media : 'http://placekitten.com/600/400' , slug : '/kitten' }
    ]

    app.model({
    2 changes: 1 addition & 1 deletion minified.js
    View file
    Original file line number Diff line number Diff line change
    @@ -4393,7 +4393,7 @@ const app = choo()

    const pages = [
    { title : 'Bear', content : 'I\'m a bear', media : 'http://placebear.com/600/400' , slug : '/' },
    { title : 'Kitten', content : 'Meow', media : 'http://placekitten.com/600/400' , slug : 'kitten' }
    { title : 'Kitten', content : 'Meow', media : 'http://placekitten.com/600/400' , slug : '/kitten' }
    ]

    app.model({
  3. outhouse revised this gist Aug 17, 2016. 2 changed files with 2 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@ const html = require('choo/html')
    const app = choo()

    const pages = [
    { title : 'Bear', content : 'I\'m a bear', media : 'http://placebear.com/600/400' , slug : 'bear' },
    { title : 'Bear', content : 'I\'m a bear', media : 'http://placebear.com/600/400' , slug : '/' },
    { title : 'Kitten', content : 'Meow', media : 'http://placekitten.com/600/400' , slug : 'kitten' }
    ]

    2 changes: 1 addition & 1 deletion minified.js
    View file
    Original file line number Diff line number Diff line change
    @@ -4392,7 +4392,7 @@ const html = require('choo/html')
    const app = choo()

    const pages = [
    { title : 'Bear', content : 'I\'m a bear', media : 'http://placebear.com/600/400' , slug : 'bear' },
    { title : 'Bear', content : 'I\'m a bear', media : 'http://placebear.com/600/400' , slug : '/' },
    { title : 'Kitten', content : 'Meow', media : 'http://placekitten.com/600/400' , slug : 'kitten' }
    ]

  4. outhouse revised this gist Aug 17, 2016. 2 changed files with 4 additions and 8 deletions.
    6 changes: 2 additions & 4 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -34,10 +34,8 @@ const mainView = (state, prev, send) => html`
    </main>
    </div>
    `
    const routes = pages.map(function(page){
    return route(page.slug,mainView)
    })
    app.router((route) => routes )

    app.router(route => pages.map(page => route(page.slug, mainView)))

    const tree = app.start()
    document.body.appendChild(tree)
    6 changes: 2 additions & 4 deletions minified.js
    View file
    Original file line number Diff line number Diff line change
    @@ -4423,10 +4423,8 @@ const mainView = (state, prev, send) => html`
    </main>
    </div>
    `
    const routes = pages.map(function(page){
    return route(page.slug,mainView)
    })
    app.router((route) => routes )

    app.router(route => pages.map(page => route(page.slug, mainView)))

    const tree = app.start()
    document.body.appendChild(tree)
  5. outhouse revised this gist Aug 17, 2016. 2 changed files with 8 additions and 8 deletions.
    8 changes: 4 additions & 4 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -34,10 +34,10 @@ const mainView = (state, prev, send) => html`
    </main>
    </div>
    `

    app.router((route) => [
    route('/', mainView)
    ])
    const routes = pages.map(function(page){
    return route(page.slug,mainView)
    })
    app.router((route) => routes )

    const tree = app.start()
    document.body.appendChild(tree)
    8 changes: 4 additions & 4 deletions minified.js
    View file
    Original file line number Diff line number Diff line change
    @@ -4423,10 +4423,10 @@ const mainView = (state, prev, send) => html`
    </main>
    </div>
    `

    app.router((route) => [
    route('/', mainView)
    ])
    const routes = pages.map(function(page){
    return route(page.slug,mainView)
    })
    app.router((route) => routes )

    const tree = app.start()
    document.body.appendChild(tree)
  6. outhouse revised this gist Aug 17, 2016. 2 changed files with 2 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -19,7 +19,7 @@ app.model({
    const menu = (state, prev, send) => html`
    <nav>
    <ul>
    ${pages.map((page,index,array) => html`<li><button onclick=${(e) => send('updatePage', page)}>${page.title}</button></li>`)}
    ${pages.map((page) => html`<li><a href="${page.slug}" onclick=${(e) => send('updatePage', page)}>${page.title}</button></li>`)}
    </ul>
    </nav>
    `
    2 changes: 1 addition & 1 deletion minified.js
    View file
    Original file line number Diff line number Diff line change
    @@ -4408,7 +4408,7 @@ app.model({
    const menu = (state, prev, send) => html`
    <nav>
    <ul>
    ${pages.map((page,index,array) => html`<li><button onclick=${(e) => send('updatePage', page)}>${page.title}</button></li>`)}
    ${pages.map((page) => html`<li><a href="${page.slug}" onclick=${(e) => send('updatePage', page)}>${page.title}</button></li>`)}
    </ul>
    </nav>
    `
  7. outhouse revised this gist Aug 17, 2016. 2 changed files with 2799 additions and 2779 deletions.
    24 changes: 17 additions & 7 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -2,28 +2,38 @@ const choo = require('choo')
    const html = require('choo/html')
    const app = choo()

    const pages = [
    { title : 'Content 1', content : 'This is some content for page 1', media : 'https://placeholdit.imgix.net/~text?txtsize=33&txt=Image%201&w=350&h=150', slug : 'page-1' },
    { title : 'Content 2', content : 'This is content for page 2', media : 'https://placeholdit.imgix.net/~text?txtsize=33&txt=Image%201&w=350&h=150' , slug : 'page-2' }
    const pages = [
    { title : 'Bear', content : 'I\'m a bear', media : 'http://placebear.com/600/400' , slug : 'bear' },
    { title : 'Kitten', content : 'Meow', media : 'http://placekitten.com/600/400' , slug : 'kitten' }
    ]

    app.model({
    state: {
    currentPage: pages[0]
    },
    reducers: {
    updatePage: (data, state) => ({ currentPage: data })
    }
    })

    const mainView = (state, prev, send) => html`
    <div>
    const menu = (state, prev, send) => html`
    <nav>
    <ul>
    ${pages.map((page) => html`<li>${page.title}</li>`)}
    ${pages.map((page,index,array) => html`<li><button onclick=${(e) => send('updatePage', page)}>${page.title}</button></li>`)}
    </ul>
    </nav>
    `

    const mainView = (state, prev, send) => html`
    <div>
    ${menu(state, prev, send)}
    <main>
    <h1>${state.currentPage.title}</h1>
    <img src="${state.currentPage.media}"/>
    <div>${state.currentPage.content}</div>
    </main>
    </div>
    `
    `

    app.router((route) => [
    route('/', mainView)
    5,554 changes: 2,782 additions & 2,772 deletions minified.js
    View file
    2,782 additions, 2,772 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
  8. outhouse created this gist Aug 17, 2016.
    33 changes: 33 additions & 0 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,33 @@
    const choo = require('choo')
    const html = require('choo/html')
    const app = choo()

    const pages = [
    { title : 'Content 1', content : 'This is some content for page 1', media : 'https://placeholdit.imgix.net/~text?txtsize=33&txt=Image%201&w=350&h=150', slug : 'page-1' },
    { title : 'Content 2', content : 'This is content for page 2', media : 'https://placeholdit.imgix.net/~text?txtsize=33&txt=Image%201&w=350&h=150' , slug : 'page-2' }
    ]

    app.model({
    state: {
    currentPage: pages[0]
    }
    })

    const mainView = (state, prev, send) => html`
    <div>
    <ul>
    ${pages.map((page) => html`<li>${page.title}</li>`)}
    </ul>
    <main>
    <h1>${state.currentPage.title}</h1>
    <div>${state.currentPage.content}</div>
    </main>
    </div>
    `

    app.router((route) => [
    route('/', mainView)
    ])

    const tree = app.start()
    document.body.appendChild(tree)
    4,423 changes: 4,423 additions & 0 deletions minified.js
    View file
    4,423 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
    7 changes: 7 additions & 0 deletions package.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    {
    "name": "requirebin-sketch",
    "version": "1.0.0",
    "dependencies": {
    "choo": "3.2.0"
    }
    }
    1 change: 1 addition & 0 deletions page-body.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <!-- contents of this file will be placed inside the <body> -->
    1 change: 1 addition & 0 deletions page-head.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <!-- contents of this file will be placed inside the <head> -->
    1 change: 1 addition & 0 deletions requirebin.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    made with [requirebin](http://requirebin.com)