Skip to content

Commit dc4e40f

Browse files
aborrusoaborruso
committed
deploy: e2c0b63 
0 parents  commit dc4e40f

6 files changed

Lines changed: 1050 additions & 0 deletions

File tree

‎.nojekyll‎

Whitespace-only changes.

‎assets/README.md‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
# Assets - Immagini e Risorse
2+
3+
## Generare l'immagine Open Graph
4+
5+
### Metodo 1: Screenshot da Browser (Raccomandato)
6+
7+
1. Apri `og-image-generator.html` nel browser
8+
2. Imposta zoom al 100% (Ctrl+0 o Cmd+0)
9+
3. Premi F11 per fullscreen (o nascondi le istruzioni con il bottone)
10+
4. Fai screenshot della card blu centrata (1200x630px)
11+
- **Windows**: Windows + Shift + S (Snipping Tool)
12+
- **Mac**: Cmd + Shift + 4 (seleziona area)
13+
- **Linux**: Screenshot app con selezione area
14+
5. Salva come `og-image.png` in questa directory
15+
6. Commit e push
16+
17+
### Metodo 2: Tool Online
18+
19+
Puoi anche usare servizi online come:
20+
- [OG Image Generator](https://og-image.vercel.app/)
21+
- [Cloudinary Social Card Generator](https://cloudinary.com/tools/social-cards)
22+
- [Canva](https://www.canva.com/) (template 1200x630px)
23+
24+
### Metodo 3: Headless Browser (Automatico)
25+
26+
Se hai Node.js e Puppeteer:
27+
28+
```bash
29+
npm install -g puppeteer screenshot-cli
30+
screenshot-cli file://$(pwd)/og-image-generator.html og-image.png 1200x630
31+
```
32+
33+
## Specifiche Immagine
34+
35+
- **Formato**: PNG (preferito) o JPG
36+
- **Dimensioni**: 1200x630px (ratio 1.91:1)
37+
- **Peso massimo**: < 5MB (consigliato < 1MB)
38+
- **Colori**: RGB
39+
- **Nome file**: `og-image.png`
40+
41+
## Test OG Tags
42+
43+
Dopo aver caricato l'immagine su GitHub Pages, testa con:
44+
45+
- **Facebook**: https://developers.facebook.com/tools/debug/
46+
- **Twitter**: https://cards-dev.twitter.com/validator
47+
- **LinkedIn**: https://www.linkedin.com/post-inspector/
48+
49+
## File Assets
50+
51+
```
52+
assets/
53+
├── README.md # Questo file
54+
├── og-image-generator.html # Generatore HTML per OG image
55+
└── og-image.png # Immagine OG finale (da creare)
56+
```

‎assets/og-image-generator.html‎

Lines changed: 235 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
<!DOCTYPE html>
2+
<html lang="it">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>OG Image Generator - normattiva2md</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@700;800&display=swap" rel="stylesheet">
10+
<style>
11+
* {
12+
margin: 0;
13+
padding: 0;
14+
box-sizing: border-box;
15+
}
16+
17+
body {
18+
font-family: 'Inter', sans-serif;
19+
background: #000;
20+
display: flex;
21+
justify-content: center;
22+
align-items: center;
23+
min-height: 100vh;
24+
padding: 20px;
25+
}
26+
27+
.og-card {
28+
width: 1200px;
29+
height: 630px;
30+
background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
31+
position: relative;
32+
overflow: hidden;
33+
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
34+
}
35+
36+
/* Decorative elements */
37+
.decoration {
38+
position: absolute;
39+
border-radius: 50%;
40+
opacity: 0.1;
41+
}
42+
43+
.decoration-1 {
44+
width: 400px;
45+
height: 400px;
46+
background: white;
47+
top: -100px;
48+
right: -100px;
49+
}
50+
51+
.decoration-2 {
52+
width: 300px;
53+
height: 300px;
54+
background: white;
55+
bottom: -80px;
56+
left: -80px;
57+
}
58+
59+
.decoration-3 {
60+
width: 200px;
61+
height: 200px;
62+
background: rgba(255, 255, 255, 0.15);
63+
top: 50%;
64+
right: 15%;
65+
}
66+
67+
/* Content */
68+
.content {
69+
position: relative;
70+
z-index: 10;
71+
padding: 80px;
72+
display: flex;
73+
flex-direction: column;
74+
justify-content: center;
75+
height: 100%;
76+
}
77+
78+
.logo {
79+
display: flex;
80+
align-items: center;
81+
gap: 16px;
82+
margin-bottom: 60px;
83+
}
84+
85+
.logo-icon {
86+
width: 56px;
87+
height: 56px;
88+
background: rgba(255, 255, 255, 0.2);
89+
border-radius: 14px;
90+
display: flex;
91+
align-items: center;
92+
justify-content: center;
93+
backdrop-filter: blur(10px);
94+
}
95+
96+
.logo-icon svg {
97+
width: 32px;
98+
height: 32px;
99+
color: white;
100+
}
101+
102+
.logo-text {
103+
font-size: 32px;
104+
font-weight: 800;
105+
color: white;
106+
letter-spacing: -0.5px;
107+
}
108+
109+
h1 {
110+
font-size: 72px;
111+
font-weight: 800;
112+
color: white;
113+
line-height: 1.1;
114+
margin-bottom: 30px;
115+
letter-spacing: -1px;
116+
}
117+
118+
.subtitle {
119+
font-size: 32px;
120+
color: rgba(255, 255, 255, 0.9);
121+
line-height: 1.4;
122+
font-weight: 700;
123+
max-width: 900px;
124+
}
125+
126+
.badge {
127+
display: inline-flex;
128+
align-items: center;
129+
gap: 10px;
130+
background: rgba(255, 255, 255, 0.2);
131+
padding: 16px 28px;
132+
border-radius: 12px;
133+
font-size: 24px;
134+
font-weight: 700;
135+
color: white;
136+
margin-top: 50px;
137+
backdrop-filter: blur(10px);
138+
}
139+
140+
/* Instructions overlay */
141+
.instructions {
142+
position: fixed;
143+
top: 20px;
144+
left: 50%;
145+
transform: translateX(-50%);
146+
background: rgba(0, 0, 0, 0.9);
147+
color: white;
148+
padding: 20px 30px;
149+
border-radius: 12px;
150+
font-size: 16px;
151+
z-index: 1000;
152+
max-width: 600px;
153+
text-align: center;
154+
}
155+
156+
.instructions.hidden {
157+
display: none;
158+
}
159+
160+
.instructions button {
161+
margin-top: 15px;
162+
padding: 10px 20px;
163+
background: #2563eb;
164+
color: white;
165+
border: none;
166+
border-radius: 8px;
167+
font-size: 14px;
168+
font-weight: 600;
169+
cursor: pointer;
170+
}
171+
172+
.instructions button:hover {
173+
background: #1d4ed8;
174+
}
175+
</style>
176+
</head>
177+
<body>
178+
<!-- Instructions -->
179+
<div class="instructions" id="instructions">
180+
<strong>Istruzioni per creare l'immagine OG</strong>
181+
<p style="margin-top: 10px; font-size: 14px; line-height: 1.6;">
182+
1. Imposta zoom del browser al 100%<br>
183+
2. Premi F11 per modalità fullscreen (o nascondi questa guida)<br>
184+
3. Fai screenshot 1200x630px della card blu<br>
185+
4. Salva come <code>og-image.png</code> in <code>site/assets/</code>
186+
</p>
187+
<button onclick="document.getElementById('instructions').classList.add('hidden')">
188+
Nascondi istruzioni
189+
</button>
190+
</div>
191+
192+
<!-- OG Card -->
193+
<div class="og-card">
194+
<!-- Decorative elements -->
195+
<div class="decoration decoration-1"></div>
196+
<div class="decoration decoration-2"></div>
197+
<div class="decoration decoration-3"></div>
198+
199+
<!-- Content -->
200+
<div class="content">
201+
<div class="logo">
202+
<div class="logo-icon">
203+
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
204+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
205+
</svg>
206+
</div>
207+
<span class="logo-text">normattiva2md</span>
208+
</div>
209+
210+
<h1>Converti le leggi italiane in testo semplice e strutturato per le intelligenze artificiali</h1>
211+
212+
<div class="subtitle">
213+
Trasforma i contenuti di normattiva.it<br>
214+
in formato Markdown AI-ready
215+
</div>
216+
217+
<div class="badge">
218+
<svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
219+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
220+
</svg>
221+
Open Source • Python 3.7+ • PyPI
222+
</div>
223+
</div>
224+
</div>
225+
226+
<script>
227+
// Hide instructions on key press
228+
document.addEventListener('keydown', (e) => {
229+
if (e.key === 'h' || e.key === 'H') {
230+
document.getElementById('instructions').classList.toggle('hidden');
231+
}
232+
});
233+
</script>
234+
</body>
235+
</html>

‎assets/og-image.png‎

288 KB
Loading

‎feed.xml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="4.4.1">Jekyll</generator><link href="https://ondata.github.io/normattiva_2_md/feed.xml" rel="self" type="application/atom+xml" /><link href="https://ondata.github.io/normattiva_2_md/" rel="alternate" type="text/html" /><updated>2026-01-01T10:41:12+00:00</updated><id>https://ondata.github.io/normattiva_2_md/feed.xml</id><title type="html">normattiva2md</title><subtitle>Converti le leggi italiane in testo semplice e strutturato per le intelligenze artificiali. Trasforma i contenuti XML di normattiva.it in formato Markdown AI-ready.</subtitle></feed>

0 commit comments

Comments
 (0)