Add docs about pdf generation and data transformation
This commit is contained in:
parent
52227563c6
commit
c2674ead18
10 changed files with 97 additions and 9 deletions
BIN
docs/.gitbook/assets/device-dimensions.png
Normal file
BIN
docs/.gitbook/assets/device-dimensions.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
BIN
docs/.gitbook/assets/device-mode.png
Normal file
BIN
docs/.gitbook/assets/device-mode.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
|
|
@ -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
|
||||
|
||||
|
|
|
|||
48
docs/data-transformation.md
Normal file
48
docs/data-transformation.md
Normal 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
42
docs/pdf-generation.md
Normal 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.
|
||||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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 .",
|
||||
|
|
|
|||
BIN
public/cv.pdf
BIN
public/cv.pdf
Binary file not shown.
|
|
@ -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;
|
||||
---
|
||||
|
|
|
|||
Loading…
Reference in a new issue