vmems/vmems-website
3
1
Fork 0
Code Issues Pull requests Projects Releases Packages Activity Actions

feat(newsletter): htmx form to subscribe to listmonk
All checks were successful
Deploy workflow / deploy (push) Successful in 15s
Details

Browse source
This commit is contained in:
Matthieu Bessat 2024-09-01 11:37:30 +02:00
parent f9e49913bf
commit 298cedf57d
5 changed files with 5198 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5154
assets/scripts/htmx.js Normal file
View file

File diff suppressed because it is too large Load diff

5
layouts/_default/baseof.html
View file

@ -19,5 +19,10 @@
{{ else }}
{{ block "main" . }}{{ end }}
{{ end }}
{{ with resources.Get "scripts/htmx.js" }}
{{ with . | fingerprint "sha256" }}
<script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
{{ end }}
{{ end }}
</body>
</html>

21
layouts/partials/footer.html
View file

@ -1,7 +1,7 @@
<footer class="page-footer mt-5 py-5">
<footer class="page-footer mt-5 pt-4">
<div class="container">
<div class="row">
<div class="col-6 col-md-2 mb-3">
<div class="col-12 col-md-4 col-lg-2 mt-2 mt-lg-0">
<h5>Le vélo à Gaillon-Aubevoye</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="/signalements" class="nav-link p-0 text-body-secondary">Problèmes signalés</a></li>
@ -9,14 +9,14 @@
<li class="nav-item mb-2"><a href="/ecosysteme-local" class="nav-link p-0 text-body-secondary">Ecosystème local</a></li>
</ul>
</div>
<div class="col-3 col-md-2 mb-3">
<div class="col-12 col-md-4 col-lg-2 mt-2 mt-lg-0">
<h5>Le vélo en général</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="/amenagements/stationnement" class="nav-link p-0 text-body-secondary">Stationnement / Parking</a></li>
<li class="nav-item mb-2"><a href="/ressources" class="nav-link p-0 text-body-secondary">Ressources</a></li>
</ul>
</div>
<div class="col-6 col-md-2 mb-3">
<div class="col-12 col-md-4 col-lg-2 mt-2 mt-lg-0">
<h5>L'association</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="/association" class="nav-link p-0 text-body-secondary">À propos</a></li>
@ -25,17 +25,8 @@
</ul>
</div>
<div class="col-md-5 offset-md-1 mb-3">
<form>
<h5>Abonnez-vous à notre liste de diffusion !</h5>
<p>Soyez aux courant des dernières actualités de l'association. Email d'information envoyé tout les trimestres.</p>
<!-- TODO, add small js script to handle subsription -->
<div class="d-flex flex-column flex-sm-row w-100 gap-2">
<label for="newsletter1" class="visually-hidden">Adresse email</label>
<input id="newsletter1" type="text" class="form-control" placeholder="Adresse email">
<button class="btn btn-primary" type="button">S'abonner</button>
</div>
</form>
<div class="col-12 col-lg-4 offset-lg-1 mt-3 mt-lg-0 mb-3">
{{ partial "newsletter_subscribe" . }}
</div>
</div>

1
layouts/partials/head.html
View file

@ -32,3 +32,4 @@
{{ $style := resources.Get "sass/main.scss" | resources.ToCSS | resources.Fingerprint }}
<link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}">
<meta name="htmx-config" content='{"selfRequestsOnly":false}'>

32
layouts/partials/newsletter_subscribe.html Normal file
View file

@ -0,0 +1,32 @@
<style>
#subscribe-result-inner, #subscribe-success {
display: none;
}
#subscribe-result:has(> #subscribe-result-inner:not(:empty)) #subscribe-success {
display: block;
}
</style>
<form
hx-boost="true"
hx-target="#subscribe-result-inner"
hx-push-url="false"
method="POST"
action="https://lists.vmems.fr/api/public/subscription"
hx-on::after-request="this.reset()"
>
<h5>Abonnez-vous à notre liste de diffusion !</h5>
<p>Soyez aux courant des dernières actualités de l'association. Email d'information envoyé tout les trimestres.</p>
<div id="subscribe-result">
<div id="subscribe-result-inner"></div>
<div class="alert alert-success" role="alert" id="subscribe-success">
Merci, vous êtes maintenant abonné à la newsletter !
</div>
</div>
<div class="d-flex flex-column flex-sm-row w-100 gap-2">
<label for="newsletter1" class="visually-hidden">Adresse email</label>
<input id="newsletter1" type="email" name="email" class="form-control" placeholder="Adresse email">
<input id="list" type="hidden" name="l" value="c1b38c9f-f876-42c8-a5fd-d53e4724bd0a" />
<input id="nounce" type="hidden" name="nonce" value="" />
<button class="btn btn-primary" type="submit">S'abonner</button>
</div>
</form>