updated pages to use PageLayout and moved show pages

client/build/app.js

@@ -15,7 +15,7 @@ var _AboutPage = _interopRequireDefault(require("@pages/AboutPage"));
 
 var _LoginPage = _interopRequireDefault(require("@pages/LoginPage"));
 
-var _ShowPage = _interopRequireDefault(require("@pages/ShowPage"));
+var _ContentPageWrapper = _interopRequireDefault(require("@pages/ContentPageWrapper"));
 
 var _FourOhFourPage = _interopRequireDefault(require("@pages/FourOhFourPage"));
 
@@ -43,11 +43,11 @@ var customizedApp = function customizedApp() {
   }), _react.default.createElement(_reactRouterDom.Route, {
     exact: true,
     path: "/:identifier/:claim",
-    component: _ShowPage.default
+    component: _ContentPageWrapper.default
   }), _react.default.createElement(_reactRouterDom.Route, {
     exact: true,
     path: "/:claim",
-    component: _ShowPage.default
+    component: _ContentPageWrapper.default
   }), _react.default.createElement(_reactRouterDom.Route, {
     component: _FourOhFourPage.default
   }));

client/build/components/AboutChannels/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var AboutChannels = function AboutChannels() {
+  return _react.default.createElement("div", null, _react.default.createElement("p", null, "Channels allow you to publish and group content under an identity. You can create a channel for yourself, or share one with like-minded friends.  You can create 1 channel, or 100, so whether you're ", _react.default.createElement("a", {
+    className: "link--primary",
+    target: "_blank",
+    href: "/@catalonia2017:43dcf47163caa21d8404d9fe9b30f78ef3e146a8"
+  }, "documenting important events"), ", or making a public repository for ", _react.default.createElement("a", {
+    className: "link--primary",
+    target: "_blank",
+    href: "/@catGifs"
+  }, "cat gifs"), " (password: '1234'), try creating a channel for it!"));
+};
+
+var _default = AboutChannels;
+exports.default = _default;

client/build/components/ChannelTools/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ChannelLoginForm = _interopRequireDefault(require("@containers/ChannelLoginForm"));
+
+var _ChannelCreateForm = _interopRequireDefault(require("@containers/ChannelCreateForm"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ChannelTools = function ChannelTools() {
+  return _react.default.createElement("div", null, _react.default.createElement("h3", {
+    className: "h3--no-bottom"
+  }, "Log in to an existing channel:"), _react.default.createElement(_ChannelLoginForm.default, null), _react.default.createElement("h3", {
+    className: "h3--no-bottom"
+  }, "Create a brand new channel:"), _react.default.createElement(_ChannelCreateForm.default, null));
+};
+
+var _default = ChannelTools;
+exports.default = _default;

client/build/pages/AboutPage/index.js

@@ -9,7 +9,11 @@ var _react = _interopRequireDefault(require("react"));
 
 var _PageLayout = _interopRequireDefault(require("@components/PageLayout"));
 
-var _AboutPageContent = _interopRequireDefault(require("@components/AboutPageContent"));
+var _HorizontalSplit = _interopRequireDefault(require("@components/HorizontalSplit"));
+
+var _AboutSpeechOne = _interopRequireDefault(require("@components/AboutSpeechOne"));
+
+var _AboutSpeechTwo = _interopRequireDefault(require("@components/AboutSpeechTwo"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -46,7 +50,10 @@ function (_React$Component) {
       return _react.default.createElement(_PageLayout.default, {
         pageTitle: 'About',
         pageUri: 'about'
-      }, _react.default.createElement(_AboutPageContent.default, null));
+      }, _react.default.createElement(_HorizontalSplit.default, {
+        leftSide: _react.default.createElement(_AboutSpeechOne.default, null),
+        rightSide: _react.default.createElement(_AboutSpeechTwo.default, null)
+      }));
     }
   }]);
 

client/build/pages/ContentPageWrapper/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _reactRedux = require("react-redux");
+
+var _show = require("../../actions/show");
+
+var _view = _interopRequireDefault(require("./view"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var mapStateToProps = function mapStateToProps(_ref) {
+  var show = _ref.show;
+  return {
+    error: show.request.error,
+    requestType: show.request.type
+  };
+};
+
+var mapDispatchToProps = {
+  onHandleShowPageUri: _show.onHandleShowPageUri
+};
+
+var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_view.default);
+
+exports.default = _default;

client/build/pages/ContentPageWrapper/view.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ErrorPage = _interopRequireDefault(require("@pages/ErrorPage"));
+
+var _ShowAssetLite = _interopRequireDefault(require("@pages/ShowAssetLite"));
+
+var _ShowAssetDetails = _interopRequireDefault(require("@pages/ShowAssetDetails"));
+
+var _ShowChannel = _interopRequireDefault(require("@pages/ShowChannel"));
+
+var _show_request_types = require("../../constants/show_request_types");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } _setPrototypeOf(subClass.prototype, superClass && superClass.prototype); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.getPrototypeOf || function _getPrototypeOf(o) { return o.__proto__; }; return _getPrototypeOf(o); }
+
+var ContentPageWrapper =
+/*#__PURE__*/
+function (_React$Component) {
+  function ContentPageWrapper() {
+    _classCallCheck(this, ContentPageWrapper);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(ContentPageWrapper).apply(this, arguments));
+  }
+
+  _createClass(ContentPageWrapper, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.onHandleShowPageUri(this.props.match.params);
+    }
+  }, {
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      if (nextProps.match.params !== this.props.match.params) {
+        this.props.onHandleShowPageUri(nextProps.match.params);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          error = _this$props.error,
+          requestType = _this$props.requestType;
+
+      if (error) {
+        return _react.default.createElement(_ErrorPage.default, {
+          error: error
+        });
+      }
+
+      switch (requestType) {
+        case _show_request_types.CHANNEL:
+          return _react.default.createElement(_ShowChannel.default, null);
+
+        case _show_request_types.ASSET_LITE:
+          return _react.default.createElement(_ShowAssetLite.default, null);
+
+        case _show_request_types.ASSET_DETAILS:
+          return _react.default.createElement(_ShowAssetDetails.default, null);
+
+        default:
+          return _react.default.createElement("p", null, "loading...");
+      }
+    }
+  }]);
+
+  _inherits(ContentPageWrapper, _React$Component);
+
+  return ContentPageWrapper;
+}(_react.default.Component);
+
+;
+var _default = ContentPageWrapper;
+exports.default = _default;

