feat(web): wrap repo images in Link to blob view

Quentin Gliech and Claude Opus 4.6 (1M context) created 1 month ago

repo-local images in markdown are now wrapped in a TanStack Router
Link to the blob viewer, so clicking an image navigates to the file

  <Link to="/$repo/blob/$ref/$" params={...}>
    <img src="/gitraw/repo/ref/path" />
  </Link>

Co-Authored-By: Claude Opus 4.6 (1M context) <[e-mail]>

Change summary

webui2/src/components/content/Markdown.tsx | 13 +++++++++++++
1 file changed, 13 insertions(+)

Detailed changes

webui2/src/components/content/Markdown.tsx

@@ -94,7 +94,20 @@ export function Markdown({ content, className, repoContext }: MarkdownProps) {
   const components = useMemo(() => {
     if (!repoContext) return undefined;
     const { repo, ref, basePath } = repoContext;
+    const gitrawPrefix = `/gitraw/${repo}/${ref}/`;
     return {
+      img: ({ src, alt, ...props }: React.ImgHTMLAttributes<HTMLImageElement>) => {
+        // Wrap repo-local images in a Link to the blob view
+        if (src?.startsWith(gitrawPrefix)) {
+          const path = src.slice(gitrawPrefix.length);
+          return (
+            <Link to="/$repo/blob/$ref/$" params={{ repo, ref, _splat: path }}>
+              <img src={src} alt={alt} {...props} />
+            </Link>
+          );
+        }
+        return <img src={src} alt={alt} {...props} />;
+      },
       a: ({ href, children, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
         if (!href) return <a {...props}>{children}</a>;