LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

added react-helmet and dynamic title and canonical url tags

Browse source
This commit is contained in:
bill bittner 2018-02-22 18:05:00 -08:00
parent b4ef61ae85
commit d24331d001
12 changed files with 123 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
helpers/handleShowRender.jsx
View file

@ -12,6 +12,8 @@ import { call } from 'redux-saga/effects';
import { handleShowPageUri } from '../react/sagas/show_uri';
import { onHandleShowPageUri } from '../react/actions/show';
import Helmet from 'react-helmet';
const returnSagaWithParams = (saga, params) => {
return function * () {
yield call(saga, params);
@ -49,6 +51,9 @@ module.exports = (req, res) => {
</Provider>
);
// get head tags from helmet
const helmet = Helmet.renderStatic();
// check for a redirect
if (context.url) {
console.log('REDIRECTING:', context.url);
@ -61,6 +66,6 @@ module.exports = (req, res) => {
const preloadedState = store.getState();
// send the rendered page back to the client
res.send(renderFullPage(html, preloadedState));
res.send(renderFullPage(helmet, html, preloadedState));
});
};

9
helpers/renderFullPage.js
View file

@ -1,6 +1,4 @@
const { site } = require('../config/speechConfig.js');
module.exports = (html, preloadedState) => {
module.exports = (helmet, html, preloadedState) => {
// take the html and preloadedState and return the full page
return `
<!DOCTYPE html>
@ -9,7 +7,10 @@ module.exports = (html, preloadedState) => {
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>${site.title}</title>
<!--helmet-->
${helmet.title.toString()}
${helmet.link.toString()}
<!--style sheets-->
<link rel="stylesheet" href="/assets/css/reset.css" type="text/css">
<link rel="stylesheet" href="/assets/css/general.css" type="text/css">
<link rel="stylesheet" href="/assets/css/mediaQueries.css" type="text/css">

1
package.json
View file

@ -48,6 +48,7 @@
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-ga": "^2.4.1",
"react-helmet": "^5.2.0",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"redux": "^3.7.2",

5
react/api/channelApi.js
View file

@ -1,5 +1,4 @@
import Request from 'utils/request';
import request from '../utils/request';
import request from 'utils/request';
const { site: { host } } = require('../../config/speechConfig.js');
export function getChannelData (name, id) {
@ -12,6 +11,6 @@ export function getChannelData (name, id) {
export function getChannelClaims (name, longId, page) {
console.log('getting channel claims for channel:', name, longId);
if (!page) page = 1;
const url = `${host}/api/channel/claims/${name}/${longId}/${page}`;
const url = `/api/channel/claims/${name}/${longId}/${page}`;
return Request(url);
};

4
react/app.js
View file

@ -1,6 +1,6 @@
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import PublishPage from 'components/PublishPage';
import HomePage from 'components/HomePage';
import AboutPage from 'components/AboutPage';
import LoginPage from 'containers/LoginPage';
import ShowPage from 'containers/ShowPage';
@ -9,7 +9,7 @@ import FourOhFourPage from 'components/FourOhFourPage';
const App = () => {
return (
<Switch>
<Route exact path='/' component={PublishPage} />
<Route exact path='/' component={HomePage} />
<Route exact path='/about' component={AboutPage} />
<Route exact path='/login' component={LoginPage} />
<Route exact path='/:identifier/:claim' component={ShowPage} />

7
react/components/AboutPage/index.js
View file

@ -1,10 +1,17 @@
import React from 'react';
import NavBar from 'containers/NavBar';
import Helmet from 'react-helmet';
const { site: { title, host } } = require('../../../config/speechConfig.js');
class AboutPage extends React.Component {
render () {
return (
<div>
<Helmet>
<title>{title} - About</title>
<link rel='canonical' href={`${host}/about`} />
</Helmet>
<NavBar />
<div className='row row--padded'>
<div className='column column--5 column--med-10 align-content-top'>

6
react/components/FourOhFourPage/index.js
View file

@ -1,10 +1,16 @@
import React from 'react';
import NavBar from 'containers/NavBar';
import Helmet from 'react-helmet';
const { site: { title, host } } = require('../../../config/speechConfig.js');
class FourOhForPage extends React.Component {
render () {
return (
<div>
<Helmet>
<title>{title} - 404</title>
<link rel='canonical' href={`${host}/404`} />
</Helmet>
<NavBar />
<div className='row row--padded'>
<h2>404</h2>

11
react/components/PublishPage/index.js → react/components/HomePage/index.js
View file

@ -1,11 +1,18 @@
import React from 'react';
import Helmet from 'react-helmet';
import NavBar from 'containers/NavBar';
import PublishTool from 'containers/PublishTool';
class PublishPage extends React.Component {
const { site: { title, host } } = require('../../../config/speechConfig.js');
class HomePage extends React.Component {
render () {
return (
<div className={'row row--tall flex-container--column'}>
<Helmet>
<title>{title}</title>
<link rel='canonical' href={`${host}/`} />
</Helmet>
<NavBar />
<div className={'row row--tall row--padded flex-container--column'}>
<PublishTool />
@ -15,4 +22,4 @@ class PublishPage extends React.Component {
}
};
export default PublishPage;
export default HomePage;

31
react/components/ShowAssetDetails/view.jsx
View file

@ -1,27 +1,42 @@
import React from 'react';
import Helmet from 'react-helmet';
import NavBar from 'containers/NavBar';
import ErrorPage from 'components/ErrorPage';
import AssetTitle from 'components/AssetTitle';
import AssetDisplay from 'components/AssetDisplay';
import AssetInfo from 'components/AssetInfo';
const { site: { title, host } } = require('../../../config/speechConfig.js');
class ShowAssetDetails extends React.Component {
render () {
const { asset } = this.props;
let channelName, certificateId, name, claimId;
if (asset.claimData) {
({ channelName, certificateId, name, claimId } = asset.claimData);
};
if (asset) {
return (
<div>
<NavBar/>
<div className="row row--tall row--padded">
<div className="column column--10">
<Helmet>
<title>{title} - {name} - details</title>
{channelName ? (
<link rel='canonical' href={`${host}/${channelName}:${certificateId}/${name}`} />
) : (
<link rel='canonical' href={`${host}/${claimId}/${name}`} />
)}
</Helmet>
<NavBar />
<div className='row row--tall row--padded'>
<div className='column column--10'>
<AssetTitle />
</div>
<div className="column column--5 column--sml-10 align-content-top">
<div className="row row--padded">
<div className='column column--5 column--sml-10 align-content-top'>
<div className='row row--padded'>
<AssetDisplay />
</div>
</div><div className="column column--5 column--sml-10 align-content-top">
<div className="row row--padded">
</div><div className='column column--5 column--sml-10 align-content-top'>
<div className='row row--padded'>
<AssetInfo />
</div>
</div>
@ -31,7 +46,7 @@ class ShowAssetDetails extends React.Component {
);
};
return (
<ErrorPage error={'loading asset data...'}/>
<ErrorPage error={'loading asset data...'} />
);
}
};

27
react/components/ShowAssetLite/view.jsx
View file

@ -1,19 +1,38 @@
import React from 'react';
import Helmet from 'react-helmet';
import { Link } from 'react-router-dom';
import AssetDisplay from 'components/AssetDisplay';
const { site: { title, host } } = require('../../../config/speechConfig.js');
class ShowLite extends React.Component {
render () {
const { asset } = this.props;
if (asset) {
let channelName, certificateId, name, claimId, fileExt;
if (asset.claimData) {
({ channelName, certificateId, name, claimId, fileExt } = asset.claimData);
};
return (
<div className="row row--tall flex-container--column flex-container--center-center">
{ (asset) &&
<div className='row row--tall flex-container--column flex-container--center-center'>
<Helmet>
<title>{title} - {name}</title>
{channelName ? (
<link rel='canonical' href={`${host}/${channelName}:${certificateId}/${name}.${fileExt}`} />
) : (
<link rel='canonical' href={`${host}/${claimId}/${name}.${fileExt}`} />
)}
</Helmet>
<div>
<AssetDisplay />
<Link id="asset-boilerpate" className="link--primary fine-print" to={`/${asset.claimId}/${asset.name}`}>hosted via Spee.ch</Link>
<Link id='asset-boilerpate' className='link--primary fine-print' to={`/${claimId}/${name}`}>hosted
via Spee.ch</Link>
</div>
</div>
);
}
</div>
return (
<p>loading asset data...</p>
);
}
};

17
react/components/ShowChannel/view.jsx
View file

@ -1,8 +1,11 @@
import React from 'react';
import Helmet from 'react-helmet';
import ErrorPage from 'components/ErrorPage';
import NavBar from 'containers/NavBar';
import ChannelClaimsDisplay from 'containers/ChannelClaimsDisplay';
const { site: { title, host } } = require('../../../config/speechConfig.js');
class ShowChannel extends React.Component {
render () {
const { channel } = this.props;
@ -10,14 +13,18 @@ class ShowChannel extends React.Component {
const { name, longId, shortId } = channel;
return (
<div>
<NavBar/>
<div className="row row--tall row--padded">
<div className="column column--10">
<Helmet>
<title>{title} - {name}</title>
<link rel='canonical' href={`${host}/${name}:${longId}`} />
</Helmet>
<NavBar />
<div className='row row--tall row--padded'>
<div className='column column--10'>
<h2>channel name: {name || 'loading...'}</h2>
<p className={'fine-print'}>full channel id: {longId || 'loading...'}</p>
<p className={'fine-print'}>short channel id: {shortId || 'loading...'}</p>
</div>
<div className="column column--10">
<div className='column column--10'>
<ChannelClaimsDisplay />
</div>
</div>
@ -25,7 +32,7 @@ class ShowChannel extends React.Component {
);
};
return (
<ErrorPage error={'loading channel data...'}/>
<ErrorPage error={'loading channel data...'} />
);
}
};

29
react/containers/LoginPage/view.jsx
View file

@ -1,10 +1,13 @@
import React from 'react';
import { withRouter } from 'react-router-dom';
import Helmet from 'react-helmet';
import NavBar from 'containers/NavBar';
import ChannelLoginForm from 'containers/ChannelLoginForm';
import ChannelCreateForm from 'containers/ChannelCreateForm';
class PublishPage extends React.Component {
const { site: { title, host } } = require('../../../config/speechConfig.js');
class LoginPage extends React.Component {
componentWillReceiveProps (newProps) {
// re-route the user to the homepage if the user is logged in
if (newProps.loggedInChannelName !== this.props.loggedInChannelName) {
@ -15,17 +18,21 @@ class PublishPage extends React.Component {
render () {
return (
<div>
<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>
<Helmet>
<title>{title} - Login</title>
<link rel='canonical' href={`${host}/login`} />
</Helmet>
<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>
</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>
<h3 className='h3--no-bottom'>Create a brand new channel:</h3>
<ChannelCreateForm />
</div>
</div>
@ -35,4 +42,4 @@ class PublishPage extends React.Component {
}
};
export default withRouter(PublishPage);
export default withRouter(LoginPage);