Add pageview counter to footer with percentage display

- Display current page views and total site views in footer
- Show percentage of page views relative to total
- Use elegant single-line format with eye icon
- Integrate with existing GoatCounter analytics

Author: ibralyousef

_includes/footer.html

@@ -30,14 +30,72 @@
 
   <!-- Page views counter -->
   {% if site.pageviews.provider and site.analytics[site.pageviews.provider].id %}
-    <p class="pageviews-display">
-      Page Views (<span id="footer-pageviews">
-        <i class="fas fa-spinner fa-spin small"></i>
-      </span>), 
-      Total Views (<span id="footer-totalviews">
-        <i class="fas fa-spinner fa-spin small"></i>
-      </span>)
+    <p class="pageviews-display text-muted small">
+      <i class="fas fa-eye fa-fw"></i>
+      <span id="footer-pageviews">
+        <i class="fas fa-spinner fa-spin"></i>
+      </span> / 
+      <span id="footer-totalviews">
+        <i class="fas fa-spinner fa-spin"></i>
+      </span>
+      (<span id="footer-percentage">
+        <i class="fas fa-spinner fa-spin"></i>
+      </span>%)
     </p>
+    
+    <!-- Include the pageview counter script -->
+    <script>
+      document.addEventListener('DOMContentLoaded', () => {
+        const pv = document.getElementById('footer-pageviews');
+        const totalPv = document.getElementById('footer-totalviews');
+        const percentPv = document.getElementById('footer-percentage');
+        
+        let pageCount = 0;
+        let totalCount = 0;
+
+        if (pv !== null) {
+          const uri = location.pathname.replace(/\/$/, '');
+          const url = `https://{{ site.analytics.goatcounter.id }}.goatcounter.com/counter/${encodeURIComponent(uri)}.json`;
+
+          fetch(url)
+            .then((response) => response.json())
+            .then((data) => {
+              pageCount = parseInt(data.count.replace(/\D/g, '')) || 1;
+              pv.innerText = new Intl.NumberFormat().format(pageCount);
+              updatePercentage();
+            })
+            .catch((error) => {
+              pageCount = 1;
+              pv.innerText = '1';
+              updatePercentage();
+            });
+        }
+
+        if (totalPv !== null) {
+          const totalUrl = `https://{{ site.analytics.goatcounter.id }}.goatcounter.com/counter/TOTAL.json`;
+
+          fetch(totalUrl)
+            .then((response) => response.json())
+            .then((data) => {
+              totalCount = parseInt(data.count.replace(/\D/g, '')) || 1;
+              totalPv.innerText = new Intl.NumberFormat().format(totalCount);
+              updatePercentage();
+            })
+            .catch((error) => {
+              totalCount = 1;
+              totalPv.innerText = '1';
+              updatePercentage();
+            });
+        }
+        
+        function updatePercentage() {
+          if (pageCount > 0 && totalCount > 0 && percentPv !== null) {
+            const percentage = ((pageCount / totalCount) * 100).toFixed(2);
+            percentPv.innerText = percentage;
+          }
+        }
+      });
+    </script>
   {% endif %}
 
   <p>

_includes/js-selector.html

@@ -85,13 +85,3 @@
   {% endif %}
 {% endif %}
 
-<!-- Footer Pageviews -->
-{% assign provider = site.pageviews.provider %}
-{% if provider and provider != empty %}
-  {% case provider %}
-    {% when 'goatcounter' %}
-      {% if site.analytics[provider].id != empty and site.analytics[provider].id %}
-        {% include pageviews/footer-counter.html %}
-      {% endif %}
-  {% endcase %}
-{% endif %}

_includes/pageviews/footer-counter.html

@@ -11,45 +11,27 @@
       // Fetch page-specific views
       const pageUrl = `https://{{ site.analytics.goatcounter.id }}.goatcounter.com/counter/${encodeURIComponent(uri)}.json`;
 
-      console.log('Fetching page views from:', pageUrl);
-      
       fetch(pageUrl)
-        .then((response) => {
-          if (!response.ok) {
-            throw new Error(`HTTP error! status: ${response.status}`);
-          }
-          return response.json();
-        })
+        .then((response) => response.json())
         .then((data) => {
-          console.log('Page view data:', data);
-          const count = data.count ? data.count.replace(/\D/g, '') : '0';
-          footerPv.innerText = count ? new Intl.NumberFormat().format(count) : '0';
+          const count = data.count.replace(/\D/g, '');
+          footerPv.innerText = new Intl.NumberFormat().format(count);
         })
         .catch((error) => {
-          console.error('Error fetching page views:', error);
-          footerPv.innerText = '0';
+          footerPv.innerText = '1';
         });
 
       // Fetch total site views
       const totalUrl = `https://{{ site.analytics.goatcounter.id }}.goatcounter.com/counter/TOTAL.json`;
 
-      console.log('Fetching total views from:', totalUrl);
-      
       fetch(totalUrl)
-        .then((response) => {
-          if (!response.ok) {
-            throw new Error(`HTTP error! status: ${response.status}`);
-          }
-          return response.json();
-        })
+        .then((response) => response.json())
         .then((data) => {
-          console.log('Total view data:', data);
-          const count = data.count ? data.count.replace(/\D/g, '') : '0';
-          footerTotal.innerText = count ? new Intl.NumberFormat().format(count) : '0';
+          const count = data.count.replace(/\D/g, '');
+          footerTotal.innerText = new Intl.NumberFormat().format(count);
         })
         .catch((error) => {
-          console.error('Error fetching total views:', error);
-          footerTotal.innerText = '0';
+          footerTotal.innerText = '1';
         });
     }
   });