@data-visuals/create 7.4.5 → 7.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-visuals/create",
-  "version": "7.4.5",
+  "version": "7.6.0",
   "description": "Create graphics and features the Data Visuals way.",
   "scripts": {
     "build:docs": "doctoc README.md --github",

package/templates/__common__/app/styles/components/_graphic.scss

@@ -10,8 +10,9 @@
   font-weight: $font-weight-bold;
   font-size: to-rem(18);
   line-height: $line-height-title;
-  margin-bottom: $gutter-half;
   text-align: left;
+  max-width: 41.5rem;
+  margin: 0 auto $gutter-half;
 }
 
 .graphic-category {
@@ -28,12 +29,15 @@
 .graphic-prose {
   font-size: to-rem(14);
   line-height: $line-height-body;
-  margin-bottom: $gutter-half;
+  max-width: 41.5rem;
+  margin: 0 auto $gutter-half;
 }
 
 .graphic-footer {
   color: $color-grey;
   font-size: to-rem(12);
+  max-width: 41.5rem;;
+  margin: 0 auto $gutter-half;
 }
 
 .graphic-footer li {

package/templates/__common__/config/scripts/develop.js

@@ -2,6 +2,7 @@
 const { clearConsole, series } = require('../utils');
 
 // tasks
+const parseFigma2html = require('../tasks/parse-figma2html');
 const api = require('../tasks/api');
 const clean = require('../tasks/clean');
 const serve = require('../tasks/serve');
@@ -9,7 +10,7 @@ const serve = require('../tasks/serve');
 async function develop() {
   clearConsole();
 
-  const runner = series([clean, api, serve]);
+  const runner = series([parseFigma2html, clean, api, serve]);
 
   await runner();
 }

package/templates/__common__/config/tasks/graphics-meta.js

@@ -281,7 +281,6 @@ module.exports = async localURL => {
   const browser = await puppeteer
     .launch({
       executablePath: process.env.CHROME_INSTALL_PATH || CHROME_INSTALL_PATH,
-      headless: 'new',
     })
     .catch(err => {
       logErrorMessage(err);

package/templates/__common__/config/tasks/parse-figma2html.js

@@ -0,0 +1,116 @@
+const colors = require('ansi-colors');
+const fs = require('fs-extra');
+const extract = require('extract-zip');
+
+// internal
+const paths = require('../paths');
+const { resolve } = require('path');
+
+// functions
+const moveHtml = filename => {
+  // move the .html file in the app/templates directory
+  fs.renameSync(
+    'workspace/' + filename + '.html',
+    'app/templates/figma2html-output/' + filename + '.html'
+  );
+};
+
+const moveImages = filename => {
+  // move the image files in the app/assets/figma2html/FILENAME directory
+  const imagesPath = 'workspace/assets/figma2html/' + filename;
+  fs.readdir(imagesPath, (err, images) => {
+    images.forEach(image => {
+      console.log('moving ' + image + '...');
+      fs.renameSync(
+        imagesPath + '/' + image,
+        'app/assets/figma2html/' + filename + '/' + image
+      );
+    });
+  });
+};
+
+const moveFiles = filename => {
+  console.log('Now moving the figma2html files...');
+
+  // check if there's app/templates/figma2html-output directory
+  const templatesPath = 'app/templates/figma2html-output';
+  try {
+    fs.accessSync(templatesPath);
+  } catch (err) {
+    fs.mkdirSync(templatesPath, err => {
+      if (err) {
+        console.log(err);
+      } else {
+        console.log('created figma2html-output directory!');
+      }
+    });
+  } finally {
+    moveHtml(filename);
+  }
+
+  // check if there's app/assets/figma2html directory
+  const assetsPath = 'app/assets/figma2html/';
+
+  try {
+    fs.accessSync(assetsPath);
+    console.log('figma2html directory already exists!');
+  } catch (err) {
+    fs.mkdirSync(assetsPath, err => {
+      if (err) {
+        console.log(err);
+      } else {
+        console.log('created new figma2html directory!');
+      }
+    });
+  } finally {
+    // create app/assets/figma2html/FILENAME directory
+    try {
+      fs.accessSync(assetsPath + filename);
+      console.log('app/assets/figma2html/' + filename + ' already exists!');
+    } catch (err) {
+      fs.mkdirSync(assetsPath + filename, err => {
+        if (err) {
+          console.log(err);
+        } else {
+          console.log('created figma2html/FILENAME directory!');
+        }
+      });
+    }
+    moveImages(filename);
+  }
+};
+
+const extractZip = async file => {
+  // extract the zip file
+  try {
+    console.log('Unzipping ' + colors.magentaBright(file) + '...');
+    await extract(
+      resolve('workspace/' + file),
+      // save the extracted zip file in the workspace directory
+      { dir: resolve('workspace') }
+    );
+    console.log(colors.magentaBright(file) + ' Extraction completed');
+  } catch (err) {
+    // handle any errors
+  } finally {
+    // get the file name
+    const filename = file.replace('.zip', '');
+    // then move files
+    moveFiles(filename);
+  }
+};
+
+module.exports = () => {
+  // check if a zip file exists in the workspace directory
+  fs.readdir('workspace', (err, files) => {
+    files.forEach(file => {
+      if (file.includes('assets')) {
+        // remove old assets files
+        fs.rmSync(file, { recursive: true, force: true });
+      } else if (file.includes('.zip')) {
+        // extract the zip file
+        extractZip(file);
+      }
+    });
+  });
+};

package/templates/graphic/app/templates/graphic-static.html

@@ -12,7 +12,7 @@
 {% set graphicData = data.data %}
 
 {# used by the CMS #}
-{# if this is an ai2html graphic, fill out these variables #}
+{# if this is an ai2html or figma2html graphic, fill out these variables #}
 {% set graphicTitle = context.headline %}
 {% set graphicCaption = '' %}
 {# graphicAltText is used by the CMS for accessibility #}
@@ -27,19 +27,23 @@
 {# data-graphic signifies that this can be embedded in the CMS #}
 <div class="app" data-graphic>
   {# data-title is used to grab the title in the CMS #}
-  <h1 class="graphic-title" data-title>{{ context.headline | widont or 'The only member-supported, digital-first, nonpartisan media organization' | widont }}</h1>
+  <h1 class="graphic-title" data-title>{{ context.headline | widont or "The only member-supported, digital-first, nonpartisan media organization" | widont }}</h1>
   {# data-caption is used to grab the caption in the CMS #}
-  <span data-caption>{{ prose(context.prose, context, graphicData) }}</span>
+  <div class="graphic-prose"><span data-caption>{{ prose(context.prose, context, graphicData) | widont or "Graphics chatter goes here" | widont }}</span></div>
 
   {# add name of your ai2html file here #}
   {# {% set ai2html = "" %}
   {% include "ai2html-output/" + ai2html + ".html" %} #}
 
+  {# add name of your figma2html file here #}
+  {# {% set figma2html = "" %}
+  {% include "figma2html-output/" + figma2html + ".html" %} #}
+
   {# data-source and data-credit are also used in the CMS #}
   <ul class="graphic-footer">
-    {% if context.note %}<li>Note: <span data-note>{{ context.note }}</span></li>{% endif %}
-    {% if context.source %}<li>Source: <span data-source>{{ context.source }}</span></li>{% endif %}
-    {% if context.credit %}<li>Credit: <span data-credit>{{ context.credit }}</span></li>{% endif %}
+    {% if context.note %}<li>Note: <span data-note>{{ context.note | widont or "Graphics note goes here" | widont }}</span></li>{% endif %}
+    {% if context.source %}<li>Source: <span data-source>{{ context.source | widont or "Graphics source goes here" | widont }}</span></li>{% endif %}
+    {% if context.credit %}<li>Credit: <span data-credit>{{ context.credit or "YOUR NAME" }}</span></li>{% endif %}
   </ul>
 </div>
 {% endblock content %}