Merge pull request #58 from coralproject/embeds

Add embedding routes and homepage

app.js

@@ -17,9 +17,8 @@ app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'ejs');
 
 // Routes.
-app.use('/api/v1', require('./routes/api'));
 app.use('/client', express.static(path.join(__dirname, 'dist')));
-app.use('/admin', require('./routes/admin'));
+app.use('/', require('./routes'));
 
 //==============================================================================
 // ERROR HANDLING

client/coral-admin/src/AppRouter.js

@@ -3,7 +3,6 @@ import {Router, Route, IndexRoute, browserHistory} from 'react-router';
 
 import ModerationQueue from 'containers/ModerationQueue';
 import CommentStream from 'containers/CommentStream';
-import EmbedLink from 'components/EmbedLink';
 import Configure from 'containers/Configure';
 import CommunityContainer from 'containers/CommunityContainer';
 import LayoutContainer from 'containers/LayoutContainer';
@@ -12,7 +11,6 @@ const routes = (
   <Route path='admin' component={LayoutContainer}>
     <IndexRoute component={ModerationQueue} />
     <Route path='embed' component={CommentStream} />
-    <Route path='embedlink' component={EmbedLink} />
     <Route path='community' component={CommunityContainer} />
     <Route path='configure' component={Configure} />
   </Route>

client/coral-admin/src/components/EmbedLink.css

@@ -1,13 +0,0 @@
-#embedLink {
-  width:400px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.embedTextarea {
-  width: 100%;
-}
-
-.copyButton {
-  margin-top: 20px;
-}

client/coral-admin/src/components/EmbedLink.js

@@ -1,37 +0,0 @@
-import React from 'react';
-import styles from './EmbedLink.css';
-import I18n from 'coral-framework/i18n/i18n';
-import translations from '../translations';
-import {Button} from 'react-mdl';
-
-const embedText =
-`<div id='coralStreamEmbed'></div><script type='text/javascript' src='http://pym.nprapps.org/pym.v1.min.js'></script><script>var pymParent = new pym.Parent('coralStreamEmbed', '${window.location.protocol}//${window.location.host}/embedScript/index.html', {});</script>`;
-
-const copyToClipBoard = () => {
-  const copyTextarea = document.querySelector(`.${  styles.embedTextarea}`);
-  copyTextarea.select();
-
-  try {
-    document.execCommand('copy');
-  } catch (err) {
-    console.error('Unable to copy');
-  }
-};
-
-const EmbedLink = () => <div id={styles.embedLink}>
-  <h3>Embed Comment Stream</h3>
-  <textarea
-    className={styles.embedTextarea}
-    onClick={copyToClipBoard}
-    rows={4}
-    value={embedText} />
-  <div className={styles.copyButton}>
-    <Button onClick={copyToClipBoard} raised>
-      {lang.t('embedlink.copy')}
-    </Button>
-  </div>
-</div>;
-
-export default EmbedLink;
-
-const lang = new I18n(translations);

client/coral-admin/src/containers/Configure.js

@@ -80,8 +80,7 @@ class Configure extends React.Component {
   }
 
   getEmbed () {
-    const embedText =
-    `<div id='coralStreamEmbed'></div><script type='text/javascript' src='https://pym.nprapps.org/pym.v1.min.js'></script><script>var pymParent = new pym.Parent('coralStreamEmbed', '${window.location.protocol}//${window.location.host}/client/embed/stream/bundle.js', {title: 'comments'});</script>`;
+    const embedText = `<div id='coralStreamEmbed'></div><script type='text/javascript' src='http://pym.nprapps.org/pym.v1.min.js'></script><script>var pymParent = new pym.Parent('coralStreamEmbed', '${window.location.protocol}//${window.location.host}/embed/stream', {});</script>`;
 
     return <List>
       <ListItem className={styles.configSettingEmbed}>

routes/embed/index.js

@@ -0,0 +1,14 @@
+const express = require('express');
+const router = express.Router();
+
+router.use('/:embed', (req, res, next) => {
+  switch (req.params.embed) {
+  case 'stream':
+    return res.render('embed/stream', {});
+  default:
+    // will return a 404.
+    return next();
+  }
+});
+
+module.exports = router;

routes/index.js

@@ -0,0 +1,12 @@
+const express = require('express');
+const router = express.Router();
+
+router.use('/api/v1', require('./api'));
+router.use('/admin', require('./admin'));
+router.use('/embed', require('./embed'));
+
+router.get('/', (req, res) => {
+  return res.render('home', {});
+});
+
+module.exports = router;

views/embed/stream.ejs

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/client/embed/stream/default.css">
+    <link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    rel="stylesheet">
+  </head>
+  <body>
+    <div id="coralStream"/>
+    <script src="/client/embed/stream/bundle.js"></script>
+  </body>
+</html>

views/home.ejs

@@ -0,0 +1,16 @@
+<html>
+  <head>
+  </head>
+  <body>
+  <div style="margin-left:auto; margin-right:auto; width:500px">
+    <h1>Corem ipsal</h1>
+    <p>Lorem ipsum dolor sponge amet, consectetur adipiscing clam. Ut lobortis sollicitudin pillar a ornare. Curabitur dignissim vestibulum cay non rhoncus. Cras laoreet ante vel nunc hendrerit, shelf imperdiet neque egestas. Suspendisse aliquet iaculis fermentum. Talk volutpat, tellus posuere laoreet consequat, mi lacus laoreet massa, sed vehicula mauris velit non lectus. Integer non trust nec neque congue faucibus porttitor sit amet elkhorn.</p>
+
+<div id='coralStreamEmbed'></div>
+<script type='text/javascript' src='https://pym.nprapps.org/pym.v1.min.js'></script>
+<script>
+var pymParent = new pym.Parent('coralStreamEmbed', '/embed/stream', {title: 'Talk Comments'});
+pymParent.onMessage('height', function(height) {document.querySelector('#coralStreamEmbed iframe').height = height + 'px'})</script>
+</div>
+  </body>
+</html>