Replace hero image with carousel slider (#544)

* Increased timeout from4 to 20 to give time to my server to start

* Carousel added

* Bootstrap imported

* Styling added

* Added test for carousel slider

* Commented code removed

Author: TimOsahenru

_layouts/default.html

@@ -12,6 +12,7 @@
     <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}" />
     <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ '/feed.xml' | prepend: site.baseurl | prepend: site.url }}" />
     <link rel="icon" href="https://fav.farm/%E2%9C%8A%F0%9F%8F%BE" type="image/svg" />
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     {% if page.lang and page.untranslated != true and site.data.locales.size > 1 %}
     {% assign locales = site.data.locales | sort %}
     {% for locale in locales %}
@@ -36,5 +37,6 @@
     {%- include footer.html -%}
     <script src="{{ '/assets/js/index.js' | relative_url }}"></script>
     <script src="https://kit.fontawesome.com/1bbe56de49.js" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
   </body>
 </html>

_layouts/index.html

@@ -3,9 +3,31 @@
 ---
 <div class="home">
   {% assign t = site.data.locales[page.lang][page.lang] %} {% if page.title %} {% assign header = page.title %} {% else %} {% assign header = site.title %} {% endif %}
-  <article class="hero">
-    <div class="hero-text">{{ t.index.lead }}</div>
-  </article>
+  <header>
+    <div id="postSlider" class="carousel slide slider-container" data-bs-ride="carousel">
+      <div class="carousel-inner">
+        {% for post in site.posts %}
+        <div class="carousel-item {% if forloop.first %}active{% endif %}">
+          <div class="email-circle">
+            <img src="{{ post.featured_image | default: post.content | split: '!' | first | split: '(' | last | split: ')' | first | default: 'default-image.jpg' }}" alt="{{ post.title }}">
+          </div>
+          <h3 class="post-title">{{ post.title }}</h3>
+          <p class="post-summary">{{ post.excerpt | strip_html | truncatewords: 20 }}</p>
+        </div>
+        {% endfor %}
+      </div>
+
+      <!-- Controls -->
+      <button class="carousel-control-prev" type="button" data-bs-target="#postSlider" data-bs-slide="prev">
+        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+        <span class="visually-hidden">Previous</span>
+      </button>
+      <button class="carousel-control-next" type="button" data-bs-target="#postSlider" data-bs-slide="next">
+        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+        <span class="visually-hidden">Next</span>
+      </button>
+    </div>
+  </header>
   {{ content }}
 
   <img src="{{'/assets/images/dcus.jpg' | relative_url }}"  alt="DjangoCon US 2023"/>

assets/css/bpd.css

@@ -517,3 +517,50 @@ ul.speaking-list {
     max-width: 60%;
   }
 }
+header {
+  padding: 40px 20px;
+  margin-bottom: 20px;
+  /* background-color: black; */
+}
+.slider-container {
+  min-height: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* background-image: url("/assets/images/hero-bpd-background.jpg"); */
+  background-color: #222;
+  padding: 40px;
+  border-radius: 10px;
+  margin: 0 auto;
+  width: 85%;
+  /* max-width: 1000px; */
+}
+.email-circle {
+  width: 200px;
+  height: 200px;
+  background-color: #fff;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 auto 15px;
+  overflow: hidden;
+}
+.email-circle img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.carousel-item {
+  text-align: center;
+}
+.post-title {
+  font-size: 25px;
+  font-weight: bold;
+  color: white;
+  margin-bottom: 10px;
+}
+.post-summary {
+  font-size: 15px;
+  color: #f1f1f1;
+}

tests/test.py

@@ -12,7 +12,7 @@ def page_url(xprocess, url_port):
     url, port = url_port
 
     class Starter(ProcessStarter):
-        timeout = 4
+        timeout = 20
         # Start the process
         args = [
             "bundle",
@@ -99,3 +99,16 @@ def test_mailto_bpdevs(page_url: tuple[Page, str]) -> None:
     page.goto(live_server_url)
     mailto = page.get_by_role("link", name="email")
     expect(mailto).to_have_attribute("href", "mailto:[email protected]")
+
+
+def test_carousel_displayed(page_url: tuple[Page, str]) -> None:
+    page, live_server_url = page_url
+    page.goto(live_server_url)
+
+    carousel = page.locator(".carousel")
+    expect(carousel).to_be_visible()
+
+    next_button = page.locator(".carousel-control-next")
+    prev_button = page.locator(".carousel-control-prev")
+    expect(next_button).to_be_visible()
+    expect(prev_button).to_be_visible()