Skip to content

Replace Hotwire with htmx and Stimulus with Alpine.js #362

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
C4ptainCrunch wants to merge 1 commit into from
Closed

Replace Hotwire with htmx and Stimulus with Alpine.js #362

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion CLAUDE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ with minimal maintenance and to be accessible to junior newcomers.
We minimize the number of dependencies.
We prefer simple patterns over clever ones.
JavaScript is kept to a minimum, we do not use build steps.
We prefer plain HTML first, hotwire turbo second, hotwire stimulus third and other
We prefer plain HTML first, htmx second, Alpine.js third and other
JS libs only when necessary

## Commands
Expand Down
84 changes: 43 additions & 41 deletions catalog/templates/catalog/course.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,52 +31,56 @@ <h1 class="d-flex align-items-center gap-2">
</svg>
<span>Partager un document</span>
</a>
{% if following %}
<turbo-frame id="favorite">
<form method="POST" action="{% url 'catalog:leave_course' course.slug %}" class="d-inline">
{% csrf_token %}
<button type="submit"
class="btn btn-outline-secondary btn-sm d-inline-flex align-items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-star-fill text-warning hover-spin" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
</svg>
<span>Favori</span>
</button>
</form>
</turbo-frame>
{% else %}
<turbo-frame id="favorite">
<form method="POST" action="{% url 'catalog:join_course' course.slug %}" class="d-inline">
{% csrf_token %}
<button type="submit"
class="btn btn-outline-secondary btn-sm d-inline-flex align-items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-star hover-spin"
viewBox="0 0 16 16">
<path
d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"/>
</svg>
<span>Ajouter aux favoris</span>
</button>
</form>
</turbo-frame>
{% endif %}
{% partial favorite %}
</header>
{% endblock header %}

{% partialdef favorite inline %}
{% if following %}
<div id="favorite" class="d-inline">
<form hx-post="{% url 'catalog:leave_course' course.slug %}" hx-target="#favorite" hx-swap="outerHTML" class="d-inline">
{% csrf_token %}
<button type="submit"
class="btn btn-outline-secondary btn-sm d-inline-flex align-items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-star-fill text-warning hover-spin" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
</svg>
<span>Favori</span>
</button>
</form>
</div>
{% else %}
<div id="favorite" class="d-inline">
<form hx-post="{% url 'catalog:join_course' course.slug %}" hx-target="#favorite" hx-swap="outerHTML" class="d-inline">
{% csrf_token %}
<button type="submit"
class="btn btn-outline-secondary btn-sm d-inline-flex align-items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-star hover-spin"
viewBox="0 0 16 16">
<path
d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"/>
</svg>
<span>Ajouter aux favoris</span>
</button>
</form>
</div>
{% endif %}
{% endpartialdef %}

{% block content %}
<div data-controller="course-filter">
<div x-data="courseFilter()">
{% if documents %}
<form class="d-flex mb-3 gap-2">
<input
class="flex-fill rounded px-2"
style="border-style: solid"
type="text" name="cours"
placeholder="Chercher par titre de document..."
data-course-filter-target="query"
data-action="input->course-filter#filter"
x-ref="query"
@input="filter()"

>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button"
Expand All @@ -97,8 +101,7 @@ <h1 class="d-flex align-items-center gap-2">
<input type="checkbox"
id="tag-{{ tag.name }}"
data-tag-name="{{ tag.name }}"
data-action="change->course-filter#filter"
data-course-filter-target="tag"
@change="filter()"
/>
<label for="tag-{{ tag.name }}">{{ tag.name }}</label>
</li>
Expand All @@ -111,7 +114,6 @@ <h1 class="d-flex align-items-center gap-2">
{% for document in documents %}
<li
class="border-top p-2 d-flex align-items-center"
data-course-filter-target="filterable"
data-filter-key='{{ document.name }}'
data-tags="{{ document.tags.all|join:' ' }}"
{% if document.hidden %}style="opacity: 0.5;"{% endif %}
Expand Down Expand Up @@ -207,7 +209,7 @@ <h1 class="d-flex align-items-center gap-2">
{% if request.user|has_write_perm_on:document %}
<a class="btn d-none d-sm-block" title="Modifier"
href="{% url 'document_edit' document.pk %}"
data-turbo="false">
hx-boost="false">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-pencil"
viewBox="0 0 16 16">
Expand All @@ -218,7 +220,7 @@ <h1 class="d-flex align-items-center gap-2">
{% endif %}
<a class="btn" title="Télécharger"
href="{% if document.pdf and document.pdf.name %}{% url 'document_pdf' document.pk %}{% else %}{% url 'document_original' document.pk %}{% endif %}"
data-turbo="false">
hx-boost="false">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-download" viewBox="0 0 16 16">
<path
Expand Down Expand Up @@ -249,7 +251,7 @@ <h4 class="alert-heading">
<a href="/catalog/f/archives/">regarde dans les archives</a> !
</div>
<div>
<h3>Il n’y a encore rien dans ce cours…</h3>
<h3>Il n'y a encore rien dans ce cours…</h3>
<p>Les documents que tu trouves sur DocHub ont été partagés par des
étudiants comme toi et nous. N'hésite pas à partager tes notes, des questions d'examens
ou même juste un scan des questions du dernier TP. C'est grâce à des petits gestes comme ça que
Expand Down
9 changes: 5 additions & 4 deletions catalog/templates/catalog/like-dislike.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
{% load like_tags %}

