chore: settings interface for github readme stats

README.md

@@ -43,7 +43,7 @@
 * [How to use](#-how-to-use)
 * [Configuration Options](#-configuration-options)
 * [API Endpoints](#-api-endpoints)
-* [Prometheus Export](#%EF%B8%8F-prometheus-export)
+* [Integrations](#-integrations)
 * [WakaTime Integration](#%EF%B8%8F-wakatime-integration)
 * [Best Practices](#-best-practices)
 * [Developer Notes](#-developer-notes)
@@ -61,7 +61,7 @@ I'd love to get some community feedback from active Wakapi users. If you want, p
 * ✅ REST API
 * ✅ Partially compatible with WakaTime
 * ✅ WakaTime integration
-* ✅ Support for [Prometheus](https://github.com/muety/wakapi#%EF%B8%8F-prometheus-export) exports
+* ✅ Support for Prometheus exports
 * ✅ Self-hosted
 
 ## 🚧 Roadmap
@@ -195,7 +195,8 @@ The following API endpoints are available. A more detailed Swagger documentation
 * `GET /api/compat/wakatime/v1/users/current/summaries` (see [Wakatime API docs](https://wakatime.com/developers#summaries))
 * `GET /api/health`
 
-## ⤴️ Prometheus Export
+## 🤝 Integrations
+### Prometheus Export
 If you want to export your Wakapi statistics to Prometheus to view them in a Grafana dashboard or so please refer to an excellent tool called **[wakatime_exporter](https://github.com/MacroPower/wakatime_exporter)**.
 
 [![](https://github-readme-stats.vercel.app/api/pin/?username=MacroPower&repo=wakatime_exporter&show_owner=true)](https://github.com/MacroPower/wakatime_exporter)
@@ -204,9 +205,13 @@ It is a standalone webserver that connects to your Wakapi instance and exposes t
 
 Simply configure the exporter with `WAKA_SCRAPE_URI` to equal `"https://wakapi.your-server.com/api/compat/wakatime/v1"` and set your API key accordingly.
 
-## ⤵️ WakaTime Integration
+### WakaTime Integration
 Wakapi plays well together with [WakaTime](https://wakatime.com). For one thing, you can **forward heartbeats** from Wakapi to WakaTime to effectively use both services simultaneously. In addition, there is the option to **import historic data** from WakaTime for consistency between both services. Both features can be enabled in the _Integrations_ section of your Wakapi instance's settings page.     
 
+### GitHub Readme Stats Integrations
+Wakapi also integrates with [GitHub Readme Stats](https://github.com/anuraghazra/github-readme-stats#wakatime-week-stats) to generate fancy cards for you. Here is an example.
+![](https://github-readme-stats.vercel.app/api/wakatime?username=n1try&layout=compact&api_domain=wakapi.dev)
+
 ## 👍 Best Practices
 It is recommended to use wakapi behind a **reverse proxy**, like [Caddy](https://caddyserver.com) or _nginx_ to enable **TLS encryption** (HTTPS).
 However, if you want to expose your wakapi instance to the public anyway, you need to set `server.listen_ipv4` to `0.0.0.0` in `config.yml`

views/settings.tpl.html

@@ -416,6 +416,24 @@
                         access to the respective endpoint. See <a href="settings#public_data" class="underline">Public Data</a> setting.</p>
                     {{ end }}
                 </div>
+
+                <div class="mt-10 text-gray-300 text-sm">
+                    <h3 class="inline-block font-semibold text-md mb-4 border-b border-green-700">
+                        GitHub Readme Stats
+                    </h3>
+
+                    <p class="mb-4">Wakapi intregrates with <a href="https://github.com/anuraghazra/github-readme-stats#wakatime-week-stats" class="underline" target="_blank" rel="noopener noreferrer">GitHub Readme Stats</a> to generate fancy cards for you.</p>
+
+                    {{ if gt .User.ShareDataMaxDays 0 }}
+                    <h3 class="font-semibold mb-2">Example</h3>
+                    <div class="flex flex-col mb-4">
+                        <img src="https://github-readme-stats.vercel.app/api/wakatime?username={{ .User.ID }}&layout=compact&api_domain=%s" class="with-url-src-no-scheme">
+                        <p class="mt-2"><strong>Source URL:</strong>
+                            <span class="break-words text-xs bg-gray-900 rounded py-1 px-2 font-mono with-url-inner-no-scheme">https://github-readme-stats.vercel.app/api/wakatime?username={{ .User.ID }}&layout=compact&api_domain=%s</span>
+                        </p>
+                    </div>
+                    {{ end }}
+                </div>
             </div>
         </details>
 
@@ -513,10 +531,20 @@
         e.setAttribute('src', e.getAttribute('src').replace('%s', baseUrl))
         e.classList.remove('hidden')
     })
+    document.querySelectorAll('.with-url-src-no-scheme').forEach(e => {
+        const strippedUrl = baseUrl.replace(/https?:\/\//, '')
+        e.setAttribute('src', e.getAttribute('src').replace('%s', strippedUrl))
+        e.classList.remove('hidden')
+    })
     document.querySelectorAll('.with-url-inner').forEach(e => {
         e.innerHTML = e.innerHTML.replace('%s', baseUrl)
         e.classList.remove('hidden')
     })
+    document.querySelectorAll('.with-url-inner-no-scheme').forEach(e => {
+        const strippedUrl = baseUrl.replace(/https?:\/\//, '')
+        e.innerHTML = e.innerHTML.replace('%s', strippedUrl)
+        e.classList.remove('hidden')
+    })
 
     const btnRegenerate = document.querySelector('#btn-regenerate-summaries')
     const formRegenerate = document.querySelector('#form-regenerate-summaries')