build custom metadata from config

.env.defaults

@@ -5,6 +5,8 @@ WEB_SERVER_PORT=1337
 DOMAIN=lbry.tv
 URL=https://lbry.tv
 SITE_TITLE=lbry.tv
+SITE_MOTTO=Content Freedom
+SITE_DESCRIPTION=Meet LBRY, an open, free, and community-controlled content wonderland.
 LOGO_TITLE=LBRY
 LBRY_WEB_API=https://api.lbry.tv
 LBRY_WEB_STREAMING_API=https://cdn.lbryplayer.xyz

config.js

@@ -8,6 +8,8 @@ const config = {
   DOMAIN: process.env.DOMAIN,
   URL: process.env.URL, //lbry.tv',
   SITE_TITLE: process.env.SITE_TITLE,
+  SITE_MOTTO: process.env.SITE_MOTTO,
+  SITE_DESCRIPTION: process.env.SITE_DESCRIPTION,
   LBRY_WEB_API: process.env.LBRY_WEB_API, //api.lbry.tv',
   LBRY_WEB_STREAMING_API: process.env.LBRY_WEB_STREAMING_API, //cdn.lbryplayer.xyz',
   WELCOME_VERSION: process.env.WELCOME_VERSION,

static/app-strings.json

@@ -1259,6 +1259,7 @@
   "Email Preferences": "Email Preferences",
   "Opt out of any topics you don't want to receive email about.": "Opt out of any topics you don't want to receive email about.",
   "Uncheck your email below if you want to stop receiving messages.": "Uncheck your email below if you want to stop receiving messages.",
+  "Delete Your Channel": "Delete Your Channel",
   "Remove from Blocked List": "Remove from Blocked List",
   "Are you sure you want to remove this from the list?": "Are you sure you want to remove this from the list?",
   "Cover": "Cover",

web/.env.defaults

@@ -5,6 +5,8 @@ WEB_SERVER_PORT=1337
 DOMAIN=lbry.tv
 URL=https://lbry.tv
 SITE_TITLE=lbry.tv
+SITE_MOTTO=Content Freedom
+SITE_DESCRIPTION=Meet LBRY, an open, free, and community-controlled content wonderland.
 LOGO_TITLE=lbry.tv
 LBRY_WEB_API=https://api.lbry.tv
 LBRY_WEB_STREAMING_API=https://cdn.lbryplayer.xyz

web/src/html.js

@@ -1,4 +1,4 @@
-const { URL } = require('../../config.js');
+const { URL, SITE_TITLE, SITE_DESCRIPTION, SITE_MOTTO } = require('../../config.js');
 const { generateEmbedUrl, generateStreamUrl } = require('../../ui/util/web');
 const PAGES = require('../../ui/constants/pages');
 const { getClaim } = require('./chainquery');
@@ -8,6 +8,7 @@ const path = require('path');
 
 let html = fs.readFileSync(path.join(__dirname, '/../dist/index.html'), 'utf8');
 
+module.exports = { insertToHead, buildBasicOgMetadata, getHtml };
 function insertToHead(fullHtml, htmlToInsert) {
   return fullHtml.replace(
     /<!-- VARIABLE_HEAD_BEGIN -->.*<!-- VARIABLE_HEAD_END -->/s,
@@ -38,15 +39,35 @@ function buildOgMetadata(overrideOptions = {}) {
   const head =
     '<title>lbry.tv</title>\n' +
     `<meta property="og:url" content="${URL}" />\n` +
-    `<meta property="og:title" content="${title || 'lbry.tv'}" />\n` +
+    `<meta property="og:title" content="${title || SITE_TITLE}" />\n` +
-    '<meta property="og:site_name" content="lbry.tv | Content Freedom"/>\n' +
+    `<meta property="og:site_name" content="${SITE_TITLE} | ${SITE_MOTTO}"/>\n` +
-    `<meta property="og:description" content="${description ||
+    `<meta property="og:description" content="${description || SITE_DESCRIPTION}" />\n` +
-      'Meet LBRY, an open, free, and community-controlled content wonderland.'}" />\n` +
+    `<meta property="og:image" content="${URL}/public/v2-og.png" />\n` +
-    `<meta property="og:image" content="${URL}/v2-og.png" />\n` +
     '<meta name="twitter:card" content="summary_large_image"/>\n' +
-    `<meta name="twitter:image" content="${URL}/v2-og.png"/>\n` +
+    `<meta name="twitter:title" content="${title || SITE_TITLE}" />\n` +
+    `<meta name="twitter:description" content="${description || SITE_DESCRIPTION}" />\n` +
+    `<meta name="twitter:image" content="${URL}/public/v2-og.png"/>\n` +
+    `<meta name="twitter:url" content="${URL}" />\n` +
     '<meta property="fb:app_id" content="1673146449633983" />';
+  return head;
+}
 
+function buildBasicOgMetadata() {
+  const head =
+    '    <!-- VARIABLE_HEAD_BEGIN -->' +
+    '<title>lbry.tv</title>\n' +
+    `<meta property="og:url" content="${URL}" />\n` +
+    `<meta property="og:title" content="${SITE_TITLE}" />\n` +
+    `<meta property="og:site_name" content="${SITE_TITLE} | ${SITE_MOTTO}"/>\n` +
+    `<meta property="og:description" content="${SITE_DESCRIPTION}" />\n` +
+    `<meta property="og:image" content="${URL}/public/v2-og.png" />\n` +
+    '<meta name="twitter:card" content="summary_large_image"/>\n' +
+    `<meta name="twitter:title" content="${SITE_TITLE}" />\n` +
+    `<meta name="twitter:description" content="${SITE_DESCRIPTION}" />\n` +
+    `<meta name="twitter:image" content="${URL}/public/v2-og.png"/>\n` +
+    `<meta name="twitter:url" content="${URL}" />\n` +
+    '<meta property="fb:app_id" content="1673146449633983" />' +
+    '    <!-- VARIABLE_HEAD_END -->';
   return head;
 }
 
@@ -69,7 +90,7 @@ function buildClaimOgMetadata(uri, claim, overrideOptions = {}) {
   if (Number(claim.fee) <= 0 && claim.source_media_type && claim.source_media_type.startsWith('image/')) {
     imageThumbnail = generateStreamUrl(claim.name, claim.claim_id);
   }
-  const claimThumbnail = escapeHtmlProperty(claim.thumbnail_url) || imageThumbnail || `${URL}/v2-og.png`;
+  const claimThumbnail = escapeHtmlProperty(claim.thumbnail_url) || imageThumbnail || `${URL}/public/v2-og.png`;
 
   // Allow for ovverriding default claim based og metadata
   const title = overrideOptions.title || claimTitle;
@@ -91,8 +112,10 @@ function buildClaimOgMetadata(uri, claim, overrideOptions = {}) {
   head += `<meta property="og:site_name" content="lbry.tv"/>`;
   head += `<meta property="og:type" content="website"/>`;
   head += `<meta property="og:title" content="${title}"/>`;
+  head += `<meta name="twitter:title" content="${title}"/>`;
   // below should be canonical_url, but not provided by chainquery yet
   head += `<meta property="og:url" content="${URL}/${claim.name}:${claim.claim_id}"/>`;
+  head += `<meta name="twitter:url" content="${URL}/${claim.name}:${claim.claim_id}"/>`;
 
   if (
     claim.source_media_type &&
@@ -131,11 +154,11 @@ async function getClaimFromChainquery(url) {
   return undefined;
 }
 
-module.exports.getHtml = async function getHtml(ctx) {
+async function getHtml(ctx) {
   const path = decodeURIComponent(ctx.path);
-
   if (path.length === 0) {
-    return insertToHead(html);
+    const ogMetadata = buildBasicOgMetadata();
+    return insertToHead(html, ogMetadata);
   }
 
   const invitePath = `/$/${PAGES.INVITE}/`;
@@ -187,5 +210,6 @@ module.exports.getHtml = async function getHtml(ctx) {
     }
   }
 
-  return insertToHead(html);
+  const ogMetadata = buildBasicOgMetadata();
-};
+  return insertToHead(html, ogMetadata);
+}

web/webpack.config.js

@@ -5,6 +5,7 @@ const baseConfig = require('../webpack.base.config.js');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const { DefinePlugin, ProvidePlugin } = require('webpack');
 const SentryWebpackPlugin = require('@sentry/webpack-plugin');
+const { insertToHead, buildBasicOgMetadata } = require('./src/html');
 
 const STATIC_ROOT = path.resolve(__dirname, '../static/');
 const UI_ROOT = path.resolve(__dirname, '../ui/');
@@ -18,6 +19,9 @@ let plugins = [
     {
       from: `${STATIC_ROOT}/index-web.html`,
       to: `${DIST_ROOT}/index.html`,
+      transform(content, path) {
+        return insertToHead(content.toString(), buildBasicOgMetadata());
+      },
     },
     {
       from: `${STATIC_ROOT}/img/favicon.png`,