diff --git a/.env.defaults b/.env.defaults index cb773f088..f66e2bffb 100644 --- a/.env.defaults +++ b/.env.defaults @@ -1,6 +1,6 @@ # Copy this file to .env to make modifications -# Base config - no need to edit +# Base config MATOMO_URL=https://analytics.lbry.com/ MATOMO_ID=666 WEBPACK_WEB_PORT=9090 @@ -13,10 +13,18 @@ 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 # Custom Content diff --git a/README.md b/README.md index 974abad99..b69193883 100644 --- a/README.md +++ b/README.md @@ -110,6 +110,8 @@ You can run the web version (lbry.tv), the electron app, or both at the same tim 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 diff --git a/config.js b/config.js index d78b265ec..302966827 100644 --- a/config.js +++ b/config.js @@ -2,21 +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, + 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, 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, - 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, 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, diff --git a/web/src/html.js b/web/src/html.js index d3bde25c5..de6384012 100644 --- a/web/src/html.js +++ b/web/src/html.js @@ -1,4 +1,13 @@ -const { URL, SITE_TITLE, SITE_DESCRIPTION, SITE_NAME } = 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,18 +45,23 @@ function escapeHtmlProperty(property) { function buildOgMetadata(overrideOptions = {}) { const { title, description } = overrideOptions; const head = - 'lbry.tv\n' + + `${SITE_TITLE}\n` + `\n` + - `\n` + + `\n` + `\n` + `\n` + - `\n` + + `\n` + '\n' + - `\n` + + `\n` + `\n` + - `\n` + + `\n` + `\n` + - '\n'; + '\n' + + ``; return head; } @@ -67,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; @@ -94,13 +108,14 @@ function buildClaimOgMetadata(uri, claim, overrideOptions = {}) { head += ``; head += ``; head += ``; - head += ``; + head += ``; head += ``; head += ``; head += ``; // below should be canonical_url, but not provided by chainquery yet head += ``; head += ``; + head += ``; if ( claim.source_media_type && diff --git a/web/webpack.config.js b/web/webpack.config.js index 70be866ff..d83d5c552 100644 --- a/web/webpack.config.js +++ b/web/webpack.config.js @@ -7,6 +7,7 @@ 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/'); @@ -31,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/`,