documents/ipop.md

Workflow: Markdown → Gitea → HTTP + PDF

Aquest document explica com automatitzar la publicació d'informes d'orientació professional en un site estàtic, utilitzant Markdown, Gitea, hooks i generació de PDF.

1️⃣ Escriu el contingut en Markdown

Crea els teus informes IPOP en .md i puja'ls a un repositori de Gitea.

Exemple de informe.md

# Informe Personal d’Orientació Professional

## Joan Garcia

- **Àrees professionals:** Enginyeria, Disseny Gràfic
- **Competències destacades:** Anàlisi, Creativitat, Resolució de Problemes

---

2️⃣ Puja els fitxers a Gitea

Executa:

git add informe.md
git commit -m "Afegit informe Joan Garcia"
git push origin main

---

3️⃣ Automatització amb Gitea Webhooks

Quan es detecta un canvi en el repo, un hook automàtic executa el generador de site estàtic.

Exemple de Hook (gitea-hooks.sh)

#!/bin/bash
cd /var/www/informes
git pull origin main
hugo -D  # O jekyll build
systemctl restart nginx  # Si cal refrescar el servidor

Configura el webhook a Gitea per executar aquest script.

---

4️⃣ Site estàtic accessible via HTTP

Ara el teu site està publicat automàticament en:

• http://empresa.com/informes/joan-garcia
• http://intranet/informes/

Frameworks recomanats:

• Hugo → Lleuger i ràpid
• Jekyll → Suporta directament Markdown
• Eleventy → Molt flexible

---

5️⃣ Generació de PDFs sota demanda

Opcions per a la generació de PDF:

✅ Opció 1: Client-side (JavaScript - jsPDF)

<button id="pdf">Descarrega PDF</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<script>
document.getElementById('pdf').addEventListener('click', function () {
  var doc = new window.jspdf.jsPDF();
  doc.text(document.body.innerText, 10, 10);
  doc.save("informe.pdf");
});
</script>

✔️ No requereix backend, tot passa al navegador.

✅ Opció 2: Server-side (Puppeteer o Pandoc)

Generació amb Puppeteer (Node.js):

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://empresa.com/informes/joan-garcia', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'informe.pdf', format: 'A4'});
  await browser.close();
})();

✔️ Millor formatació, però requereix configuració de servidor.

---

🔁 Flux del Workflow

Markdown (Gitea Repo) --> Webhook --> Site Estàtic (Hugo/Jekyll) --> Web HTML
                                 \
                                  --> API PDF (Puppeteer o jsPDF)

📌 Conclusió

✅ Automatitzat: git push i la web s'actualitza sola.
✅ Offline-ready: HTML navegable + PDFs generats sota demanda.
✅ Eficient i segur: Sense bases de dades, tot en fitxers.