seemore 1.8.0 → 1.8.2

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.
@@ -126,7 +128,7 @@ Install **seemore** from the [VS Code Marketplace](https://marketplace.visualstu
 | --- | --- | --- |
 | **Open in seemore** | Editor title bar, on any Markdown file | Renders that file's folder as a site |
 | **Open Folder in seemore** | Explorer, right-click a folder | Renders that folder as a site and pins it as the root |
-| **Pin Current Root** | Status bar item, while a site is open | Pins the currently-serving root for this workspace |
+| **Choose Root** | Status bar item, or the command palette | Pins the folder being served, clears a pinned root, or picks another folder to serve |
 
 ### Settings
 
@@ -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.0",
+  "version": "1.8.2",
   "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 { FileText } from 'lucide-react';
 
 /**
  * Sibling PDFs render in the browser's own viewer.
@@ -9,14 +10,18 @@ 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 most mobile browsers degrade `<embed>` to a blank box, since they don't
+ * support inline PDF plugins. There's no reliable JS-free way to detect that, so the CSS
+ * in globals.css hides the embed and expands this link into a full card under
+ * `(pointer: coarse)` — touch devices are the same population that lacks embed support.
  */
 export function Pdf({ src, title, ...props }: ComponentProps<'embed'> & { src: string }) {
   return (
     <span className="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

@@ -185,8 +185,11 @@
     @apply fixed inset-0 z-30 bg-black/40 md:hidden;
   }
 
+  /* A flex column, so the site footer can take `mt-auto`: on a page too short to fill the
+     viewport it settles at the bottom instead of floating mid-screen, and on a long one the
+     `gap-10` is all that separates it from the content above. */
   .seemore-main {
-    @apply mx-auto min-w-0 max-w-3xl flex-1 px-4 py-8 md:px-8;
+    @apply mx-auto flex min-w-0 max-w-3xl flex-1 flex-col gap-10 px-4 py-8 md:px-8;
   }
 
   /* Docs are full of long identifiers — `EmbeddedPaymentsController`,
@@ -224,7 +227,7 @@
   }
 
   .seemore-page-footer {
-    @apply mt-10 grid grid-cols-2 gap-4 border-t border-fd-border pt-6 text-sm;
+    @apply grid grid-cols-2 gap-4 border-t border-fd-border pt-6 text-sm;
   }
 
   .seemore-next {
@@ -236,11 +239,11 @@
   }
 
   .seemore-edit-link {
-    @apply mt-8 inline-flex items-center gap-2 text-sm text-fd-muted-foreground;
+    @apply inline-flex items-center gap-2 self-start text-sm text-fd-muted-foreground;
   }
 
   .seemore-site-footer {
-    @apply mt-10 flex flex-wrap gap-4 border-t border-fd-border pt-6 text-sm text-fd-muted-foreground;
+    @apply mt-auto flex flex-wrap gap-4 border-t border-fd-border pt-6 text-sm text-fd-muted-foreground;
   }
 
   /* The generated index page: pages as cards, folders as titled sections of cards. */
@@ -422,8 +425,32 @@
     @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. */
+  @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;
+    }
   }
 }
 
@@ -438,5 +465,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. */