@rmdes/indiekit-endpoint-funkwhale 1.0.3 → 1.0.5

package/index.js

@@ -45,10 +45,6 @@ export default class FunkwhaleEndpoint {
     return path.join(__dirname, "locales");
   }
 
-  get styles() {
-    return path.join(__dirname, "assets", "styles.css");
-  }
-
   get navigationItems() {
     return {
       href: this.options.mountPath,
@@ -68,17 +64,12 @@ export default class FunkwhaleEndpoint {
 
   /**
    * Protected routes (require authentication)
-   * HTML pages for admin dashboard
+   * Admin dashboard only - detailed views are on the public frontend
    */
   get routes() {
-    // Dashboard
+    // Dashboard overview
     protectedRouter.get("/", dashboardController.get);
 
-    // Individual sections (HTML pages)
-    protectedRouter.get("/listenings", listeningsController.get);
-    protectedRouter.get("/favorites", favoritesController.get);
-    protectedRouter.get("/stats", statsController.get);
-
     // Manual sync trigger
     protectedRouter.post("/sync", dashboardController.sync);
 
@@ -87,13 +78,10 @@ export default class FunkwhaleEndpoint {
 
   /**
    * Public routes (no authentication required)
-   * JSON API endpoints for Eleventy widgets
+   * JSON API endpoints for Eleventy frontend
    */
   get routesPublic() {
-    // Now playing widget
     publicRouter.get("/api/now-playing", nowPlayingController.api);
-
-    // JSON API for widgets
     publicRouter.get("/api/listenings", listeningsController.api);
     publicRouter.get("/api/favorites", favoritesController.api);
     publicRouter.get("/api/stats", statsController.api);
@@ -112,6 +100,9 @@ export default class FunkwhaleEndpoint {
     Indiekit.config.application.funkwhaleConfig = this.options;
     Indiekit.config.application.funkwhaleEndpoint = this.mountPath;
 
+    // Store database getter for controller access
+    Indiekit.config.application.getFunkwhaleDb = () => Indiekit.database;
+
     // Start background sync if database is available
     if (Indiekit.config.application.mongodbUrl) {
       startSync(Indiekit, this.options);

package/lib/controllers/dashboard.js

@@ -1,6 +1,5 @@
 import { FunkwhaleClient } from "../funkwhale-client.js";
-import { runSync } from "../sync.js";
-import { getSummary } from "../stats.js";
+import { runSync, getCachedStats, refreshStatsCache } from "../sync.js";
 import * as utils from "../utils.js";
 
 /**
@@ -13,7 +12,7 @@ export const dashboardController = {
    */
   async get(request, response, next) {
     try {
-      const { funkwhaleConfig } = request.app.locals.application;
+      const { funkwhaleConfig, funkwhaleEndpoint } = request.app.locals.application;
 
       if (!funkwhaleConfig) {
         return response.status(500).render("funkwhale", {
@@ -64,16 +63,23 @@ export const dashboardController = {
         });
       }
 
-      // Get stats summary from database if available
-      let summary = null;
-      const db = request.app.locals.database;
-      if (db) {
-        try {
-          summary = await getSummary(db, "all");
-        } catch (dbError) {
-          console.error("[Funkwhale] DB error:", dbError.message);
+      // Get stats from cache (same source as public API)
+      // If cache is empty, try to refresh it from database
+      let cachedStats = getCachedStats();
+      if (!cachedStats) {
+        const getDb = request.app.locals.application.getFunkwhaleDb;
+        if (getDb) {
+          const db = getDb();
+          if (db) {
+            cachedStats = await refreshStatsCache(db, limits);
+          }
         }
       }
+      const summary = cachedStats?.summary?.all || null;
+
+      // Determine public frontend URL (strip 'api' from mount path)
+      // e.g., /funkwhaleapi -> /funkwhale
+      const publicUrl = funkwhaleEndpoint ? funkwhaleEndpoint.replace(/api$/, "") : "/funkwhale";
 
       response.render("funkwhale", {
         title: response.locals.__("funkwhale.title"),
@@ -81,6 +87,7 @@ export const dashboardController = {
         listenings: listenings.slice(0, 5),
         favorites: favorites.slice(0, 5),
         summary,
+        publicUrl,
         mountPath: request.baseUrl,
       });
     } catch (error) {

package/lib/sync.js

@@ -30,6 +30,25 @@ export function setCachedStats(stats) {
   cachedStatsTime = Date.now();
 }
 
+/**
+ * Refresh stats cache from database (for when cache is empty)
+ * @param {object} db - MongoDB database instance
+ * @param {object} limits - Limits for top lists
+ * @returns {Promise<object|null>} - Stats or null if failed
+ */
+export async function refreshStatsCache(db, limits = {}) {
+  if (!db) return null;
+  try {
+    const stats = await getAllStats(db, limits);
+    setCachedStats(stats);
+    console.log("[Funkwhale] Stats cache refreshed on-demand");
+    return stats;
+  } catch (err) {
+    console.error("[Funkwhale] Failed to refresh stats cache:", err.message);
+    return null;
+  }
+}
+
 /**
  * Start background sync process
  * @param {object} Indiekit - Indiekit instance

package/locales/en.json

@@ -30,8 +30,8 @@
       "noConfig": "Funkwhale endpoint not configured correctly"
     },
     "widget": {
-      "description": "View your Funkwhale listening activity",
-      "view": "View Activity"
+      "description": "View full listening activity on the public page",
+      "view": "View Public Page"
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rmdes/indiekit-endpoint-funkwhale",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Funkwhale listening activity endpoint for Indiekit. Display listening history, favorites, and statistics.",
   "keywords": [
     "indiekit",
@@ -34,7 +34,6 @@
     ".": "./index.js"
   },
   "files": [
-    "assets",
     "includes",
     "lib",
     "locales",

package/views/funkwhale.njk

@@ -137,6 +137,21 @@
       text-overflow: ellipsis;
     }
     .fw-list-title:hover { text-decoration: underline; }
+
+    /* Public link banner */
+    .fw-public-link {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 1rem;
+      background: var(--color-offset, #f5f5f5);
+      border-radius: 0.5rem;
+      margin-top: 2rem;
+    }
+    .fw-public-link p {
+      margin: 0;
+      color: var(--color-text-secondary, #666);
+    }
   </style>
 
   {% if error %}
@@ -195,11 +210,6 @@
           <span class="fw-stat-label">{{ __("funkwhale.artists") }}</span>
         </div>
       </div>
-      {{ button({
-        classes: "button--secondary",
-        href: mountPath + "/stats",
-        text: __("funkwhale.viewStats")
-      }) }}
     </section>
     {% endif %}
 
@@ -229,11 +239,6 @@
         </li>
         {% endfor %}
       </ul>
-      {{ button({
-        classes: "button--secondary",
-        href: mountPath + "/listenings",
-        text: __("funkwhale.viewAll")
-      }) }}
       {% else %}
       {{ prose({ text: __("funkwhale.noRecentPlays") }) }}
       {% endif %}
@@ -262,14 +267,19 @@
         </li>
         {% endfor %}
       </ul>
-      {{ button({
-        classes: "button--secondary",
-        href: mountPath + "/favorites",
-        text: __("funkwhale.viewAll")
-      }) }}
       {% else %}
       {{ prose({ text: __("funkwhale.noFavorites") }) }}
       {% endif %}
     </section>
+
+    {# Link to public page #}
+    <div class="fw-public-link">
+      <p>{{ __("funkwhale.widget.description") }}</p>
+      {{ button({
+        href: publicUrl,
+        text: __("funkwhale.widget.view"),
+        target: "_blank"
+      }) }}
+    </div>
   {% endif %}
 {% endblock %}

package/assets/styles.css

@@ -1,453 +0,0 @@
-/* Funkwhale Endpoint Styles */
-
-/* Sections */
-.funkwhale-section {
-  margin-block-end: 2rem;
-}
-
-.funkwhale-section h2 {
-  margin-block-end: 1rem;
-}
-
-/* Now Playing Animation */
-.funkwhale-status {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.funkwhale-status--playing {
-  color: var(--color-accent, #22c55e);
-}
-
-.funkwhale-bars {
-  display: flex;
-  gap: 2px;
-  align-items: flex-end;
-  height: 16px;
-}
-
-.funkwhale-bars span {
-  width: 3px;
-  background: currentColor;
-  animation: funkwhale-bar 0.5s infinite ease-in-out alternate;
-}
-
-.funkwhale-bars span:nth-child(2) {
-  animation-delay: 0.2s;
-}
-
-.funkwhale-bars span:nth-child(3) {
-  animation-delay: 0.4s;
-}
-
-@keyframes funkwhale-bar {
-  from { height: 4px; }
-  to { height: 16px; }
-}
-
-/* Featured Track */
-.funkwhale-track--featured {
-  display: flex;
-  gap: 1rem;
-  padding: 1rem;
-  background: var(--color-offset, #f5f5f5);
-  border-radius: 0.5rem;
-}
-
-.funkwhale-track__cover {
-  width: 80px;
-  height: 80px;
-  object-fit: cover;
-  border-radius: 0.25rem;
-}
-
-.funkwhale-track__cover--placeholder {
-  background: var(--color-border, #ddd);
-}
-
-.funkwhale-track__info {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.funkwhale-track__title {
-  font-weight: 600;
-  text-decoration: none;
-  color: var(--color-text, inherit);
-}
-
-.funkwhale-track__title:hover {
-  text-decoration: underline;
-}
-
-.funkwhale-track__album {
-  margin: 0;
-  color: var(--color-text-muted, #666);
-  font-size: 0.875rem;
-}
-
-/* Stats Grid */
-.funkwhale-stats-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-  gap: 1rem;
-  margin-block-end: 1rem;
-}
-
-.funkwhale-stat {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 1rem;
-  background: var(--color-offset, #f5f5f5);
-  border-radius: 0.5rem;
-  text-align: center;
-}
-
-.funkwhale-stat__value {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--color-accent, #3b82f6);
-}
-
-.funkwhale-stat__label {
-  font-size: 0.75rem;
-  color: var(--color-text-muted, #666);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-/* List */
-.funkwhale-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.funkwhale-list__item {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem 0;
-  border-bottom: 1px solid var(--color-border, #eee);
-}
-
-.funkwhale-list__item:last-child {
-  border-bottom: none;
-}
-
-.funkwhale-list__cover {
-  width: 48px;
-  height: 48px;
-  object-fit: cover;
-  border-radius: 0.25rem;
-  flex-shrink: 0;
-}
-
-.funkwhale-list__cover--placeholder {
-  background: var(--color-border, #ddd);
-}
-
-.funkwhale-list__info {
-  flex: 1;
-  min-width: 0;
-}
-
-.funkwhale-list__title {
-  display: block;
-  font-weight: 500;
-  text-decoration: none;
-  color: var(--color-text, inherit);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.funkwhale-list__title:hover {
-  text-decoration: underline;
-}
-
-.funkwhale-list__album {
-  margin: 0;
-  font-size: 0.875rem;
-  color: var(--color-text-muted, #666);
-}
-
-.funkwhale-meta {
-  display: flex;
-  gap: 0.5rem;
-  color: var(--color-text-muted, #666);
-  font-size: 0.75rem;
-}
-
-/* Pagination */
-.funkwhale-pagination {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem;
-  margin-block: 1.5rem;
-}
-
-.funkwhale-pagination__info {
-  color: var(--color-text-muted, #666);
-}
-
-/* Tabs */
-.funkwhale-tabs {
-  display: flex;
-  gap: 0.25rem;
-  margin-block-end: 1.5rem;
-  border-bottom: 1px solid var(--color-border, #ddd);
-}
-
-.funkwhale-tab {
-  padding: 0.75rem 1rem;
-  border: none;
-  background: none;
-  color: var(--color-text-muted, #666);
-  cursor: pointer;
-  border-bottom: 2px solid transparent;
-  margin-bottom: -1px;
-  font-size: 0.875rem;
-  font-weight: 500;
-}
-
-.funkwhale-tab:hover {
-  color: var(--color-text, inherit);
-}
-
-.funkwhale-tab--active {
-  color: var(--color-accent, #3b82f6);
-  border-bottom-color: var(--color-accent, #3b82f6);
-}
-
-.funkwhale-tab-content {
-  display: none;
-}
-
-.funkwhale-tab-content--active {
-  display: block;
-}
-
-/* Top List */
-.funkwhale-top-list {
-  list-style: none;
-  padding: 0;
-  margin: 0 0 1.5rem 0;
-  counter-reset: rank;
-}
-
-.funkwhale-top-list__item {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.5rem 0;
-  border-bottom: 1px solid var(--color-border, #eee);
-}
-
-.funkwhale-top-list__rank {
-  width: 1.5rem;
-  height: 1.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.75rem;
-  font-weight: 600;
-  background: var(--color-offset, #f5f5f5);
-  border-radius: 50%;
-  color: var(--color-text-muted, #666);
-}
-
-.funkwhale-top-list__name {
-  flex: 1;
-  font-weight: 500;
-}
-
-.funkwhale-top-list__count {
-  font-size: 0.875rem;
-  color: var(--color-text-muted, #666);
-}
-
-/* Album Grid */
-.funkwhale-album-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-  gap: 1rem;
-  list-style: none;
-  padding: 0;
-  margin: 0 0 1.5rem 0;
-}
-
-.funkwhale-album {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.funkwhale-album__cover {
-  width: 100%;
-  aspect-ratio: 1;
-  object-fit: cover;
-  border-radius: 0.25rem;
-}
-
-.funkwhale-album__cover--placeholder {
-  background: var(--color-border, #ddd);
-}
-
-.funkwhale-album__info {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-}
-
-.funkwhale-album__title {
-  font-weight: 500;
-  font-size: 0.875rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.funkwhale-album__artist {
-  font-size: 0.75rem;
-  color: var(--color-text-muted, #666);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* Trend Chart */
-.funkwhale-chart {
-  margin: 1rem 0;
-}
-
-.funkwhale-chart__bars {
-  display: flex;
-  align-items: flex-end;
-  gap: 2px;
-  height: 120px;
-  padding: 0.5rem 0;
-}
-
-.funkwhale-chart__bar-wrapper {
-  flex: 1;
-  height: 100%;
-  display: flex;
-  align-items: flex-end;
-}
-
-.funkwhale-chart__bar {
-  width: 100%;
-  background: var(--color-accent, #3b82f6);
-  border-radius: 2px 2px 0 0;
-  min-height: 2px;
-  transition: height 0.3s ease;
-}
-
-.funkwhale-chart__bar-wrapper:hover .funkwhale-chart__bar {
-  background: var(--color-accent-hover, #2563eb);
-}
-
-.funkwhale-chart__labels {
-  display: flex;
-  justify-content: space-between;
-  font-size: 0.75rem;
-  color: var(--color-text-muted, #666);
-  margin-top: 0.5rem;
-}
-
-/* Widget Styles (for embeddable widgets) */
-.funkwhale-widget {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem;
-  background: var(--color-offset, #f5f5f5);
-  border-radius: 0.5rem;
-}
-
-.funkwhale-widget--playing {
-  background: linear-gradient(135deg, #22c55e10, #22c55e05);
-  border: 1px solid #22c55e30;
-}
-
-.funkwhale-widget__status {
-  font-size: 0.625rem;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  color: var(--color-text-muted, #666);
-  width: 100%;
-}
-
-.funkwhale-widget--playing .funkwhale-widget__status {
-  color: #22c55e;
-}
-
-.funkwhale-widget__cover {
-  width: 48px;
-  height: 48px;
-  object-fit: cover;
-  border-radius: 0.25rem;
-}
-
-.funkwhale-widget__info {
-  flex: 1;
-  min-width: 0;
-}
-
-.funkwhale-widget__title {
-  display: block;
-  font-weight: 500;
-  font-size: 0.875rem;
-  text-decoration: none;
-  color: var(--color-text, inherit);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.funkwhale-widget__time {
-  font-size: 0.75rem;
-  color: var(--color-text-muted, #666);
-}
-
-.funkwhale-widget__empty,
-.funkwhale-widget__error {
-  font-size: 0.875rem;
-  color: var(--color-text-muted, #666);
-  margin: 0;
-}
-
-/* Stats Widget */
-.funkwhale-stats-widget__grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 0.5rem;
-}
-
-.funkwhale-stats-widget__stat {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0.5rem;
-  background: var(--color-offset, #f5f5f5);
-  border-radius: 0.25rem;
-}
-
-.funkwhale-stats-widget__value {
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: var(--color-accent, #3b82f6);
-}
-
-.funkwhale-stats-widget__label {
-  font-size: 0.625rem;
-  color: var(--color-text-muted, #666);
-  text-transform: uppercase;
-}