added open graph meta tags

This commit is contained in:
bill bittner 2017-08-04 17:41:06 -07:00
parent 4f5ceb1bf9
commit b17e013584
6 changed files with 39 additions and 9 deletions

View file

@ -60,6 +60,14 @@ function checkLocalDbForClaims (name, shortUrl) {
});
}
function createOpenGraphInfo ({ fileType, claimId, name, fileExt }) {
return {
type : fileType.substring(0, fileType.indexOf('/')),
showUrl: `https://spee.ch/${claimId}/${name}`,
source : `https://spee.ch/${claimId}/${name}${fileExt}`,
};
}
module.exports = {
serveFile ({ fileName, fileType, filePath }, res) {
logger.info(`serving file ${fileName}`);
@ -86,11 +94,12 @@ module.exports = {
res.status(200).sendFile(filePath, options);
},
showFile (fileInfo, res) {
res.status(200).render('show', { layout: 'show', fileInfo });
const openGraphInfo = createOpenGraphInfo(fileInfo);
res.status(200).render('show', { layout: 'show', fileInfo, openGraphInfo });
},
showFileLite (fileInfo, res) {
logger.debug('showing file lite');
res.status(200).render('showLite', { layout: 'show', fileInfo });
const openGraphInfo = createOpenGraphInfo(fileInfo);
res.status(200).render('showLite', { layout: 'show', fileInfo, openGraphInfo });
},
getClaimIdFromShortUrl (shortUrl, name) {
return new Promise((resolve, reject) => {

View file

@ -48,6 +48,16 @@ const hbs = expressHandlebars.create({
</script>`
);
},
addOpenGraph (title, url, type, source, mimeType) {
return new Handlebars.SafeString(
`<meta property="og:title" content="${title}"/>
<meta property="og:url" content="${url}" />
<meta property="og:site_name" content="spee.ch" />
<meta property="og:type" content="${type}" />
<meta property="og:${type}" content="${source}" />
<meta property="og:${type}:type" content="${mimeType}" />`
);
},
ifConditional (varOne, operator, varTwo, options) {
switch (operator) {
case '===':

View file

@ -7,7 +7,12 @@
<title>Spee.ch</title>
<link rel="stylesheet" href="/assets/css/generalStyle.css" type="text/css">
<link rel="stylesheet" href="/assets/css/componentStyle.css" type="text/css">
{{ twitterCard }}
<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/content-freedom-64px.png">
<meta property="og:url" content="http://spee.ch/">
<meta property="og:description" content="Open-source, decentralized image and video hosting.">
</head>
<body>
{{{ body }}}

View file

@ -8,16 +8,21 @@
<link rel="stylesheet" href="/assets/css/generalStyle.css" type="text/css">
<link rel="stylesheet" href="/assets/css/componentStyle.css" type="text/css">
<!-- twitter card -->
<meta name="twitter:card" content="summary_large_image">
{{!-- <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@spee.ch">
<meta name="twitter:creator" content="@spee.ch">
<meta name="twitter:title" content="{{fileInfo.name}}">
<meta name="twitter:description" content="An image hosted via Spee.ch">
<meta name="twitter:image" content="https://spee.ch/media/{{fileInfo.fileName}}">
<meta name="twitter:image" content="https://spee.ch/media/{{fileInfo.fileName}}"> --}}
{{addOpenGraph fileInfo.name openGraphInfo.showUrl openGraphInfo.type openGraphInfo.source fileInfo.fileType }}
</head>
<body>
{{{ body }}}
<!-- google analytics -->
{{ googleAnalytics }}
</body>
</html>
</html>
<script>
</script>

View file

@ -1,6 +1,6 @@
<div class="panel">
<div id="asset-placeholder">
<a href="/{{fileInfo.claimId}}/{{fileInfo.name}}{{fileInfo.fileExt}}">
<a href="/{{fileInfo.claimId}}/{{fileInfo.fileName}}{{fileInfo.fileExt}}">
{{#ifConditional fileInfo.fileType '===' 'video/mp4'}}
<video class="show-asset" autoplay loop controls>
<source src="/media/{{fileInfo.fileName}}">

View file

@ -6,9 +6,10 @@
{{!--fallback--}}
Your browser does not support the <code>video</code> element.
</video>
{{addOpenGraph fileInfo.name links.showUrl 'video' links.source fileInfo.fileType }}
{{else}}
<img class="show-asset-lite" src="/media/{{fileInfo.fileName}}" alt="{{fileInfo.fileName}}"/>
{{addOpenGraph fileInfo.name links.showUrl 'image' links.source fileInfo.fileType }}
{{/ifConditional}}
</a>
</div>