PDF generation with pdfkit

components/CvDynamicSection.vue

@@ -50,7 +50,7 @@ function focusEditor(id: string) {
               @click.stop="removeEntry({ sectionName, entry })"
             >
               <svg class="form__icon">
-                <use href="@/assets/sprite.svg#trash" />
+                <use href="/sprite.svg#trash" />
               </svg>
             </button>
           </template>

components/CvInputTags.vue

@@ -149,7 +149,7 @@ function onDrop() {
           @click="handleRemoveSkill(tag)"
         >
           <svg class="form__icon">
-            <use href="@/assets/sprite.svg#close" />
+            <use href="/sprite.svg#close" />
           </svg>
         </button>
       </li>

components/CvPreview.vue

@@ -23,6 +23,7 @@ const { formSettings, isLoading } = useCvState()
   >
     <div style="min-height: var(--height);">
       <div
+        id="cvPreview"
         tabindex="0"
         aria-label="CV preview"
         class="cv shadow-lg mt-6 bg-white relative"
@@ -151,7 +152,7 @@ p {
   }
 
   :deep(&__icon) {
-    @apply fill-current rounded;
+    @apply fill-current;
     width: 16px;
     height: 16px;
     min-width: 16px;

components/CvPreviewAbout.vue

@@ -8,11 +8,12 @@ const { formSettings } = useCvState()
   <section class="cv__section cv__section--main">
     <h4
       class="cv__section-title cv__section-title--main"
+      data-cv-elem="aboutmeTitle"
       :class="formSettings.layout === 'one-column' && 'sr-only'"
     >
       {{ $t("about-me") }}
     </h4>
-    <p class="font-light">
+    <p data-cv-elem="aboutmeText" class="font-light">
       <!-- Avoids unnecessary spaces at the begging while still allowing break lines -->
       <span class="whitespace-pre-wrap">{{ formSettings.aboutme }}</span>
     </p>

components/CvPreviewContact.vue

@@ -1,5 +1,8 @@
 <script lang="ts" setup>
 import { useCvState } from '~/data/useCvState'
+import EmailSvg from '~/assets/icons/PDF/email.svg'
+import PhoneSvg from '~/assets/icons/PDF/phone.svg'
+import LocationSvg from '~/assets/icons/PDF/location.svg'
 
 const { formSettings } = useCvState()
 
@@ -17,6 +20,7 @@ const phoneNumberHref = computed(() => {
     :class="formSettings.layout === 'one-column' && 'mt-0'"
   >
     <h4
+      data-cv-elem="contact"
       class="cv__section-title"
       :class="[{ 'sr-only': formSettings.layout === 'one-column' }]"
     >
@@ -28,23 +32,21 @@ const phoneNumberHref = computed(() => {
     >
       <div
         v-if="formSettings.email"
+        data-cv-elem="email"
         class="cv__icon-wrapper"
       >
-        <svg class="cv__icon">
-          <use href="@/assets/sprite.svg#email" />
-        </svg>
+        <EmailSvg class="cv__icon" />
         <a
           :href="emailHref"
           rel="noopener"
         >{{ formSettings.email }}</a>
       </div>
       <div
         v-if="formSettings.phoneNumber"
+        data-cv-elem="phoneNumber"
         class="cv__icon-wrapper"
       >
-        <svg class="cv__icon">
-          <use href="@/assets/sprite.svg#phone" />
-        </svg>
+        <PhoneSvg class="cv__icon" />
         <a
           :href="phoneNumberHref"
           rel="noopener"
@@ -54,11 +56,10 @@ const phoneNumberHref = computed(() => {
       </div>
       <div
         v-if="formSettings.location"
+        data-cv-elem="location"
         class="cv__icon-wrapper"
       >
-        <svg class="cv__icon">
-          <use href="@/assets/sprite.svg#location" />
-        </svg>
+        <LocationSvg class="cv__icon" />
         <span tabindex="0">{{ formSettings.location }}</span>
       </div>
     </div>

components/CvPreviewEducation.vue

@@ -18,19 +18,30 @@ const educationSorted = computed(() => {
     class="cv__section cv__section--main w-full"
   >
     <h4 class="cv__section-title cv__section-title--main">
-      {{ $t("education") }}
+      <span data-cv-elem="education">
+        {{ $t("education") }}
+      </span>
     </h4>
     <ul class="cv__event">
       <li
         v-for="edu in educationSorted"
         :key="edu.id"
       >
         <div class="grid grid-cols-3 gap-3">
-          <h5 class="cv__section-title cv__section-title--sm">
+          <h5
+            :data-cv-elem="`education${edu.id}Title`"
+            class="cv__section-title cv__section-title--sm"
+          >
             {{ edu.title }}
           </h5>
-          <span class="justify-self-center">{{ edu.location }}</span>
-          <span class="justify-self-end flex-shrink-0">
+          <span
+            :data-cv-elem="`education${edu.id}Location`"
+            class="justify-self-center"
+          >{{ edu.location }}</span>
+          <span
+            :data-cv-elem="`education${edu.id}Date`"
+            class="justify-self-end flex-shrink-0"
+          >
             {{ formatDate(edu.from) }} –
             <template v-if="edu.current">{{ $t("current")
             }}</template>

components/CvPreviewExperience.vue

@@ -15,19 +15,30 @@ const workSorted = computed(() => {
 <template>
   <section class="cv__section cv__section--main w-full">
     <h4 class="cv__section-title cv__section-title--main">
-      {{ $t("experience") }}
+      <span data-cv-elem="experience">
+        {{ $t("experience") }}
+      </span>
     </h4>
     <ul class="cv__event">
       <li
         v-for="job in workSorted"
         :key="job.id"
       >
         <div class="grid grid-cols-3 gap-3">
-          <h5 class="cv__section-title cv__section-title--sm">
+          <h5
+            :data-cv-elem="`work${job.id}Title`"
+            class="cv__section-title cv__section-title--sm"
+          >
             {{ job.title }}
           </h5>
-          <span class="justify-self-center">{{ job.location }}</span>
-          <span class="justify-self-end">
+          <span
+            :data-cv-elem="`work${job.id}Location`"
+            class="justify-self-center"
+          >{{ job.location }}</span>
+          <span
+            :data-cv-elem="`work${job.id}Date`"
+            class="justify-self-end"
+          >
             {{ formatDate(job.from) }} –
             <template v-if="job.current">{{ $t("current")
             }}</template>

components/CvPreviewLanguages.vue

@@ -5,18 +5,43 @@ const { formSettings } = useCvState()
 </script>
 
 <template>
-  <section class="cv__section">
-    <h4 class="cv__section-title">
+  <section
+    v-if="formSettings.displayLanguages"
+    data-cv-elem="languagesContainer"
+    class="cv__section"
+    :class="formSettings.layout === 'one-column' && 'flex gap-1 mb-1'"
+  >
+    <h3
+      data-cv-elem="languagesTitle"
+      class="capitalize"
+      :class="formSettings.layout === 'one-column' ? 'two-dots inline flex-shrink-0' : 'cv__section-title'"
+    >
       {{ $t("languages") }}
-    </h4>
-    <ul>
+    </h3>
+
+    <ul
+      :class="formSettings.layout === 'one-column' && 'flex flex-wrap break-words'"
+    >
       <li
         v-for="lang in formSettings.languages"
         :key="`preview${lang.lang}`"
-        class="flex justify-between pr-4"
+        :class="formSettings.layout === 'one-column' ? 'comma' : 'flex justify-between'"
       >
-        <span>{{ lang.lang }}</span>
-        <span class="font-light">{{ $t(lang.level) }}</span>
+        <span
+          :data-cv-elem="`${lang.lang}Lang`"
+          :class="formSettings.layout === 'one-column' && 'font-light'"
+        >
+          {{ lang.lang }}
+        </span>
+        <span
+          class="font-light"
+          :data-cv-elem="`${lang.lang}Level`"
+        >
+          <template v-if="formSettings.layout === 'one-column'">
+            (</template>{{
+            $t(lang.level)
+          }}<template v-if="formSettings.layout === 'one-column'">)</template>
+        </span>
       </li>
     </ul>
   </section>

components/CvPreviewName.vue

@@ -5,7 +5,7 @@ const { formSettings } = useCvState()
 </script>
 
 <template>
-  <h2 class="text-primary text-xl/normal uppercase font-bold tracking-wide">
+  <h2 data-cv-elem="name" class="text-primary text-xl/normal uppercase font-bold tracking-wide">
     {{ formSettings.name }} {{ formSettings.lastName }}
   </h2>
 </template>

components/CvPreviewProjects.vue

@@ -18,18 +18,23 @@ const formatDate = useFormatDate()
     class="cv__section cv__section--main w-full"
   >
     <h4 class="cv__section-title cv__section-title--main">
-      {{ $t("projects") }}
+      <span data-cv-elem="projects">
+        {{ $t("projects") }}
+      </span>
     </h4>
     <ul class="cv__event">
       <li
         v-for="project in projectsSorted"
         :key="project.id"
       >
         <div class="flex justify-between">
-          <h5 class="cv__section-title cv__section-title--sm">
+          <h5
+            :data-cv-elem="`projects${project.id}Title`"
+            class="cv__section-title cv__section-title--sm"
+          >
             {{ project.title }}
           </h5>
-          <span>
+          <span :data-cv-elem="`projects${project.id}Date`">
             {{ formatDate(project.from) }} –
             <template v-if="project.current">{{
               $t("current")

components/CvPreviewSkill.vue

@@ -5,6 +5,7 @@ defineProps<{
   display?: boolean
   skills: string[]
   skillName: string
+  skillTitle: string
   withTags?: boolean
 }>()
 
@@ -16,23 +17,29 @@ const { formSettings } = useCvState()
     v-if="display"
     class="cv__section"
     :class="formSettings.layout === 'one-column' && 'flex gap-1 mb-1'"
+    :data-cv-elem="`${skillName}Container`"
   >
     <h3
       class="capitalize"
       :class="formSettings.layout === 'one-column' ? 'two-dots inline flex-shrink-0' : 'cv__section-title'"
+      :data-cv-elem="`${skillName}Title`"
     >
-      {{ skillName }}
+      {{ skillTitle }}
     </h3>
     <ul
       class="font-light"
       :class="[{ 'flex flex-wrap': formSettings.layout === 'one-column' }, { cv__list: formSettings.layout !== 'one-column' && !withTags }, { cv__tags: withTags }]"
+      :data-cv-elem="`${skillName}Ul`"
     >
       <li
         v-for="skill in skills"
         :key="`preview${skill}`"
+        :data-cv-elem="`${skill}Li`"
         :class="[{ comma: formSettings.layout === 'one-column' }, { cv__tag: withTags }]"
       >
-        {{ skill }}
+        <span :data-cv-elem="`${skill}Text`">
+          {{ skill }}
+        </span>
       </li>
     </ul>
   </section>