From c98c6ac75ea835cea48ddfb625c654f78938ab89 Mon Sep 17 00:00:00 2001 From: Edgar Zorrilla Date: Tue, 7 Jul 2020 02:43:13 -0500 Subject: [PATCH 1/9] Remove pdf-image & preview script --- package.json | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/package.json b/package.json index da46f63f..6475ed3f 100644 --- a/package.json +++ b/package.json @@ -14,14 +14,12 @@ "dev": "node build/dev-server.js", "start": "node build/dev-server.js", "pdf": "node scripts/export.js", - "preview": "node scripts/preview.js", "test:deleteFiles": "node test/scripts/deleteFiles.js", "test:cafe": "testcafe chromium test/", "test:e2e": "concurrently \"npm run dev\" \"npm run test:cafe\" --success first --kill-others --raw", "test:export": "SCRIPT=export npm run test:deleteFiles && npm run export && mocha test/scripts/export.js", - "test:preview": "SCRIPT=preview npm run test:deleteFiles && npm run preview && mocha test/scripts/preview.js", "test:docs": "npm run docs && concurrently \"npm run docs:serve\" \"npm run test:cafe\" --success first --kill-others --raw", - "test": "npm run test:export && npm run test:preview && npm run test:docs && npm run test:e2e", + "test": "npm run test:export && npm run test:docs && npm run test:e2e", "export": "concurrently \"npm run dev\" \"npm run pdf\" --success first --kill-others --raw", "lint": "eslint --ext .js,.vue src scripts", "lint:fix": "eslint --ext .js,.vue src scripts --fix" @@ -82,7 +80,6 @@ "opn": "5.4.0", "optimize-css-assets-webpack-plugin": "5.0.1", "ora": "3.0.0", - "pdf-image": "2.0.0", "postcss": "7.0.4", "postcss-cssnext": "3.1.0", "puppeteer": "1.8.0", From 584fc444d3f2b4a11c6e181c5a3e11fe3a0eff4a Mon Sep 17 00:00:00 2001 From: CripterHack Date: Tue, 7 Jul 2020 02:46:53 -0500 Subject: [PATCH 2/9] Remove preview.js --- scripts/preview.js | 33 --------------------------------- 1 file changed, 33 deletions(-) delete mode 100755 scripts/preview.js diff --git a/scripts/preview.js b/scripts/preview.js deleted file mode 100755 index a6c28136..00000000 --- a/scripts/preview.js +++ /dev/null @@ -1,33 +0,0 @@ -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) => { - try { - await convert(dir); - } catch (e) { - console.dir(e); - } - 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); - }); -}); From 6984505ed0f4fe68c2cf128e447bc65ad34fe069 Mon Sep 17 00:00:00 2001 From: CripterHack Date: Tue, 7 Jul 2020 02:48:00 -0500 Subject: [PATCH 3/9] Remove preview.js test --- test/scripts/preview.js | 17 ----------------- 1 file changed, 17 deletions(-) delete mode 100755 test/scripts/preview.js diff --git a/test/scripts/preview.js b/test/scripts/preview.js deleted file mode 100755 index 9ace94c4..00000000 --- a/test/scripts/preview.js +++ /dev/null @@ -1,17 +0,0 @@ -const mocha = require('mocha'); -const assert = require('assert'); -const path = require('path'); -const fs = require('fs'); -const describe = mocha.describe; -const it = mocha.it; -const allResumes = require('./allResumes'); - -describe('npm run preview', () => { - it('should have generated the png files', () => { - const resumes = allResumes(); - resumes.forEach(resume => { - const p = path.join(__dirname, '../../src/assets/preview/resume-' + resume.path + '.png'); - assert.ok(fs.existsSync(p)); - }); - }); -}); From 7f5a30955dd19fdd574a60766706f5ca6d342f3a Mon Sep 17 00:00:00 2001 From: Edgar Zorrilla Date: Tue, 7 Jul 2020 02:55:00 -0500 Subject: [PATCH 4/9] Adding preview replacement to using only puppeter --- scripts/export.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/scripts/export.js b/scripts/export.js index 2a18da1e..cf3b42d2 100755 --- a/scripts/export.js +++ b/scripts/export.js @@ -53,6 +53,7 @@ const convert = async () => { console.log('Exporting ...'); try { const fullDirectoryPath = path.join(__dirname, '../pdf/'); + const previewOutPath = path.join(__dirname, '../src/assets/preview/resume-'); const directories = getResumesFromDirectories(); directories.forEach(async (dir) => { const browser = await puppeteer.launch({ @@ -68,6 +69,12 @@ const convert = async () => { ) { fs.mkdirSync(fullDirectoryPath); } + await page.emulateMedia('print'); + await page.screenshot({ + path: previewOutPath + dir.name + '.png', + fullPage: true, + omitBackground: false + }); await page.pdf({ path: fullDirectoryPath + dir.name + '.pdf', format: 'A4' From a0e66198802d050ebb66c4fe0786bc64fb8b7a1e Mon Sep 17 00:00:00 2001 From: Edgar Zorrilla Date: Tue, 7 Jul 2020 02:58:41 -0500 Subject: [PATCH 5/9] Adding global CSS @media print styles --- src/pages/resume.vue | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/pages/resume.vue b/src/pages/resume.vue index 22c1ec52..3ce16e91 100755 --- a/src/pages/resume.vue +++ b/src/pages/resume.vue @@ -45,3 +45,21 @@ export default Vue.component('resume', { overflow: hidden; } + From b83bee2f2dfb2b571c6807def18ef423aa38ac24 Mon Sep 17 00:00:00 2001 From: Edgar Zorrilla Date: Tue, 7 Jul 2020 03:27:19 -0500 Subject: [PATCH 6/9] fixing @media print styles --- src/pages/resume.vue | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/src/pages/resume.vue b/src/pages/resume.vue index 3ce16e91..22c1ec52 100755 --- a/src/pages/resume.vue +++ b/src/pages/resume.vue @@ -45,21 +45,3 @@ export default Vue.component('resume', { overflow: hidden; } - From 8bfdc8cbaaf802a3741178a0f5c3749f977c56d5 Mon Sep 17 00:00:00 2001 From: Edgar Zorrilla Date: Tue, 7 Jul 2020 03:29:00 -0500 Subject: [PATCH 7/9] fixed media print styles --- scripts/export.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/scripts/export.js b/scripts/export.js index cf3b42d2..375d0dbc 100755 --- a/scripts/export.js +++ b/scripts/export.js @@ -54,6 +54,7 @@ const convert = async () => { try { const fullDirectoryPath = path.join(__dirname, '../pdf/'); const previewOutPath = path.join(__dirname, '../src/assets/preview/resume-'); + const printCSSPath = path.join(__dirname, '../src/assets/css/'); const directories = getResumesFromDirectories(); directories.forEach(async (dir) => { const browser = await puppeteer.launch({ @@ -69,6 +70,7 @@ const convert = async () => { ) { fs.mkdirSync(fullDirectoryPath); } + await page.addStyleTag({path: printCSSPath + 'print.css'}); await page.emulateMedia('print'); await page.screenshot({ path: previewOutPath + dir.name + '.png', From 38007855d664721e44eb9f46d69630e901e5abf6 Mon Sep 17 00:00:00 2001 From: CripterHack Date: Tue, 7 Jul 2020 03:43:31 -0500 Subject: [PATCH 8/9] fix memory leak --- scripts/export.js | 1 + src/assets/css/print.css | 20 ++++++++++++++++++++ 2 files changed, 21 insertions(+) create mode 100644 src/assets/css/print.css diff --git a/scripts/export.js b/scripts/export.js index 375d0dbc..32cab9a9 100755 --- a/scripts/export.js +++ b/scripts/export.js @@ -81,6 +81,7 @@ const convert = async () => { path: fullDirectoryPath + dir.name + '.pdf', format: 'A4' }); + await page.close(); await browser.close(); }); } catch (err) { diff --git a/src/assets/css/print.css b/src/assets/css/print.css new file mode 100644 index 00000000..ceffffdb --- /dev/null +++ b/src/assets/css/print.css @@ -0,0 +1,20 @@ + @page { + size:A4; + margin:0; + } + html,body{ + width: 210mm; + height: 297mm; + font-size: 11px; + background: #FFF; + overflow:visible; + } + body { + display: table; + table-layout: fixed; + } + html,body,.page-wrapper,.page{padding:0;margin:0;page-break-after:always} + .page{width:210mm} + .page,.page-wrapper,.page-inner{height:297mm} + .section-content{padding-left:0!important} + body,.page-wrapper{padding:0!important} \ No newline at end of file From 0535df7fc1a46adfd9da614ed3a542275c06644b Mon Sep 17 00:00:00 2001 From: CripterHack Date: Tue, 7 Jul 2020 04:33:35 -0500 Subject: [PATCH 9/9] better styles for non print view --- src/App.vue | 2 +- src/pages/resume.vue | 18 +++++++++++++++++- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/src/App.vue b/src/App.vue index ecacb3ff..1106bd26 100755 --- a/src/App.vue +++ b/src/App.vue @@ -24,6 +24,6 @@ body { padding: 0; margin: 0; overflow-x: hidden; - background: #CCCCCC; + background: #f2f2f2; } diff --git a/src/pages/resume.vue b/src/pages/resume.vue index 22c1ec52..9f7eac9d 100755 --- a/src/pages/resume.vue +++ b/src/pages/resume.vue @@ -23,7 +23,7 @@ export default Vue.component('resume', { } .page-wrapper { overflow-x: hidden; - background: #CCCCCC; + background: transparent; margin: 0; padding: 0; -webkit-print-color-adjust: exact; @@ -45,3 +45,19 @@ export default Vue.component('resume', { overflow: hidden; } +