107 lines
2.9 KiB
Markdown
107 lines
2.9 KiB
Markdown
# 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`
|
||
```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:
|
||
```sh
|
||
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`)
|
||
```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)
|
||
```html
|
||
<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):
|
||
```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. |