ADD preview rtl and png conversion

DEVELOPER.md

@@ -31,6 +31,20 @@ Your new resume will be now reachable at localhost:8080/#/resume/TEMPLATE-NAME.
 <br>
 <br>
 
+4. Generate previews with `npm run preview`. PDF- and PNG-files will be generated.
+
+5. Add preview to `/src/pages/home.vue`:
+```javascript
+<div class="preview">
+  <router-link v-bind:to="'/resume/TEMPLATE-NAME'">
+    <div class="preview-wrapper">
+      <img src="../assets/preview/TEMPLATE-NAME.png" />
+      <span>left-right</span>
+    </div>
+  </router-link>
+</div>
+```
+
 ## Fonts
 
 ### Icons

README.md

@@ -18,6 +18,7 @@
 
 <p align="left">
 <img src="src/assets/preview/resume-purple.png" width="150" style="margin-right:5px; border: 1px solid #ccc;" />
+<img src="src/assets/preview/resume-side-bar-rtl.png" width="150" style="margin-right:5px; border: 1px solid #ccc;" />
 <img src="src/assets/preview/resume-material-dark.png" width="150" style="margin-right:5px; border: 1px solid #ccc;" />
 <img src="src/assets/preview/resume-left-right.png" width="150" style="margin-right:5px; border: 1px solid #ccc;" />
 <img src="src/assets/preview/resume-side-bar.png" width="150" style="margin-right:5px; border: 1px solid #ccc;" />

node/preview.js

@@ -0,0 +1,30 @@
+const mv = require('mv');
+const PDFImage = require('pdf-image').PDFImage;
+const path = require('path');
+const fs = require('fs');
+
+
+const getDirectories = () => {
+  const srcpath = path.join(__dirname, '../pdf');
+  return fs.readdirSync(srcpath);
+};
+
+const getTemplateName = PDF => {
+  return PDF.replace('.pdf', '');
+}
+
+const convert = async (PDF) => {
+  const pdfImage = new PDFImage(path.join(__dirname, '../pdf/' + PDF));
+  await pdfImage.convertPage(0);
+};
+
+const directories = getDirectories();
+directories.forEach(async (dir) => {
+  await convert(dir);
+  const source = path.join(__dirname, '../pdf/' + getTemplateName(dir) + '-0.png');
+  const output = path.join(__dirname, '../src/assets/preview/resume-' + getTemplateName(dir) + '.png');
+  console.log(output);
+  mv(source, output, function(err) {
+    if(err) console.dir(err);
+  });
+});

package.json

@@ -13,6 +13,7 @@
     "build": "node build/build.js",
     "start": "node build/dev-server.js",
     "pdf": "node node/app.js",
+    "preview": "npm run export && node node/preview.js",
     "template": "node node/template/template.js",
     "export": "concurrently \"npm run dev\" \"npm run pdf\" --success first --kill-others --raw",
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
@@ -66,9 +67,11 @@
     "less": "^2.7.2",
     "less-loader": "^4.0.5",
     "lolex": "^1.5.2",
+    "mv": "^2.1.1",
     "opn": "^5.1.0",
     "optimize-css-assets-webpack-plugin": "^2.0.0",
     "ora": "^1.3.0",
+    "pdf-image": "^1.1.0",
     "postcss": "^6.0.11",
     "postcss-cssnext": "^2.11.0",
     "rename": "^1.0.4",

src/pages/home.vue

@@ -46,6 +46,14 @@
         </div>
       </router-link>
     </div>
+    <div class="preview">
+      <router-link v-bind:to="'/resume/side-bar-rtl'">
+        <div class="preview-wrapper">
+          <img src="../assets/preview/resume-side-bar-rtl.png" />
+          <span>side-bar-rtl</span>
+        </div>
+      </router-link>
+    </div>
   </div>
 </div>
 </template>