seemore 1.8.1 → 1.8.3

package/README.md

@@ -60,7 +60,9 @@ And whichever preview is open, the page is also an editor: **double-click any pa
 
 ## Who is seemore for?
 
-If your documentation is a folder of Markdown files, seemore helps you browse, review, edit and publish it with almost no setup.
+<p align="center">
+  <video src="https://github.com/user-attachments/assets/8142fcb4-2a1f-4e48-82b5-059a28fc0cf2" width="640" controls muted></video>
+</p>
 
 Typical use cases include:
 
@@ -113,7 +115,7 @@ export default {
 Install **seemore** from the [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=arifszn.seemore-vscode) or [Open VSX](https://open-vsx.org/extension/arifszn/seemore-vscode) to get the same rendered site as a panel beside your editor — no terminal, no `npx`, no browser tab to manage. The extension bundles the CLI, so nothing is downloaded or put on your PATH. Open VSX also covers VS Code-compatible editors — Cursor, Antigravity, and others.
 
 <p align="center">
-  <img src="https://raw.githubusercontent.com/arifszn/seemore/main/packages/site/assets/vscode-extension.png" alt="VS Code with a Markdown file open in the editor and the seemore panel rendering the same folder as a site beside it" width="640"/>
+  <img src="https://raw.githubusercontent.com/arifszn/seemore/main/packages/site/assets/vscode-extension.png" alt="VS Code with features.md open in the editor and the seemore panel beside it, rendering the same page with a paragraph's Markdown source open in the inline editor" width="640"/>
 </p>
 
 1. Open any Markdown file.
@@ -245,6 +247,26 @@ Supports `.md` and `.mdx` both.
 - Sibling images inlined as hashed assets with click-to-zoom, sibling PDFs open in the browser's own viewer
 - Frontmatter keys are validated
 
+### PDF viewer
+
+Reference a PDF with image syntax and it opens inline in the browser's own viewer, with a download link underneath — a sibling file or a remote URL both work:
+
+```md
+![sample document](./assets/sample.pdf)
+```
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/arifszn/seemore/main/packages/site/assets/pdf-viewer.png" alt="A sample PDF rendered inline on the page in the browser's native PDF viewer, with a Download sample document link underneath" width="640"/>
+</p>
+
+### Diagrams
+
+A ` ```mermaid ` or ` ```d2 ` code fence renders live in the browser, no build step or external service:
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/arifszn/seemore/main/packages/site/assets/diagrams.png" alt="A mermaid flowchart reading Markdown, seemore, Static site rendered live on the Diagrams page, with a D2 diagram of the same chain below it" width="640"/>
+</p>
+
 ### Code blocks
 
 Code is syntax-highlighted automatically — nothing to configure. Add a filename or line numbers by putting them after the language on the fence line:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "seemore",
-  "version": "1.8.1",
+  "version": "1.8.3",
   "description": "Let AI write the Markdown. Let seemore show it better — zero config documentation framework.",
   "license": "MIT",
   "type": "module",

package/src/app/mdx/Pdf.tsx

@@ -1,4 +1,5 @@
-import type { ComponentProps } from 'react';
+import { useEffect, useState, type ComponentProps } from 'react';
+import { FileText } from 'lucide-react';
 
 /**
  * Sibling PDFs render in the browser's own viewer.
@@ -9,14 +10,28 @@ import type { ComponentProps } from 'react';
  * on a `<span>` gets the same layout with none of that.
  *
  * `pdfjs-dist` is roughly a megabyte, which is a poor trade for a docs site. The accepted
- * cost is that most mobile browsers degrade `<embed>` to a download link.
+ * cost is that some environments degrade `<embed>` to a blank box, since they don't support
+ * inline PDF plugins — most mobile browsers, but also Electron-based webviews (VS Code's
+ * preview included), which don't ship Chrome's PDF viewer extension despite reporting a
+ * fine pointer. The CSS `(pointer: coarse)` fallback in globals.css only catches the first
+ * group, so `navigator.pdfViewerEnabled` — Chromium/Firefox's direct feature check — is used
+ * to catch the second by toggling the same fallback via a class instead of a media query.
  */
 export function Pdf({ src, title, ...props }: ComponentProps<'embed'> & { src: string }) {
+  const [unsupported, setUnsupported] = useState(false);
+
+  useEffect(() => {
+    if ('pdfViewerEnabled' in navigator && !navigator.pdfViewerEnabled) {
+      setUnsupported(true);
+    }
+  }, []);
+
   return (
-    <span className="seemore-pdf">
+    <span className={unsupported ? 'seemore-pdf seemore-pdf-unsupported' : 'seemore-pdf'}>
       <embed src={src} type="application/pdf" title={title} {...props} />
-      <a href={src} download>
-        Download {title ?? 'PDF'}
+      <a className="seemore-pdf-fallback" href={src} download>
+        <FileText className="seemore-pdf-fallback-icon" aria-hidden="true" />
+        <span className="seemore-pdf-fallback-title">Download {title ?? 'PDF'}</span>
       </a>
     </span>
   );

package/src/app/styles/globals.css

@@ -425,8 +425,47 @@
     @apply block h-[70vh] w-full rounded-lg border border-fd-border;
   }
 
-  .seemore-pdf a {
-    @apply mt-2 block text-sm text-fd-muted-foreground;
+  .seemore-pdf-fallback {
+    @apply mt-2 flex items-center gap-2 text-sm text-fd-muted-foreground no-underline transition-colors hover:text-fd-foreground;
+  }
+
+  .seemore-pdf-fallback-icon {
+    @apply size-4 shrink-0;
+  }
+
+  .seemore-pdf-fallback-title {
+    @apply font-medium text-fd-foreground;
+  }
+
+  /* Most touch browsers can't render `<embed type="application/pdf">` at all, so the box
+     above sits blank. Hide it there and promote the download link into the primary UI.
+     `.seemore-pdf-unsupported` is the same fallback, applied via JS (see Pdf.tsx) for
+     environments — Electron webviews included — that fail the same way despite a fine
+     pointer, so both selectors share these rules. */
+  @media (pointer: coarse) {
+    .seemore-pdf embed {
+      @apply hidden;
+    }
+
+    .seemore-pdf-fallback {
+      @apply mt-0 flex-col items-start gap-1 rounded-lg border border-fd-border bg-fd-card px-4 py-4 hover:border-fd-primary/60;
+    }
+
+    .seemore-pdf-fallback-icon {
+      @apply size-6;
+    }
+  }
+
+  .seemore-pdf-unsupported embed {
+    @apply hidden;
+  }
+
+  .seemore-pdf-unsupported .seemore-pdf-fallback {
+    @apply mt-0 flex-col items-start gap-1 rounded-lg border border-fd-border bg-fd-card px-4 py-4 hover:border-fd-primary/60;
+  }
+
+  .seemore-pdf-unsupported .seemore-pdf-fallback-icon {
+    @apply size-6;
   }
 }
 
@@ -441,5 +480,13 @@
   }
 }
 
+/* Unlayered, deliberately, for the same reason as the dialog fix above: fumadocs underlines
+   in-content links from its utilities layer, which beats `@layer components` regardless of
+   specificity. The PDF fallback reads as a button, not prose — it keeps its icon and title
+   flush, with no underline. */
+.seemore-pdf-fallback {
+  text-decoration-line: none;
+}
+
 /* seemore:user-css — the stylesheet named by `css` in seemore.config.ts is inlined here, at
    the very end, so that it wins against everything above it. */