Skip to content

Commit 8ae40be

Browse files
author
Ferre De Belie
committed
feat: contact form, SEO, analytics, bedankt page, GitHub Actions deploy
- Web3Forms integratie met hCaptcha en redirect naar /bedankt - Interesse checkboxes (Home Automation, Netwerk), stad/gemeente veld - Bedankt pagina na succesvolle form submission - GitHub Actions workflow voor automatische deploy naar GitHub Pages - SEO: canonical URL, Open Graph tags, keywords meta, LocalBusiness JSON-LD - Sitemap generatie via @astrojs/sitemap - Cloudflare Web Analytics
1 parent 7f88e83 commit 8ae40be

7 files changed

Lines changed: 234 additions & 23 deletions

File tree

‎.github/workflows/deploy.yml‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: [main]
6+
workflow_dispatch:
7+
8+
permissions:
9+
contents: read
10+
pages: write
11+
id-token: write
12+
13+
concurrency:
14+
group: pages
15+
cancel-in-progress: true
16+
17+
jobs:
18+
build:
19+
runs-on: ubuntu-latest
20+
steps:
21+
- uses: actions/checkout@v4
22+
23+
- uses: actions/setup-node@v4
24+
with:
25+
node-version: 20
26+
cache: npm
27+
28+
- run: npm ci
29+
30+
- run: npm run build
31+
32+
- uses: actions/upload-pages-artifact@v3
33+
with:
34+
path: dist/
35+
36+
deploy:
37+
needs: build
38+
runs-on: ubuntu-latest
39+
environment:
40+
name: github-pages
41+
url: ${{ steps.deployment.outputs.page_url }}
42+
steps:
43+
- uses: actions/deploy-pages@v4
44+
id: deployment

‎astro.config.mjs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import { defineConfig } from 'astro/config'
22
import tailwindcss from '@tailwindcss/vite'
3+
import sitemap from '@astrojs/sitemap'
34

45
export default defineConfig({
56
site: 'https://leaf.be',
67
output: 'static',
78
compressHTML: true,
9+
integrations: [sitemap()],
810
vite: {
911
plugins: [tailwindcss()],
1012
},

‎package-lock.json‎

Lines changed: 78 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,11 @@
99
"preview": "astro preview"
1010
},
1111
"devDependencies": {
12-
"astro": "^5.5.0",
1312
"@tailwindcss/vite": "^4.1.0",
13+
"astro": "^5.5.0",
1414
"tailwindcss": "^4.1.0"
15+
},
16+
"dependencies": {
17+
"@astrojs/sitemap": "^3.7.2"
1518
}
1619
}

‎src/components/Contact.astro‎

Lines changed: 28 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
---
2-
32
---
43

54
<section id="contact" class="py-24">
@@ -22,7 +21,11 @@
2221
<div class="grid lg:grid-cols-5 gap-12">
2322
<!-- Form -->
2423
<div class="lg:col-span-3 fade-in-up">
25-
<form class="space-y-6" action="#" method="POST">
24+
<form id="contact-form" class="space-y-6" action="https://api.web3forms.com/submit" method="POST">
25+
<input type="hidden" name="access_key" value="c2f92de0-100d-4ab0-a3ae-64353363e985" />
26+
<input type="hidden" name="subject" value="New Message from Leaf" />
27+
<input type="hidden" name="redirect" value="https://leaf.be/bedankt" />
28+
<input type="hidden" name="from_name" value="Website of LEAF" />
2629
<div class="grid sm:grid-cols-2 gap-6">
2730
<div>
2831
<label
@@ -92,23 +95,17 @@
9295
</div>
9396
</div>
9497
<div>
95-
<label
96-
for="interesse"
97-
class="block text-sm font-medium text-slate-700 mb-2"
98-
>
99-
Interesse
100-
</label>
101-
<select
102-
id="interesse"
103-
name="interesse"
104-
required
105-
class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-leaf-400 focus:ring-2 focus:ring-leaf-100 transition-colors outline-none bg-white"
106-
>
107-
<option value="" disabled selected>Kies een optie...</option>
108-
<option value="home-automation">Home Automation</option>
109-
<option value="netwerk">Netwerk</option>
110-
<option value="beide">Beide</option>
111-
</select>
98+
<p class="block text-sm font-medium text-slate-700 mb-3">Interesse(s)</p>
99+
<div class="flex flex-wrap gap-4">
100+
<label class="flex items-center gap-2 cursor-pointer">
101+
<input type="checkbox" name="interesse" value="Home Automation" class="w-4 h-4 rounded accent-leaf-600" />
102+
<span class="text-sm text-slate-700">Home Automation</span>
103+
</label>
104+
<label class="flex items-center gap-2 cursor-pointer">
105+
<input type="checkbox" name="interesse" value="Netwerk" class="w-4 h-4 rounded accent-leaf-600" />
106+
<span class="text-sm text-slate-700">Netwerk</span>
107+
</label>
108+
</div>
112109
</div>
113110
<div>
114111
<label
@@ -142,6 +139,7 @@
142139
placeholder="Nog iets dat u wilt meegeven..."
143140
></textarea>
144141
</div>
142+
<div class="h-captcha" data-captcha="true"></div>
145143
<button
146144
type="submit"
147145
class="w-full sm:w-auto px-8 py-3 text-base font-semibold text-white bg-leaf-600 rounded-xl hover:bg-leaf-700 transition-all hover:shadow-lg hover:shadow-leaf-600/25"
@@ -207,3 +205,14 @@
207205
</div>
208206
</div>
209207
</section>
208+
209+
<script>
210+
const form = document.getElementById('contact-form') as HTMLFormElement
211+
form.addEventListener('submit', function (e) {
212+
const hCaptcha = form.querySelector<HTMLTextAreaElement>('textarea[name=h-captcha-response]')?.value
213+
if (!hCaptcha) {
214+
e.preventDefault()
215+
alert('Gelieve de captcha in te vullen.')
216+
}
217+
})
218+
</script>

