350 open graph react #360
6 changed files with 5 additions and 151 deletions
|
|
@ -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}`);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
@ -1,7 +1,9 @@
|
||||||
|
const handlePageRender = require('../helpers/handlePageRender.jsx');
|
||||||
|
|
||||||
module.exports = app => {
|
module.exports = app => {
|
||||||
// a catch-all route if someone visits a page that does not exist
|
// a catch-all route if someone visits a page that does not exist
|
||||||
app.use('*', ({ originalUrl, ip }, res) => {
|
app.use('*', (req, res) => {
|
||||||
// send response
|
// send response
|
||||||
res.status(404).render('404');
|
handlePageRender(req, res);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,6 @@ const express = require('express');
|
||||||
const bodyParser = require('body-parser');
|
const bodyParser = require('body-parser');
|
||||||
const expressHandlebars = require('express-handlebars');
|
const expressHandlebars = require('express-handlebars');
|
||||||
const Handlebars = require('handlebars');
|
const Handlebars = require('handlebars');
|
||||||
const handlebarsHelpers = require('./helpers/handlebarsHelpers.js');
|
|
||||||
const { populateLocalsDotUser, serializeSpeechUser, deserializeSpeechUser } = require('./helpers/authHelpers.js');
|
const { populateLocalsDotUser, serializeSpeechUser, deserializeSpeechUser } = require('./helpers/authHelpers.js');
|
||||||
const config = require('./config/speechConfig.js');
|
const config = require('./config/speechConfig.js');
|
||||||
const logger = require('winston');
|
const logger = require('winston');
|
||||||
|
|
@ -53,9 +52,8 @@ app.use(passport.session());
|
||||||
|
|
||||||
// configure handlebars & register it with express app
|
// configure handlebars & register it with express app
|
||||||
const hbs = expressHandlebars.create({
|
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
|
handlebars : Handlebars, // includes basic handlebars for access to that library
|
||||||
helpers : handlebarsHelpers, // custom defined helpers
|
|
||||||
});
|
});
|
||||||
app.engine('handlebars', hbs.engine);
|
app.engine('handlebars', hbs.engine);
|
||||||
app.set('view engine', 'handlebars');
|
app.set('view engine', 'handlebars');
|
||||||
|
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -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>
|
|
||||||
Loading…
Reference in a new issue