Fix SEO and refactor HTML pages generation

* Split methods in multiple classes
 * Add JSONLD tags in embed too
 * Index embeds but use a canonical URL tag (targeting the watch page)
 * Remote objects don't include a canonical URL tag anymore. Instead we
   forbid indexation
 * Canonical URLs now use the official short URL (/w/, /w/p, /a, /c
   etc.)

server/core/controllers/api/config.ts

@@ -7,7 +7,7 @@ import { About, CustomConfig, UserRight } from '@peertube/peertube-models'
 import { auditLoggerFactory, CustomConfigAuditView, getAuditIdFromRes } from '../../helpers/audit-logger.js'
 import { objectConverter } from '../../helpers/core-utils.js'
 import { CONFIG, reloadConfig } from '../../initializers/config.js'
-import { ClientHtml } from '../../lib/client-html.js'
+import { ClientHtml } from '../../lib/html/client-html.js'
 import { apiRateLimiter, asyncMiddleware, authenticate, ensureUserHasRight, openapiOperationDoc } from '../../middlewares/index.js'
 import { customConfigUpdateValidator, ensureConfigIsEditable } from '../../middlewares/validators/config.js'
 
@@ -94,7 +94,7 @@ async function deleteCustomConfig (req: express.Request, res: express.Response)
   auditLogger.delete(getAuditIdFromRes(res), new CustomConfigAuditView(customConfig()))
 
   await reloadConfig()
-  ClientHtml.invalidCache()
+  ClientHtml.invalidateCache()
 
   const data = customConfig()
 
@@ -110,7 +110,7 @@ async function updateCustomConfig (req: express.Request, res: express.Response)
   await writeJSON(CONFIG.CUSTOM_FILE, toUpdateJSON, { spaces: 2 })
 
   await reloadConfig()
-  ClientHtml.invalidCache()
+  ClientHtml.invalidateCache()
 
   const data = customConfig()
 

server/core/controllers/client.ts

@@ -9,7 +9,7 @@ import { CONFIG } from '@server/initializers/config.js'
 import { Hooks } from '@server/lib/plugins/hooks.js'
 import { currentDir, root } from '@peertube/peertube-node-utils'
 import { STATIC_MAX_AGE } from '../initializers/constants.js'
-import { ClientHtml, sendHTML, serveIndexHTML } from '../lib/client-html.js'
+import { ClientHtml, sendHTML, serveIndexHTML } from '../lib/html/client-html.js'
 import { asyncMiddleware, buildRateLimiter, embedCSP } from '../middlewares/index.js'
 
 const clientsRouter = express.Router()
@@ -49,6 +49,8 @@ clientsRouter.use('/@:nameWithHost',
   asyncMiddleware(generateActorHtmlPage)
 )
 
+// ---------------------------------------------------------------------------
+
 const embedMiddlewares = [
   clientsRateLimiter,
 
@@ -64,19 +66,21 @@ const embedMiddlewares = [
     res.setHeader('Cache-Control', 'public, max-age=0')
 
     next()
-  },
-
-  asyncMiddleware(generateEmbedHtmlPage)
+  }
 ]
 
-clientsRouter.use('/videos/embed', ...embedMiddlewares)
-clientsRouter.use('/video-playlists/embed', ...embedMiddlewares)
+clientsRouter.use('/videos/embed/:id', ...embedMiddlewares, asyncMiddleware(generateVideoEmbedHtmlPage))
+clientsRouter.use('/video-playlists/embed/:id', ...embedMiddlewares, asyncMiddleware(generateVideoPlaylistEmbedHtmlPage))
+
+// ---------------------------------------------------------------------------
 
 const testEmbedController = (req: express.Request, res: express.Response) => res.sendFile(testEmbedPath)
 
 clientsRouter.use('/videos/test-embed', clientsRateLimiter, testEmbedController)
 clientsRouter.use('/video-playlists/test-embed', clientsRateLimiter, testEmbedController)
 
+// ---------------------------------------------------------------------------
+
 // Dynamic PWA manifest
 clientsRouter.get('/manifest.webmanifest', clientsRateLimiter, asyncMiddleware(generateManifest))
 
@@ -142,17 +146,13 @@ function serveServerTranslations (req: express.Request, res: express.Response) {
   return res.status(HttpStatusCode.NOT_FOUND_404).end()
 }
 
-async function generateEmbedHtmlPage (req: express.Request, res: express.Response) {
-  const hookName = req.originalUrl.startsWith('/video-playlists/')
-    ? 'filter:html.embed.video-playlist.allowed.result'
-    : 'filter:html.embed.video.allowed.result'
-
+async function generateVideoEmbedHtmlPage (req: express.Request, res: express.Response) {
   const allowParameters = { req }
 
   const allowedResult = await Hooks.wrapFun(
     isEmbedAllowed,
     allowParameters,
-    hookName
+    'filter:html.embed.video.allowed.result'
   )
 
   if (!allowedResult || allowedResult.allowed !== true) {
@@ -161,7 +161,27 @@ async function generateEmbedHtmlPage (req: express.Request, res: express.Respons
     return sendHTML(allowedResult?.html || '', res)
   }
 
-  const html = await ClientHtml.getEmbedHTML()
+  const html = await ClientHtml.getVideoEmbedHTML(req.params.id)
+
+  return sendHTML(html, res)
+}
+
+async function generateVideoPlaylistEmbedHtmlPage (req: express.Request, res: express.Response) {
+  const allowParameters = { req }
+
+  const allowedResult = await Hooks.wrapFun(
+    isEmbedAllowed,
+    allowParameters,
+    'filter:html.embed.video-playlist.allowed.result'
+  )
+
+  if (!allowedResult || allowedResult.allowed !== true) {
+    logger.info('Embed is not allowed.', { allowedResult })
+
+    return sendHTML(allowedResult?.html || '', res)
+  }
+
+  const html = await ClientHtml.getVideoPlaylistEmbedHTML(req.params.id)
 
   return sendHTML(html, res)
 }

server/core/controllers/misc.ts

@@ -2,7 +2,7 @@ import cors from 'cors'
 import express from 'express'
 import { HttpNodeinfoDiasporaSoftwareNsSchema20, HttpStatusCode } from '@peertube/peertube-models'
 import { CONFIG, isEmailEnabled } from '@server/initializers/config.js'
-import { serveIndexHTML } from '@server/lib/client-html.js'
+import { serveIndexHTML } from '@server/lib/html/client-html.js'
 import { ServerConfigManager } from '@server/lib/server-config-manager.js'
 import { CONSTRAINTS_FIELDS, DEFAULT_THEME_NAME, PEERTUBE_VERSION, ROUTE_CACHE_LIFETIME } from '../initializers/constants.js'
 import { getThemeOrDefault } from '../lib/plugins/theme-utils.js'