client/build/pages/ErrorPage/index.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _NavBar = _interopRequireDefault(require("@containers/NavBar"));
+var _PageLayout = _interopRequireDefault(require("@components/PageLayout"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -44,9 +44,10 @@ function (_React$Component) {
     key: "render",
     value: function render() {
       var error = this.props.error;
-      return _react.default.createElement("div", null, _react.default.createElement(_NavBar.default, null), _react.default.createElement("div", {
+      return _react.default.createElement(_PageLayout.default, {
-        className: "row row--padded"
+        pageTitle: 'Error',
-      }, _react.default.createElement("p", null, error)));
+        pageUri: 'error'
+      }, _react.default.createElement("p", null, error));
     }
   }]);
 

client/build/pages/FourOhFourPage/index.js

@@ -5,22 +5,54 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _reactRedux = require("react-redux");
+var _react = _interopRequireDefault(require("react"));
 
-var _view = _interopRequireDefault(require("./view"));
+var _PageLayout = _interopRequireDefault(require("@components/PageLayout"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var mapStateToProps = function mapStateToProps(_ref) {
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-  var _ref$site = _ref.site,
-      host = _ref$site.host,
-      title = _ref$site.title;
-  return {
-    host: host,
-    title: title
-  };
-};
 
-var _default = (0, _reactRedux.connect)(mapStateToProps, null)(_view.default);
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } _setPrototypeOf(subClass.prototype, superClass && superClass.prototype); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.getPrototypeOf || function _getPrototypeOf(o) { return o.__proto__; }; return _getPrototypeOf(o); }
+
+var FourOhForPage =
+/*#__PURE__*/
+function (_React$Component) {
+  function FourOhForPage() {
+    _classCallCheck(this, FourOhForPage);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(FourOhForPage).apply(this, arguments));
+  }
+
+  _createClass(FourOhForPage, [{
+    key: "render",
+    value: function render() {
+      return _react.default.createElement(_PageLayout.default, {
+        pageTitle: '404',
+        pageUri: '/404'
+      }, _react.default.createElement("h2", null, "404"), _react.default.createElement("p", null, "That page does not exist"));
+    }
+  }]);
+
+  _inherits(FourOhForPage, _React$Component);
+
+  return FourOhForPage;
+}(_react.default.Component);
+
+;
+var _default = FourOhForPage;
 exports.default = _default;

client/build/pages/FourOhFourPage/view.js

@@ -7,9 +7,7 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactHelmet = _interopRequireDefault(require("react-helmet"));
+var _PageLayout = _interopRequireDefault(require("@components/PageLayout"));
-
-var _index = _interopRequireDefault(require("@containers/NavBar/index"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -43,15 +41,10 @@ function (_React$Component) {
   _createClass(FourOhForPage, [{
     key: "render",
     value: function render() {
-      var _this$props = this.props,
+      return _react.default.createElement(_PageLayout.default, {
-          title = _this$props.title,
+        pageTitle: '404',
-          host = _this$props.host;
+        pageUri: '/404'
-      return _react.default.createElement("div", null, _react.default.createElement(_reactHelmet.default, null, _react.default.createElement("title", null, title, " - 404"), _react.default.createElement("link", {
+      }, _react.default.createElement("h2", null, "404"), _react.default.createElement("p", null, "That page does not exist"));
-        rel: "canonical",
-        href: "".concat(host, "/404")
-      })), _react.default.createElement(_index.default, null), _react.default.createElement("div", {
-        className: "row row--padded"
-      }, _react.default.createElement("h2", null, "404"), _react.default.createElement("p", null, "That page does not exist")));
     }
   }]);
 

client/build/pages/HomePage/index.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _PageLayout = _interopRequireDefault(require("@components/PageLayout"));
 
-var _HomePageContent = _interopRequireDefault(require("@components/HomePageContent"));
+var _PublishTool = _interopRequireDefault(require("@containers/PublishTool"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -46,7 +46,7 @@ function (_React$Component) {
       return _react.default.createElement(_PageLayout.default, {
         pageTitle: 'Speech',
         pageUri: ''
-      }, _react.default.createElement(_HomePageContent.default, null));
+      }, _react.default.createElement(_PublishTool.default, null));
     }
   }]);
 

client/build/pages/LoginPage/view.js

@@ -9,13 +9,13 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactRouterDom = require("react-router-dom");
 
-var _SEO = _interopRequireDefault(require("@components/SEO"));
+var _PageLayout = _interopRequireDefault(require("@components/PageLayout"));
 
-var _NavBar = _interopRequireDefault(require("@containers/NavBar"));
+var _HorizontalSplit = _interopRequireDefault(require("@components/HorizontalSplit"));
 
-var _ChannelLoginForm = _interopRequireDefault(require("@containers/ChannelLoginForm"));
+var _AboutChannels = _interopRequireDefault(require("@components/AboutChannels"));
 
-var _ChannelCreateForm = _interopRequireDefault(require("@containers/ChannelCreateForm"));
+var _ChannelTools = _interopRequireDefault(require("@components/ChannelTools"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -57,32 +57,13 @@ function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      return _react.default.createElement("div", null, _react.default.createElement(_SEO.default, {
+      return _react.default.createElement(_PageLayout.default, {
         pageTitle: 'Login',
         pageUri: 'login'
-      }), _react.default.createElement(_NavBar.default, null), _react.default.createElement("div", {
+      }, _react.default.createElement(_HorizontalSplit.default, {
-        className: "row row--padded"
+        leftSide: _react.default.createElement(_AboutChannels.default, null),
-      }, _react.default.createElement("div", {
+        rightSide: _react.default.createElement(_ChannelTools.default, null)
-        className: "column column--5 column--med-10 align-content-top"
+      }));
-      }, _react.default.createElement("div", {
-        className: "column column--8 column--med-10"
-      }, _react.default.createElement("p", null, "Channels allow you to publish and group content under an identity. You can create a channel for yourself, or share one with like-minded friends.  You can create 1 channel, or 100, so whether you're ", _react.default.createElement("a", {
-        className: "link--primary",
-        target: "_blank",
-        href: "/@catalonia2017:43dcf47163caa21d8404d9fe9b30f78ef3e146a8"
-      }, "documenting important events"), ", or making a public repository for ", _react.default.createElement("a", {
-        className: "link--primary",
-        target: "_blank",
-        href: "/@catGifs"
-      }, "cat gifs"), " (password: '1234'), try creating a channel for it!"))), _react.default.createElement("div", {
-        className: "column column--5 column--med-10 align-content-top"
-      }, _react.default.createElement("div", {
-        className: "column column--8 column--med-10"
-      }, _react.default.createElement("h3", {
-        className: "h3--no-bottom"
-      }, "Log in to an existing channel:"), _react.default.createElement(_ChannelLoginForm.default, null), _react.default.createElement("h3", {
-        className: "h3--no-bottom"
-      }, "Create a brand new channel:"), _react.default.createElement(_ChannelCreateForm.default, null)))));
     }
   }]);
 

