@rip-lang/server 1.3.80 → 1.3.81

package/default.rip

@@ -9,6 +9,7 @@
 #   - Serves static files with auto-detected MIME types
 #   - Directories with index.html serve the index.html
 #   - Directories without index.html show a browsable file listing
+#   - Hover preview for images and PDFs
 #   - Rip browser bundle available at /rip/rip.min.js
 #   - Hot-reload via SSE for .rip, .html, and .css changes
 #
@@ -16,7 +17,7 @@
 
 import { use, start, notFound } from '@rip-lang/server'
 import { serve } from '@rip-lang/server/middleware'
-import { statSync, readdirSync } from 'node:fs'
+import { statSync, readdirSync, readFileSync } from 'node:fs'
 import { join, resolve, basename } from 'node:path'
 
 root = resolve(process.env.APP_BASE_DIR or process.cwd())
@@ -56,11 +57,17 @@ EXT_ICONS =
   mp3: '🎵', ogg: '🎵', wav: '🎵', mp4: '🎬', webm: '🎬'
   woff: '🔤', woff2: '🔤', ttf: '🔤', otf: '🔤'
 
+IMG_EXTS = new Set ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp', 'avif']
+
 fileIcon = (name) ->
   EXT_ICONS[name.slice(name.lastIndexOf('.') + 1).toLowerCase()] or '📄'
 
-row = (ic, href, label, size = '', date = '') ->
-  "<tr><td class=\"ic\">#{ic}</td><td><a href=\"#{esc href}\">#{esc label}</a></td><td class=\"sz\">#{size}</td><td class=\"dt\">#{date}</td></tr>"
+previewAttr = (name, href) ->
+  ext = name.slice(name.lastIndexOf('.') + 1).toLowerCase()
+  if IMG_EXTS.has(ext) then " data-pv=\"image\" data-src=\"#{esc href}\"" else ''
+
+row = (ic, href, label, size = '', date = '', extra = '') ->
+  "<tr><td class=\"ic\">#{ic}</td><td><a href=\"#{esc href}\"#{extra}>#{esc label}</a></td><td class=\"sz\">#{size}</td><td class=\"dt\">#{date}</td></tr>"
 
 breadcrumbs = (reqPath) ->
   parts = reqPath.split('/').filter((p) -> p)
@@ -90,7 +97,7 @@ renderIndex = (reqPath, fsPath) ->
   for f in files
     try
       s = statSync(join(fsPath, f))
-      rows.push row(fileIcon(f), f, f, fmtSize(s.size), fmtDate(s.mtimeMs))
+      rows.push row(fileIcon(f), f, f, fmtSize(s.size), fmtDate(s.mtimeMs), previewAttr(f, f))
     catch
       rows.push row(fileIcon(f), f, f)
 
