Merge pull request #528 from jamstack/ph/og-improvements

Ph/og improvements

Author: Phil Hawksworth

.eleventy.js

@@ -161,13 +161,25 @@ module.exports = function(eleventyConfig) {
   });
 
 
-  eleventyConfig.addFilter("replace", (str, from, to) => {
-    if (str) {
-      return str.replace(new RegExp(from, "g"), to);
+  // Format a path to avoid any Cloudinary URL API miss-steps.
+  eleventyConfig.addFilter("cloudinaryifyPath", (str) => {
+
+    if(str) { 
+      
+      // add generic url encoding 
+      str = encodeURI(str);
+      
+      // we also need to double escape some characters which might appear in text
+      // but are meaningful in cloudinary URLs
+      str = str.replace(/,/g, '%252C');
+      str = str.replace(/\//g, '%252F');
+
     }
+    return str;
   });
 
 
+
   // favicons files
   eleventyConfig.addPassthroughCopy("src/site/browserconfig.xml");
   eleventyConfig.addPassthroughCopy("src/site/site.webmanifest");

src/site/_data/glossary.yaml

@@ -23,7 +23,7 @@
 
 - term: 'CDN (Content Delivery Network)'
   id: 'cdn'
-  summary: 'A network of optimized for serving assets to users. A CDN can provide redundancy and also improve delivery performance as a result of being geographically distributed.'
+  summary: 'A network optimized for serving assets to users. A CDN can provide redundancy and also improve delivery performance as a result of being geographically distributed.'
   definition: 'A distributed network optimized for serving assets to users. By being geographically distributed, a CDN can provide redundancy and also improve delivery performance as a result of servicing requests from the infrastructure closest to the user making the request.'
 
 - term: 'Edge Network'

src/site/_includes/layouts/base.njk

@@ -17,12 +17,12 @@ ogimage: "/img/og/default-og-image.png"
     <link rel="icon" type="image/png" sizes="16x16" href="/img/favicons/favicon-16x16.png">
     <meta property="og:title" content="{{ title }} | Jamstack">
     <meta property="og:site_name" content="Jamstack.org">
-    <meta property="og:url" content="https://jamstack.org/">
+    <meta property="og:url" content="https://jamstack.org{{ page.url }}">
     <meta property="og:description" content="{{ description }}">
     <meta property="og:type" content="website">
     <meta property="og:image" content="{{ netlify.deployUrl }}{{ ogimage }}">
     <meta property="twitter:card" content="summary_large_image">
-    <meta property="twitter:url" content="https://jamstack.org/">
+    <meta property="twitter:url" content="https://jamstack.org{{ page.url }}">
     <meta property="twitter:title" content="{{ title }} | Jamstack">
     <meta property="twitter:description" content="{{ description }}">
     <meta property="twitter:image" content="{{ netlify.deployUrl }}{{ ogimage }}">

src/site/glossary-pages.njk

@@ -10,7 +10,7 @@ layout: layouts/base.njk
 eleventyComputed:
   title: "{{ item.term }}"
   description: "What is {{ item.term }}? {{ item.summary}}"
-  ogimage: "/img/og/glossary/{{ item.term | replace(',','%252C') | replace('/', '%252F')  }}/{{ item.summary | replace(',','%252C') | replace('/', '%252F') }}"
+  ogimage: "/img/og/glossary/{{ item.term | cloudinaryifyPath  }}/{{ item.summary | cloudinaryifyPath }}"
 
 ---