Fixed social image generation, and now it looks great!

jsoxford · Feb 15, 2021 · 876b8ba · 876b8ba
1 parent b1d4655
commit 876b8ba
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 21 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -47,6 +47,18 @@ module.exports = function (eleventyConfig) {
     return dateToCheck < today;
   });
 
+  // Filter to format the date in the same way we're doing it clientside, to be used in places
+  eleventyConfig.addFilter("formatTheDate", (date) => {
+    return new Intl.DateTimeFormat('default', {
+      month: 'long',
+      day: 'numeric',
+      hour: 'numeric',
+      hour12: true,
+      timeZoneName: 'short'
+      })
+      .format(new Date(date))
+  })
+
   eleventyConfig.addFilter("slug", (str) => {
     if (!str) {
       return;

diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     "build": "cross-env ELEVENTY_ENV=prod npm-run-all build:sass build:eleventy social-images",
     "lint": "stylelint 'src/sass/**/*.scss' 'src/sass/**/**/*.scss' 'src/sass/**/**/**/*.scss'",
     "lint:fix": "stylelint --fix 'src/sass/**/*.scss' 'src/sass/**/**/*.scss' 'src/sass/**/**/**/*.scss'",
-    "social-images": "eleventy-social-images --outputDir public --dataFile social/pages.json --templatePath social/template.html --theme green",
+    "social-images": "eleventy-social-images --outputDir public --dataFile social/pages.json --templatePath social/template.html",
     "bump": "npm --no-git-tag-version version"
   },
   "repository": {

diff --git a/src/_generate/pagesjson.njk b/src/_generate/pagesjson.njk
@@ -3,9 +3,22 @@ permalink: ./social/pages.json
 permalinkBypassOutputDir: true
 eleventyExcludeFromCollections: true
 ---
-[{% for pages in collections.all %}
+{# Generate image for the home page #}
+[
+{# Generate image for other pages #}
+{% for pages in collections.all %}
+   {% if pages.data.previewslug or pages.data.title %}
+      {
+      "title":"{{ pages.data.title | addNbsp | safe }}",
+      "imgName":"{% if pages.data.previewslug %}{{ pages.data.previewslug }}{% else %}{{ pages.data.title | slug }}{% endif %}"
+      },
+   {% endif %}
+{% endfor %}
+{# Generate image for the events #}
+{% for event in collections.events %}
 	{
-   "title":"{% if pages.data.title %}{{ pages.data.title | addNbsp | safe }}{% else %}{{ meta.siteName }}{% endif %}",
-   "imgName":"{% if pages.data.title %}{{ pages.data.title | slug}}{% else %}home{% endif %}"
+   "title":"{{ event.date | formatTheDate }}",
+   "imgName":"{{ event.fileSlug | slug }}"
 	}{% if loop.last == false %},{% endif %}
-{% endfor %}] 
+{% endfor %}
+] 
diff --git a/src/_generate/socialtemplate.njk b/src/_generate/socialtemplate.njk
@@ -8,22 +8,52 @@ eleventyExcludeFromCollections: true
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500&display=swap"
-      rel="stylesheet"
-    />
     <style>
-      {% raw %}{{ style }}{% endraw %} 
+    @import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@1,400;1,700&amp;display=swap');
+    body { 
+      /* This is actually the bg.svg from the main site, base64 encoded so it can be used for the site-preview image generation */
+      background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjY1M3B4IiBoZWlnaHQ9IjUxOHB4IiB2aWV3Qm94PSIwIDAgNjUzIDUxOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4NCiAgICA8dGl0bGU+QXJ0Ym9hcmQ8L3RpdGxlPg0KICAgIDxkZWZzPg0KICAgICAgICA8bGluZWFyR3JhZGllbnQgeDE9IjUzLjI3ODkxNjYlIiB5MT0iODAuMTM2NzU1OCUiIHgyPSIzNS44NDM5MDc1JSIgeTI9IjIxLjU3Mjc3ODMlIiBpZD0ibGluZWFyR3JhZGllbnQtMSI+DQogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjNDdFREZGIiBvZmZzZXQ9IjAlIj48L3N0b3A+DQogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjMDBDQkY5IiBvZmZzZXQ9IjEwMCUiPjwvc3RvcD4NCiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4NCiAgICAgICAgPGxpbmVhckdyYWRpZW50IHgxPSIyMi4wMTU1NzU5JSIgeTE9IjExLjU3Njk5NzMlIiB4Mj0iNzEuMjc5MjE2NiUiIHkyPSI4NS4yNzg2NDc4JSIgaWQ9ImxpbmVhckdyYWRpZW50LTIiPg0KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0ZBRjE4MDU1IiBvZmZzZXQ9IjAlIj48L3N0b3A+DQogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkZFMDAwIiBvZmZzZXQ9IjEwMCUiPjwvc3RvcD4NCiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4NCiAgICAgICAgPGxpbmVhckdyYWRpZW50IHgxPSI0NC43OTA0ODQ1JSIgeTE9IjQ2LjI4NTI5NTIlIiB4Mj0iODQuMTcxMDg3MiUiIHkyPSI2MC4zMjQzNjU4JSIgaWQ9ImxpbmVhckdyYWRpZW50LTMiPg0KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0ZGMDBFRGJiIiBvZmZzZXQ9IjAlIj48L3N0b3A+DQogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRDUwMEIzIiBvZmZzZXQ9IjEwMCUiPjwvc3RvcD4NCiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4NCiAgICA8L2RlZnM+DQogICAgPGcgaWQ9IkFydGJvYXJkIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4NCiAgICAgICAgPHBvbHlnb24gaWQ9IlBhdGgtMiIgZmlsbD0idXJsKCNsaW5lYXJHcmFkaWVudC0xKSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDEwLjAwMDAwMCwgMjk4LjUwMDAwMCkgcm90YXRlKC02NS4wMDAwMDApIHRyYW5zbGF0ZSgtNDEwLjAwMDAwMCwgLTI5OC41MDAwMDApICIgcG9pbnRzPSIxNDkgLTEzMiA2NzEgNzI5IDQyMC41NDU3MDEgNzI5Ij48L3BvbHlnb24+DQogICAgICAgIDxwb2x5Z29uIGlkPSJQYXRoLTIiIGZpbGw9InVybCgjbGluZWFyR3JhZGllbnQtMikiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI4NS4wMDAwMDAsIDQ0My4wMDAwMDApIHNjYWxlKC0xLCAxKSByb3RhdGUoLTY4LjAwMDAwMCkgdHJhbnNsYXRlKC0yODUuMDAwMDAwLCAtNDQzLjAwMDAwMCkgIiBwb2ludHM9Ii0xMjIgNDUgNjkyIDg0MSAzMDEuNDQ0ODI5IDg0MSI+PC9wb2x5Z29uPg0KICAgICAgICA8cG9seWdvbiBpZD0iUGF0aC0yIiBmaWxsPSJ1cmwoI2xpbmVhckdyYWRpZW50LTMpIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1MTQuMDAwMDAwLCAxNjkuMDAwMDAwKSBzY2FsZSgtMSwgLTEpIHJvdGF0ZSg0NS4wMDAwMDApIHRyYW5zbGF0ZSgtNTE0LjAwMDAwMCwgLTE2OS4wMDAwMDApICIgcG9pbnRzPSIxMzYgLTQ5IDg5MiAzODcgODcyLjc5MDUyMiAxMDguMDY3ODIiPjwvcG9seWdvbj4NCiAgICA8L2c+DQo8L3N2Zz4=");
+      background-color: #20fea1;
+      background-size: 120% 120%;
+      background-repeat: no-repeat;
+      background-position: 50% 50%;
+      background-attachment: fixed;
+      margin: 0; 
+      padding: 0; 
+      padding-left: 6vw;
+      display: flex; 
+      min-height: 100vh; 
+      width: 100%; 
+      justify-content: flex-start; 
+      align-items: center;
+      box-sizing: border-box;
+    }
+    .text {
+      font-family: Fira Sans;
+      font-size: 12vw;
+      font-weight: 400;
+      font-style: italic;
+    }
+    #line1 {
+      font-weight: 700;
+    }
+    #line2 {
+
+    }
+    #line3 {
+      font-size: 6vw;
+      font-style: normal;
+      margin: 0;
+      padding: 0;
+      font-weight: inherit;
+    }
     </style>
   </head>
   <body>
-    <header>
-      <div>
-        <h1></h1>
-        <p>
-          <em>Published on</em>&nbsp;&nbsp;<strong>{{ meta.siteName }}</strong>
-        </p>
-      </div>
-    </header>
+    <div class="text">
+      <div id="line1">Not</div>
+      <div id="line2">JSOxford</div>
+      <h1 id="line3">{{ dateline }}</h1>
+    </div> 
   </body>
 </html>
diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk
@@ -2,7 +2,6 @@
 <html lang="en">
 {%- set pageTitle %}{% if title %}{{ title }} | {% endif %}{{ meta.siteName }}{% endset -%}
 {%- set pageDescription %}{% if description %}{{ description }}{% else %}{{ meta.siteDescription }}{% endif %}{% endset -%}
-{%- set pageSocialImg %}{{ meta.url }}/previews/{% if title %}{{ title | slug }}{% else %}home{% endif %}.png{% endset -%}
   <head>
     <!-- Generated from the 11ty Netlify Jumpstart: https://github.com/5t3ph/11ty-netlify-jumpstart -->
     <meta charset="UTF-8" />
@@ -37,6 +36,9 @@
     />
     <meta property="og:image" content="{{pageSocialImg}}" />
     <meta name="twitter:image" content="{{pageSocialImg}}" />
+    {%- set pageSocialImg %}/previews/{% if previewslug %}{{ previewslug }}{% else %}{{ page.fileSlug }}{% endif %}.png{% endset -%}
+    <meta property="og:image" content="{{ pageSocialImg | url }}" />
+    <meta name="twitter:image" content="{{ pageSocialImg | url }}" />
 
     <link
       rel="alternate"

diff --git a/src/coc.md b/src/coc.md
@@ -2,6 +2,7 @@
 layout: page
 title: Code of Conduct
 description: For all JSNotOxford events
+previewslug: code-of-conduct
 ---
 
 All attendees, speakers, sponsors, volunteers and organisers at our meetup group and online interactions are required to agree with the following code of conduct. Organizers will enforce this code throughout the event. We are expecting cooperation from all participants to help ensure a safe environment for everybody.

diff --git a/src/index.njk b/src/index.njk
@@ -1,5 +1,6 @@
 ---
 layout: page
+previewslug: home
 ---
 {% set all_events = collections.events | reverse %}
 {% set next_event = all_events[0] %}

diff --git a/src/sass/_maybenot.scss b/src/sass/_maybenot.scss
@@ -1,8 +1,6 @@
 body {
   background-color: #20fea1;
   background-image: url(../img/bg.svg);
-
-  background-size: 100% 100%;
   background-size: cover;
   background-attachment: fixed;
   color: #000;