Merge pull request #4455 from lbryio/custom-metadata

build custom metadata from config
2020-07-07 12:35:23 -04:00 · 2020-07-07 12:35:23 -04:00 · 66d929a294
parent 0afbf29be5 50d8bfbfce
commit 66d929a294
10 changed files with 106 additions and 62 deletions
--- a/.env.defaults
+++ b/.env.defaults
@ -1,14 +1,38 @@
 # Copy this file to .env to make modifications
+
+# Base config
+MATOMO_URL=https://analytics.lbry.com/
+MATOMO_ID=666
 WEBPACK_WEB_PORT=9090
 WEBPACK_ELECTRON_PORT=9091
 WEB_SERVER_PORT=1337
-DOMAIN=lbry.tv
-URL=https://lbry.tv
-SITE_TITLE=lbry.tv
-LOGO_TITLE=LBRY
 LBRY_WEB_API=https://api.lbry.tv
 LBRY_WEB_STREAMING_API=https://cdn.lbryplayer.xyz
 WELCOME_VERSION=1.0
+
+# Custom Site info
+DOMAIN=lbry.tv
+URL=https://lbry.tv
+# UI
+SITE_TITLE=lbry.tv
+SITE_NAME=LBRY
+SITE_DESCRIPTION=Meet LBRY, an open, free, and community-controlled content wonderland.
+LOGO_TITLE=lbry.tv
+# OG
+
+OG_TITLE_SUFFIX=| lbry.tv
+OG_HOMEPAGE_TITLE=lbry.tv
+OG_IMAGE_URL=
+SITE_CANONICAL_URL=https://lbry.tv
+# LOCALE
 DEFAULT_LANGUAGE=en
