Merge pull request #609 from datproject/hypertracker

datBase

Author: Joe Hand

.travis.yml

@@ -27,6 +27,6 @@ after_success:
   - if [[ "$TRAVIS_PULL_REQUEST" == "false" ]]; then
     if [[ "$TRAVIS_BRANCH" == "master" || "$TRAVIS_BRANCH" == "beta" || "$TRAVIS_BRANCH" == "released" ]]; then
     docker login -u="$DOCKER_USERNAME" -p="$DOCKER_PASSWORD";
-    docker tag datproject/datfolder:travis-${TRAVIS_BUILD_NUMBER} datproject/datfolder:$TRAVIS_BRANCH;
-    docker push datproject/datfolder:$TRAVIS_BRANCH;
+    docker tag datproject/datbase:travis-${TRAVIS_BUILD_NUMBER} datproject/datbase:$TRAVIS_BRANCH;
+    docker push datproject/datbase:$TRAVIS_BRANCH;
     fi; fi

README.md

@@ -1,8 +1,8 @@
-# Dat Registry
+# datBase
 
-A web registry for the dat network. Hosted at [http://datproject.org](http://datproject.org).
+Open data powered by Dat. Future-friendly apps for your research data pipeline. Hosted at [http://datbase.org](http://datbase.org).
 
-[![Build Status](https://travis-ci.org/datproject/datproject.org.svg?branch=master)](https://travis-ci.org/datproject/datproject.org)
+[![Build Status](https://travis-ci.org/datproject/datbase.svg?branch=master)](https://travis-ci.org/datproject/datbase)
 
 ## Features
 

client/js/app.js

@@ -1,39 +1,31 @@
 const choo = require('choo')
 const persist = require('choo-persist')
-const app = choo()
-const defaults = require('./models/defaults')
+const logger = require('choo-log')
 const css = require('sheetify')
+const defaults = require('./models/defaults')
+const app = choo()
 
 // define models:
 var key = module.parent ? '' : window.location.origin
-app.use(persist({name: 'choo-datproject.org:' + key}))
-app.use(logger)
+app.use(persist({name: 'choo-hypertracker' + key}))
+app.use(logger())
 app.use(require('./defaults')(defaults))
 app.use(require('./models/archive'))
 app.use(require('./models/township'))
-app.use(require('./models/explore'))
 app.use(require('./models/profile'))
 app.use(require('./models/message'))
 app.use(require('./models/preview'))
+app.use(require('./plugins/analytics'))
 
-function logger (state, emitter) {
-  emitter.on('*', function (messageName, data) {
-    console.log('event', messageName, data)
-  })
-}
-
+css('tachyons')
 css('dat-colors')
 
 // define routes:
-app.route('/install', require('./pages/install'))
 app.route('/publish', require('./pages/publish'))
-app.route('/explore', require('./pages/explore'))
 app.route('/register', require('./pages/auth/register'))
 app.route('/login', require('./pages/auth/login'))
 app.route('/reset-password', require('./pages/auth/reset-password'))
 app.route('/404', require('./pages/fourohfour'))
-app.route('/team', require('./pages/landing/team'))
-app.route('/about', require('./pages/landing/about'))
 app.route('/view', require('./pages/archive'))
 app.route('/download/:archiveKey', require('./pages/download'))
 app.route('/profile/edit', require('./pages/auth/edit-profile'))
@@ -44,7 +36,7 @@ app.route('/dat://:archiveKey/contents/*', require('./pages/archive'))
 app.route('/:username/:dataset', require('./pages/archive'))
 app.route('/:username/:dataset/*', require('./pages/archive'))
 app.route('/:username', require('./pages/auth/profile'))
-app.route('/', require('./pages/landing/splash'))
+app.route('/', require('./pages/landing'))
 
 app.defaults = defaults
 

client/js/components/auth/user-panel.js

@@ -77,7 +77,7 @@ const prefix = css`
 module.exports = function (state, emit) {
   if (!state.township.username) return
 
-  return html`<div class="user-panel ${prefix} ${state.township.sidePanel}">
+  return html`<div class="user-panel tl mr2 mr4-l ${prefix} ${state.township.sidePanel}">
       <a class="close-button" title="Close" href="#" onclick=${() => emit('township:sidePanel')}>
         <svg>
           <use xlink:href="#daticon-cross" />
@@ -88,11 +88,11 @@ module.exports = function (state, emit) {
           Signed in as <b>${state.township.profile.username}</b>
         </div>
       </div>
-      <ul>
+      <ul class="list mb0">
         <li><a href="/${state.township.username}" data-no-routing>View Profile</a></li>
         <li><a href="/profile/edit" data-no-routing>Edit Profile</a></li>
-        <li><a href="http://github.com/datproject/datproject.org/issues" target="_blank" class="color-neutral-50 hover-color-neutral-70">Report Bug</a></li>
-        <li><a href="#" onclick=${() => emit('township:logout', {})}>Logout</a></li>
+        <li><a href="http://github.com/datproject/datbase/issues" target="_blank" class="color-neutral-50 hover-color-neutral-70">Report Bug</a></li>
+        <li class="mb0"><a href="#" onclick=${() => emit('township:logout', {})}>Logout</a></li>
       </ul>
   </div>`
 }

client/js/components/header.js

@@ -5,47 +5,42 @@ const importButton = require('../elements/import-button')
 const loginButton = require('../components/login-button')
 const message = require('../elements/message')
 
-var headerStyles = css`
- :host {
-   height: var(--site-header-height);
-   background-color: var(--color-white);
-   border-bottom: 1px solid var(--color-neutral-10);
- }
-`
-
-var navStyles = css`
+const logoCss = css`
   :host {
-    display: flex;
-    height: var(--site-header-height);
-    align-items: center;
+    img {
+      transition: transform .5s ease-in-out;
+      width: inherit;
+    }
+    &:hover, &:focus {
+      img {
+        transform: rotate(360deg);
+      }
+    }
   }
 `
 
-const header = (state, emit) => {
-  return html`<div>
-    <header class="relative ${headerStyles}">
+module.exports = function (state, emit) {
+  return html`
+    <header>
       ${message(state.message)}
-      <div class="container container--top-bar">
-        <div class="flex justify-between items-center relative">
-          ${panel(state, emit)}
-          <nav class="flex items-center ${navStyles}">
-            <a href="/" data-no-routing class="dat-logo">
-              <img src="/public/img/dat-hexagon.svg" />
-              <span class="dat-logo__word">Dat</span>
-            </a>
-            ${importButton(emit)}
-            <a href="https://docs.datproject.org" data-no-routing class="header-nav-link">Docs</a>
-            <a href="/explore" class="header-nav-link">Explore</a>
-            <a href="/install" class="header-nav-link">Install</a>
-          </nav>
-          <div>
-            ${state.township.email ? html`<a href="/publish" class="btn btn--green">Publish</a>` : ''}
+      <nav class="bg-white bb b--neutral-10 dt w-100 border-box pa2 ph4-l">
+        <div class="dtc v-mid w-75">
+          <a class="${logoCss} v-mid dib link dim mr2 w2 h2" href="/" title="DatBase">
+            <img src="/public/img/dat-hexagon.svg" alt="Dat Logo">
+          </a>
+          <a class="mr3 v-mid link dim color-neutral hover-color-neutral b f5 f3-ns dib-ns dn" href="/" title="datBase">dat<span class="color-neutral-60">Base</span></a>
+          ${importButton(emit)}
+          <a href="http://docs.datproject.org" class="ml3 link dim color-neutral ttu tracked f6 f5-ns dib">Docs</a>
+          <a href="http://chat.datproject.org" class="ml3 link dim color-neutral ttu tracked f6 f5-ns dib-l dn">Chat</a>
+        </div>
+        <div class="dtc v-mid w-25 tr">
+          ${state.township.email ? html`<a href="/publish" class="dib-ns dn btn btn--green">Publish</a>` : ''}
+          <div class="dib">
             ${loginButton(state, emit)}
           </div>
+          ${panel(state, emit)}
         </div>
-      </div>
+      </nav>
     </header>
-  </div>`
+  `
 }
-
-module.exports = header

client/js/elements/footer/index.js

@@ -0,0 +1,44 @@
+const html = require('choo/html')
+const css = require('sheetify')
+
+module.exports = function () {
+  return html`
+  <footer class="pv2 bg-neutral white w-100">
+    <section class="ph2 ph4-m mw8-ns center-ns">
+      <div class="pt3">
+        <div class="mb2 lh-copy">
+          <a class="f4 b white dib dim link hover-color-white mr3 mt1" href="/" title="Dat Project">
+            <img src="/public/img/dat-hexagon.svg" class="dib w2 h2 mr2 v-mid mb1" alt="Dat Project">
+            datBase
+          </a>
+          <a class="f4 link white hover-color-neutral-40 b dib mr3 mb3" href="http://blog.datproject.org" title="Blog - Dat Project">
+            Blog
+          </a>
+        </div>
+        <div class="mt3">
+          <a class="white hover-color-white ba b--green no-underline grow b inline-flex items-center mr3 mb3 pv2 ph3" href="https://datproject.org" title="Dat Project Home">
+            <div class="color-green dib mr2"><svg class="w2 h2"><use xlink:href="#daticon-happy-dat"/></svg></div>
+            <span>Dat Project Home</span>
+          </a>
+          <a class="white hover-color-white ba b--green no-underline grow b inline-flex items-center mr3 mb3 pv2 ph3" href="http://chat.datproject.org" title="Join our Chat">
+            <div class="color-green dib mr2"><svg class="w2 h2"><use xlink:href="#daticon-question"/></svg></div>
+            <span>
+              Curious? Join Our Chat
+            </span>
+          </a>
+          <a class="white hover-color-white ba b--green no-underline grow b inline-flex items-center mb3 pv2 ph3" href="https://donate.datproject.org" title="Donate to Code for Science & Society">
+            <div class="color-green dib mr2"><svg class="w2 h2"><use xlink:href="#daticon-star-dat"/></svg></div>
+            <span>Donate to Support Public Data</span>
+          </a>
+        </div>
+        <p class="f6 measure copy lh-copy">
+          Have questions? Join our chat or ask on <a href="http://twitter.com/dat_project" class="color-blue no-underline underline-hover">Twitter</a> or <a href="http://github.com/datproject" class="color-pink no-underline underline-hover color-green">Github</a>.
+        </p>
+      </div>
+      <p class="bt b--dat-neutral-80 color-neutral-50 tc f7 pv2">
+        <strong>Dat</strong> 2017 • Page source on <a class="color-neutral-50 hover-color-pink" href="https://github.com/datproject/datbase.org">github</a>
+      </p>
+    </section>
+  </footer>
+  `
+}

client/js/elements/home-section/index.js

@@ -0,0 +1,79 @@
+const html = require('choo/html')
+
+/*
+Options:
+
+{
+  bgColor: 'bg-white',
+  color: 'neutral',
+  title: 'Section',
+  subtitle: 'Subtitle for this section',
+  sections: [
+    {
+      title: 'First section',
+      text: 'lorem bacon some things'
+    },
+    {
+      title: 'Second section',
+      text: 'lorem bacon some things'
+    },
+    {
+      title: 'Third section',
+      text: 'lorem bacon some things'
+    }
+  ],
+  cta: {
+    link: '#',
+    text: 'Learn More'
+  }
+}
+*/
+
+module.exports = function (props) {
+  props = Object.assign({
+    bgColor: 'bg-white'
+  }, props)
+
+  if (!props.color && props.bgColor === 'bg-neutral') props.color = 'white'
+
+  // Allow html
+  const subtitle = html`<p class="f4 mt1 ${props.bgColor !== 'bg-neutral' ? 'color-neutral-70' : 'color-neutral-30'} horizontal-rule"></p>`
+  subtitle.innerHTML = props.subtitle
+
+  return html`
+    <section class="pv4 ${props.bgColor} ${props.color ? props.color : ''}">
+      <div class="pv2 ph3 pa4-m mw8-ns center-ns">
+        <header>
+          <h2 class="f2 mb0">${props.title}</h2>
+          ${subtitle}
+        </header>
+        <div class="pt3 cf">
+          ${props.sections.map((section) => {
+            return textSection(section)
+          })}
+        </div>
+        ${cta()}
+      </div>
+    </section>
+  `
+
+  function cta () {
+    if (!props.cta) return
+    return html`
+      <p class="pt4">
+        <a href="${props.cta.link}" class="f5 white bg-animate hover-color-white bg-green hover-bg-dark-green pa3 link">${props.cta.text}</a>
+      </p>
+    `
+  }
+
+  function textSection (item) {
+    const text = html`<p class="lh-copy ${props.bgColor === 'bg-neutral' ? 'color-neutral-30' : 'color-neutral-80'} pr4"></p>`
+    text.innerHTML = item.text
+    return html`
+      <div class="fl w-third-ns w-100">
+        <h3 class="f3">${item.title}</h3>
+        ${text}
+      </div>
+    `
+  }
+}

client/js/elements/import-button/index.js

@@ -9,7 +9,7 @@ module.exports = function (emit) {
     }
   }
   return html`<label for="import-dat" class="dat-input">
-    <input name="import-dat" type="text" placeholder="Search" onkeydown=${keydown} class="dat-input__input dat-input__input--icon">
+    <input name="import-dat" type="text" placeholder="view dat://" onkeydown=${keydown} class="dat-input__input dat-input__input--icon">
     <svg class="dat-input__icon pa1">
       <use xlink:href="#daticon-search" />
     </svg>

client/js/models/explore.js

@@ -50,6 +50,7 @@ module.exports = function (state, emitter) {
     api.logout(data, function (err, resp, data) {
       if (err) return emitter.emit('township:update', {error: err.message})
       emitter.emit('township:update', defaults.township)
+      emitter.emit('message:success', 'Successfully Logged Out')
     })
   })
 

client/js/models/township.js

@@ -1,8 +1,8 @@
 const html = require('choo/html')
+const wrapper = require('../wrapper')
 const hyperdrive = require('../../components/hyperdrive')
 const hyperhealth = require('../../components/health')
 const copyButton = require('../../components/copy-button')
-const header = require('../../components/header')
 const preview = require('../../components/preview')
 const fourohfour = require('../../elements/404')
 const error = require('../../elements/error')
@@ -22,14 +22,14 @@ const archivePage = (state, emit) => {
   var err = state.archive.error
   if (!module.parent && state.archive.retries < 3) emit('archive:getMetadata', {timeout: 3000})
   if (err) {
+    emit(state.events.DOMTITLECHANGE, 'Error Loading Dat | datBase')
     if (err.message === 'Block not downloaded') err.message = 'timed out'
     if (!state.archive.entries.length) {
       if (state.archive.retries >= 3) err = {message: 'too many retries'}
       var props = ARCHIVE_ERRORS[err.message]
       if (props) {
         return html`
-        <div>
-        ${header(state, emit)}
+        <div class="">
         ${fourohfour(props)}
         </div>
         `
@@ -40,6 +40,9 @@ const archivePage = (state, emit) => {
   var meta = state.archive.metadata
   var title = meta && meta.title || meta.shortname || state.archive.key
   var description = meta && meta.description
+
+  emit(state.events.DOMTITLECHANGE, `${title} | DatBase`)
+
   var styles = css`
     :host {
       .dat-header {
@@ -100,7 +103,6 @@ const archivePage = (state, emit) => {
 
   return html`
     <div class="${styles}">
-      ${header(state, emit)}
       <div id="dat-info" class="dat-header">
         <div class="container">
           <div class="dat-header-actions-wrapper">
@@ -137,4 +139,4 @@ const archivePage = (state, emit) => {
     </div>`
 }
 
-module.exports = archivePage
+module.exports = wrapper(archivePage)

client/js/pages/archive/index.js

@@ -12,6 +12,8 @@ var prefix = css`
 `
 
 module.exports = (state, emit) => {
+  emit(state.events.DOMTITLECHANGE, 'Edit Profile | datBase')
+
   function onSubmit (e) {
     const data = form(e.target)
     data.id = state.township.profile.id