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 />
-        <div className='row row--padded'>
         <p>{error}</p>
-        </div>
+      </PageLayout>
-      </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,15 +1,10 @@
 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'} />
-        <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>
@@ -49,11 +44,9 @@ class MultisitePage extends React.Component {
           <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>
+      </PageLayout>
-        </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;