Folders and datesOffline previewOrganized reading
Your conversations.A libraryto look up.
Organize HTML files by date and read each one as it was saved.
One HTML file that organizes saved conversations by day, shows each one without breaking and exports to Markdown.Sorts saved conversations by day and exports to Markdown.
- HTML
- CSS
- JavaScript
- Turndown
Folders and datesOffline previewOrganized readingYour conversations.A libraryto look up.
Organize HTML files by date and read each one as it was saved.
- HTML
- CSS
- JavaScript
- Turndown
One HTML file that organizes saved conversations by day, shows each one without breaking and exports to Markdown.Sorts saved conversations by day and exports to Markdown.
- HTML
- CSS
- JavaScript
- Turndown
The conversations folder
The file name already says the day.
A folder with hundreds of saved conversations becomes a list by day, from newest to oldest. The reader takes the date from the file name and, without it, uses the day the file was saved. Edit the names, open the conversations and watch the time appear.
The folder's files
The reader's sidebar
The rules are the reader's (Leitor-HTML.html): the date comes from the name as DD.MM.YYYY, DD_MM_YYYY, YYYY.MM.DD or YYYY_MM_DD (always converted to DD.MM.YYYY); without it, the save date is used. The time is only read when the conversation is opened, that's why the folder starts with 0 times, and it comes from the name in the (DD_MM_YYYY HH:MM:SS) format, also accepting the wide colons some systems write into file names. The counter turns green at 100%, amber at 50% or more and gray below that. Each day shows up to 50 conversations before "Show more". The app itself is in Portuguese.
Read the content. See the code too.
Preview, code and editing in a single tool.
RenderedpreviewCode
viewContent
editing
A conversation saved as HTML usually arrives broken: links to files that didn't come along, download buttons that do nothing, blank interactive frames. The reader fixes the page as it shows it. Compare the raw page with the treated one and click everything.
The saved page
Adding up a list's values
How do I add up every value in a list in JavaScript?
Use reduce, starting from zero:
const total = values.reduce((a, b) => a + b, 0);| Method | Returns |
|---|---|
| reduce | one value |
| map | filter | a list |
Why start from zero?
Without the initial value, an empty list throws an error.
report.md (local file)documentation
What the reader injects
- Each code block gets a 36 px bar with the language, Copy and Editor.
- Copy turns into "Copied!" in green for 2.5 s.
- A message of 20 characters or more gets "Copy message" on hover.
- Collapsible blocks start closed, with the turning arrow.
- A link to a server file turns dashed, with "(local file)" and a notice.
- An external link fades out: "Unavailable offline".
- Download buttons disappear; interactive frames become a notice.
The rules are the reader's (injectUniversalInteractivity): the bar is 36 px and the language comes from the language-* class (otherwise, "code"); copying tries three ways until one works; "Copied!" stays for 2.5 s. Real editing, in the app, is kept only in memory. The sample page is fictional; the app itself is in Portuguese.
From page to document. An original project.
Read, organize and export in a single HTML file.
ExportsMarkdownBatch
selectionOriginal
project
To keep a conversation as clean text, in a repository, a wiki, a notebook, the reader converts the page to Markdown. Hover each rule to see the lines it produced; switch to batch and download the real file.
The saved page (HTML)
<title>Adding up a list's values</title>
<div data-message-author-role="user">
<p>How do I add up every value in a list in JavaScript?</p>
</div>
<div data-message-author-role="assistant">
<p>Use reduce, starting from zero:</p>
<pre><code class="language-js">const total = values.reduce((a, b) => a + b, 0);</code></pre>
<table><tr><td>Method</td><td>Returns</td></tr><tr><td>reduce</td><td>one value</td></tr><tr><td>map | filter</td><td>a list</td></tr></table>
<details><summary>Why start from zero?</summary><p>Without the initial value, an empty list throws an error.</p></details>
<a href="computer:///mnt/user-data/outputs/report.md">report.md</a>
<a href="https://exemplo.com/docs">documentation</a>
</div>The rules
The .md file
File name: adding-values.md
--- title: "Adding up a list's values" date: … exported_by: Leitor-HTML --- # Adding up a list's values ## 👤 Humano How do I add up every value in a list in JavaScript? --- ## 🤖 Assistente Use reduce, starting from zero: ```js const total = values.reduce((a, b) => a + b, 0); ``` | Method | Returns | | --- | --- | | reduce | one value | | map \| filter | a list | <details> <summary><strong>Why start from zero?</strong></summary> Without the initial value, an empty list throws an error. </details> `📁 report.md` *(arquivo interno do servidor)* [documentation](https://exemplo.com/docs) ---
The real screens
The rules are the reader's (createMarkdownConverter and convertHTMLtoMarkdown, on top of Turndown 7.1): title and date in the header, messages labeled Humano and Assistente (the app's labels are in Portuguese), fenced code with the language, a table with "|" escaped, collapsible blocks kept, links to server files replaced by a notice and at most 2 blank lines in a row. The app also writes a "source" line with the original site, omitted here. Several conversations become a single file, starting with "# Exportação de N Conversas".
The technologies
What it is made of, piece by piece
A single HTML file, with no install and no server: it opens in the browser, you pick the folder and everything happens right there. Plain JavaScript organizes and shows the conversations, and Turndown does the Markdown conversion. Pick a piece to see what it does here and where it sits in the file.
6technologies, in 2 layers
The page
The conversion
Desktop applicationsMeu Editor Canva