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", {
-        className: "row row--padded"
-      }, _react.default.createElement("p", null, error)));
+      return _react.default.createElement(_PageLayout.default, {
+        pageTitle: '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) {
-  var _ref$site = _ref.site,
-      host = _ref$site.host,
-      title = _ref$site.title;
-  return {
-    host: host,
-    title: title
-  };
-};
+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 _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 _index = _interopRequireDefault(require("@containers/NavBar/index"));
+var _PageLayout = _interopRequireDefault(require("@components/PageLayout"));
 
 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,
-          title = _this$props.title,
-          host = _this$props.host;
-      return _react.default.createElement("div", null, _react.default.createElement(_reactHelmet.default, null, _react.default.createElement("title", null, title, " - 404"), _react.default.createElement("link", {
-        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")));
+      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"));
     }
   }]);
 

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", {
-        className: "row row--padded"
-      }, _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("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)))));
+      }, _react.default.createElement(_HorizontalSplit.default, {
+        leftSide: _react.default.createElement(_AboutChannels.default, null),
+        rightSide: _react.default.createElement(_ChannelTools.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 _NavBar = _interopRequireDefault(require("@containers/NavBar"));
+var _PageLayout = _interopRequireDefault(require("@components/PageLayout"));
 
 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'
-      }), _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"
+        pageUri: '/multisite'
       }, _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='/:claim' component={ShowPage} />
+      <Route exact path='/:identifier/:claim' component={ContentPageWrapper} />
+      <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 ShowAssetDetails from '@containers/ShowAssetDetails';
-import ShowChannel from '@containers/ShowChannel';
+import ShowAssetLite from '@pages/ShowAssetLite';
+import ShowAssetDetails from '@pages/ShowAssetDetails';
+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>
-        <NavBar />
-        <div className='row row--padded'>
-          <p>{error}</p>
-        </div>
-      </div>
+      <PageLayout pageTitle={'Error'} pageUri={'error'}>
+        <p>{error}</p>
+      </PageLayout>
     );
   }
 };

client/src/pages/FourOhFourPage/index.jsx

@@ -1,11 +1,15 @@
-import { connect } from 'react-redux';
-import View from './view';
+import React from 'react';
+import PageLayout from '@components/PageLayout';
 
-const mapStateToProps = ({ site: { host, title } }) => {
-  return {
-    host,
-    title,
-  };
+class FourOhForPage extends React.Component {
+  render () {
+    return (
+      <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 NavBar from '@containers/NavBar';
-import ChannelLoginForm from '@containers/ChannelLoginForm';
-import ChannelCreateForm from '@containers/ChannelCreateForm';
+import PageLayout from '@components/PageLayout';
+import HorizontalSplit from '@components/HorizontalSplit';
+
+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>
-        <SEO pageTitle={'Login'} pageUri={'login'} />
-        <NavBar />
-        <div className='row row--padded'>
-          <div className='column column--5 column--med-10 align-content-top'>
-            <div className='column column--8 column--med-10'>
-              <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>
+      <PageLayout pageTitle={'Login'} pageUri={'login'} >
+        <HorizontalSplit
+          leftSide={<AboutChannels />}
+          rightSide={<ChannelTools />}
+        />
+      </PageLayout>
     );
   }
 };

client/src/pages/MultisitePage/index.jsx

@@ -1,59 +1,52 @@
 import React from 'react';
-import SEO from '@components/SEO';
-import NavBar from '@containers/NavBar';
+import PageLayout from '@components/PageLayout';
 
 class MultisitePage extends React.Component {
   render () {
     return (
-      <div>
-        <SEO pageTitle={'Multisite'} pageUri={'multisite'} />
-        <NavBar />
-        <div className='row row--padded flex-container--row flex-container--center-center'>
-          <div className='column column--8 column--med-10'>
-              <p className='pull-quote'>Introducing Spee.ch Multisite</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>
-              <h2>A Little Background</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>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>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>Growth</h2>
-              <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>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>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>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>A New Initiative</h2>
-              <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>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>
-              <h2>Spee.ch Multisite</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>
-              <h3>Run Your Own Spee.ch!</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>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>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>For the Community by the Community</h3>
-              <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>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>
-              <h3>A Common Codebase</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>
-              <h3>What About the Flagship Spee.ch Site?</h3>
-              <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>
-              <h2>Join Us</h2>
-              <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>
-              <p><b><a href={'https://speech.rsvpify.com/'} target={'_blank'}>CLICK HERE TO RSVP!</a></b></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>
-              <ul>
-                <li>When: Friday, May 18, 2018</li>
-                <li>Time: 5:00 p.m. PST</li>
-                <li>Where: Google Hangouts</li>
-                <li>Link: <a href={'https://meet.google.com/aex-ghqg-kcs'} target={'_blank'}>meet.google.com/aex-ghqg-kcs</a></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>Questions: hello@lbry.io</li>
-              </ul>
-          </div>
-        </div>
-      </div>
+      <PageLayout pageTitle={'Multisite'} pageUri={'/multisite'}>
+        <p className='pull-quote'>Introducing Spee.ch Multisite</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>
+        <h2>A Little Background</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>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>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>Growth</h2>
+        <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>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>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>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>A New Initiative</h2>
+        <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>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>
+        <h2>Spee.ch Multisite</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>
+        <h3>Run Your Own Spee.ch!</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>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>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>For the Community by the Community</h3>
+        <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>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>
+        <h3>A Common Codebase</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>
+        <h3>What About the Flagship Spee.ch Site?</h3>
+        <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>
+        <h2>Join Us</h2>
+        <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>
+        <p><b><a href={'https://speech.rsvpify.com/'} target={'_blank'}>CLICK HERE TO RSVP!</a></b></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>
+        <ul>
+          <li>When: Friday, May 18, 2018</li>
+          <li>Time: 5:00 p.m. PST</li>
+          <li>Where: Google Hangouts</li>
+          <li>Link: <a href={'https://meet.google.com/aex-ghqg-kcs'} target={'_blank'}>meet.google.com/aex-ghqg-kcs</a></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>Questions: hello@lbry.io</li>
+        </ul>
+      </PageLayout>
     );
   }
-};
+}
 
 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 ErrorPage from '../../pages/ErrorPage';
-import AssetTitle from '../AssetTitle';
-import AssetDisplay from '../AssetDisplay';
-import AssetInfo from '../AssetInfo';
+import NavBar from '../../containers/NavBar/index';
+import ErrorPage from '../ErrorPage/index';
+import AssetTitle from '../../containers/AssetTitle/index';
+import AssetDisplay from '../../containers/AssetDisplay/index';
+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;