<turbo-frame id="like-dislike-{{ document.pk }}" class="card-like">
<div id="like-dislike-{{ document.pk }}" class="card-like"
hx-target="#like-dislike-{{ document.pk }}" hx-swap="outerHTML">
{% user_liked request.user document as liked %}
<a class="like" href="{% url "document_vote" document.pk %}?vote_type=up">
<a class="like" hx-get="{% url "document_vote" document.pk %}?vote_type=up" hx-boost="false">
<i class="fas fa-thumbs-up" style="grid-row-start:1;{% if liked == "up" %}color: #43AC6A;{% endif %}"></i>
<span>{{ document.votes.upvotes }}</span>
</a>
<a class="dislike" href="{% url "document_vote" document.pk %}?vote_type=down">
<a class="dislike" hx-get="{% url "document_vote" document.pk %}?vote_type=down" hx-boost="false">
<i class="fas fa-thumbs-down" style="grid-row-start:2;{% if liked == "down" %}color: #9e1d1d;{% endif %}"></i>
<span>{{ document.votes.downvotes }}</span>
</a>
</turbo-frame>
</div>
9 changes: 9 additions & 0 deletions catalog/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,15 @@ def set_follow_course(request, slug: str, action: str) -> HttpResponse:
else:
course.followed_by.remove(request.user)
course.save()

if request.htmx:
following = course.followed_by.filter(id=request.user.id).exists()
return render(
request,
"catalog/course.html#favorite",
{"course": course, "following": following},
)

nextpage = request.GET.get("next", reverse("catalog:course_show", args=[slug]))
return HttpResponseRedirect(nextpage)

Expand Down
2 changes: 1 addition & 1 deletion documents/forms.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ class Meta:
attrs={
"class": "form-select",
"data-placeholder": "Ajoute des tags",
"data-controller": "tom-select",
"data-tom-select": "",
}
),
"staff_pick": forms.CheckboxInput(
Expand Down
4 changes: 2 additions & 2 deletions documents/templates/documents/document_edit.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,11 +72,11 @@ <h5 class="card-header">Modération</h5>
{% if doc.hidden %}
<input type="submit" class="btn btn-link text-primary"
name="unhide" value="Rendre visible le document"
data-turbo-confirm="Est-tu certain de vouloir rendre visible ce document ?"/>
hx-confirm="Est-tu certain de vouloir rendre visible ce document ?"/>
{% else %}
<input type="submit" class="btn btn-link text-danger"
name="hide" value="Cacher le document"
data-turbo-confirm="Est-tu certain de vouloir cacher ce document ?"/>
hx-confirm="Est-tu certain de vouloir cacher ce document ?"/>
{% endif %}
</div>
</form>
Expand Down
5 changes: 2 additions & 3 deletions documents/templates/documents/document_report.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,7 @@

{% partialdef report_modal %}
<dialog id="reportDialog"
data-controller="modal"
data-action="click->modal#clickOutside"
@click="if ($event.target === $el) $el.close()"
class="rounded shadow-lg border-0 p-0">
{% include "documents/document_report.html#report_card" %}
</dialog>
Expand Down Expand Up @@ -64,7 +63,7 @@ <h5 class="mb-0">Signaler un problème</h5>
</div>

<div class="card-footer d-flex gap-2 justify-content-end">
<button type="button" data-action="click->modal#close" class="btn btn-outline-secondary">Annuler</button>
<button type="button" onclick="this.closest('dialog')?.close()" class="btn btn-outline-secondary">Annuler</button>
<button type="submit" class="btn btn-primary">
Envoyer
</button>
Expand Down
24 changes: 13 additions & 11 deletions documents/templates/documents/document_upload.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
display: none;
}

div[data-upload-target=inputwrapper][active] {
[x-ref=inputwrapper][data-active] {
background: white !important;
}

Expand Down Expand Up @@ -52,7 +52,7 @@
action="{% url 'document_put' course.slug %}"
method="post" enctype="multipart/form-data"
id="document-upload"
data-controller="upload"
x-data="upload()"
class="mt-2"
>
{% csrf_token %}
Expand Down Expand Up @@ -112,7 +112,7 @@
</p>
<p>
<small class="text-muted ">
N'oublie pas que ce qui est uploadé sur DocHub est soumis au droit d’auteur,
N'oublie pas que ce qui est uploadé sur DocHub est soumis au droit d'auteur,
et que tu dois donc avoir l'autorisation de son auteur pour l'y ajouter sur DocHub.
</small>
</p>
Expand All @@ -127,14 +127,16 @@
</small>
{% endif %}
<div
data-action="dragenter->upload#enter dragleave->upload#leave"
@dragenter="enter($event)"
@dragleave="leave($event)"
class="d-flex mb-2 rounded border d-block bg-light position-relative"
data-upload-target="inputwrapper"
x-ref="inputwrapper"
:data-active="dragging || undefined"
>
<input
type="file" name="file" required id="id_file"
data-upload-target="input"
data-action="change->upload#input"
x-ref="input"
@change="handleFile($event)"
style="min-height: 150px; opacity: 0; z-index: 100; width: 100%;"

/>
Expand All @@ -150,21 +152,21 @@
</svg>
<span class="text-center">Drag & drop ou clic pour ajouter un document</span>
<div>
<span data-upload-target="originalname"></span>
<span data-upload-target="size"></span>
<span x-ref="originalname"></span>
<span x-ref="size"></span>
</div>
</div>
</div>

{% endwith %}

<div class="upload--hide"
data-upload-target="form"
x-ref="form"
>

<div class="mb-3">
<label for="name" class="form-label">Titre du document</label>
<input type="text" id="name" name="name" class="form-control" data-upload-target="name">
<input type="text" id="name" name="name" class="form-control" x-ref="name">
<div class="form-text">
Essaye de rendre le titre clair pour que d'autres puissent trouver ton document.

Expand Down
Loading
Loading