client/build/pages/MultisitePage/index.js

@@ -7,9 +7,7 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _SEO = _interopRequireDefault(require("@components/SEO"));
+var _PageLayout = _interopRequireDefault(require("@components/PageLayout"));
-
-var _NavBar = _interopRequireDefault(require("@containers/NavBar"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -43,13 +41,9 @@ function (_React$Component) {
   _createClass(MultisitePage, [{
     key: "render",
     value: function render() {
-      return _react.default.createElement("div", null, _react.default.createElement(_SEO.default, {
+      return _react.default.createElement(_PageLayout.default, {
         pageTitle: 'Multisite',
-        pageUri: 'multisite'
+        pageUri: '/multisite'
-      }), _react.default.createElement(_NavBar.default, null), _react.default.createElement("div", {
-        className: "row row--padded flex-container--row flex-container--center-center"
-      }, _react.default.createElement("div", {
-        className: "column column--8 column--med-10"
       }, _react.default.createElement("p", {
         className: "pull-quote"
       }, "Introducing Spee.ch Multisite"), _react.default.createElement("p", null, "Hi there!  My name is ", _react.default.createElement("a", {
@@ -85,7 +79,7 @@ function (_React$Component) {
       }, "CLICK HERE TO RSVP!"))), _react.default.createElement("p", null, "At this first demonstration, we will walk through preparing a server environment, installing LBRY and Spee.ch, and how to make local changes to your Spee.ch instance.  Details below:"), _react.default.createElement("ul", null, _react.default.createElement("li", null, "When: Friday, May 18, 2018"), _react.default.createElement("li", null, "Time: 5:00 p.m. PST"), _react.default.createElement("li", null, "Where: Google Hangouts"), _react.default.createElement("li", null, "Link: ", _react.default.createElement("a", {
         href: 'https://meet.google.com/aex-ghqg-kcs',
         target: '_blank'
-      }, "meet.google.com/aex-ghqg-kcs")), _react.default.createElement("li", null, "System Requirements: If you have a server, please make sure you have MySql, Node and NPM installed. If you need help installing the above, or if you need a server to run your own instance on, please join the Hangout 30 minutes ahead of time and we will help get you set up =]"), _react.default.createElement("li", null, "Questions: hello@lbry.io")))));
+      }, "meet.google.com/aex-ghqg-kcs")), _react.default.createElement("li", null, "System Requirements: If you have a server, please make sure you have MySql, Node and NPM installed. If you need help installing the above, or if you need a server to run your own instance on, please join the Hangout 30 minutes ahead of time and we will help get you set up =]"), _react.default.createElement("li", null, "Questions: hello@lbry.io")));
     }
   }]);
 
@@ -94,6 +88,5 @@ function (_React$Component) {
   return MultisitePage;
 }(_react.default.Component);
 
-;
 var _default = MultisitePage;
 exports.default = _default;

