Custom metadata is now possible for Markdown pages

app/components/head.js

@@ -24,27 +24,25 @@ module.exports = exports = (state, emit) => {
   if (state.title !== title) emit(state.events.DOMTITLECHANGE, title);
   state.page = state.page || { };
 
-  // TODO:
+  const newMetadata = state.lbry;
-  // - Support custom metadata (descriptions and whatnot)
 
   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="description" content="${newMetadata && newMetadata.description ? newMetadata.description : config.meta.description}"/>
-    <meta name="keywords" content=""/>
     <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" content="${newMetadata && newMetadata["og:image"] ? newMetadata["og:image"] : "/assets/media/images/og-image.png"}"/>
-    <meta property="og:image:height" content="720"/>
+    <meta property="og:image:height" content="${newMetadata && newMetadata["og:image:height"] ? newMetadata["og:image:height"] : 720}"/>
-    <meta property="og:image:width" content="1280"/>
+    <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}"/>
 

app/views/redirect.js

@@ -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>
-  `;
-}