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

350 open graph react #360

Merged
bones7242 merged 30 commits from 350-open-graph-react into master 2018-02-24 17:55:00 +01:00
Conversation 0 Commits 30 Files changed 65 +5 -151
6 changed files with 5 additions and 151 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 74aec654f7 - Show all commits

113
helpers/handlebarsHelpers.js
View file

@ -1,113 +0,0 @@
const Handlebars = require('handlebars');
const { site, claim: claimDefaults } = require('../config/speechConfig.js');
function determineOgTitle (storedTitle, defaultTitle) {
return ifEmptyReturnOther(storedTitle, defaultTitle);
};
function determineOgDescription (storedDescription, defaultDescription) {
const length = 200;
let description = ifEmptyReturnOther(storedDescription, defaultDescription);
if (description.length >= length) {
description = `${description.substring(0, length)}...`;
};
return description;
};
function ifEmptyReturnOther (value, replacement) {
if (value === '') {
return replacement;
}
return value;
}
function determineContentTypeFromFileExtension (fileExtension) {
switch (fileExtension) {
case 'jpeg':
case 'jpg':
return 'image/jpeg';
case 'png':
return 'image/png';
case 'gif':
return 'image/gif';
case 'mp4':
return 'video/mp4';
default:
return 'image/jpeg';
}
};
function determineOgThumbnailContentType (thumbnail) {
if (thumbnail) {
if (thumbnail.lastIndexOf('.') !== -1) {
return determineContentTypeFromFileExtension(thumbnail.substring(thumbnail.lastIndexOf('.')));
}
}
return '';
}
function createOpenGraphDataFromClaim (claim, defaultTitle, defaultDescription) {
let openGraphData = {};
openGraphData['embedUrl'] = `${site.host}/${claim.claimId}/${claim.name}`;
openGraphData['showUrl'] = `${site.host}/${claim.claimId}/${claim.name}`;
openGraphData['source'] = `${site.host}/${claim.claimId}/${claim.name}.${claim.fileExt}`;
openGraphData['directFileUrl'] = `${site.host}/${claim.claimId}/${claim.name}.${claim.fileExt}`;
openGraphData['ogTitle'] = determineOgTitle(claim.title, defaultTitle);
openGraphData['ogDescription'] = determineOgDescription(claim.description, defaultDescription);
openGraphData['ogThumbnailContentType'] = determineOgThumbnailContentType(claim.thumbnail);
return openGraphData;
};
module.exports = {
placeCommonHeaderTags () {
const headerBoilerplate = `<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><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">`;
return new Handlebars.SafeString(headerBoilerplate);
},
addOpenGraph (claim) {
const { ogTitle, ogDescription, showUrl, source, ogThumbnailContentType } = createOpenGraphDataFromClaim(claim, claimDefaults.defaultTitle, claimDefaults.defaultDescription);
const thumbnail = claim.thumbnail;
const contentType = claim.contentType;
const ogTitleTag = `<meta property="og:title" content="${ogTitle}" />`;
const ogUrlTag = `<meta property="og:url" content="${showUrl}" />`;
const ogSiteNameTag = `<meta property="og:site_name" content="${site.title}" />`;
const ogDescriptionTag = `<meta property="og:description" content="${ogDescription}" />`;
const ogImageWidthTag = '<meta property="og:image:width" content="600" />';
const ogImageHeightTag = '<meta property="og:image:height" content="315" />';
const basicTags = `${ogTitleTag} ${ogUrlTag} ${ogSiteNameTag} ${ogDescriptionTag} ${ogImageWidthTag} ${ogImageHeightTag}`;
let ogImageTag = `<meta property="og:image" content="${source}" />`;
let ogImageTypeTag = `<meta property="og:image:type" content="${contentType}" />`;
let ogTypeTag = `<meta property="og:type" content="article" />`;
if (contentType === 'video/mp4') {
const ogVideoTag = `<meta property="og:video" content="${source}" />`;
const ogVideoSecureUrlTag = `<meta property="og:video:secure_url" content="${source}" />`;
const ogVideoTypeTag = `<meta property="og:video:type" content="${contentType}" />`;
ogImageTag = `<meta property="og:image" content="${thumbnail}" />`;
ogImageTypeTag = `<meta property="og:image:type" content="${ogThumbnailContentType}" />`;
ogTypeTag = `<meta property="og:type" content="video" />`;
return new Handlebars.SafeString(`${basicTags} ${ogImageTag} ${ogImageTypeTag} ${ogTypeTag} ${ogVideoTag} ${ogVideoSecureUrlTag} ${ogVideoTypeTag}`);
} else {
if (contentType === 'image/gif') {
ogTypeTag = `<meta property="og:type" content="video.other" />`;
};
return new Handlebars.SafeString(`${basicTags} ${ogImageTag} ${ogImageTypeTag} ${ogTypeTag}`);
}
},
addTwitterCard (claim) {
const { embedUrl, directFileUrl } = createOpenGraphDataFromClaim(claim, claimDefaults.defaultTitle, claimDefaults.defaultDescription);
const basicTwitterTags = `<meta name="twitter:site" content="@spee_ch" >`;
const contentType = claim.contentType;
if (contentType === 'video/mp4') {
const twitterName = '<meta name="twitter:card" content="player" >';
const twitterPlayer = `<meta name="twitter:player" content="${embedUrl}" >`;
const twitterPlayerWidth = '<meta name="twitter:player:width" content="600" >';
const twitterTextPlayerWidth = '<meta name="twitter:text:player_width" content="600" >';
const twitterPlayerHeight = '<meta name="twitter:player:height" content="337" >';
const twitterPlayerStream = `<meta name="twitter:player:stream" content="${directFileUrl}" >`;
const twitterPlayerStreamContentType = '<meta name="twitter:player:stream:content_type" content="video/mp4" >';
return new Handlebars.SafeString(`${basicTwitterTags} ${twitterName} ${twitterPlayer} ${twitterPlayerWidth} ${twitterTextPlayerWidth} ${twitterPlayerHeight} ${twitterPlayerStream} ${twitterPlayerStreamContentType}`);
} else {
const twitterCard = '<meta name="twitter:card" content="summary_large_image" >';
return new Handlebars.SafeString(`${basicTwitterTags} ${twitterCard}`);
}
},
};

6
routes/fallback-routes.js
View file

@ -1,7 +1,9 @@
const handlePageRender = require('../helpers/handlePageRender.jsx');
module.exports = app => {
// a catch-all route if someone visits a page that does not exist
app.use('*', ({ originalUrl, ip }, res) => {
app.use('*', (req, res) => {
// send response
res.status(404).render('404');
handlePageRender(req, res);
});
};

4
server.js
View file

@ -3,7 +3,6 @@ const express = require('express');
const bodyParser = require('body-parser');
const expressHandlebars = require('express-handlebars');
const Handlebars = require('handlebars');
const handlebarsHelpers = require('./helpers/handlebarsHelpers.js');
const { populateLocalsDotUser, serializeSpeechUser, deserializeSpeechUser } = require('./helpers/authHelpers.js');
const config = require('./config/speechConfig.js');
const logger = require('winston');
@ -53,9 +52,8 @@ app.use(passport.session());
// configure handlebars & register it with express app
const hbs = expressHandlebars.create({
defaultLayout: 'main', // sets the default layout
defaultLayout: 'embed', // sets the default layout
handlebars : Handlebars, // includes basic handlebars for access to that library
helpers : handlebarsHelpers, // custom defined helpers
});
app.engine('handlebars', hbs.engine);
app.set('view engine', 'handlebars');

4
views/404.handlebars
View file

@ -1,4 +0,0 @@
<div class="row row--tall flex-container--column flex-container--center-center">
<h3>404: Not Found</h3>
<p>That page does not exist. Return <a class="link--primary" href="/">home</a>.</p>
</div>

10
views/index.handlebars
View file

@ -1,10 +0,0 @@
<div class="row row--tall flex-container--column">
<div id="react-app" class="row row--tall flex-container--column">
<div class="row row--padded row--tall flex-container--column flex-container--center-center">
<p>loading...</p>
{{> progressBar}}
</div>
</div>
</div>
<script src="/bundle/bundle.js"></script>

19
views/layouts/main.handlebars
View file

@ -1,19 +0,0 @@
<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<head>
{{ placeCommonHeaderTags }}
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@spee_ch" />
<meta property="og:title" content="Spee.ch" />
<meta property="og:site_name" content="Spee.ch" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://spee.ch/assets/img/Speech_Logo_Main@OG-02.jpg" />
<meta property="og:url" content="http://spee.ch/" />
<meta property="og:description" content="Open-source, decentralized image and video sharing." />
<!--google font-->
<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
</head>
<body id="main-body">
{{{ body }}}
</body>
</html>