Gate demo feeds behind demo mode, add empty state and demo hello bar

Previously demo-feed.json seeded automatically for every first-time
visitor. Demo feeds now only load via ?demo=1 or /demo/, first-time
visitors see an empty state with actions to add/discover feeds, and
demo mode shows a dismissible hello bar with an exit action that
breaks out of the /demo/ iframe wrapper.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Author: hhkaos

CHANGELOG.md

@@ -8,3 +8,15 @@
   modal with the feed URL pre-filled instead of subscribing immediately,
   so the user confirms before a feed is added. No dialog is shown if the
   feed is already subscribed. ([#1](https://github.com/OpenTechEvents/ote-reader/issues/1))
+- Demo feeds (`demo-feed.json` and the directory samples) now only load in
+  demo mode (`?demo=1` or `/demo/`), instead of seeding automatically for
+  every first-time visitor with an empty state.
+
+### Added
+
+- An empty state ("Empieza con tus propias fuentes OTE") with actions to
+  add a feed, discover feeds, or open the demo, shown when there are no
+  subscribed feeds.
+- A dismissible "Estás viendo la demo" hello bar with a "Salir de la demo"
+  action when running in demo mode, including breaking out of the `/demo/`
+  iframe wrapper back to the top-level reader.

app.js

@@ -1,17 +1,18 @@
 (function () {
   'use strict';
 
-  var STORAGE = 'ote-reader-state-v1';
+  var DEMO_MODE = new URLSearchParams(location.search).get('demo') === '1' || location.pathname.replace(/\/+$/, '').endsWith('/demo');
+  var STORAGE = DEMO_MODE ? 'ote-reader-demo-state-v1' : 'ote-reader-state-v1';
   var INSTALL_DISMISSED = 'ote-reader-install-dismissed-v1';
   var THEME_STORAGE = 'ote-reader-theme-v1';
   var WIDTH_STORAGE = 'ote-reader-width-v1';
   var ADOPTERS_URL = 'https://opentechevents.org/data/adopters.json';
-  var DEFAULT_FEEDS = [
-    { url: new URL('demo-feed.json', location.href).href, title: 'Feed demo' }
+  var DEMO_FEEDS = [
+    { url: new URL('demo-feed.json', document.baseURI).href, title: 'Feed demo' }
   ];
   var DIRECTORY_DEMO_FEEDS = [
-    { url: new URL('eventos-wiki-demo-feed.json', location.href).href, title: 'Eventos Wiki demo' },
-    { url: new URL('techconf-demo-feed.json', location.href).href, title: 'TechConf España demo' }
+    { url: new URL('eventos-wiki-demo-feed.json', document.baseURI).href, title: 'Eventos Wiki demo' },
+    { url: new URL('techconf-demo-feed.json', document.baseURI).href, title: 'TechConf España demo' }
   ];
   var DIRECTORY_FOLDER = 'Directorios OTE';
   var DEFAULT_FOLDERS = ['Conferencias', 'Eventos Almería', 'CFP para charlas'];
@@ -96,13 +97,13 @@
     } catch (e) {
       showMessage('No se pudo leer el estado guardado. Se usará una sesión limpia.', 'warn');
     }
-    if (!state.feeds.length) {
-      DEFAULT_FEEDS.forEach(function (feed) {
+    if (DEMO_MODE && !state.feeds.length) {
+      DEMO_FEEDS.forEach(function (feed) {
         state.feeds.push({ url: feed.url, title: feed.title, status: 'pending' });
       });
     }
     migrateCategories();
-    seedDirectoryDemoFeeds();
+    if (DEMO_MODE) seedDirectoryDemoFeeds();
     migrateBoards();
     persist();
   }
@@ -120,15 +121,16 @@
   }
 
   function migrateCategories() {
-    if (!state.categories.length) {
+    if (!state.categories.length && state.feeds.length) {
       state.categories.push({
         id: 'community',
         name: 'Community feeds',
         open: true,
         feedUrls: state.feeds.map(function (feed) { return feed.url; })
       });
     }
-    seedDefaultFolders();
+    if (DEMO_MODE) seedDefaultFolders();
+    if (!state.categories.length) return;
     var known = new Set(state.categories.flatMap(function (category) { return category.feedUrls || []; }));
     var missing = state.feeds.map(function (feed) { return feed.url; }).filter(function (url) { return !known.has(url); });
     if (missing.length) state.categories[0].feedUrls = unique((state.categories[0].feedUrls || []).concat(missing));
@@ -1087,7 +1089,8 @@
     if (!events.length) {
       widget.events = [];
       widget.setAttribute('empty-message', 'No hay eventos con esos filtros.');
-      showMessage('No hay eventos con esos filtros.', 'warn', true);
+      if (!state.feeds.length) showEmptyState();
+      else showMessage('No hay eventos con esos filtros.', 'warn', true);
       return;
     }
     clearMessages();
@@ -1342,6 +1345,40 @@
     $('messages').replaceChildren();
   }
 
+  function showEmptyState() {
+    var box = $('messages');
+    box.replaceChildren();
+    var empty = document.createElement('section');
+    empty.className = 'empty-state';
+    var title = document.createElement('h3');
+    title.textContent = DEMO_MODE ? 'Demo sin eventos cargados' : 'Empieza con tus propias fuentes OTE';
+    var copy = document.createElement('p');
+    copy.textContent = DEMO_MODE
+      ? 'La demo usa feeds de ejemplo para enseñar folders, vistas y colecciones.'
+      : 'Suscríbete a feeds OTE, descubre fuentes publicadas o abre una demo con datos de ejemplo.';
+    var actions = document.createElement('div');
+    actions.className = 'empty-actions';
+    var manual = document.createElement('button');
+    manual.type = 'button';
+    manual.textContent = 'Añadir feed';
+    manual.addEventListener('click', function () { openModal('subscribe-modal'); });
+    var discover = document.createElement('button');
+    discover.type = 'button';
+    discover.className = 'ghost';
+    discover.textContent = 'Discover new feeds';
+    discover.addEventListener('click', openSources);
+    actions.append(manual, discover);
+    if (!DEMO_MODE) {
+      var demo = document.createElement('a');
+      demo.className = 'ghost-link';
+      demo.href = 'demo/';
+      demo.textContent = 'Ver demo';
+      actions.appendChild(demo);
+    }
+    empty.append(title, copy, actions);
+    box.appendChild(empty);
+  }
+
   function subscribe(rawUrl) {
     var url;
     try { url = normaliseUrl(rawUrl); } catch (e) {
@@ -1405,6 +1442,7 @@
   }
 
   function bind() {
+    $('demo-exit').addEventListener('click', exitDemo);
     $('subscribe-open-side').addEventListener('click', function () { openModal('subscribe-modal'); });
     $('find-sources-open').addEventListener('click', openSources);
     $('sidebar-toggle').addEventListener('click', toggleSidebar);
@@ -1578,6 +1616,18 @@
     $('help-install').hidden = !canInstall;
   }
 
+  function updateDemoUi() {
+    $('demo-bar').hidden = !DEMO_MODE;
+  }
+
+  function exitDemo(event) {
+    var target = location.origin + '/';
+    if (window.top !== window.self) {
+      event.preventDefault();
+      window.top.location.href = target;
+    }
+  }
+
   async function promptInstall() {
     if (!deferredInstall) return;
     deferredInstall.prompt();
@@ -1633,6 +1683,7 @@
     loadState();
     bind();
     updateInstallUi();
+    updateDemoUi();
     await waitForEmbed();
     render();
     applySubscribeParam();

demo/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>OTE Reader Demo</title>
+<style>
+html, body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+iframe {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+</style>
+</head>
+<body>
+<iframe title="OTE Reader demo" src="../?demo=1"></iframe>
+</body>
+</html>

index.html

@@ -14,6 +14,13 @@
 <body>
 <a class="skip" href="#events">Saltar a eventos</a>
 
+<section class="hello-bar" id="demo-bar" hidden>
+  <p>Estás viendo la <strong>demo</strong> de OTE Reader con feeds de ejemplo.</p>
+  <div>
+    <a class="primary-link" id="demo-exit" href="./">Salir de la demo</a>
+  </div>
+</section>
+
 <section class="hello-bar" id="install-bar" hidden>
   <p>Instala OTE Reader para tener tus eventos siempre a mano.</p>
   <div>

styles.css

@@ -160,11 +160,11 @@ button:hover, .primary-link:hover {
   background: var(--field);
   color: var(--ink);
 }
-.primary-action, .install-button, .hello-bar button:not(.icon-button), .help-install button {
+.primary-action, .install-button, .hello-bar button:not(.icon-button), .hello-bar .primary-link, .help-install button {
   background: var(--accent);
   border-color: var(--accent);
 }
-.hello-bar button:not(.icon-button) {
+.hello-bar button:not(.icon-button), .hello-bar .primary-link {
   min-height: 28px;
   padding: 4px 9px;
   border-radius: 6px;
@@ -743,6 +743,29 @@ label {
   color: var(--muted);
 }
 .message.warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); background: color-mix(in srgb, var(--warn) 10%, var(--panel)); color: var(--warn); }
+.empty-state {
+  display: grid;
+  gap: 10px;
+  max-width: 620px;
+  padding: 22px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--panel);
+}
+.empty-state h3 {
+  margin: 0;
+  font-size: 1.1rem;
+}
+.empty-state p {
+  margin: 0;
+  color: var(--muted);
+}
+.empty-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 4px;
+}
 
 .chips {
   display: flex;