From 8764a0ea43161f6a86688e9d882897e008acec7d Mon Sep 17 00:00:00 2001 From: unpregnant Date: Wed, 22 Feb 2017 21:37:28 +0100 Subject: [PATCH] UPDATE docs --- README.md | 87 +++------------------------------------------- docs/Contribute.md | 85 ++++++++++++++++++++++++++++++++++++++++++++ docs/Docs.md | 74 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 163 insertions(+), 83 deletions(-) create mode 100644 docs/Contribute.md create mode 100644 docs/Docs.md diff --git a/README.md b/README.md index 54a2186..1961a9e 100755 --- a/README.md +++ b/README.md @@ -43,7 +43,7 @@ To run this project, please install node. (See https://nodejs.org/en/download/pa - Replace placeholder image `/public/person.jpg` with your portrait. - To preview your CV run `npm run dev`. Check out . -Everytime you make changes, the app recompiles automatically. This may take a short while. Feel free to adjust font-sizes and other stylings to fit your needs! +The app recompiles automatically. This may take a short while. Feel free to adjust stylings to fit your needs!
@@ -51,92 +51,13 @@ Everytime you make changes, the app recompiles automatically. This may take a sh With `npm run pdf` the resumes can be exported. You will find all resumes as PDFs in `/pdf`. -[electroshot](https://github.com/mixu/electroshot) is used to generate PDFs. `convertToPdf()` in `/src/htmlToPdf.js` runs a short bash script for each resume running under `localhost:3000/resumes/resume-X`. By default the PDF size is A4. For more PDF settings check [mixu/electroshot](https://github.com/mixu/electroshot). -
-### Adjusting stylings and layout +### Configuration -This project uses LESS. Under `/less` global stylings are defined. You will find here imported fonts and the page layout. +Please read [the guide](/docs/Docs.md) on how to configure page size, stylings and more. -Each resume has its own directory. For example 'resume-1' is under `/resumes/resume-1`. Each resume directory contains a Mustache template and a less-file. - -
- -### Icons - -This project contains the [Google Material](https://material.io/icons/) and [fontawesome](http://fontawesome.io/icons/) icon sets. - -
- -### CSS3 Box-Shadows - -Due to this [Chrome bug](http://stackoverflow.com/questions/13975198/text-shadow-and-box-shadow-while-printing-chrome), CSS3 box-shadows are not rendered properly in the PDF files. The solution is to add this styling to elements with box-shadows: - -```css --webkit-print-color-adjust:exact; --webkit-filter:opacity(1); -``` - -Unfortunately, fonts and images get blurred and lose quality. Therefore `fixBoxShadows()` in `/src/javascript.js` fixes this bug, by - -1. searching for all elements with a box-shadow, -2. removing the box-shadow, -3. adding a new and absolute positioned element (with same size, position, border-radius and box-shadow) to the HTMl body, -4. and adding the stylings for `-webkit-print-color-adjust` and `-webkit-filter` to the new element. - -If shadows may be displayed wrong, please check that the element with a box-shadow has a proper height, width and positioning. - -
- -### Adding fonts - -To add a font to the project, search for the npm-module of the desired font, e.g. [roboto-fontface](https://www.npmjs.com/package/roboto-fontface) for 'Roboto'. Add dependency to `package.json` with `npm i --save`, e.g. `npm i --save roboto-fontface`. - -Create a new less file in `/less/fonts`, e.g. 'roboto.less'. `/node_modules` are accessable through localhost:3000. That means if the corresponding woff-file is under `/node_modules/roboto-fontface/anyFont.woff` the source url needs to equal `/roboto-fontface/anyFont.woff`: - -```less -@font-face { - font-family: 'Roboto'; - src: url('/roboto-fontface/fonts/Roboto/Roboto-Thin.eot'); - src: local('Roboto Thin'), local('Roboto-Thin'), url('/roboto-fontface/fonts/Roboto/Roboto-Thin.woff') format('woff'), url('/roboto-fontface/fonts/Roboto/Roboto-Thin.ttf') format('truetype') - font-weight: 100; - font-style: normal; -} -``` - -Import new less file in `/less/fonts.less`: - -```less -@import "fonts/opensans.less"; -@import "fonts/montserrat.less"; -@import "fonts/raleway.less"; -@import "fonts/opensans-condensed.less"; -@import "fonts/material-design-icons.less"; -@import "fonts/roboto.less"; -``` - -
- -## Adding a template - -Follow these steps: -- add folder in resumes, convention: 'resume-X' -- add `style.less` and `index.mustache` with same naming inside new folder - -Sample content of `index.mustache`: -```html - -
- -
- -``` - -For further reference, check out existing templates. - -
## Contribute -Feel free to create your own templates. Please read this documentation carefully. After adding your template please add a preview of the template to the readme. Place .png in `/public/preview`. +Feel free to create your own templates or help in fixing issues. To find out how to add your own templates, please read [the guide](/docs/Docs.md) carefully. diff --git a/docs/Contribute.md b/docs/Contribute.md new file mode 100644 index 0000000..9b2bcaf --- /dev/null +++ b/docs/Contribute.md @@ -0,0 +1,85 @@ + +### Icons + +This project contains the [Google Material](https://material.io/icons/) and [fontawesome](http://fontawesome.io/icons/) icon sets. + +
+ +### CSS3 Box-Shadows + +Due to this [Chrome bug](http://stackoverflow.com/questions/13975198/text-shadow-and-box-shadow-while-printing-chrome), CSS3 box-shadows are not rendered properly in the PDF files. The solution is to add this styling to elements with box-shadows: + +```css +-webkit-print-color-adjust:exact; +-webkit-filter:opacity(1); +``` + +Unfortunately, fonts and images get blurred and lose quality. Therefore `fixBoxShadows()` in `/src/javascript.js` fixes this bug, by + +1. searching for all elements with a box-shadow, +2. removing the box-shadow, +3. adding a new and absolute positioned element (with same size, position, border-radius and box-shadow) to the HTMl body, +4. and adding the stylings for `-webkit-print-color-adjust` and `-webkit-filter` to the new element. + +If shadows may be displayed wrong, please check that the element with a box-shadow has a proper height, width and positioning. + +
+ +### Adding fonts + +To add a font to the project, search for the npm-module of the desired font, e.g. [roboto-fontface](https://www.npmjs.com/package/roboto-fontface) for 'Roboto'. Add dependency to `package.json` with `npm i --save`, e.g. `npm i --save roboto-fontface`. + +Create a new less file in `/less/fonts`, e.g. 'roboto.less'. `/node_modules` are accessable through localhost:3000. That means if the corresponding woff-file is under `/node_modules/roboto-fontface/anyFont.woff` the source url needs to equal `/roboto-fontface/anyFont.woff`: + +```less +@font-face { + font-family: 'Roboto'; + src: url('/roboto-fontface/fonts/Roboto/Roboto-Thin.eot'); + src: local('Roboto Thin'), local('Roboto-Thin'), url('/roboto-fontface/fonts/Roboto/Roboto-Thin.woff') format('woff'), url('/roboto-fontface/fonts/Roboto/Roboto-Thin.ttf') format('truetype') + font-weight: 100; + font-style: normal; +} +``` + +Import new less file in `/less/fonts.less`: + +```less +@import "fonts/opensans.less"; +@import "fonts/montserrat.less"; +@import "fonts/raleway.less"; +@import "fonts/opensans-condensed.less"; +@import "fonts/material-design-icons.less"; +@import "fonts/roboto.less"; +``` + +
+ +## Adding a template + +Follow these steps: +- add folder in resumes, convention: 'resume-X' +- add `style.less` and `index.mustache` with same naming inside new folder + +Sample content of `index.mustache`: +```html + +
+ +
+ +``` + +For further reference, check out existing templates. + +
+ +[electroshot](https://github.com/mixu/electroshot) is used to generate PDFs. `convertToPdf()` in `/src/htmlToPdf.js` runs a short bash script for each resume running under `localhost:3000/resumes/resume-X`. By default the PDF size is A4. For more PDF settings check [mixu/electroshot](https://github.com/mixu/electroshot). + + +### Adjusting stylings and layout + +This project uses LESS. Under `/less` global stylings are defined. You will find here imported fonts and the page layout. + +Each resume has its own directory. For example 'resume-1' is under `/resumes/resume-1`. Each resume directory contains a Mustache template and a less-file. + +
diff --git a/docs/Docs.md b/docs/Docs.md new file mode 100644 index 0000000..460c12f --- /dev/null +++ b/docs/Docs.md @@ -0,0 +1,74 @@ + +### Icons + +This project contains the [Google Material](https://material.io/icons/) and [fontawesome](http://fontawesome.io/icons/) icon sets. + +
+ +### CSS3 Box-Shadows + +Due to this [Chrome bug](http://stackoverflow.com/questions/13975198/text-shadow-and-box-shadow-while-printing-chrome), CSS3 box-shadows are not rendered properly in the PDF files. The solution is to add this styling to elements with box-shadows: + +```css +-webkit-print-color-adjust:exact; +-webkit-filter:opacity(1); +``` + +Unfortunately, fonts and images get blurred and lose quality. Therefore `fixBoxShadows()` in `/src/javascript.js` fixes this bug, by + +1. searching for all elements with a box-shadow, +2. removing the box-shadow, +3. adding a new and absolute positioned element (with same size, position, border-radius and box-shadow) to the HTMl body, +4. and adding the stylings for `-webkit-print-color-adjust` and `-webkit-filter` to the new element. + +If shadows may be displayed wrong, please check that the element with a box-shadow has a proper height, width and positioning. + +
+ +### Adding fonts + +To add a font to the project, search for the npm-module of the desired font, e.g. [roboto-fontface](https://www.npmjs.com/package/roboto-fontface) for 'Roboto'. Add dependency to `package.json` with `npm i --save`, e.g. `npm i --save roboto-fontface`. + +Create a new less file in `/less/fonts`, e.g. 'roboto.less'. `/node_modules` are accessable through localhost:3000. That means if the corresponding woff-file is under `/node_modules/roboto-fontface/anyFont.woff` the source url needs to equal `/roboto-fontface/anyFont.woff`: + +```less +@font-face { + font-family: 'Roboto'; + src: url('/roboto-fontface/fonts/Roboto/Roboto-Thin.eot'); + src: local('Roboto Thin'), local('Roboto-Thin'), url('/roboto-fontface/fonts/Roboto/Roboto-Thin.woff') format('woff'), url('/roboto-fontface/fonts/Roboto/Roboto-Thin.ttf') format('truetype') + font-weight: 100; + font-style: normal; +} +``` + +Import new less file in `/less/fonts.less`: + +```less +@import "fonts/opensans.less"; +@import "fonts/montserrat.less"; +@import "fonts/raleway.less"; +@import "fonts/opensans-condensed.less"; +@import "fonts/material-design-icons.less"; +@import "fonts/roboto.less"; +``` + +
+ +## Adding a template + +Follow these steps: +- add folder in resumes, convention: 'resume-X' +- add `style.less` and `index.mustache` with same naming inside new folder + +Sample content of `index.mustache`: +```html + +
+ +
+ +``` + +For further reference, check out existing templates. + +