OG and Twitter metadata for event pages

2 files changed, 56 insertions, 8 deletions

diff --git a/routes.js b/routes.js
index 7581b4d..e9973c4 100755
--- a/routes.js
+++ b/routes.js
@@ -19,6 +19,47 @@ var moment = require('moment-timezone');
 
 const marked = require('marked');
 
+// Extra marked renderer (used to render plaintext event description for page metadata)
+// Adapted from https://dustinpfister.github.io/2017/11/19/nodejs-marked/
+// ? to ? helper
+htmlEscapeToText = function (text) {
+    return text.replace(/\&\#[0-9]*;|&/g, function (escapeCode) {
+        if (escapeCode.match(/amp/)) {
+            return '&';
+        }
+        return String.fromCharCode(escapeCode.match(/[0-9]+/));
+    });
+}
+
+render_plain = function () {
+    var render = new marked.Renderer();
+    // render just the text of a link, strong, em
+    render.link = function (href, title, text) {
+        return text;
+    };
+	render.strong = function(text) {
+		return text;
+	}
+	render.em = function(text) {
+		return text;
+	}
+    // render just the text of a paragraph
+    render.paragraph = function (text) {
+        return htmlEscapeToText(text)+'\r\n';
+    };
+    // render nothing for headings, images, and br
+    render.heading = function (text, level) {
+        return '';
+    };
+    render.image = function (href, title, text) {
+        return '';
+    };
+	render.br = function () {
+		return '';
+	};
+    return render;
+}
+
 const ical = require('ical');
 
 const sgMail = require('@sendgrid/mail');
@@ -202,6 +243,12 @@ router.get('/:eventID', (req, res) => {
 						}
 					}
 				}
+				var metadata = {
+					title: event.name,
+					description: marked(event.description, { renderer: render_plain()}).split(" ").splice(0,20).join(" ").trim(),
+					image: (eventHasCoverImage ? 'https://gath.io/events/' + event.image : null),
+					url: 'https://gath.io/' + req.params.eventID
+				};
 				res.set("X-Robots-Tag", "noindex");
 				res.render('event', {
 					title: event.name,
@@ -221,7 +268,8 @@ router.get('/:eventID', (req, res) => {
 					eventHasHost: eventHasHost,
 					firstLoad: firstLoad,
 					eventHasConcluded: eventHasConcluded,
-					eventHasBegun: eventHasBegun
+					eventHasBegun: eventHasBegun,
+					metadata: metadata,
 				})
 			}
 			else {
diff --git a/views/layouts/main.handlebars b/views/layouts/main.handlebars
index 82a979d..6d6c217 100755
--- a/views/layouts/main.handlebars
+++ b/views/layouts/main.handlebars
@@ -15,15 +15,15 @@
 
 		<meta property="og:image:width" content="260">
 		<meta property="og:image:height" content="260">
-		<meta property="og:description" content="An easier, quicker, and much less privacy-invading way to make and share events">
-		<meta property="og:title" content="gathio">
-		<meta property="og:url" content="http://gath.io/">
-		<meta property="og:image" content="http://gath.io/og-image.jpg">
+		<meta property="og:description" content="{{#if metadata.description}}{{metadata.description}}{{else}}An easier, quicker, and much less privacy-invading way to make and share events{{/if}}">
+		<meta property="og:title" content="{{#if metadata.title}}{{metadata.title}} &middot; gathio{{else}}gathio{{/if}}">
+		<meta property="og:url" content="{{#if metadata.url}}{{metadata.url}}{{else}}https://gath.io/{{/if}}">
+		<meta property="og:image" content="{{#if metadata.image}}{{metadata.image}}{{else}}http://gath.io/og-image.jpg{{/if}}">
 
 		<meta name="twitter:card" content="summary">
-		<meta name="twitter:title" content="gathio">
-		<meta name="twitter:description" content="An easier, quicker, and much less privacy-invading way to make and share events. ">
-		<meta name="twitter:image" content="http://gath.io/og-image.jpg">
+		<meta name="twitter:title" content="{{#if metadata.title}}{{metadata.title}} &middot; gathio{{else}}gathio{{/if}}">
+		<meta name="twitter:description" content="{{#if metadata.description}}{{metadata.description}}{{else}}An easier, quicker, and much less privacy-invading way to make and share events{{/if}}">
+		<meta name="twitter:image" content="{{#if metadata.image}}{{metadata.image}}{{else}}http://gath.io/og-image.jpg{{/if}}">
 
 
 		<title>{{#if title}}{{title}} &middot; {{/if}}gathio</title>