Merge pull request #46 from blockstack/develop

Version 0.6.0 Release
stacks-archive · Apr 19, 2019 · 1ceb327 · 1ceb327
2 parents 0eeb149 + 02b25bd
commit 1ceb327
Show file tree

Hide file tree

Showing 28 changed files with 512 additions and 114 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -7,7 +7,7 @@ jobs:
   build:
     docker:
       # specify the version you desire here
-      - image: circleci/node:8.11.3
+      - image: circleci/node:10
 
       # Specify service dependencies here if necessary
       # CircleCI maintains a library of pre-built images
@@ -18,13 +18,6 @@ jobs:
 
     steps:
       - checkout
-      - run:
-          name: "Update npm"
-          command: |
-            npm install npm@latest
-            sudo rm -rf /usr/local/lib/node_modules/npm
-            sudo mv node_modules/npm /usr/local/lib/node_modules/npm
-            sudo chown -R 500:500 /usr/local/lib/node_modules/npm
 
       # Download and cache dependencies
       - restore_cache:

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,7 @@
+# Changelog
+
+# 0.6.0 - April 19, 2019
+
+- Added a new Webpack-based generator. It's similar to the 'default' generator that uses browserify, but may result in smaller bundle sizes and an easier development environment.
+- Updated React generator to use blockstack.js v19.1.0 and uses the new `UserSession` API.
+- Updated the default generator to use blockstack.js v19.1.0 and uses the new `UserSession` API.
diff --git a/README.md b/README.md
@@ -24,12 +24,24 @@ mkdir hello-blockstack && cd $_
 yo blockstack
 ```
 
+---
+
+*For Webpack*
+
+```bash
+yo blockstack:webpack
+```
+
+---
+
 *For React.JS*
 
 ```bash
 yo blockstack:react
 ```
 
+---
+
 5) Start the development server:
 
 ```bash

diff --git a/app/index.js b/app/index.js
@@ -68,6 +68,10 @@ class BlockstackGenerator extends Generator {
       this.templatePath('public/icon-192x192.png'),
       this.destinationPath('public/icon-192x192.png')
     )
+    this.fs.copy(
+      this.templatePath('public/favicon.ico'),
+      this.destinationPath('public/favicon.ico')
+    )
     // html
     this.fs.copy(
       this.templatePath('public/index.html'),

diff --git a/app/templates/_package.json b/app/templates/_package.json
@@ -18,11 +18,11 @@
   },
   "homepage": "https://github.com/blockstack/hello-blockstack#readme",
   "devDependencies": {
-    "browserify": "^14.1.0",
-    "express": "^4.15.2",
-    "opn": "^4.0.2"
+    "browserify": "^16.2.3",
+    "express": "^4.16.4",
+    "open": "^6.1.0"
   },
   "dependencies": {
-    "blockstack": "^18.0.4"
+    "blockstack": "^19.1.0"
   }
 }
