Carpetas y fechasVista offlineLectura organizada
Tus conversaciones.Una bibliotecapara consultar.
Organiza archivos HTML por fecha y lee cada uno como fue guardado.
Un archivo HTML que organiza conversaciones guardadas por día, muestra cada una sin romperse y exporta a Markdown.Ordena conversaciones guardadas por día y exporta a Markdown.
- HTML
- CSS
- JavaScript
- Turndown
Carpetas y fechasVista offlineLectura organizadaTus conversaciones.Una bibliotecapara consultar.
Organiza archivos HTML por fecha y lee cada uno como fue guardado.
- HTML
- CSS
- JavaScript
- Turndown
Un archivo HTML que organiza conversaciones guardadas por día, muestra cada una sin romperse y exporta a Markdown.Ordena conversaciones guardadas por día y exporta a Markdown.
- HTML
- CSS
- JavaScript
- Turndown
La carpeta de conversaciones
El nombre del archivo ya dice el día.
Una carpeta con cientos de conversaciones guardadas se vuelve una lista por día, de la más reciente a la más antigua. El lector saca la fecha del nombre del archivo y, sin ella, usa el día en que el archivo fue guardado. Edita los nombres, abre las conversaciones y mira cómo aparece la hora.
Los archivos de la carpeta
La barra lateral del lector
Las reglas son las del lector (Leitor-HTML.html): la fecha sale del nombre en DD.MM.AAAA, DD_MM_AAAA, AAAA.MM.DD o AAAA_MM_DD (siempre convertida a DD.MM.AAAA); sin ella, vale la fecha de guardado. La hora solo se lee cuando se abre la conversación, por eso la carpeta empieza con 0 horas, y sale del nombre en el formato (DD_MM_AAAA HH:MM:SS), aceptando también los dos puntos anchos que algunos sistemas escriben en el nombre del archivo. El contador queda verde con 100%, ámbar con 50% o más y gris por debajo. Cada día muestra hasta 50 conversaciones antes de "Mostrar más". La app en sí está en portugués.
Lee el contenido. Mira también el código.
Vista previa, código y edición en una sola herramienta.
VistarenderizadaModo
códigoEdición de
contenido
Una conversación guardada en HTML suele llegar rota: enlaces a archivos que no vinieron, botones de descarga que no hacen nada, cuadros interactivos en blanco. El lector arregla la página al mostrarla. Compara la página cruda con la tratada y haz clic en todo.
La página guardada
Sumar los valores de una lista
¿Cómo sumo todos los valores de una lista en JavaScript?
Usa reduce, empezando desde cero:
const total = valores.reduce((a, b) => a + b, 0);| Método | Devuelve |
|---|---|
| reduce | un valor |
| map | filter | una lista |
¿Por qué empezar desde cero?
Sin el valor inicial, una lista vacía da error.
informe.md (archivo local)documentación
Lo que el lector inyecta
- Cada bloque de código gana una barra de 36 px con el lenguaje, Copiar y Editor.
- Copiar pasa a "¡Copiado!" en verde por 2,5 s.
- Un mensaje de 20 caracteres o más gana "Copiar mensaje" al pasar el mouse.
- El bloque plegable empieza cerrado, con la flecha que gira.
- El enlace a un archivo del servidor queda punteado, con "(archivo local)" y un aviso.
- El enlace externo queda apagado: "No disponible offline".
- El botón de descarga desaparece; el cuadro interactivo pasa a aviso.
Las reglas son las del lector (injectUniversalInteractivity): la barra tiene 36 px y el lenguaje sale de la clase language-* (si no, "code"); la copia prueba tres caminos hasta que uno funciona; el "¡Copiado!" queda 2,5 s. La edición real, en la app, se guarda solo en memoria. La página de ejemplo es ficticia; la app en sí está en portugués.
De la página al documento. Un proyecto propio.
Lee, organiza y exporta en un solo archivo HTML.
ExportaMarkdownSelección
en loteProyecto
propio
Para guardar una conversación como texto limpio (en un repositorio, una wiki, un cuaderno de notas), el lector convierte la página en Markdown. Toca o pasa el mouse por cada regla y mira las líneas que generó; cambia al lote y descarga el archivo de verdad.
La página guardada (HTML)
<title>Sumar los valores de una lista</title>
<div data-message-author-role="user">
<p>¿Cómo sumo todos los valores de una lista en JavaScript?</p>
</div>
<div data-message-author-role="assistant">
<p>Usa reduce, empezando desde cero:</p>
<pre><code class="language-js">const total = valores.reduce((a, b) => a + b, 0);</code></pre>
<table><tr><td>Método</td><td>Devuelve</td></tr><tr><td>reduce</td><td>un valor</td></tr><tr><td>map | filter</td><td>una lista</td></tr></table>
<details><summary>¿Por qué empezar desde cero?</summary><p>Sin el valor inicial, una lista vacía da error.</p></details>
<a href="computer:///mnt/user-data/outputs/informe.md">informe.md</a>
<a href="https://exemplo.com/docs">documentación</a>
</div>Las reglas
El archivo .md
Nombre del archivo: sumar-valores.md
--- title: "Sumar los valores de una lista" date: … exported_by: Leitor-HTML --- # Sumar los valores de una lista ## 👤 Humano ¿Cómo sumo todos los valores de una lista en JavaScript? --- ## 🤖 Assistente Usa reduce, empezando desde cero: ```js const total = valores.reduce((a, b) => a + b, 0); ``` | Método | Devuelve | | --- | --- | | reduce | un valor | | map \| filter | una lista | <details> <summary><strong>¿Por qué empezar desde cero?</strong></summary> Sin el valor inicial, una lista vacía da error. </details> `📁 informe.md` *(arquivo interno do servidor)* [documentación](https://exemplo.com/docs) ---
Las pantallas reales
Las reglas son las del lector (createMarkdownConverter y convertHTMLtoMarkdown, sobre Turndown 7.1): título y fecha en el encabezado, mensajes marcados como Humano y Assistente (las etiquetas de la app están en portugués), código cercado con el lenguaje, tabla con el "|" escapado, bloque plegable conservado, enlace a archivo del servidor cambiado por un aviso y como máximo 2 líneas en blanco seguidas. La app también graba una línea "source" con el sitio de origen, omitida aquí. Varias conversaciones pasan a un solo archivo, con "# Exportação de N Conversas".
Las tecnologías
De qué está hecho, pieza por pieza
Un solo archivo HTML, sin instalación y sin servidor: se abre en el navegador, se elige la carpeta y todo pasa ahí. JavaScript puro organiza y muestra las conversaciones, y Turndown hace la conversión a Markdown. Elige una pieza para ver qué hace aquí y dónde está en el archivo.
6tecnologías, en 2 capas
La página
La conversión
Aplicaciones de escritorioMeu Editor Canva