improve how we add metadata _slightly_ and add custom metadata for invite links
This commit is contained in:
Sean Yesmunt
Jeremy Kauffman
parent
ab6181779d
commit
7aa4539016
5 changed files with 115 additions and 52 deletions
|
|
@ -1,5 +1,6 @@
|
|||
const { URL } = require('../../config.js');
|
||||
const { generateStreamUrl } = require('../../ui/util/lbrytv');
|
||||
const PAGES = require('../../ui/constants/pages');
|
||||
const { getClaim } = require('./chainquery');
|
||||
const { parseURI } = require('lbry-redux');
|
||||
const fs = require('fs');
|
||||
|
|
@ -7,19 +8,11 @@ const path = require('path');
|
|||
|
||||
let html = fs.readFileSync(path.join(__dirname, '/../dist/index.html'), 'utf8');
|
||||
|
||||
const defaultHead =
|
||||
'<title>lbry.tv</title>\n' +
|
||||
`<meta property="og:url" content="${URL}" />\n` +
|
||||
'<meta property="og:title" content="lbry.tv" />\n' +
|
||||
'<meta property="og:site_name" content="lbry.tv | Content Freedom"/>\n' +
|
||||
'<meta property="og:description" content="Meet LBRY, an open, free, and community-controlled content wonderland." />\n' +
|
||||
`<meta property="og:image" content="${URL}/og.png" />\n` +
|
||||
'<meta name="twitter:card" content="summary_large_image"/>\n' +
|
||||
`<meta name="twitter:image" content="${URL}/og.png"/>\n` +
|
||||
'<meta property="fb:app_id" content="1673146449633983" />';
|
||||
|
||||
function insertToHead(fullHtml, htmlToInsert = defaultHead) {
|
||||
return fullHtml.replace(/<!-- VARIABLE_HEAD_BEGIN -->.*<!-- VARIABLE_HEAD_END -->/s, htmlToInsert);
|
||||
function insertToHead(fullHtml, htmlToInsert) {
|
||||
return fullHtml.replace(
|
||||
/<!-- VARIABLE_HEAD_BEGIN -->.*<!-- VARIABLE_HEAD_END -->/s,
|
||||
htmlToInsert || buildOgMetadata()
|
||||
);
|
||||
}
|
||||
|
||||
function truncateDescription(description) {
|
||||
|
|
@ -37,33 +30,63 @@ function escapeHtmlProperty(property) {
|
|||
: '';
|
||||
}
|
||||
|
||||
function buildOgMetadata(uri, claim) {
|
||||
//
|
||||
// Normal metadata with option to override certain values
|
||||
//
|
||||
function buildOgMetadata(overrideOptions = {}) {
|
||||
const { title, description } = 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: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}/og.png" />\n` +
|
||||
'<meta name="twitter:card" content="summary_large_image"/>\n' +
|
||||
`<meta name="twitter:image" content="${URL}/og.png"/>\n` +
|
||||
'<meta property="fb:app_id" content="1673146449633983" />';
|
||||
|
||||
return head;
|
||||
}
|
||||
|
||||
//
|
||||
// Metadata used for urls that need claim information
|
||||
// Also has option to override defaults
|
||||
//
|
||||
function buildClaimOgMetadata(uri, claim, overrideOptions = {}) {
|
||||
// Initial setup for claim based og metadata
|
||||
const { isChannel, claimName } = parseURI(uri);
|
||||
const title = escapeHtmlProperty(claim.title ? claim.title : claimName);
|
||||
const claimTitle = escapeHtmlProperty(claim.title ? claim.title : claimName);
|
||||
const claimDescription =
|
||||
claim.description && claim.description.length > 0
|
||||
? escapeHtmlProperty(truncateDescription(claim.description))
|
||||
: `Watch ${title} on LBRY.tv`;
|
||||
: `Watch ${claimTitle} on LBRY.tv`;
|
||||
const claimLanguage = escapeHtmlProperty(claim.language) || 'en_US';
|
||||
const claimThumbnail = escapeHtmlProperty(claim.thumbnail_url) || `${URL}/og.png`;
|
||||
const claimTitle = claim.channel && !isChannel ? `${title} from ${claim.channel} on LBRY.tv` : `${title} on LBRY.tv`;
|
||||
const defaultClaimTitle =
|
||||
claim.channel && !isChannel ? `${claimTitle} from ${claim.channel} on LBRY.tv` : `${claimTitle} on LBRY.tv`;
|
||||
|
||||
// Allow for ovverriding default claim based og metadata
|
||||
const title = overrideOptions.title || claimTitle;
|
||||
const description = overrideOptions.description || claimDescription;
|
||||
|
||||
let head = '';
|
||||
|
||||
head += '<meta charset="utf8"/>';
|
||||
head += `<title>${claimTitle}</title>`;
|
||||
head += `<meta name="description" content="${claimDescription}"/>`;
|
||||
head += `<title>${title}</title>`;
|
||||
head += `<meta name="description" content="${description}"/>`;
|
||||
if (claim.tags) {
|
||||
head += `<meta name="keywords" content="${claim.tags.toString()}"/>`;
|
||||
}
|
||||
head += `<meta name="twitter:card" content="summary_large_image"/>`;
|
||||
head += `<meta name="twitter:image" content="${claimThumbnail}"/>`;
|
||||
head += `<meta property="og:description" content="${claimDescription}"/>`;
|
||||
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:type" content="website"/>`;
|
||||
head += `<meta property="og:title" content="${claimTitle}"/>`;
|
||||
head += `<meta property="og: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}"/>`;
|
||||
|
||||
|
|
@ -81,24 +104,62 @@ function buildOgMetadata(uri, claim) {
|
|||
return head;
|
||||
}
|
||||
|
||||
module.exports.getHtml = async function getHtml(ctx) {
|
||||
const path = ctx.path;
|
||||
|
||||
if (path.length === 0 || path[1] === '$') {
|
||||
return insertToHead(html);
|
||||
}
|
||||
|
||||
const claimUri = path.slice(1).replace(/:/g, '#');
|
||||
const { isChannel, streamName, channelName, channelClaimId, streamClaimId } = parseURI(claimUri);
|
||||
async function getClaimFromChainquery(url) {
|
||||
const { isChannel, streamName, channelName, channelClaimId, streamClaimId } = parseURI(url);
|
||||
const claimName = isChannel ? '@' + channelName : streamName;
|
||||
const claimId = isChannel ? channelClaimId : streamClaimId;
|
||||
|
||||
const rows = await getClaim(claimName, claimId, channelName, channelClaimId);
|
||||
if (!rows || !rows.length) {
|
||||
if (rows && rows.length) {
|
||||
const claim = rows[0];
|
||||
return claim;
|
||||
}
|
||||
|
||||
return undefined;
|
||||
}
|
||||
|
||||
module.exports.getHtml = async function getHtml(ctx) {
|
||||
const path = ctx.path;
|
||||
|
||||
if (path.length === 0) {
|
||||
return insertToHead(html);
|
||||
}
|
||||
|
||||
const claim = rows[0];
|
||||
const ogMetadata = buildOgMetadata(claimUri, claim);
|
||||
const invitePath = `/$/${PAGES.INVITE}/`;
|
||||
|
||||
if (path.includes(invitePath)) {
|
||||
const inviteChannel = path.slice(invitePath.length).replace(/:/g, '#');
|
||||
const inviteChannelUrl = `lbry://${inviteChannel}`;
|
||||
|
||||
try {
|
||||
parseURI(inviteChannelUrl);
|
||||
const claim = await getClaimFromChainquery(inviteChannelUrl);
|
||||
const invitePageMetadata = buildClaimOgMetadata(inviteChannelUrl, claim, {
|
||||
title: `Join ${claim.name} on LBRY`,
|
||||
description: `Join ${claim.name} on LBRY, a content wonderland owned by everyone (and no one).`,
|
||||
});
|
||||
|
||||
return insertToHead(html, invitePageMetadata);
|
||||
} catch (e) {
|
||||
// Something about the invite channel is messed up
|
||||
// Enter generic invite metadata
|
||||
const invitePageMetadata = buildOgMetadata({
|
||||
title: `Join a friend on LBRY`,
|
||||
description: `Join a friend on LBRY, a content wonderland owned by everyone (and no one).`,
|
||||
});
|
||||
return insertToHead(html, invitePageMetadata);
|
||||
}
|
||||
}
|
||||
|
||||
if (!path.includes('$')) {
|
||||
const claimUri = path.slice(1).replace(/:/g, '#');
|
||||
const claim = await getClaimFromChainquery(claimUri);
|
||||
|
||||
if (claim) {
|
||||
const ogMetadata = buildClaimOgMetadata(claimUri, claim);
|
||||
return insertToHead(html, ogMetadata);
|
||||
}
|
||||
}
|
||||
|
||||
return insertToHead(html);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@
|
|||
"@babel/register": "^7.0.0",
|
||||
"@exponent/electron-cookies": "^2.0.0",
|
||||
"@hot-loader/react-dom": "^16.8",
|
||||
"@lbry/components": "^3.0.7",
|
||||
"@lbry/components": "^3.0.8",
|
||||
"@reach/menu-button": "^0.1.18",
|
||||
"@reach/rect": "^0.2.1",
|
||||
"@reach/tabs": "^0.1.5",
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@
|
|||
<script src="/public/ui.js" async></script>
|
||||
<link rel="icon" type="image/png" href="/public/favicon.png" />
|
||||
|
||||
<link rel="preload" href="public/font/v1/300.woff" as="font" type="font/woff" />
|
||||
<link rel="preload" href="public/font/v1/300i.woff" as="font" type="font/woff" />
|
||||
<link rel="preload" href="public/font/v1/400.woff" as="font" type="font/woff" />
|
||||
<link rel="preload" href="public/font/v1/400i.woff" as="font" type="font/woff" />
|
||||
<link rel="preload" href="public/font/v1/700.woff" as="font" type="font/woff" />
|
||||
<link rel="preload" href="public/font/v1/700i.woff" as="font" type="font/woff" />
|
||||
<link rel="preload" href="/public/font/v1/300.woff" as="font" type="font/woff" />
|
||||
<link rel="preload" href="/public/font/v1/300i.woff" as="font" type="font/woff" />
|
||||
<link rel="preload" href="/public/font/v1/400.woff" as="font" type="font/woff" />
|
||||
<link rel="preload" href="/public/font/v1/400i.woff" as="font" type="font/woff" />
|
||||
<link rel="preload" href="/public/font/v1/700.woff" as="font" type="font/woff" />
|
||||
<link rel="preload" href="/public/font/v1/700i.woff" as="font" type="font/woff" />
|
||||
|
||||
<style>
|
||||
@font-face {
|
||||
|
|
|
|||
|
|
@ -71,6 +71,7 @@ export function CommentCreate(props: Props) {
|
|||
charCount={charCount}
|
||||
onChange={handleCommentChange}
|
||||
/>
|
||||
<div className="section__actions">
|
||||
<Button
|
||||
button="primary"
|
||||
disabled={channel === CHANNEL_NEW || !commentValue.length}
|
||||
|
|
@ -78,6 +79,7 @@ export function CommentCreate(props: Props) {
|
|||
label={__('Post')}
|
||||
requiresAuth={IS_WEB}
|
||||
/>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1033,10 +1033,10 @@
|
|||
prop-types "^15.6.2"
|
||||
scheduler "^0.15.0"
|
||||
|
||||
"@lbry/components@^3.0.7":
|
||||
version "3.0.7"
|
||||
resolved "https://registry.yarnpkg.com/@lbry/components/-/components-3.0.7.tgz#97bcc5a5c89dce92e88ad0e5575b18833151ec85"
|
||||
integrity sha512-M0uRCQQP9cBYhtln5p2qmVsL/4pBo1bVUACyWrbx+W74h729rLVPvY712nE6P+WW/H2C/Co5KH6za09z+ykhWQ==
|
||||
"@lbry/components@^3.0.8":
|
||||
version "3.0.8"
|
||||
resolved "https://registry.yarnpkg.com/@lbry/components/-/components-3.0.8.tgz#d3a5075866a74685b0f344e944c4aac1f7c6117d"
|
||||
integrity sha512-Of+nc8CyL4bYllacS/7GBmLmkWAKLGgWvOyzQ8+HN+HC7NOMa3Nf5pcTU9VzAbU2dscKK16N4N2xaUlNq9WyfQ==
|
||||
|
||||
"@mapbox/hast-util-table-cell-style@^0.1.3":
|
||||
version "0.1.3"
|
||||
|
|
|
|||
Loading…
Reference in a new issue