import type { Metadata } from "next";
import { ToolLanding } from "@/components/marketing/tool-landing";
import { buildMetadata } from "@/lib/seo";

const PATH = "/tools/markdown-viewer-online";

export const metadata: Metadata = buildMetadata({
  title: "Markdown Viewer Online — Open and Read .md Files in Your Browser",
  description:
    "Open .md files in your browser and view them as rendered HTML. Drag and drop, paste, or share a link. Supports GitHub Flavored Markdown, code highlighting, and dark mode.",
  path: PATH,
  keywords: [
    "markdown viewer online",
    "markdown viewer",
    "open md file online",
    "view markdown online",
    "render markdown",
  ],
});

export default function Page() {
  return (
    <ToolLanding
      eyebrow="Markdown Viewer Online"
      title="Open and read any Markdown file — right in your browser"
      description="Drag a .md file onto the page, paste Markdown, or open a shared link. Markdown Viewer renders GitHub Flavored Markdown with syntax-highlighted code, tables, and task lists."
      path={PATH}
      bullets={[
        "Open .md files without installing anything",
        "GitHub Flavored Markdown with code highlighting",
        "Dark and light themes that follow your system",
        "Shareable preview links — no signup needed",
      ]}
      sample={`# Project notes\n\nA Markdown viewer that renders **GitHub Flavored Markdown** in seconds.\n\n## Highlights\n\n- 📦 No install\n- 🔐 Private — everything in your browser\n- 🌗 Dark and light themes\n- ⚡️ Instant rendering\n\n## A code sample\n\n\`\`\`bash\n# Open Markdown Viewer\nopen https://trymarkdownviewer.com\n\`\`\`\n`}
      body={`## What is an online Markdown viewer?

An online Markdown viewer renders \`.md\` files as a readable web page — without making you set up a text editor or static site. Markdown Viewer is exactly that, with three additions writers and developers rely on:

1. **Live editing.** It's not just a read-only viewer — you can tweak the file in place.
2. **Format and lint tools.** Beautify, outline, and link-check what you're reading.
3. **Privacy.** The file you drop is processed in your browser and never uploaded.

## Three ways to view Markdown

- **Drag and drop**: drop the file anywhere on the editor.
- **Paste**: paste the raw Markdown text into the editor.
- **Share link**: open a shareable URL someone sent you.

## Reading experience

The preview is styled with the **Tailwind CSS Typography** plugin and tuned for screen readability — comfortable line length, sensible heading scale, and high-contrast colors in both themes.

## Power features for power users

- **Outline navigator** — jump between headings with one click.
- **Word count, character count, and reading time** in the status bar.
- **Print to PDF** with a clean, print-ready layout.
`}
      faq={[
        {
          question: "Is it safe to open Markdown files in the browser?",
          answer:
            "Yes. The HTML rendered from your Markdown is sanitized with rehype-sanitize using a strict allowlist, so even if a document contains raw HTML it won't execute scripts.",
        },
        {
          question: "Can the viewer open files larger than 1MB?",
          answer:
            "Yes, but very large files (10MB+) may take a moment to render on slower devices because everything happens client-side.",
        },
        {
          question: "Does the viewer work on mobile?",
          answer:
            "Yes. The layout adapts to small screens and you can switch between editor and preview using the view toggle.",
        },
        {
          question: "How do I share a Markdown file?",
          answer:
            "Open the file in the editor and click Share in the toolbar. A self-contained URL is copied to your clipboard — anyone with the link can view the same file.",
        },
      ]}
    />
  );
}