From 9dfe4e1bfd09e7e2053916022896aa7411a3e5fe Mon Sep 17 00:00:00 2001
From: grandeljay <github.jay@grandel.anonaddy.me>
Date: Wed, 30 Nov 2022 10:15:02 +0100
Subject: [PATCH] Clarify wishthis advantages

---
 src/assets/js/home.js | 16 ++++++++++++++++
 src/pages/home.php    | 15 ++++++++++++---
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/assets/js/home.js b/src/assets/js/home.js
index 5baa9259..75da5f9c 100644
--- a/src/assets/js/home.js
+++ b/src/assets/js/home.js
@@ -1,4 +1,19 @@
 $(function() {
+    /**
+     * Popups
+     */
+    const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+    /** Why wishthis? */
+    popup_settings_why_wishthis = {
+        'position'  : 'top center',
+        'variation' : isDarkMode ? '' : 'inverted',
+        'hoverable' : true,
+    };
+
+    $('[data-content]').popup(popup_settings_why_wishthis);
+    $('[data-html]').popup(popup_settings_why_wishthis);
+
     /**
      * Statistics
      */
@@ -106,5 +121,6 @@ function showStatistic(elementStatistic, amount, timeout, modified) {
         'content'   : modified,
         'position'  : 'right center',
         'variation' : isDarkMode ? '' : 'inverted',
+        'hoverable' : true,
     });
 }
diff --git a/src/pages/home.php b/src/pages/home.php
index 7d241dec..dc773f9f 100644
--- a/src/pages/home.php
+++ b/src/pages/home.php
@@ -103,13 +103,22 @@ $page->navigation();
                     <p><?= __('As a non-commercial project it remains') ?></p>
                     <div class="flex why-wishthis">
                         <ul class="ui list">
-                            <li class="item">
+                            <li class="item" data-content="<?= __('unless you want them') ?>">
                                 <i class="green check icon" aria-hidden="true"></i>
                                 <div class="content"><?= __('free of advertisements') ?></div>
                             </li>
-                            <li class="item">
+                            <?php
+                            $popup_html = sprintf(
+                                /** TRANSLATORS: %s: plausible */
+                                __('see %s'),
+                                '<a href=\'https://plausible.io\' target=\'_blank\'>' . __('plausible') . ' <i class=\'external alternate icon\'></i></a>'
+                            );
+                            ?>
+                            <li class="item" data-html="<?= $popup_html ?>">
                                 <i class="green check icon" aria-hidden="true"></i>
-                                <div class="content"><?= __('without tracking') ?></div>
+                                <div class="content">
+                                    <?= __('without intrusive tracking') ?>
+                                </div>
                             </li>
                         </ul>
                         <ul class="ui list">