Generate PDF automatically
This commit is contained in:
parent
0f57a2c305
commit
e31c7ef854
6 changed files with 1502 additions and 132 deletions
4
README
4
README
|
|
@ -1,4 +1,4 @@
|
|||
1. npm run build or node.index.js
|
||||
1. npm run build or node index.js
|
||||
2. copy ./pub to public url
|
||||
|
||||
Use "print to PDF" to sync PDF file manually.
|
||||
Use "print to PDF" to sync PDF file manually if needed.
|
||||
|
|
|
|||
Binary file not shown.
276
assets/cv.css
276
assets/cv.css
|
|
@ -1,123 +1,132 @@
|
|||
html {
|
||||
font: normal small/1.5 apple-system, system-ui, BlinkMacSystemFont, Segoe UI,
|
||||
Roboto, Helvetica Neue, Arial, sans-serif;
|
||||
background-color: var(--bg-color, #fff);
|
||||
color: var(--bg-color, #444);
|
||||
font:
|
||||
normal small/1.5 apple-system,
|
||||
system-ui,
|
||||
BlinkMacSystemFont,
|
||||
Segoe UI,
|
||||
Roboto,
|
||||
Helvetica Neue,
|
||||
Arial,
|
||||
sans-serif;
|
||||
background-color: var(--bg-color, #fff);
|
||||
color: var(--bg-color, #444);
|
||||
}
|
||||
body {
|
||||
font-size: clamp(0.9em, 1.5vw, 1.4em);
|
||||
font-size: clamp(0.9em, 1.5vw, 1.4em);
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
padding-left: 1em;
|
||||
margin: 0;
|
||||
padding-left: 1em;
|
||||
}
|
||||
h1 {
|
||||
margin-bottom: 0;
|
||||
font-size: 3em;
|
||||
line-height: 1;
|
||||
margin-bottom: 0;
|
||||
font-size: 3em;
|
||||
line-height: 1;
|
||||
}
|
||||
h2 {
|
||||
border-bottom: 0.3em solid #e3e3e3;
|
||||
padding-bottom: 0.25em;
|
||||
margin-bottom: 1em;
|
||||
border-bottom: 0.3em solid #e3e3e3;
|
||||
padding-bottom: 0.25em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
figure {
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
}
|
||||
a {
|
||||
color: var(--bg-color, #444);
|
||||
transition: background-color 0.3s ease-out, border-bottom-color 0.3s ease-out;
|
||||
color: var(--bg-color, #444);
|
||||
transition:
|
||||
background-color 0.3s ease-out,
|
||||
border-bottom-color 0.3s ease-out;
|
||||
}
|
||||
p:first-child {
|
||||
margin-top: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
a:link,
|
||||
a:visited {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid #bbb;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid #bbb;
|
||||
}
|
||||
a:hover,
|
||||
a:focus {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border-bottom-color: #000;
|
||||
color: #000;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border-bottom-color: #000;
|
||||
color: #000;
|
||||
}
|
||||
a:active {
|
||||
transform: translate(3px, 3px);
|
||||
transform: translate(3px, 3px);
|
||||
}
|
||||
[href^="tel"]::before {
|
||||
content: "📞 ";
|
||||
content: "📞 ";
|
||||
}
|
||||
[href^="mailto"]::before {
|
||||
content: "✉️ ";
|
||||
content: "✉️ ";
|
||||
}
|
||||
[href^="https://github.com"]::before
|
||||
{
|
||||
content: "🐙 ";
|
||||
content: "🐙 ";
|
||||
}
|
||||
[href^="https://madr"]::before
|
||||
{
|
||||
content: "🏠 ";
|
||||
content: "🏠 ";
|
||||
}
|
||||
[href$="pdf"] {
|
||||
font-size: 1.1em;
|
||||
padding: 0.3em;
|
||||
font-size: 1.1em;
|
||||
padding: 0.3em;
|
||||
}
|
||||
[href$="pdf"]::before {
|
||||
content: "📑 ";
|
||||
content: "📑 ";
|
||||
}
|
||||
[href$="pdf"]:hover::before,
|
||||
[href$="pdf"]:focus::before {
|
||||
background-color: rgba(0, 255, 0, 0.2);
|
||||
background-color: rgba(0, 255, 0, 0.2);
|
||||
}
|
||||
[role="doc-subtitle"] {
|
||||
font-size: 1.25em;
|
||||
color: #666;
|
||||
font-size: 1.25em;
|
||||
color: #666;
|
||||
}
|
||||
@media (min-width: 40em) {
|
||||
.h-aside {
|
||||
border-bottom: 0;
|
||||
font-size: 1.4em;
|
||||
margin-bottom: 0;
|
||||
margin-top: 1.95em;
|
||||
}
|
||||
.h-aside {
|
||||
border-bottom: 0;
|
||||
font-size: 1.4em;
|
||||
margin-bottom: 0;
|
||||
margin-top: 1.95em;
|
||||
}
|
||||
}
|
||||
.contact {
|
||||
margin: 1em 0;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2em;
|
||||
margin: 1em 0;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2em;
|
||||
}
|
||||
@media (min-width: 40em) {
|
||||
.contact {
|
||||
margin: 0.5em 0 0;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 2em;
|
||||
}
|
||||
.contact {
|
||||
margin: 0.5em 0 0;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 2em;
|
||||
}
|
||||
}
|
||||
.contact > dd {
|
||||
margin-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
.contact > dt {
|
||||
position: absolute;
|
||||
left: -9999em;
|
||||
position: absolute;
|
||||
left: -9999em;
|
||||
}
|
||||
.skillset {
|
||||
display: grid;
|
||||
gap: 0.5em 1em;
|
||||
grid-template-columns: auto 1fr;
|
||||
display: grid;
|
||||
gap: 0.5em 1em;
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
.skillset > dt {
|
||||
font-weight: bold;
|
||||
font-weight: bold;
|
||||
}
|
||||
.skillset > dd {
|
||||
margin-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
/*
|
||||
Left for good measure, could have been gold if
|
||||
|
|
@ -133,114 +142,125 @@ the upcoming Container queries was a thing.
|
|||
}
|
||||
*/
|
||||
.resume {
|
||||
max-width: 70em;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas:
|
||||
"name"
|
||||
"about"
|
||||
"skills"
|
||||
"work"
|
||||
"education"
|
||||
"projects"
|
||||
"courses"
|
||||
"personal";
|
||||
gap: 0;
|
||||
max-width: 70em;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas:
|
||||
"name"
|
||||
"about"
|
||||
"skills"
|
||||
"work"
|
||||
"education"
|
||||
"projects"
|
||||
"courses"
|
||||
"personal";
|
||||
gap: 0;
|
||||
}
|
||||
@media (min-width: 40em) {
|
||||
.resume {
|
||||
grid-template-columns: 2fr 1fr;
|
||||
grid-template-areas:
|
||||
"name name"
|
||||
"skills about"
|
||||
"work work"
|
||||
"education courses"
|
||||
"projects personal";
|
||||
gap: 2em;
|
||||
}
|
||||
.resume {
|
||||
grid-template-columns: 2fr 1fr;
|
||||
grid-template-areas:
|
||||
"name name"
|
||||
"skills about"
|
||||
"work work"
|
||||
"education courses"
|
||||
"projects personal";
|
||||
gap: 2em;
|
||||
}
|
||||
}
|
||||
.name {
|
||||
grid-area: name;
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
grid-area: name;
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.photo {
|
||||
grid-area: photo;
|
||||
grid-area: photo;
|
||||
}
|
||||
.work {
|
||||
grid-area: work;
|
||||
grid-area: work;
|
||||
}
|
||||
.courses {
|
||||
grid-area: courses;
|
||||
grid-area: courses;
|
||||
}
|
||||
.personal {
|
||||
grid-area: personal;
|
||||
grid-area: personal;
|
||||
}
|
||||
.about {
|
||||
grid-area: about;
|
||||
background: #f1f1f1;
|
||||
border-radius: 0.2em;
|
||||
padding: 1em;
|
||||
color: #111;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
grid-area: about;
|
||||
background: #f1f1f1;
|
||||
border-radius: 0.2em;
|
||||
padding: 1em;
|
||||
color: #111;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.education {
|
||||
grid-area: education;
|
||||
grid-area: education;
|
||||
}
|
||||
.projects {
|
||||
grid-area: projects;
|
||||
grid-area: projects;
|
||||
}
|
||||
.skills {
|
||||
grid-area: skills;
|
||||
grid-area: skills;
|
||||
}
|
||||
|
||||
.event {
|
||||
display: grid;
|
||||
gap: 0.5em 0.5em;
|
||||
margin: 2em 0;
|
||||
line-height: 1;
|
||||
display: grid;
|
||||
gap: 0.5em 0.5em;
|
||||
margin: 2em 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.event--aside {
|
||||
margin: 1em 0;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.event__title {
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.event__position {
|
||||
font-variant: small-caps;
|
||||
font-variant: small-caps;
|
||||
}
|
||||
.event__content {
|
||||
line-height: 1.5;
|
||||
padding-top: 0.5em;
|
||||
grid-column: 1 / 3;
|
||||
line-height: 1.5;
|
||||
padding-top: 0.5em;
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
.event__aside {
|
||||
text-align: right;
|
||||
font-style: italic;
|
||||
text-align: right;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@page {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
size: A4 portrait;
|
||||
padding: 2cm 0;
|
||||
margin: 0;
|
||||
size: A4 portrait;
|
||||
}
|
||||
|
||||
@media print {
|
||||
body {
|
||||
padding: 1cm;
|
||||
}
|
||||
body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
[href$="pdf"] {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
[href$="pdf"] {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
border: none !important;
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.education,
|
||||
.projects,
|
||||
.work {
|
||||
page-break-before: always;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
17
index.js
17
index.js
|
|
@ -4,6 +4,22 @@ var layouts = require("metalsmith-layouts");
|
|||
var markdown = require("metalsmith-markdown-remarkable");
|
||||
var permalinks = require("@metalsmith/permalinks");
|
||||
var static = require("metalsmith-static");
|
||||
var puppeteer = require("puppeteer");
|
||||
|
||||
var srcHTML = "file:" + __dirname + "/pub/index.html";
|
||||
var destPDF = "./pub/cv-anders-englof-ytterstrom.pdf";
|
||||
|
||||
async function generatePDF() {
|
||||
const browser = await puppeteer.launch();
|
||||
const page = await browser.newPage();
|
||||
await page.goto(srcHTML, {
|
||||
waitUntil: "networkidle2",
|
||||
});
|
||||
await page.pdf({
|
||||
path: destPDF,
|
||||
});
|
||||
await browser.close();
|
||||
}
|
||||
|
||||
Metalsmith(__dirname)
|
||||
.source("./src")
|
||||
|
|
@ -31,4 +47,5 @@ Metalsmith(__dirname)
|
|||
if (err) {
|
||||
throw err;
|
||||
}
|
||||
generatePDF();
|
||||
});
|
||||
|
|
|
|||
1334
package-lock.json
generated
1334
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -11,6 +11,7 @@
|
|||
"metalsmith-html-minifier": "^3.0.3",
|
||||
"metalsmith-layouts": "^1.4.1",
|
||||
"metalsmith-markdown-remarkable": "^1.0.2",
|
||||
"metalsmith-static": "0.0.5"
|
||||
"metalsmith-static": "0.0.5",
|
||||
"puppeteer": "^23.6.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue