From 7e053b8b9e5d959337e0ae799886e2d72ba681b9 Mon Sep 17 00:00:00 2001
From: Wilson Gaturu <wilsongaturu@gmail.com>
Date: Tue, 19 Sep 2023 09:07:00 +0300
Subject: [PATCH 1/2] adds images and social media links to article

---
 peachjam/templates/peachjam/_article_list.html  |  8 ++++----
 peachjam/templates/peachjam/article_detail.html | 17 +++++++++++++++++
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/peachjam/templates/peachjam/_article_list.html b/peachjam/templates/peachjam/_article_list.html
index 5cea04f5d..2deb37d4c 100644
--- a/peachjam/templates/peachjam/_article_list.html
+++ b/peachjam/templates/peachjam/_article_list.html
@@ -1,8 +1,8 @@
 {% load i18n peachjam %}
 {% for article in articles %}
-  <div class="mb-3">
-    <div class="row">
-      <div class="col-3 col-lg-2">
+  <div class="rounded-0 p-2 mb-3">
+    <div class="my-1">
+      <div>
         {% if article.image %}
           <a href="{{ article.get_absolute_url }}">
             <img src="{{ article.image.url }}"
@@ -11,7 +11,7 @@
           </a>
         {% endif %}
       </div>
-      <div class="col-9 col-lg-10">
+      <div>
         <h5>
           <a href="{{ article.get_absolute_url }}">{{ article.title }}</a>
         </h5>
diff --git a/peachjam/templates/peachjam/article_detail.html b/peachjam/templates/peachjam/article_detail.html
index f12b63eab..cf3773870 100644
--- a/peachjam/templates/peachjam/article_detail.html
+++ b/peachjam/templates/peachjam/article_detail.html
@@ -35,6 +35,23 @@ <h1>{{ article.title }}</h1>
                 </li>
               {% endfor %}
             </ul>
+            <div class="d-flex align-items-center">
+              <a href="https://api.whatsapp.com/send?text={{ request.build_absolute_uri }}"
+                 class="btn btn-link share-link"
+                 target="_blank">
+                <i class="bi bi-whatsapp whatsapp-forecolor share-icon"></i>
+              </a>
+              <a href="https://twitter.com/intent/tweet?text={{ request.build_absolute_uri }}"
+                 class="btn btn-link share-link"
+                 target="_blank">
+                <i class="bi bi-twitter twitter-forecolor share-icon"></i>
+              </a>
+              <a href="https://www.facebook.com/sharer/sharer.php?u={{ request.build_absolute_uri }}"
+                 class="btn btn-link share-link"
+                 target="_blank">
+                <i class="bi bi-facebook facebook-forecolor share-icon"></i>
+              </a>
+            </div>
           </header>
           {% if article.summary %}<p class="lead">{{ article.summary }}</p>{% endif %}
           <div class="article-body">{{ article.body|safe }}</div>

From a168506cffc69c3f8459beba90523f241953fbc7 Mon Sep 17 00:00:00 2001
From: Wilson Gaturu <wilsongaturu@gmail.com>
Date: Fri, 22 Sep 2023 09:33:20 +0300
Subject: [PATCH 2/2] adds recent article list

---
 .../templates/peachjam/_article_list.html     |  8 ++---
 .../peachjam/_recent_article_list.html        | 33 +++++++++++++++++++
 .../templates/peachjam/article_detail.html    |  2 +-
 3 files changed, 38 insertions(+), 5 deletions(-)
 create mode 100644 peachjam/templates/peachjam/_recent_article_list.html

diff --git a/peachjam/templates/peachjam/_article_list.html b/peachjam/templates/peachjam/_article_list.html
index 2deb37d4c..0cc2539e3 100644
--- a/peachjam/templates/peachjam/_article_list.html
+++ b/peachjam/templates/peachjam/_article_list.html
@@ -1,8 +1,8 @@
 {% load i18n peachjam %}
 {% for article in articles %}
-  <div class="rounded-0 p-2 mb-3">
-    <div class="my-1">
-      <div>
+  <div class="mb-3">
+    <div class="row">
+      <div class="col-md-3 col-lg-2 mb-1">
         {% if article.image %}
           <a href="{{ article.get_absolute_url }}">
             <img src="{{ article.image.url }}"
@@ -11,7 +11,7 @@
           </a>
         {% endif %}
       </div>
-      <div>
+      <div class="col-md-9 col-lg-10">
         <h5>
           <a href="{{ article.get_absolute_url }}">{{ article.title }}</a>
         </h5>
diff --git a/peachjam/templates/peachjam/_recent_article_list.html b/peachjam/templates/peachjam/_recent_article_list.html
new file mode 100644
index 000000000..2deb37d4c
--- /dev/null
+++ b/peachjam/templates/peachjam/_recent_article_list.html
@@ -0,0 +1,33 @@
+{% load i18n peachjam %}
+{% for article in articles %}
+  <div class="rounded-0 p-2 mb-3">
+    <div class="my-1">
+      <div>
+        {% if article.image %}
+          <a href="{{ article.get_absolute_url }}">
+            <img src="{{ article.image.url }}"
+                 alt="{{ article.title }}"
+                 class="img-fluid"/>
+          </a>
+        {% endif %}
+      </div>
+      <div>
+        <h5>
+          <a href="{{ article.get_absolute_url }}">{{ article.title }}</a>
+        </h5>
+        <ul class="text-muted list-inline text-muted">
+          <li class="list-inline-item">{{ article.date }}</li>
+          <li class="list-inline-item">
+            <a href={% url 'user_profile' article.author.username %}>{% user_name article.author %}</a>
+          </li>
+          {% for topic in article.topics.all %}
+            <li class="list-inline-item">
+              <a href="{% url 'article_topic_list' topic.slug %}">{{ topic }}</a>
+            </li>
+          {% endfor %}
+        </ul>
+        {% if article.summary %}<p>{{ article.summary }}</p>{% endif %}
+      </div>
+    </div>
+  </div>
+{% endfor %}
diff --git a/peachjam/templates/peachjam/article_detail.html b/peachjam/templates/peachjam/article_detail.html
index cf3773870..f97e17291 100644
--- a/peachjam/templates/peachjam/article_detail.html
+++ b/peachjam/templates/peachjam/article_detail.html
@@ -84,7 +84,7 @@ <h5 class="card-title">
         {% if more_articles %}
           {% user_name article.author as username %}
           <h4>{% blocktrans trimmed %}Recent articles by {{ username }}{% endblocktrans %}</h4>
-          {% include 'peachjam/_article_list.html' with articles=more_articles %}
+          {% include 'peachjam/_recent_article_list.html' with articles=more_articles %}
         {% endif %}
       </div>
     </div>