Update link component

TODO

@@ -1,2 +1 @@
-- List profiles with talks
 - Chat

app/website/consumers.py

@@ -50,10 +50,11 @@ class WebsiteConsumer(AsyncWebsocketConsumer):
             # Single talk
             if data["value"] == "single-talk":
                 await self.channel_layer.group_send(
-                    self.room_group_name, {
+                    self.room_group_name,
+                    {
                         "type": "send_page_single_talk",
-                        "id":  data["id"],
-                    }
+                        "id": data["id"],
+                    },
                 )
             # Profiles
             if data["value"] == "profiles":
@@ -70,10 +71,11 @@ class WebsiteConsumer(AsyncWebsocketConsumer):
             # Search
             if data["value"] == "search-talks":
                 await self.channel_layer.group_send(
-                    self.room_group_name, {
+                    self.room_group_name,
+                    {
                         "type": "send_page_search",
                         "search": data["search"],
-                    }
+                    },
                 )
 
     # Pages

app/website/templates/components/link.html

@@ -6,6 +6,9 @@
     {% if page %}
         <input type="hidden" name="page" value="{{ page }}">
     {% endif %}
+    {% if id %}
+        <input type="hidden" name="id" value="{{ id }}">
+    {% endif %}
     {# Button #}
-    <button class="link__button" type="button" hx-ws="send" hx-trigger="click">{{ text }}</button>
+    <a class="link__button" type="button" hx-ws="send" hx-trigger="click">{{ children }}</a>
 </form>

app/website/templates/layouts/base.html

@@ -30,15 +30,15 @@
               <ul>
                   <li>
                       {# To page Talks #}
-                      {% #link text="Talks" action="page" value="talks" scroll-up="true" %}{% /link %}
+                      {% #link action="page" value="talks" scroll-up="true" %}Talks{% /link %}
                   </li>
                   <li>
                       {# To page Profiles #}
-                      {% #link text="Profiles" action="page" value="profiles" scroll-up="true" %}{% /link %}
+                      {% #link action="page" value="profiles" scroll-up="true" %}Profiles{% /link %}
                   </li>
                   <li>
                       {# To page About #}
-                      {% #link text="About" action="page" value="about" scroll-up="true" %}{% /link %}
+                      {% #link action="page" value="about" scroll-up="true" %}About{% /link %}
                   </li>
               </ul>
             </nav>

app/website/templates/pages/profiles.html

@@ -1,4 +1,5 @@
 {% load static %}
+{% load slippers %}
 <main id="main" data-scroll-to-top="true">
     {# List Profiles #}
     <div style="display: flex; flex-wrap: wrap; justify-content: space-between; ">
@@ -9,14 +10,15 @@
                           {{ profile.full_name }}
                     </h2>
                     <p>
-                        {# <img src="{{ profile.avatar.url }}" alt="{{ profile.full_name }}"> #}
+                        <img src="{{ profile.avatar.url }}" alt="{{ profile.full_name }}">
                     </p>
                 </header>
                 <h3>Talks</h3>
                 <ul>
                     {% for talk in profile.talkspeaker.all %}
                         <li>
-                            {{ talk.title }}
+
+                            {% #link action="page" value="single-talk" id=talk.id scroll-up="true" %}{{ talk.title }}{% /link %}
                         </li>
                     {% endfor %}
                 </ul>

app/website/templates/pages/talk-single.html

@@ -13,6 +13,6 @@
         <footer>Author {{ talk.author.full_name }} - {{ talk.category.name }}</footer>
     </article>
     <p>
-        {% #link text="Back" action="page" value="talks" page=1 %}{% /link %}
+        {% #link action="page" value="talks" page=1 %}More talks{% /link %}
     </p>
 </main>

app/website/templates/pages/talks.html

@@ -23,10 +23,7 @@
     {% if talks %}
         {% for talk in talks %}
             <form>
-                <input type="hidden" name="action" value="page">
-                <input type="hidden" name="value" value="single-talk">
-                <input type="hidden" name="id" value="{{ talk.id }}">
-                <a href="#" hx-ws="send" hx-trigger="click">
+                {% #link action="page" value="single-talk" id=talk.id %}
                     <article>
                         <header>
                             <div class="grid">
@@ -41,7 +38,7 @@
                         </p>
                         <footer>Author {{ talk.author.full_name }} - {{ talk.category.name }}</footer>
                     </article>
-                </a>
+                {% /link %}
             </form>
         {% endfor %}
     {% else %}

app/website/views.py

@@ -40,11 +40,15 @@ def page_single_talk(id):
         },
     )
 
+
 def page_profiles():
     return render_to_string(
         "pages/profiles.html",
         {
-            "profiles": Profile.objects.filter(talkspeaker__isnull=False).order_by("full_name").distinct().all(),
+            "profiles": Profile.objects.filter(talkspeaker__isnull=False)
+            .order_by("full_name")
+            .distinct()
+            .all(),
         },
     )
 
@@ -57,9 +61,9 @@ def page_results(search):
     return render_to_string(
         "pages/talks.html",
         {
-            "talks": Talk.objects.filter(
-                title__icontains=search.lower()
-                                         ).order_by("title"),
+            "talks": Talk.objects.filter(title__icontains=search.lower()).order_by(
+                "title"
+            ),
             "search": search,
         },
     )