TheThomaas/11ty-resume
1
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

Merge branch 'pdf'

Browse source
This commit is contained in:
TheThomaas 2025-05-01 17:06:20 +02:00
parent 1a4ad2d736 d8347ec473
commit 8a3940b966
14 changed files with 1338 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
_config/eleventy-plugin-pdf.js Normal file
View file

@ -0,0 +1,38 @@
import PuppeteerHTMLPDF from "puppeteer-html-pdf";
import { nanoid } from 'nanoid'
import fs from 'fs';
let config = {}
export default function (eleventyConfig, pluginOptions) {
config = pluginOptions;
eleventyConfig.addTransform("toPDF", transformPDF);
};
const transformPDF = async function(content) {
if (this.outputPath && this.outputPath.toLowerCase().endsWith('.pdf')) {
let htmlFile = `./${config.tempDir || "dist"}/${nanoid()}.html`;
let pdfFile = `./${config.tempDir || "dist"}/${nanoid()}.pdf`;
fs.writeFileSync(htmlFile, content);
const htmlPDF = new PuppeteerHTMLPDF();
const options = {
format: config.format || "A4",
margin: config.margin || {
top: "1cm",
right: "1.25cm",
bottom: "1cm",
left: "1.25cm",
},
path: pdfFile, // you can pass path to save the file
};
htmlPDF.setOptions(options);
const pdfContent = await htmlPDF.readFile(htmlFile, "utf8");
await htmlPDF.create(pdfContent);
let contents = fs.readFileSync(pdfFile, 'binary');
fs.unlinkSync(htmlFile); fs.unlinkSync(pdfFile);
return Buffer.from(contents,'binary');
} else return content;
};

4
eleventy.config.js
View file

