Saltar al contenido

Crear paneles

Paneles de ejemplo

Catorce paneles de código abierto, con licencia MIT, cada uno escrito para enseñar una parte del SDK. Qué enseña cada uno, qué pide y cómo se ve en Deska.

El repositorio

deska-panels-examples reúne los paneles de abajo, la carpeta starter/ de Crea tu primer panel, y las herramientas de vista previa y revisión. El README de cada panel recorre su código, explica cada permiso y cada host, y cuenta lo que no pudo hacer.

sh
git clone https://github.com/0xPasho/deska-panels-examples.git
cd deska-panels-examples
npm install
npm run preview -- panels/team-clocks

Para probar uno en Deska, carga su carpeta de panels/ con Cargar una carpeta, o instálalo desde Descubrir. Para construir sobre uno, copia su carpeta y cambia id, name y author en panel.json. Las capturas son del propio Deska, con cada panel instalado desde Descubrir.

Empieza aquí

Team Clocks en Deska

Team Clocks

El punto de partida. Espera a deska.ready() y da formato a cada hora con init.locale, usa solo tokens del tema, guarda su lista en deska.storage, pone la hora del primer lugar en setTitle y detiene su reloj mientras visibility dice que está oculto.

Permisos: ninguno. Sitios: ninguno, nunca se conecta.

Código en GitHub

SDK Playground en Deska

SDK Playground

Cada llamada detrás de un pequeño formulario, la línea de código que ejecutó, la respuesta de Deska y qué significa cada código de error. Muestra cómo leer los rechazos por err.code, conservar el diseño entre recargas y responder un control de Extras desde cada marco.

Permisos: notify, open-url, clipboard-write. Sitios: ninguno, nunca se conecta. Tiene una fila en Extras.

Código en GitHub

Theme Inspector en Deska

Theme Inspector

Cada token del tema en vivo, con su valor y su contraste WCAG en los dos modos, y una muestra hecha solo con tokens. Enseña deska.on('theme'), el contraste a partir de colores resueltos y el portapapeles con cada uno de sus rechazos.

Permisos: clipboard-write. Sitios: ninguno, nunca se conecta.

Código en GitHub

Conectarse a la red

Service Status en Deska

Service Status

Consulta siete páginas de estado con un tiempo límite cada una, así que un host que falla solo marca su propia fila. Revisa cada 2 minutos mientras se ve y cada 10 cuando está oculto, avisa solo cuando algo cambia de verdad (guardado en el almacenamiento para que una recarga nunca lo repita), y lo resume en Extras.

Permisos: notify, open-url. Sitios: status.claude.com, status.openai.com, www.githubstatus.com, status.cursor.com, www.vercel-status.com, www.cloudflarestatus.com, status.npmjs.org. Tiene una fila en Extras.

Código en GitHub

HN Front Page en Deska

HN Front Page

Errores de red bien manejados: tiempos límite, resultados parciales y sin conexión, cada uno con una forma de reintentar. Carga 30 historias de seis en seis en filas que se llenan a medida que llegan las respuestas, y abre enlaces con deska.openUrl desde el clic, aceptando declined sin insistir.

Permisos: open-url. Sitios: hacker-news.firebaseio.com.

Código en GitHub

Repo Pulse en Deska

Repo Pulse

Vivir dentro del límite anónimo de GitHub de 60 solicitudes por hora: ETags guardadas en el almacenamiento, un presupuesto repartido en la hora, esperas que sobreviven a las recargas y avatares desde un segundo host declarado. Avisa una vez por cada versión nueva. No usa token, a propósito.

Permisos: notify, open-url. Sitios: api.github.com, avatars.githubusercontent.com.

Código en GitHub

Weather Now en Deska

Weather Now

Unidades según init.locale, un formulario de búsqueda bajo form-action 'none', solicitudes con espera y AbortController, un pronóstico guardado para arrancar sin conexión, e íconos SVG en línea en lugar de remotos.

Permisos: open-url. Sitios: api.open-meteo.com, geocoding-api.open-meteo.com.

Código en GitHub

On This Day en Deska

On This Day

Un panel en el idioma de la persona: un pequeño diccionario para sus propios textos, un host de Wikipedia por idioma (la política acepta hosts exactos, nunca comodines), imágenes diferidas desde hosts declarados, y créditos en cada vista.

Permisos: open-url. Sitios: en.wikipedia.org, es.wikipedia.org, fr.wikipedia.org, de.wikipedia.org, pt.wikipedia.org, it.wikipedia.org, upload.wikimedia.org, thumb.wikimedia.org.

Código en GitHub

Almacenamiento y portapapeles

Prompt Shelf en Deska

Prompt Shelf

clipboard.write desde un clic o Enter, con un mensaje para cada rechazo. Una colección con versión bajo una sola clave, que conserva el cambio de la persona cuando storage_full lo rechaza, y manejo completo del teclado dentro del sandbox.

Permisos: clipboard-write. Sitios: ninguno, nunca se conecta.

Código en GitHub

Habit Streaks en Deska

Habit Streaks

El almacenamiento como una pequeña base de datos: un documento con versión, migraciones al cargar, una compactación que deja un año de historial en unos 15 KB, un plan B ante storage_full, y escrituras seguras cuando varias copias comparten las mismas claves.

Permisos: ninguno. Sitios: ninguno, nunca se conecta.

Código en GitHub

Extras y medios

Ship Countdown en Deska

Ship Countdown

La fila de Extras a fondo: su propio extras.html, un until que Deska sigue contando, el anillo de progreso, los controles stop y start, y dos páginas que comparten un almacenamiento sin pisarse.

Permisos: notify. Sitios: ninguno, nunca se conecta. Tiene una fila en Extras.

Código en GitHub

Net Radio en Deska

Net Radio

Transmite audio desde hosts declarados con <audio>, reproduce y pausa desde la fila de Extras, cambia a un diseño compacto cuando place es extras, y maneja una reproducción rechazada hasta que la persona pulsa algo. Uno por proyecto, con scope: global.

Permisos: open-url. Sitios: api.somafm.com, ice1.somafm.com, ice2.somafm.com, ice3.somafm.com, ice4.somafm.com, ice5.somafm.com, ice6.somafm.com. Tiene una fila en Extras.

Código en GitHub

Noise Machine en Deska

Noise Machine

Sonido sin red y sin archivos, generado con Web Audio. Un temporizador de apagado con until, un solo lugar que suena entre muchos marcos acordado por el almacenamiento, y un medidor de nivel que deja de dibujarse mientras está oculto.

Permisos: ninguno. Sitios: ninguno, nunca se conecta. Tiene una fila en Extras.

Código en GitHub

Window View en Deska

Window View

Video desde un host declarado, en pausa mientras el panel está oculto o la persona no está para ahorrar energía, una escena que salta a la siguiente cuando no carga, y créditos para cada clip con licencia.

Permisos: open-url. Sitios: upload.wikimedia.org.

Código en GitHub

Aportar un ejemplo

Las correcciones y los ejemplos nuevos son bienvenidos en GitHub. Un ejemplo nuevo debería enseñar algo que los demás no enseñan, pasar npm run check, usar solo tokens del tema para el color y verse bien en los dos temas. Abre un issue primero si no sabes si encaja.