diff --git a/app/templates/public/app.js b/app/templates/public/app.js
@@ -1,15 +1,20 @@
-document.addEventListener("DOMContentLoaded", function(event) {
-  document.getElementById('signin-button').addEventListener('click', function(event) {
+document.addEventListener("DOMContentLoaded", event => {
+  const appConfig = new blockstack.AppConfig()
+  const userSession = new blockstack.UserSession({ appConfig: appConfig })
+
+  document.getElementById('signin-button').addEventListener('click', event => {
     event.preventDefault()
-    blockstack.redirectToSignIn()
+    userSession.redirectToSignIn()
   })
-  document.getElementById('signout-button').addEventListener('click', function(event) {
+
+  document.getElementById('signout-button').addEventListener('click', event => {
     event.preventDefault()
-    blockstack.signUserOut(window.location.href)
+    userSession.signUserOut()
+    window.location = window.location.origin
   })
 
-  function showProfile(profile) {
-    var person = new blockstack.Person(profile)
+  function showProfile (profile) {
+    let person = new blockstack.Person(profile)
     document.getElementById('heading-name').innerHTML = person.name() ? person.name() : "Nameless Person"
     if(person.avatarUrl()) {
       document.getElementById('avatar-image').setAttribute('src', person.avatarUrl())
@@ -18,11 +23,11 @@ document.addEventListener("DOMContentLoaded", function(event) {
     document.getElementById('section-2').style.display = 'block'
   }
 
-  if (blockstack.isUserSignedIn()) {
-    var profile = blockstack.loadUserData().profile
-      showProfile(profile)
-  } else if (blockstack.isSignInPending()) {
-    blockstack.handlePendingSignIn().then(function(userData) {
+  if (userSession.isUserSignedIn()) {
+    const { profile } = userSession.loadUserData()
+    showProfile(profile)
+  } else if (userSession.isSignInPending()) {
+    userSession.handlePendingSignIn().then(userData => {
       window.location = window.location.origin
     })
   }

diff --git a/app/templates/public/favicon.ico b/app/templates/public/favicon.ico
diff --git a/app/templates/public/index.html b/app/templates/public/index.html
@@ -1,35 +1,39 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Hello, Blockstack!</title>
+  <link rel="icon" type="image/x-icon" href="favicon.ico" />
   <link rel="stylesheet" href="bootstrap.min.css" />
   <link rel="stylesheet" href="app.css" />
   <script src="bundle.js"></script>
   <script src="app.js"></script>
 </head>
 <body>
   <div class="site-wrapper">
-    <div class="site-wrapper-inner">
-      <div class="panel-landing" id="section-1">
-        <h1 class="landing-heading">Hello, Blockstack!</h1>
-        <p class="lead">
-          <a href="#" class="btn btn-primary btn-lg" id="signin-button">
-            Sign In with Blockstack
-          </a>
-        </p>
-      </div>
-      <div class="panel-welcome hide" id="section-2">
-        <div class="avatar-section">
-          <img src="https://s3.amazonaws.com/onename/avatar-placeholder.png" class="img-rounded avatar" id="avatar-image">
+      <div class="site-wrapper-inner">
+        <div class="panel-landing" id="section-1">
+          <h1 class="landing-heading">Hello, Blockstack!</h1>
+          <p class="lead">
+            <a href="#" class="btn btn-primary btn-lg" id="signin-button">
+              Sign In with Blockstack
+            </a>
+          </p>
+        </div>
+        <div class="panel-welcome hide" id="section-2">
+          <div class="avatar-section">
+            <img src="https://s3.amazonaws.com/onename/avatar-placeholder.png" class="img-rounded avatar" id="avatar-image">
+          </div>
+          <h1>Hello, <span id="heading-name">Anonymous</span>!</h1>
+          <p class="lead">
+            <a href="#" class="btn btn-primary btn-lg" id="signout-button">
+              Logout
+            </a>
+          </p>
         </div>
-        <h1>Hello, <span id="heading-name">Anonymous</span>!</h1>
-        <p class="lead">
-          <a href="#" class="btn btn-primary btn-lg" id="signout-button">
-            Logout
-          </a>
-        </p>
       </div>
     </div>
-  </div>
 </body>
 </html>
diff --git a/app/templates/server.js b/app/templates/server.js
@@ -1,22 +1,22 @@
 const express = require('express')
-const opn = require('opn')
+const open = require('open')
 
 const app = express()
 const port = 5000
 
-function allowCrossDomain(req, res, next) {
+function allowCrossDomain (req, res, next) {
   res.header('Access-Control-Allow-Origin', '*')
   res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE')
   res.header('Access-Control-Allow-Headers', 'Content-Type')
   next()
 }
 
 app.use(allowCrossDomain)
-app.use('/', express.static(__dirname + '/public'))
-app.listen(port, (err) => {
-  if (err) {
-    return console.log('something bad happened', err)
-  }
-  console.log(`server is listening on ${port}`)
-  opn(`http://localhost:${port}`)
-})
+app.use('/', express.static(`${__dirname}/public`))
+
+app.listen(port, async (err) => {
+  if (err) { console.error('Something bad happend', err) }
+
+  console.log(`App running at: http://localhost:${port}`)
+  await open(`http://localhost:${port}`)
+})