@data-visuals/create 7.6.1 → 7.6.3

package/package.json

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

package/templates/__common__/app/styles/_typography-queso.scss

@@ -73,3 +73,12 @@
     }
   }
 }
+
+// figma2html
+i {
+  font-style: italic;
+}
+
+b {
+  font-weight: bold;
+}

package/templates/__common__/app/styles/_typography.scss

@@ -142,3 +142,12 @@
     max-width: 24em;
   }
 }
+
+// figma2html
+i {
+  font-style: italic;
+}
+
+b {
+  font-weight: bold;
+}

package/templates/__common__/app/templates/includes/figma2html-config.html

@@ -0,0 +1,26 @@
+<script>
+  const figma2html = document.querySelector('.figma2html');
+
+  // Tweak image sources
+  const images = figma2html.querySelectorAll('img.f2h-img');
+  images.forEach(image => {
+    let src = image.getAttribute('data-src');
+    if (!src.includes('../')) {
+      src = '../' + src; 
+    }
+    image.setAttribute('src', src);
+  })
+
+  // add CSS media queries as style text
+  const style = document.createElement('style')
+  figma2html.appendChild(style);
+
+  const frames = figma2html.querySelectorAll('.f2h-frame');
+
+  // dynamically add css styles as text
+  if (frames.length == 2) {
+    style.textContent = '#f2h-frame-664 { display: block !important; } #f2h-frame-320 { display: none !important; } @media (max-width: 664px) { #f2h-frame-664 { display: none !important; } #f2h-frame-320 { display: block !important; }}'
+  } else {
+    style.textContent = '#f2h-frame-1040 { display: block !important; } #f2h-frame-664, #f2h-frame-320 { display: none !important; } @media (max-width: 1040px) { #f2h-frame-1040, #f2h-frame-320 { display: none !important; } #f2h-frame-664 { display: block !important; }} @media (max-width: 664px) { #f2h-frame-1040, #f2h-frame-664 { display: none !important; } #f2h-frame-320 { display: block !important; }}'
+  }
+</script>

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

@@ -7,110 +7,124 @@ 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 extractZip = async file => {
+  console.log('Unzipping ' + colors.magentaBright(file) + '...');
 
-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
-      );
-    });
-  });
-};
+  try {
+    // extract the zip file
+    await extract(
+      resolve('workspace/figma2html-exports/' + file),
+      // save the extracted zip file in the workspace directory
+      { dir: resolve('workspace/figma2html-exports') }
+    );
 
-const moveFiles = filename => {
-  console.log('Now moving the figma2html files...');
+    const filename = file.replace(".zip", "")
+    return (filename);
 
-  // check if there's app/templates/figma2html-output directory
-  const templatesPath = 'app/templates/figma2html-output';
+  } catch (err) {
+    console.log(err)
+  }
+}
+
+const makeDirectory = path => {
   try {
-    fs.accessSync(templatesPath);
+    fs.accessSync(path);
+    return (path);
   } catch (err) {
-    fs.mkdirSync(templatesPath, err => {
+    fs.mkdirSync(path, err => {
       if (err) {
         console.log(err);
       } else {
-        console.log('created figma2html-output directory!');
+        console.log(`created new ${path} directory!`);
+        return (path);
       }
-    });
-  } finally {
-    moveHtml(filename);
+    })
   }
+}
 
-  // check if there's app/assets/figma2html directory
-  const assetsPath = 'app/assets/figma2html/';
+const makeHigherDirectories = filename => {
+  // check and make directries
+  try {
+    makeDirectory('app/templates/figma2html-output')
+    makeDirectory('app/assets/figma2html/')
+
+    return (filename);
+
+  } catch (err) {
+    console.log(err)
+  } 
+};
 
+const makeLowerDirectories = filename => {
+  // check and make directries
   try {
-    fs.accessSync(assetsPath);
-    console.log('figma2html directory already exists!');
+    makeDirectory('app/assets/figma2html/' + filename);
+
+    return (filename);
+
   } catch (err) {
-    fs.mkdirSync(assetsPath, err => {
-      if (err) {
-        console.log(err);
-      } else {
-        console.log('created new figma2html directory!');
+    console.log(err)
+  } 
+};
+
+
+const moveImages = filename => {
+  // move the image files in the app/assets/figma2html/FILENAME directory
+  const imagesPath = 'workspace/figma2html-exports/assets/figma2html/' + filename;
+  fs.readdir(imagesPath, (err, images) => {
+    images.forEach((image, index) => {
+      console.log('moving ' + filename + ", " + image + '...');
+      fs.renameSync(
+        imagesPath + '/' + image,
+        'app/assets/figma2html/' + filename + '/' + image
+      );
+      if (index == images.length - 1) {
+        return (filename);
       }
     });
-  } 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
+const moveHtmlFiles = filename => {
   try {
-    console.log('Unzipping ' + colors.magentaBright(file) + '...');
-    await extract(
-      resolve('workspace/' + file),
-      // save the extracted zip file in the workspace directory
-      { dir: resolve('workspace') }
+    // move the .html file in the app/templates directory
+    fs.rename(
+      'workspace/figma2html-exports/' + filename + '.html',
+      'app/templates/figma2html-output/' + filename + '.html'
     );
-    console.log(colors.magentaBright(file) + ' Extraction completed');
+
+    return (filename)
   } catch (err) {
-    // handle any errors
-  } finally {
-    // get the file name
-    const filename = file.replace('.zip', '');
-    // then move files
-    moveFiles(filename);
+    console.log(err)
   }
 };
 
-module.exports = () => {
+const organizeFiles = async file => {
+  try {
+    // extract zip file
+    const extractedZip = await extractZip(file);
+    // make directories
+    const madeHigherDirectories = await makeHigherDirectories(extractedZip);
+    const madeLowerDirectories = await makeLowerDirectories(madeHigherDirectories)
+    // move images
+    await moveImages(madeLowerDirectories);
+    // move html files
+    await moveHtmlFiles(madeLowerDirectories);
+
+  } catch (err) {
+    console.log(err)
+  }
+}
+
+// main function
+module.exports = async () => {
   // check if a zip file exists in the workspace directory
-  fs.readdir('workspace', (err, files) => {
+  fs.readdir('workspace/figma2html-exports', (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);
+      if (file.includes('.zip')) {
+        organizeFiles(file);
       }
     });
   });
 };
+

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

@@ -37,7 +37,8 @@
 
   {# add name of your figma2html file here #}
   {# {% set figma2html = "" %}
-  {% include "figma2html-output/" + figma2html + ".html" %} #}
+  {% include "figma2html-output/" + figma2html + ".html" %} 
+  {% include 'includes/figma2html-config.html' %}#}
 
   {# data-source and data-credit are also used in the CMS #}
   <ul class="graphic-footer">