✨ Dynamic meta tags for public crates

package.json

@@ -34,6 +34,7 @@
   "homepage": "https://github.com/betahuhn/webcrate#README",
   "dependencies": {
     "body-parser": "^1.19.0",
+    "cheerio": "^1.0.0-rc.10",
     "compression": "^1.7.4",
     "cors": "^2.8.5",
     "deta": "^1.0.0",

server/index.ts

@@ -5,7 +5,7 @@ import compression from 'compression'
 import cors from 'cors'
 
 import routes from './router'
-import { routeLog, sendResponse, disableCaching, checkIfSetup } from './middleware'
+import { routeLog, sendResponse, disableCaching, checkIfSetup, renderMetaTags } from './middleware'
 import log from './utils/log'
 
 const app = express()
@@ -25,6 +25,8 @@ app.use(cors())
 // Disable caching for /, reference: https://www.notion.so/Turning-off-Caching-on-the-Root-9879ed9411a4486dbeaf4cc57697d610
 app.use(disableCaching)
 
+app.use(renderMetaTags)
+
 // Serve Nuxt static files
 app.use(express.static(path.join(__dirname, '../dist')))
 

server/middleware/index.ts

@@ -1,8 +1,12 @@
+import fs from 'fs'
+import path from 'path'
 import express from 'express'
+import cheerio from 'cheerio'
 
 import log from '../utils/log'
 import { messages } from '../utils/status'
 import { isSetup } from '../utils/isSetup'
+import emojis from '../utils/emojis'
 
 import { Crate } from '../models/crate'
 import { Stat } from '../models/stats'
@@ -33,6 +37,44 @@ export function disableCaching(req: express.Request, res: express.Response, next
 	next()
 }
 
+export async function renderMetaTags(req: express.Request, res: express.Response, next: express.NextFunction) {
+	// Only run on public crates
+	if (req.originalUrl.startsWith('/crate/public')) {
+
+		// Parse the crate id from the URL
+		const id = req.originalUrl.split('/crate/public/')[1]
+
+		// Check if the crate exists
+		const crate = await Crate.findOne({ id, public: true })
+		if (!crate) return next()
+
+		// Read the html file
+		const file = await fs.promises.readFile(path.join(__dirname, '../../dist/200.html'))
+		const html = file.toString()
+
+		// Load the html file into cheerio
+		const $ = cheerio.load(html)
+
+		// New title and description values
+		const title = `${ emojis[crate.icon] } ${ crate.name } | WebCrate`
+		const description = `${ crate.description } - View on WebCrate`
+
+		// Replace title
+		$('title').text(title)
+		$(`meta[name='title']`).attr('content', title)
+		$(`meta[name='og:title']`).attr('content', title)
+
+		// Replace description
+		$(`meta[name='description']`).attr('content', description)
+		$(`meta[name='og:description']`).attr('content', description)
+
+		// Render HTML
+		return res.send($.html())
+	}
+
+	next()
+}
+
 export async function checkIfSetup(req: express.Request, res: express.Response, next: express.NextFunction) {
 	// Check if WebCrate already set up
 	const setup = await isSetup()