@zkov/pi-md-viewer 0.1.0 → 0.1.2

package/dist/extensions/show-markdown.js

@@ -24,7 +24,11 @@ export function buildInvocation(cwd, extensionFile, input, options = {}) {
     const platform = options.platform ?? process.platform;
     const pathForCwd = platform === "win32" ? path.win32 : path.posix;
     const extensionPath = fileURLToPath(extensionFile);
-    const launcher = path.resolve(path.dirname(extensionPath), "..", "bin", "mdview.js");
+    const extensionDir = path.dirname(extensionPath);
+    const packageRoot = path.basename(path.dirname(extensionDir)) === "dist"
+        ? path.resolve(extensionDir, "..", "..")
+        : path.resolve(extensionDir, "..");
+    const launcher = path.join(packageRoot, "bin", "mdview.js");
     const resolvedPaths = input.paths.map((supplied) => {
         const normalized = supplied.startsWith("@") ? supplied.slice(1) : supplied;
         if (!normalized)

package/dist/src-ts/server.js

@@ -124,7 +124,7 @@ export class ViewerServer {
             const template = readFileSync(path.join(legacyAssetRoot, "templates", "viewer.html"), "utf8");
             this.sendBytes(response, 200, Buffer.from(template.replace("{{CSRF_TOKEN}}", this.csrfToken)), "text/html; charset=utf-8");
         }
-        else if (["/static/viewer.css", "/static/viewer.js", "/static/viewer-actions.js"].includes(parsed.pathname)) {
+        else if (["/static/viewer.css", "/static/viewer.js", "/static/viewer-actions.js", "/static/side-aura.svg"].includes(parsed.pathname)) {
             await this.serveAsset(parsed.pathname.replace("/static/", ""), response);
         }
         else if (parsed.pathname === "/api/v1/status") {
@@ -281,7 +281,11 @@ export class ViewerServer {
         const file = path.join(legacyAssetRoot, "static", name);
         try {
             const stat = statSync(file);
-            const type = name.endsWith(".css") ? "text/css; charset=utf-8" : "application/javascript; charset=utf-8";
+            const type = name.endsWith(".css")
+                ? "text/css; charset=utf-8"
+                : name.endsWith(".svg")
+                    ? "image/svg+xml; charset=utf-8"
+                    : "application/javascript; charset=utf-8";
             response.writeHead(200, { "Content-Type": type, "Content-Length": stat.size });
             createReadStream(file).pipe(response);
         }

package/extensions/show-markdown.ts

@@ -53,7 +53,11 @@ export function buildInvocation(
   const platform = options.platform ?? process.platform;
   const pathForCwd = platform === "win32" ? path.win32 : path.posix;
   const extensionPath = fileURLToPath(extensionFile);
-  const launcher = path.resolve(path.dirname(extensionPath), "..", "bin", "mdview.js");
+  const extensionDir = path.dirname(extensionPath);
+  const packageRoot = path.basename(path.dirname(extensionDir)) === "dist"
+    ? path.resolve(extensionDir, "..", "..")
+    : path.resolve(extensionDir, "..");
+  const launcher = path.join(packageRoot, "bin", "mdview.js");
   const resolvedPaths = input.paths.map((supplied) => {
     const normalized = supplied.startsWith("@") ? supplied.slice(1) : supplied;
     if (!normalized) throw new Error("show_markdown path cannot be empty");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zkov/pi-md-viewer",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Local loopback Markdown viewer tool for pi with configurable browser launchers",
   "author": "Zkov <zkov@yandex.ru>",
   "license": "MIT",

package/src/pi_md_viewer/static/side-aura.svg

@@ -0,0 +1,46 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
+  <defs>
+    <linearGradient id="left-main" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#152138" />
+      <stop offset=".38" stop-color="#1b2945" />
+      <stop offset=".68" stop-color="#181f3c" />
+      <stop offset="1" stop-color="#152138" />
+    </linearGradient>
+    <linearGradient id="left-accent" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#295b7e" />
+      <stop offset=".44" stop-color="#4c4482" />
+      <stop offset="1" stop-color="#295b7e" />
+    </linearGradient>
+    <linearGradient id="right-main" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#152138" />
+      <stop offset=".32" stop-color="#181f3c" />
+      <stop offset=".72" stop-color="#1b2945" />
+      <stop offset="1" stop-color="#152138" />
+    </linearGradient>
+    <linearGradient id="right-accent" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#4c4482" />
+      <stop offset=".52" stop-color="#295b7e" />
+      <stop offset="1" stop-color="#473e7e" />
+    </linearGradient>
+    <linearGradient id="purple-wash" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#0a0d12" stop-opacity="0" />
+      <stop offset=".34" stop-color="#5b4c96" stop-opacity=".028" />
+      <stop offset=".66" stop-color="#0a0d12" stop-opacity="0" />
+      <stop offset="1" stop-color="#473e7e" stop-opacity=".022" />
+    </linearGradient>
+  </defs>
+
+  <rect width="100" height="100" fill="url(#purple-wash)" />
+
+  <g fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M 4 -6 C 1 18 -1 42 1 64 C 3 80 0 93 1 106" stroke="url(#left-main)" stroke-width="28" stroke-opacity=".20" />
+    <path d="M 4 -6 C 1 18 -1 42 1 64 C 3 80 0 93 1 106" stroke="url(#left-main)" stroke-width="18" stroke-opacity=".34" />
+    <path d="M 4 -6 C 1 18 -1 42 1 64 C 3 80 0 93 1 106" stroke="url(#left-accent)" stroke-width="9" stroke-opacity=".13" />
+    <path d="M 2 -4 C 0 24 0 48 2 72 C 3 84 1 96 2 104" stroke="#152138" stroke-width="5" stroke-opacity=".22" />
+
+    <path d="M 96 -6 C 99 20 101 45 99 67 C 97 82 100 95 99 106" stroke="url(#right-main)" stroke-width="28" stroke-opacity=".20" />
+    <path d="M 96 -6 C 99 20 101 45 99 67 C 97 82 100 95 99 106" stroke="url(#right-main)" stroke-width="18" stroke-opacity=".34" />
+    <path d="M 96 -6 C 99 20 101 45 99 67 C 97 82 100 95 99 106" stroke="url(#right-accent)" stroke-width="9" stroke-opacity=".13" />
+    <path d="M 98 -4 C 100 23 100 50 98 74 C 97 86 99 97 98 104" stroke="#152138" stroke-width="5" stroke-opacity=".22" />
+  </g>
+</svg>

package/src/pi_md_viewer/static/viewer-actions.js

@@ -1,6 +1,11 @@
-export async function unloadAndMaybeClose({ remove, reload, close }) {
+export async function unloadAndReload({ remove, reload }) {
   await remove();
-  const remaining = await reload();
-  if (remaining === 0) await close();
-  return remaining;
+  return reload();
+}
+
+export function selectNextActiveFile(files, removedId, activeId) {
+  if (removedId !== activeId) return activeId;
+  const index = files.findIndex((file) => file.id === removedId);
+  if (index === -1) return activeId;
+  return files[index + 1]?.id ?? files[index - 1]?.id ?? null;
 }

package/src/pi_md_viewer/static/viewer.css

@@ -10,13 +10,26 @@
   --line: #263243;
   --code: #090c11;
   --danger: #ff8d9b;
+  --linear-side-aura-background:
+    linear-gradient(90deg, rgba(21, 33, 56, .82) -12%, rgba(21, 33, 56, .42) 2%, rgba(76, 68, 130, .08) 10%, transparent 16%),
+    linear-gradient(90deg, rgba(41, 91, 126, .26) -8%, rgba(41, 91, 126, .10) 6%, transparent 14%),
+    linear-gradient(90deg, transparent 0%, transparent 84%, rgba(76, 68, 130, .08) 90%, rgba(21, 33, 56, .42) 99%, rgba(21, 33, 56, .82) 112%),
+    linear-gradient(90deg, transparent 0%, transparent 86%, rgba(41, 91, 126, .10) 94%, rgba(41, 91, 126, .26) 108%),
+    var(--bg);
+  --svg-side-aura-background: url("/static/side-aura.svg"), var(--bg);
 }
 
 * { box-sizing: border-box; }
-html { scroll-behavior: smooth; }
+html {
+  scroll-behavior: smooth;
+  background: var(--bg);
+}
 body {
+  min-height: 100vh;
   margin: 0;
-  background: radial-gradient(circle at 85% 0%, #152138 0, transparent 34rem), var(--bg);
+  background: var(--svg-side-aura-background);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
   color: var(--text);
   font: 16px/1.72 system-ui, -apple-system, "Segoe UI", sans-serif;
 }
@@ -82,10 +95,22 @@ button:disabled { cursor: default; opacity: .45; }
 }
 .icon-button { padding: 2px 8px; font-size: 18px; }
 .danger { color: var(--danger); }
+.file-row {
+  display: flex;
+  align-items: stretch;
+  gap: 4px;
+  margin: 4px 0;
+  border: 1px solid transparent;
+  border-radius: 8px;
+}
+.file-row.active {
+  border-color: rgba(124, 196, 255, .3);
+  background: rgba(124, 196, 255, .09);
+}
 .file-button {
   display: block;
-  width: 100%;
-  margin: 4px 0;
+  min-width: 0;
+  flex: 1;
   padding: 9px 10px;
   overflow: hidden;
   border-color: transparent;
@@ -95,10 +120,20 @@ button:disabled { cursor: default; opacity: .45; }
   white-space: nowrap;
 }
 .file-button small { display: block; color: var(--muted); }
-.file-button.active {
-  border-color: rgba(124, 196, 255, .3);
-  background: rgba(124, 196, 255, .09);
-  color: #fff;
+.file-row.active .file-button { color: #fff; }
+.file-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding-right: 4px;
+}
+.file-action {
+  min-width: 28px;
+  padding: 3px 6px;
+  border-color: transparent;
+  background: transparent;
+  font-size: 16px;
+  line-height: 1;
 }
 main { min-width: 0; padding-top: 4px; }
 .document-toolbar {

package/src/pi_md_viewer/static/viewer.js

@@ -1,4 +1,4 @@
-import { unloadAndMaybeClose } from "/static/viewer-actions.js";
+import { selectNextActiveFile, unloadAndReload } from "/static/viewer-actions.js";
 
 const csrf = document.querySelector('meta[name="csrf-token"]').content;
 const clientId = crypto.randomUUID();
@@ -16,9 +16,6 @@ const elements = {
   status: document.getElementById("connection-status"),
   sidebar: document.getElementById("sidebar"),
   toggle: document.getElementById("sidebar-toggle"),
-  refresh: document.getElementById("refresh-file"),
-  unload: document.getElementById("unload-file"),
-  close: document.getElementById("close-viewer"),
 };
 
 async function api(path, options = {}) {
@@ -53,9 +50,12 @@ function notify(message) {
 function renderFileList() {
   elements.fileList.replaceChildren();
   for (const file of state.files) {
+    const row = document.createElement("div");
+    row.className = `file-row${file.id === state.activeId ? " active" : ""}`;
+
     const button = document.createElement("button");
     button.type = "button";
-    button.className = `file-button${file.id === state.activeId ? " active" : ""}`;
+    button.className = "file-button";
     button.title = file.path;
     button.append(document.createTextNode(file.displayName));
     if (file.parentLabel) {
@@ -64,7 +64,35 @@ function renderFileList() {
       button.append(parent);
     }
     button.addEventListener("click", () => selectFile(file.id, true));
-    elements.fileList.append(button);
+
+    const actions = document.createElement("div");
+    actions.className = "file-actions";
+
+    const refresh = document.createElement("button");
+    refresh.type = "button";
+    refresh.className = "file-action";
+    refresh.title = "Обновить документ";
+    refresh.setAttribute("aria-label", `Обновить ${file.displayName}`);
+    refresh.textContent = "⟳";
+    refresh.addEventListener("click", (event) => {
+      event.stopPropagation();
+      selectFile(file.id, true).catch(showError);
+    });
+
+    const unload = document.createElement("button");
+    unload.type = "button";
+    unload.className = "file-action danger";
+    unload.title = "Выгрузить документ";
+    unload.setAttribute("aria-label", `Выгрузить ${file.displayName}`);
+    unload.textContent = "×";
+    unload.addEventListener("click", (event) => {
+      event.stopPropagation();
+      unloadFile(file.id).catch(showError);
+    });
+
+    actions.append(refresh, unload);
+    row.append(button, actions);
+    elements.fileList.append(row);
   }
 }
 
@@ -143,30 +171,31 @@ async function loadFiles({ announce = false } = {}) {
   }
   renderFileList();
   if (state.activeId) await selectFile(state.activeId, state.pinned);
+  else showEmptyState();
   if (announce && state.files.some((file) => !previous.has(file.id))) notify("Добавлены новые документы");
   return state.files.length;
 }
 
-async function unloadActive() {
-  if (!state.activeId) return;
-  const fileId = state.activeId;
-  await unloadAndMaybeClose({
+function showEmptyState() {
+  elements.title.textContent = "Markdown Viewer";
+  elements.source.textContent = "";
+  state.revision = null;
+  elements.document.innerHTML = '<p class="empty-state">Добавьте Markdown-файл командой <code>mdview файл.md</code>.</p>';
+  renderToc([]);
+}
+
+async function unloadFile(fileId) {
+  const nextActiveId = selectNextActiveFile(state.files, fileId, state.activeId);
+  await unloadAndReload({
     remove: () => api(`/api/v1/files/${encodeURIComponent(fileId)}`, { method: "DELETE" }),
     reload: async () => {
-      state.activeId = null;
+      state.activeId = nextActiveId;
       state.pinned = false;
       return loadFiles();
     },
-    close: closeViewer,
   });
 }
 
-async function closeViewer() {
-  await api("/api/v1/shutdown", { method: "POST", body: {} });
-  elements.status.textContent = "Viewer закрыт";
-  window.close();
-}
-
 function connectEvents() {
   const events = new EventSource(`/api/v1/events?clientId=${encodeURIComponent(clientId)}`);
   events.addEventListener("open", () => { elements.status.textContent = "Подключено"; });
@@ -175,7 +204,6 @@ function connectEvents() {
   events.addEventListener("server_closing", () => {
     elements.status.textContent = "Viewer закрывается";
     events.close();
-    window.close();
   });
   events.addEventListener("error", () => { elements.status.textContent = "Переподключение…"; });
 }
@@ -185,9 +213,6 @@ function updateProgress() {
   elements.progress.style.width = `${maximum > 0 ? (scrollY / maximum) * 100 : 0}%`;
 }
 
-elements.refresh.addEventListener("click", () => state.activeId && selectFile(state.activeId, state.pinned));
-elements.unload.addEventListener("click", () => unloadActive().catch(showError));
-elements.close.addEventListener("click", () => closeViewer().catch(showError));
 elements.toggle.addEventListener("click", () => {
   const open = elements.sidebar.classList.toggle("open");
   elements.toggle.setAttribute("aria-expanded", String(open));

package/src/pi_md_viewer/templates/viewer.html

@@ -18,7 +18,6 @@
       <div class="brand">pi · markdown viewer</div>
       <div class="panel-heading">
         <span>Файлы</span>
-        <button id="close-viewer" class="icon-button danger" type="button" title="Закрыть viewer">×</button>
       </div>
       <nav id="file-list" aria-label="Открытые Markdown-файлы"></nav>
     </aside>
@@ -28,10 +27,6 @@
           <h1 id="document-title">Markdown Viewer</h1>
           <div id="source-path" class="source-path"></div>
         </div>
-        <div class="toolbar-actions">
-          <button id="refresh-file" type="button">Обновить</button>
-          <button id="unload-file" type="button">Выгрузить</button>
-        </div>
       </div>
       <div id="notice" class="notice" role="status" hidden></div>
       <div id="error" class="error" role="alert" hidden></div>