Custom metadata is now possible for Markdown pages
This commit is contained in:
parent
f7e9e44cca
commit
097bfc65c7
2 changed files with 20 additions and 44 deletions
|
@ -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}"/>
|
||||
|
||||
|
|
|
@ -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>
|
||||
`;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue