blog: Encourage people to sign up & subscribe to the newsletter

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/sass/main.sass b/src/sass/main.sass
index 5bcbde923e6b76cc54f49da01223561e87ac22d7..5401a5082652cc60a78bc28911e2507b080c64d1 100644 (file)
--- a/src/sass/main.sass
+++ b/src/sass/main.sass
@@ -75,3 +75,8 @@ $section-padding-desktop:       3rem 0.5rem
                color: $grey
                &:hover
                        color: $black
+
+// Used to wrap text on buttons
+.wrap-text
+    height: max-content;
+    white-space: inherit;

diff --git a/src/templates/blog/index.html b/src/templates/blog/index.html
index ef5b666ffb395191a3896ec8213d2aa3574e5caa..422c9b8980936c574e2760cfd5ea813102a3eeb9 100644 (file)
--- a/src/templates/blog/index.html
+++ b/src/templates/blog/index.html
@@ -67,32 +67,57 @@
                                </div>
 
                                <div class="column is-4">
+                                       {# Show a button to sign up for anonymous users #}
+                                       {% if not current_user %}
+                                               <div class="block">
+                                                       <a class="button is-primary is-large is-fullwidth wrap-text" href="/register">
+                                                               <span class="icon">
+                                                                       <i class="fa-solid fa-envelope"></i>
+                                                               </span>
+                                                               <span>{{ _("Sign Up & Subscribe to our Newsletter") }}</span>
+                                                       </a>
+                                               </div>
+
+                                       {# Show a button to subscribe if users are logged in, but not yet subscribed #}
+                                       {% elif current_user and not current_user.consents_to_promotional_emails %}
+                                               <div class="block">
+                                                       <a class="button is-success is-large is-fullwidth wrap-text" href="/subscribe">
+                                                               <span class="icon">
+                                                                       <i class="fa-solid fa-envelope"></i>
+                                                               </span>
+                                                               <span>{{ _("Subscribe to our Newsletter") }}</span>
+                                                       </a>
+                                               </div>
+                                       {% end %}
+
                                        <div class="block">
                                                <div class="notification">
                                                        <h5 class="title is-5">Follow Us!</h5>
 
-                                                       <div class="level is-mobile">
-                                                               <div class="level-item">
-                                                                       <a href="https://social.ipfire.org/@news">
-                                                                               <i class="fa-brands fa-mastodon"></i>
-                                                                       </a>
-                                                               </div>
-                                                               <div class="level-item">
-                                                                       <a href="https://twitter.com/ipfire">
-                                                                               <i class="fa-brands fa-twitter"></i>
-                                                                       </a>
+                                                       <div class="block">
+                                                               <div class="level is-mobile">
+                                                                       <div class="level-item">
+                                                                               <a href="https://social.ipfire.org/@news">
+                                                                                       <i class="fa-brands fa-mastodon"></i>
+                                                                               </a>
+                                                                       </div>
+                                                                       <div class="level-item">
+                                                                               <a href="https://twitter.com/ipfire">
+                                                                                       <i class="fa-brands fa-twitter"></i>
+                                                                               </a>
+                                                                       </div>
+                                                                       <div class="level-item">
+                                                                               <a href="https://linkedin.com/company/ipfire">
+                                                                                       <i class="fa-brands fa-linkedin-in"></i>
+                                                                               </a>
+                                                                       </div>
                                                                </div>
-                                                               <div class="level-item">
-                                                                       <a href="https://linkedin.com/company/ipfire">
-                                                                               <i class="fa-brands fa-linkedin-in"></i>
-                                                                       </a>
-                                                               </div>
-                                                       </div>
-                                                       <div class="level is-mobile">
-                                                               <div class="level-item">
-                                                                       <a href="/feed.xml">
-                                                                               <i class="fas fa-rss fa-2x"></i>
-                                                                       </a>
+                                                               <div class="level is-mobile">
+                                                                       <div class="level-item">
+                                                                               <a href="/feed.xml">
+                                                                                       <i class="fas fa-rss fa-2x"></i>
+                                                                               </a>
+                                                                       </div>
                                                                </div>
                                                        </div>
                                                </div>