Custom metadata is now possible for Markdown pages

This commit is contained in:
ポール ウェッブ 2018-09-28 16:20:51 -05:00
parent f7e9e44cca
commit 097bfc65c7
2 changed files with 20 additions and 44 deletions

View file

@ -24,27 +24,25 @@ module.exports = exports = (state, emit) => {
if (state.title !== title) emit(state.events.DOMTITLECHANGE, title);
state.page = state.page || { };
// TODO:
// - Support custom metadata (descriptions and whatnot)
const newMetadata = state.lbry;
return html`
<meta charset="utf-8"/>
<title>${title}</title>
<title>${newMetadata && newMetadata.title ? newMetadata.title : title}</title>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="author" content="${config.meta.title}"/>
<meta name="description" content="${config.meta.description}"/>
<meta name="keywords" content=""/>
<meta name="description" content="${newMetadata && newMetadata.description ? newMetadata.description : config.meta.description}"/>
<meta name="title" content="${config.meta.title}"/>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
<!--/ Open Graph /-->
<meta property="og:image" content="/assets/media/images/og-image.png"/>
<meta property="og:image:height" content="720"/>
<meta property="og:image:width" content="1280"/>
<meta property="og:image" content="${newMetadata && newMetadata["og:image"] ? newMetadata["og:image"] : "/assets/media/images/og-image.png"}"/>
<meta property="og:image:height" content="${newMetadata && newMetadata["og:image:height"] ? newMetadata["og:image:height"] : 720}"/>
<meta property="og:image:width" content="${newMetadata && newMetadata["og:image:width"] ? newMetadata["og:image:width"] : 1280}"/>
<meta property="og:locale" content="en_US"/>
<meta property="og:site_name" content="${config.meta.title}"/>
<meta property="og:title" content="${title}"/>
<meta property="og:title" content="${newMetadata && newMetadata.title ? newMetadata.title : title}"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://lbry.tech${state.href}"/>

View file

@ -79,8 +79,19 @@ module.exports = exports = (state, emit) => { // eslint-disable-line
const markdownFileDetails = fm(markdownFile);
const renderedMarkdown = md.render(markdownFileDetails.body);
const updatedMarkdown = partialFinder(renderedMarkdown);
let newMetadata = "";
if (markdownFileDetails.attributes.meta) newMetadata = markdownFileDetails.attributes.meta;
if (markdownFileDetails.attributes.meta) {
const customMetadata = {};
for (const key in markdownFileDetails.attributes.meta) {
if (markdownFileDetails.attributes.meta.hasOwnProperty(key)) {
customMetadata[Object.keys(markdownFileDetails.attributes.meta[key])[0]] =
markdownFileDetails.attributes.meta[key][Object.keys(markdownFileDetails.attributes.meta[key])[0]];
}
}
state.lbry = customMetadata;
}
let pageScript = "";
if (path === "glossary") pageScript = "<script>" + fs.readFileSync("./app/components/client/glossary-scripts.js", "utf-8") + "</script>";
@ -101,7 +112,6 @@ module.exports = exports = (state, emit) => { // eslint-disable-line
<div class="inner-wrap">
<div class="page__markup">${raw(updatedMarkdown)}</div>
${raw(pageScript)}
${newMetadata.length ? raw(updateMetadata(newMetadata)) : ""}
</div>
</section>
</article>
@ -112,27 +122,6 @@ module.exports = exports = (state, emit) => { // eslint-disable-line
// H E L P E R S
function createMetaTags(metaObject) {
/**
NOTE:
For Markdown files, the custom yaml should look like this:
meta:
- description: Description goes here
This does not currently work with parameters like "og:image"
// https://github.com/lbryio/lbry.tech/issues/30
*/
let html = "";
for (const metaProperty in metaObject) {
html += `document.getElementsByTagName("meta")["${metaProperty}"].content = "${metaObject[metaProperty]}";\n`;
}
return html;
}
function partialFinder(markdownBody) {
const regexToFindPartials = /<\w+\/>/g;
const partials = markdownBody.match(regexToFindPartials);
@ -157,14 +146,3 @@ function partialFinder(markdownBody) {
return markdownBody;
}
function updateMetadata(metadataDetails) {
const generatedMetadata = [];
for (const metadataDetail of metadataDetails)
generatedMetadata.push(createMetaTags(metadataDetail));
return html`
<script>${generatedMetadata.join("")}</script>
`;
}