‎src/layouts/BaseLayout.astro‎

Lines changed: 52 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,43 @@ interface Props {
55
}
66
77
const {
8-
title = 'leaf.be — Smart Home Automation',
9-
description = 'leaf.be maakt uw woning slimmer, comfortabeler en energiezuiniger met op maat gemaakte home automation oplossingen.',
8+
title = 'LEAF - Logic · Energy · Automation · Flow',
9+
description = 'LEAF is uw specialist in domotica, energiebeheer, professionele netwerken en videofonie in Vlaanderen. Twee zelfstandige experts, persoonlijke service, oplossingen op maat.',
1010
} = Astro.props
11+
12+
const canonicalUrl = new URL(Astro.url.pathname, 'https://leaf.be')
13+
14+
const structuredData = {
15+
'@context': 'https://schema.org',
16+
'@type': 'LocalBusiness',
17+
name: 'LEAF',
18+
description: 'Smart home automation, energiebeheer en professionele netwerken in Vlaanderen.',
19+
url: 'https://leaf.be',
20+
email: 'info@leaf.be',
21+
areaServed: {
22+
'@type': 'AdministrativeArea',
23+
name: 'Vlaanderen, België',
24+
},
25+
serviceArea: {
26+
'@type': 'GeoCircle',
27+
geoMidpoint: {
28+
'@type': 'GeoCoordinates',
29+
latitude: 51.0,
30+
longitude: 4.0,
31+
},
32+
},
33+
hasOfferCatalog: {
34+
'@type': 'OfferCatalog',
35+
name: 'Diensten',
36+
itemListElement: [
37+
{ '@type': 'Offer', itemOffered: { '@type': 'Service', name: 'Smart Home & Domotica' } },
38+
{ '@type': 'Offer', itemOffered: { '@type': 'Service', name: 'Energie & EMS' } },
39+
{ '@type': 'Offer', itemOffered: { '@type': 'Service', name: 'WiFi & Netwerk' } },
40+
{ '@type': 'Offer', itemOffered: { '@type': 'Service', name: 'Beveiliging & Videofonie' } },
41+
{ '@type': 'Offer', itemOffered: { '@type': 'Service', name: 'Audio & Entertainment' } },
42+
],
43+
},
44+
}
1145
---
1246

1347
<!doctype html>
@@ -16,7 +50,18 @@ const {
1650
<meta charset="utf-8" />
1751
<meta name="viewport" content="width=device-width, initial-scale=1" />
1852
<meta name="description" content={description} />
53+
<meta name="keywords" content="domotica Vlaanderen, smart home installateur België, home automation, energiebeheer, thuisbatterij, laadpaal, professioneel netwerk, videofoon, KNX, Home Assistant, Unifi" />
1954
<meta name="theme-color" content="#236e30" />
55+
<link rel="canonical" href={canonicalUrl} />
56+
57+
<!-- Open Graph -->
58+
<meta property="og:type" content="website" />
59+
<meta property="og:url" content={canonicalUrl} />
60+
<meta property="og:title" content={title} />
61+
<meta property="og:description" content={description} />
62+
<meta property="og:locale" content="nl_BE" />
63+
<meta property="og:site_name" content="LEAF" />
64+
2065
<link rel="icon" type="image/png" href="/favicon.png" />
2166
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
2267
<link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -26,6 +71,9 @@ const {
2671
rel="stylesheet"
2772
/>
2873
<title>{title}</title>
74+
75+
<!-- Structured Data -->
76+
<script type="application/ld+json" set:html={JSON.stringify(structuredData)} />
2977
</head>
3078
<body class="antialiased">
3179
<slot />
@@ -46,5 +94,7 @@ const {
4694
observer.observe(el)
4795
})
4896
</script>
97+
<script src="https://web3forms.com/client/script.js" async defer></script>
98+
<script defer src="https://static.cloudflareinsights.com/beacon.min.js" data-cf-beacon='{"token": "1ea9ea4f270e4710a746226098f010e5"}'></script>
4999
</body>
50100
</html>

‎src/pages/bedankt.astro‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
import '../styles/global.css'
3+
import BaseLayout from '../layouts/BaseLayout.astro'
4+
---
5+
6+
<BaseLayout title="Bedankt — LEAF" description="Uw bericht is ontvangen. Wij nemen zo snel mogelijk contact met u op.">
7+
<main class="min-h-screen flex items-center justify-center bg-slate-50 px-4">
8+
<div class="text-center max-w-md">
9+
<div class="inline-flex items-center justify-center w-20 h-20 bg-leaf-100 rounded-full mb-6">
10+
<svg class="w-10 h-10 text-leaf-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
11+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
12+
</svg>
13+
</div>
14+
<h1 class="text-3xl font-bold text-slate-900 mb-4">Bedankt voor uw bericht!</h1>
15+
<p class="text-lg text-slate-600 leading-relaxed mb-8">
16+
Wij hebben uw aanvraag ontvangen en nemen zo snel mogelijk contact met u op.
17+
</p>
18+
<a
19+
href="/"
20+
class="inline-flex items-center px-6 py-3 text-base font-semibold text-white bg-leaf-600 rounded-xl hover:bg-leaf-700 transition-all hover:shadow-lg hover:shadow-leaf-600/25"
21+
>
22+
Terug naar de homepage
23+
</a>
24+
</div>
25+
</main>
26+
</BaseLayout>

0 commit comments

Comments
 (0)