simple-fs-server/islands/ContentRenderer.tsx

import { extname } from "path/posix.ts";
import MarkdownRenderer from "../components/MarkdownRenderer.tsx";
import { useEffect, useState } from "preact/hooks";

const TypeToExt = {
  "image": new Set([".png", ".jpg", ".jpeg", ".gif", ".svg"]),
  "video": new Set([".mp4", ".webm", ".ogg"]),
  "audio": new Set([".mp3", ".wav", ".flac"]),
  "md": new Set([".md"]),
  "text": new Set([".txt"]),
  "code": new Set([".json", ".js", ".ts", ".css", ".tsx", ".jsx"]),
};

function extToType(ext: string) {
  for (const [type, exts] of Object.entries(TypeToExt)) {
    if (exts.has(ext)) {
      return type;
    }
  }
  return "unknown";
}

function FetchAndRender(props: { src: string; type: string }) {
  const src = props.src;
  const ext = extname(src);
  const [content, setContent] = useState("");
  useEffect(() => {
    (async () => {
      const res = await fetch(src);
      const content = await res.text();
      setContent(content);
    })();
  }, [src]);

  switch (props.type) {
    case "text":
      return <div style={{ whiteSpace: "pre-wrap" }}>{content}</div>;
    case "md":
      return <MarkdownRenderer text={content} />;
    case "code":
      return (
        <pre
          style={{ whiteSpace: "pre-wrap" }}
        ><code lang={ext.slice(1)}>{content}</code></pre>
      );
    //case "csv":
    //    return <CsvRenderer content={content} />;
    default:
      return <p>error: invalid type: {props.type} content: {content}</p>;
  }
}

export function RenderView(props: { src: string }) {
  const src = props.src;
  const type = extToType(extname(src));
  switch (type) {
    case "text":
    case "md":
    case "code":
      return <FetchAndRender src={src} type={type}></FetchAndRender>;
    //case "csv":
    //    return <CsvRenderer content={content} />;
    case "image":
      return <img style={{ width: "100%" }} src={src} />;
    case "video":
      return <video style={{ width: "100%" }} controls src={src} />;
    case "audio":
      return <audio style={{ width: "100%" }} controls src={src} />;
    default:
      return <p>error: invalid type: {type} src: {src}</p>;
  }
}

export default RenderView;