Add docs about pdf generation and data transformation

This commit is contained in:
Konrad Szwarc 2023-01-28 19:49:01 +01:00
parent 52227563c6
commit c2674ead18
10 changed files with 97 additions and 9 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 91 KiB

View file

@ -1,7 +1,9 @@
# Table of contents
- [Introduction](README.md)
- [Quick setup guide](quick-setup-guide.md)
- [Setup guide](quick-setup-guide.md)
- [PDF generation](pdf-generation.md)
- [Data transformation](data-transformation.md)
## External links

View file

@ -0,0 +1,48 @@
# Data transformation
In some cases you may want to modify data between web and pdf versions of your resume or even create multiple variants of them. To address those needs while still providing single place for configuration we introduced a concept of data transformers.
When visiting `index.astro` (web resume source) or `pdf.astro` (pdf resume source) you can see that we use the `cv()` function to get data for a particular resume variant. By default `cv()` returns the entire configuration you specified within the `src/data` folder. However, you can modify this behavior by passing some data transformers into it.
For example:
```js
import cv, { hideProject, hideSkillSet, renameSkillSet } from '@/data';
cv(
// [skills] Skill set with name "I want to learn" won't be displayed
hideSkillSet('I want to learn'),
// [skills] Skill set named "I speak" will be renamed to "Languages"
renameSkillSet('I speak', 'Languages'),
// [portfolio] "Disco Ninjas" project won't be visible
hideProject('Disco Ninjas')
);
```
## Data transformers
### General
`hideSection(sectionKey)` — hides section with a specified key.
### Skills
`hideSkillSet(skillSetTitle)` — hides skill set with a specified title.
`renameSkillSet(from, to)` — changes name of a specified skill set (`from`) to a different one (`to`).
`hideSkills(skillSetTitle, skillNames[])` — finds the skill set by its title and hides all its skills matched by their name.
### Portfolio
`hideProject(projectName)` — hides project with a specified name.
### Experience
`hideJob(role, company?)` — hides job where you had a specified role. If you had same role in multiple companies, you can provide a precise company as the second parameter.
### Education
`hideDiploma(title, institution?)` — hides education record by its title. If you have multiple diplomas with the same title, you can provide a an institution name as the second parameter to narrow the filter.

42
docs/pdf-generation.md Normal file
View file

@ -0,0 +1,42 @@
# PDF generation
You can use DevsCard to generate a PDF version of your resume.
To do it, invoke the `npm run generate-pdf` command from the project's root and look to `public/cv.pdf` for the result.
## Customizing the data
PDF generation script takes data from the same files your web resume does. However, it applies a few modifications:
- For `main-section.data.ts` and projects in `portfolio-section.data.ts` you can define a separate property called `pdfDetails`. If specified, it will be used instead of the `details` to render label-value text paris.
- Value of the `links` property is ignored. If you want some URLs to be present in PDF, add them as `pdfDetails`.
- There are no testimonials and favorites sections.
You can also provide your own modifications using [data transformers](./data-transformation.md) in the `pdf.astro` file.
## Footer
Sometimes you need to put some text at the bottom of each PDF file (e.g. a data processing clause).
With DevsCard you can achieve it by providing the `pdf.footer` property in the `src/data/config.ts` file.
## Local testing
It might be tedious to run the generate command each time you want to see your changes.
Luckily, a few steps can give you a way to get a live preview of your changes.
1\. Invoke `npm run dev` to start local development server.
2\. Go to `http://localhost:3000/pdf`.
3\. Open developer tools and turn on the Device Mode by clicking the phone icon in the top left corner.
<figure><img src=".gitbook/assets/device-mode.png" alt=""><figcaption></figcaption></figure>
4\. Set device dimensions to 794x1122. Optionally you can save it as the A4 dimensions for further use.
<figure><img src=".gitbook/assets/device-dimensions.png" alt=""><figcaption></figcaption></figure>
5\. Edit any part of your data of `pdf.astro` to see changes live.
6\. When the result looks satisfying, invoke `npm run generate-pdf` to generate a new PDF file.

View file

@ -35,7 +35,7 @@ To fill the CV with your data, go to the `src/data` directory. There you should
## 3. Generate PDF (optional)
Within the main section, you will find an `action` property. It allows you to provide a pdf resume to download. If you don't have one, feel free to use our CV generator by invoking `npm run generate-cv`. Generated resume will be placed in `public/cv.pdf` and use the same data as the web one (without testimonials and favorites sections). To customize it, go to the \[PDF customization] docs.
Within the main section, you will find an `action` property. It allows you to provide a pdf resume to download. If you don't have one, feel free to use our CV generator by invoking `npm run generate-pdf`. Generated resume will be placed in `public/cv.pdf` and use the same data as the web one. You can learn more about PDF generation [here](./pdf-generation.md#).
## 4. Deploy to Netlify

View file

@ -13,7 +13,7 @@
"dev": "astro dev",
"build": "astro build",
"preview": "astro preview",
"generate-cv": "ts-node scripts/generate-cv.ts",
"generate-pdf": "ts-node scripts/generate-pdf.ts",
"generate-favicons": "ts-node scripts/generate-favicons.ts",
"prettier:check": "prettier --check .",
"prettier:write": "prettier --write .",

Binary file not shown.

View file

@ -7,13 +7,9 @@ import MainSection from '@/pdf/sections/main-section.pdf.astro';
import PortfolioSection from '@/pdf/sections/portfolio-section.pdf.astro';
import SkillsSection from '@/pdf/sections/skills-section.pdf.astro';
import cv, { hideProject, hideSkillSet, renameSkillSet } from '@/data';
import cv from '@/data';
const { config, sections } = cv(
hideSkillSet('I want to learn'),
renameSkillSet('I speak', 'Languages'),
hideProject('Disco Ninjas')
);
const { config, sections } = cv();
const shouldRenderSection = (section: keyof typeof sections) => sections[section] && sections[section].config.visible;
---