LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

improve how we add metadata _slightly_ and add custom metadata for invite links

Browse source
This commit is contained in:
Sean Yesmunt 2020-01-23 15:41:14 -05:00 committed by Jeremy Kauffman
parent ab6181779d
commit 7aa4539016
5 changed files with 115 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

129
lbrytv/src/html.js
View file

@ -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);
return insertToHead(html, ogMetadata);
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);
};

2
package.json
View file

@ -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",

12
static/index-web.html
View file

@ -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 {

16
ui/component/commentCreate/view.jsx
View file

@ -71,13 +71,15 @@ export function CommentCreate(props: Props) {
charCount={charCount}
onChange={handleCommentChange}
/>
<Button
button="primary"
disabled={channel === CHANNEL_NEW || !commentValue.length}
type="submit"
label={__('Post')}
requiresAuth={IS_WEB}
/>
<div className="section__actions">
<Button
button="primary"
disabled={channel === CHANNEL_NEW || !commentValue.length}
type="submit"
label={__('Post')}
requiresAuth={IS_WEB}
/>
</div>
</Form>
);
}

8
yarn.lock
View file

@ -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"