Create templates for the pdf file

This commit is contained in:
TheThomaas 2025-04-25 16:35:34 +02:00
parent 03314d4c1c
commit 666a8f643e
3 changed files with 57 additions and 122 deletions

View file

@ -8,118 +8,10 @@
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
</head> </head>
<body> <body>
<section>
<h1>{{ title }}</h1>
<ul class="list-inline justify-center">
<li><a href="https://google.com">Lorem ipsum dolor sit</a></li>
<li>Lorem ipsum</li>
<li><a href="https://google.com">Lorem ipsum dolor sit</a></li>
<li>Lorem ipsum</li>
</ul>
</section>
{% block content %} {% block content %}
{{ content }} {{ content }}
{% endblock %} {% endblock %}
<section>
<div class="title">
<h2>Lorem</h2>
<hr>
</div>
<ul>
<li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum. Nemo illum amet voluptatibus assumenda sunt eaque quas</p></li>
<li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum. Nemo illum amet voluptatibus assumenda sunt eaque quas, ipsa officia ut mollitia veniam.</p></li>
<li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum.</p></li>
</ul>
</section>
<section>
<div class="title">
<h2>Lorem</h2>
<hr>
</div>
<div class="subtitle">
<h3>Lorem ipsum</h3>
<p class="underline">
<strong>Lorem ipsum</strong>
</p>
<div class="timeSection">
<span>Lorem ipsum</span>
<strong>01/1999 - 02/1999</strong>
</div>
</div>
<ul>
<li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum. Nemo illum amet voluptatibus assumenda sunt eaque quas, ipsa officia ut mollitia veniam.</p></li>
<li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum. Nemo illum amet voluptatibus assumenda sunt eaque quas</p></li>
</ul>
<div class="subtitle">
<h3>Lorem ipsum</h3>
<p class="underline">
<strong>Lorem ipsum</strong>
</p>
<div class="timeSection">
<span>Lorem ipsum</span>
<strong>01/1999 - 02/1999</strong>
</div>
</div>
<ul>
<li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum.</p></li>
<li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum. Nemo illum amet voluptatibus assumenda sunt eaque quas, ipsa officia ut mollitia veniam.</p></li>
<li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum. Nemo illum amet voluptatibus assumenda sunt eaque quas</p></li>
</ul>
<div class="subtitle">
<h3>Lorem ipsum</h3>
<p class="underline">
<strong>Lorem ipsum</strong>
</p>
<div class="timeSection">
<span>Lorem ipsum</span>
<strong>01/1999 - 02/1999</strong>
</div>
</div>
<ul>
<li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum. Nemo illum amet voluptatibus assumenda sunt eaque quas, ipsa officia ut mollitia veniam.</p></li>
<li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum. Nemo illum amet voluptatibus assumenda sunt eaque quas</p></li>
<li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum. Nemo illum amet voluptatibus assumenda sunt eaque quas, ipsa officia ut mollitia veniam.</p></li>
<li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p></li>
<li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum.</p></li>
</ul>
</section>
<section>
<div class="title">
<h2>Lorem</h2>
<hr>
</div>
<div class="subtitle">
<h3>Lorem ipsum 2</h3>
<p class="underline">
<strong>Lorem ipsum</strong>
</p>
<div class="timeSection">
<span>Lorem ipsum</span>
<strong>01/1999 - 02/1999</strong>
</div>
</div>
<ul>
<li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum. Nemo illum amet voluptatibus assumenda sunt eaque quas, ipsa officia ut mollitia veniam.</p></li>
</ul>
</section>
<section>
<div class="title">
<h2>Lorem</h2>
<hr>
</div>
<ul>
<li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p></li>
<li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum. Nemo illum amet voluptatibus assumenda sunt eaque quas</p></li>
<li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum. Nemo illum amet voluptatibus assumenda sunt eaque quas, ipsa officia ut mollitia veniam.</p></li>
<li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum.</p></li>
</ul>
</section>
<style> <style>
:root { :root {
--accent-color: blue; --accent-color: blue;

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>

View file

@ -1,14 +1,27 @@
--- ---
layout: pdf layout: pdf
title: Test PDF
permalink: "pdf.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"
--- ---
<h1>Hello</h1> <section>
<h1>{{ title }}</h1>
<p> <ul class="list-inline justify-center">
<img src="https://place-hold.it/400x400"> {% for item in links %}
</p> {% if item.type == "link" %}
<li><a href="{{item.value}}">{{item.value}}</a></li>
{% else %}
<li>{{item.value}}</li>
{% endif %}
{% endfor %}
</ul>
</section>
<p> <p>
The time is {{ "now" | date: "%Y-%m-%d %H:%M" }} The time is {{ "now" | date: "%Y-%m-%d %H:%M" }}
@ -17,10 +30,7 @@ The time is {{ "now" | date: "%Y-%m-%d %H:%M" }}
{% for section in collections.sections %} {% for section in collections.sections %}
{% if section.data.excludeFromPdf != true %} {% if section.data.excludeFromPdf != true %}
{% if section.data.template == 'hero' %} {% assign items = collections[section.data.collection] %}
{% include 'hero' %} {% include 'partials/components/pdf/section' %}
{% else %}
{% include 'page' %}
{% endif %}
{% endif %} {% endif %}
{% endfor %} {% endfor %}