Prerender opengraph tags in the server

This commit is contained in:
Chocobozzz 2016-11-11 10:55:07 +01:00
parent ad4013d5c3
commit 830bcd0f82
4 changed files with 95 additions and 6 deletions

View File

@ -6,6 +6,10 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The following comment is used by the server to prerender OpenGraph tags -->
<!-- opengraph tags -->
<!-- Do not remove it! -->
<link rel="icon" type="image/png" href="/client/assets/favicon.png" /> <link rel="icon" type="image/png" href="/client/assets/favicon.png" />
<!-- TODO: bundle it with webpack when https://github.com/webpack/webpack/pull/1931 will be merged --> <!-- TODO: bundle it with webpack when https://github.com/webpack/webpack/pull/1931 will be merged -->

View File

@ -69,6 +69,7 @@ app.use(expressValidator({
// API routes // API routes
const apiRoute = '/api/' + constants.API_VERSION const apiRoute = '/api/' + constants.API_VERSION
app.use(apiRoute, routes.api) app.use(apiRoute, routes.api)
app.use('/', routes.client)
// Static files // Static files
app.use('/client', express.static(path.join(__dirname, '/client/dist'), { maxAge: constants.STATIC_MAX_AGE })) app.use('/client', express.static(path.join(__dirname, '/client/dist'), { maxAge: constants.STATIC_MAX_AGE }))
@ -88,12 +89,9 @@ app.use(constants.STATIC_PATHS.WEBSEED, cors(), express.static(videosPhysicalPat
const thumbnailsPhysicalPath = constants.CONFIG.STORAGE.THUMBNAILS_DIR const thumbnailsPhysicalPath = constants.CONFIG.STORAGE.THUMBNAILS_DIR
app.use(constants.STATIC_PATHS.THUMBNAILS, express.static(thumbnailsPhysicalPath, { maxAge: constants.STATIC_MAX_AGE })) app.use(constants.STATIC_PATHS.THUMBNAILS, express.static(thumbnailsPhysicalPath, { maxAge: constants.STATIC_MAX_AGE }))
// Client application // Always serve index client page
app.use('/videos/embed', function (req, res, next) {
res.sendFile(path.join(__dirname, 'client/dist/standalone/videos/embed.html'))
})
app.use('/*', function (req, res, next) { app.use('/*', function (req, res, next) {
res.sendFile(path.join(__dirname, 'client/dist/index.html')) res.sendFile(path.join(__dirname, './client/dist/index.html'))
}) })
// ----------- Tracker ----------- // ----------- Tracker -----------

View File

@ -0,0 +1,85 @@
'use strict'
const parallel = require('async/parallel')
const express = require('express')
const fs = require('fs')
const mongoose = require('mongoose')
const path = require('path')
const constants = require('../initializers/constants')
const middlewares = require('../middlewares')
const validators = middlewares.validators
const validatorsVideos = validators.videos
const Video = mongoose.model('Video')
const router = express.Router()
const opengraphComment = '<!-- opengraph tags -->'
const embedPath = path.join(__dirname, '../../client/dist/standalone/videos/embed.html')
const indexPath = path.join(__dirname, '../../client/dist/index.html')
// Special route that add OpenGraph tags
// Do not use a template engine for a so little thing
router.use('/videos/watch/:id', validatorsVideos.videosGet, generateWatchHtmlPage)
router.use('/videos/embed', function (req, res, next) {
res.sendFile(embedPath)
})
// ---------------------------------------------------------------------------
module.exports = router
// ---------------------------------------------------------------------------
function addOpenGraphTags (htmlStringPage, video) {
const thumbnailUrl = constants.CONFIG.WEBSERVER.URL + video.thumbnailPath
const videoUrl = constants.CONFIG.WEBSERVER.URL + '/videos/watch/'
const metaTags = {
'og:type': 'video',
'og:title': video.name,
'og:image': thumbnailUrl,
'og:url': videoUrl,
'og:description': video.description,
'name': video.name,
'description': video.description,
'image': thumbnailUrl,
'twitter:card': 'summary_large_image',
'twitter:site': '@Chocobozzz',
'twitter:title': video.name,
'twitter:description': video.description,
'twitter:image': thumbnailUrl
}
let tagsString = ''
Object.keys(metaTags).forEach(function (tagName) {
const tagValue = metaTags[tagName]
tagsString += '<meta property="' + tagName + '" content="' + tagValue + '" />'
})
return htmlStringPage.replace(opengraphComment, tagsString)
}
function generateWatchHtmlPage (req, res, next) {
parallel({
file: function (callback) {
fs.readFile(indexPath, callback)
},
video: function (callback) {
Video.load(req.params.id, callback)
}
}, function (err, results) {
if (err) return next(err)
const html = results.file.toString()
const video = results.video.toFormatedJSON()
const htmlStringPageWithTags = addOpenGraphTags(html, video)
res.set('Content-Type', 'text/html; charset=UTF-8').send(htmlStringPageWithTags)
})
}

View File

@ -1,7 +1,9 @@
'use strict' 'use strict'
const apiController = require('./api/') const apiController = require('./api/')
const clientController = require('./client')
module.exports = { module.exports = {
api: apiController api: apiController,
client: clientController
} }