client/build/pages/ShowAssetDetails/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _reactRedux = require("react-redux");
+
+var _view = _interopRequireDefault(require("./view"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var mapStateToProps = function mapStateToProps(_ref) {
+  var show = _ref.show;
+  // select request info
+  var requestId = show.request.id; // select asset info
+
+  var asset;
+  var request = show.requestList[requestId] || null;
+  var assetList = show.assetList;
+
+  if (request && assetList) {
+    var assetKey = request.key; // note: just store this in the request
+
+    asset = assetList[assetKey] || null;
+  }
+
+  ; // return props
+
+  return {
+    asset: asset
+  };
+};
+
+var _default = (0, _reactRedux.connect)(mapStateToProps, null)(_view.default);
+
+exports.default = _default;

client/build/pages/ShowAssetDetails/view.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _SEO = _interopRequireDefault(require("@components/SEO"));
+
+var _index = _interopRequireDefault(require("../../containers/NavBar/index"));
+
+var _index2 = _interopRequireDefault(require("../ErrorPage/index"));
+
+var _index3 = _interopRequireDefault(require("../../containers/AssetTitle/index"));
+
+var _index4 = _interopRequireDefault(require("../../containers/AssetDisplay/index"));
+
+var _index5 = _interopRequireDefault(require("../../containers/AssetInfo/index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } _setPrototypeOf(subClass.prototype, superClass && superClass.prototype); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.getPrototypeOf || function _getPrototypeOf(o) { return o.__proto__; }; return _getPrototypeOf(o); }
+
+var ShowAssetDetails =
+/*#__PURE__*/
+function (_React$Component) {
+  function ShowAssetDetails() {
+    _classCallCheck(this, ShowAssetDetails);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(ShowAssetDetails).apply(this, arguments));
+  }
+
+  _createClass(ShowAssetDetails, [{
+    key: "render",
+    value: function render() {
+      var asset = this.props.asset;
+
+      if (asset) {
+        var name = asset.claimData.name;
+        return _react.default.createElement("div", null, _react.default.createElement(_SEO.default, {
+          pageTitle: "".concat(name, " - details"),
+          asset: asset
+        }), _react.default.createElement(_index.default, null), _react.default.createElement("div", {
+          className: "row row--tall row--padded"
+        }, _react.default.createElement("div", {
+          className: "column column--10"
+        }, _react.default.createElement(_index3.default, null)), _react.default.createElement("div", {
+          className: "column column--5 column--sml-10 align-content-top"
+        }, _react.default.createElement("div", {
+          className: "row row--padded show-details-container"
+        }, _react.default.createElement(_index4.default, null))), _react.default.createElement("div", {
+          className: "column column--5 column--sml-10 align-content-top"
+        }, _react.default.createElement("div", {
+          className: "row row--padded"
+        }, _react.default.createElement(_index5.default, null)))));
+      }
+
+      ;
+      return _react.default.createElement(_index2.default, {
+        error: 'loading asset data...'
+      });
+    }
+  }]);
+
+  _inherits(ShowAssetDetails, _React$Component);
+
+  return ShowAssetDetails;
+}(_react.default.Component);
+
+;
+var _default = ShowAssetDetails;
+exports.default = _default;

client/build/pages/ShowAssetLite/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _reactRedux = require("react-redux");
+
+var _view = _interopRequireDefault(require("./view"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var mapStateToProps = function mapStateToProps(_ref) {
+  var show = _ref.show;
+  // select request info
+  var requestId = show.request.id; // select asset info
+
+  var asset;
+  var request = show.requestList[requestId] || null;
+  var assetList = show.assetList;
+
+  if (request && assetList) {
+    var assetKey = request.key; // note: just store this in the request
+
+    asset = assetList[assetKey] || null;
+  }
+
+  ; // return props
+
+  return {
+    asset: asset
+  };
+};
+
+var _default = (0, _reactRedux.connect)(mapStateToProps, null)(_view.default);
+
+exports.default = _default;

client/build/pages/ShowAssetLite/view.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactRouterDom = require("react-router-dom");
+
+var _SEO = _interopRequireDefault(require("@components/SEO"));
+
+var _index = _interopRequireDefault(require("../../containers/AssetDisplay/index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } _setPrototypeOf(subClass.prototype, superClass && superClass.prototype); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.getPrototypeOf || function _getPrototypeOf(o) { return o.__proto__; }; return _getPrototypeOf(o); }
+
+var ShowLite =
+/*#__PURE__*/
+function (_React$Component) {
+  function ShowLite() {
+    _classCallCheck(this, ShowLite);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(ShowLite).apply(this, arguments));
+  }
+
+  _createClass(ShowLite, [{
+    key: "render",
+    value: function render() {
+      var asset = this.props.asset;
+
+      if (asset) {
+        var _asset$claimData = asset.claimData,
+            name = _asset$claimData.name,
+            claimId = _asset$claimData.claimId;
+        return _react.default.createElement("div", {
+          className: "row row--tall flex-container--column flex-container--center-center show-lite-container"
+        }, _react.default.createElement(_SEO.default, {
+          pageTitle: name,
+          asset: asset
+        }), _react.default.createElement(_index.default, null), _react.default.createElement(_reactRouterDom.Link, {
+          id: "asset-boilerpate",
+          className: "link--primary fine-print",
+          to: "/".concat(claimId, "/").concat(name)
+        }, "hosted via Spee.ch"));
+      }
+
+      return _react.default.createElement("div", {
+        className: "row row--tall row--padded flex-container--column flex-container--center-center"
+      }, _react.default.createElement("p", null, "loading asset data..."));
+    }
+  }]);
+
+  _inherits(ShowLite, _React$Component);
+
+  return ShowLite;
+}(_react.default.Component);
+
+;
+var _default = ShowLite;
+exports.default = _default;

client/build/pages/ShowChannel/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _reactRedux = require("react-redux");
+
+var _view = _interopRequireDefault(require("./view"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var mapStateToProps = function mapStateToProps(_ref) {
+  var show = _ref.show;
+  // select request info
+  var requestId = show.request.id; // select request
+
+  var previousRequest = show.requestList[requestId] || null; // select channel
+
+  var channel;
+
+  if (previousRequest) {
+    var channelKey = previousRequest.key;
+    channel = show.channelList[channelKey] || null;
+  }
+
+  return {
+    channel: channel
+  };
+};
+
+var _default = (0, _reactRedux.connect)(mapStateToProps, null)(_view.default);
+
+exports.default = _default;

client/build/pages/ShowChannel/view.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _PageLayout = _interopRequireDefault(require("@components/PageLayout"));
+
+var _ErrorPage = _interopRequireDefault(require("@pages/ErrorPage"));
+
+var _ChannelClaimsDisplay = _interopRequireDefault(require("@containers/ChannelClaimsDisplay"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } _setPrototypeOf(subClass.prototype, superClass && superClass.prototype); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.getPrototypeOf || function _getPrototypeOf(o) { return o.__proto__; }; return _getPrototypeOf(o); }
+
+var ShowChannel =
+/*#__PURE__*/
+function (_React$Component) {
+  function ShowChannel() {
+    _classCallCheck(this, ShowChannel);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(ShowChannel).apply(this, arguments));
+  }
+
+  _createClass(ShowChannel, [{
+    key: "render",
+    value: function render() {
+      var channel = this.props.channel;
+
+      if (channel) {
+        var name = channel.name,
+            longId = channel.longId,
+            shortId = channel.shortId;
+        return _react.default.createElement(_PageLayout.default, {
+          pageTitle: name,
+          pageUri: channel
+        }, _react.default.createElement("h2", null, "channel name: ", name), _react.default.createElement("p", {
+          className: 'fine-print'
+        }, "full channel id: ", longId), _react.default.createElement("p", {
+          className: 'fine-print'
+        }, "short channel id: ", shortId), _react.default.createElement(_ChannelClaimsDisplay.default, null));
+      }
+
+      ;
+      return _react.default.createElement(_ErrorPage.default, {
+        error: 'loading channel data...'
+      });
+    }
+  }]);
+
+  _inherits(ShowChannel, _React$Component);
+
+  return ShowChannel;
+}(_react.default.Component);
+
+;
+var _default = ShowChannel;
+exports.default = _default;

client/src/app.js

@@ -4,7 +4,7 @@ import { Route, Switch } from 'react-router-dom';
 import HomePage  from '@pages/HomePage';
 import AboutPage from '@pages/AboutPage';
 import LoginPage from '@pages/LoginPage';
-import ShowPage from '@pages/ShowPage';
+import ContentPageWrapper from '@pages/ContentPageWrapper';
 import FourOhFourPage from '@pages/FourOhFourPage';
 import MultisitePage from '@pages/MultisitePage';
 
@@ -15,8 +15,8 @@ const customizedApp = () => {
       <Route exact path='/about' component={AboutPage} />
       <Route exact path='/login' component={LoginPage} />
       <Route exact path='/multisite' component={MultisitePage} />
-      <Route exact path='/:identifier/:claim' component={ShowPage} />
+      <Route exact path='/:identifier/:claim' component={ContentPageWrapper} />
-      <Route exact path='/:claim' component={ShowPage} />
+      <Route exact path='/:claim' component={ContentPageWrapper} />
       <Route component={FourOhFourPage} />
     </Switch>
   );

client/src/components/AboutChannels/index.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const AboutChannels = () => {
+  return (
+    <div>
+      <p>Channels allow you to publish and group content under an identity. You can create a channel for yourself, or share one with like-minded friends.  You can create 1 channel, or 100, so whether you're <a className='link--primary' target='_blank' href='/@catalonia2017:43dcf47163caa21d8404d9fe9b30f78ef3e146a8'>documenting important events</a>, or making a public repository for <a className='link--primary' target='_blank' href='/@catGifs'>cat gifs</a> (password: '1234'), try creating a channel for it!</p>
+    </div>
+  );
+};
+
+export default AboutChannels;

client/src/components/AboutPageContent/index.jsx

@@ -1,16 +0,0 @@
-import React from 'react';
-
-import AboutSpeechOne from '@components/AboutSpeechOne';
-import AboutSpeechTwo from '@components/AboutSpeechTwo';
-import HorizontalSplit from '@components/HorizontalSplit';
-
-const AboutPageContent = () => {
-  return (
-    <HorizontalSplit
-      leftSide={<AboutSpeechOne />}
-      rightSide={<AboutSpeechTwo />}
-    />
-  );
-};
-
-export default AboutPageContent;

client/src/components/ChannelTools/index.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ChannelLoginForm from '@containers/ChannelLoginForm';
+import ChannelCreateForm from '@containers/ChannelCreateForm';
+
+const ChannelTools = () => {
+  return (
+    <div>
+      <h3 className='h3--no-bottom'>Log in to an existing channel:</h3>
+      <ChannelLoginForm />
+      <h3 className='h3--no-bottom'>Create a brand new channel:</h3>
+      <ChannelCreateForm />
+    </div>
+  );
+};
+
+export default ChannelTools;

client/src/components/HomePageContent/index.jsx

@@ -1,11 +0,0 @@
-import React from 'react';
-
-import PublishTool from '@containers/PublishTool';
-
-const HomePageContent = () => {
-  return (
-    <PublishTool />
-  );
-};
-
-export default HomePageContent;

client/src/containers/ShowChannel/view.jsx

@@ -1,38 +0,0 @@
-import React from 'react';
-// components
-import SEO from '@components/SEO';
-// pages
-import ErrorPage from '@pages/ErrorPage';
-// containers
-import NavBar from '../NavBar';
-import ChannelClaimsDisplay from '../ChannelClaimsDisplay';
-
-class ShowChannel extends React.Component {
-  render () {
-    const { channel } = this.props;
-    if (channel) {
-      const { name, longId, shortId } = channel;
-      return (
-        <div>
-          <SEO pageTitle={name} channel={channel} />
-          <NavBar />
-          <div className='row row--tall row--padded'>
-            <div className='column column--10'>
-              <h2>channel name: {name}</h2>
-              <p className={'fine-print'}>full channel id: {longId}</p>
-              <p className={'fine-print'}>short channel id: {shortId}</p>
-            </div>
-            <div className='column column--10'>
-              <ChannelClaimsDisplay />
-            </div>
-          </div>
-        </div>
-      );
-    };
-    return (
-      <ErrorPage error={'loading channel data...'} />
-    );
-  }
-};
-
-export default ShowChannel;

client/src/pages/AboutPage/index.jsx

@@ -1,12 +1,18 @@
 import React from 'react';
 import PageLayout from '@components/PageLayout';
-import AboutPageContent from '@components/AboutPageContent';
+import HorizontalSplit from '@components/HorizontalSplit';
+import AboutSpeechOne from '@components/AboutSpeechOne';
+import AboutSpeechTwo from '@components/AboutSpeechTwo';
+
 
 class AboutPage extends React.Component {
   render () {
     return (
       <PageLayout pageTitle={'About'} pageUri={'about'} >
-        <AboutPageContent />
+        <HorizontalSplit
+          leftSide={<AboutSpeechOne />}
+          rightSide={<AboutSpeechTwo />}
+        />
       </PageLayout>
     );
   }

client/src/pages/ContentPageWrapper/view.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import ErrorPage from '@pages/ErrorPage';
-import ShowAssetLite from '@containers/ShowAssetLite';
+import ShowAssetLite from '@pages/ShowAssetLite';
-import ShowAssetDetails from '@containers/ShowAssetDetails';
+import ShowAssetDetails from '@pages/ShowAssetDetails';
-import ShowChannel from '@containers/ShowChannel';
+import ShowChannel from '@pages/ShowChannel';
 
 import { CHANNEL, ASSET_LITE, ASSET_DETAILS } from '../../constants/show_request_types';
 
-class ShowPage extends React.Component {
+class ContentPageWrapper extends React.Component {
   componentDidMount () {
     this.props.onHandleShowPageUri(this.props.match.params);
   }
@@ -35,4 +35,4 @@ class ShowPage extends React.Component {
   }
 };
 
-export default ShowPage;
+export default ContentPageWrapper;

client/src/pages/ErrorPage/index.jsx

@@ -1,17 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import NavBar from '@containers/NavBar';
+import PageLayout from '@components/PageLayout';
 
 class ErrorPage extends React.Component {
   render () {
     const { error } = this.props;
     return (
-      <div>
+      <PageLayout pageTitle={'Error'} pageUri={'error'}>
-        <NavBar />
+        <p>{error}</p>
-        <div className='row row--padded'>
+      </PageLayout>
-          <p>{error}</p>
-        </div>
-      </div>
     );
   }
 };

client/src/pages/FourOhFourPage/index.jsx

@@ -1,11 +1,15 @@
-import { connect } from 'react-redux';
+import React from 'react';
-import View from './view';
+import PageLayout from '@components/PageLayout';
 
-const mapStateToProps = ({ site: { host, title } }) => {
+class FourOhForPage extends React.Component {
-  return {
+  render () {
-    host,
+    return (
-    title,
+      <PageLayout pageTitle={'404'} pageUri={'/404'}>
-  };
+        <h2>404</h2>
+        <p>That page does not exist</p>
+      </PageLayout>
+    );
+  }
 };
 
-export default connect(mapStateToProps, null)(View);
+export default FourOhForPage;

client/src/pages/FourOhFourPage/view.jsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import Helmet from 'react-helmet';
-import NavBar from '@containers/NavBar/index';
-
-class FourOhForPage extends React.Component {
-  render () {
-    const {title, host} = this.props;
-    return (
-      <div>
-        <Helmet>
-          <title>{title} - 404</title>
-          <link rel='canonical' href={`${host}/404`} />
-        </Helmet>
-        <NavBar />
-        <div className='row row--padded'>
-          <h2>404</h2>
-          <p>That page does not exist</p>
-        </div>
-      </div>
-    );
-  }
-};
-
-export default FourOhForPage;

client/src/pages/HomePage/index.jsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import PageLayout from '@components/PageLayout';
-import HomePageContent from '@components/HomePageContent';
+
+import PublishTool from '@containers/PublishTool';
 
 class HomePage extends React.Component {
   render () {
     return (
       <PageLayout pageTitle={'Speech'} pageUri={''}>
-        <HomePageContent />
+        <PublishTool />
       </PageLayout>
     );
   }

client/src/pages/LoginPage/view.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { withRouter } from 'react-router-dom';
-import SEO from '@components/SEO';
+import PageLayout from '@components/PageLayout';
-import NavBar from '@containers/NavBar';
+import HorizontalSplit from '@components/HorizontalSplit';
-import ChannelLoginForm from '@containers/ChannelLoginForm';
+
-import ChannelCreateForm from '@containers/ChannelCreateForm';
+import AboutChannels from '@components/AboutChannels';
+import ChannelTools from '@components/ChannelTools';
 
 class LoginPage extends React.Component {
   componentWillReceiveProps (newProps) {
@@ -14,24 +15,12 @@ class LoginPage extends React.Component {
   }
   render () {
     return (
-      <div>
+      <PageLayout pageTitle={'Login'} pageUri={'login'} >
-        <SEO pageTitle={'Login'} pageUri={'login'} />
+        <HorizontalSplit
-        <NavBar />
+          leftSide={<AboutChannels />}
-        <div className='row row--padded'>
+          rightSide={<ChannelTools />}
-          <div className='column column--5 column--med-10 align-content-top'>
+        />
-            <div className='column column--8 column--med-10'>
+      </PageLayout>
-              <p>Channels allow you to publish and group content under an identity. You can create a channel for yourself, or share one with like-minded friends.  You can create 1 channel, or 100, so whether you're <a className='link--primary' target='_blank' href='/@catalonia2017:43dcf47163caa21d8404d9fe9b30f78ef3e146a8'>documenting important events</a>, or making a public repository for <a className='link--primary' target='_blank' href='/@catGifs'>cat gifs</a> (password: '1234'), try creating a channel for it!</p>
-            </div>
-          </div><div className='column column--5 column--med-10 align-content-top'>
-            <div className='column column--8 column--med-10'>
-              <h3 className='h3--no-bottom'>Log in to an existing channel:</h3>
-              <ChannelLoginForm />
-              <h3 className='h3--no-bottom'>Create a brand new channel:</h3>
-              <ChannelCreateForm />
-            </div>
-          </div>
-        </div>
-      </div>
     );
   }
 };

client/src/pages/MultisitePage/index.jsx

@@ -1,59 +1,52 @@
 import React from 'react';
-import SEO from '@components/SEO';
+import PageLayout from '@components/PageLayout';
-import NavBar from '@containers/NavBar';
 
 class MultisitePage extends React.Component {
   render () {
     return (
-      <div>
+      <PageLayout pageTitle={'Multisite'} pageUri={'/multisite'}>
-        <SEO pageTitle={'Multisite'} pageUri={'multisite'} />
+        <p className='pull-quote'>Introducing Spee.ch Multisite</p>
-        <NavBar />
+        <p>Hi there!  My name is <a href={'https://github.com/billbitt'} target={'_blank'}>Bill</a>, and I’d like to speak with you about Spee.ch.  No, not ‘speech,’ ‘<i><a href={'https://spee.ch'} target={'_blank'}>Spee.ch.</a></i>’ You know what, just read on...</p>
-        <div className='row row--padded flex-container--row flex-container--center-center'>
+        <h2>A Little Background</h2>
-          <div className='column column--8 column--med-10'>
+        <p>Wow, time flies!  A little over a year ago Spee.ch was nothing more than a glimmer in the eye of LBRY CEO Jeremy Kaufman.  At that time, the <a href={'https://lbry.io/faq/what-is-lbry'} target={'_blank'}>LBRY protocol</a> was still so early in its development, that there were no web-based applications for interacting with the LBRY blockchain. But then, something beautiful happened.  On March 29th, 2017, Jeremy sat down with Jack, and together they <a href={'https://www.youtube.com/watch?v=C9LCapt_OYw'} target={'_blank'}>live coded a single-page PHP site</a> that could publish images to the LBRY network.  And just like that, Spee.ch was born!</p>
-              <p className='pull-quote'>Introducing Spee.ch Multisite</p>
+        <p>Being that LBRY is an open source project, Jeremy ended the session by inviting community members who were interested in the project to take the reigns and see where Spee.ch could go.  I was one of the devs that did just that, and it wasn’t long before I was on a weekly call dedicated to this project with contributors from around the world.</p>
-              <p>Hi there!  My name is <a href={'https://github.com/billbitt'} target={'_blank'}>Bill</a>, and I’d like to speak with you about Spee.ch.  No, not ‘speech,’ ‘<i><a href={'https://spee.ch'} target={'_blank'}>Spee.ch.</a></i>’ You know what, just read on...</p>
+        <p>At this point in time, the vision for Spee.ch was pretty simple: create a web-based hosting service that used the LBRY network as a database for free image and video sharing.  In other words, an ‘imgur on the blockchain.’</p>
-              <h2>A Little Background</h2>
+        <h2>Growth</h2>
-              <p>Wow, time flies!  A little over a year ago Spee.ch was nothing more than a glimmer in the eye of LBRY CEO Jeremy Kaufman.  At that time, the <a href={'https://lbry.io/faq/what-is-lbry'} target={'_blank'}>LBRY protocol</a> was still so early in its development, that there were no web-based applications for interacting with the LBRY blockchain. But then, something beautiful happened.  On March 29th, 2017, Jeremy sat down with Jack, and together they <a href={'https://www.youtube.com/watch?v=C9LCapt_OYw'} target={'_blank'}>live coded a single-page PHP site</a> that could publish images to the LBRY network.  And just like that, Spee.ch was born!</p>
+        <p>You might be wondering, “So, what has the Spee.ch team been doing since then?”. Well, that is a great question. I’m glad you asked.</p>
-              <p>Being that LBRY is an open source project, Jeremy ended the session by inviting community members who were interested in the project to take the reigns and see where Spee.ch could go.  I was one of the devs that did just that, and it wasn’t long before I was on a weekly call dedicated to this project with contributors from around the world.</p>
+        <p>As it turned out, the initial single-serving site was only the beginning.  We wanted to add more features, improve user experience, and continue to rapidly innovate on new ideas to explore what web-based image-hosting on the blockchain could look like.  And now -- a couple of re-designs, <a href={'https://github.com/lbryio/spee.ch'} target={'_blank'}>1,428 commits</a>, and <a href={'https://github.com/lbryio/spee.ch/graphs/contributors'} target={'_blank'}>18 contributors</a> later (as of the time of this writing) -- we’ve been through a lot of changes.  We changed the URL scheme, switched out the PHP for Javascript (sorry Jeremy!), added more HTML pages, removed those HTML pages, added Handlebars, removed most of Handlebars, added React, and... you get the picture.</p>
-              <p>At this point in time, the vision for Spee.ch was pretty simple: create a web-based hosting service that used the LBRY network as a database for free image and video sharing.  In other words, an ‘imgur on the blockchain.’</p>
+        <p>It’s been a lot of work, and through all of these changes, we have been guided by our original vision: develop a free web app that allows users to share images and video using a blockchain.</p>
-              <h2>Growth</h2>
+        <p>However, we ask ourselves constantly: what else can we be doing?  What can we be doing differently?  What features can we be doing better?  And it is those kinds of questions that lead us to this post.</p>
-              <p>You might be wondering, “So, what has the Spee.ch team been doing since then?”. Well, that is a great question. I’m glad you asked.</p>
+        <h2>A New Initiative</h2>
-              <p>As it turned out, the initial single-serving site was only the beginning.  We wanted to add more features, improve user experience, and continue to rapidly innovate on new ideas to explore what web-based image-hosting on the blockchain could look like.  And now -- a couple of re-designs, <a href={'https://github.com/lbryio/spee.ch'} target={'_blank'}>1,428 commits</a>, and <a href={'https://github.com/lbryio/spee.ch/graphs/contributors'} target={'_blank'}>18 contributors</a> later (as of the time of this writing) -- we’ve been through a lot of changes.  We changed the URL scheme, switched out the PHP for Javascript (sorry Jeremy!), added more HTML pages, removed those HTML pages, added Handlebars, removed most of Handlebars, added React, and... you get the picture.</p>
+        <p>As Spee.ch developed, we were lucky to find an amazing community spring up around the project that contributed bug reports, bug fixes, feature requests, pull requests, etc., but ultimately we are limited by the hours we have in the day, and while some requests get prioritized, others get shelved. </p>
-              <p>It’s been a lot of work, and through all of these changes, we have been guided by our original vision: develop a free web app that allows users to share images and video using a blockchain.</p>
+        <p>So we started wondering:  What if instead of having the community help us build our platform, we started helping them build theirs?  We started mulling this over, and the more we thought about it the more we liked it. And thus, Spee.ch Multisite was born.</p>
-              <p>However, we ask ourselves constantly: what else can we be doing?  What can we be doing differently?  What features can we be doing better?  And it is those kinds of questions that lead us to this post.</p>
+        <h2>Spee.ch Multisite</h2>
-              <h2>A New Initiative</h2>
+        <p>The vision for Spee.ch Multisite is to maintain a foundational codebase that will support a greater variety of content-sharing web apps built on LBRY, allowing these apps to publish and retrieve content from the network via the blockchain.</p>
-              <p>As Spee.ch developed, we were lucky to find an amazing community spring up around the project that contributed bug reports, bug fixes, feature requests, pull requests, etc., but ultimately we are limited by the hours we have in the day, and while some requests get prioritized, others get shelved. </p>
+        <h3>Run Your Own Spee.ch!</h3>
-              <p>So we started wondering:  What if instead of having the community help us build our platform, we started helping them build theirs?  We started mulling this over, and the more we thought about it the more we liked it. And thus, Spee.ch Multisite was born.</p>
+        <p>Ok, here’s the tl:dr: the purpose of the Spee.ch Multisite initiative is to enable you to run your own version of Spee.ch.</p>
-              <h2>Spee.ch Multisite</h2>
+        <p>Spee.ch Multisite will provide a helpful set of basic code to get you going, but we purposefully want to give you control and provide a sandbox in which you can develop the look, content, and features for your site.  The shared code base will be developed to support you in that quest. </p>
-              <p>The vision for Spee.ch Multisite is to maintain a foundational codebase that will support a greater variety of content-sharing web apps built on LBRY, allowing these apps to publish and retrieve content from the network via the blockchain.</p>
+        <p>So if you don’t want your site called or looking anything like Spee.ch, we encourage that! Don’t hesitate to make it your own!</p>
-              <h3>Run Your Own Spee.ch!</h3>
+        <h3>For the Community by the Community</h3>
-              <p>Ok, here’s the tl:dr: the purpose of the Spee.ch Multisite initiative is to enable you to run your own version of Spee.ch.</p>
+        <p>Initially, sites built on Spee.ch Multisite will look a lot like Spee.ch, but you will be able to add custom pages, update the look of components, and limit the content on your spee.ch site as you see fit.</p>
-              <p>Spee.ch Multisite will provide a helpful set of basic code to get you going, but we purposefully want to give you control and provide a sandbox in which you can develop the look, content, and features for your site.  The shared code base will be developed to support you in that quest. </p>
+        <p>Over time, it is our hope that the project will grow to incorporate many more components and features developed by us and the community to support a wide variety of functionalities beyond what the current spee.ch site is capable of.</p>
-              <p>So if you don’t want your site called or looking anything like Spee.ch, we encourage that! Don’t hesitate to make it your own!</p>
+        <h3>A Common Codebase</h3>
-              <h3>For the Community by the Community</h3>
+        <p>If you have been following the project, you may have already noticed that the original github repository has grown into two: <a href={'https://github.com/lbryio/www.spee.ch'} target={'_blank'}>www.spee.ch</a> and <a href={'https://github.com/lbryio/spee.ch'} target={'_blank'}>spee.ch</a>.  I will save the specifics for a future tech-focused blog post in the coming weeks, but the reason for these changes is to modularise the code so that is it easier for anyone who wants to run their own version of Spee.ch to do so, and to be able to customize their Spee.ch to their liking.</p>
-              <p>Initially, sites built on Spee.ch Multisite will look a lot like Spee.ch, but you will be able to add custom pages, update the look of components, and limit the content on your spee.ch site as you see fit.</p>
+        <h3>What About the Flagship Spee.ch Site?</h3>
-              <p>Over time, it is our hope that the project will grow to incorporate many more components and features developed by us and the community to support a wide variety of functionalities beyond what the current spee.ch site is capable of.</p>
+        <p>Don’t worry!  If you like using <a href={'https://spee.ch'} target={'_blank'}>Spee.ch</a> and have no intention of running your own site, we will still be here running it for you!  We are dedicated to pushing it forward and using it as patient zero for all additions to the Spee.ch Multisite codebase.</p>
-              <h3>A Common Codebase</h3>
+        <h2>Join Us</h2>
-              <p>If you have been following the project, you may have already noticed that the original github repository has grown into two: <a href={'https://github.com/lbryio/www.spee.ch'} target={'_blank'}>www.spee.ch</a> and <a href={'https://github.com/lbryio/spee.ch'} target={'_blank'}>spee.ch</a>.  I will save the specifics for a future tech-focused blog post in the coming weeks, but the reason for these changes is to modularise the code so that is it easier for anyone who wants to run their own version of Spee.ch to do so, and to be able to customize their Spee.ch to their liking.</p>
+        <p>Friday, May 18, we will be hosting a live demo showcasing the alpha version of Spee.ch Multisite.  It’s still quite young, but that’s the point: we want to realize this vision together.</p>
-              <h3>What About the Flagship Spee.ch Site?</h3>
+        <p><b><a href={'https://speech.rsvpify.com/'} target={'_blank'}>CLICK HERE TO RSVP!</a></b></p>
-              <p>Don’t worry!  If you like using <a href={'https://spee.ch'} target={'_blank'}>Spee.ch</a> and have no intention of running your own site, we will still be here running it for you!  We are dedicated to pushing it forward and using it as patient zero for all additions to the Spee.ch Multisite codebase.</p>
+        <p>At this first demonstration, we will walk through preparing a server environment, installing LBRY and Spee.ch, and how to make local changes to your Spee.ch instance.  Details below:</p>
-              <h2>Join Us</h2>
+        <ul>
-              <p>Friday, May 18, we will be hosting a live demo showcasing the alpha version of Spee.ch Multisite.  It’s still quite young, but that’s the point: we want to realize this vision together.</p>
+          <li>When: Friday, May 18, 2018</li>
-              <p><b><a href={'https://speech.rsvpify.com/'} target={'_blank'}>CLICK HERE TO RSVP!</a></b></p>
+          <li>Time: 5:00 p.m. PST</li>
-              <p>At this first demonstration, we will walk through preparing a server environment, installing LBRY and Spee.ch, and how to make local changes to your Spee.ch instance.  Details below:</p>
+          <li>Where: Google Hangouts</li>
-              <ul>
+          <li>Link: <a href={'https://meet.google.com/aex-ghqg-kcs'} target={'_blank'}>meet.google.com/aex-ghqg-kcs</a></li>
-                <li>When: Friday, May 18, 2018</li>
+          <li>System Requirements: If you have a server, please make sure you have MySql, Node and NPM installed. If you need help installing the above, or if you need a server to run your own instance on, please join the Hangout 30 minutes ahead of time and we will help get you set up =]</li>
-                <li>Time: 5:00 p.m. PST</li>
+          <li>Questions: hello@lbry.io</li>
-                <li>Where: Google Hangouts</li>
+        </ul>
-                <li>Link: <a href={'https://meet.google.com/aex-ghqg-kcs'} target={'_blank'}>meet.google.com/aex-ghqg-kcs</a></li>
+      </PageLayout>
-                <li>System Requirements: If you have a server, please make sure you have MySql, Node and NPM installed. If you need help installing the above, or if you need a server to run your own instance on, please join the Hangout 30 minutes ahead of time and we will help get you set up =]</li>
-                <li>Questions: hello@lbry.io</li>
-              </ul>
-          </div>
-        </div>
-      </div>
     );
   }
-};
+}
 
 export default MultisitePage;

client/src/pages/ShowAssetDetails/view.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import SEO from '@components/SEO';
-import NavBar from '../NavBar';
+import NavBar from '../../containers/NavBar/index';
-import ErrorPage from '../../pages/ErrorPage';
+import ErrorPage from '../ErrorPage/index';
-import AssetTitle from '../AssetTitle';
+import AssetTitle from '../../containers/AssetTitle/index';
-import AssetDisplay from '../AssetDisplay';
+import AssetDisplay from '../../containers/AssetDisplay/index';
-import AssetInfo from '../AssetInfo';
+import AssetInfo from '../../containers/AssetInfo/index';
 
 class ShowAssetDetails extends React.Component {
   render () {

client/src/pages/ShowAssetLite/view.jsx

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 // components
 import SEO from '@components/SEO';
 // containers
-import AssetDisplay from '../AssetDisplay';
+import AssetDisplay from '../../containers/AssetDisplay/index';
 
 class ShowLite extends React.Component {
   render () {

client/src/pages/ShowChannel/view.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import PageLayout from '@components/PageLayout';
+import ErrorPage from '@pages/ErrorPage';
+import ChannelClaimsDisplay from '@containers/ChannelClaimsDisplay';
+
+class ShowChannel extends React.Component {
+  render () {
+    const { channel } = this.props;
+    if (channel) {
+      const { name, longId, shortId } = channel;
+      return (
+        <PageLayout pageTitle={name} pageUri={channel}>
+          <h2>channel name: {name}</h2>
+          <p className={'fine-print'}>full channel id: {longId}</p>
+          <p className={'fine-print'}>short channel id: {shortId}</p>
+          <ChannelClaimsDisplay />
+        </PageLayout>
+      );
+    };
+    return (
+      <ErrorPage error={'loading channel data...'} />
+    );
+  }
+};
+
+export default ShowChannel;