-MATOMO_URL=https://analytics.lbry.com/
-MATOMO_ID=6
+
+# Custom Content
+# If the following is true, copy custom/homepage.example.js to custom/homepage.js and modify
+CUSTOM_HOMEPAGE=false
+# Add up to 2 sidebar links:
+# PINNED_URI_1=@Lbrylatam#2/Integracionesporseguridad#4
+# PINNED_LABEL_1=LBRY LATAM
+# PINNED_URI_2=$/discover?t=lbrytvpaidbeta&fee_amount=>0&claim_type=stream&channel_ids=5af39f818f668d8c00943c9326c5201c4fe3c423,cda9c4e92f19d6fe0764524a2012056e06ca2055,760da3ba3dd85830a843beaaed543a89b7a367e7,40c36948f0da072dcba3e4833e90f71e16de78be,e8f68563d242f6ac9784dcbc41dd86c28a9391d6,7236fc5d2783ea7314d9076ae6c8a250e3992d1a,cf7792c2a37d0d76aaaff84aff0b99a8c791429d,8316ac90764fedf3147799b7b81a6575a9cc398e,8627af93c1a1219150f06b698f4b33e6ed2f1c1e,8972a1bd06de5186e5e89292b05aac8aaa817791,c5b0b17838df2f6c31162f64d55f60f34ae8bfc6,f576d5dba905fc179de880c3fe3eb3281ea74f59,97dd77c93c9603cbb2583f3589f7f5a6c92baa43,f399d873e0c37cf24de9569b5f22bbb30a5c6709,dba870d0620d41b2b9a152c961e0c06cf875ccfc,ca1fd651c9d14bf2e5088bb2aa0146ee7aeb2ae0,50ad846a4b1543b847bf3fdafb7b45f6b2f5844c,e09ff5abe9fb44dd0dd0576894a6db60a6211603,7b6f7517f6b816827d076fa0eaad550aa315a4e7,2068452c41d8da3bd68961335da0072a99258a1a,5da63df97c8255ae94a88940695b8471657dd5a1,3645cf2f5d0bdac0523f945be1c3ff60758f7845,4da85b12244839d6368b9290f1619ff9514ab2a8,4ad942982e43326c7700b1b6443049b3cfd82161,55304f219244abf82f684f759cc0c7769242f3b4,8f42e5b592bb7f7a03f4a94a86a41b1236bb099f,e2a014d885a48f5be2dc6409610996337312facb,c18996ca488753f714d36d4654715927c1d7f9c2,ebc4214424cfa683a7046e1f794fea1e44788d84,06b6d6d6a893fb589ec2ded948f5122856921ed5,07e4546674268fc0222b2ca22d31d0549dc217ee,060940e41973d4f7f16d72a2733138e931c35f41,f8d6eccd887c9cebd36b1d42aa349279b7f5c3ed,68098b8426f967b8d04cc566348b5c128823219e,2bfe6cdb24a21bdc1b76fb7c416edd50e9e85945,1f9bb08bfa2259629f4aaa9ed40f97e9a41b6fa1,2f20148495612946675fe1c8ea99171e4d950b81,bc6938fa1e09e840056c2e831abf9664f397c472,2a6194792beac5130641e932b5ac6e5a99b5ca4f,185ba2bd547a5e4a77d29fe6c1484f47db5e058f,29cc7f6081268eaa5b3f2946e0cd0b952a94812c,49389450b1241f5d8f4c8c4271a3eb56bba33965,ffdc62ac2f7549398d3aca9d2119e83d80d588d5,d7a4d2808074b0c55d6b239f69d90e7a4930f943,d58aa4a0b2f6c2504c3abce8de3f1afb71800acc,77ae23dc7eb8a75609881d4548a79e4935a89d37,f79bce8a60fbece671f6265adc39f6469f3b9b8c,051995fdf0af634e4911704057a551e9392e62b1
+# PINNED_LABEL_2=Paid Beta
+
--- a/.gitignore
+++ b/.gitignore
@ -16,6 +16,7 @@ package-lock.json
 /web/dist/*
 /web/node_modules/*
 /web/.env
+/web/.env.defaults
 /custom/*
 !/custom/homepage.example.js
 .env
--- a/README.md
+++ b/README.md
@ -104,17 +104,18 @@ You can run the web version (lbry.tv), the electron app, or both at the same tim

 #### Customize the web app

- Enter web directory, copy .env.defaults to .env and make changes
+- In root directory, copy .env.defaults to .env and make changes

 ```
-cd web
 cp .env.defaults .env
 nano .env
 ```
+- To specify your own OG-IMAGE
+You can either place a png named v2-og.png in the /custom folder or specify the OG_IMAGE_URL in .env

 - If you want to customize the homepage content

-1. add `CUSTOM_HOMEPAGE=true` to the 'web/.env' file
+1. add `CUSTOM_HOMEPAGE=true` to the '.env' file
 2. copy `/custom/homepage.example.js` to `/custom/homepage.js` and make desired changes to `homepage.js`

 - If you want up to two custom sidebar links
@ -128,6 +129,7 @@ PINNED_LABEL_2=OtherLinkText
 ```

 - Finally `NODE_ENV=production yarn compile:web` to rebuild
+_Note: You don't need to edit the .env file in the /web folder - that is copied during compile._

 #### Deploy the web app (_experimental_)

--- a/config.js
+++ b/config.js
@ -2,19 +2,26 @@
 // On Desktop App, this will find .env.defaults and optional .env in root dir
 require('dotenv-defaults').config({silent: false});
 const config = {
+  MATOMO_URL: process.env.MATOMO_URL,
+  MATOMO_ID: process.env.MATOMO_ID,
  WEBPACK_WEB_PORT: process.env.WEBPACK_WEB_PORT,
  WEBPACK_ELECTRON_PORT: process.env.WEBPACK_ELECTRON_PORT,
  WEB_SERVER_PORT: process.env.WEB_SERVER_PORT,
-  DOMAIN: process.env.DOMAIN,
-  URL: process.env.URL, //lbry.tv',
-  SITE_TITLE: process.env.SITE_TITLE,
  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,
-  DEFAULT_LANGUAGE: process.env.DEFAULT_LANGUAGE,
-  MATOMO_URL: process.env.MATOMO_URL,
-  MATOMO_ID: process.env.MATOMO_ID,
+  DOMAIN: process.env.DOMAIN,
+  URL: process.env.URL,
+  SITE_TITLE: process.env.SITE_TITLE,
+  SITE_NAME: process.env.SITE_NAME,
+  SITE_DESCRIPTION: process.env.SITE_DESCRIPTION,
  LOGO_TITLE: process.env.LOGO_TITLE,
+  OG_TITLE_SUFFIX: process.env.OG_TITLE_SUFFIX,
+  OG_HOMEPAGE_TITLE: process.env.OG_HOMEPAGE_TITLE,
+  OG_IMAGE_URL: process.env.OG_IMAGE_URL,
+  SITE_CANONICAL_URL: process.env.SITE_CANONICAL_URL,
+  DEFAULT_LANGUAGE: process.env.DEFAULT_LANGUAGE,
+
  PINNED_URI_1: process.env.PINNED_URI_1,
  PINNED_LABEL_1: process.env.PINNED_LABEL_1,
  PINNED_URI_2: process.env.PINNED_URI_2,
--- a/package.json
+++ b/package.json
@ -21,8 +21,9 @@
  "main": "./dist/electron/main.js",
  "scripts": {
    "compile:electron": "node --max_old_space_size=4096 ./node_modules/webpack/bin/webpack.js --config webpack.electron.config.js",
-    "compile:web": "cd web && node --max_old_space_size=4096 ./node_modules/webpack/bin/webpack.js --config webpack.config.js",
+    "compile:web": "yarn copyenv && cd web && node --max_old_space_size=4096 ./node_modules/webpack/bin/webpack.js --config webpack.config.js",
    "compile": "cross-env NODE_ENV=production yarn compile:electron && cross-env NODE_ENV=production yarn compile:web",
+    "copyenv": "cp ./.env* web/",
    "dev": "yarn dev:electron",
    "dev:electron": "cross-env NODE_ENV=development node ./electron/devServer.js",
    "dev:web": "cd web && yarn dev",
--- a/static/app-strings.json
+++ b/static/app-strings.json
@ -1258,6 +1258,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",
--- a/static/index-web.html
+++ b/static/index-web.html
@ -64,13 +64,6 @@
    </style>

    <!-- VARIABLE_HEAD_BEGIN -->
-    <title>lbry.tv</title>
-    <meta property="og:url" content="https://lbry.tv" />
-    <meta property="og:title" content="lbry.tv" />
-    <meta property="og:site_name" content="lbry.tv" />
-    <meta property="og:description" content="Meet LBRY, a content platform owned by everyone (and no one)." />
-    <meta property="og:image" content="https://lbry.tv/public/v2-og.png" />
-    <meta property="fb:app_id" content="1673146449633983" />
    <!-- VARIABLE_HEAD_END -->
  </head>

--- a/web/.env.defaults
+++ b/web/.env.defaults
@ -1,22 +0,0 @@
-# Copy this file to .env to make modifications
-WEBPACK_WEB_PORT=9090
-WEBPACK_ELECTRON_PORT=9091
-WEB_SERVER_PORT=1337
-DOMAIN=lbry.tv
-URL=https://lbry.tv
-SITE_TITLE=lbry.tv
-LOGO_TITLE=lbry.tv
-LBRY_WEB_API=https://api.lbry.tv
-LBRY_WEB_STREAMING_API=https://cdn.lbryplayer.xyz
-WELCOME_VERSION=1.0
-DEFAULT_LANGUAGE=en
-MATOMO_URL=https://analytics.lbry.com/
-MATOMO_ID=3
-# If true, supply copy example to homepage.js in
-CUSTOM_HOMEPAGE=false
-# Add up to 2 sidebar links:
-# PINNED_URI_1=@Lbrylatam#2/Integracionesporseguridad#4
-# PINNED_LABEL_1=LBRY LATAM
-# PINNED_URI_2=$/discover?t=lbrytvpaidbeta&fee_amount=>0&claim_type=stream&channel_ids=5af39f818f668d8c00943c9326c5201c4fe3c423,cda9c4e92f19d6fe0764524a2012056e06ca2055,760da3ba3dd85830a843beaaed543a89b7a367e7,40c36948f0da072dcba3e4833e90f71e16de78be,e8f68563d242f6ac9784dcbc41dd86c28a9391d6,7236fc5d2783ea7314d9076ae6c8a250e3992d1a,cf7792c2a37d0d76aaaff84aff0b99a8c791429d,8316ac90764fedf3147799b7b81a6575a9cc398e,8627af93c1a1219150f06b698f4b33e6ed2f1c1e,8972a1bd06de5186e5e89292b05aac8aaa817791,c5b0b17838df2f6c31162f64d55f60f34ae8bfc6,f576d5dba905fc179de880c3fe3eb3281ea74f59,97dd77c93c9603cbb2583f3589f7f5a6c92baa43,f399d873e0c37cf24de9569b5f22bbb30a5c6709,dba870d0620d41b2b9a152c961e0c06cf875ccfc,ca1fd651c9d14bf2e5088bb2aa0146ee7aeb2ae0,50ad846a4b1543b847bf3fdafb7b45f6b2f5844c,e09ff5abe9fb44dd0dd0576894a6db60a6211603,7b6f7517f6b816827d076fa0eaad550aa315a4e7,2068452c41d8da3bd68961335da0072a99258a1a,5da63df97c8255ae94a88940695b8471657dd5a1,3645cf2f5d0bdac0523f945be1c3ff60758f7845,4da85b12244839d6368b9290f1619ff9514ab2a8,4ad942982e43326c7700b1b6443049b3cfd82161,55304f219244abf82f684f759cc0c7769242f3b4,8f42e5b592bb7f7a03f4a94a86a41b1236bb099f,e2a014d885a48f5be2dc6409610996337312facb,c18996ca488753f714d36d4654715927c1d7f9c2,ebc4214424cfa683a7046e1f794fea1e44788d84,06b6d6d6a893fb589ec2ded948f5122856921ed5,07e4546674268fc0222b2ca22d31d0549dc217ee,060940e41973d4f7f16d72a2733138e931c35f41,f8d6eccd887c9cebd36b1d42aa349279b7f5c3ed,68098b8426f967b8d04cc566348b5c128823219e,2bfe6cdb24a21bdc1b76fb7c416edd50e9e85945,1f9bb08bfa2259629f4aaa9ed40f97e9a41b6fa1,2f20148495612946675fe1c8ea99171e4d950b81,bc6938fa1e09e840056c2e831abf9664f397c472,2a6194792beac5130641e932b5ac6e5a99b5ca4f,185ba2bd547a5e4a77d29fe6c1484f47db5e058f,29cc7f6081268eaa5b3f2946e0cd0b952a94812c,49389450b1241f5d8f4c8c4271a3eb56bba33965,ffdc62ac2f7549398d3aca9d2119e83d80d588d5,d7a4d2808074b0c55d6b239f69d90e7a4930f943,d58aa4a0b2f6c2504c3abce8de3f1afb71800acc,77ae23dc7eb8a75609881d4548a79e4935a89d37,f79bce8a60fbece671f6265adc39f6469f3b9b8c,051995fdf0af634e4911704057a551e9392e62b1
-# PINNED_LABEL_2=Paid Beta
-
--- a/web/src/html.js
+++ b/web/src/html.js
@ -1,4 +1,13 @@
-const { URL } = require('../../config.js');
+const {
+  URL,
+  SITE_TITLE,
+  SITE_CANONICAL_URL,
+  OG_HOMEPAGE_TITLE,
+  OG_TITLE_SUFFIX,
+  OG_IMAGE_URL,
+  SITE_DESCRIPTION,
+  SITE_NAME,
+} = require('../../config.js');
 const { generateEmbedUrl, generateStreamUrl } = require('../../ui/util/web');
 const PAGES = require('../../ui/constants/pages');
 const { getClaim } = require('./chainquery');
@ -36,17 +45,28 @@ function escapeHtmlProperty(property) {
 function buildOgMetadata(overrideOptions = {}) {
  const { title, description } = overrideOptions;
  const head =
-    '<title>lbry.tv</title>\n' +
+    `<title>${SITE_TITLE}</title>\n` +
    `<meta property="og:url" content="${URL}" />\n` +
-    `<meta property="og:title" content="${title || 'lbry.tv'}" />\n` +
-    '<meta property="og:site_name" content="lbry.tv | Content Freedom"/>\n' +
-    `<meta property="og:description" content="${description ||
-      'Meet LBRY, an open, free, and community-controlled content wonderland.'}" />\n` +
-    `<meta property="og:image" content="${URL}/v2-og.png" />\n` +
+    `<meta property="og:title" content="${(title && title + OG_TITLE_SUFFIX) ||
+      OG_HOMEPAGE_TITLE ||
+      SITE_TITLE}" />\n` +
+    `<meta property="og:site_name" content="${SITE_NAME || SITE_TITLE}"/>\n` +
+    `<meta property="og:description" content="${description || SITE_DESCRIPTION}" />\n` +
+    `<meta property="og:image" content="${OG_IMAGE_URL || `${URL}/public/v2-og.png`}" />\n` +
    '<meta name="twitter:card" content="summary_large_image"/>\n' +
-    `<meta name="twitter:image" content="${URL}/v2-og.png"/>\n` +
-    '<meta property="fb:app_id" content="1673146449633983" />';
+    `<meta name="twitter:title" content="${(title && title + OG_TITLE_SUFFIX) ||
+      OG_HOMEPAGE_TITLE ||
+      SITE_TITLE}" />\n` +
+    `<meta name="twitter:description" content="${description || SITE_DESCRIPTION}" />\n` +
+    `<meta name="twitter:image" content="${OG_IMAGE_URL || `${URL}/public/v2-og.png`}"/>\n` +
+    `<meta name="twitter:url" content="${URL}" />\n` +
+    '<meta property="fb:app_id" content="1673146449633983" />\n' +
+    `<link rel="canonical" content="${SITE_CANONICAL_URL || URL}"/>`;
+  return head;
+}

+function buildBasicOgMetadata() {
+  const head = '<!-- VARIABLE_HEAD_BEGIN -->' + buildOgMetadata() + '<!-- VARIABLE_HEAD_END -->';
  return head;
 }

@ -61,7 +81,7 @@ function buildClaimOgMetadata(uri, claim, overrideOptions = {}) {
  const claimDescription =
    claim.description && claim.description.length > 0
      ? escapeHtmlProperty(truncateDescription(claim.description))
-      : `View ${claimTitle} on lbry.tv`;
+      : `View ${claimTitle} on ${SITE_NAME}`;
  const claimLanguage = escapeHtmlProperty(claim.language) || 'en_US';

  let imageThumbnail;
@ -69,7 +89,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;
@ -88,11 +108,14 @@ function buildClaimOgMetadata(uri, claim, overrideOptions = {}) {
  head += `<meta property="og:description" content="${description}"/>`;
  head += `<meta property="og:image" content="${claimThumbnail}"/>`;
  head += `<meta property="og:locale" content="${claimLanguage}"/>`;
-  head += `<meta property="og:site_name" content="lbry.tv"/>`;
+  head += `<meta property="og:site_name" content="${SITE_NAME}"/>`;
  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}"/>`;
+  head += `<link rel="canonical" content="${SITE_CANONICAL_URL || 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,8 @@ module.exports.getHtml = async function getHtml(ctx) {
    }
  }

-  return insertToHead(html);
-};
+  const ogMetadata = buildBasicOgMetadata();
+  return insertToHead(html, ogMetadata);
+}
+
+module.exports = { insertToHead, buildBasicOgMetadata, getHtml };
--- a/web/webpack.config.js
+++ b/web/webpack.config.js
@ -5,7 +5,9 @@ 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 CUSTOM_ROOT = path.resolve(__dirname, '../custom');
 const STATIC_ROOT = path.resolve(__dirname, '../static/');
 const UI_ROOT = path.resolve(__dirname, '../ui/');
 const DIST_ROOT = path.resolve(__dirname, 'dist/');
@ -18,6 +20,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`,
@ -27,6 +32,12 @@ let plugins = [
      from: `${STATIC_ROOT}/img/v2-og.png`,
      to: `${DIST_ROOT}/public/v2-og.png`,
    },
+    {
+      from: `${CUSTOM_ROOT}/v2-og.png`,
+      to: `${DIST_ROOT}/public/v2-og.png`,
+      force: true,
+      noErrorOnMissing: true,
+    },
    {
      from: `${STATIC_ROOT}/font/`,
      to: `${DIST_ROOT}/public/font/`,