Merge pull request #3 from 99littlebugs/social-share-preview

Social share preview

.gitignore

@@ -3,3 +3,4 @@ node_modules/
 
 # should be generated
 site/index.html
+site/images/social-share.png

build.js

@@ -1,6 +1,7 @@
 const handlebars = require('handlebars');
 const fs = require("fs");
 const path = require('path');
+const puppeteer = require('puppeteer');
 
 handlebars.registerHelper('date', function (date) {
     const options = { weekday: 'short', month: 'short', day: 'numeric' };
@@ -26,6 +27,19 @@ for (const site of data.sites) {
 
 fs.writeFileSync(path.join("site", "index.html"), template({ sites: sites.sort(sortByProperty("name")), events: events.sort(sortByProperty("date")) }));
 
+(async () => {
+    const browser = await puppeteer.launch();
+    const page = await browser.newPage();
+    await page.setViewport({
+        width: 1200,
+        height: 628,
+        deviceScaleFactor: 1
+    });
+    await page.goto(`file://${path.join(__dirname, "site", "index.html")}`);
+    await page.screenshot({path: path.join("site", "images", "social-share.png")});
+    await browser.close();
+})();
+
 function sortByProperty(property) {
     return function (a, b) {
         if (a[property] > b[property])

site/index.hbs

@@ -12,7 +12,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <!-- Font -->
-  <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
+  <link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
 
   <!-- CSS -->
   <link rel="stylesheet" href="css/normalize.css">
@@ -34,7 +34,7 @@
   <meta property="og:title" content="COVID-19 Vaccine Site Finder">
   <meta property="og:description" content="NY State vaccination appointments seem to be spread across multiple websites, making it challenging to see where appointments are available.
   This website aims to solve that problem by aggregating the views of the many different sites to a single dashboard.">
-  <meta property="og:image" content="https://vaccinesitefinder.com/images/vaccine-site-finder.png">
+  <meta property="og:image" content="https://vaccinesitefinder.com/images/social-share.png">
   <meta property="og:url" content="https://vaccinesitefinder.com">
   <meta name="twitter:card" content="summary_large_image">
 </head>