From d30ab1a293dd7f26d356ec209a521db68ab776db Mon Sep 17 00:00:00 2001
From: beerpiss <lacvtg.a1.2023@gmail.com>
Date: Fri, 12 Jan 2024 09:48:26 +0700
Subject: [PATCH] add basic analytics (pageviews + extension downloads)

---
 extensions/index.html | 62 ++++++++++++++++++++++++++++++++++---------
 index.html            | 10 ++++++-
 2 files changed, 58 insertions(+), 14 deletions(-)
diff --git a/extensions/index.html b/extensions/index.html
index 343baf98..c186c7f0 100644
--- a/extensions/index.html
+++ b/extensions/index.html
@@ -36,6 +36,8 @@
         integrity="sha384-mPO6U7t0sNHfI1UIWNf5U6FDzprqWgAMKfOGW86JVGCKoU/7HPdy6DwBaWOsi4eV"
         crossorigin="anonymous"></script>
     <script src="extensions.js"></script>
+    <script data-goatcounter="https://keiyoushi.goatcounter.com/count"
+        async src="//gc.zgo.at/count.js"></script>
 </head>
 
 <body>
@@ -47,49 +49,83 @@
     </div>
     <div class="sources" x-data="extensionList">
         <h1 class="sources__title">Extensions</h1>
+
         <template x-if="loading === LoadingStatus.Loading">
             <sl-spinner class="sources__status" style="font-size:3rem"></sl-spinner>
         </template>
+        
         <template x-if="loading === LoadingStatus.Error">
             <div class="sources__status">Could not load extension list.</div>
         </template>
+        
         <template x-if="loading === LoadingStatus.Loaded">
             <div>
                 <div class="source-search" x-effect="updateFilteredList">
                     <div class="source-search__nsfw-wrapper">
                         <span class="source-search__nsfw-label">Display mode: </span>
-                        <sl-radio-group size="small" name="nsfw" value="all" @sl-change="nsfw = $event.target.value">
+                        <sl-radio-group size="small" 
+                            name="nsfw" 
+                            value="all" 
+                            @sl-change="nsfw = $event.target.value">
                             <sl-radio-button value="all">Show all</sl-radio-button>
                             <sl-radio-button value="nsfw">NSFW</sl-radio-button>
                             <sl-radio-button value="safe">SFW</sl-radio-button>
                         </sl-radio-group>
                     </div>
-                    <sl-input class="source-search__title" placeholder="Search by name or ID..."
-                        x-model="query"></sl-input>
-                    <sl-select class="source-search__language" multiple clearable placeholder="Filter by languages"
+                    
+                    <sl-input class="source-search__title" 
+                        placeholder="Search by name or ID..."
+                        x-model="query">
+                    </sl-input>
+                    
+                    <sl-select class="source-search__language"
+                        multiple clearable
+                        placeholder="Filter by languages"
                         @sl-change="selectedLanguages = event.target.value">
                         <template x-for="(language, index) in languages" :key="index">
                             <sl-option :value="language" x-text="languageName(language)"></sl-option>
                         </template>
                     </sl-select>
                 </div>
+                
                 <template x-for="extension in filtered" :key="extension.pkg">
-                    <div class="source" :id="extension.pkg.replace('eu.kanade.tachiyomi.extension.', '')">
+                    <div class="source" 
+                        :id="extension.pkg.replace('eu.kanade.tachiyomi.extension.', '')">
                         <a :href="`#${extension.pkg.replace('eu.kanade.tachiyomi.extension.', '')}`"
-                            class="source__anchor">#</a> <img class="source__icon" :alt="`Icon for ${extension.name}`"
-                            :src="`${$store.repoUrl}/icon/${extension.pkg}.png`" loading="lazy" width="42" height="42">
+                            class="source__anchor">
+                            #
+                        </a>
+                        
+                        <img class="source__icon"
+                            :alt="`Icon for ${extension.name}`"
+                            :src="`${$store.repoUrl}/icon/${extension.pkg}.png`"
+                            loading="lazy"
+                            width="42"
+                            height="42">
+
                         <div class="source__info">
                             <div class="source__name">
-                                <span x-text="extension.name.split(': ')[1]"></span> <span class="source__version"
+                                <span x-text="extension.name.split(': ')[1]"></span> 
+                                
+                                <span class="source__version"
                                     x-text="`v${extension.version}`"></span>
-                                <sl-tag x-cloak size="small" variant="danger"
-                                    class="content-rating content-rating--nsfw"
-                                    x-show="extension.nsfw === 1">18+</sl-tag>
+
+                                <sl-tag class="content-rating content-rating--nsfw"
+                                    size="small" variant="danger"
+                                    x-cloak x-show="extension.nsfw === 1">
+                                    18+
+                                </sl-tag>
                             </div>
                             <div class="source__version" x-text="simpleLanguageName(extension.lang)"></div>
                         </div>
-                        <sl-button pill size="small" download class="download-button"
-                            :href="`${$store.repoUrl}/apk/${extension.apk}`"><sl-icon name="download"></sl-icon></sl-button>
+                        <sl-button class="download-button" 
+                            pill 
+                            size="small" 
+                            download
+                            :href="`${$store.repoUrl}/apk/${extension.apk}`"
+                            @click="window.goatcounter?.count({ path: `/apk/${extension.apk}` })">
+                            <sl-icon name="download"></sl-icon>
+                        </sl-button>
                     </div>
                 </template>
             </div>
diff --git a/index.html b/index.html
index 6bdd96f9..99b399de 100644
--- a/index.html
+++ b/index.html
@@ -31,6 +31,8 @@
         src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.5.2/cdn/shoelace-autoloader.js"
         integrity="sha384-ILzDiPYY4je5i95gGzpVe0e88rFqVnoz3i7HPBsRbtEHxfkA7wR8E+PwjCgt1Bin"
         crossorigin="anonymous"></script>
+    <script data-goatcounter="https://keiyoushi.goatcounter.com/count"
+        async src="//gc.zgo.at/count.js"></script>
 </head>
 <body>
     <header class="header">
@@ -51,7 +53,13 @@
            <li>TachiyomiSY Preview r539+</li>
         </ul>
 
-        <sl-button style="display: flex; justify-content: center;" variant="primary" href="tachiyomi://add-repo?url=https://raw.githubusercontent.com/keiyoushi/extensions/repo/index.min.json">Add to Tachiyomi</sl-button>
+        <sl-button 
+            style="display: flex; justify-content: center;"
+            variant="primary"
+            href="tachiyomi://add-repo?url=https://raw.githubusercontent.com/keiyoushi/extensions/repo/index.min.json"
+            onclick="window.goatcounter?.count({ path: location.pathname + '#add-to-tachiyomi' })">
+            Add to Tachiyomi
+        </sl-button>
     </div>
 
     <div>
