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 = { module.exports = {
serveFile ({ fileName, fileType, filePath }, res) { serveFile ({ fileName, fileType, filePath }, res) {
logger.info(`serving file ${fileName}`); logger.info(`serving file ${fileName}`);
@ -86,11 +94,12 @@ module.exports = {
res.status(200).sendFile(filePath, options); res.status(200).sendFile(filePath, options);
}, },
showFile (fileInfo, res) { 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) { showFileLite (fileInfo, res) {
logger.debug('showing file lite'); const openGraphInfo = createOpenGraphInfo(fileInfo);
res.status(200).render('showLite', { layout: 'show', fileInfo }); res.status(200).render('showLite', { layout: 'show', fileInfo, openGraphInfo });
}, },
getClaimIdFromShortUrl (shortUrl, name) { getClaimIdFromShortUrl (shortUrl, name) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {

View file

@ -48,6 +48,16 @@ const hbs = expressHandlebars.create({
</script>` </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) { ifConditional (varOne, operator, varTwo, options) {
switch (operator) { switch (operator) {
case '===': case '===':

View file

@ -7,7 +7,12 @@
<title>Spee.ch</title> <title>Spee.ch</title>
<link rel="stylesheet" href="/assets/css/generalStyle.css" type="text/css"> <link rel="stylesheet" href="/assets/css/generalStyle.css" type="text/css">
<link rel="stylesheet" href="/assets/css/componentStyle.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> </head>
<body> <body>
{{{ body }}} {{{ body }}}

View file

@ -8,12 +8,13 @@
<link rel="stylesheet" href="/assets/css/generalStyle.css" type="text/css"> <link rel="stylesheet" href="/assets/css/generalStyle.css" type="text/css">
<link rel="stylesheet" href="/assets/css/componentStyle.css" type="text/css"> <link rel="stylesheet" href="/assets/css/componentStyle.css" type="text/css">
<!-- twitter card --> <!-- 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:site" content="@spee.ch">
<meta name="twitter:creator" content="@spee.ch"> <meta name="twitter:creator" content="@spee.ch">
<meta name="twitter:title" content="{{fileInfo.name}}"> <meta name="twitter:title" content="{{fileInfo.name}}">
<meta name="twitter:description" content="An image hosted via Spee.ch"> <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> </head>
<body> <body>
{{{ body }}} {{{ body }}}
@ -21,3 +22,7 @@
{{ googleAnalytics }} {{ googleAnalytics }}
</body> </body>
</html> </html>
<script>
</script>

View file

@ -1,6 +1,6 @@
<div class="panel"> <div class="panel">
<div id="asset-placeholder"> <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'}} {{#ifConditional fileInfo.fileType '===' 'video/mp4'}}
<video class="show-asset" autoplay loop controls> <video class="show-asset" autoplay loop controls>
<source src="/media/{{fileInfo.fileName}}"> <source src="/media/{{fileInfo.fileName}}">

View file

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