refactor templating, use new s3 lib, generate iframely and oembed stuff

package.json

@@ -71,6 +71,8 @@
     "electron-json-storage": "^4.0.2",
     "electron-log": "^2.2.14",
     "electron-updater": "^2.21.4",
+    "glob": "^7.1.2",
+    "glob-copy": "^0.1.0",
     "gulp": "4",
     "gulp-chmod": "^2.0.0",
     "gulp-data": "^1.3.1",
@@ -81,6 +83,7 @@
     "luxon": "^1.0.0",
     "mime": "^1",
     "rimraf": "^2.6.2",
+    "s3-client-control": "^4.5.2",
     "underscore.string": "^3.3.4",
     "uuid": "^3.2.1",
     "vue": "^2.3.3",

src/lib/embed_code.js

@@ -4,76 +4,25 @@ import yaml from 'js-yaml'
 import { template } from 'lodash'
 import { slugify } from 'underscore.string'
 
-import { expandHomeDir } from './index'
-
-// the webpack 'ejs-loader' does not work
-const embedCodeTmpl = template(`
-<div data-analytics-viewport="autotune"
-     data-analytics-label="<%=slug %>"
-     id="<%=slug %>__graphic"
-     data-iframe-fallback="<%=fallback_img_url %>"
-     data-iframe-fallback-width="<%=fallback_img_width %>"
-     data-iframe-fallback-height="<%=fallback_img_height %>"
-     data-iframe="<%=deploy_url %>"
-     data-iframe-height="<%=height %>"
-     <% if ( resizable ) { %>data-iframe-resizable<% } %>></div>
-<script type="text/javascript">
-(function() {
-  var l = function() {
-    new pym.Parent(
-      '<%=slug %>__graphic',
-      '<%=deploy_url %>');
-  };
-  if(typeof(pym) === 'undefined') {
-    var h = document.getElementsByTagName('head')[0],
-        s = document.createElement('script');
-    s.type = 'text/javascript';
-    s.src = 'https://pym.nprapps.org/pym.v1.min.js';
-    s.onload = l;
-    h.appendChild(s);
-  } else {
-    l();
-  }
-})();
-</script>`)
+import { getProjectConfig, render, getEmbedMeta } from './index'
 
 export default function renderEmbedCode({project, settings}) {
-  const projectPath = expandHomeDir(project.path)
-  const configFile = path.join(projectPath, 'config.yml')
-
-  if ( !fs.existsSync(configFile) )
-    throw new Error('Missing project config.yml')
-
-  const config = yaml.safeLoad(fs.readFileSync(configFile, 'utf8'))
+  const config = getProjectConfig(project)
   const slug = slugify(project.title)
   const deploy_url = `${settings.deployBaseUrl}/${slug}/`
-  const fallback_img_url = `${deploy_url}fallback.${config.image_format == 'jpg' ? 'jpg' : 'png'}`
-  const fallback_img_width = config.fallback_image_width
-  const fallback_img_height = config.fallback_image_height
-
-  // collect all the artboard heights from the config file
-  const heights = []
-  for ( let k in config ) {
-    const m = k.match(/^artboard_(.+)_height$/)
-    if (m) heights.push(config[k])
-  }
-
-  // if all the artboards are the same height, we can just set the height and
-  // disable the responsive resizable stuff, set the iframe height to the min height
-  let resizable = true
-  let height = 150
-  if (heights.length > 0) {
-    resizable = !heights.every(h => h === heights[0])
-    height = Math.min(...heights)
-  }
+  const embedMeta = getEmbedMeta(config)
+  const fallbacks = embedMeta.fallbacks
+  const fallback_img_url = deploy_url + fallbacks[0].name
+  const fallback_img_width = fallbacks[0].width
+  const fallback_img_height = fallbacks[1].height
 
-  return embedCodeTmpl({
+  return render('embed_code.html.ejs', {
     slug,
     deploy_url,
     fallback_img_url,
     fallback_img_width,
     fallback_img_height,
-    height,
-    resizable
+    height: embedMeta.height,
+    resizable: embedMeta.resizable,
   }).replace(/\s+/g, ' ').trim()
 }

src/lib/index.js

@@ -1,4 +1,7 @@
 import path from 'path'
+import fs from 'fs'
+import yaml from 'js-yaml'
+import { template } from 'lodash'
 
 const HOMEDIR = process.env[process.platform == 'win32' ? 'HOMEPATH' : 'HOME']
 
@@ -23,10 +26,62 @@ export function compactHomeDir (p) {
 export function getStaticPath() {
   let ret
   if (process.env.ELECTRON_STATIC)
-    return process.env.ELECTRON_STATIC
+    return path.resolve(process.env.ELECTRON_STATIC)
   else if (process.env.NODE_ENV !== 'development')
     ret = path.join(__dirname, 'static')
   else
     ret = path.join(__dirname, '..', '..', 'static')
   return ret.replace(/\\/g, '\\\\')
 }
+
+export function getEmbedMeta(config) {
+  const ext = config.image_format == 'jpg' ? 'jpg' : 'png'
+  let fallbacks
+  if ( config.fallback_image_height ) {
+    fallbacks = [{name: `fallback.${ext}`, width: config.fallback_image_width, height: config.fallback_image_height}]
+  } else {
+    const artboards = config.artboards.split(',').map(a => a.trim())
+    fallbacks = artboards.map((ab) => {
+      return {
+        name: `fallback-${ab}.${ext}`,
+        width: config[`artboard_${ab}_width`],
+        height: config[`artboard_${ab}_height`],
+        mime: 'image/' + (ext == 'jpg' ? 'jpeg' : 'png')
+      }
+    }).sort((a, b) => a.width - b.width)
+  }
+
+  // collect all the artboard heights from the config file
+  const heights = []
+  for ( let k in config ) {
+    const m = k.match(/^artboard_(.+)_height$/)
+    if (m) heights.push(config[k])
+  }
+
+  // if all the artboards are the same height, we can just set the height and
+  // disable the responsive resizable stuff, set the iframe height to the min height
+  let resizable = true
+  let height = 150
+  if (heights.length > 0) {
+    resizable = !heights.every(h => h === heights[0])
+    height = Math.min(...heights)
+  }
+
+  return { height, resizable, fallbacks }
+}
+
+export function getProjectConfig(project) {
+  const projectPath = expandHomeDir(project.path)
+  const configFile = path.join(projectPath, 'config.yml')
+  if ( !fs.existsSync(configFile) )
+    throw new Error('Missing project config.yml')
+
+  return yaml.safeLoad(fs.readFileSync(configFile, 'utf8'))
+}
+
+const TEMPLATES = []
+export function render(tmpl, data) {
+  if ( !TEMPLATES[tmpl] )
+    TEMPLATES[tmpl] = template(fs.readFileSync(path.join(getStaticPath(), 'templates', tmpl), 'utf8'))
+  return TEMPLATES[tmpl](Object.assign({render}, data))
+}