@@ -194,11 +201,29 @@ renderIndex = (reqPath, fsPath) ->
   .sz { width: 6rem; text-align: right; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
   .dt { color: var(--muted); white-space: nowrap; }
   th.sz { text-align: right; }
+  .pop {
+    position: fixed; z-index: 9999; pointer-events: none;
+    width: 320px; background: var(--card);
+    border: 1px solid var(--border); border-radius: 12px;
+    box-shadow: 0 10px 30px rgba(0,0,0,.12);
+    overflow: hidden; opacity: 0;
+    transform: translateY(6px) scale(.985);
+    transition: opacity 150ms ease, transform 150ms ease;
+  }
+  .pop.on { opacity: 1; transform: none; }
+  .pop-h {
+    padding: 8px 14px; font-size: .6875rem; font-weight: 700;
+    letter-spacing: .06em; color: var(--muted); text-transform: uppercase;
+    border-bottom: 1px solid var(--border-row); background: var(--head-bg);
+  }
+  .pop-b { display: flex; align-items: center; justify-content: center; min-height: 100px; }
+  .pop-b img { display: block; max-width: 100%; max-height: 240px; }
   @media (max-width: 640px) {
     .wrap { margin: 1rem auto; }
     td, th { padding: .5rem .75rem; }
     .dt, th.dt { display: none; }
     .bar { padding: .75rem 1rem; }
+    .pop { display: none; }
   }
   </style>
   </head>
@@ -217,6 +242,162 @@ renderIndex = (reqPath, fsPath) ->
   </table>
   </div>
   </div>
+  <script>
+  (function(){
+    var pop,cur,ox=16,oy=16;
+    function esc(s){return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;')}
+    function base(s){return decodeURIComponent(s.split('?')[0].split('/').pop())}
+    function mk(){
+      if(pop)return pop;
+      pop=document.createElement('div');pop.className='pop';
+      pop.innerHTML='<div class="pop-h"></div><div class="pop-b"></div>';
+      document.body.appendChild(pop);return pop;
+    }
+    function show(a,e){
+      var t=a.dataset.pv,s=a.dataset.src;if(!t||!s)return;
+      var el=mk(),h=el.firstChild,b=el.lastChild;
+      h.textContent='PREVIEW';b.innerHTML='';
+      var img=new Image();img.src=s;img.alt=base(s);b.appendChild(img);
+      cur=a;el.classList.add('on');place(e.clientX,e.clientY);
+    }
+    function hide(){cur=null;if(pop)pop.classList.remove('on')}
+    function place(x,y){
+      if(!pop)return;var r=pop.getBoundingClientRect(),p=12,l=x+ox,t=y+oy;
+      if(l+r.width>innerWidth-p)l=x-r.width-ox;
+      if(t+r.height>innerHeight-p)t=innerHeight-r.height-p;
+      if(l<p)l=p;if(t<p)t=p;
+      pop.style.left=l+'px';pop.style.top=t+'px';
+    }
+    document.addEventListener('mouseover',function(e){var a=e.target.closest('[data-pv]');if(a)show(a,e)});
+    document.addEventListener('mousemove',function(e){if(cur)place(e.clientX,e.clientY)});
+    document.addEventListener('mouseout',function(e){var a=e.target.closest('[data-pv]');if(a&&a===cur)hide()});
+    document.addEventListener('scroll',hide,{passive:true});
+    window.addEventListener('blur',hide);
+  })();
+  </script>
+  </body>
+  </html>
+  """
+
+renderMarkdown = (reqPath, fsPath) ->
+  md = readFileSync(fsPath, 'utf8')
+  body = Bun.markdown.html(md)
+  name = esc(basename(fsPath))
+  """
+  <!DOCTYPE html>
+  <html lang="en">
+  <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>#{name}</title>
+  <style>
+  :root {
+    --bg: #f3f6f7; --card: #fff; --border: #d1d9e0; --border-subtle: #d1d9e0b3;
+    --text: #1f2328; --muted: #59636e; --link: #0969da;
+    --head-bg: #fafbfc; --sep: #cbd5e1;
+    --code-bg: #f6f8fa; --code-inline: #818b981f;
+    --table-alt: #f6f8fa; --hr: #d1d9e0;
+    --mark-bg: #fff8c5; --mark-text: #1f2328;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --bg: #0d1117; --card: #161b22; --border: #30363d; --border-subtle: #30363db3;
+      --text: #e6edf3; --muted: #8b949e; --link: #58a6ff;
+      --head-bg: #1c2129; --sep: #484f58;
+      --code-bg: #161b22; --code-inline: #b1bac41f;
+      --table-alt: #161b22; --hr: #3d444d;
+      --mark-bg: #bb800926; --mark-text: #e6edf3;
+    }
+  }
+  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+    font-size: 16px; line-height: 1.5; color: var(--text); background: var(--bg);
+    word-wrap: break-word;
+  }
+  .wrap { max-width: 820px; margin: 2.5rem auto; padding: 0 1rem; }
+  .card {
+    background: var(--card); border: 1px solid var(--border); border-radius: 8px;
+    overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
+  }
+  .bar {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: .875rem 1.25rem; border-bottom: 1px solid var(--border);
+  }
+  .crumbs { font-size: .9375rem; font-weight: 500; }
+  .crumbs a { color: var(--link); text-decoration: none; }
+  .crumbs a:hover { text-decoration: underline; }
+  .sep { color: var(--sep); margin: 0 .3rem; font-weight: 400; }
+  article { padding: 2rem 2.5rem; }
+  article > *:first-child { margin-top: 0 !important; }
+  article > *:last-child { margin-bottom: 0 !important; }
+  article h1, article h2, article h3, article h4, article h5, article h6 {
+    margin-top: 1.5rem; margin-bottom: 1rem; font-weight: 600; line-height: 1.25;
+  }
+  article h1 { font-size: 2em; padding-bottom: .3em; border-bottom: 1px solid var(--border-subtle); }
+  article h2 { font-size: 1.5em; padding-bottom: .3em; border-bottom: 1px solid var(--border-subtle); }
+  article h3 { font-size: 1.25em; }
+  article h4 { font-size: 1em; }
+  article h5 { font-size: .875em; }
+  article h6 { font-size: .85em; color: var(--muted); }
+  article p, article blockquote, article ul, article ol, article dl, article table, article pre, article details {
+    margin-top: 0; margin-bottom: 1rem;
+  }
+  article a { color: var(--link); text-decoration: none; }
+  article a:hover { text-decoration: underline; }
+  article strong { font-weight: 600; }
+  article img { max-width: 100%; box-sizing: content-box; border-style: none; }
+  article ul, article ol { padding-left: 2em; }
+  article ol ol, article ul ol { list-style-type: lower-roman; }
+  article ul ul ol, article ul ol ol, article ol ul ol, article ol ol ol { list-style-type: lower-alpha; }
+  article ul ul, article ul ol, article ol ol, article ol ul { margin-top: 0; margin-bottom: 0; }
+  article li + li { margin-top: .25em; }
+  article li > p { margin-top: 1rem; }
+  article li > input[type="checkbox"] { margin-right: .5rem; }
+  article blockquote { padding: 0 1em; color: var(--muted); border-left: .25em solid var(--border); }
+  article blockquote > :first-child { margin-top: 0; }
+  article blockquote > :last-child { margin-bottom: 0; }
+  article mark { background-color: var(--mark-bg); color: var(--mark-text); }
+  article code, article tt {
+    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+    font-size: 85%; padding: .2em .4em; margin: 0;
+    white-space: break-spaces; background-color: var(--code-inline); border-radius: 6px;
+  }
+  article pre {
+    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+    font-size: 85%; line-height: 1.45; padding: 1rem;
+    overflow: auto; background-color: var(--code-bg); border: 1px solid var(--border); border-radius: 6px;
+  }
+  article pre code, article pre tt {
+    display: inline; padding: 0; margin: 0; overflow: visible;
+    line-height: inherit; word-wrap: normal; background-color: transparent;
+    border: 0; font-size: 100%; white-space: pre;
+  }
+  article table { display: block; width: max-content; max-width: 100%; overflow: auto; border-spacing: 0; border-collapse: collapse; }
+  article table th { font-weight: 600; }
+  article table th, article table td { padding: 6px 13px; border: 1px solid var(--border); }
+  article table tr { background-color: var(--card); border-top: 1px solid var(--border-subtle); }
+  article table tr:nth-child(2n) { background-color: var(--table-alt); }
+  article table td > :last-child { margin-bottom: 0; }
+  article hr {
+    height: .25em; padding: 0; margin: 1.5rem 0;
+    background-color: var(--hr); border: 0; overflow: hidden;
+  }
+  article del { color: var(--muted); }
+  article dl dt { padding: 0; margin-top: 1rem; font-size: 1em; font-style: italic; font-weight: 600; }
+  article dl dd { padding: 0 1rem; margin-bottom: 1rem; }
+  @media (max-width: 640px) { article { padding: 1.25rem 1rem; } .wrap { margin: 1rem auto; } }
+  </style>
+  </head>
+  <body>
+  <div class="wrap">
+  <div class="card">
+  <div class="bar">
+    <div class="crumbs">#{breadcrumbs reqPath}</div>
+  </div>
+  <article>#{body}</article>
+  </div>
+  </div>
   </body>
   </html>
   """
@@ -236,6 +417,10 @@ notFound ->
     return new Response 'Not Found', { status: 404 }
 
   if stat.isFile()
+    if path.endsWith('.md')
+      try
+        html = renderMarkdown(reqPath, path)
+        return new Response html, { headers: { 'Content-Type': 'text/html; charset=UTF-8' } }
     return @send path
 
   if stat.isDirectory()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rip-lang/server",
-  "version": "1.3.80",
+  "version": "1.3.81",
   "description": "Pure Rip web framework and application server",
   "type": "module",
   "main": "api.rip",