Merge branch 'pdf'

Add link to the website to the pdf
Update content to fit the new templates
2025-05-01 17:06:20 +02:00 · 2025-04-29 20:50:24 +02:00 · 2025-04-25 16:36:01 +02:00 · 2025-04-25 16:35:34 +02:00 · 2025-04-24 14:25:31 +02:00 · 2025-04-24 14:24:55 +02:00
14 changed files with 1338 additions and 4 deletions
--- a/_config/eleventy-plugin-pdf.js
+++ b/_config/eleventy-plugin-pdf.js
@ -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;
+};
--- a/eleventy.config.js
+++ b/eleventy.config.js
@ -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, {
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -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"
  }
 }
--- a/src/_includes/layouts/pdf.html
+++ b/src/_includes/layouts/pdf.html
@ -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>
--- a/src/_includes/partials/components/pdf/section.liquid
+++ b/src/_includes/partials/components/pdf/section.liquid
@ -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>
--- a/src/experiences/artionet-stage.md
+++ b/src/experiences/artionet-stage.md
@ -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
 ---
--- a/src/experiences/artionet.md
+++ b/src/experiences/artionet.md
@ -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
 ---
--- a/src/experiences/emt.md
+++ b/src/experiences/emt.md
@ -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
 ---
--- a/src/pages/sections/download.liquid
+++ b/src/pages/sections/download.liquid
@ -1,6 +1,7 @@
 ---
 title: Téléchargement
 showTitle: false
+excludeFromPdf: true
 order: 4
 ---

--- a/src/pages/sections/experiences.liquid
+++ b/src/pages/sections/experiences.liquid
@ -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 %}
--- a/src/pages/sections/hero.liquid
+++ b/src/pages/sections/hero.liquid
@ -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 }}"
--- a/src/pages/sections/projects.liquid
+++ b/src/pages/sections/projects.liquid
@ -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' %}
--- a/src/pdf.liquid
+++ b/src/pdf.liquid
@ -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 %}
Author	SHA1	Message	Date
TheThomaas	8a3940b966	Merge branch 'pdf'	2025-05-01 17:06:20 +02:00
TheThomaas	d8347ec473	Add link to the website to the pdf	2025-04-29 20:50:24 +02:00
TheThomaas	945575a4d5	Update content to fit the new templates	2025-04-25 16:36:01 +02:00
TheThomaas	666a8f643e	Create templates for the pdf file	2025-04-25 16:35:34 +02:00
TheThomaas	03314d4c1c	Add template for the pdf file	2025-04-24 14:25:31 +02:00
TheThomaas	21c1f28994	Create plugin to generate pdf	2025-04-24 14:24:55 +02:00