initial vibez

Author: Tim Willebrands

.github/workflows/publish.yml

@@ -0,0 +1,38 @@
+name: Publish to npm
+
+on:
+  workflow_dispatch:
+  push:
+    tags:
+      - 'v*.*.*'
+
+permissions:
+  contents: read
+
+jobs:
+  build-and-publish:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: '1.x'
+
+      - name: Install
+        run: bun install --no-progress
+
+      - name: Build
+        run: bun run build
+
+      - name: Publish (Bun)
+        if: startsWith(github.ref, 'refs/tags/v') || github.event_name == 'workflow_dispatch'
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: |
+          echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > ~/.npmrc
+          bun publish --access public
+
+

.gitignore

@@ -0,0 +1,34 @@
+# dependencies (bun install)
+node_modules
+
+# output
+out
+dist
+*.tgz
+
+# code coverage
+coverage
+*.lcov
+
+# logs
+logs
+_.log
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# caches
+.eslintcache
+.cache
+*.tsbuildinfo
+
+# IntelliJ based IDEs
+.idea
+
+# Finder (MacOS) folder config
+.DS_Store

LICENSE

@@ -0,0 +1,23 @@
+MIT License
+
+Copyright (c) 2025 Tim
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+

README.md

@@ -0,0 +1,92 @@
+## streaming-markdown-component
+
+Minimal custom element `<streaming-md>` for progressively rendering streamed Markdown in the browser. Internally powered by the excellent Streaming Markdown library.
+
+### Thanks and Credits
+
+Huge thanks to the Streaming Markdown project for the streaming parser and default renderer that make this possible. Please check out and support the project: [Streaming Markdown docs](https://thetarnav.github.io/streaming-markdown/).
+
+### Install
+
+```bash
+npm install streaming-markdown-component
+# or
+pnpm add streaming-markdown-component
+# or
+yarn add streaming-markdown-component
+```
+
+### Usage
+
+```html
+<script type="module">
+  import 'streaming-markdown-component/dist/index.js'
+</script>
+
+<streaming-md id="md"></streaming-md>
+
+<script type="module">
+  const el = document.getElementById('md')
+  el.appendChunk('# Hello, streamed world!\n\n')
+  el.appendChunk('- One\n- Two\n- Three\n')
+  el.finish()
+</script>
+```
+
+Works great with htmx SSE:
+
+```html
+<article
+  hx-ext="sse"
+  sse-connect="/party/ROOM/messages/MSG"
+  sse-swap="message"
+  hx-swap="beforeend"
+  hx-target="find streaming-md"
+  sse-close="finished">
+  <streaming-md></streaming-md>
+  <!-- htmx appends data: chunks here; the element consumes text nodes -->
+  <!-- server should send: event: message / data: ... and event: finished when done -->
+  <!-- Reference: https://thetarnav.github.io/streaming-markdown/ -->
+</article>
+```
+
+### API
+
+- `appendChunk(text: string)`: Append raw markdown chunk.
+- `finish()`: Flush and mark complete.
+- `reset()`: Clear content and restart.
+
+### Demo
+
+Open `demo.html` locally in a browser. It imports `dist/index.js` and streams predefined Markdown chunks into `<streaming-md>`.
+
+#### GitHub Pages
+
+- The repo includes `docs/index.html`. CI builds the component and copies `dist/` into `docs/dist/`.
+- Pages workflow `.github/workflows/pages.yml` deploys the `docs/` directory on pushes to `main` (and on manual dispatch).
+- After enabling GitHub Pages (GitHub → Settings → Pages → Source: GitHub Actions), your demo will be available at:
+  - `https://<yourname>.github.io/<repo>/`
+
+### Development
+
+```bash
+bun install
+bun run build
+# outputs ESM at dist/index.js
+```
+
+### Publish
+
+This package ships ESM for the browser and uses Bun for publishing via GitHub Actions.
+
+- CI: On tag push like `v0.1.0` (or manual dispatch), the workflow builds with Bun and runs `bun publish` to npm. Set `NPM_TOKEN` in repo secrets.
+- Local: you can also publish from your machine with Bun:
+
+```bash
+bun run build
+bun publish --access public
+```
+
+### License
+
+MIT

bun.lock

@@ -0,0 +1,85 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Streaming Markdown Demo</title>
+  <style>
+    :root { color-scheme: light dark; }
+    body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; margin: 2rem; line-height: 1.5; }
+    main { max-width: 800px; margin: 0 auto; }
+    .controls { display: flex; gap: 0.5rem; margin: 1rem 0; align-items: center; }
+    button { padding: 0.5rem 0.75rem; font: inherit; cursor: pointer; }
+    streaming-md { display: block; border: 1px solid #8884; border-radius: 8px; padding: 1rem; height: 360px; overflow: auto; background: Canvas; color: CanvasText; }
+    streaming-md::part(content) { font-size: 0.95rem; }
+    pre { background: color-mix(in oklab, Canvas 90%, CanvasText); padding: 0.75rem; border-radius: 6px; overflow: auto; }
+    code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
+  </style>
+</head>
+<body>
+  <main>
+    <h1>Streaming Markdown Demo</h1>
+    <p>This demo streams predefined Markdown chunks into the custom <code>&lt;streaming-md&gt;</code> component.</p>
+    <div class="controls">
+      <button id="start">Start stream</button>
+      <button id="reset">Reset</button>
+    </div>
+    <streaming-md id="md"></streaming-md>
+  </main>
+
+  <script type="module">
+    import './dist/index.js';
+
+    const md = `
+   *[DIAL-UP MODEM SOUNDS INTENSIFY]*
+
+
+# \U0001f389 PROOMPTING: The Future Is Now, Thanks To Science!
+
+**SOI SOI SOI SOI SOI SOI SOI**
+
+Greetings, fellow carbon-based life forms! Microsoft Sam here, and boy oh boy, do I have something SPECTACULAR to show you today! Remember when I used to read your emails back in Windows XP? Well, those days are OVER because now I'm here to tell you about PROOMPTING - the most REVOLUTIONARY chat application since... well... since ME!
+
+## What The Heck Is This Thing?
+
+Picture this: It's 2001. You've got your Windows XP machine humming along, Limewire is downloading your "totally legal" MP3s, and your 56k modem is screaming into the void. But WAIT! What if I told you that you could chat with an ARTIFICIAL INTELLIGENCE right from your desktop? That's right, folks - we've taken the best parts of Windows XP and SUPERCHARGED them with \u2728AI\u2728!
+
+\`\`\`
+\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510
+\u2502 \U0001f5a5\ufe0f AUTHENTIC XP DESKTOP EXPERIENCE  \u2502
+\u2502 \U0001f916 REAL AI THAT SOMEWHAT WORKS      \u2502
+\u2502 \U0001f4ac CHAT ROOMS (LIKE MSN BUT BETTER) \u2502
+\u2502 \u26a1 FASTER THAN DIALUP (THANKFULLY)  \u2502
+\u2502 \U0001f504 REAL-TIME MESSAGE STREAMING      \u2502
+\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518
+\`\`\`
+
+Link (wow): [Windows XP](https://www.microsoft.com/en-us/windowsxp/)
+
+
+*[WINDOWS XP SHUTDOWN SOUND]*
+ `
+
+    function delay(ms) { return new Promise(r => setTimeout(r, ms)); }
+
+    async function start() {
+      const el = document.getElementById('md');
+      el.reset();
+      const chunks = md.split(' ').map(c => c + ' ');
+      for (const c of chunks) {
+        el.appendChunk(c);
+        await delay(50);
+      }
+      el.finish();
+    }
+
+    document.getElementById('start').addEventListener('click', start);
+    document.getElementById('reset').addEventListener('click', () => document.getElementById('md').reset());
+
+    // Auto-start
+    start();
+  </script>
+</body>
+</html>
+
+

demo.html

@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Streaming Markdown Component Demo</title>
+  <style>
+    :root { color-scheme: light dark; }
+    body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial; margin: 2rem; line-height: 1.5; }
+    main { max-width: 800px; margin: 0 auto; }
+    .controls { display: flex; gap: 0.5rem; margin: 1rem 0; align-items: center; }
+    button { padding: 0.5rem 0.75rem; font: inherit; cursor: pointer; }
+    streaming-md { display: block; border: 1px solid #8884; border-radius: 8px; padding: 1rem; height: 360px; overflow: auto; background: Canvas; color: CanvasText; }
+    streaming-md::part(content) { font-size: 0.95rem; }
+    pre { background: color-mix(in oklab, Canvas 90%, CanvasText); padding: 0.75rem; border-radius: 6px; overflow: auto; }
+    code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
+  </style>
+</head>
+<body>
+  <main>
+    <h1>Streaming Markdown Component Demo</h1>
+    <p>This page is hosted via GitHub Pages. It loads the built component and streams some text.</p>
+    <div class="controls">
+      <button id="start">Start stream</button>
+      <button id="reset">Reset</button>
+    </div>
+    <streaming-md id="md"></streaming-md>
+  </main>
+
+  <script type="module">
+    import './dist/index.js';
+
+    const md = `# Hello Pages!\n\n` +
+               `This demo is served from GitHub Pages.\n\n` +
+               `- Uses <streaming-md>\n` +
+               `- Powered by streaming-markdown\n\n` +
+               `\` +
+               `\`\`\`js\nconsole.log("Pages demo")\n\`\`\`\n`;
+
+    function delay(ms) { return new Promise(r => setTimeout(r, ms)); }
+    async function start() {
+      const el = document.getElementById('md');
+      el.reset();
+      const chunks = md.split(' ').map(c => c + ' ');
+      for (const c of chunks) {
+        el.appendChunk(c);
+        await delay(50);
+      }
+      el.finish();
+    }
+    document.getElementById('start').addEventListener('click', start);
+    document.getElementById('reset').addEventListener('click', () => document.getElementById('md').reset());
+    start();
+  </script>
+</body>
+  </html>
+
+