Merge pull request #373 from jamstack/ht/last-improvements-before-launch

Hugues Tennier · web-flow · commit a240a5732284 · 2020-10-06T10:52:16.000-04:00
Add new OG image
diff --git a/src/css/tailwind.css b/src/css/tailwind.css
@@ -199,7 +199,7 @@ footer p a:focus {
 }
 .list-jams-logo-pink > li:after {
   background-image: url("data:image/svg+xml,%3Csvg width='8' viewBox='0 0 12 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 0C2.68226 0 0 2.90578 0 6.5C0 10.0942 2.68226 13 6 13C9.31774 13 12 10.0942 12 6.5V0H6Z' fill='%23F0047F'/%3E%3C/svg%3E%0A");
-  left: 1em;
+  left: 1.5em;
 }
 .list-jams-logo-border > li:before {
   @apply text-gray-400;
diff --git a/src/site/_data/netlify.js b/src/site/_data/netlify.js
@@ -0,0 +1,14 @@
+const PROD_URL = "https://www.jamstack.org";
+
+module.exports = {
+  /*
+  See also Netlify ENV variables:
+    process.env.CONTEXT === "production" ||
+    process.env.CONTEXT === "deploy-preview" ||
+    process.env.CONTEXT === "branch-deploy"
+
+  via https://docs.netlify.com/configure-builds/environment-variables/
+
+   */
+  deployUrl: process.env.CONTEXT === "production" ? PROD_URL : process.env.DEPLOY_PRIME_URL
+};
diff --git a/src/site/_includes/layouts/base.njk b/src/site/_includes/layouts/base.njk
@@ -1,7 +1,9 @@
 ---
 title: Jamstack | JavaScript, APIs, and Markup
 description: What is the Jamstack? Why use the Jamstack? How do I get started? Learn what the Jamstack is all about and why it's the best approach for building faster, more secure websites.
+ogimage: "/img/og/default-og-image.png"
 ---
+
 <!doctype html>
 <html lang="en">
   <head>
@@ -18,12 +20,12 @@ description: What is the Jamstack? Why use the Jamstack? How do I get started? L
     <meta property="og:url" content="https://jamstack.org/">
     <meta property="og:description" content="{{ description }}">
     <meta property="og:type" content="website">
-    <meta property="og:image" content="">
+    <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:title" content="{{ title }} | Jamstack">
     <meta property="twitter:description" content="{{ description }}">
-    <meta property="twitter:image" content="">
+    <meta property="twitter:image" content="{{ netlify.deployUrl }}{{ ogimage }}">
   </head>
   <body class="bg-blue-900 text-blue-100 leading-relaxed antialiased">
     <svg width="0" height="0" aria-hidden="true" style="position: absolute;">
diff --git a/src/site/_includes/navigation-links.njk b/src/site/_includes/navigation-links.njk
@@ -2,7 +2,7 @@
   {% for link in linkList %}
     <li>
       <a href="{{ link.url }}"
-        class="block font-bold text-sm text-white hover:underline py-2 px-8 {% if page.url.split("/")[1] == link.url.split("/")[1] %} bg-gray-900{% endif %}">
+        class="block font-bold text-sm text-white hover:underline py-2 px-10 {% if page.url.split("/")[1] == link.url.split("/")[1] %} bg-gray-900{% endif %}">
         {{ link.text }}
       </a>
     </li>
diff --git a/src/site/img/og/default-og-image.png b/src/site/img/og/default-og-image.png

Original file line number	Diff line number	Diff line change
`@@ -199,7 +199,7 @@ footer p a:focus {`
`199`	`199`	`}`
`200`	`200`	`.list-jams-logo-pink > li:after {`
`201`	`201`	`background-image: url("data:image/svg+xml,%3Csvg width='8' viewBox='0 0 12 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 0C2.68226 0 0 2.90578 0 6.5C0 10.0942 2.68226 13 6 13C9.31774 13 12 10.0942 12 6.5V0H6Z' fill='%23F0047F'/%3E%3C/svg%3E%0A");`
`202`		`- left: 1em;`
	`202`	`+ left: 1.5em;`
`203`	`203`	`}`
`204`	`204`	`.list-jams-logo-border > li:before {`
`205`	`205`	`@apply text-gray-400;`