@ -1,5 +1,6 @@
import { inspect } from "util";
import pluginIcons from 'eleventy-plugin-icons';
import eleventyPDF from "./_config/eleventy-plugin-pdf.js";
export default async function (eleventyConfig) {
eleventyConfig.setUseGitIgnore(false);
@ -7,6 +8,7 @@ export default async function (eleventyConfig) {
eleventyConfig.addPassthroughCopy({"./src/_includes/js/" : "/js"});
eleventyConfig.addLayoutAlias('base', 'layouts/base.html');
eleventyConfig.addLayoutAlias('pdf', 'layouts/pdf.html');
eleventyConfig.addCollection("sections", (collectionApi) => {
const sections = collectionApi.getFilteredByGlob("./src/pages/sections/**")
@ -26,6 +28,8 @@ export default async function (eleventyConfig) {
.sort((a, b) => a.data.startDate - b.data.startDate).reverse();
});
eleventyConfig.addPlugin(eleventyPDF);
eleventyConfig.addPassthroughCopy('src/favicon.ico')
eleventyConfig.addPlugin(pluginIcons, {

1096
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

4
package.json
View file

@ -14,6 +14,8 @@
"devDependencies": {
"@11ty/eleventy": "^3.0.0",
"eleventy-plugin-icons": "^4.5.3",
"lucide-static": "^0.503.0"
"lucide-static": "^0.503.0",
"nanoid": "^5.1.5",
"puppeteer-html-pdf": "^4.0.8"
}
}

109
src/_includes/layouts/pdf.html Normal file
View file

@ -0,0 +1,109 @@
<!DOCTYPE html>
<html lang={{ site.lang }} >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
{% block content %}
{{ content }}
{% endblock %}
<style>
:root {
--accent-color: blue;
--font-body: Arial, sans-serif;
--font-display: 'Times New Roman', Times, serif;
}
html {
font-family: var(--font-body, Arial, sans-serif);
margin: 0;
}
body {
margin: 0;
}
*, ::before, ::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h1 {
text-align:center;
font-family: var(--font-display, 'Times New Roman', Times, serif);
font-size: 2rem;
margin: 0;
line-height: 1.6;
}
h2 {
color : var(--accent-color, blue);
}
p {
margin: 0;
}
ul {
margin: 0;
}
li::marker {
color: var(--accent-color, blue);
}
section {margin-bottom: 1.2rem;}
.justify-center {
justify-content: center;
}
.underline {
text-decoration: underline;
}
.list-inline {
display: flex;
align-items: center;
padding: 0;
margin: 0;
gap: .8rem;
}
.list-inline li {
display: contents;
}
.list-inline li + li::before {
content: '|';
}
.title {
display: flex;
gap: .8rem;
margin-bottom: .6rem;
}
.title h2 {
margin: 0;
}
.title hr {
align-self: center;
flex: 1 0 auto;
}
section ul {padding: 0;margin-left: 1.2rem;}
.subtitle {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-content: space-between;
align-items: center;
justify-items: center;
margin-inline: 1rem;
margin-bottom: .4rem;
}
.subtitle .timeSection { font-size: .9rem; }
.subtitle h3,
.subtitle p { margin: 0; }
.subtitle > :first-child {justify-self: start;}
.subtitle > :last-child {justify-self: end;}
.subtitle + ul {font-size: .9rem;}
.subtitle ~ .subtitle {margin-top: 1rem;}
</style>
</body>
</html>

33
src/_includes/partials/components/pdf/section.liquid Normal file
View file

@ -0,0 +1,33 @@
<section>
{% if section.data.showTitle != false %}
<div class="title">
<h2>
{% if section.data.displayedTitle %}
{{ section.data.displayedTitle }}
{% else %}
{{ section.data.title }}
{% endif %}
</h2>
<hr>
</div>
{% endif %}
{% for item in items %}
<div class="subtitle">
<h3>{{ item.data.title }}</h3>
<p class="underline">
<strong>{{ item.data.role }}</strong>
</p>
{% if item.data.dates %}
<div class="timeSection">
<span>{{ item.data.location }}</span>
<strong>{{ item.data.dates.start }} - {{ item.data.dates.end }}</strong>
</div>
{% endif %}
</div>
<ul>
<li>{{ item.data.description }}</li>
</ul>
{% endfor %}
</section>

4
src/experiences/artionet-stage.md
View file

@ -1,8 +1,12 @@
---
title: Artionet - Web Agency
role: Stagiaire
description: Stage de 4ème année de CFC, développement web
location: Delémont
link: https://www.artionet.ch
dates:
start: 2021
end: 2022
startDate: 2021
endDate: 2022
---

4
src/experiences/artionet.md
View file

@ -1,8 +1,12 @@
---
title: Artionet - Web Agency
role: Développeur
description: Développeur Front-End et Support Client
location: Delémont
link: https://www.artionet.ch
dates:
start: 2022
end: Present
startDate: 2022
endDate: 2024
---

4
src/experiences/emt.md
View file

@ -1,7 +1,11 @@
---
title: Ecole des métiers Technique
role: Etudiant
description: CFC d'informaticien d'entreprise
location: Porrentruy
dates:
start: 2018
end: 2022
startDate: 2018
endDate: 2022
---

1
src/pages/sections/download.liquid
View file

@ -1,6 +1,7 @@
---
title: Téléchargement
showTitle: false
excludeFromPdf: true
order: 4
---

3
src/pages/sections/experiences.liquid
View file

@ -1,8 +1,9 @@
---
title: Expériences
displayedTitle: Mes expériences
collection: experiences
order: 3
---
{% assign experiences = collections.experiences %}
{% assign experiences = collections[collection] %}
{% render 'partials/components/timeline', timeline: experiences %}

1
src/pages/sections/hero.liquid
View file

@ -2,6 +2,7 @@
title: A propos
order: 0
template: 'hero'
excludeFromPdf: true
eleventyComputed:
description: "{{ author.about }}"
displayedTitle: "Moi c'est {{ author.firstName }}<br>Et je suis {{ author.occupation }}"

3
src/pages/sections/projects.liquid
View file

@ -1,8 +1,9 @@
---
title: Projets
displayedTitle: Mes projets
collection: projects
order: 2
---
{% assign projects = collections.projects %}
{% assign projects = collections[collection] %}
{% include 'partials/components/project-grid' %}

38
src/pdf.liquid Normal file
View file

@ -0,0 +1,38 @@
---
layout: pdf
permalink: "pdf.pdf"
eleventyComputed:
title: "{{author.firstName}} {{author.name}}, {{author.occupation}}"
links:
- value: "thomas@amstutz.it"
- type: "link"
value: "github.com/TheThomaas"
- value: "123 123 12 12"
- type: "link"
value: "amstutz.it"
---
<section>
<h1>{{ title }}</h1>
<ul class="list-inline justify-center">
{% for item in links %}
{% if item.type == "link" %}
<li><a href="{{item.value}}">{{item.value}}</a></li>
{% else %}
<li>{{item.value}}</li>
{% endif %}
{% endfor %}
</ul>
</section>
<p>
The time is {{ "now" | date: "%Y-%m-%d %H:%M" }}
</p>
{% for section in collections.sections %}
{% if section.data.excludeFromPdf != true %}
{% assign items = collections[section.data.collection] %}
{% include 'partials/components/pdf/section' %}
{% endif %}
{% endfor %}